From 14580daddeb3b86208d68b8c615e4393bf1c5de3 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 10 Sep 2024 10:19:50 -0400
Subject: [PATCH] refactor(editor): Migrate `ActivationModal.vue` to
 composition API (#10723)

---
 .../src/components/ActivationModal.vue        | 162 +++++++++---------
 1 file changed, 77 insertions(+), 85 deletions(-)

diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index df4892ea7..391b201a7 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -1,7 +1,5 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { createEventBus } from 'n8n-design-system/utils';
+<script setup lang="ts">
+import { computed, ref } from 'vue';
 
 import Modal from '@/components/Modal.vue';
 import {
@@ -16,92 +14,86 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useStorage } from '@/composables/useStorage';
 import { useExecutionsStore } from '@/stores/executions.store';
+import { useRouter } from 'vue-router';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
-	name: 'ActivationModal',
-	components: {
-		Modal,
-	},
-	props: ['modalName'],
-	data() {
-		return {
-			WORKFLOW_ACTIVE_MODAL_KEY,
-			checked: false,
-			modalBus: createEventBus(),
-		};
-	},
-	methods: {
-		async showExecutionsList() {
-			const activeExecution = this.executionsStore.activeExecution;
-			const currentWorkflow = this.workflowsStore.workflowId;
+const checked = ref(false);
 
-			if (activeExecution) {
-				this.$router
-					.push({
-						name: VIEWS.EXECUTION_PREVIEW,
-						params: { name: currentWorkflow, executionId: activeExecution.id },
-					})
-					.catch(() => {});
-			} else {
-				this.$router
-					.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } })
-					.catch(() => {});
-			}
-			this.uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
-		},
-		async showSettings() {
-			this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
-		},
-		handleCheckboxChange(checkboxValue: boolean) {
-			this.checked = checkboxValue;
-			useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
-		},
-	},
-	computed: {
-		...mapStores(useNodeTypesStore, useUIStore, useWorkflowsStore, useExecutionsStore),
-		triggerContent(): string {
-			const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
-			if (!foundTriggers.length) {
-				return '';
-			}
+const executionsStore = useExecutionsStore();
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const uiStore = useUIStore();
 
-			if (foundTriggers.length > 1) {
-				return this.$locale.baseText('activationModal.yourTriggersWillNowFire');
-			}
+const router = useRouter();
+const i18n = useI18n();
 
-			const trigger = foundTriggers[0];
+const triggerContent = computed(() => {
+	const foundTriggers = getActivatableTriggerNodes(workflowsStore.workflowTriggerNodes);
+	if (!foundTriggers.length) {
+		return '';
+	}
 
-			const triggerNodeType = this.nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
-			if (triggerNodeType) {
-				if (triggerNodeType.activationMessage) {
-					return triggerNodeType.activationMessage;
-				}
+	if (foundTriggers.length > 1) {
+		return i18n.baseText('activationModal.yourTriggersWillNowFire');
+	}
 
-				const serviceName = getTriggerNodeServiceName(triggerNodeType);
-				if (trigger.webhookId) {
-					return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
-						interpolate: {
-							serviceName,
-						},
-					});
-				} else if (triggerNodeType.polling) {
-					return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
-						interpolate: {
-							serviceName,
-						},
-					});
-				}
-			}
-			return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
-		},
-	},
+	const trigger = foundTriggers[0];
+
+	const triggerNodeType = nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
+	if (triggerNodeType) {
+		if (triggerNodeType.activationMessage) {
+			return triggerNodeType.activationMessage;
+		}
+
+		const serviceName = getTriggerNodeServiceName(triggerNodeType);
+		if (trigger.webhookId) {
+			return i18n.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
+				interpolate: {
+					serviceName,
+				},
+			});
+		} else if (triggerNodeType.polling) {
+			return i18n.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
+				interpolate: {
+					serviceName,
+				},
+			});
+		}
+	}
+	return i18n.baseText('activationModal.yourTriggerWillNowFire');
 });
+
+const showExecutionsList = async () => {
+	const activeExecution = executionsStore.activeExecution;
+	const currentWorkflow = workflowsStore.workflowId;
+
+	if (activeExecution) {
+		router
+			.push({
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: { name: currentWorkflow, executionId: activeExecution.id },
+			})
+			.catch(() => {});
+	} else {
+		router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } }).catch(() => {});
+	}
+	uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
+};
+
+const showSettings = async () => {
+	uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+};
+
+const handleCheckboxChange = (checkboxValue: boolean) => {
+	checked.value = checkboxValue;
+	useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
+};
 </script>
 
 <template>
 	<Modal
 		:name="WORKFLOW_ACTIVE_MODAL_KEY"
-		:title="$locale.baseText('activationModal.workflowActivated')"
+		:title="i18n.baseText('activationModal.workflowActivated')"
 		width="460px"
 	>
 		<template #content>
@@ -111,14 +103,14 @@ export default defineComponent({
 			<div :class="$style.spaced">
 				<n8n-text>
 					<n8n-text :bold="true">
-						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
+						{{ i18n.baseText('activationModal.theseExecutionsWillNotShowUp') }}
 					</n8n-text>
-					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
+					{{ i18n.baseText('activationModal.butYouCanSeeThem') }}
 					<a @click="showExecutionsList">
-						{{ $locale.baseText('activationModal.executionList') }}
+						{{ i18n.baseText('activationModal.executionList') }}
 					</a>
-					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
-					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
+					{{ i18n.baseText('activationModal.ifYouChooseTo') }}
+					<a @click="showSettings">{{ i18n.baseText('activationModal.saveExecutions') }}</a>
 				</n8n-text>
 			</div>
 		</template>
@@ -126,9 +118,9 @@ export default defineComponent({
 		<template #footer="{ close }">
 			<div :class="$style.footer">
 				<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
-					$locale.baseText('generic.dontShowAgain')
+					i18n.baseText('generic.dontShowAgain')
 				}}</el-checkbox>
-				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
+				<n8n-button :label="i18n.baseText('activationModal.gotIt')" @click="close" />
 			</div>
 		</template>
 	</Modal>