fix(editor): Revert remove tooltip from info tip (no-changelog) (#10771)

n8n-io · Sep 11, 2024 · 99ba710 · 99ba710
1 parent a1e011d
commit 99ba710
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 3 deletions.
diff --git 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
@@ -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
@@ -2,18 +2,22 @@
 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;
 }
 
 defineOptions({ name: 'N8nInfoTip' });
 const props = withDefaults(defineProps<InfoTipProps>(), {
 	theme: 'info',
+	type: 'note',
 	bold: true,
 	tooltipPlacement: 'top',
 });
@@ -58,13 +62,28 @@ const iconData = computed((): { icon: string; color: string } => {
 	<div
 		:class="{
 			'n8n-info-tip': true,
-			[$style.note]: true,
 			[$style.infoTip]: true,
 			[$style[theme]]: true,
+			[$style[type]]: true,
 			[$style.bold]: bold,
 		}"
 	>
-		<span :class="$style.iconText">
+		<N8nTooltip
+			v-if="type === 'tooltip'"
+			:placement="tooltipPlacement"
+			:popper-class="$style.tooltipPopper"
+			:disabled="type !== 'tooltip'"
+		>
+			<span :class="$style.iconText" :style="{ color: iconData.color }">
+				<N8nIcon :icon="iconData.icon" />
+			</span>
+			<template #content>
+				<span>
+					<slot />
+				</span>
+			</template>
+		</N8nTooltip>
+		<span v-else :class="$style.iconText">
 			<N8nIcon :icon="iconData.icon" />
 			<span>
 				<slot />
@@ -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
@@ -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/...ages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap b/...ages/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`] = `"<div class="n8n-info-tip note infoTip info bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
+exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip infoTip info note bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
+
+exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
+"<div class="n8n-info-tip infoTip info tooltip bold"><span class="iconText el-tooltip__trigger el-tooltip__trigger"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span></span>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;