fix(editor): Error dropdown in resource locator disappears when search filter is required (#9681)

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

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) =>

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

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"
 	>
 		<div v-if="errorView" :class="$style.messageContainer">