feat(editor): Add support for loadOptionsDependsOn to RLC (#6101)

* feat(editor): Add support for `loadOptionsDependsOn` to the Resource Locator component
* 🔥 Removing leftover log
* ✅ Added e2e tests for ResourceLocator component

cypress/e2e/26-resource-locator.cy.ts

@@ -0,0 +1,58 @@
+import { WorkflowPage, NDV, CredentialsModal } from '../pages';
+
+const workflowPage = new WorkflowPage();
+const ndv = new NDV();
+const credentialsModal = new CredentialsModal();
+
+const NO_CREDENTIALS_MESSAGE = 'Please add your credential';
+const INVALID_CREDENTIALS_MESSAGE = 'Please check your credential';
+
+describe('Resource Locator', () => {
+	before(() => {
+		cy.resetAll();
+		cy.skipSetup();
+	});
+
+	beforeEach(() => {
+		workflowPage.actions.visit();
+	});
+
+	it('should render both RLC components in google sheets', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Manual');
+		workflowPage.actions.addNodeToCanvas('Google Sheets', true, true);
+		ndv.getters.resourceLocator('documentId').should('be.visible');
+		ndv.getters.resourceLocator('sheetName').should('be.visible');
+	});
+
+	it('should show appropriate error when credentials are not set', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Manual');
+		workflowPage.actions.addNodeToCanvas('Google Sheets', true, true);
+		ndv.getters.resourceLocator('documentId').should('be.visible');
+		ndv.getters.resourceLocatorInput('documentId').click();
+		ndv.getters.resourceLocatorErrorMessage().should('contain', NO_CREDENTIALS_MESSAGE);
+	});
+
+	it('should show appropriate error when credentials are not valid', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Manual');
+		workflowPage.actions.addNodeToCanvas('Google Sheets', true, true);
+		workflowPage.getters.nodeCredentialsSelect().click();
+		// Add oAuth credentials
+		workflowPage.getters.nodeCredentialsSelect().find('li').last().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 reset resource locator when dependent field is changed', () => {
+		workflowPage.actions.addInitialNodeToCanvas('Manual');
+		workflowPage.actions.addNodeToCanvas('Google Sheets', true, true);
+		ndv.actions.setRLCValue('documentId', '123');
+		ndv.actions.setRLCValue('sheetName', '123');
+		ndv.actions.setRLCValue('documentId', '321');
+		ndv.getters.resourceLocatorInput('sheetName').should('have.value', '');
+	});
+});

cypress/pages/ndv.ts

@@ -51,6 +51,11 @@ export class NDV extends BasePage {
 		inputHoveringItem: () => this.getters.inputPanel().findChildByTestId('hovering-item'),
 		outputBranches: () => this.getters.outputPanel().findChildByTestId('branches'),
 		inputBranches: () => this.getters.inputPanel().findChildByTestId('branches'),
+		resourceLocator: (paramName: string) => cy.getByTestId(`resource-locator-${paramName}`),
+		resourceLocatorInput: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="rlc-input-container"]'),
+		resourceLocatorDropdown: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="resource-locator-dropdown"]'),
+		resourceLocatorErrorMessage: () => cy.getByTestId('rlc-error-container'),
+		resourceLocatorModeSelector: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="rlc-mode-selector"]'),
 	};
 
 	actions = {
@@ -148,5 +153,10 @@ export class NDV extends BasePage {
 		switchIntputBranch: (name: string) => {
 			this.getters.inputBranches().get('span').contains(name).click();
 		},
+		setRLCValue: (paramName: string, value: string) => {
+			this.getters.resourceLocatorModeSelector(paramName).click();
+			this.getters.resourceLocatorModeSelector(paramName).find('li').last().click();
+			this.getters.resourceLocatorInput(paramName).type(value);
+		}
 	};
 }

packages/editor-ui/src/components/ParameterInput.vue

@@ -18,6 +18,7 @@
 				ref="resourceLocator"
 				:parameter="parameter"
 				:value="value"
+				:dependentParametersValues="dependentParametersValues"
 				:displayTitle="displayTitle"
 				:expressionDisplayValue="expressionDisplayValue"
 				:expressionComputedValue="expressionEvaluated"

packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="resource-locator" ref="container">
+	<div
+		class="resource-locator"
+		ref="container"
+		:data-test-id="`resource-locator-${parameter.name}`"
+	>
 		<resource-locator-dropdown
 			:value="value ? value.value : ''"
 			:show="showResourceDropdown"
@@ -18,7 +22,7 @@
 			ref="dropdown"
 		>
 			<template #error>
-				<div :class="$style.error">
+				<div :class="$style.error" data-test-id="rlc-error-container">
 					<n8n-text color="text-dark" align="center" tag="div">
 						{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
 					</n8n-text>
@@ -47,6 +51,7 @@
 						:disabled="isReadOnly"
 						@change="onModeSelected"
 						:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
+						data-test-id="rlc-mode-selector"
 					>
 						<n8n-option
 							v-for="mode in parameter.modes"
@@ -64,7 +69,7 @@
 					</n8n-select>
 				</div>
 
-				<div :class="$style.inputContainer">
+				<div :class="$style.inputContainer" data-test-id="rlc-input-container">
 					<draggable-target
 						type="mapping"
 						:disabled="hasOnlyListMode"
@@ -101,6 +106,7 @@
 									:placeholder="inputPlaceholder"
 									type="text"
 									ref="input"
+									data-test-id="rlc-input"
 									@input="onInputChange"
 									@focus="onInputFocus"
 									@blur="onInputBlur"
@@ -212,6 +218,10 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			type: Array as PropType<string[]>,
 			default: () => [],
 		},
+		dependentParametersValues: {
+			type: [String, null] as PropType<string | null>,
+			default: null,
+		},
 		displayTitle: {
 			type: String,
 			default: '',
@@ -448,6 +458,17 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 				this.$emit('input', { ...this.value, __regex: mode.extractValue.regex });
 			}
 		},
+		dependentParametersValues() {
+			// Reset value if dependent parameters change
+			if (this.value && isResourceLocatorValue(this.value) && this.value.value !== '') {
+				this.$emit('input', {
+					...this.value,
+					cachedResultName: '',
+					cachedResultUrl: '',
+					value: '',
+				});
+			}
+		},
 	},
 	mounted() {
 		this.$on('refreshList', this.refreshList);

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -5,6 +5,7 @@
 		:popper-class="$style.popover"
 		:value="show"
 		trigger="manual"
+		data-test-id="resource-locator-dropdown"
 		v-click-outside="onClickOutside"
 	>
 		<div :class="$style.messageContainer" v-if="errorView">

packages/nodes-base/nodes/Google/Sheet/v2/actions/sheet/Sheet.resource.ts

@@ -139,6 +139,9 @@ export const descriptions: INodeProperties[] = [
 		default: { mode: 'list', value: '' },
 		// default: '', //empty string set to progresivly reveal fields
 		required: true,
+		typeOptions: {
+			loadOptionsDependsOn: ['documentId.value'],
+		},
 		modes: [
 			{
 				displayName: 'From List',