✨ Added node credentials type proxy. Changed node credentials input order.

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

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="$style.container">
+	<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="['node-credentials', $style.container]">
 		<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name">
 			<n8n-input-label
 				:label="$locale.baseText(
@@ -11,15 +11,20 @@
 					}
 				)"
 				:bold="false"
-				size="small"
-
 				:set="issues = getIssues(credentialTypeDescription.name)"
+				size="small"
 			>
 				<div v-if="isReadOnly">
-					<n8n-input disabled :value="selected && selected[credentialTypeDescription.name] && selected[credentialTypeDescription.name].name" size="small" />
+					<n8n-input
+						:value="selected && selected[credentialTypeDescription.name] && selected[credentialTypeDescription.name].name"
+						disabled
+						size="small"
+					/>
 				</div>
-
+				<div
-				<div :class="issues.length ? $style.hasIssues : $style.input" v-else >
+					v-else
+					:class="issues.length ? $style.hasIssues : $style.input"
+				>
 					<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" :placeholder="$locale.baseText('nodeCredentials.selectCredential')" size="small">
 						<n8n-option
 							v-for="(item) in credentialOptions[credentialTypeDescription.name]"
@@ -93,6 +98,13 @@ export default mixins(
 		...mapGetters('credentials', {
 			credentialOptions: 'allCredentialsByType',
 		}),
+		isProxyCredentialType(): boolean {
+			const proxyCredentialNodeTypes = ["n8n-nodes-base.httpRequest"];
+
+			return proxyCredentialNodeTypes.includes(this.node.type)
+				&& this.node.parameters.authenticateWith === 'nodeCredential'
+				&& this.node.parameters.nodeCredentialType;
+		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
@@ -106,6 +118,10 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
+			if (this.isProxyCredentialType) {
+				return [this.$store.getters['credentials/getCredentialTypeByName'](this.node.parameters.nodeCredentialType)];
+			}
+
 			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (activeNodeType && activeNodeType.credentials) {
 				return activeNodeType.credentials;
@@ -295,7 +311,7 @@ export default mixins(
 
 <style lang="scss" module>
 .container {
-	margin: var(--spacing-xs) 0;
+	margin: 0;
 
 	> * {
 		margin-bottom: var(--spacing-xs);

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

@@ -23,12 +23,23 @@
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">
-				<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
+				<node-webhooks
-				<node-webhooks :node="node" :nodeType="nodeType" />
+					:node="node"
-				<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
+					:nodeType="nodeType"
+				/>
+				<parameter-input-list
+					:parameters="parametersNoneSetting"
+					:hideDelete="true"
+					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
+				>
+					<node-credentials
+						:node="node"
+						@credentialSelected="credentialSelected"
+					/>
+				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
 					<n8n-text>
-					{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
+						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
 					</n8n-text>
 				</div>
 			</div>

packages/editor-ui/src/components/ParameterInputList.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="paramter-input-list-wrapper">
+	<div class="parameter-input-list-wrapper" :class="{ 'has-reordered-credentials-input': hasReorderedCredentialsInput }">
+		<slot />
 		<div v-for="parameter in filteredParameters" :key="parameter.name" :class="{indent}">
 			<div
 				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
@@ -84,6 +85,7 @@
 <script lang="ts">
 
 import {
+	INode,
 	INodeParameters,
 	INodeProperties,
 	NodeParameterValue,
@@ -124,8 +126,10 @@ export default mixins(
 			filteredParameterNames (): string[] {
 				return this.filteredParameters.map(parameter => parameter.name);
 			},
-			node (): INodeUi {
+			hasReorderedCredentialsInput(): boolean {
-				return this.$store.getters.activeNode;
+				const node: INode = this.$store.getters.activeNode;
+
+				return ["n8n-nodes-base.httpRequest"].includes(node.type);
 			},
 		},
 		methods: {
@@ -258,7 +262,21 @@ export default mixins(
 </script>
 
 <style lang="scss">
-.paramter-input-list-wrapper {
+.parameter-input-list-wrapper {
+	display: flex;
+	flex-direction: column;
+	padding-top: var(--spacing-xs);
+
+	&.has-reordered-credentials-input {
+		.node-credentials + div {
+			order: -2;
+		}
+
+		.node-credentials + div + div {
+			order: -1;
+		}
+	}
+
 	.delete-option {
 		display: none;
 		position: absolute;
@@ -291,7 +309,7 @@ export default mixins(
 
 	.parameter-item {
 		position: relative;
-		margin: var(--spacing-xs) 0;
+		margin: 0 0 var(--spacing-xs);
 
 		>.delete-option {
 			top: var(--spacing-5xs);