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

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 },
 		});
@@ -1249,6 +1258,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

@@ -167,4 +167,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

@@ -1358,6 +1358,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",