diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue index a00bb5c22d..2d3f2fba89 100644 --- a/packages/editor-ui/src/components/ParameterOptions.vue +++ b/packages/editor-ui/src/components/ParameterOptions.vue @@ -199,10 +199,14 @@ export default defineComponent({ .container { display: flex; } -.loader > span { - line-height: 1em; -} +.loader { + padding-bottom: var(--spacing-4xs); + + & > span { + line-height: 1em; + } +} .controlsContainer { display: flex; } diff --git a/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue b/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue index 4954236057..77c8307a1f 100644 --- a/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue +++ b/packages/editor-ui/src/components/ResourceMapper/ResourceMapper.vue @@ -111,7 +111,10 @@ onMounted(async () => { matchingColumns: nodeValues.matchingColumns, }; } - await initFetching(hasSchema); + if (!hasSchema) { + // Only fetch a schema if it's not already set + await initFetching(); + } // Set default values if this is the first time the parameter is being set if (!state.paramValue.value) { setDefaultFieldValues(); diff --git a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts b/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts index fdb4e8497e..91566b1a29 100644 --- a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts +++ b/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts @@ -12,8 +12,10 @@ import { waitAllPromises } from '@/__tests__/utils'; import * as workflowHelpers from '@/mixins/workflowHelpers'; import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue'; import userEvent from '@testing-library/user-event'; +import type { SpyInstance } from 'vitest'; let nodeTypeStore: ReturnType; +let fetchFieldsSpy: SpyInstance, resolveParameterSpy: SpyInstance; const renderComponent = (renderOptions: Parameters[1] = {}) => render(ResourceMapper, merge(DEFAULT_SETUP, renderOptions), (vue) => { @@ -21,10 +23,14 @@ const renderComponent = (renderOptions: Parameters[1] = {}) => }); describe('ResourceMapper.vue', () => { - beforeEach(() => { + beforeAll(() => { nodeTypeStore = useNodeTypesStore(); - vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue(NODE_PARAMETER_VALUES); - vi.spyOn(nodeTypeStore, 'getResourceMapperFields').mockResolvedValue(MAPPING_COLUMNS_RESPONSE); + fetchFieldsSpy = vi + .spyOn(nodeTypeStore, 'getResourceMapperFields') + .mockResolvedValue(MAPPING_COLUMNS_RESPONSE); + resolveParameterSpy = vi + .spyOn(workflowHelpers, 'resolveParameter') + .mockReturnValue(NODE_PARAMETER_VALUES); }); afterEach(() => { @@ -199,11 +205,11 @@ describe('ResourceMapper.vue', () => { }, }); await waitAllPromises(); - // There should be 5 fields rendered and only 2 of them should have remove button + // There should be 4 fields rendered and only 1 of them should have remove button expect( getByTestId('mapping-fields-container').querySelectorAll('.parameter-input').length, - ).toBe(5); - expect(queryAllByTestId('remove-field-button').length).toBe(2); + ).toBe(4); + expect(queryAllByTestId('remove-field-button').length).toBe(1); }); it('should render correct options based on saved schema', async () => { @@ -229,4 +235,43 @@ describe('ResourceMapper.vue', () => { // Should have one option in the bottom dropdown for one removed field expect(getByTestId('add-fields-select').querySelectorAll('li').length).toBe(1); }); + + it('should fetch fields if there is no cached schema', async () => { + renderComponent({ + props: { + node: { + parameters: { + columns: { + schema: null, + }, + }, + }, + }, + }); + await waitAllPromises(); + expect(fetchFieldsSpy).toHaveBeenCalledTimes(1); + }); + + it('should not fetch fields if schema is already fetched', async () => { + renderComponent({ + props: { + node: { + parameters: { + columns: { + schema: UPDATED_SCHEMA, + }, + }, + }, + parameter: { + typeOptions: { + resourceMapper: { + mode: 'add', + }, + }, + }, + }, + }); + await waitAllPromises(); + expect(fetchFieldsSpy).not.toHaveBeenCalled(); + }); });