fix(editor): Close Workflow URL Import Modal after import (#15177)

Co-authored-by: Milorad FIlipović <milorad@n8n.io>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import { useUIStore } from '@/stores/ui.store';
+import { nodeViewEventBus } from '@/event-bus';
+import { VALID_WORKFLOW_IMPORT_URL_REGEX, IMPORT_WORKFLOW_URL_MODAL_KEY } from '@/constants';
+
+const i18n = useI18n();
+const uiStore = useUIStore();
+
+const url = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const isValid = computed(() => {
+	return url.value ? VALID_WORKFLOW_IMPORT_URL_REGEX.test(url.value) : true;
+});
+
+const closeModal = () => {
+	uiStore.closeModal(IMPORT_WORKFLOW_URL_MODAL_KEY);
+};
+
+const confirm = () => {
+	nodeViewEventBus.emit('importWorkflowUrl', { url: url.value });
+	closeModal();
+};
+
+const focusInput = async () => {
+	if (inputRef.value) {
+		inputRef.value.focus();
+	}
+};
+</script>
+
+<template>
+	<Modal
+		:name="IMPORT_WORKFLOW_URL_MODAL_KEY"
+		:title="i18n.baseText('mainSidebar.prompt.importWorkflowFromUrl')"
+		:show-close="true"
+		:center="true"
+		width="420px"
+		@opened="focusInput"
+	>
+		<template #content>
+			<div :class="$style.noScrollbar">
+				<n8n-input
+					ref="inputRef"
+					v-model="url"
+					:placeholder="i18n.baseText('mainSidebar.prompt.workflowUrl')"
+					:state="isValid ? 'default' : 'error'"
+					data-test-id="workflow-url-import-input"
+					@keyup.enter="confirm"
+				/>
+				<p :class="$style['error-text']" :style="{ visibility: isValid ? 'hidden' : 'visible' }">
+					{{ i18n.baseText('mainSidebar.prompt.invalidUrl') }}
+				</p>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button
+					type="primary"
+					float="right"
+					:disabled="!url || !isValid"
+					data-test-id="confirm-workflow-import-url-button"
+					@click="confirm"
+				>
+					{{ i18n.baseText('mainSidebar.prompt.import') }}
+				</n8n-button>
+				<n8n-button
+					type="secondary"
+					float="right"
+					data-test-id="cancel-workflow-import-url-button"
+					@click="closeModal"
+				>
+					{{ i18n.baseText('mainSidebar.prompt.cancel') }}
+				</n8n-button>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<style lang="scss" module>
+.error-text {
+	color: var(--color-danger);
+	font-size: var(--font-size-2xs);
+	margin-top: var(--spacing-2xs);
+	height: var(--spacing-s);
+	visibility: hidden;
+}
+.footer {
+	> * {
+		margin-left: var(--spacing-3xs);
+	}
+}
+.noScrollbar {
+	overflow: hidden;
+}
+</style>