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

fix(editor): Store last entered cURL command for each HTTP node (#17834)

Browse Source
This commit is contained in:
RomanDavydchuk
2025-08-01 10:58:33 +03:00
committed by GitHub
parent 4395b8f71f
commit e8e7b23d47
3 changed files with 174 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
packages/frontend/editor-ui/src/components/ImportCurlModal.test.ts Normal file
View File

@@ -0,0 +1,157 @@
import { createComponentRenderer } from '@/__tests__/render';
import ImportCurlModal from './ImportCurlModal.vue';
import { createTestingPinia } from '@pinia/testing';
import { IMPORT_CURL_MODAL_KEY } from '@/constants';
import { cleanupAppModals, createAppModals, mockedStore } from '@/__tests__/utils';
import { nextTick } from 'vue';
import { useUIStore } from '@/stores/ui.store';
import { useNDVStore } from '@/stores/ndv.store';
import userEvent from '@testing-library/user-event';
const mockTelemetryTrack = vi.fn();
vi.mock('@/composables/useTelemetry', () => ({
useTelemetry: () => ({
track: mockTelemetryTrack,
}),
}));
vi.mock('@/composables/useImportCurlCommand', () => ({
useImportCurlCommand: (options: {
onImportSuccess: () => void;
onAfterImport: () => void;
}) => ({
importCurlCommand: () => {
options.onImportSuccess();
options.onAfterImport();
},
}),
}));
const renderModal = createComponentRenderer(ImportCurlModal, {
pinia: createTestingPinia(),
});
const testNode = {
id: 'node-1',
name: 'HTTP Request',
type: 'n8n-nodes-base.httpRequest',
position: [0, 0] as [number, number],
typeVersion: 1,
parameters: {},
};
describe('ImportCurlModal', () => {
beforeEach(() => {
vi.clearAllMocks();
createAppModals();
});
afterEach(() => {
cleanupAppModals();
});
it('should show empty input when no curl command exists for active node', async () => {
const uiStore = mockedStore(useUIStore);
uiStore.modalsById = {
[IMPORT_CURL_MODAL_KEY]: {
open: true,
data: {
curlCommands: {
'node-2': 'curl -X GET https://api.example.com/data',
},
},
},
};
uiStore.modalStack = [IMPORT_CURL_MODAL_KEY];
const ndvStore = mockedStore(useNDVStore);
ndvStore.activeNode = testNode;
const { getByTestId } = renderModal();
await nextTick();
const input = getByTestId('import-curl-modal-input');
expect(input).toHaveValue('');
});
it('should show curl command for active node', async () => {
const uiStore = mockedStore(useUIStore);
uiStore.modalsById = {
[IMPORT_CURL_MODAL_KEY]: {
open: true,
data: {
curlCommands: {
'node-1': 'curl -X GET https://api.example.com/data',
'node-2': 'curl -X POST https://api.example.com/submit',
},
},
},
};
uiStore.modalStack = [IMPORT_CURL_MODAL_KEY];
const ndvStore = mockedStore(useNDVStore);
ndvStore.activeNode = testNode;
const { getByTestId } = renderModal();
await nextTick();
const input = getByTestId('import-curl-modal-input');
expect(input).toHaveValue('curl -X GET https://api.example.com/data');
});
it('should set the input value when the import button is clicked', async () => {
const uiStore = mockedStore(useUIStore);
uiStore.modalsById = {
[IMPORT_CURL_MODAL_KEY]: {
open: true,
data: {
curlCommands: {
'node-2': 'curl -X POST https://api.example.com/submit',
},
},
},
};
uiStore.modalStack = [IMPORT_CURL_MODAL_KEY];
const ndvStore = mockedStore(useNDVStore);
ndvStore.activeNode = testNode;
const { getByTestId } = renderModal();
await nextTick();
const input = getByTestId('import-curl-modal-input');
await userEvent.type(input, 'curl -X GET https://api.example.com/data');
const button = getByTestId('import-curl-modal-button');
await userEvent.click(button);
expect(uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommands).toEqual({
'node-1': 'curl -X GET https://api.example.com/data',
'node-2': 'curl -X POST https://api.example.com/submit',
});
});
it('should override the input value when the import button is clicked', async () => {
const uiStore = mockedStore(useUIStore);
uiStore.modalsById = {
[IMPORT_CURL_MODAL_KEY]: {
open: true,
data: {
curlCommands: {
'node-1': 'curl -X GET https://api.example.com/data',
},
},
},
};
uiStore.modalStack = [IMPORT_CURL_MODAL_KEY];
const ndvStore = mockedStore(useNDVStore);
ndvStore.activeNode = testNode;
const { getByTestId } = renderModal();
await nextTick();
const input = getByTestId('import-curl-modal-input');
await userEvent.clear(input);
await userEvent.type(input, 'curl -X GET https://api.example.com/other');
const button = getByTestId('import-curl-modal-button');
await userEvent.click(button);
expect(uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommands).toEqual({
'node-1': 'curl -X GET https://api.example.com/other',
});
});
});

19
packages/frontend/editor-ui/src/components/ImportCurlModal.vue
View File

@@ -6,11 +6,13 @@ import { useUIStore } from '@/stores/ui.store';
import { createEventBus } from '@n8n/utils/event-bus';
import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@n8n/i18n';
import { useNDVStore } from '@/stores/ndv.store';
const telemetry = useTelemetry();
const i18n = useI18n();
const uiStore = useUIStore();
const ndvStore = useNDVStore();
const curlCommand = ref('');
const modalBus = createEventBus();
@@ -18,8 +20,13 @@ const modalBus = createEventBus();
const inputRef = ref<HTMLTextAreaElement | null>(null);
onMounted(() => {
curlCommand.value = (uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommand as string) ?? '';
const curlCommands = uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommands as Record<
string,
string
>;
const nodeId = ndvStore.activeNode?.id ?? '';
const command = curlCommands?.[nodeId];
curlCommand.value = command ?? '';
setTimeout(() => {
inputRef.value?.focus();
});
@@ -43,9 +50,13 @@ function onImportFailure(data: { invalidProtocol: boolean; protocol?: string })
}
function onAfterImport() {
const nodeId = ndvStore.activeNode?.id as string;
const curlCommands =
(uiStore.modalsById[IMPORT_CURL_MODAL_KEY].data?.curlCommands as Record<string, string>) ?? {};
curlCommands[nodeId] = curlCommand.value;
uiStore.setModalData({
name: IMPORT_CURL_MODAL_KEY,
data: { curlCommand: curlCommand.value },
data: { curlCommands },
});
}
@@ -90,6 +101,7 @@ async function onImport() {
:model-value="curlCommand"
type="textarea"
:rows="5"
data-test-id="import-curl-modal-input"
:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
@update:model-value="onInput"
@focus="$event.target.select()"
@@ -107,6 +119,7 @@ async function onImport() {
<N8nButton
float="right"
:label="i18n.baseText('importCurlModal.button.label')"
data-test-id="import-curl-modal-button"
@click="onImport"
/>
</div>

2
packages/frontend/editor-ui/src/stores/ui.store.ts
View File

@@ -140,7 +140,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
[IMPORT_CURL_MODAL_KEY]: {
open: false,
data: {
curlCommand: '',
curlCommands: {},
},
},
[LOG_STREAM_MODAL_KEY]: {