feat(editor): Do not show error for remote options when credentials aren't specified (#10944)

cypress/e2e/5-ndv.cy.ts

@@ -674,6 +674,23 @@ describe('NDV', () => {
 		ndv.getters.parameterInput('operation').find('input').should('have.value', 'Delete');
 	});
 
+	it('Should show a notice when remote options cannot be fetched because of missing credentials', () => {
+		cy.intercept('POST', '/rest/dynamic-node-parameters/options', { statusCode: 403 }).as(
+			'parameterOptions',
+		);
+
+		workflowPage.actions.addInitialNodeToCanvas(NOTION_NODE_NAME, {
+			keepNdvOpen: true,
+			action: 'Update a database page',
+		});
+
+		ndv.actions.addItemToFixedCollection('propertiesUi');
+		ndv.getters
+			.parameterInput('key')
+			.find('input')
+			.should('have.value', 'Set up credential to see options');
+	});
+
 	it('Should show error state when remote options cannot be fetched', () => {
 		cy.intercept('POST', '/rest/dynamic-node-parameters/options', { statusCode: 500 }).as(
 			'parameterOptions',
@@ -684,6 +701,11 @@ describe('NDV', () => {
 			action: 'Update a database page',
 		});
 
+		clickCreateNewCredential();
+		setCredentialValues({
+			apiKey: 'sk_test_123',
+		});
+
 		ndv.actions.addItemToFixedCollection('propertiesUi');
 		ndv.getters
 			.parameterInput('key')

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

@@ -177,6 +177,15 @@ const displayValue = computed(() => {
 		if (!nodeType.value || nodeType.value?.codex?.categories?.includes(CORE_NODES_CATEGORY)) {
 			return i18n.baseText('parameterInput.loadOptionsError');
 		}
+
+		if (nodeType.value?.credentials && nodeType.value?.credentials?.length > 0) {
+			const credentialsType = nodeType.value?.credentials[0];
+
+			if (credentialsType.required && !node.value?.credentials) {
+				return i18n.baseText('parameterInput.loadOptionsCredentialsRequired');
+			}
+		}
+
 		return i18n.baseText('parameterInput.loadOptionsErrorService', {
 			interpolate: { service: nodeType.value.displayName },
 		});
@@ -1275,6 +1284,7 @@ onUpdated(async () => {
 					"
 					:title="displayTitle"
 					:placeholder="getPlaceholder()"
+					data-test-id="parameter-input-field"
 					@update:model-value="(valueChanged($event) as undefined) && onUpdateTextInput($event)"
 					@keydown.stop
 					@focus="setFocus"

packages/editor-ui/src/components/__tests__/ParameterInput.test.ts

@@ -168,4 +168,47 @@ describe('ParameterInput.vue', () => {
 		// Nothing should be emitted
 		expect(emitted('update')).toBeUndefined();
 	});
+
+	test('should show message when can not load options without credentials', async () => {
+		mockNodeTypesState.getNodeParameterOptions = vi.fn(async () => {
+			throw new Error('Node does not have any credentials set');
+		});
+
+		// @ts-expect-error Readonly property
+		mockNodeTypesState.getNodeType = vi.fn().mockReturnValue({
+			displayName: 'Test',
+			credentials: [
+				{
+					name: 'openAiApi',
+					required: true,
+				},
+			],
+		});
+
+		const { emitted, container, getByTestId } = renderComponent(ParameterInput, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'columns',
+				parameter: {
+					displayName: 'Columns',
+					name: 'columns',
+					type: 'options',
+					typeOptions: { loadOptionsMethod: 'getColumnsMultiOptions' },
+				},
+				modelValue: 'id',
+			},
+		});
+
+		await waitFor(() => expect(getByTestId('parameter-input-field')).toBeInTheDocument());
+
+		const input = container.querySelector('input') as HTMLInputElement;
+		expect(input).toBeInTheDocument();
+
+		expect(mockNodeTypesState.getNodeParameterOptions).toHaveBeenCalled();
+
+		expect(input.value.toLowerCase()).not.toContain('error');
+		expect(input).toHaveValue('Set up credential to see options');
+
+		expect(emitted('update')).toBeUndefined();
+	});
 });

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1361,6 +1361,7 @@
 	"parameterInput.loadingOptions": "Loading options...",
 	"parameterInput.loadOptionsErrorService": "Error fetching options from {service}",
 	"parameterInput.loadOptionsError": "Error fetching options",
+	"parameterInput.loadOptionsCredentialsRequired": "Set up credential to see options",
 	"parameterInput.openEditWindow": "Open Edit Window",
 	"parameterInput.parameter": "Parameter: \"{shortPath}\"",
 	"parameterInput.parameterHasExpression": "Parameter: \"{shortPath}\" has an expression",