From 367255ab2c13b4a33a746d3d4b9f3164309a11c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Thu, 12 Oct 2023 14:18:35 +0200 Subject: [PATCH] fix(editor): Fix remote options fetching on every keystroke (#7320) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Github issue / Community forum post (link here to close automatically): --------- Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ --- cypress/e2e/26-resource-locator.cy.ts | 2 +- cypress/e2e/28-resource-mapper.cy.ts | 4 ++-- cypress/e2e/5-ndv.cy.ts | 17 +++++++++++++---- cypress/pages/ndv.ts | 5 +++-- .../editor-ui/src/components/ParameterInput.vue | 2 +- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/cypress/e2e/26-resource-locator.cy.ts b/cypress/e2e/26-resource-locator.cy.ts index 060650cc22..c556ba983e 100644 --- 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 index ec4341d2ae..3f5909de62 100644 --- 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 index ecfea2f68e..1f34cee5c6 100644 --- 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 index a0b4453610..611a351ff5 100644 --- 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 index 3d4af0a969..4ed650c55c 100644 --- 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 }, ); }