fix(editor): Prevent RMC from loading schema if it's already cached (#6695)

* fix(editor): Prevent RMC from loading schema if it's already cached
* ✅ Adding new tests for RMC
* 👕 Fixing lint errors
* 👌 Updating inline loader styling

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;
 }

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();

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<typeof useNodeTypesStore>;
+let fetchFieldsSpy: SpyInstance, resolveParameterSpy: SpyInstance;
 
 const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 	render(ResourceMapper, merge(DEFAULT_SETUP, renderOptions), (vue) => {
@@ -21,10 +23,14 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 	});
 
 describe('ResourceMapper.vue', () => {
-	beforeEach(() => {
+	beforeAll(() => {
 		nodeTypeStore = useNodeTypesStore();
-		vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue(NODE_PARAMETER_VALUES);
+		fetchFieldsSpy = vi
-		vi.spyOn(nodeTypeStore, 'getResourceMapperFields').mockResolvedValue(MAPPING_COLUMNS_RESPONSE);
+			.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);
+		).toBe(4);
-		expect(queryAllByTestId('remove-field-button').length).toBe(2);
+		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();
+	});
 });