feat(editor): Show informative message in NDV when AI tools have no parameters (#15515)

packages/frontend/editor-ui/src/components/NodeCredentials.test.ts

@@ -55,7 +55,7 @@ const openAiNode: INodeUi = {
 
 describe('NodeCredentials', () => {
 	const defaultRenderOptions: RenderOptions = {
-		pinia: createTestingPinia(),
+		pinia: createTestingPinia({ stubActions: false }),
 		props: {
 			overrideCredType: 'openAiApi',
 			node: httpNode,

packages/frontend/editor-ui/src/components/NodeCredentials.vue

@@ -85,31 +85,21 @@ const filter = ref('');
 const listeningForAuthChange = ref(false);
 const selectRefs = ref<Array<InstanceType<typeof N8nSelect>>>([]);
 
+const credentialTypesNodeDescriptions = computed(() =>
+	credentialsStore.getCredentialTypesNodeDescriptions(props.overrideCredType, nodeType.value),
+);
+
 const credentialTypesNode = computed(() =>
-	credentialTypesNodeDescription.value.map(
+	credentialTypesNodeDescriptions.value.map(
 		(credentialTypeDescription) => credentialTypeDescription.name,
 	),
 );
 
 const credentialTypesNodeDescriptionDisplayed = computed(() =>
-	credentialTypesNodeDescription.value
+	credentialTypesNodeDescriptions.value
 		.filter((credentialTypeDescription) => displayCredentials(credentialTypeDescription))
 		.map((type) => ({ type, options: getCredentialOptions(getAllRelatedCredentialTypes(type)) })),
 );
-const credentialTypesNodeDescription = computed(() => {
-	if (typeof props.overrideCredType !== 'string') return [];
-
-	const credType = credentialsStore.getCredentialTypeByName(props.overrideCredType);
-
-	if (credType) return [credType];
-
-	const activeNodeType = nodeType.value;
-	if (activeNodeType?.credentials) {
-		return activeNodeType.credentials;
-	}
-
-	return [];
-});
 
 const credentialTypeNames = computed(() => {
 	const returnData: Record<string, string> = {};

packages/frontend/editor-ui/src/components/NodeSettings.vue

@@ -6,6 +6,7 @@ import type {
 	INodeProperties,
 	NodeConnectionType,
 	NodeParameterValue,
+	INodeCredentialDescription,
 } from 'n8n-workflow';
 import {
 	NodeHelpers,
@@ -204,9 +205,24 @@ const parameters = computed(() => {
 const parametersSetting = computed(() => parameters.value.filter((item) => item.isNodeSetting));
 
 const parametersNoneSetting = computed(() =>
+	// The connection hint notice is visually hidden via CSS in NodeDetails.vue when the node has output connections
 	parameters.value.filter((item) => !item.isNodeSetting),
 );
 
+const isDisplayingCredentials = computed(
+	() =>
+		credentialsStore
+			.getCredentialTypesNodeDescriptions('', props.nodeType)
+			.filter((credentialTypeDescription) => displayCredentials(credentialTypeDescription)).length >
+		0,
+);
+
+const showNoParametersNotice = computed(
+	() =>
+		!isDisplayingCredentials.value &&
+		parametersNoneSetting.value.filter((item) => item.type !== 'notice').length === 0,
+);
+
 const outputPanelEditMode = computed(() => ndvStore.outputPanelEditMode);
 
 const isCommunityNode = computed(() => !!node.value && isCommunityPackageName(node.value.type));
@@ -957,6 +973,18 @@ onBeforeUnmount(() => {
 	importCurlEventBus.off('setHttpNodeParameters', setHttpNodeParameters);
 	ndvEventBus.off('updateParameterValue', valueChanged);
 });
+
+function displayCredentials(credentialTypeDescription: INodeCredentialDescription): boolean {
+	if (credentialTypeDescription.displayOptions === undefined) {
+		// If it is not defined no need to do a proper check
+		return true;
+	}
+
+	return (
+		!!node.value &&
+		nodeHelpers.displayParameter(node.value.parameters, credentialTypeDescription, '', node.value)
+	);
+}
 </script>
 
 <template>
@@ -1077,7 +1105,7 @@ onBeforeUnmount(() => {
 						@blur="onParameterBlur"
 					/>
 				</ParameterInputList>
-				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
+				<div v-if="showNoParametersNotice" class="no-parameters">
 					<n8n-text>
 						{{ i18n.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
 					</n8n-text>

packages/frontend/editor-ui/src/stores/credentials.store.ts

@@ -20,7 +20,10 @@ import { isEmpty, isPresent } from '@/utils/typesUtils';
 import type {
 	ICredentialsDecrypted,
 	ICredentialType,
+	INodeCredentialDescription,
 	INodeCredentialTestResult,
+	INodeTypeDescription,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
@@ -298,6 +301,19 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		return await credentialsApi.getCredentialData(rootStore.restApiContext, id);
 	};
 
+	const getCredentialTypesNodeDescriptions: (
+		overrideCredType: NodeParameterValueType,
+		nodeType: INodeTypeDescription | null,
+	) => INodeCredentialDescription[] = (overrideCredType, nodeType) => {
+		if (typeof overrideCredType !== 'string') return [];
+
+		const credType = getCredentialTypeByName.value(overrideCredType);
+
+		if (credType) return [credType];
+
+		return nodeType?.credentials ? nodeType.credentials : [];
+	};
+
 	const createNewCredential = async (
 		data: ICredentialsDecrypted,
 		projectId?: string,
@@ -444,6 +460,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		createNewCredential,
 		updateCredential,
 		getCredentialData,
+		getCredentialTypesNodeDescriptions,
 		oAuth1Authorize,
 		oAuth2Authorize,
 		getNewCredentialName,