fix(editor): Fix node authentication options ordering and hiding opti…

…ons based on node version (#5268) * 🐛 Fixing auth options order and hiding options that are not valid for current node version * 🔨 Minor refactoring
n8n-io · Jan 27, 2023 · 7d74181 · 7d74181
1 parent 92ae988
commit 7d74181
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue b/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
@@ -56,7 +56,7 @@ const activeNodeType = computed<INodeTypeDescription | null>(() => {
 });
 
 const authOptions = computed<NodeAuthenticationOption[]>(() => {
-	return getNodeAuthOptions(activeNodeType.value);
+	return getNodeAuthOptions(activeNodeType.value, ndvStore.activeNode?.typeVersion);
 });
 
 const filteredNodeAuthOptions = computed<NodeAuthenticationOption[]>(() => {

diff --git a/packages/editor-ui/src/utils/nodeTypesUtils.ts b/packages/editor-ui/src/utils/nodeTypesUtils.ts
@@ -384,6 +384,7 @@ const findAlternativeAuthField = (
 // Gets all authentication types that a given node type supports
 export const getNodeAuthOptions = (
 	nodeType: INodeTypeDescription | null,
+	nodeVersion?: number,
 ): NodeAuthenticationOption[] => {
 	if (!nodeType) {
 		return [];
@@ -392,7 +393,9 @@ export const getNodeAuthOptions = (
 	const authProp = getMainAuthField(nodeType);
 	// Some nodes have multiple auth fields with same name but different display options so need
 	// take them all into account
-	const authProps = getNodeAuthFields(nodeType).filter((prop) => prop.name === authProp?.name);
+	const authProps = getNodeAuthFields(nodeType, nodeVersion).filter(
+		(prop) => prop.name === authProp?.name,
+	);
 
 	authProps.forEach((field) => {
 		if (field.options) {
@@ -406,6 +409,13 @@ export const getNodeAuthOptions = (
 			);
 		}
 	});
+	// sort so recommended options are first
+	options.forEach((item, i) => {
+		if (item.name.includes('(recommended)')) {
+			options.splice(i, 1);
+			options.unshift(item);
+		}
+	});
 	return options;
 };
 
@@ -474,7 +484,10 @@ export const isAuthRelatedParameter = (
 	return isRelated;
 };
 
-export const getNodeAuthFields = (nodeType: INodeTypeDescription | null): INodeProperties[] => {
+export const getNodeAuthFields = (
+	nodeType: INodeTypeDescription | null,
+	nodeVersion?: number,
+): INodeProperties[] => {
 	const authFields: INodeProperties[] = [];
 	if (nodeType && nodeType.credentials && nodeType.credentials.length > 0) {
 		nodeType.credentials.forEach((cred) => {
@@ -483,7 +496,10 @@ export const getNodeAuthFields = (nodeType: INodeTypeDescription | null): INodeP
 					const nodeFieldsForName = nodeType.properties.filter((prop) => prop.name === option);
 					if (nodeFieldsForName) {
 						nodeFieldsForName.forEach((nodeField) => {
-							if (!authFields.includes(nodeField)) {
+							if (
+								!authFields.includes(nodeField) &&
+								isNodeFieldMatchingNodeVersion(nodeField, nodeVersion)
+							) {
 								authFields.push(nodeField);
 							}
 						});
@@ -495,6 +511,16 @@ export const getNodeAuthFields = (nodeType: INodeTypeDescription | null): INodeP
 	return authFields;
 };
 
+export const isNodeFieldMatchingNodeVersion = (
+	nodeField: INodeProperties,
+	nodeVersion: number | undefined,
+) => {
+	if (nodeVersion && nodeField.displayOptions?.show?.['@version']) {
+		return nodeField.displayOptions.show['@version']?.includes(nodeVersion);
+	}
+	return true;
+};
+
 export const getCredentialsRelatedFields = (
 	nodeType: INodeTypeDescription | null,
 	credentialType: INodeCredentialDescription | null,