From 59a59e0c5f1a5207a7124655b5768ac9fededcdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <miloradfilipovic19@gmail.com>
Date: Tue, 7 Jun 2022 15:02:08 +0200
Subject: [PATCH] feat(editor): Display Credential-Selector after
 Authentication Type-Selector (#3461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⚡ Implemented automatic position detection for credential fields.

* ✨ Updating automatic credentials position logic (removing `getParameterResolveOrder`call and fixing input spacing).

* 🔨 Using crednetial fileds displayOptions to determine the position relative to authentication fields.

* 👌 Handling credentials position detection edge-cases (no node type, no credentials)
---
 .../src/components/NodeCredentials.vue        |  4 +++
 .../src/components/ParameterInputList.vue     | 29 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 62b00069e7..65a892263f 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -315,6 +315,10 @@ export default mixins(
 <style lang="scss" module>
 .container {
 	margin-top: var(--spacing-xs);
+
+	& > div:not(:first-child) {
+		margin-top: var(--spacing-xs);
+	}
 }
 
 .warning {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 1f56acc9b6..7dbcc2ee42 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -88,6 +88,8 @@
 import {
 	INodeParameters,
 	INodeProperties,
+	INodeType,
+	INodeTypeDescription,
 	NodeParameterValue,
 } from 'n8n-workflow';
 
@@ -101,7 +103,6 @@ import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import { WEBHOOK_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -131,12 +132,34 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			indexToShowSlotAt (): number {
-				if (this.node.type === WEBHOOK_NODE_TYPE) return 1;
+				let index = 0;
+				const credentialsDependencies = this.getCredentialsDependencies();
 
-				return 0;
+				this.filteredParameters.forEach((prop, propIndex) => {
+					if (credentialsDependencies.has(prop.name)) {
+						index = propIndex + 1;
+					}
+				});
+
+				return index < this.filteredParameters.length ?
+					index : this.filteredParameters.length - 1;
 			},
 		},
 		methods: {
+			getCredentialsDependencies() {
+				const dependencies = new Set();
+				const nodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion) as INodeTypeDescription | undefined;
+
+				// Get names of all fields that credentials rendering depends on (using displayOptions > show)
+				if(nodeType && nodeType.credentials) {
+					for(const cred of nodeType.credentials) {
+						if(cred.displayOptions && cred.displayOptions.show) {
+							Object.keys(cred.displayOptions.show).forEach(fieldName => dependencies.add(fieldName));
+						}
+					}
+				}
+				return dependencies;
+			},
 			multipleValues (parameter: INodeProperties): boolean {
 				if (this.getArgument('multipleValues', parameter) === true) {
 					return true;