refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

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

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import { useToast } from '@/composables/useToast';
+import WorkflowTagsDropdown from '@/components/WorkflowTagsDropdown.vue';
+import Modal from '@/components/Modal.vue';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type { IWorkflowDataUpdate } from '@/Interface';
+import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
+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; externalEventBus?: EventBus };
+}>();
+
+const router = useRouter();
+const workflowHelpers = useWorkflowHelpers({ router });
+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),
+			});
+			props.data.externalEventBus?.emit('workflow-duplicated', { id: 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();
+		}
+	},
+);
+
+onMounted(async () => {
+	name.value = await workflowsStore.getDuplicateCurrentWorkflowName(props.data.name);
+	await nextTick();
+	focusOnNameInput();
+});
+</script>
+
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:title="i18n.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
+		:center="true"
+		width="420px"
+		@enter="save"
+	>
+		<template #content>
+			<div :class="$style.content">
+				<n8n-input
+					ref="nameInputRef"
+					v-model="name"
+					:placeholder="i18n.baseText('duplicateWorkflowDialog.enterWorkflowName')"
+					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
+				/>
+				<WorkflowTagsDropdown
+					v-if="settingsStore.areTagsEnabled"
+					ref="dropdown"
+					v-model="currentTagIds"
+					:create-enabled="true"
+					:event-bus="dropdownBus"
+					:placeholder="i18n.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
+					@blur="onTagsBlur"
+					@esc="onTagsEsc"
+				/>
+			</div>
+		</template>
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<n8n-button
+					:loading="isSaving"
+					:label="i18n.baseText('duplicateWorkflowDialog.save')"
+					float="right"
+					@click="save"
+				/>
+				<n8n-button
+					type="secondary"
+					:disabled="isSaving"
+					:label="i18n.baseText('duplicateWorkflowDialog.cancel')"
+					float="right"
+					@click="close"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.content {
+	> *:not(:last-child) {
+		margin-bottom: var(--spacing-m);
+	}
+}
+
+.footer {
+	> * {
+		margin-left: var(--spacing-3xs);
+	}
+}
+</style>