diff --git a/packages/frontend/editor-ui/src/components/NodeCredentials.test.ts b/packages/frontend/editor-ui/src/components/NodeCredentials.test.ts index e9a461ebe2..831b175975 100644 --- a/packages/frontend/editor-ui/src/components/NodeCredentials.test.ts +++ b/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, diff --git a/packages/frontend/editor-ui/src/components/NodeCredentials.vue b/packages/frontend/editor-ui/src/components/NodeCredentials.vue index ebd404b139..66b62f0241 100644 --- a/packages/frontend/editor-ui/src/components/NodeCredentials.vue +++ b/packages/frontend/editor-ui/src/components/NodeCredentials.vue @@ -85,31 +85,21 @@ const filter = ref(''); const listeningForAuthChange = ref(false); const selectRefs = ref>>([]); +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 = {}; diff --git a/packages/frontend/editor-ui/src/components/NodeSettings.vue b/packages/frontend/editor-ui/src/components/NodeSettings.vue index 3083c25175..6622db66fb 100644 --- a/packages/frontend/editor-ui/src/components/NodeSettings.vue +++ b/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) + ); +}