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,85 +7,73 @@ 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';
+
+const props = defineProps<{
+	modalName: string;
+	isActive: boolean;
+	data: { tags: string[]; id: string; name: string };
+}>();
 
-export default defineComponent({
-	name: 'DuplicateWorkflow',
-	components: { WorkflowTagsDropdown, Modal },
-	props: ['modalName', 'isActive', 'data'],
-	setup() {
 const router = useRouter();
 const workflowHelpers = useWorkflowHelpers({ router });
+const { showMessage, showError } = useToast();
+const i18n = useI18n();
+const telemetry = useTelemetry();
 
-		return {
+const credentialsStore = useCredentialsStore();
-			...useToast(),
+const settingsStore = useSettingsStore();
-			workflowHelpers,
+const workflowsStore = useWorkflowsStore();
-		};
-	},
-	data() {
-		const currentTagIds = this.data.tags;
 
-		return {
+const name = ref('');
-			name: '',
+const currentTagIds = ref(props.data.tags);
-			currentTagIds,
+const isSaving = ref(false);
-			isSaving: false,
+const prevTagIds = ref(currentTagIds.value);
-			modalBus: createEventBus(),
+const modalBus = createEventBus();
-			dropdownBus: createEventBus(),
+const dropdownBus = createEventBus();
-			MAX_WORKFLOW_NAME_LENGTH,
+
-			prevTagIds: currentTagIds,
+const nameInputRef = ref<HTMLElement>();
+
+const focusOnSelect = () => {
+	dropdownBus.emit('focus');
 };
-	},
+
-	computed: {
+const focusOnNameInput = () => {
-		...mapStores(useCredentialsStore, useUsersStore, useSettingsStore, useWorkflowsStore),
+	if (nameInputRef.value?.focus) {
-	},
+		nameInputRef.value.focus();
-	watch: {
-		isActive(active) {
-			if (active) {
-				this.focusOnSelect();
 	}
-		},
+};
-	},
+
-	async mounted() {
+const onTagsBlur = () => {
-		this.name = await this.workflowsStore.getDuplicateCurrentWorkflowName(this.data.name);
+	prevTagIds.value = currentTagIds.value;
-		await this.$nextTick();
+};
-		this.focusOnNameInput();
+
-	},
+const onTagsEsc = () => {
-	methods: {
+	currentTagIds.value = prevTagIds.value;
-		focusOnSelect() {
+};
-			this.dropdownBus.emit('focus');
+
-		},
+const closeDialog = () => {
-		focusOnNameInput() {
+	modalBus.emit('close');
-			const inputRef = this.$refs.nameInput as HTMLElement | undefined;
+};
-			if (inputRef?.focus) {
+
-				inputRef.focus();
+const save = async (): Promise<void> => {
-			}
+	const workflowName = name.value.trim();
-		},
+	if (!workflowName) {
-		onTagsBlur() {
+		showMessage({
-			this.prevTagIds = this.currentTagIds;
+			title: i18n.baseText('duplicateWorkflowDialog.errors.missingName.title'),
-		},
+			message: i18n.baseText('duplicateWorkflowDialog.errors.missingName.message'),
-		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;
+	const currentWorkflowId = props.data.id;
-
+	isSaving.value = true;
-			this.isSaving = true;
 
 	try {
 		let workflowToUpdate: IWorkflowDataUpdate | undefined;
@@ -99,54 +86,57 @@ export default defineComponent({
 				homeProject,
 				sharedWithProjects,
 				...workflow
-					} = await this.workflowsStore.fetchWorkflow(this.data.id);
+			} = await workflowsStore.fetchWorkflow(props.data.id);
 			workflowToUpdate = workflow;
 
-					this.workflowHelpers.removeForeignCredentialsFromWorkflow(
+			workflowHelpers.removeForeignCredentialsFromWorkflow(
 				workflowToUpdate,
-						this.credentialsStore.allCredentials,
+				credentialsStore.allCredentials,
 			);
 		}
 
-				const saved = await this.workflowHelpers.saveAsNewWorkflow({
+		const saved = await workflowHelpers.saveAsNewWorkflow({
-					name,
+			name: workflowName,
 			data: workflowToUpdate,
-					tags: this.currentTagIds,
+			tags: currentTagIds.value,
 			resetWebhookUrls: true,
 			openInNewWindow: true,
 			resetNodeIds: true,
 		});
 
 		if (saved) {
-					this.closeDialog();
+			closeDialog();
-					this.$telemetry.track('User duplicated workflow', {
+			telemetry.track('User duplicated workflow', {
 				old_workflow_id: currentWorkflowId,
-						workflow_id: this.data.id,
+				workflow_id: props.data.id,
-						sharing_role: this.workflowHelpers.getWorkflowProjectRole(this.data.id),
+				sharing_role: workflowHelpers.getWorkflowProjectRole(props.data.id),
 			});
 		}
 	} catch (error) {
 		if (error.httpStatusCode === 403) {
-					error.message = this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.message');
+			error.message = i18n.baseText('duplicateWorkflowDialog.errors.forbidden.message');
-
+			showError(error, i18n.baseText('duplicateWorkflowDialog.errors.forbidden.title'));
-					this.showError(
-						error,
-						this.$locale.baseText('duplicateWorkflowDialog.errors.forbidden.title'),
-					);
 		} else {
-					this.showError(
+			showError(error, i18n.baseText('duplicateWorkflowDialog.errors.generic.title'));
-						error,
-						this.$locale.baseText('duplicateWorkflowDialog.errors.generic.title'),
-					);
 		}
 	} finally {
-				this.isSaving = false;
+		isSaving.value = false;
+	}
+};
+
+watch(
+	() => props.isActive,
+	(active) => {
+		if (active) {
+			focusOnSelect();
 		}
 	},
-		closeDialog(): void {
+);
-			this.modalBus.emit('close');
+
-		},
+onMounted(async () => {
-	},
+	name.value = await workflowsStore.getDuplicateCurrentWorkflowName(props.data.name);
+	await nextTick();
+	focusOnNameInput();
 });
 </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"
 				/>