fix(editor): Fix remote options fetching on every keystroke (#7320)

Github issue / Community forum post (link here to close automatically): --------- Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <[email protected]>
n8n-io · Oct 12, 2023 · 15f891b · 15f891b
1 parent 5da8dcb
commit 15f891b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/cypress/e2e/26-resource-locator.cy.ts b/cypress/e2e/26-resource-locator.cy.ts
@@ -71,7 +71,7 @@ describe('Resource Locator', () => {
 			.findChildByTestId('rlc-item')
 			.should('have.length', 5);
 
-		ndv.actions.setInvalidExpression('fieldId');
+		ndv.actions.setInvalidExpression({ fieldName: 'fieldId' });
 
 		ndv.getters.container().click(); // remove focus from input, hide expression preview
 

diff --git a/cypress/e2e/28-resource-mapper.cy.ts b/cypress/e2e/28-resource-mapper.cy.ts
@@ -19,7 +19,7 @@ describe('Resource Mapper', () => {
 			.findChildByTestId('parameter-input')
 			.should('have.length', 3);
 
-		ndv.actions.setInvalidExpression('fieldId');
+		ndv.actions.setInvalidExpression({ fieldName: 'fieldId' });
 
 		ndv.actions.refreshResourceMapperColumns();
 		ndv.getters.resourceMapperFieldsContainer().should('not.exist');
@@ -36,7 +36,7 @@ describe('Resource Mapper', () => {
 			.findChildByTestId('parameter-input')
 			.should('have.length', 3);
 
-		ndv.actions.setInvalidExpression('otherField');
+		ndv.actions.setInvalidExpression({ fieldName: 'otherField' });
 
 		ndv.actions.refreshResourceMapperColumns();
 		ndv.getters

diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
@@ -297,15 +297,15 @@ describe('NDV', () => {
 		ndv.getters.parameterInput('remoteOptions').click();
 		getVisibleSelect().find('.el-select-dropdown__item').should('have.length', 3);
 
-		ndv.actions.setInvalidExpression('fieldId');
+		ndv.actions.setInvalidExpression({ fieldName: 'fieldId', delay: 100 });
 
 		ndv.getters.container().click(); // remove focus from input, hide expression preview
 
 		ndv.getters.parameterInput('remoteOptions').click();
-		getPopper().should('not.be.visible');
 
 		ndv.getters.parameterInputIssues('remoteOptions').realHover();
-		getVisiblePopper().should('include.text', `node doesn't exist`);
+		// Remote options dropdown should not be visible
+		ndv.getters.parameterInput('remoteOptions').find('.el-select').should('not.exist');
 	});
 
 	it('should retrieve remote options when non-required params throw errors', () => {
@@ -315,7 +315,7 @@ describe('NDV', () => {
 		getVisibleSelect().find('.el-select-dropdown__item').should('have.length', 3);
 		ndv.getters.parameterInput('remoteOptions').click();
 
-		ndv.actions.setInvalidExpression('otherField');
+		ndv.actions.setInvalidExpression({ fieldName: 'otherField', delay: 50 });
 
 		ndv.getters.container().click(); // remove focus from input, hide expression preview
 
@@ -356,4 +356,13 @@ describe('NDV', () => {
 		});
 		ndv.getters.nodeExecuteButton().should('be.visible');
 	});
+
+	it('should not retrieve remote options when a parameter value changes', () => {
+		cy.intercept('/rest/node-parameter-options?**', cy.spy().as('fetchParameterOptions'));
+		workflowPage.actions.addInitialNodeToCanvas('E2e Test', { action: 'Remote Options' });
+		// Type something into the field
+		ndv.actions.typeIntoParameterInput('otherField', 'test');
+		// Should call the endpoint only once (on mount), not for every keystroke
+		cy.get('@fetchParameterOptions').should('have.been.calledOnce');
+	});
 });
diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
@@ -114,7 +114,7 @@ export class NDV extends BasePage {
 		typeIntoParameterInput: (
 			parameterName: string,
 			content: string,
-			opts?: { parseSpecialCharSequences: boolean },
+			opts?: { parseSpecialCharSequences: boolean, delay?: number },
 		) => {
 			this.getters.parameterInput(parameterName).type(content, opts);
 		},
@@ -199,10 +199,11 @@ export class NDV extends BasePage {
 			getVisiblePopper().find('li').last().click();
 		},
 
-		setInvalidExpression: (fieldName: string, invalidExpression?: string) => {
+		setInvalidExpression: ({ fieldName, invalidExpression, delay }: { fieldName: string, invalidExpression?: string, delay?: number }) => {
 			this.actions.typeIntoParameterInput(fieldName, '=');
 			this.actions.typeIntoParameterInput(fieldName, invalidExpression ?? "{{ $('unknown')", {
 				parseSpecialCharSequences: false,
+				delay,
 			});
 			this.actions.validateExpressionPreview(fieldName, `node doesn't exist`);
 		},

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1253,7 +1253,7 @@ export default defineComponent({
 				() => {
 					void this.loadRemoteParameterOptions();
 				},
-				{ deep: true, immediate: true },
+				{ immediate: true },
 			);
 		}