From dad11d45399599fa66235bfe47768af9ab11cb5b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 21 Dec 2023 15:12:28 +0100
Subject: [PATCH 1/8] feat(editor): Add node execution status indicator to
 output panel

---
 .../src/components/N8nInfoTip/InfoTip.vue     | 64 ++++++++++++-------
 .../src/components/N8nTooltip/Tooltip.vue     |  2 +-
 .../editor-ui/src/components/OutputPanel.vue  |  4 +-
 packages/editor-ui/src/components/RunInfo.vue | 22 ++++++-
 .../editor-ui/src/mixins/executionsHelpers.ts |  3 +-
 .../editor-ui/src/mixins/genericHelpers.ts    |  8 ---
 .../src/plugins/i18n/locales/en.json          |  2 +
 .../src/utils/formatters/dateFormatter.ts     | 12 ++++
 8 files changed, 81 insertions(+), 36 deletions(-)
 create mode 100644 packages/editor-ui/src/utils/formatters/dateFormatter.ts

diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index 7a81cbb0fd003..90b99e89e6793 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -10,11 +10,11 @@
 		<n8n-tooltip
 			v-if="type === 'tooltip'"
 			:placement="tooltipPlacement"
-			:popper-class="$style.tooltipPopper"
+			:popperClass="$style.tooltipPopper"
 			:disabled="type !== 'tooltip'"
 		>
-			<span :class="$style.iconText">
-				<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
+			<span :class="$style.iconText" :style="{ color: iconData.color }">
+				<n8n-icon :icon="iconData.icon" />
 			</span>
 			<template #content>
 				<span>
@@ -23,7 +23,7 @@
 			</template>
 		</n8n-tooltip>
 		<span :class="$style.iconText" v-else>
-			<n8n-icon :icon="theme.startsWith('info') ? 'info-circle' : 'exclamation-triangle'" />
+			<n8n-icon :icon="iconData.icon" />
 			<span>
 				<slot />
 			</span>
@@ -48,7 +48,7 @@ export default defineComponent({
 			type: String,
 			default: 'info',
 			validator: (value: string): boolean =>
-				['info', 'info-light', 'warning', 'danger'].includes(value),
+				['info', 'info-light', 'warning', 'danger', 'success'].includes(value),
 		},
 		type: {
 			type: String,
@@ -64,6 +64,42 @@ export default defineComponent({
 			default: 'top',
 		},
 	},
+	computed: {
+		iconData(): { icon: string; color: string } {
+			switch (this.theme) {
+				case 'info':
+					return {
+						icon: 'info-circle',
+						color: '--color-text-light)',
+					};
+				case 'info-light':
+					return {
+						icon: 'info-circle',
+						color: 'var(--color-foreground-dark)',
+					};
+				case 'warning':
+					return {
+						icon: 'exclamation-triangle',
+						color: 'var(--color-warning)',
+					};
+				case 'danger':
+					return {
+						icon: 'exclamation-triangle',
+						color: 'var(--color-danger)',
+					};
+				case 'success':
+					return {
+						icon: 'check-circle',
+						color: 'var(--color-success)',
+					};
+				default:
+					return {
+						icon: 'info-circle',
+						color: '--color-text-light)',
+					};
+			}
+		},
+	},
 });
 </script>
 
@@ -92,7 +128,7 @@ export default defineComponent({
 	}
 }
 
-.tooltip {
+.tooltipPopper {
 	composes: base;
 	display: inline-flex;
 }
@@ -101,20 +137,4 @@ export default defineComponent({
 	display: inline-flex;
 	align-items: flex-start;
 }
-
-.info-light {
-	color: var(--color-foreground-dark);
-}
-
-.info {
-	color: var(--color-text-light);
-}
-
-.warning {
-	color: var(--color-warning);
-}
-
-.danger {
-	color: var(--color-danger);
-}
 </style>
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index ee8c53683a4c6..c49df4118457b 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-tooltip v-bind="{ ...$props, ...$attrs }" popper-class="n8n-tooltip">
+	<el-tooltip v-bind="{ ...$props, ...$attrs }" :popperClass="$props.popperClass ?? 'n8n-tooltip'">
 		<slot />
 		<template #content>
 			<slot name="content">
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 9a0f5ba2697b7..e0439c27096fb 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -36,11 +36,11 @@
 					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
-					v-if="!hasPinData && runsCount === 1"
+					v-if="hasNodeRun && !hasPinData && runsCount === 1"
 					v-show="!outputPanelEditMode.enabled"
 					:taskData="runTaskData"
+					:hasStaleData="staleData"
 				/>
-
 				<n8n-info-tip
 					theme="warning"
 					type="tooltip"
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 5f2136a771996..1ae3e130c17ee 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,6 +1,18 @@
 <template>
-	<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
+	<n8n-info-tip
+		type="tooltip"
+		:theme="theme"
+		:tooltipPlacement="hasStaleData ? 'left' : 'right'"
+		v-if="runMetadata"
+	>
 		<div>
+			<n8n-text :bold="true" size="small"
+				>{{
+					runTaskData.error
+						? $locale.baseText('runData.executionStatus.failed')
+						: $locale.baseText('runData.executionStatus.success')
+				}} </n8n-text
+			><br />
 			<n8n-text :bold="true" size="small">{{
 				$locale.baseText('runData.startTime') + ':'
 			}}</n8n-text>
@@ -16,13 +28,18 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { ITaskData } from 'n8n-workflow';
+import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
 
 export default defineComponent({
 	props: {
 		taskData: {}, // ITaskData
+		hasStaleData: Boolean,
 	},
 
 	computed: {
+		theme(): string {
+			return this.runTaskData?.error ? 'danger' : 'success';
+		},
 		runTaskData(): ITaskData {
 			return this.taskData as ITaskData;
 		},
@@ -30,9 +47,10 @@ export default defineComponent({
 			if (!this.runTaskData) {
 				return null;
 			}
+			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
 			return {
 				executionTime: this.runTaskData.executionTime,
-				startTime: new Date(this.runTaskData.startTime).toLocaleString(),
+				startTime: `${date} at ${time}`,
 			};
 		},
 	},
diff --git a/packages/editor-ui/src/mixins/executionsHelpers.ts b/packages/editor-ui/src/mixins/executionsHelpers.ts
index 29a6c729485dc..9e4ac53411798 100644
--- a/packages/editor-ui/src/mixins/executionsHelpers.ts
+++ b/packages/editor-ui/src/mixins/executionsHelpers.ts
@@ -4,6 +4,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { i18n as locale } from '@/plugins/i18n';
 import { genericHelpers } from './genericHelpers';
 import type { IExecutionsSummary } from 'n8n-workflow';
+import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
 
 export interface IExecutionUIData {
 	name: string;
@@ -72,7 +73,7 @@ export const executionHelpers = defineComponent({
 			return status;
 		},
 		formatDate(fullDate: Date | string | number) {
-			const { date, time } = this.convertToDisplayDate(fullDate);
+			const { date, time } = convertToDisplayDateComponents(fullDate);
 			return locale.baseText('executionsList.started', { interpolate: { time, date } });
 		},
 	},
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index 826814c8378e4..40f8eaafa06c3 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -48,14 +48,6 @@ export const genericHelpers = defineComponent({
 
 			return `${minutesPassed}:${secondsLeft}${this.$locale.baseText('genericHelpers.minShort')}`;
 		},
-		convertToDisplayDate(fullDate: Date | string | number): { date: string; time: string } {
-			const mask = `d mmm${
-				new Date(fullDate).getFullYear() === new Date().getFullYear() ? '' : ', yyyy'
-			}#HH:MM:ss`;
-			const formattedDate = dateformat(fullDate, mask);
-			const [date, time] = formattedDate.split('#');
-			return { date, time };
-		},
 
 		/**
 		 * @note Loading helpers extracted as composable in useLoadingService
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 090f68d563c94..f520c7dde1b45 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1337,6 +1337,8 @@
 	"runData.editOutputInvalid.onLine": "On line {line}:",
 	"runData.editOutputInvalid.atPosition": "(at position {position})",
 	"runData.editValue": "Edit Value",
+	"runData.executionStatus.success": "Executed successfully",
+	"runData.executionStatus.failed": "Execution failed",
 	"runData.downloadBinaryData": "Download",
 	"runData.executeNode": "Execute Node",
 	"runData.executionTime": "Execution Time",
diff --git a/packages/editor-ui/src/utils/formatters/dateFormatter.ts b/packages/editor-ui/src/utils/formatters/dateFormatter.ts
new file mode 100644
index 0000000000000..68ac9149c3591
--- /dev/null
+++ b/packages/editor-ui/src/utils/formatters/dateFormatter.ts
@@ -0,0 +1,12 @@
+import dateformat from "dateformat";
+
+export const convertToDisplayDateComponents = (
+	fullDate: Date | string | number,
+): { date: string; time: string } => {
+	const mask = `d mmm${
+		new Date(fullDate).getFullYear() === new Date().getFullYear() ? '' : ', yyyy'
+	}#HH:MM:ss`;
+	const formattedDate = dateformat(fullDate, mask);
+	const [date, time] = formattedDate.split('#');
+	return { date, time };
+};

From 8bccdd09b3831ba1c8b1e88287d568562d458ea9 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 21 Dec 2023 15:49:29 +0100
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=85=20Added=20e2e=20tests=20for=20sta?=
 =?UTF-8?q?tus=20indicators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/5-ndv.cy.ts                       | 23 +++++++++++++++++++
 cypress/pages/ndv.ts                          |  2 ++
 packages/editor-ui/src/components/RunInfo.vue |  3 ++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index b7711b36e81d5..f2d817420c92f 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -490,4 +490,27 @@ describe('NDV', () => {
 		ndv.getters.nodeVersion().should('have.text', 'Function node version 1 (Deprecated)');
 		ndv.actions.close();
 	});
+	it('should properly show node execution indicator', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Code');
+		workflowPage.actions.openNode('Code');
+		// Should not show run info before execution
+		ndv.getters.nodeRunSuccessIndicator().should('not.exist');
+		ndv.getters.nodeRunErrorIndicator().should('not.exist');
+		ndv.getters.nodeExecuteButton().click();
+		ndv.getters.nodeRunSuccessIndicator().should('exist');
+	});
+	it('should properly show node execution indicator for multiple nodes', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Code');
+		workflowPage.actions.openNode('Code');
+		ndv.actions.clearParameterInput('jsCode');
+		ndv.getters.backToCanvas().click();
+		workflowPage.actions.executeWorkflow();
+		// Manual tigger node should show success indicator
+		workflowPage.actions.openNode('When clicking "Execute Workflow"');
+		ndv.getters.nodeRunSuccessIndicator().should('exist');
+		// Code node should show error
+		ndv.getters.backToCanvas().click();
+		workflowPage.actions.openNode('Code');
+		ndv.getters.nodeRunErrorIndicator().should('exist');
+	});
 });
diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
index 0eaa1361cfa82..74680a077630a 100644
--- a/cypress/pages/ndv.ts
+++ b/cypress/pages/ndv.ts
@@ -98,6 +98,8 @@ export class NDV extends BasePage {
 		pagination: () => cy.getByTestId('ndv-data-pagination'),
 		nodeVersion: () => cy.getByTestId('node-version'),
 		nodeSettingsTab: () => cy.getByTestId('tab-settings'),
+		nodeRunSuccessIndicator: () => cy.getByTestId('node-run-info-success'),
+		nodeRunErrorIndicator: () => cy.getByTestId('node-run-info-danger'),
 	};
 
 	actions = {
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 1ae3e130c17ee..bae788efe525d 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,9 +1,10 @@
 <template>
 	<n8n-info-tip
+		v-if="runMetadata"
 		type="tooltip"
 		:theme="theme"
 		:tooltipPlacement="hasStaleData ? 'left' : 'right'"
-		v-if="runMetadata"
+		:data-test-id="`node-run-info-${theme}`"
 	>
 		<div>
 			<n8n-text :bold="true" size="small"

From cb35cd756040604540f418399180d6c33c2ca47b Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 21 Dec 2023 16:11:58 +0100
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=91=95=20Removing=20unused=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-ui/src/mixins/genericHelpers.ts          | 1 -
 packages/editor-ui/src/utils/formatters/dateFormatter.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index 40f8eaafa06c3..1c93e065d01f3 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -1,6 +1,5 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import dateformat from 'dateformat';
 import { VIEWS } from '@/constants';
 import { useToast } from '@/composables/useToast';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
diff --git a/packages/editor-ui/src/utils/formatters/dateFormatter.ts b/packages/editor-ui/src/utils/formatters/dateFormatter.ts
index 68ac9149c3591..a1fec9caff45a 100644
--- a/packages/editor-ui/src/utils/formatters/dateFormatter.ts
+++ b/packages/editor-ui/src/utils/formatters/dateFormatter.ts
@@ -1,4 +1,4 @@
-import dateformat from "dateformat";
+import dateformat from 'dateformat';
 
 export const convertToDisplayDateComponents = (
 	fullDate: Date | string | number,

From bf0e6c5d67472bdea3902ae5f5dcb84c2cfd29f5 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Thu, 21 Dec 2023 16:43:51 +0100
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=92=84=20Fixing=20output=20panel=20he?=
 =?UTF-8?q?ader=20components=20alignment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/src/components/N8nInfoTip/InfoTip.vue | 5 +++++
 packages/editor-ui/src/components/OutputPanel.vue            | 1 +
 2 files changed, 6 insertions(+)

diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index 90b99e89e6793..394b994c8e7c8 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -2,6 +2,7 @@
 	<div
 		:class="{
 			'n8n-info-tip': true,
+			[$style.infoTip]: true,
 			[$style[theme]]: true,
 			[$style[type]]: true,
 			[$style.bold]: bold,
@@ -104,6 +105,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
+.infoTip {
+	display: flex;
+}
+
 .base {
 	font-size: var(--font-size-2xs);
 	line-height: var(--font-size-s);
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index e0439c27096fb..bea8753aa3f03 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -352,6 +352,7 @@ export default defineComponent({
 }
 .titleSection {
 	display: flex;
+	align-items: center;
 
 	> * {
 		margin-right: var(--spacing-2xs);

From 3685ad588838ea7a10e5a83b7e088b3242808fc4 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 22 Dec 2023 09:46:03 +0100
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=94=EF=B8=8F=20Updating=20run=20data?=
 =?UTF-8?q?=20test=20snapshot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/__snapshots__/RunDataSchema.test.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
index 394d4b03c1402..60c00cceb70c6 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataSchema.test.ts.snap
@@ -320,7 +320,7 @@ exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
     class="schemaWrapper"
   >
     <div
-      class="n8n-info-tip info note bold"
+      class="n8n-info-tip infoTip info note bold"
     >
       <span
         class="iconText"

From e3eec65d59e40632311646fbc3781f410adc4e3f Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 22 Dec 2023 10:58:51 +0100
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=91=8C=20Adding=20back=20deleted=20cu?=
 =?UTF-8?q?rly=20braces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/5-ndv.cy.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index fe65f18648fa2..3b2d2bdf8a625 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -512,6 +512,7 @@ describe('NDV', () => {
 		ndv.getters.backToCanvas().click();
 		workflowPage.actions.openNode('Code');
 		ndv.getters.nodeRunErrorIndicator().should('exist');
+	});
 	it('Should handle mismatched option attributes', () => {
 		workflowPage.actions.addInitialNodeToCanvas('LDAP', { keepNdvOpen: true, action: 'Create a new entry' });
 		// Add some attributes in Create operation

From 8b1ade17936c78aabd646c432799a2d71cb61c91 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 22 Dec 2023 11:39:13 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=E2=9A=A1=20Merging=20stale=20data=20icon?=
 =?UTF-8?q?=20with=20execution=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor-ui/src/components/OutputPanel.vue    | 17 +----------------
 packages/editor-ui/src/components/RunInfo.vue   | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index bea8753aa3f03..2d0061be3b11b 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -40,23 +40,8 @@
 					v-show="!outputPanelEditMode.enabled"
 					:taskData="runTaskData"
 					:hasStaleData="staleData"
+					:hasPinData="hasPinData"
 				/>
-				<n8n-info-tip
-					theme="warning"
-					type="tooltip"
-					tooltipPlacement="right"
-					v-if="hasNodeRun && staleData"
-				>
-					<span
-						v-html="
-							$locale.baseText(
-								hasPinData
-									? 'ndv.output.staleDataWarning.pinData'
-									: 'ndv.output.staleDataWarning.regular',
-							)
-						"
-					></span>
-				</n8n-info-tip>
 			</div>
 		</template>
 
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index bae788efe525d..64e14b66e6900 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,10 +1,21 @@
 <template>
+	<n8n-info-tip theme="warning" type="tooltip" tooltipPlacement="right" v-if="hasStaleData">
+		<span
+			v-html="
+				$locale.baseText(
+					hasPinData
+						? 'ndv.output.staleDataWarning.pinData'
+						: 'ndv.output.staleDataWarning.regular',
+				)
+			"
+		></span>
+	</n8n-info-tip>
 	<n8n-info-tip
-		v-if="runMetadata"
+		v-else-if="runMetadata"
 		type="tooltip"
 		:theme="theme"
-		:tooltipPlacement="hasStaleData ? 'left' : 'right'"
 		:data-test-id="`node-run-info-${theme}`"
+		tooltipPlacement="right"
 	>
 		<div>
 			<n8n-text :bold="true" size="small"
@@ -35,6 +46,7 @@ export default defineComponent({
 	props: {
 		taskData: {}, // ITaskData
 		hasStaleData: Boolean,
+		hasPinData: Boolean,
 	},
 
 	computed: {

From 7a06b447f9846e663900df9cb5d616f924e6d3db Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 22 Dec 2023 12:19:56 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=E2=9C=94=EF=B8=8F=20Updating=20e2e=20tests?=
 =?UTF-8?q?=20after=20merging=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/5-ndv.cy.ts                       | 2 +-
 packages/editor-ui/src/components/RunInfo.vue | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 3b2d2bdf8a625..4249018b89bbc 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -502,7 +502,7 @@ describe('NDV', () => {
 	it('should properly show node execution indicator for multiple nodes', () => {
 		workflowPage.actions.addInitialNodeToCanvas('Code');
 		workflowPage.actions.openNode('Code');
-		ndv.actions.clearParameterInput('jsCode');
+		ndv.actions.typeIntoParameterInput('jsCode', 'testets');
 		ndv.getters.backToCanvas().click();
 		workflowPage.actions.executeWorkflow();
 		// Manual tigger node should show success indicator
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 64e14b66e6900..3bad5647ac70f 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,5 +1,11 @@
 <template>
-	<n8n-info-tip theme="warning" type="tooltip" tooltipPlacement="right" v-if="hasStaleData">
+	<n8n-info-tip
+		v-if="hasStaleData"
+		theme="warning"
+		type="tooltip"
+		tooltipPlacement="right"
+		data-test-id="node-run-info-stale"
+	>
 		<span
 			v-html="
 				$locale.baseText(