feat(editor): Display Credential-Selector after Authentication Type-Selector (#3461)

* ⚡ 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)

Author: MiloradFilipovic

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 {

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;