feat(editor): Add node execution status indicator to output panel (#8124)

## Summary
Adding node execution status indicator to the output panel ([Figma
HiFi](https://www.figma.com/file/iUduV3M4W5wZT7Gw5vgDn1/NDV-output-pane-success-state)).

## Related tickets and issues
Fixes ADO-480

## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [x] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

packages/editor-ui/src/components/RunInfo.vue

@@ -1,6 +1,36 @@
 <template>
-	<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
+	<n8n-info-tip
+		v-if="hasStaleData"
+		theme="warning"
+		type="tooltip"
+		tooltipPlacement="right"
+		data-test-id="node-run-info-stale"
+	>
+		<span
+			v-html="
+				$locale.baseText(
+					hasPinData
+						? 'ndv.output.staleDataWarning.pinData'
+						: 'ndv.output.staleDataWarning.regular',
+				)
+			"
+		></span>
+	</n8n-info-tip>
+	<n8n-info-tip
+		v-else-if="runMetadata"
+		type="tooltip"
+		:theme="theme"
+		:data-test-id="`node-run-info-${theme}`"
+		tooltipPlacement="right"
+	>
 		<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 +46,19 @@
 <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,
+		hasPinData: Boolean,
 	},
 
 	computed: {
+		theme(): string {
+			return this.runTaskData?.error ? 'danger' : 'success';
+		},
 		runTaskData(): ITaskData {
 			return this.taskData as ITaskData;
 		},
@@ -30,9 +66,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}`,
 			};
 		},
 	},