refactor(editor): DuplicateWorkflowDialog.vue to script setup (#10902)

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

@@ -1,6 +1,5 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref, watch, onMounted, nextTick } from 'vue';
-import { mapStores } from 'pinia';
 import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
 import { useToast } from '@/composables/useToast';
 import WorkflowTagsDropdown from '@/components/WorkflowTagsDropdown.vue';
@@ -8,145 +7,136 @@ import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IWorkflowDataUpdate } from '@/Interface';
-import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 
-export default defineComponent({
+const props = defineProps<{
-	name: 'DuplicateWorkflow',
+	modalName: string;
-	components: { WorkflowTagsDropdown, Modal },
+	isActive: boolean;
-	props: ['modalName', 'isActive', 'data'],
+	data: { tags: string[]; id: string; name: string };
-	setup() {
+}>();
-		const router = useRouter();
-		const workflowHelpers = useWorkflowHelpers({ router });
 
-		return {
+const router = useRouter();
-			...useToast(),
+const workflowHelpers = useWorkflowHelpers({ router });
-			workflowHelpers,
+const { showMessage, showError } = useToast();
-		};
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const credentialsStore = useCredentialsStore();
+const settingsStore = useSettingsStore();
+const workflowsStore = useWorkflowsStore();
+
+const name = ref('');
+const currentTagIds = ref(props.data.tags);
+const isSaving = ref(false);
+const prevTagIds = ref(currentTagIds.value);
+const modalBus = createEventBus();
+const dropdownBus = createEventBus();
+
+const nameInputRef = ref<HTMLElement>();
+
+const focusOnSelect = () => {
+	dropdownBus.emit('focus');
+};
+
+const focusOnNameInput = () => {
+	if (nameInputRef.value?.focus) {
+		nameInputRef.value.focus();
+	}
+};
+
+const onTagsBlur = () => {
+	prevTagIds.value = currentTagIds.value;
+};
+
+const onTagsEsc = () => {
+	currentTagIds.value = prevTagIds.value;
+};
+
+const closeDialog = () => {
+	modalBus.emit('close');
+};
+
+const save = async (): Promise<void> => {
+	const workflowName = name.value.trim();
+	if (!workflowName) {
+		showMessage({
+			title: i18n.baseText('duplicateWorkflowDialog.errors.missingName.title'),
+			message: i18n.baseText('duplicateWorkflowDialog.errors.missingName.message'),
+			type: 'error',
+		});
+		return;
+	}
+
+	const currentWorkflowId = props.data.id;
+	isSaving.value = true;
+
+	try {
+		let workflowToUpdate: IWorkflowDataUpdate | undefined;
+		if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+			const {
+				createdAt,
+				updatedAt,
+				usedCredentials,
+				id,
+				homeProject,
+				sharedWithProjects,
+				...workflow
+			} = await workflowsStore.fetchWorkflow(props.data.id);
+			workflowToUpdate = workflow;
+
+			workflowHelpers.removeForeignCredentialsFromWorkflow(
+				workflowToUpdate,
+				credentialsStore.allCredentials,
+			);
+		}
+
+		const saved = await workflowHelpers.saveAsNewWorkflow({
+			name: workflowName,
+			data: workflowToUpdate,
+			tags: currentTagIds.value,
+			resetWebhookUrls: true,
+			openInNewWindow: true,
+			resetNodeIds: true,
+		});
+
+		if (saved) {
+			closeDialog();
+			telemetry.track('User duplicated workflow', {
+				old_workflow_id: currentWorkflowId,
+				workflow_id: props.data.id,
+				sharing_role: workflowHelpers.getWorkflowProjectRole(props.data.id),
+			});
+		}
+	} catch (error) {
+		if (error.httpStatusCode === 403) {
+			error.message = i18n.baseText('duplicateWorkflowDialog.errors.forbidden.message');
+			showError(error, i18n.baseText('duplicateWorkflowDialog.errors.forbidden.title'));
+		} else {
+			showError(error, i18n.baseText('duplicateWorkflowDialog.errors.generic.title'));
+		}
+	} finally {
+		isSaving.value = false;
+	}
+};
+
+watch(
+	() => props.isActive,
+	(active) => {
+		if (active) {
+			focusOnSelect();
+		}
 	},
-	data() {
+);
-		const currentTagIds = this.data.tags;
 
-		return {
+onMounted(async () => {
-			name: '',
+	name.value = await workflowsStore.getDuplicateCurrentWorkflowName(props.data.name);
-			currentTagIds,
+	await nextTick();
-			isSaving: false,
+	focusOnNameInput();
-			modalBus: createEventBus(),
-			dropdownBus: createEventBus(),
-			MAX_WORKFLOW_NAME_LENGTH,
-			prevTagIds: currentTagIds,
-		};
-	},
-	computed: {
-		...mapStores(useCredentialsStore, useUsersStore, useSettingsStore, useWorkflowsStore),
-	},
-	watch: {
-		isActive(active) {
-			if (active) {
-				this.focusOnSelect();
-			}
-		},
-	},
-	async mounted() {
-		this.name = await this.workflowsStore.getDuplicateCurrentWorkflowName(this.data.name);
-		await this.$nextTick();
-		this.focusOnNameInput();
-	},
-	methods: {
-		focusOnSelect() {
-			this.dropdownBus.emit('focus');
-		},
-		focusOnNameInput() {
-			const inputRef = this.$refs.nameInput as HTMLElement | undefined;
-			if (inputRef?.focus) {
-				inputRef.focus();
-			}
-		},
-		onTagsBlur() {
-			this.prevTagIds = this.currentTagIds;
-		},
-		onTagsEsc() {
-			// revert last changes
-			this.currentTagIds = this.prevTagIds;
-		},
-		async save(): Promise<void> {
-			const name = this.name.trim();
-			if (!name) {
-				this.showMessage({
-					title: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.title'),
-					message: this.$locale.baseText('duplicateWorkflowDialog.errors.missingName.message'),
-					type: 'error',
-				});
-
-				return;
-			}
-
-			const currentWorkflowId = this.data.id;
-
-			this.isSaving = true;
-
-			try {
-				let workflowToUpdate: IWorkflowDataUpdate | undefined;
-				if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-					const {
-						createdAt,
-						updatedAt,
-						usedCredentials,
-						id,
-						homeProject,
-						sharedWithProjects,
-						...workflow
-					} = await this.workflowsStore.fetchWorkflow(this.data.id);
-					workflowToUpdate = workflow;
-
-					this.workflowHelpers.removeForeignCredentialsFromWorkflow(
-						workflowToUpdate,
-						this.credentialsStore.allCredentials,
-					);
-				}
-
-				const saved = await this.workflowHelpers.saveAsNewWorkflow({
-					name,
-					data: workflowToUpdate,
-					tags: this.currentTagIds,
-					resetWebhookUrls: true,
-					openInNewWindow: true,
-					resetNodeIds: true,
-				});
-
-				if (saved) {
-					this.closeDialog();
-					this.$telemetry.track('User duplicated workflow', {
-						old_workflow_id: currentWorkflowId,
-						workflow_id: this.data.id,
-						sharing_role: this.workflowHelpers.getWorkflowProjectRole(this.data.id),
-					});
-				}
-			} catch (error) {
-				if (error.httpStatusCode === 403) {
-					error.message = this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.message');
-
-					this.showError(
-						error,
-						this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.title'),
-					);
-				} else {
-					this.showError(
-						error,
-						this.$locale.baseText('duplicateWorkflowDialog.errors.generic.title'),
-					);
-				}
-			} finally {
-				this.isSaving = false;
-			}
-		},
-		closeDialog(): void {
-			this.modalBus.emit('close');
-		},
-	},
 });
 </script>
 
@@ -154,7 +144,7 @@ export default defineComponent({
 	<Modal
 		:name="modalName"
 		:event-bus="modalBus"
-		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
+		:title="i18n.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
 		:center="true"
 		width="420px"
 		@enter="save"
@@ -162,9 +152,9 @@ export default defineComponent({
 		<template #content>
 			<div :class="$style.content">
 				<n8n-input
-					ref="nameInput"
+					ref="nameInputRef"
 					v-model="name"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
+					:placeholder="i18n.baseText('duplicateWorkflowDialog.enterWorkflowName')"
 					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
 				/>
 				<WorkflowTagsDropdown
@@ -173,7 +163,7 @@ export default defineComponent({
 					v-model="currentTagIds"
 					:create-enabled="true"
 					:event-bus="dropdownBus"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
+					:placeholder="i18n.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
 					@blur="onTagsBlur"
 					@esc="onTagsEsc"
 				/>
@@ -183,14 +173,14 @@ export default defineComponent({
 			<div :class="$style.footer">
 				<n8n-button
 					:loading="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.save')"
+					:label="i18n.baseText('duplicateWorkflowDialog.save')"
 					float="right"
 					@click="save"
 				/>
 				<n8n-button
 					type="secondary"
 					:disabled="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
+					:label="i18n.baseText('duplicateWorkflowDialog.cancel')"
 					float="right"
 					@click="close"
 				/>