From c64f37d580835c81bd90ad11e37f695be43d8293 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 10 Sep 2024 10:20:40 -0400
Subject: [PATCH] refactor(editor): Migrate `RunInfo.vue` to composition API
 (#10721)

---
 packages/editor-ui/src/components/RunInfo.vue | 69 +++++++++----------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 92db3caa8..ed8701698 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,33 +1,34 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import type { ITaskData } from 'n8n-workflow';
 import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	props: {
-		taskData: {}, // ITaskData
-		hasStaleData: Boolean,
-		hasPinData: Boolean,
-	},
+const i18n = useI18n();
 
-	computed: {
-		theme(): string {
-			return this.runTaskData?.error ? 'danger' : 'success';
-		},
-		runTaskData(): ITaskData {
-			return this.taskData as ITaskData;
-		},
-		runMetadata(): { executionTime: number; startTime: string } | null {
-			if (!this.runTaskData) {
-				return null;
-			}
-			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
-			return {
-				executionTime: this.runTaskData.executionTime,
-				startTime: `${date} at ${time}`,
-			};
-		},
-	},
+const props = defineProps<{
+	taskData: ITaskData | null;
+	hasStaleData?: boolean;
+	hasPinData?: boolean;
+}>();
+
+const runTaskData = computed(() => {
+	return props.taskData;
+});
+
+const theme = computed(() => {
+	return props.taskData?.error ? 'danger' : 'success';
+});
+
+const runMetadata = computed(() => {
+	if (!runTaskData.value) {
+		return null;
+	}
+	const { date, time } = convertToDisplayDateComponents(runTaskData.value.startTime);
+	return {
+		executionTime: runTaskData.value.executionTime,
+		startTime: `${date} at ${time}`,
+	};
 });
 </script>
 
@@ -41,7 +42,7 @@ export default defineComponent({
 	>
 		<span
 			v-html="
-				$locale.baseText(
+				i18n.baseText(
 					hasPinData
 						? 'ndv.output.staleDataWarning.pinData'
 						: 'ndv.output.staleDataWarning.regular',
@@ -59,19 +60,17 @@ export default defineComponent({
 		<div>
 			<n8n-text :bold="true" size="small"
 				>{{
-					runTaskData.error
-						? $locale.baseText('runData.executionStatus.failed')
-						: $locale.baseText('runData.executionStatus.success')
+					runTaskData?.error
+						? i18n.baseText('runData.executionStatus.failed')
+						: i18n.baseText('runData.executionStatus.success')
 				}} </n8n-text
 			><br />
-			<n8n-text :bold="true" size="small">{{
-				$locale.baseText('runData.startTime') + ':'
-			}}</n8n-text>
+			<n8n-text :bold="true" size="small">{{ i18n.baseText('runData.startTime') + ':' }}</n8n-text>
 			{{ runMetadata.startTime }}<br />
 			<n8n-text :bold="true" size="small">{{
-				$locale.baseText('runData.executionTime') + ':'
+				i18n.baseText('runData.executionTime') + ':'
 			}}</n8n-text>
-			{{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
+			{{ runMetadata.executionTime }} {{ i18n.baseText('runData.ms') }}
 		</div>
 	</n8n-info-tip>
 </template>