From fdd81ea0791079cf781adefaa2bf47078ca45dc5 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Tue, 18 Jun 2024 11:11:10 +0200 Subject: [PATCH] fix(editor): Error dropdown in resource locator disappears when search filter is required (#9681) --- cypress/e2e/26-resource-locator.cy.ts | 24 ++++++++++++++++--- cypress/pages/ndv.ts | 2 ++ .../ResourceLocator/ResourceLocator.vue | 12 +++++++++- .../ResourceLocatorDropdown.vue | 2 +- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/26-resource-locator.cy.ts b/cypress/e2e/26-resource-locator.cy.ts index 9f4853aa8a8136..5c8eef714a2636 100644 --- a/cypress/e2e/26-resource-locator.cy.ts +++ b/cypress/e2e/26-resource-locator.cy.ts @@ -1,5 +1,5 @@ import { WorkflowPage, NDV, CredentialsModal } from '../pages'; -import { getVisiblePopper, getVisibleSelect } from '../utils'; +import { getVisiblePopper } from '../utils'; const workflowPage = new WorkflowPage(); const ndv = new NDV(); @@ -40,18 +40,36 @@ describe('Resource Locator', () => { it('should show appropriate error when credentials are not valid', () => { workflowPage.actions.addInitialNodeToCanvas('Manual'); workflowPage.actions.addNodeToCanvas('Google Sheets', true, true, 'Update row in sheet'); - workflowPage.getters.nodeCredentialsSelect().click(); + // Add oAuth credentials - getVisibleSelect().find('li').last().click(); + workflowPage.getters.nodeCredentialsSelect().click(); + workflowPage.getters.nodeCredentialsCreateOption().click(); credentialsModal.getters.credentialsEditModal().should('be.visible'); credentialsModal.getters.credentialAuthTypeRadioButtons().should('have.length', 2); credentialsModal.getters.credentialAuthTypeRadioButtons().first().click(); credentialsModal.actions.fillCredentialsForm(); cy.get('.el-message-box').find('button').contains('Close').click(); + ndv.getters.resourceLocatorInput('documentId').click(); ndv.getters.resourceLocatorErrorMessage().should('contain', INVALID_CREDENTIALS_MESSAGE); }); + it('should show appropriate errors when search filter is required', () => { + workflowPage.actions.addNodeToCanvas('Github', true, true, 'On Pull Request'); + ndv.getters.resourceLocator('owner').should('be.visible'); + ndv.getters.resourceLocatorInput('owner').click(); + ndv.getters.resourceLocatorErrorMessage().should('contain', NO_CREDENTIALS_MESSAGE); + + workflowPage.getters.nodeCredentialsSelect().click(); + workflowPage.getters.nodeCredentialsCreateOption().click(); + credentialsModal.getters.credentialsEditModal().should('be.visible'); + credentialsModal.actions.fillCredentialsForm(); + + ndv.getters.resourceLocatorInput('owner').click(); + ndv.getters.resourceLocatorSearch('owner').type('owner'); + ndv.getters.resourceLocatorErrorMessage().should('contain', INVALID_CREDENTIALS_MESSAGE); + }); + it('should reset resource locator when dependent field is changed', () => { workflowPage.actions.addInitialNodeToCanvas('Manual'); workflowPage.actions.addNodeToCanvas('Google Sheets', true, true, 'Update row in sheet'); diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts index 55dd8f72d648cf..6e051a564dd5a6 100644 --- a/cypress/pages/ndv.ts +++ b/cypress/pages/ndv.ts @@ -78,6 +78,8 @@ export class NDV extends BasePage { resourceLocatorErrorMessage: () => cy.getByTestId('rlc-error-container'), resourceLocatorModeSelector: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="rlc-mode-selector"]'), + resourceLocatorSearch: (paramName: string) => + this.getters.resourceLocator(paramName).findChildByTestId('rlc-search'), resourceMapperFieldsContainer: () => cy.getByTestId('mapping-fields-container'), resourceMapperSelectColumn: () => cy.getByTestId('matching-column-select'), resourceMapperRemoveFieldButton: (fieldName: string) => diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index 47899931c97ec6..8644169534a274 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue @@ -410,7 +410,7 @@ export default defineComponent({ return this.cachedResponses[this.currentRequestKey] || null; }, currentQueryResults(): IResourceLocatorResultExpanded[] { - const results = this.currentResponse ? this.currentResponse.results : []; + const results = this.currentResponse?.results ?? []; return results.map( (result: INodeListSearchItems): IResourceLocatorResultExpanded => ({ @@ -648,6 +648,11 @@ export default defineComponent({ } }, loadResourcesDebounced() { + if (this.currentResponse?.error) { + // Clear error response immediately when retrying to show loading state + delete this.cachedResponses[this.currentRequestKey]; + } + void this.callDebounced(this.loadResources, { debounceTime: 1000, trailing: true, @@ -664,6 +669,11 @@ export default defineComponent({ const paramsKey = this.currentRequestKey; const cachedResponse = this.cachedResponses[paramsKey]; + if (this.credentialsNotSet) { + this.setResponse(paramsKey, { error: true }); + return; + } + if (this.requiresSearchFilter && !params.filter) { return; } diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue index be5012b5aa7da5..ddadd763f9b0e8 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue @@ -4,7 +4,7 @@ :width="width" :popper-class="$style.popover" :visible="show" - trigger="manual" + :teleported="false" data-test-id="resource-locator-dropdown" >