diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index 1d7860fd3b468..d38eb402b93ba 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/cypress/e2e/5-ndv.cy.ts @@ -132,6 +132,10 @@ describe('NDV', () => { 'contains.text', "An expression here won't work because it uses .item and n8n can't figure out the matching item.", ); + ndv.getters.nodeRunErrorIndicator().should('be.visible'); + // The error details should be hidden behind a tooltip + ndv.getters.nodeRunErrorIndicator().should('not.contain', 'Start Time'); + ndv.getters.nodeRunErrorIndicator().should('not.contain', 'Execution Time'); }); it('should save workflow using keyboard shortcut from NDV', () => { diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts b/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts index 398932fbb8445..cf27c72a7220b 100644 --- a/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts +++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts @@ -17,3 +17,9 @@ const Template: StoryFn = (args, { argTypes }) => ({ }); export const Note = Template.bind({}); + +export const Tooltip = Template.bind({}); +Tooltip.args = { + type: 'tooltip', + tooltipPlacement: 'right', +}; diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue index ca83aff901856..c551000006b42 100644 --- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue +++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue @@ -2,11 +2,14 @@ import { computed } from 'vue'; import type { Placement } from 'element-plus'; import N8nIcon from '../N8nIcon'; +import N8nTooltip from '../N8nTooltip'; const THEME = ['info', 'info-light', 'warning', 'danger', 'success'] as const; +const TYPE = ['note', 'tooltip'] as const; interface InfoTipProps { theme?: (typeof THEME)[number]; + type?: (typeof TYPE)[number]; bold?: boolean; tooltipPlacement?: Placement; } @@ -14,6 +17,7 @@ interface InfoTipProps { defineOptions({ name: 'N8nInfoTip' }); const props = withDefaults(defineProps(), { theme: 'info', + type: 'note', bold: true, tooltipPlacement: 'top', }); @@ -58,13 +62,28 @@ const iconData = computed((): { icon: string; color: string } => {
- + + + + + + + @@ -102,6 +121,11 @@ const iconData = computed((): { icon: string; color: string } => { } } +.tooltipPopper { + composes: base; + display: inline-flex; +} + .iconText { display: inline-flex; align-items: flex-start; diff --git a/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts b/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts index 883c30ad1dde3..b25713001b563 100644 --- a/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts +++ b/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts @@ -16,4 +16,17 @@ describe('N8nInfoTip', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + + it('should render correctly as tooltip', () => { + const wrapper = render(N8nInfoTip, { + slots, + props: { + type: 'tooltip', + }, + global: { + stubs, + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); }); diff --git a/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap b/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap index 08df4df99940f..4bbaaa8b5db46 100644 --- a/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap +++ b/packages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap @@ -1,3 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`N8nInfoTip > should render correctly as note 1`] = `"
Need help doing something?Open docs
"`; +exports[`N8nInfoTip > should render correctly as note 1`] = `"
Need help doing something?Open docs
"`; + +exports[`N8nInfoTip > should render correctly as tooltip 1`] = ` +"
+ + +
" +`;