admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Milorad FIlipović <milorad@n8n.io>
This commit is contained in:
Nikhil Kuriakose
2025-05-09 14:06:41 +02:00
committed by GitHub
parent 33030eae7d
commit d14fb4dde3
9 changed files with 214 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.test.ts Normal file
View File

@@ -0,0 +1,88 @@
import { createComponentRenderer } from '@/__tests__/render';
import ImportWorkflowUrlModal from './ImportWorkflowUrlModal.vue';
import { createTestingPinia } from '@pinia/testing';
import { useUIStore } from '@/stores/ui.store';
import { nodeViewEventBus } from '@/event-bus';
import { IMPORT_WORKFLOW_URL_MODAL_KEY } from '@/constants';
import userEvent from '@testing-library/user-event';
const ModalStub = {
template: `
<div>
<slot name="header" />
<slot name="title" />
<slot name="content" />
<slot name="footer" />
</div>
`,
};
const initialState = {
modalsById: {
[IMPORT_WORKFLOW_URL_MODAL_KEY]: {
open: true,
},
},
modalStack: [IMPORT_WORKFLOW_URL_MODAL_KEY],
};
const global = {
stubs: {
Modal: ModalStub,
},
};
const renderModal = createComponentRenderer(ImportWorkflowUrlModal);
let pinia: ReturnType<typeof createTestingPinia>;
describe('ImportWorkflowUrlModal', () => {
beforeEach(() => {
pinia = createTestingPinia({ initialState });
});
it('should close the modal on cancel', async () => {
const { getByTestId } = renderModal({
global,
pinia,
});
const uiStore = useUIStore();
await userEvent.click(getByTestId('cancel-workflow-import-url-button'));
expect(uiStore.closeModal).toHaveBeenCalledWith(IMPORT_WORKFLOW_URL_MODAL_KEY);
});
it('should emit importWorkflowUrl event on confirm', async () => {
const { getByTestId } = renderModal({
global,
pinia,
});
const urlInput = getByTestId('workflow-url-import-input');
const confirmButton = getByTestId('confirm-workflow-import-url-button');
await userEvent.type(urlInput, 'https://valid-url.com/workflow.json');
expect(confirmButton).toBeEnabled();
const emitSpy = vi.spyOn(nodeViewEventBus, 'emit');
await userEvent.click(confirmButton);
expect(emitSpy).toHaveBeenCalledWith('importWorkflowUrl', {
url: 'https://valid-url.com/workflow.json',
});
});
it('should disable confirm button for invalid URL', async () => {
const { getByTestId } = renderModal({
global,
pinia,
});
const urlInput = getByTestId('workflow-url-import-input');
const confirmButton = getByTestId('confirm-workflow-import-url-button');
await userEvent.type(urlInput, 'invalid-url');
expect(confirmButton).toBeDisabled();
});
});

98
packages/frontend/editor-ui/src/components/ImportWorkflowUrlModal.vue Normal file
View File

@@ -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>

21
packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View File

@@ -6,11 +6,11 @@ import {
MODAL_CONFIRM,
PLACEHOLDER_EMPTY_WORKFLOW_ID,
SOURCE_CONTROL_PUSH_MODAL_KEY,
VALID_WORKFLOW_IMPORT_URL_REGEX,
VIEWS,
WORKFLOW_MENU_ACTIONS,
WORKFLOW_SETTINGS_MODAL_KEY,
WORKFLOW_SHARE_MODAL_KEY,
IMPORT_WORKFLOW_URL_MODAL_KEY,
} from '@/constants';
import ShortenName from '@/components/ShortenName.vue';
import WorkflowTagsContainer from '@/components/WorkflowTagsContainer.vue';
@@ -476,24 +476,7 @@ async function onWorkflowMenuSelect(action: WORKFLOW_MENU_ACTIONS): Promise<void
break;
}
case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
try {
const promptResponse = await message.prompt(
locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
{
confirmButtonText: locale.baseText('mainSidebar.prompt.import'),
cancelButtonText: locale.baseText('mainSidebar.prompt.cancel'),
inputErrorMessage: locale.baseText('mainSidebar.prompt.invalidUrl'),
inputPattern: VALID_WORKFLOW_IMPORT_URL_REGEX,
},
);
if (promptResponse.action === 'cancel') {
return;
}
nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
} catch (e) {}
uiStore.openModal(IMPORT_WORKFLOW_URL_MODAL_KEY);
break;
}
case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {

6
packages/frontend/editor-ui/src/components/Modals.vue
View File

@@ -37,6 +37,7 @@ import {
MOVE_FOLDER_MODAL_KEY,
WORKFLOW_ACTIVATION_CONFLICTING_WEBHOOK_MODAL_KEY,
FROM_AI_PARAMETERS_MODAL_KEY,
IMPORT_WORKFLOW_URL_MODAL_KEY,
} from '@/constants';
import AboutModal from '@/components/AboutModal.vue';
@@ -75,6 +76,7 @@ import PromptMfaCodeModal from './PromptMfaCodeModal/PromptMfaCodeModal.vue';
import CommunityPlusEnrollmentModal from '@/components/CommunityPlusEnrollmentModal.vue';
import WorkflowActivationConflictingWebhookModal from '@/components/WorkflowActivationConflictingWebhookModal.vue';
import FromAiParametersModal from '@/components/FromAiParametersModal.vue';
import ImportWorkflowUrlModal from '@/components/ImportWorkflowUrlModal.vue';
import type { EventBus } from '@n8n/utils/event-bus';
</script>
@@ -124,6 +126,10 @@ import type { EventBus } from '@n8n/utils/event-bus';
</template>
</ModalRoot>
<ModalRoot :name="IMPORT_WORKFLOW_URL_MODAL_KEY">
<ImportWorkflowUrlModal />
</ModalRoot>
<ModalRoot :name="PERSONALIZATION_MODAL_KEY">
<PersonalizationModal />
</ModalRoot>