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

---
 .../editor-ui/src/components/AboutModal.vue   | 73 ++++++++-----------
 1 file changed, 31 insertions(+), 42 deletions(-)

diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 83b4c2becd..e6f426baef 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -1,50 +1,39 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
 import { createEventBus } from 'n8n-design-system/utils';
 import Modal from './Modal.vue';
 import { ABOUT_MODAL_KEY } from '../constants';
-import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/root.store';
 import { useToast } from '@/composables/useToast';
 import { useClipboard } from '@/composables/useClipboard';
 import { useDebugInfo } from '@/composables/useDebugInfo';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'About',
-	components: {
-		Modal,
-	},
-	data() {
-		return {
-			ABOUT_MODAL_KEY,
-			modalBus: createEventBus(),
-		};
-	},
-	computed: {
-		...mapStores(useRootStore, useSettingsStore),
-	},
-	methods: {
-		closeDialog() {
-			this.modalBus.emit('close');
-		},
-		async copyDebugInfoToClipboard() {
-			useToast().showToast({
-				title: this.$locale.baseText('about.debug.toast.title'),
-				message: this.$locale.baseText('about.debug.toast.message'),
-				type: 'info',
-				duration: 5000,
-			});
-			await useClipboard().copy(useDebugInfo().generateDebugInfo());
-		},
-	},
-});
+const modalBus = createEventBus();
+const toast = useToast();
+const i18n = useI18n();
+const debugInfo = useDebugInfo();
+const clipboard = useClipboard();
+const rootStore = useRootStore();
+
+const closeDialog = () => {
+	modalBus.emit('close');
+};
+
+const copyDebugInfoToClipboard = async () => {
+	toast.showToast({
+		title: i18n.baseText('about.debug.toast.title'),
+		message: i18n.baseText('about.debug.toast.message'),
+		type: 'info',
+		duration: 5000,
+	});
+	await clipboard.copy(debugInfo.generateDebugInfo());
+};
 </script>
 
 <template>
 	<Modal
 		max-width="540px"
-		:title="$locale.baseText('about.aboutN8n')"
+		:title="i18n.baseText('about.aboutN8n')"
 		:event-bus="modalBus"
 		:name="ABOUT_MODAL_KEY"
 		:center="true"
@@ -53,7 +42,7 @@ export default defineComponent({
 			<div :class="$style.container">
 				<el-row>
 					<el-col :span="8" class="info-name">
-						<n8n-text>{{ $locale.baseText('about.n8nVersion') }}</n8n-text>
+						<n8n-text>{{ i18n.baseText('about.n8nVersion') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
 						<n8n-text>{{ rootStore.versionCli }}</n8n-text>
@@ -61,7 +50,7 @@ export default defineComponent({
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						<n8n-text>{{ $locale.baseText('about.sourceCode') }}</n8n-text>
+						<n8n-text>{{ i18n.baseText('about.sourceCode') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
 						<n8n-link to="https://github.com/n8n-io/n8n">https://github.com/n8n-io/n8n</n8n-link>
@@ -69,17 +58,17 @@ export default defineComponent({
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						<n8n-text>{{ $locale.baseText('about.license') }}</n8n-text>
+						<n8n-text>{{ i18n.baseText('about.license') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
 						<n8n-link to="https://github.com/n8n-io/n8n/blob/master/LICENSE.md">
-							{{ $locale.baseText('about.n8nLicense') }}
+							{{ i18n.baseText('about.n8nLicense') }}
 						</n8n-link>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						<n8n-text>{{ $locale.baseText('about.instanceID') }}</n8n-text>
+						<n8n-text>{{ i18n.baseText('about.instanceID') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
 						<n8n-text>{{ rootStore.instanceId }}</n8n-text>
@@ -87,11 +76,11 @@ export default defineComponent({
 				</el-row>
 				<el-row>
 					<el-col :span="8" class="info-name">
-						<n8n-text>{{ $locale.baseText('about.debug.title') }}</n8n-text>
+						<n8n-text>{{ i18n.baseText('about.debug.title') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
 						<div :class="$style.debugInfo" @click="copyDebugInfoToClipboard">
-							<n8n-link>{{ $locale.baseText('about.debug.message') }}</n8n-link>
+							<n8n-link>{{ i18n.baseText('about.debug.message') }}</n8n-link>
 						</div>
 					</el-col>
 				</el-row>
@@ -102,7 +91,7 @@ export default defineComponent({
 			<div class="action-buttons">
 				<n8n-button
 					float="right"
-					:label="$locale.baseText('about.close')"
+					:label="i18n.baseText('about.close')"
 					data-test-id="close-about-modal-button"
 					@click="closeDialog"
 				/>