From 2808ee962d7145aa8418105d02777e4a3f82c48d Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 26 Apr 2022 17:16:16 +0300
Subject: [PATCH 001/104] :sparkles: Added node credentials type proxy. Changed
 node credentials input order.

---
 .../src/components/NodeCredentials.vue        | 30 ++++++++++++++-----
 .../editor-ui/src/components/NodeSettings.vue | 19 +++++++++---
 .../src/components/ParameterInputList.vue     | 28 +++++++++++++----
 3 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index f82d28e737ab6..d77d233fd3ea0 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/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 :class="issues.length ? $style.hasIssues : $style.input" v-else >
+				<div
+					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);
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 58a7708e58f61..d45131acfcdcf 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/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="node" :nodeType="nodeType" />
-				<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
+				<node-webhooks
+					:node="node"
+					: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>
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 837baad71b3da..4b4c0e37234fa 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/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 {
-				return this.$store.getters.activeNode;
+			hasReorderedCredentialsInput(): boolean {
+				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);

From d074e524fc25ff3a3429a219a4e3cfbf9addfa2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 28 Apr 2022 17:06:59 +0200
Subject: [PATCH 002/104] :zap: Add computed property from versioning branch

---
 packages/editor-ui/src/components/ParameterInputList.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 4b4c0e37234fa..a6658344dad8a 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -131,6 +131,9 @@ export default mixins(
 
 				return ["n8n-nodes-base.httpRequest"].includes(node.type);
 			},
+			node (): INodeUi {
+				return this.$store.getters.activeNode;
+			},
 		},
 		methods: {
 			multipleValues (parameter: INodeProperties): boolean {

From 403e5708a6f48889cbdb1974ab2f63bffba81722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 29 Apr 2022 11:14:58 +0200
Subject: [PATCH 003/104] :bug: Fix cred ref lost and unsaved

---
 .../editor-ui/src/components/mixins/workflowHelpers.ts     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 8820b2ff59278..98d1d4b46d932 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -326,10 +326,17 @@ export const workflowHelpers = mixins(
 					const nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, false, false, node);
 					nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
 
+					const fullAccess = ['n8n-nodes-base.httpRequest'].includes(node.type);
+
 					// Add the node credentials if there are some set and if they should be displayed
 					if (node.credentials !== undefined && nodeType.credentials !== undefined) {
 						const saveCredenetials: INodeCredentials = {};
 						for (const nodeCredentialTypeName of Object.keys(node.credentials)) {
+							if (fullAccess) {
+								saveCredenetials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
+								continue;
+							}
+
 							const credentialTypeDescription = nodeType.credentials
 								.find((credentialTypeDescription) => credentialTypeDescription.name === nodeCredentialTypeName);
 

From 59cb1a25c6d90b0a86ef20953390c920df6c1105 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 10:33:01 +0200
Subject: [PATCH 004/104] :zap: Make options consistent with cred type names

---
 .../nodes/HttpRequest/HttpRequest.node.ts     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 0b49f5a80107b..3573772a2bfc2 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -52,7 +52,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'basicAuth',
+							'httpBasicAuth',
 						],
 						'@version': [
 							2,
@@ -66,7 +66,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'digestAuth',
+							'httpDigestAuth',
 						],
 						'@version': [
 							2,
@@ -80,7 +80,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'headerAuth',
+							'httpHeaderAuth',
 						],
 						'@version': [
 							2,
@@ -94,7 +94,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'queryAuth',
+							'httpQueryAuth',
 						],
 						'@version': [
 							2,
@@ -108,7 +108,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'oAuth1',
+							'oAuth1Api',
 						],
 						'@version': [
 							2,
@@ -122,7 +122,7 @@ export class HttpRequest implements INodeType {
 				displayOptions: {
 					show: {
 						authenticateWith: [
-							'oAuth2',
+							'oAuth2Api',
 						],
 						'@version': [
 							2,
@@ -279,30 +279,30 @@ export class HttpRequest implements INodeType {
 				options: [
 					{
 						name: 'Basic Auth',
-						value: 'basicAuth',
+						value: 'httpBasicAuth',
 					},
 					{
 						name: 'Digest Auth',
-						value: 'digestAuth',
+						value: 'httpDigestAuth',
 					},
 					{
 						name: 'Header Auth',
-						value: 'headerAuth',
+						value: 'httpHeaderAuth',
 					},
 					{
 						name: 'Query Auth',
-						value: 'queryAuth',
+						value: 'httpQueryAuth',
 					},
 					{
 						name: 'OAuth1',
-						value: 'oAuth1',
+						value: 'oAuth1Api',
 					},
 					{
 						name: 'OAuth2',
-						value: 'oAuth2',
+						value: 'oAuth2Api',
 					},
 				],
-				default: 'basicAuth',
+				default: 'httpBasicAuth',
 				displayOptions: {
 					show: {
 						authenticateWith: [

From ca0f0df63586adb557b7bce9414e4736381208e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 10:34:59 +0200
Subject: [PATCH 005/104] :zap: Use prop to set component order

---
 packages/editor-ui/src/components/NodeSettings.vue       | 6 ++++++
 packages/editor-ui/src/components/ParameterInputList.vue | 8 ++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d45131acfcdcf..d27a50551e548 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -31,6 +31,7 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
+					:showCredentialsAfter="showCredentialsAfter"
 				>
 					<node-credentials
 						:node="node"
@@ -81,6 +82,8 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
+
 export default mixins(
 	externalHooks,
 	genericHelpers,
@@ -158,6 +161,9 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
+			showCredentialsAfter (): boolean {
+				return this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2;
+			},
 		},
 		props: {
 			eventBus: {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index a6658344dad8a..40531b924b249 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="parameter-input-list-wrapper" :class="{ 'has-reordered-credentials-input': hasReorderedCredentialsInput }">
+	<div class="parameter-input-list-wrapper" :class="{ 'has-reordered-credentials-input': showCredentialsAfter }">
 		<slot />
 		<div v-for="parameter in filteredParameters" :key="parameter.name" :class="{indent}">
 			<div
@@ -118,6 +118,7 @@ export default mixins(
 			'path', // string
 			'hideDelete', // boolean
 			'indent',
+			'showCredentialsAfter', // boolean
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {
@@ -126,11 +127,6 @@ export default mixins(
 			filteredParameterNames (): string[] {
 				return this.filteredParameters.map(parameter => parameter.name);
 			},
-			hasReorderedCredentialsInput(): boolean {
-				const node: INode = this.$store.getters.activeNode;
-
-				return ["n8n-nodes-base.httpRequest"].includes(node.type);
-			},
 			node (): INodeUi {
 				return this.$store.getters.activeNode;
 			},

From 81aeefa7157808fd6598a92bcefed025f0f48bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 10:35:28 +0200
Subject: [PATCH 006/104] :zap: Use constant and version

---
 packages/editor-ui/src/components/mixins/workflowHelpers.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 98d1d4b46d932..f00f2230fe371 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -5,6 +5,7 @@ import {
 	START_NODE_TYPE,
 	WEBHOOK_NODE_TYPE,
 	VIEWS,
+	HTTP_REQUEST_NODE_TYPE,
 } from '@/constants';
 
 import {
@@ -326,7 +327,7 @@ export const workflowHelpers = mixins(
 					const nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, false, false, node);
 					nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
 
-					const fullAccess = ['n8n-nodes-base.httpRequest'].includes(node.type);
+					const fullAccess = node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
 
 					// Add the node credentials if there are some set and if they should be displayed
 					if (node.credentials !== undefined && nodeType.credentials !== undefined) {

From 3d5b92b0091d246812d5d1cb2751244d5c3a6c4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 10:36:16 +0200
Subject: [PATCH 007/104] :zap: Fix rendering for generic auth creds

---
 .../src/components/NodeCredentials.vue        | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index d77d233fd3ea0..3f9d33452db14 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -77,6 +77,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -97,13 +98,17 @@ export default mixins(
 	computed: {
 		...mapGetters('credentials', {
 			credentialOptions: 'allCredentialsByType',
+			getCredentialTypeByName: 'getCredentialTypeByName',
 		}),
-		isProxyCredentialType(): boolean {
-			const proxyCredentialNodeTypes = ["n8n-nodes-base.httpRequest"];
-
-			return proxyCredentialNodeTypes.includes(this.node.type)
-				&& this.node.parameters.authenticateWith === 'nodeCredential'
-				&& this.node.parameters.nodeCredentialType;
+		isProxyAuth(): boolean {
+			return this.node.type === HTTP_REQUEST_NODE_TYPE
+				&& this.node.typeVersion === 2
+				&& this.node.parameters.authenticateWith === 'nodeCredential';
+		},
+		isGenericAuth(): boolean {
+			return this.node.type === HTTP_REQUEST_NODE_TYPE
+				&& this.node.typeVersion === 2
+				&& this.node.parameters.authenticateWith === 'genericAuth';
 		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription
@@ -118,8 +123,16 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
-			if (this.isProxyCredentialType) {
-				return [this.$store.getters['credentials/getCredentialTypeByName'](this.node.parameters.nodeCredentialType)];
+			if (this.isGenericAuth) {
+				const { genericAuthType } = this.node.parameters as { genericAuthType: string };
+
+				return [this.getCredentialTypeByName(genericAuthType)];
+			}
+
+			if (this.isProxyAuth) {
+				const { nodeCredentialType } = this.node.parameters as { nodeCredentialType?: string };
+
+				if (nodeCredentialType) return [this.getCredentialTypeByName(nodeCredentialType)];
 			}
 
 			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;

From 452139f7ec3627fbba7e1ae66bdc86fe84918d2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 11:08:25 +0200
Subject: [PATCH 008/104] :zap: Mark as required on first selection

---
 .../src/components/mixins/nodeHelpers.ts      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 00379a2aa825d..ac289ca5dd550 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -1,4 +1,5 @@
 import {
+	HTTP_REQUEST_NODE_TYPE,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 } from '@/constants';
 
@@ -32,11 +33,15 @@ import { restApi } from '@/components/mixins/restApi';
 import { get } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
+import { mapGetters } from 'vuex';
 
 export const nodeHelpers = mixins(
 	restApi,
 )
 	.extend({
+		computed: {
+			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
+		},
 		methods: {
 
 			// Returns the parameter value
@@ -198,6 +203,44 @@ export const nodeHelpers = mixins(
 				let credentialType: ICredentialType | null;
 				let credentialDisplayName: string;
 				let selectedCredentials: INodeCredentialsDetails;
+
+				if (
+					node.type === HTTP_REQUEST_NODE_TYPE &&
+					node.typeVersion === 2 &&
+					node.parameters.authenticateWith === 'genericAuth' &&
+					node.credentials === undefined // @TODO Or if no currently selected generic auth cred
+				) {
+					const { genericAuthType } = node.parameters as { genericAuthType: string };
+					const credentialType = this.getCredentialTypeByName(genericAuthType);
+
+					//
+
+					return {
+						credentials: {
+							[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
+						},
+					};
+				}
+
+				if (
+					node.type === HTTP_REQUEST_NODE_TYPE &&
+					node.typeVersion === 2 &&
+					node.parameters.authenticateWith === 'nodeCredential' &&
+					node.credentials === undefined // @TODO or if no currently selected service-specific cred
+				) {
+					const { nodeCredentialType } = node.parameters as { nodeCredentialType?: string };
+
+					if (!nodeCredentialType) return null;
+
+					const credentialType = this.getCredentialTypeByName(nodeCredentialType);
+
+					return {
+						credentials: {
+							[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
+						},
+					};
+				}
+
 				for (const credentialTypeDescription of nodeType!.credentials!) {
 					// Check if credentials should be displayed else ignore
 					if (this.displayParameter(node.parameters, credentialTypeDescription, '', node) !== true) {

From c19df79e109b1db355b2b32d73b0b4d6f5025e32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 14:00:43 +0200
Subject: [PATCH 009/104] :zap: Implement discoverability flow

---
 .../editor-ui/src/components/NodeSettings.vue | 27 +++++++++++++++
 .../src/components/ParameterInput.vue         | 34 +++++++++++++++++++
 .../src/plugins/i18n/locales/en.json          |  2 ++
 3 files changed, 63 insertions(+)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 58a7708e58f61..8607ec2f8f1f3 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -31,6 +31,21 @@
 					{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
 					</n8n-text>
 				</div>
+
+				<div v-if="customActionSelected" class="parameter-item parameter-notice">
+					<n8n-notice
+						:content="$locale.baseText(
+							'nodeSettings.youCanUseTheHttpRequestNode',
+							{
+								interpolate: {
+									nodeTypeDisplayName: nodeType.displayName
+								},
+							},
+						)"
+						:truncate="false"
+					/>
+				</div>
+
 			</div>
 			<div v-show="openPanel === 'settings'">
 				<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
@@ -87,6 +102,18 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
+			customActionSelected (): boolean {
+				return (
+					this.nodeValues.parameters !== undefined &&
+					typeof this.nodeValues.parameters === 'object' &&
+					this.nodeValues.parameters !== null &&
+					!Array.isArray(this.nodeValues.parameters) &&
+					(
+						this.nodeValues.parameters.resource === 'customAction' ||
+						this.nodeValues.parameters.operation === 'customAction'
+					)
+				);
+			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index f1cda9d38f81e..5afee149630e7 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -132,6 +132,18 @@
 					<div v-if="option.description" class="option-description" v-html="getOptionsOptionDescription(option)"></div>
 				</div>
 			</n8n-option>
+			<n8n-option
+				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
+				:key="'customAction'"
+				:value="'customAction'"
+				:label="'Custom Action'"
+			>
+				<div class="list-option">
+					<div class="option-headline">
+						{{ $locale.baseText('parameterInput.customAction') }}
+					</div>
+				</div>
+			</n8n-option>
 		</n8n-select>
 
 		<n8n-select
@@ -219,6 +231,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
+import { mapGetters } from "vuex";
 
 export default mixins(
 	externalHooks,
@@ -303,6 +316,7 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapGetters('credentials', ['allCredentialsByType', 'getCredentialTypeByName']),
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -486,6 +500,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
+						if (checkValue === 'customAction') continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
@@ -581,6 +596,25 @@ export default mixins(
 			workflow (): Workflow {
 				return this.getWorkflow();
 			},
+
+			/**
+			 * Whether the node's credential may be used to make a request with the HTTP Request node.
+			 */
+			isSupportedByHttpRequestNode(): boolean {
+				if (!this.node || !this.node.credentials) return false;
+
+				// @TODO Detect currently selected cred
+				const selectedCredentialTypeName = Object.keys(this.node.credentials);
+				if (!selectedCredentialTypeName.length) return false;
+				const name = selectedCredentialTypeName.pop()!;
+
+				const credentialType = this.getCredentialTypeByName(name);
+
+				return (
+					credentialType.name.slice(0, -4).endsWith('OAuth') ||
+					credentialType.authenticate !== undefined
+				);
+			},
 		},
 		methods: {
 			getPlaceholder(): string {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 07d529d4c0baa..19653dc167881 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -410,6 +410,7 @@
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
+	"nodeSettings.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a href=PENDING_WAITING_ON_DEB>Learn more</a>",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
@@ -483,6 +484,7 @@
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.addExpression": "Add Expression",
+	"parameterInput.customAction": "Custom Action",
 	"parameterInput.error": "ERROR",
 	"parameterInput.issues": "Issues",
 	"parameterInput.loadingOptions": "Loading options...",

From 9b3e9a27b547d0f409093f2ab1efd85c72457fb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 18:03:30 +0200
Subject: [PATCH 010/104] :zap: Mark as required on subsequent selections

---
 .../src/components/mixins/nodeHelpers.ts      | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index ac289ca5dd550..b6bd096aef307 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -204,17 +204,23 @@ export const nodeHelpers = mixins(
 				let credentialDisplayName: string;
 				let selectedCredentials: INodeCredentialsDetails;
 
+				const { authenticateWith, genericAuthType, nodeCredentialType } = node.parameters as {
+					authenticateWith: 'none' | 'genericAuth' | 'nodeCredential';
+					genericAuthType: string;
+					nodeCredentialType: string;
+				};
+
 				if (
 					node.type === HTTP_REQUEST_NODE_TYPE &&
 					node.typeVersion === 2 &&
-					node.parameters.authenticateWith === 'genericAuth' &&
-					node.credentials === undefined // @TODO Or if no currently selected generic auth cred
+					authenticateWith === 'genericAuth' &&
+					(
+						node.credentials === undefined ||
+						Object.keys(node.credentials).includes(genericAuthType) === false
+					)
 				) {
-					const { genericAuthType } = node.parameters as { genericAuthType: string };
 					const credentialType = this.getCredentialTypeByName(genericAuthType);
 
-					//
-
 					return {
 						credentials: {
 							[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
@@ -225,13 +231,13 @@ export const nodeHelpers = mixins(
 				if (
 					node.type === HTTP_REQUEST_NODE_TYPE &&
 					node.typeVersion === 2 &&
-					node.parameters.authenticateWith === 'nodeCredential' &&
-					node.credentials === undefined // @TODO or if no currently selected service-specific cred
+					authenticateWith === 'nodeCredential' &&
+					nodeCredentialType !== '' &&
+					(
+						node.credentials === undefined ||
+						Object.keys(node.credentials).includes(nodeCredentialType) === false
+					)
 				) {
-					const { nodeCredentialType } = node.parameters as { nodeCredentialType?: string };
-
-					if (!nodeCredentialType) return null;
-
 					const credentialType = this.getCredentialTypeByName(nodeCredentialType);
 
 					return {

From bd02a6127e9cb7074f3a4241d9bc81507718dc29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 2 May 2022 18:51:36 +0200
Subject: [PATCH 011/104] :zap: Fix marking as required after cred deletion

---
 .../src/components/mixins/nodeHelpers.ts      | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index b6bd096aef307..de4fd62f0f314 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -210,6 +210,10 @@ export const nodeHelpers = mixins(
 					nodeCredentialType: string;
 				};
 
+				/**
+				 * For HTTP Request node, report missing credential if no selected credential
+				 * or if no selected credentials of the chosen generic auth type.
+				 */
 				if (
 					node.type === HTTP_REQUEST_NODE_TYPE &&
 					node.typeVersion === 2 &&
@@ -228,6 +232,39 @@ export const nodeHelpers = mixins(
 					};
 				}
 
+				/**
+				 * For HTTP Request node, report missing credential if no selected credential
+				 * and if ID of chosen credential ID does not match ID in DB, so it was deleted.
+				 */
+				if (
+					node.type === HTTP_REQUEST_NODE_TYPE &&
+					node.typeVersion === 2 &&
+					authenticateWith === 'nodeCredential' &&
+					nodeCredentialType !== '' &&
+					node.credentials !== undefined
+				) {
+					const credentialType = this.getCredentialTypeByName(nodeCredentialType);
+
+					const dbCredentialsForType: ICredentialsResponse[] | null = this.$store.getters['credentials/getCredentialsByType'](nodeCredentialType);
+
+					const selectedCredentials = node.credentials[nodeCredentialType];
+
+					if (dbCredentialsForType !== null) {
+						const idMatch = dbCredentialsForType.find((c) => c.id === selectedCredentials.id);
+						if (!idMatch) {
+							return {
+								credentials: {
+									[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
+								},
+							};
+						}
+					}
+				}
+
+				/**
+				 * For HTTP Request node, report missing credential if no selected credential
+				 * or if no selected credentials of the chosen node credential type.
+				 */
 				if (
 					node.type === HTTP_REQUEST_NODE_TYPE &&
 					node.typeVersion === 2 &&

From 791ed9566fb75d5c534b2efe77c3b4be1a569189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 3 May 2022 09:28:50 +0200
Subject: [PATCH 012/104] :zap: Refactor to clean up

---
 .../src/components/mixins/nodeHelpers.ts      | 107 +++++++++---------
 1 file changed, 52 insertions(+), 55 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index de4fd62f0f314..c0e49397539be 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -40,7 +40,7 @@ export const nodeHelpers = mixins(
 )
 	.extend({
 		computed: {
-			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
+			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
 		},
 		methods: {
 
@@ -210,78 +210,37 @@ export const nodeHelpers = mixins(
 					nodeCredentialType: string;
 				};
 
-				/**
-				 * For HTTP Request node, report missing credential if no selected credential
-				 * or if no selected credentials of the chosen generic auth type.
-				 */
 				if (
-					node.type === HTTP_REQUEST_NODE_TYPE &&
-					node.typeVersion === 2 &&
+					isHttpRequestNodeV2(node) &&
 					authenticateWith === 'genericAuth' &&
-					(
-						node.credentials === undefined ||
-						Object.keys(node.credentials).includes(genericAuthType) === false
-					)
+					selectedCredsAreUnusable(node, genericAuthType)
 				) {
-					const credentialType = this.getCredentialTypeByName(genericAuthType);
-
-					return {
-						credentials: {
-							[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
-						},
-					};
+					const credential = this.getCredentialTypeByName(genericAuthType);
+					return reportUnsetCredential(credential);
 				}
 
-				/**
-				 * For HTTP Request node, report missing credential if no selected credential
-				 * and if ID of chosen credential ID does not match ID in DB, so it was deleted.
-				 */
 				if (
-					node.type === HTTP_REQUEST_NODE_TYPE &&
-					node.typeVersion === 2 &&
+					isHttpRequestNodeV2(node) &&
 					authenticateWith === 'nodeCredential' &&
 					nodeCredentialType !== '' &&
 					node.credentials !== undefined
 				) {
-					const credentialType = this.getCredentialTypeByName(nodeCredentialType);
+					const stored = this.getCredentialsByType(nodeCredentialType);
 
-					const dbCredentialsForType: ICredentialsResponse[] | null = this.$store.getters['credentials/getCredentialsByType'](nodeCredentialType);
-
-					const selectedCredentials = node.credentials[nodeCredentialType];
-
-					if (dbCredentialsForType !== null) {
-						const idMatch = dbCredentialsForType.find((c) => c.id === selectedCredentials.id);
-						if (!idMatch) {
-							return {
-								credentials: {
-									[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
-								},
-							};
-						}
+					if (selectedCredsWereDeleted(node, nodeCredentialType, stored)) {
+						const credential = this.getCredentialTypeByName(nodeCredentialType);
+						return reportUnsetCredential(credential);
 					}
 				}
 
-				/**
-				 * For HTTP Request node, report missing credential if no selected credential
-				 * or if no selected credentials of the chosen node credential type.
-				 */
 				if (
-					node.type === HTTP_REQUEST_NODE_TYPE &&
-					node.typeVersion === 2 &&
+					isHttpRequestNodeV2(node) &&
 					authenticateWith === 'nodeCredential' &&
 					nodeCredentialType !== '' &&
-					(
-						node.credentials === undefined ||
-						Object.keys(node.credentials).includes(nodeCredentialType) === false
-					)
+					selectedCredsAreUnusable(node, nodeCredentialType)
 				) {
-					const credentialType = this.getCredentialTypeByName(nodeCredentialType);
-
-					return {
-						credentials: {
-							[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
-						},
-					};
+					const credential = this.getCredentialTypeByName(nodeCredentialType);
+					return reportUnsetCredential(credential);
 				}
 
 				for (const credentialTypeDescription of nodeType!.credentials!) {
@@ -480,3 +439,41 @@ export const nodeHelpers = mixins(
 			},
 		},
 	});
+
+function isHttpRequestNodeV2(node: INodeUi) {
+	return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
+}
+
+/**
+ * Whether the node has no selected credentials, or none of the node's
+ * selected credentials are of the specified type.
+ */
+function selectedCredsAreUnusable(node: INodeUi, credentialType: string) {
+	return node.credentials === undefined || Object.keys(node.credentials).includes(credentialType) === false;
+}
+
+/**
+ * Whether the node's selected credentials of the specified type
+ * can no longer be found in the database.
+ */
+function selectedCredsWereDeleted(
+	node: INodeUi,
+	nodeCredentialType: string,
+	storedCredsByType: ICredentialsResponse[] | null,
+) {
+	if (!node.credentials || !storedCredsByType) return false;
+
+	const selectedCredsByType = node.credentials[nodeCredentialType];
+
+	if (!selectedCredsByType) return false;
+
+	return !storedCredsByType.find((c) => c.id === selectedCredsByType.id);
+}
+
+function reportUnsetCredential(credentialType: ICredentialType) {
+	return {
+		credentials: {
+			[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
+		},
+	};
+}

From cacd43f19c3a67be3be1f7a6ddba5fedc3f058c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 3 May 2022 13:38:15 +0200
Subject: [PATCH 013/104] :zap: Detect position automatically

---
 .../editor-ui/src/components/NodeSettings.vue |  4 ---
 .../src/components/ParameterInputList.vue     | 26 +++++++++----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d27a50551e548..b49010f96bd0b 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -31,7 +31,6 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
-					:showCredentialsAfter="showCredentialsAfter"
 				>
 					<node-credentials
 						:node="node"
@@ -161,9 +160,6 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
-			showCredentialsAfter (): boolean {
-				return this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2;
-			},
 		},
 		props: {
 			eventBus: {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 1831df3109801..89d2d3b838ffd 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,7 +1,8 @@
 <template>
-	<div class="parameter-input-list-wrapper" :class="{ 'has-reordered-credentials-input': showCredentialsAfter }">
-		<slot />
-		<div v-for="parameter in filteredParameters" :key="parameter.name" :class="{indent}">
+	<div class="parameter-input-list-wrapper">
+		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name" :class="{indent}">
+			<slot v-if="indexToShowSlotAt === index" />
+
 			<div
 				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
 				class="parameter-item"
@@ -103,6 +104,7 @@ import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -120,7 +122,6 @@ export default mixins(
 			'path', // string
 			'hideDelete', // boolean
 			'indent',
-			'showCredentialsAfter', // boolean
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {
@@ -132,6 +133,13 @@ export default mixins(
 			node (): INodeUi {
 				return this.$store.getters.activeNode;
 			},
+			indexToShowSlotAt (): number {
+				if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
+					return 2;
+				}
+
+				return 0;
+			},
 		},
 		methods: {
 			multipleValues (parameter: INodeProperties): boolean {
@@ -268,16 +276,6 @@ export default mixins(
 	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;

From fa4f4844063ff5241a3b596d8d3838768d4ca3fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 3 May 2022 14:40:05 +0200
Subject: [PATCH 014/104] :zap: Add i18n to option label

---
 packages/editor-ui/src/components/ParameterInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 5afee149630e7..a3f6d647389f8 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -136,7 +136,7 @@
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
 				:key="'customAction'"
 				:value="'customAction'"
-				:label="'Custom Action'"
+				:label="$locale.baseText('parameterInput.customAction')"
 			>
 				<div class="list-option">
 					<div class="option-headline">

From 4997569eb2b06464abbb4d8ab9eba8a10f9d33fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 3 May 2022 16:33:48 +0200
Subject: [PATCH 015/104] :zap: Hide subtitle for custom action

---
 packages/editor-ui/src/components/Node.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 1120a05e356c4..b553e5e0570a4 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -336,7 +336,11 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 	},
 	methods: {
 		setSubtitle() {
-			this.nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
+			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
+
+			this.nodeSubtitle = nodeSubtitle.includes('customAction')
+				? ''
+				: nodeSubtitle;
 		},
 		disableNode () {
 			this.disableNodes([this.data]);

From 64e08c8fddb8c73bb8ebc76d0ee44745e53ae651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 3 May 2022 17:38:05 +0200
Subject: [PATCH 016/104] :zap: Detect active credential type

---
 packages/editor-ui/src/Interface.ts                   | 1 +
 packages/editor-ui/src/components/NodeCredentials.vue | 4 ++++
 packages/editor-ui/src/components/ParameterInput.vue  | 9 ++-------
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 10457c8c41269..d2d9287df9719 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -145,6 +145,7 @@ export interface INodeUi extends INode {
 	notes?: string;
 	issues?: INodeIssues;
 	name: string;
+	activeCredentialType?: string;
 }
 
 export interface INodeTypesMaxCount {
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 3f9d33452db14..4fbc53d7f704d 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -216,6 +216,8 @@ export default mixins(
 				},
 			};
 
+			delete this.node.activeCredentialType;
+
 			this.$emit('credentialSelected', updateInformation);
 		},
 
@@ -272,6 +274,8 @@ export default mixins(
 				},
 			};
 
+			this.node.activeCredentialType = credentialType;
+
 			this.$emit('credentialSelected', updateInformation);
 		},
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index a3f6d647389f8..a733569fe57af 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -601,14 +601,9 @@ export default mixins(
 			 * Whether the node's credential may be used to make a request with the HTTP Request node.
 			 */
 			isSupportedByHttpRequestNode(): boolean {
-				if (!this.node || !this.node.credentials) return false;
+				if (!this.node || !this.node.activeCredentialType || !this.node.credentials) return false;
 
-				// @TODO Detect currently selected cred
-				const selectedCredentialTypeName = Object.keys(this.node.credentials);
-				if (!selectedCredentialTypeName.length) return false;
-				const name = selectedCredentialTypeName.pop()!;
-
-				const credentialType = this.getCredentialTypeByName(name);
+				const credentialType = this.getCredentialTypeByName(this.node.activeCredentialType);
 
 				return (
 					credentialType.name.slice(0, -4).endsWith('OAuth') ||

From aa986e13bec5e12dbbc3f0c3ed8f8f93c2550fb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:38:42 +0200
Subject: [PATCH 017/104] :zap: Prop drilling to re-render select

---
 .../editor-ui/src/components/NodeCredentials.vue   |  8 +++++++-
 packages/editor-ui/src/components/NodeSettings.vue | 14 ++++++++++++++
 .../editor-ui/src/components/ParameterInput.vue    | 14 +-------------
 .../src/components/ParameterInputFull.vue          |  2 ++
 .../src/components/ParameterInputList.vue          |  2 ++
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 4fbc53d7f704d..ef45f55f6f216 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -115,10 +115,16 @@ export default mixins(
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
 		},
 		credentialTypesNodeDescriptionDisplayed (): INodeCredentialDescription[] {
-			return this.credentialTypesNodeDescription
+			const descriptions = this.credentialTypesNodeDescription
 				.filter((credentialTypeDescription) => {
 					return this.displayCredentials(credentialTypeDescription);
 				});
+
+			if (descriptions.length === 1) {
+				this.$emit('newActiveCredentialType', descriptions[0].name);
+			}
+
+			return descriptions;
 		},
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index f74f531beabf3..65df8ea9165c5 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -31,10 +31,12 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
+					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				>
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
+						@newActiveCredentialType="checkIfSupportedByHttpRequestNode"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -209,6 +211,7 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
+				isSupportedByHttpRequestNode: false,
 
 				nodeSettings: [
 					{
@@ -310,6 +313,17 @@ export default mixins(
 			},
 		},
 		methods: {
+			/**
+			 * Check if the node's currently active credential type may be used to make a request with the HTTP Request node v2.
+			 */
+			checkIfSupportedByHttpRequestNode(activeCredentialType: string) {
+				const credentialType = this.getCredentialTypeByName(activeCredentialType);
+
+				this.isSupportedByHttpRequestNode = (
+					credentialType.name.slice(0, -4).endsWith('OAuth') ||
+					credentialType.authenticate !== undefined
+				);
+			},
 			onNodeExecute () {
 				this.$emit('execute');
 			},
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index a733569fe57af..0d5649000d69b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -258,6 +258,7 @@ export default mixins(
 			'hideIssues', // boolean
 			'errorHighlight',
 			'isForCredential', // boolean
+			'isSupportedByHttpRequestNode', // boolean
 		],
 		data () {
 			return {
@@ -597,19 +598,6 @@ export default mixins(
 				return this.getWorkflow();
 			},
 
-			/**
-			 * Whether the node's credential may be used to make a request with the HTTP Request node.
-			 */
-			isSupportedByHttpRequestNode(): boolean {
-				if (!this.node || !this.node.activeCredentialType || !this.node.credentials) return false;
-
-				const credentialType = this.getCredentialTypeByName(this.node.activeCredentialType);
-
-				return (
-					credentialType.name.slice(0, -4).endsWith('OAuth') ||
-					credentialType.authenticate !== undefined
-				);
-			},
 		},
 		methods: {
 			getPlaceholder(): string {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 127944c533252..df905f4eae02a 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -12,6 +12,7 @@
 			:displayOptions="displayOptions"
 			:path="path"
 			:isReadOnly="isReadOnly"
+			:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 			@valueChanged="valueChanged"
 			@focus="focused = true"
 			@blur="focused = false"
@@ -48,6 +49,7 @@ export default Vue
 			'parameter',
 			'path',
 			'value',
+			'isSupportedByHttpRequestNode',
 		],
 		methods: {
 			getArgument (argumentName: string): string | number | boolean | undefined {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 89d2d3b838ffd..1bb7866c3a74b 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -79,6 +79,7 @@
 					:path="getPath(parameter.name)"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChanged"
+					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				/>
 			</div>
 		</div>
@@ -122,6 +123,7 @@ export default mixins(
 			'path', // string
 			'hideDelete', // boolean
 			'indent',
+			'isSupportedByHttpRequestNode', // boolean
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {

From 0d4dbdc4f6c681077ebb3db8f839d49bc485e00e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:47:51 +0200
Subject: [PATCH 018/104] :fire: Remove unneeded property

---
 packages/editor-ui/src/Interface.ts                   | 1 -
 packages/editor-ui/src/components/NodeCredentials.vue | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index d2d9287df9719..10457c8c41269 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -145,7 +145,6 @@ export interface INodeUi extends INode {
 	notes?: string;
 	issues?: INodeIssues;
 	name: string;
-	activeCredentialType?: string;
 }
 
 export interface INodeTypesMaxCount {
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index ef45f55f6f216..7b950d79c7a59 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -222,8 +222,6 @@ export default mixins(
 				},
 			};
 
-			delete this.node.activeCredentialType;
-
 			this.$emit('credentialSelected', updateInformation);
 		},
 
@@ -280,8 +278,6 @@ export default mixins(
 				},
 			};
 
-			this.node.activeCredentialType = credentialType;
-
 			this.$emit('credentialSelected', updateInformation);
 		},
 

From 5743da3e0d3293b93da7e714374a9291cd92c051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:48:01 +0200
Subject: [PATCH 019/104] :pencil2: Rename arg

---
 packages/editor-ui/src/components/NodeSettings.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 65df8ea9165c5..231c8189f0ac3 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -316,8 +316,8 @@ export default mixins(
 			/**
 			 * Check if the node's currently active credential type may be used to make a request with the HTTP Request node v2.
 			 */
-			checkIfSupportedByHttpRequestNode(activeCredentialType: string) {
-				const credentialType = this.getCredentialTypeByName(activeCredentialType);
+			checkIfSupportedByHttpRequestNode(activeCredentialTypeName: string) {
+				const credentialType = this.getCredentialTypeByName(activeCredentialTypeName);
 
 				this.isSupportedByHttpRequestNode = (
 					credentialType.name.slice(0, -4).endsWith('OAuth') ||

From 290456297c3036939efc964e65caa46259fbe016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:48:53 +0200
Subject: [PATCH 020/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 231c8189f0ac3..44b4dccb0b7d3 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -98,8 +98,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
-
 export default mixins(
 	externalHooks,
 	genericHelpers,

From 238565b0ed3582d37a9a048a08d29a947542bcba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:51:58 +0200
Subject: [PATCH 021/104] :fire: Remove unneeded getters

---
 packages/editor-ui/src/components/ParameterInput.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 0d5649000d69b..beb9a2afb7aad 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -317,7 +317,6 @@ export default mixins(
 			},
 		},
 		computed: {
-			...mapGetters('credentials', ['allCredentialsByType', 'getCredentialTypeByName']),
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -597,7 +596,6 @@ export default mixins(
 			workflow (): Workflow {
 				return this.getWorkflow();
 			},
-
 		},
 		methods: {
 			getPlaceholder(): string {

From 9f15c93951ab4bfb0f149d501e2cdd668b3aca62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 11:52:19 +0200
Subject: [PATCH 022/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/ParameterInput.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index beb9a2afb7aad..55505b1444cfd 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -231,7 +231,6 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from "vuex";
 
 export default mixins(
 	externalHooks,

From 75eea89273b854110fa6d1f96c7c1d78dd3b0731 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 12:39:19 +0200
Subject: [PATCH 023/104] :zap: Generalize cred component positioning

---
 .../editor-ui/src/components/ParameterInputList.vue    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 89d2d3b838ffd..e874e7b092ffb 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -134,10 +134,18 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			indexToShowSlotAt (): number {
-				if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
+				// edge cases: credential with two dependencies
+				if (
+					(this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) ||
+					this.node.type === 'n8n-nodes-base.sentryIo'
+				) {
 					return 2;
 				}
 
+				if (this.nodeValues.parameters.authentication !== undefined) {
+					return 1;
+				}
+
 				return 0;
 			},
 		},

From 77747f8455fdc135abdd79ca2cd16349dea581f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 14:59:06 +0200
Subject: [PATCH 024/104] :zap: Set up request

---
 packages/editor-ui/src/Interface.ts                 | 1 +
 packages/editor-ui/src/components/mixins/restApi.ts | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 10457c8c41269..b0b7ef2e79ac7 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -184,6 +184,7 @@ export interface IRestApi {
 	retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
 	getTimezones(): Promise<IDataObject>;
 	getBinaryBufferString(dataPath: string): Promise<string>;
+	getScopes: (credentialType: string) => Promise<string[]>;
 }
 
 export interface INodeTranslationHeaders {
diff --git a/packages/editor-ui/src/components/mixins/restApi.ts b/packages/editor-ui/src/components/mixins/restApi.ts
index 7dad40044f90a..72e22cad096a1 100644
--- a/packages/editor-ui/src/components/mixins/restApi.ts
+++ b/packages/editor-ui/src/components/mixins/restApi.ts
@@ -195,6 +195,11 @@ export const restApi = Vue.extend({
 				getBinaryBufferString: (dataPath: string): Promise<string> => {
 					return self.restApi().makeRestApiRequest('GET', `/data/${dataPath}`);
 				},
+
+				// Returns scopes for OAuth credential types
+				getScopes: (credentialType: string): Promise<string[]> => {
+					return self.restApi().makeRestApiRequest('GET', '/oauth2-credential/scopes', { credentialType });
+				},
 			};
 		},
 	},

From 04997c5184727f73d8fcfe263d1964c3a5ad97a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 14:59:18 +0200
Subject: [PATCH 025/104] :bug: Fix edge case in endpoint

---
 packages/cli/src/CredentialsHelper.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/cli/src/CredentialsHelper.ts b/packages/cli/src/CredentialsHelper.ts
index d964daeb9b405..99c92a5bc7050 100644
--- a/packages/cli/src/CredentialsHelper.ts
+++ b/packages/cli/src/CredentialsHelper.ts
@@ -296,6 +296,9 @@ export class CredentialsHelper extends ICredentialsHelper {
 	getScopes(type: string): string[] {
 		const scopeProperty = this.getCredentialsProperties(type).find(({ name }) => name === 'scope');
 
+		// edge case: scope property exists but is required to be empty string, e.g. GoToWebinar
+		if (scopeProperty?.default === '') return [];
+
 		if (!scopeProperty?.default || typeof scopeProperty.default !== 'string') {
 			const errorMessage = `No \`scope\` property found for credential type: ${type}`;
 

From 1efedfddf362cee355445eb1732480f69bba2c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 14:59:45 +0200
Subject: [PATCH 026/104] :zap: Display scopes alert box

---
 .../src/components/NodeCredentials.vue        |  5 +++
 .../editor-ui/src/components/NodeSettings.vue | 43 ++++++++++++++++++-
 .../src/plugins/i18n/locales/en.json          |  1 +
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index f82d28e737ab6..10a6e5d4582a4 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -72,6 +72,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -106,6 +107,10 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
+			if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
+				this.$emit('newHttpRequestNodeCredentialType', this.node.parameters.nodeCredentialType);
+			}
+
 			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (activeNodeType && activeNodeType.credentials) {
 				return activeNodeType.credentials;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 58a7708e58f61..229aa6fda4be0 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -23,7 +23,25 @@
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">
-				<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
+				<n8n-notice
+					v-if="isHttpRequestNodeV2 && scopes.length > 0"
+					:truncate="true"
+					:content="$locale.baseText(
+						'nodeSettings.scopes',
+						{
+							adjustToNumber: scopes.length,
+							interpolate: {
+								activeCredential,
+								scopes: scopes.join(' '),
+							},
+						},
+					)"
+				/>
+				<node-credentials
+					:node="node"
+					@credentialSelected="credentialSelected"
+					@newHttpRequestNodeCredentialType="loadScopesNoticeData"
+				/>
 				<node-webhooks :node="node" :nodeType="nodeType" />
 				<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -69,6 +87,8 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
+import { mapGetters } from 'vuex';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -87,6 +107,10 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
+			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
+			isHttpRequestNodeV2(): boolean {
+				return this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2;
+			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -169,6 +193,8 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
+				activeCredential: '',
+				scopes: [] as string[],
 
 				nodeSettings: [
 					{
@@ -270,6 +296,21 @@ export default mixins(
 			},
 		},
 		methods: {
+			async loadScopesNoticeData(activeCredentialType: string) {
+				if (!this.isHttpRequestNodeV2) return;
+
+				if (
+					!activeCredentialType ||
+					!activeCredentialType.endsWith('OAuth2Api')
+				) {
+					this.scopes = [];
+					return;
+				}
+
+				this.activeCredential = this.getCredentialTypeByName(activeCredentialType).displayName;
+
+				this.scopes = await this.restApi().getScopes(activeCredentialType);
+			},
 			onNodeExecute () {
 				this.$emit('execute');
 			},
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 07d529d4c0baa..18ca9967978c0 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -410,6 +410,7 @@
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
+	"nodeSettings.scopes": "Your <b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | Your <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",

From 2eaf05ea216091b58cb476171ac9251f950c2483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 09:36:53 +0200
Subject: [PATCH 027/104] :rewind: Revert "Generalize cred comp positioning"

This reverts commit 75eea89273b854110fa6d1f96c7c1d78dd3b0731.
---
 .../editor-ui/src/components/ParameterInputList.vue    | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index e874e7b092ffb..89d2d3b838ffd 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -134,18 +134,10 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			indexToShowSlotAt (): number {
-				// edge cases: credential with two dependencies
-				if (
-					(this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) ||
-					this.node.type === 'n8n-nodes-base.sentryIo'
-				) {
+				if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
 					return 2;
 				}
 
-				if (this.nodeValues.parameters.authentication !== undefined) {
-					return 1;
-				}
-
 				return 0;
 			},
 		},

From fec2fc1b085bc9a01af114eea202abb05d114a74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 14:56:06 +0200
Subject: [PATCH 028/104] :zap: Consolidate HTTPRN check

---
 .../editor-ui/src/components/NodeCredentials.vue    | 11 ++++-------
 .../editor-ui/src/components/ParameterInputList.vue |  4 +---
 .../editor-ui/src/components/mixins/nodeHelpers.ts  | 13 ++++++-------
 .../src/components/mixins/workflowHelpers.ts        |  4 +---
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 3f9d33452db14..07d8a04350b89 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -77,7 +77,6 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -101,14 +100,12 @@ export default mixins(
 			getCredentialTypeByName: 'getCredentialTypeByName',
 		}),
 		isProxyAuth(): boolean {
-			return this.node.type === HTTP_REQUEST_NODE_TYPE
-				&& this.node.typeVersion === 2
-				&& this.node.parameters.authenticateWith === 'nodeCredential';
+			return this.isHttpRequestNodeV2(this.node) &&
+				this.node.parameters.authenticateWith === 'nodeCredential';
 		},
 		isGenericAuth(): boolean {
-			return this.node.type === HTTP_REQUEST_NODE_TYPE
-				&& this.node.typeVersion === 2
-				&& this.node.parameters.authenticateWith === 'genericAuth';
+			return this.isHttpRequestNodeV2(this.node) &&
+				this.node.parameters.authenticateWith === 'genericAuth';
 		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 89d2d3b838ffd..760a1dccd2bdd 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -134,9 +134,7 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			indexToShowSlotAt (): number {
-				if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
-					return 2;
-				}
+				if (this.isHttpRequestNodeV2(this.node)) return 2;
 
 				return 0;
 			},
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index c0e49397539be..b188a26007e5e 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -43,6 +43,9 @@ export const nodeHelpers = mixins(
 			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
 		},
 		methods: {
+			isHttpRequestNodeV2 (node: INodeUi): boolean {
+				return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
+			},
 
 			// Returns the parameter value
 			getParameterValue (nodeValues: INodeParameters, parameterName: string, path: string) {
@@ -211,7 +214,7 @@ export const nodeHelpers = mixins(
 				};
 
 				if (
-					isHttpRequestNodeV2(node) &&
+					this.isHttpRequestNodeV2(node) &&
 					authenticateWith === 'genericAuth' &&
 					selectedCredsAreUnusable(node, genericAuthType)
 				) {
@@ -220,7 +223,7 @@ export const nodeHelpers = mixins(
 				}
 
 				if (
-					isHttpRequestNodeV2(node) &&
+					this.isHttpRequestNodeV2(node) &&
 					authenticateWith === 'nodeCredential' &&
 					nodeCredentialType !== '' &&
 					node.credentials !== undefined
@@ -234,7 +237,7 @@ export const nodeHelpers = mixins(
 				}
 
 				if (
-					isHttpRequestNodeV2(node) &&
+					this.isHttpRequestNodeV2(node) &&
 					authenticateWith === 'nodeCredential' &&
 					nodeCredentialType !== '' &&
 					selectedCredsAreUnusable(node, nodeCredentialType)
@@ -440,10 +443,6 @@ export const nodeHelpers = mixins(
 		},
 	});
 
-function isHttpRequestNodeV2(node: INodeUi) {
-	return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
-}
-
 /**
  * Whether the node has no selected credentials, or none of the node's
  * selected credentials are of the specified type.
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index f00f2230fe371..dfc47b3a5ca18 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -327,13 +327,11 @@ export const workflowHelpers = mixins(
 					const nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, false, false, node);
 					nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
 
-					const fullAccess = node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
-
 					// Add the node credentials if there are some set and if they should be displayed
 					if (node.credentials !== undefined && nodeType.credentials !== undefined) {
 						const saveCredenetials: INodeCredentials = {};
 						for (const nodeCredentialTypeName of Object.keys(node.credentials)) {
-							if (fullAccess) {
+							if (this.isHttpRequestNodeV2(node)) {
 								saveCredenetials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
 								continue;
 							}

From 24b8a562a5c90f7dffb2c580b3795ab62f37d9a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 14:57:00 +0200
Subject: [PATCH 029/104] :zap: Fix hue percentage to degree

---
 packages/design-system/theme/src/_tokens.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index c8b64341d4c2c..30afd03d86e69 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -120,7 +120,7 @@
 		var(--color-warning-tint-1-l)
 	);
 
-	--color-warning-tint-2-h: 34%;
+	--color-warning-tint-2-h: 34;
 	--color-warning-tint-2-s: 80%;
 	--color-warning-tint-2-l: 96%;
 	--color-warning-tint-2: hsl(

From cb96d78b6ec851dc9b5899f88440e9ff1b7d1ac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:00:05 +0200
Subject: [PATCH 030/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/ParameterInputList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 760a1dccd2bdd..e684b8426f968 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -104,7 +104,6 @@ import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,

From b8357e0ccd8bab51c46f36825f0deb376b01ccf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:00:19 +0200
Subject: [PATCH 031/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/ParameterInputList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index e684b8426f968..f38b149d8808b 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -88,7 +88,6 @@
 <script lang="ts">
 
 import {
-	INode,
 	INodeParameters,
 	INodeProperties,
 	NodeParameterValue,

From 9151dec300e490a4006abfea359130994a501450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:01:16 +0200
Subject: [PATCH 032/104] :fire: Remove unused class

---
 packages/editor-ui/src/components/ParameterInputList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index f38b149d8808b..8a9d74a9e46bc 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="parameter-input-list-wrapper">
-		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name" :class="{indent}">
+		<div v-for="(parameter, index) in filteredParameters" :key="parameter.name">
 			<slot v-if="indexToShowSlotAt === index" />
 
 			<div

From cf54e6ab0787ec239c4ede1c3124c0883e5efcac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:01:51 +0200
Subject: [PATCH 033/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index b49010f96bd0b..d45131acfcdcf 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -81,8 +81,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
-
 export default mixins(
 	externalHooks,
 	genericHelpers,

From f7cff0382afc130e511fdc94eaf3b7a215686e74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:06:03 +0200
Subject: [PATCH 034/104] :blue_book: Create type for HTTPRN v2 auth params

---
 .../src/components/mixins/nodeHelpers.ts      | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index b188a26007e5e..070a0074c2495 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -207,11 +207,11 @@ export const nodeHelpers = mixins(
 				let credentialDisplayName: string;
 				let selectedCredentials: INodeCredentialsDetails;
 
-				const { authenticateWith, genericAuthType, nodeCredentialType } = node.parameters as {
-					authenticateWith: 'none' | 'genericAuth' | 'nodeCredential';
-					genericAuthType: string;
-					nodeCredentialType: string;
-				};
+				const {
+					authenticateWith,
+					genericAuthType,
+					nodeCredentialType,
+				} = node.parameters as HttpRequestNode.V2.AuthParams;
 
 				if (
 					this.isHttpRequestNodeV2(node) &&
@@ -476,3 +476,13 @@ function reportUnsetCredential(credentialType: ICredentialType) {
 		},
 	};
 }
+
+declare namespace HttpRequestNode {
+	namespace V2 {
+		type AuthParams = {
+			authenticateWith: 'none' | 'genericAuth' | 'nodeCredential';
+			genericAuthType: string;
+			nodeCredentialType: string;
+		};
+	}
+}

From bc4aaa6d0e596ead8c4e9df50717cecddf8d1bae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:07:16 +0200
Subject: [PATCH 035/104] :pencil2: Rename check

---
 packages/editor-ui/src/components/mixins/nodeHelpers.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 070a0074c2495..d5f132bdc4c22 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -230,7 +230,7 @@ export const nodeHelpers = mixins(
 				) {
 					const stored = this.getCredentialsByType(nodeCredentialType);
 
-					if (selectedCredsWereDeleted(node, nodeCredentialType, stored)) {
+					if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
 						const credential = this.getCredentialTypeByName(nodeCredentialType);
 						return reportUnsetCredential(credential);
 					}
@@ -455,7 +455,7 @@ function selectedCredsAreUnusable(node: INodeUi, credentialType: string) {
  * Whether the node's selected credentials of the specified type
  * can no longer be found in the database.
  */
-function selectedCredsWereDeleted(
+function selectedCredsDoNotExist(
 	node: INodeUi,
 	nodeCredentialType: string,
 	storedCredsByType: ICredentialsResponse[] | null,

From 43f7e2c8aadd16d527080294beb52012ebba3eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:13:48 +0200
Subject: [PATCH 036/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/mixins/workflowHelpers.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index dfc47b3a5ca18..0e86843cc1da0 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -5,7 +5,6 @@ import {
 	START_NODE_TYPE,
 	WEBHOOK_NODE_TYPE,
 	VIEWS,
-	HTTP_REQUEST_NODE_TYPE,
 } from '@/constants';
 
 import {

From 760ef5a32b35bd9f8dd46313aa5b385f72e76ac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:21:53 +0200
Subject: [PATCH 037/104] :pencil2: Add i18n to `reportUnsetCredential()`

---
 .../src/components/mixins/nodeHelpers.ts      | 31 ++++++++++++-------
 .../src/plugins/i18n/locales/en.json          |  1 +
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index d5f132bdc4c22..9d09389a2ae81 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -124,6 +124,23 @@ export const nodeHelpers = mixins(
 				return false;
 			},
 
+			reportUnsetCredential(credentialType: ICredentialType) {
+				return {
+					credentials: {
+						[credentialType.name]: [
+							this.$locale.baseText(
+								'nodeHelpers.credentialsUnset',
+								{
+									interpolate: {
+										credentialType: credentialType.displayName,
+									},
+								},
+							),
+						],
+					},
+				};
+			},
+
 			// Updates the execution issues.
 			updateNodesExecutionIssues () {
 				const nodes = this.$store.getters.allNodes;
@@ -219,7 +236,7 @@ export const nodeHelpers = mixins(
 					selectedCredsAreUnusable(node, genericAuthType)
 				) {
 					const credential = this.getCredentialTypeByName(genericAuthType);
-					return reportUnsetCredential(credential);
+					return this.reportUnsetCredential(credential);
 				}
 
 				if (
@@ -232,7 +249,7 @@ export const nodeHelpers = mixins(
 
 					if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
 						const credential = this.getCredentialTypeByName(nodeCredentialType);
-						return reportUnsetCredential(credential);
+						return this.reportUnsetCredential(credential);
 					}
 				}
 
@@ -243,7 +260,7 @@ export const nodeHelpers = mixins(
 					selectedCredsAreUnusable(node, nodeCredentialType)
 				) {
 					const credential = this.getCredentialTypeByName(nodeCredentialType);
-					return reportUnsetCredential(credential);
+					return this.reportUnsetCredential(credential);
 				}
 
 				for (const credentialTypeDescription of nodeType!.credentials!) {
@@ -469,14 +486,6 @@ function selectedCredsDoNotExist(
 	return !storedCredsByType.find((c) => c.id === selectedCredsByType.id);
 }
 
-function reportUnsetCredential(credentialType: ICredentialType) {
-	return {
-		credentials: {
-			[credentialType.name]: [`Credentials for "${credentialType.displayName}" are not set.`],
-		},
-	};
-}
-
 declare namespace HttpRequestNode {
 	namespace V2 {
 		type AuthParams = {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 07d529d4c0baa..23f26d677ad2f 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -387,6 +387,7 @@
 	"nodeErrorView.stack": "Stack",
 	"nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed": "The error cause is too large to be displayed",
 	"nodeErrorView.time": "Time",
+	"nodeHelpers.credentialsUnset": "Credentials for '{credentialType}' are not set.",
 	"nodeSettings.alwaysOutputData.description": "If active, will output a single, empty item when the output would have been empty. Use to prevent the workflow finishing on this node.",
 	"nodeSettings.alwaysOutputData.displayName": "Always Output Data",
 	"nodeSettings.clickOnTheQuestionMarkIcon": "Click the '?' icon to open this node on n8n.io",

From 0a221f3fc0b2ea47abb87697083828e4af759221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 15:53:42 +0200
Subject: [PATCH 038/104] :zap: Refactor Alex's spacing changes

---
 packages/editor-ui/src/components/ParameterInputList.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 8a9d74a9e46bc..87ede15ea34ec 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -268,9 +268,10 @@ export default mixins(
 
 <style lang="scss">
 .parameter-input-list-wrapper {
-	display: flex;
-	flex-direction: column;
-	padding-top: var(--spacing-xs);
+
+	div:first-child > .node-credentials {
+		padding-top: var(--spacing-xs);
+	}
 
 	.delete-option {
 		display: none;
@@ -304,7 +305,7 @@ export default mixins(
 
 	.parameter-item {
 		position: relative;
-		margin: 0 0 var(--spacing-xs);
+		margin: var(--spacing-xs) 0;
 
 		>.delete-option {
 			top: var(--spacing-5xs);

From e530bd45e8825efdd2fe0f0510c6705cea26837b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 18:12:08 +0200
Subject: [PATCH 039/104] :zap: Post-merge fixes

---
 .../editor-ui/src/components/NodeCredentials.vue  |  2 +-
 .../editor-ui/src/components/NodeSettings.vue     | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 40e185769c580..3fe09f52f75e5 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -121,7 +121,7 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
-			if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
+			if (this.isHttpRequestNodeV2(this.node)) {
 				this.$emit('newHttpRequestNodeCredentialType', this.node.parameters.nodeCredentialType);
 			}
 
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 9b9f2660ee7d5..64806d9ec274c 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -24,7 +24,7 @@
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">
 				<n8n-notice
-					v-if="isHttpRequestNodeV2 && scopes.length > 0"
+					v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
 					:truncate="true"
 					:content="$locale.baseText(
 						'nodeSettings.scopes',
@@ -45,11 +45,11 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
-					@newHttpRequestNodeCredentialType="loadScopesNoticeData"
 				>
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
+						@newHttpRequestNodeCredentialType="loadScopesNoticeData"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -96,7 +96,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { mapGetters } from 'vuex';
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -116,9 +115,6 @@ export default mixins(
 		},
 		computed: {
 			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
-			isHttpRequestNodeV2(): boolean {
-				return this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2;
-			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -305,7 +301,7 @@ export default mixins(
 		},
 		methods: {
 			async loadScopesNoticeData(activeCredentialType: string) {
-				if (!this.isHttpRequestNodeV2) return;
+				if (!this.isHttpRequestNodeV2(this.node)) return;
 
 				if (
 					!activeCredentialType ||
@@ -617,6 +613,11 @@ export default mixins(
 		height: 100%;
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
+
+		// @TODO Revisit
+		> div > .notice[role=alert] {
+			margin-top: var(--spacing-s);
+		}
 	}
 }
 

From 4450b6c2e9fa612679fbb88069a62439520bd9f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 18:27:25 +0200
Subject: [PATCH 040/104] :zap: Add docs link

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 175759ee55603..11d1cf2cc4945 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -411,7 +411,7 @@
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
-	"nodeSettings.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a href=PENDING_WAITING_ON_DEB>Learn more</a>",
+	"nodeSettings.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.scopes": "Your <b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | Your <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",

From 6d2bb7e18da36ffdf832be619a117cf0c7a17819 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 18:41:19 +0200
Subject: [PATCH 041/104] :fire: Exclude Notion OAuth cred

---
 packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 0475407326b86..687552cf5f93c 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -1418,6 +1418,8 @@ function isGenericAuth(cred: Credential) {
 function isSupportedNodeCredentialType(cred: Credential) {
 	if (isGenericAuth(cred)) return false;
 
+	if (cred.name === 'notionOAuth2Api') return false; // exists but currently commented out
+
 	if (cred.name.slice(0, -4).endsWith('OAuth')) return true;
 
 	return cred.authenticate !== undefined;

From e983266ce5cb636f6f82389e1a257c8f1dbf94fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 18:53:20 +0200
Subject: [PATCH 042/104] :pencil2: Update copy

---
 .../nodes/HttpRequest/HttpRequest.node.ts        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 687552cf5f93c..cbfeecbed056a 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -227,18 +227,18 @@ export class HttpRequest implements INodeType {
 				required: true,
 				options: [
 					{
-						name: 'Node Credential',
-						value: 'nodeCredential',
-						description: 'Easiest. Use a credential from another node, like Google Sheets.',
+						name: 'None',
+						value: 'none',
 					},
 					{
-						name: 'Generic Auth',
-						value: 'genericAuth',
-						description: 'Fully customizable. Choose between Basic, Header, OAuth2 and more.',
+						name: 'Existing Credential Type',
+						value: 'nodeCredential',
+						description: 'We\'ve already implemented auth for many services so that you don\'t have to set it up manually',
 					},
 					{
-						name: 'None',
-						value: 'none',
+						name: 'Generic Credential Type',
+						value: 'genericAuth',
+						description: 'Fully customizable. Choose between basic, header, OAuth2, etc.',
 					},
 				],
 				default: 'none',

From 5501bc881929446e1a05a6c92743e200df8ee0ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 18:55:59 +0200
Subject: [PATCH 043/104] :pencil2: Rename param

---
 packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index cbfeecbed056a..741bb78803bac 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -251,7 +251,7 @@ export class HttpRequest implements INodeType {
 				},
 			},
 			{
-				displayName: 'Node Credential Type',
+				displayName: 'Credential Type',
 				name: 'nodeCredentialType',
 				type: 'options',
 				required: true,

From a294201099c5a29fa7ffade4a3370089441c0e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 19:01:01 +0200
Subject: [PATCH 044/104] :art: Reposition notice and simplify styling

---
 .../editor-ui/src/components/NodeSettings.vue | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 2c1f5397593e3..fa31c2703cd30 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -23,20 +23,6 @@
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">
-				<n8n-notice
-					v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
-					:truncate="true"
-					:content="$locale.baseText(
-						'nodeSettings.scopes',
-						{
-							adjustToNumber: scopes.length,
-							interpolate: {
-								activeCredential,
-								scopes: scopes.join(' '),
-							},
-						},
-					)"
-				/>
 				<node-webhooks
 					:node="node"
 					:nodeType="nodeType"
@@ -47,6 +33,20 @@
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
 					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				>
+					<n8n-notice
+						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
+						:truncate="true"
+						:content="$locale.baseText(
+							'nodeSettings.scopes',
+							{
+								adjustToNumber: scopes.length,
+								interpolate: {
+									activeCredential,
+									scopes: scopes.join(' '),
+								},
+							},
+						)"
+					/>
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
@@ -655,9 +655,8 @@ export default mixins(
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
 
-		// @TODO Revisit
-		> div > .notice[role=alert] {
-			margin-top: var(--spacing-s);
+		.notice[role=alert] {
+			margin: var(--spacing-s) 0;
 		}
 	}
 }

From aa89404e7769ec48495a27ba2b11a7a90377af12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 5 May 2022 19:01:10 +0200
Subject: [PATCH 045/104] :pencil2: Update copy

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 11d1cf2cc4945..19366e81804b2 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -412,7 +412,7 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes": "Your <b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | Your <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
+	"nodeSettings.scopes": "<b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",

From ba9c85e1312fe4ee8a8a3f1827dec2f94f9df059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 6 May 2022 09:10:59 +0200
Subject: [PATCH 046/104] :pencil2: Update copy

---
 packages/editor-ui/src/components/NodeSettings.vue  | 2 +-
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index fa31c2703cd30..44a3b9215c122 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -63,7 +63,7 @@
 				<div v-if="customActionSelected" class="parameter-item parameter-notice">
 					<n8n-notice
 						:content="$locale.baseText(
-							'nodeSettings.youCanUseTheHttpRequestNode',
+							'nodeSettings.useTheHttpRequestNode',
 							{
 								interpolate: {
 									nodeTypeDisplayName: nodeType.displayName
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 19366e81804b2..ed80c0c3757c1 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -411,7 +411,7 @@
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
-	"nodeSettings.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
+	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.scopes": "<b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",

From 216d2e0379735adfe6e441e627137f3ba27f153d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 09:38:53 +0200
Subject: [PATCH 047/104] :zap: Hide params during custom action

---
 .../editor-ui/src/components/NodeSettings.vue | 14 +----------
 .../src/components/ParameterInputList.vue     |  7 ++++++
 .../src/components/mixins/nodeHelpers.ts      | 24 +++++++++++++++++++
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 44a3b9215c122..b0571a27e50a8 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -60,7 +60,7 @@
 					</n8n-text>
 				</div>
 
-				<div v-if="customActionSelected" class="parameter-item parameter-notice">
+				<div v-if="isCustomActionSelected(nodeValues)" class="parameter-item parameter-notice">
 					<n8n-notice
 						:content="$locale.baseText(
 							'nodeSettings.useTheHttpRequestNode',
@@ -132,18 +132,6 @@ export default mixins(
 		},
 		computed: {
 			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
-			customActionSelected (): boolean {
-				return (
-					this.nodeValues.parameters !== undefined &&
-					typeof this.nodeValues.parameters === 'object' &&
-					this.nodeValues.parameters !== null &&
-					!Array.isArray(this.nodeValues.parameters) &&
-					(
-						this.nodeValues.parameters.resource === 'customAction' ||
-						this.nodeValues.parameters.operation === 'customAction'
-					)
-				);
-			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index d757402088784..7654f365418da 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -178,6 +178,13 @@ export default mixins(
 					return false;
 				}
 
+				if (
+					this.isCustomActionSelected(this.nodeValues) &&
+					this.mustHideDuringCustomAction(parameter, this.nodeValues)
+				) {
+					return false;
+				}
+
 				if (parameter.displayOptions === undefined) {
 					// If it is not defined no need to do a proper check
 					return true;
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 9d09389a2ae81..d11275c9aa54b 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -47,6 +47,23 @@ export const nodeHelpers = mixins(
 				return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
 			},
 
+			isCustomActionSelected (nodeValues: INodeParameters): boolean {
+				const { parameters } = nodeValues;
+
+				return (
+					isObjectLiteral(parameters) &&
+					(parameters.resource === 'customAction' || parameters.operation === 'customAction')
+				);
+			},
+
+			mustHideDuringCustomAction (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
+				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
+
+				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
+
+				return !MUST_REMAIN_VISIBLE.includes(parameter.name);
+			},
+
 			// Returns the parameter value
 			getParameterValue (nodeValues: INodeParameters, parameterName: string, path: string) {
 				return get(
@@ -57,6 +74,9 @@ export const nodeHelpers = mixins(
 
 			// Returns if the given parameter should be displayed or not
 			displayParameter (nodeValues: INodeParameters, parameter: INodeProperties | INodeCredentialDescription, path: string, node: INodeUi | null) {
+				// TODO: If enabled, cannot select operation // If disabled (per original), cannot hide displayOptions.hide
+				// if (this.isCustomActionSelected(nodeValues)) return false;
+
 				return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node);
 			},
 
@@ -495,3 +515,7 @@ declare namespace HttpRequestNode {
 		};
 	}
 }
+
+function isObjectLiteral(maybeObject: unknown): maybeObject is { [key: string]: string } {
+	return typeof maybeObject === 'object' && maybeObject !== null && !Array.isArray(maybeObject);
+}

From e543b0487faa3d183a3aecb327f7c740140d7f7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 09:46:37 +0200
Subject: [PATCH 048/104] :zap: Show notice if any cred type supported

---
 .../src/components/NodeCredentials.vue        | 14 ++++----
 .../editor-ui/src/components/NodeSettings.vue | 33 ++++++++++---------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 679b1cba5349c..6fd88391a00a7 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -109,20 +109,18 @@ export default mixins(
 				this.node.parameters.authenticateWith === 'genericAuth';
 		},
 		credentialTypesNode (): string[] {
-			return this.credentialTypesNodeDescription
+			const nodeCredentialTypes = this.credentialTypesNodeDescription
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
+
+			this.$emit('nodeCredentialTypes', nodeCredentialTypes);
+
+			return nodeCredentialTypes;
 		},
 		credentialTypesNodeDescriptionDisplayed (): INodeCredentialDescription[] {
-			const descriptions = this.credentialTypesNodeDescription
+			return this.credentialTypesNodeDescription
 				.filter((credentialTypeDescription) => {
 					return this.displayCredentials(credentialTypeDescription);
 				});
-
-			if (descriptions.length === 1) {
-				this.$emit('newActiveCredentialType', descriptions[0].name);
-			}
-
-			return descriptions;
 		},
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index b0571a27e50a8..e0654c3921656 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -50,8 +50,8 @@
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
-						@newActiveCredentialType="checkIfSupportedByHttpRequestNode"
-						@newHttpRequestNodeCredentialType="loadScopesNoticeData"
+						@nodeCredentialTypes="checkHttpRequestNodeSupport"
+						@newHttpRequestNodeCredentialType="prepareScopesNotice"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -319,30 +319,31 @@ export default mixins(
 		},
 		methods: {
 			/**
-			 * Check if the node's currently active credential type may be used to make a request with the HTTP Request node v2.
+			 * Check if any of the node's credential types may be used to make a request with the HTTP Request node v2.
 			 */
-			checkIfSupportedByHttpRequestNode(activeCredentialTypeName: string) {
-				const credentialType = this.getCredentialTypeByName(activeCredentialTypeName);
+			checkHttpRequestNodeSupport(credentialTypeNames: string[]) {
+				if (!this.isHttpRequestNodeV2(this.node)) return;
+
+				this.isSupportedByHttpRequestNode = credentialTypeNames.some(name => {
+					const credentialType = this.getCredentialTypeByName(name);
 
-				this.isSupportedByHttpRequestNode = (
-					credentialType.name.slice(0, -4).endsWith('OAuth') ||
-					credentialType.authenticate !== undefined
-				);
+					return (
+						credentialType.name.slice(0, -4).endsWith('OAuth') ||
+						credentialType.authenticate !== undefined
+					);
+				});
 			},
-			async loadScopesNoticeData(activeCredentialType: string) {
+			async prepareScopesNotice(activeCredentialType: string) {
 				if (!this.isHttpRequestNodeV2(this.node)) return;
 
-				if (
-					!activeCredentialType ||
-					!activeCredentialType.endsWith('OAuth2Api')
-				) {
+				if (!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')) {
 					this.scopes = [];
 					return;
 				}
 
-				this.activeCredential = this.getCredentialTypeByName(activeCredentialType).displayName;
-
 				this.scopes = await this.restApi().getScopes(activeCredentialType);
+
+				this.activeCredential = this.getCredentialTypeByName(activeCredentialType).displayName;
 			},
 			onNodeExecute () {
 				this.$emit('execute');

From dc8d266fe4350ad47b0d073163d6a53fdf6e786c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 10:15:53 +0200
Subject: [PATCH 049/104] :bug: Prevent scopes text overflow

---
 packages/editor-ui/src/components/NodeSettings.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index e0654c3921656..8199c78c2380c 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -42,7 +42,7 @@
 								adjustToNumber: scopes.length,
 								interpolate: {
 									activeCredential,
-									scopes: scopes.join(' '),
+									scopes: scopesText,
 								},
 							},
 						)"
@@ -192,6 +192,9 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
+			scopesText(): string {
+				return this.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>');
+			},
 		},
 		props: {
 			eventBus: {

From 142038609758d68ec52d97a6dd34c7fb0050b771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 10:21:30 +0200
Subject: [PATCH 050/104] :fire: Remove superfluous check

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 8199c78c2380c..6b4d88344c56e 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -325,8 +325,6 @@ export default mixins(
 			 * Check if any of the node's credential types may be used to make a request with the HTTP Request node v2.
 			 */
 			checkHttpRequestNodeSupport(credentialTypeNames: string[]) {
-				if (!this.isHttpRequestNodeV2(this.node)) return;
-
 				this.isSupportedByHttpRequestNode = credentialTypeNames.some(name => {
 					const credentialType = this.getCredentialTypeByName(name);
 

From e6332a7cffa44ea37ca12fe9c13dec7913ba421b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 10:21:49 +0200
Subject: [PATCH 051/104] :pencil2: Break up docstring

---
 packages/editor-ui/src/components/NodeSettings.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 6b4d88344c56e..9a6407abbdb1f 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -322,7 +322,8 @@ export default mixins(
 		},
 		methods: {
 			/**
-			 * Check if any of the node's credential types may be used to make a request with the HTTP Request node v2.
+			 * Check if any of the node's credential types may be used to
+			 * make a request with the HTTP Request node v2.
 			 */
 			checkHttpRequestNodeSupport(credentialTypeNames: string[]) {
 				this.isSupportedByHttpRequestNode = credentialTypeNames.some(name => {

From 2c8805c37210223963e910b62d6571e7351ab102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 10:34:58 +0200
Subject: [PATCH 052/104] :art: Tweak notice styling

---
 packages/design-system/src/components/N8nNotice/Notice.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index bdd7bcec249e5..53df8338a3144 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -105,12 +105,13 @@ export default Vue.extend({
 	display: flex;
 	color: var(--custom-font-black);
 	margin: 0;
-	padding: var(--spacing-xs);
+	padding: var(--spacing-2xs);
 	background-color: var(--background-color);
 	border-width: 1px 1px 1px 7px;
 	border-style: solid;
 	border-color: var(--border-color);
 	border-radius: var(--border-radius-small);
+	line-height: var(--font-line-height-compact);
 
 	a {
 		font-weight: var(--font-weight-bold);

From 6d07fc2d8d94eca41e545ed86aee83f85c685704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 11:07:16 +0200
Subject: [PATCH 053/104] :zap: Reorder cred param in Webhook node

---
 packages/editor-ui/src/components/ParameterInputList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 7654f365418da..6bc094e11d09e 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -136,6 +136,8 @@ export default mixins(
 			indexToShowSlotAt (): number {
 				if (this.isHttpRequestNodeV2(this.node)) return 2;
 
+				if (this.node.type === 'n8n-nodes-base.webhook') return 1;
+
 				return 0;
 			},
 		},

From 4a6e78dc0e993010db48226fd593df40ae192a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 11:07:31 +0200
Subject: [PATCH 054/104] :pencil2: Shorten cred name in scopes notice

---
 packages/editor-ui/src/components/NodeSettings.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 9a6407abbdb1f..4dd4883dcb41f 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -345,7 +345,9 @@ export default mixins(
 
 				this.scopes = await this.restApi().getScopes(activeCredentialType);
 
-				this.activeCredential = this.getCredentialTypeByName(activeCredentialType).displayName;
+				const credentialType = this.getCredentialTypeByName(activeCredentialType);
+
+				this.activeCredential = credentialType.displayName.split(' ').shift() || '';
 			},
 			onNodeExecute () {
 				this.$emit('execute');

From 038040351acef61032559933fc384124999de95e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 12:01:59 +0200
Subject: [PATCH 055/104] :test_tube: Update Notice snapshots

---
 .../__tests__/__snapshots__/Notice.spec.ts.snap    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index b93c323f817be..ebddea32b92c3 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\">This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\">This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should render html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\"><strong>Hello world!</strong> This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\"><strong>Hello world!</strong> This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_4m4il_41\\"> This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\"> This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_4m4il_1 _warning_4m4il_16\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
   <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\">This is a notice.</span></div>
 </div>"
 `;

From 3f2c4a6645f7776deb1d05e67412b13ca40e2710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 12:59:32 +0200
Subject: [PATCH 056/104] :bug: Fix check when `globalRole` is `undefined`

---
 packages/cli/src/CredentialsHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/CredentialsHelper.ts b/packages/cli/src/CredentialsHelper.ts
index 99c92a5bc7050..e9c8fb4623e21 100644
--- a/packages/cli/src/CredentialsHelper.ts
+++ b/packages/cli/src/CredentialsHelper.ts
@@ -757,7 +757,7 @@ export function whereClause({
 }): WhereClause {
 	const where: WhereClause = entityId ? { [entityType]: { id: entityId } } : {};
 
-	if (user.globalRole.name !== 'owner') {
+	if (user?.globalRole?.name !== 'owner') {
 		where.user = { id: user.id };
 	}
 

From 1c0cb25388b39c74c1159a6d673a48849fce81a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 9 May 2022 13:37:00 +0200
Subject: [PATCH 057/104] :rewind: Revert 3f2c4a6

---
 packages/cli/src/CredentialsHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/src/CredentialsHelper.ts b/packages/cli/src/CredentialsHelper.ts
index e9c8fb4623e21..99c92a5bc7050 100644
--- a/packages/cli/src/CredentialsHelper.ts
+++ b/packages/cli/src/CredentialsHelper.ts
@@ -757,7 +757,7 @@ export function whereClause({
 }): WhereClause {
 	const where: WhereClause = entityId ? { [entityType]: { id: entityId } } : {};
 
-	if (user?.globalRole?.name !== 'owner') {
+	if (user.globalRole.name !== 'owner') {
 		where.user = { id: user.id };
 	}
 

From f06d77d98bd9cc1125ae96472b79357012f32544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 10 May 2022 14:02:13 +0200
Subject: [PATCH 058/104] :zap: Apply feedback from Product

---
 .../src/components/N8nNotice/Notice.vue       | 65 ++++++++++++++++++-
 packages/editor-ui/src/components/Node.vue    |  2 +-
 .../src/components/NodeCredentials.vue        |  4 +-
 .../editor-ui/src/components/NodeSettings.vue | 35 ++++++----
 .../src/components/ParameterInput.vue         | 10 +--
 .../src/components/ParameterInputList.vue     |  4 +-
 .../src/components/mixins/nodeHelpers.ts      | 19 +++---
 .../src/plugins/i18n/locales/en.json          |  4 +-
 .../nodes/HttpRequest/HttpRequest.node.ts     | 46 ++++++-------
 9 files changed, 130 insertions(+), 59 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 53df8338a3144..8039cd800b8bf 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -2,7 +2,39 @@
 	<div :id="id" :class="classes" role="alert">
 		<div class="notice-content">
 			<n8n-text size="small">
-				<slot>
+				<slot v-if="expandFromContent">
+					<span
+						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:id="`${id}-content`"
+						role="region"
+						v-html="preExpansionText"
+					/>
+					<a
+						role="button"
+						:aria-controls="`${id}-content`"
+						:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
+						@click="toggleExpanded"
+					>
+						{{ expansionText }}
+					</a>
+					<span
+						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:id="`${id}-content`"
+						role="region"
+						v-html="postExpansionText"
+					/>
+					<span v-if="canTruncate">
+						<a
+							role="button"
+							:aria-controls="`${id}-content`"
+							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
+							@click="toggleExpanded"
+						>
+							{{ expanded ? t('notice.showLess') : '' }}
+						</a>
+					</span>
+				</slot>
+				<slot v-else>
 					<span
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
@@ -61,6 +93,14 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		expandFromContent: {
+			type: Boolean,
+			default: false,
+		},
+		expansionTextPattern: {
+			type: RegExp,
+			default: () => /./,
+		},
 	},
 	components: {
 		N8nText,
@@ -91,6 +131,25 @@ export default Vue.extend({
 		sanitizedContent(): string {
 			return sanitizeHtml(this.truncatedContent);
 		},
+		expansionText(): string {
+			const match = this.truncatedContent.match(this.expansionTextPattern);
+
+			if (match.length !== 1) {
+				throw new Error('Expansion text must appear once in content');
+			}
+
+			return match[0];
+		},
+		preExpansionText(): string {
+			const pre = this.truncatedContent.split(this.expansionTextPattern).shift();
+
+			return sanitizeHtml(pre);
+		},
+		postExpansionText(): string {
+			const post = this.truncatedContent.split(this.expansionTextPattern).pop();
+
+			return sanitizeHtml(post);
+		},
 	},
 	methods: {
 		toggleExpanded() {
@@ -116,6 +175,10 @@ export default Vue.extend({
 	a {
 		font-weight: var(--font-weight-bold);
 	}
+
+	span {
+		line-height: var(--font-line-height-compact);
+	}
 }
 
 .warning {
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index b553e5e0570a4..63fca126b641b 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -338,7 +338,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		setSubtitle() {
 			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
 
-			this.nodeSubtitle = nodeSubtitle.includes('customAction')
+			this.nodeSubtitle = nodeSubtitle.includes('somethingElse')
 				? ''
 				: nodeSubtitle;
 		},
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 6fd88391a00a7..ff990973fa6fc 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -102,11 +102,11 @@ export default mixins(
 		}),
 		isProxyAuth(): boolean {
 			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authenticateWith === 'nodeCredential';
+				this.node.parameters.authentication === 'existingCredentialType';
 		},
 		isGenericAuth(): boolean {
 			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authenticateWith === 'genericAuth';
+				this.node.parameters.authentication === 'genericCredentialType';
 		},
 		credentialTypesNode (): string[] {
 			const nodeCredentialTypes = this.credentialTypesNodeDescription
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 4dd4883dcb41f..92b99fede2f8d 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -35,17 +35,11 @@
 				>
 					<n8n-notice
 						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
+						:content="scopesContent"
 						:truncate="true"
-						:content="$locale.baseText(
-							'nodeSettings.scopes',
-							{
-								adjustToNumber: scopes.length,
-								interpolate: {
-									activeCredential,
-									scopes: scopesText,
-								},
-							},
-						)"
+						:truncateAt="scopesContent.indexOf('<br>')"
+						:expandFromContent="true"
+						:expansionTextPattern="/\d+ scopes/"
 					/>
 					<node-credentials
 						:node="node"
@@ -60,7 +54,7 @@
 					</n8n-text>
 				</div>
 
-				<div v-if="isCustomActionSelected(nodeValues)" class="parameter-item parameter-notice">
+				<div v-if="isSomethingElseSelected(nodeValues)" class="parameter-item parameter-notice">
 					<n8n-notice
 						:content="$locale.baseText(
 							'nodeSettings.useTheHttpRequestNode',
@@ -192,8 +186,23 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
-			scopesText(): string {
-				return this.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>');
+			scopesContent (): string {
+				return this.$locale.baseText(
+					'nodeSettings.scopes',
+					{
+						adjustToNumber: this.scopes.length,
+						interpolate: {
+							activeCredential: this.activeCredential,
+							scopes: this.scopesToDisplay,
+						},
+					},
+				);
+			},
+			scopesToDisplay(): string {
+				return this.scopes
+					.map(scope => scope.replace(/\//g, '/<wbr>'),
+					)
+					.join('<br>');
 			},
 		},
 		props: {
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 55505b1444cfd..112d902cf76fd 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -134,13 +134,13 @@
 			</n8n-option>
 			<n8n-option
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
-				:key="'customAction'"
-				:value="'customAction'"
-				:label="$locale.baseText('parameterInput.customAction')"
+				:key="'somethingElse'"
+				:value="'somethingElse'"
+				:label="$locale.baseText('parameterInput.somethingElse')"
 			>
 				<div class="list-option">
 					<div class="option-headline">
-						{{ $locale.baseText('parameterInput.customAction') }}
+						{{ $locale.baseText('parameterInput.somethingElse') }}
 					</div>
 				</div>
 			</n8n-option>
@@ -499,7 +499,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
-						if (checkValue === 'customAction') continue;
+						if (checkValue === 'somethingElse') continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 6bc094e11d09e..dda40fa5472ff 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -181,8 +181,8 @@ export default mixins(
 				}
 
 				if (
-					this.isCustomActionSelected(this.nodeValues) &&
-					this.mustHideDuringCustomAction(parameter, this.nodeValues)
+					this.isSomethingElseSelected(this.nodeValues) &&
+					this.mustHideDuringSomethingElse(parameter, this.nodeValues)
 				) {
 					return false;
 				}
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index d11275c9aa54b..11756321d050d 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -47,16 +47,16 @@ export const nodeHelpers = mixins(
 				return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
 			},
 
-			isCustomActionSelected (nodeValues: INodeParameters): boolean {
+			isSomethingElseSelected (nodeValues: INodeParameters): boolean {
 				const { parameters } = nodeValues;
 
 				return (
 					isObjectLiteral(parameters) &&
-					(parameters.resource === 'customAction' || parameters.operation === 'customAction')
+					(parameters.resource === 'somethingElse' || parameters.operation === 'somethingElse')
 				);
 			},
 
-			mustHideDuringCustomAction (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
+			mustHideDuringSomethingElse (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
 				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
 
 				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
@@ -74,9 +74,6 @@ export const nodeHelpers = mixins(
 
 			// Returns if the given parameter should be displayed or not
 			displayParameter (nodeValues: INodeParameters, parameter: INodeProperties | INodeCredentialDescription, path: string, node: INodeUi | null) {
-				// TODO: If enabled, cannot select operation // If disabled (per original), cannot hide displayOptions.hide
-				// if (this.isCustomActionSelected(nodeValues)) return false;
-
 				return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node);
 			},
 
@@ -245,14 +242,14 @@ export const nodeHelpers = mixins(
 				let selectedCredentials: INodeCredentialsDetails;
 
 				const {
-					authenticateWith,
+					authentication,
 					genericAuthType,
 					nodeCredentialType,
 				} = node.parameters as HttpRequestNode.V2.AuthParams;
 
 				if (
 					this.isHttpRequestNodeV2(node) &&
-					authenticateWith === 'genericAuth' &&
+					authentication === 'genericCredentialType' &&
 					selectedCredsAreUnusable(node, genericAuthType)
 				) {
 					const credential = this.getCredentialTypeByName(genericAuthType);
@@ -261,7 +258,7 @@ export const nodeHelpers = mixins(
 
 				if (
 					this.isHttpRequestNodeV2(node) &&
-					authenticateWith === 'nodeCredential' &&
+					authentication === 'existingCredentialType' &&
 					nodeCredentialType !== '' &&
 					node.credentials !== undefined
 				) {
@@ -275,7 +272,7 @@ export const nodeHelpers = mixins(
 
 				if (
 					this.isHttpRequestNodeV2(node) &&
-					authenticateWith === 'nodeCredential' &&
+					authentication === 'existingCredentialType' &&
 					nodeCredentialType !== '' &&
 					selectedCredsAreUnusable(node, nodeCredentialType)
 				) {
@@ -509,7 +506,7 @@ function selectedCredsDoNotExist(
 declare namespace HttpRequestNode {
 	namespace V2 {
 		type AuthParams = {
-			authenticateWith: 'none' | 'genericAuth' | 'nodeCredential';
+			authentication: 'none' | 'genericCredentialType' | 'existingCredentialType';
 			genericAuthType: string;
 			nodeCredentialType: string;
 		};
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index ed80c0c3757c1..eca33a656b810 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -412,7 +412,7 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes": "<b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
+	"nodeSettings.scopes": "{activeCredential} has {count} scope available<br>{scopes} | {activeCredential} credential has {count} scopes available<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
@@ -486,7 +486,7 @@
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.addExpression": "Add Expression",
-	"parameterInput.customAction": "Custom Action",
+	"parameterInput.somethingElse": "Something Else",
 	"parameterInput.error": "ERROR",
 	"parameterInput.issues": "Issues",
 	"parameterInput.loadingOptions": "Loading options...",
diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index a89eaa86a777a..922dfb272e259 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -51,7 +51,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'httpBasicAuth',
 						],
 						'@version': [
@@ -65,7 +65,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'httpDigestAuth',
 						],
 						'@version': [
@@ -79,7 +79,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'httpHeaderAuth',
 						],
 						'@version': [
@@ -93,7 +93,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'httpQueryAuth',
 						],
 						'@version': [
@@ -107,7 +107,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'oAuth1Api',
 						],
 						'@version': [
@@ -121,7 +121,7 @@ export class HttpRequest implements INodeType {
 				required: true,
 				displayOptions: {
 					show: {
-						authenticateWith: [
+						authentication: [
 							'oAuth2Api',
 						],
 						'@version': [
@@ -221,8 +221,8 @@ export class HttpRequest implements INodeType {
 			//           v2 params
 			// ----------------------------------
 			{
-				displayName: 'Authenticate with',
-				name: 'authenticateWith',
+				displayName: 'Authentication',
+				name: 'authentication',
 				type: 'options',
 				required: true,
 				options: [
@@ -232,12 +232,12 @@ export class HttpRequest implements INodeType {
 					},
 					{
 						name: 'Existing Credential Type',
-						value: 'nodeCredential',
+						value: 'existingCredentialType',
 						description: 'We\'ve already implemented auth for many services so that you don\'t have to set it up manually',
 					},
 					{
 						name: 'Generic Credential Type',
-						value: 'genericAuth',
+						value: 'genericCredentialType',
 						description: 'Fully customizable. Choose between basic, header, OAuth2, etc.',
 					},
 				],
@@ -262,8 +262,8 @@ export class HttpRequest implements INodeType {
 				placeholder: 'None',
 				displayOptions: {
 					show: {
-						authenticateWith: [
-							'nodeCredential',
+						authentication: [
+							'existingCredentialType',
 						],
 						'@version': [
 							2,
@@ -305,8 +305,8 @@ export class HttpRequest implements INodeType {
 				default: 'httpBasicAuth',
 				displayOptions: {
 					show: {
-						authenticateWith: [
-							'genericAuth',
+						authentication: [
+							'genericCredentialType',
 						],
 						'@version': [
 							2,
@@ -353,7 +353,7 @@ export class HttpRequest implements INodeType {
 					},
 				],
 				default: 'none',
-				description: 'The way to authenticate.',
+				description: 'The way to authenticate',
 				displayOptions: {
 					show: {
 						'@version': [
@@ -882,13 +882,13 @@ export class HttpRequest implements INodeType {
 			'statusMessage',
 		];
 
-		let authenticateWith;
+		let authentication;
 		const nodeVersion = this.getNode().typeVersion;
 
 		const responseFormat = this.getNodeParameter('responseFormat', 0) as string;
 
 		try {
-			authenticateWith = this.getNodeParameter('authenticateWith', 0) as 'nodeCredential' | 'genericAuth' | 'none';
+			authentication = this.getNodeParameter('authentication', 0) as 'existingCredentialType' | 'genericCredentialType' | 'none';
 		} catch (_) {}
 
 		let httpBasicAuth;
@@ -899,7 +899,7 @@ export class HttpRequest implements INodeType {
 		let oAuth2Api;
 		let nodeCredentialType;
 
-		if (authenticateWith === 'genericAuth' || nodeVersion === 1) {
+		if (authentication === 'genericCredentialType' || nodeVersion === 1) {
 			try {
 				httpBasicAuth = await this.getCredentials('httpBasicAuth');
 			} catch (_) {}
@@ -918,7 +918,7 @@ export class HttpRequest implements INodeType {
 			try {
 				oAuth2Api = await this.getCredentials('oAuth2Api');
 			} catch (_) {}
-		} else if (authenticateWith === 'nodeCredential') {
+		} else if (authentication === 'existingCredentialType') {
 			try {
 				nodeCredentialType = this.getNodeParameter('nodeCredentialType', 0) as string;
 			} catch (_) {}
@@ -1215,8 +1215,8 @@ export class HttpRequest implements INodeType {
 			} catch (e) { }
 
 			if (
-				authenticateWith === 'genericAuth' ||
-				authenticateWith === 'none' ||
+				authentication === 'genericCredentialType' ||
+				authentication === 'none' ||
 				nodeVersion === 1
 			) {
 				if (oAuth1Api) {
@@ -1233,7 +1233,9 @@ export class HttpRequest implements INodeType {
 						this.helpers.request(requestOptions),
 					);
 				}
-			} else if (authenticateWith === 'nodeCredential' && nodeCredentialType) {
+			} else if (authentication === 'existingCredentialType' && nodeCredentialType) {
+				console.log(nodeCredentialType);
+				console.log(requestOptions);
 				// service-specific cred: OAuth1, OAuth2, plain
 				requestPromises.push(
 					this.helpers.requestWithAuthentication.call(this, nodeCredentialType, requestOptions),

From 517079f32d63088060a5aef7fded6f80c885c0d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 10 May 2022 14:04:01 +0200
Subject: [PATCH 059/104] :test_tube: Update snapshot

---
 .../__tests__/__snapshots__/Notice.spec.ts.snap    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index ebddea32b92c3..714e45cb916d6 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,28 +1,28 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\">This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should render html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\"><strong>Hello world!</strong> This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered html 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_bbch3_42\\"> This is a notice.</span>
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
     <!----></span></div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_bbch3_1 _warning_bbch3_17\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
   <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\">This is a notice.</span></div>
 </div>"
 `;

From 7b67774a63722e0ddb0a294b42b8c2f55e316a21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 10 May 2022 18:09:41 +0200
Subject: [PATCH 060/104] :zap: Adjust regex expansion pattern for singular

---
 packages/editor-ui/src/components/NodeSettings.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 92b99fede2f8d..05a34dc1b0221 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -39,7 +39,7 @@
 						:truncate="true"
 						:truncateAt="scopesContent.indexOf('<br>')"
 						:expandFromContent="true"
-						:expansionTextPattern="/\d+ scopes/"
+						:expansionTextPattern="/\d+ scopes?/"
 					/>
 					<node-credentials
 						:node="node"
@@ -199,10 +199,7 @@ export default mixins(
 				);
 			},
 			scopesToDisplay(): string {
-				return this.scopes
-					.map(scope => scope.replace(/\//g, '/<wbr>'),
-					)
-					.join('<br>');
+				return this.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>');
 			},
 		},
 		props: {

From 8e307c63912d42a1fd894201477312f83c1818c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 09:54:16 +0200
Subject: [PATCH 061/104] :fire: Remove unused import

---
 packages/editor-ui/src/components/NodeCredentials.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index ff990973fa6fc..ec74adfd63031 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -77,7 +77,6 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
-import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,

From 804896dc63a77a5fa0800ee867f317680ff6b878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 10:24:54 +0200
Subject: [PATCH 062/104] :fire: Remove logging

---
 packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 922dfb272e259..5343702897cd4 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -1234,8 +1234,6 @@ export class HttpRequest implements INodeType {
 					);
 				}
 			} else if (authentication === 'existingCredentialType' && nodeCredentialType) {
-				console.log(nodeCredentialType);
-				console.log(requestOptions);
 				// service-specific cred: OAuth1, OAuth2, plain
 				requestPromises.push(
 					this.helpers.requestWithAuthentication.call(this, nodeCredentialType, requestOptions),

From dc743f8442548ff29402817beac20da0a22bcaf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 10:26:41 +0200
Subject: [PATCH 063/104] :zap: Make `somethingElse` key more unique

---
 packages/editor-ui/src/components/ParameterInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 112d902cf76fd..108ceae130b30 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -134,7 +134,7 @@
 			</n8n-option>
 			<n8n-option
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
-				:key="'somethingElse'"
+				:key="`somethingElse-${parameter.name}`"
 				:value="'somethingElse'"
 				:label="$locale.baseText('parameterInput.somethingElse')"
 			>

From 7e961a52fd43850d143207aeec10c9d5fa7bbb38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 10:39:04 +0200
Subject: [PATCH 064/104] :zap: Move something else to constants

---
 packages/editor-ui/src/components/Node.vue              | 4 ++--
 packages/editor-ui/src/components/ParameterInput.vue    | 8 +++++---
 packages/editor-ui/src/components/mixins/nodeHelpers.ts | 7 +++++--
 packages/editor-ui/src/constants.ts                     | 3 +++
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 63fca126b641b..641f2e427fd85 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -75,7 +75,7 @@
 <script lang="ts">
 
 import Vue from 'vue';
-import { WAIT_TIME_UNLIMITED } from '@/constants';
+import { SOMETHING_ELSE_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
@@ -338,7 +338,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		setSubtitle() {
 			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
 
-			this.nodeSubtitle = nodeSubtitle.includes('somethingElse')
+			this.nodeSubtitle = nodeSubtitle.includes(SOMETHING_ELSE_KEY)
 				? ''
 				: nodeSubtitle;
 		},
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 108ceae130b30..a8fa0a2b0c5df 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -134,8 +134,8 @@
 			</n8n-option>
 			<n8n-option
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
-				:key="`somethingElse-${parameter.name}`"
-				:value="'somethingElse'"
+				:key="SOMETHING_ELSE_KEY"
+				:value="SOMETHING_ELSE_KEY"
 				:label="$locale.baseText('parameterInput.somethingElse')"
 			>
 				<div class="list-option">
@@ -231,6 +231,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
+import { SOMETHING_ELSE_KEY } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -270,6 +271,7 @@ export default mixins(
 				remoteParameterOptionsLoadingIssues: null as string | null,
 				textEditDialogVisible: false,
 				tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
+				SOMETHING_ELSE_KEY,
 				dateTimePickerOptions: {
 					shortcuts: [
 						{
@@ -499,7 +501,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
-						if (checkValue === 'somethingElse') continue;
+						if (checkValue === SOMETHING_ELSE_KEY) continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 11756321d050d..b7b7dd39797e2 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -1,6 +1,7 @@
 import {
 	HTTP_REQUEST_NODE_TYPE,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
+	SOMETHING_ELSE_KEY,
 } from '@/constants';
 
 import {
@@ -50,9 +51,11 @@ export const nodeHelpers = mixins(
 			isSomethingElseSelected (nodeValues: INodeParameters): boolean {
 				const { parameters } = nodeValues;
 
+				if (!isObjectLiteral(parameters)) return false;
+
 				return (
-					isObjectLiteral(parameters) &&
-					(parameters.resource === 'somethingElse' || parameters.operation === 'somethingElse')
+					parameters.resource === SOMETHING_ELSE_KEY ||
+					parameters.operation === SOMETHING_ELSE_KEY
 				);
 			},
 
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index f6df9933fd856..95d498cfef071 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -4,6 +4,9 @@ export const NODE_NAME_PREFIX = 'node-';
 
 export const PLACEHOLDER_FILLED_AT_EXECUTION_TIME = '[filled at execution time]';
 
+// parameter input
+export const SOMETHING_ELSE_KEY = '__SOMETHING_ELSE__';
+
 // workflows
 export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';
 export const DEFAULT_NODETYPE_VERSION = 1;

From 638d93dad01d605e4a44d68be302aee31125daf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 12:29:26 +0200
Subject: [PATCH 065/104] :zap: Consolidate notice component

---
 .../src/components/N8nNotice/Notice.vue       | 37 +++++-------------
 .../N8nNotice/__tests__/Notice.spec.ts        | 38 +++++++++++++++++--
 .../__snapshots__/Notice.spec.ts.snap         | 37 +++++++++++++-----
 .../src/components/ParameterInputList.vue     |  2 +-
 4 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 8039cd800b8bf..153d12fa94c37 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -2,53 +2,36 @@
 	<div :id="id" :class="classes" role="alert">
 		<div class="notice-content">
 			<n8n-text size="small">
-				<slot v-if="expandFromContent">
+				<slot>
 					<span
+						v-if="expandFromContent"
+						v-html="preExpansionText"
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
-						role="region"
-						v-html="preExpansionText"
+						role="pre-expansion-text-region"
 					/>
 					<a
-						role="button"
+						v-if="expandFromContent"
+						v-html="expansionText"
+						role="expansion-text-region"
 						:aria-controls="`${id}-content`"
 						:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
 						@click="toggleExpanded"
-					>
-						{{ expansionText }}
-					</a>
-					<span
-						:class="expanded ? $style['expanded'] : $style['truncated']"
-						:id="`${id}-content`"
-						role="region"
-						v-html="postExpansionText"
 					/>
-					<span v-if="canTruncate">
-						<a
-							role="button"
-							:aria-controls="`${id}-content`"
-							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-							@click="toggleExpanded"
-						>
-							{{ expanded ? t('notice.showLess') : '' }}
-						</a>
-					</span>
-				</slot>
-				<slot v-else>
 					<span
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
 						role="region"
-						v-html="sanitizedContent"
+						v-html="expandFromContent ? postExpansionText : sanitizedContent"
 					/>
 					<span v-if="canTruncate">
 						<a
 							role="button"
+							@click="toggleExpanded"
 							:aria-controls="`${id}-content`"
 							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-							@click="toggleExpanded"
 						>
-							{{ t(expanded ? 'notice.showLess' : 'notice.showMore') }}
+							{{ expanded ? t('notice.showLess') : expandFromContent ? '' : t('notice.showMore') }}
 						</a>
 					</span>
 				</slot>
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index 7029cdd084921..8b9bdeb9763da 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -11,6 +11,7 @@ describe('components', () => {
 				slots: {
 					default: 'This is a notice.',
 				},
+				stubs: ['n8n-text'],
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
@@ -23,28 +24,31 @@ describe('components', () => {
 							id: 'notice',
 							content: 'This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 					expect(wrapper.html()).toMatchSnapshot();
 				});
 
-				it('should render html', () => {
+				it('should render HTML', () => {
 					const wrapper = render(N8nNotice, {
 						props: {
 							id: 'notice',
 							content: '<strong>Hello world!</strong> This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 
 					expect(wrapper.container.querySelectorAll('strong')).toHaveLength(1);
 					expect(wrapper.html()).toMatchSnapshot();
 				});
 
-				it('should sanitize rendered html', () => {
+				it('should sanitize rendered HTML', () => {
 					const wrapper = render(N8nNotice, {
 						props: {
 							id: 'notice',
 							content: '<script>alert(1);</script> This is a notice.',
 						},
+						stubs: ['n8n-text'],
 					});
 
 					expect(wrapper.container.querySelector('script')).not.toBeTruthy();
@@ -61,6 +65,7 @@ describe('components', () => {
 						truncate: true,
 						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 					},
+					stubs: ['n8n-text'],
 				});
 
 				const button = await wrapper.findByRole('button');
@@ -73,13 +78,14 @@ describe('components', () => {
 				expect(region.textContent!.endsWith('...')).toBeTruthy();
 			});
 
-			it('should expand truncated text when clicking show more', async () => {
+			it('should expand truncated text when clicking \'Show more\'', async () => {
 				const wrapper = render(N8nNotice, {
 					props: {
 						id: 'notice',
 						truncate: true,
 						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 					},
+					stubs: ['n8n-text'],
 				});
 
 				const button = await wrapper.findByRole('button');
@@ -91,5 +97,31 @@ describe('components', () => {
 				expect(region.textContent!.endsWith('...')).not.toBeTruthy();
 			});
 		});
+
+
+		// describe('expansion text', () => {
+		// 	it('should expand from content', async () => {
+		// 		const wrapper = render(N8nNotice, {
+		// 			props: {
+		// 				id: 'notice',
+		// 				truncate: true,
+		// 				expandFromContent: true,
+		// 				expansionTextPattern: /\d+ scopes?/,
+		// 				content: 'Google credential has 2 scopes available<br>user.profile<br>user.contacts',
+		// 			},
+		// 			stubs: ['n8n-text'],
+		// 		});
+
+		// 		const button = await wrapper.findByRole('pre-expansion-text-region');
+		// 		const region = await wrapper.findByRole('expansion-text-region');
+
+		// 		expect(button).toBeVisible();
+		// 		expect(button).toHaveTextContent('2 scopes');
+
+		// 		expect(region).toBeVisible();
+		// 		expect(region.textContent!.endsWith('...')).toBeTruthy(); // TODO
+		// 	});
+		// });
+
 	});
 });
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index 714e45cb916d6..e770eaf4ee5eb 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,28 +1,45 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
+exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
-    <!----></span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
+      <!---->
+      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
+      <!---->
+    </n8n-text-stub>
+  </div>
 </div>"
 `;
 
-exports[`components > N8nNotice > props > content > should render html 1`] = `
+exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
-    <!----></span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
+      <!---->
+      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
+      <!---->
+    </n8n-text-stub>
+  </div>
 </div>"
 `;
 
-exports[`components > N8nNotice > props > content > should sanitize rendered html 1`] = `
+exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
-    <!----></span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
+      <!---->
+      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
+      <!---->
+    </n8n-text-stub>
+  </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
-  <div class=\\"notice-content\\"><span class=\\"_size-small_9dlpz_24 _regular_9dlpz_5\\">This is a notice.</span></div>
+  <div class=\\"notice-content\\">
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
+  </div>
 </div>"
 `;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index dda40fa5472ff..8a272e1ab7534 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -21,7 +21,7 @@
 				class="parameter-item"
 				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
 				:truncate="parameter.typeOptions && parameter.typeOptions.truncate"
-				:truncate-at="parameter.typeOptions && parameter.typeOptions.truncateAt"
+				:truncateAt="parameter.typeOptions && parameter.typeOptions.truncateAt"
 			/>
 
 			<div

From 4ab10d003ead3a977928e3b0056fe9dd768c48f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 12:54:25 +0200
Subject: [PATCH 066/104] :zap: Apply latest feedback

---
 packages/design-system/src/components/N8nNotice/Notice.vue | 6 +++++-
 packages/editor-ui/src/components/NodeSettings.vue         | 5 +++--
 packages/editor-ui/src/components/ParameterInput.vue       | 4 ++--
 packages/editor-ui/src/components/ParameterInputList.vue   | 4 ++--
 packages/editor-ui/src/components/mixins/nodeHelpers.ts    | 4 ++--
 packages/editor-ui/src/plugins/i18n/locales/en.json        | 4 ++--
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 153d12fa94c37..7cb93915bbfda 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -72,6 +72,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		trailingEllispsis: {
+			type: Boolean,
+			default: false,
+		},
 		content: {
 			type: String,
 			default: '',
@@ -109,7 +113,7 @@ export default Vue.extend({
 				return this.content;
 			}
 
-			return this.content.slice(0, this.truncateAt as number) + '...';
+			return this.content.slice(0, this.truncateAt as number) + (this.trailingEllipsis ? '...' : '');
 		},
 		sanitizedContent(): string {
 			return sanitizeHtml(this.truncatedContent);
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 05a34dc1b0221..b169ad6955fa5 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -38,6 +38,7 @@
 						:content="scopesContent"
 						:truncate="true"
 						:truncateAt="scopesContent.indexOf('<br>')"
+						:trailingEllispsis="false"
 						:expandFromContent="true"
 						:expansionTextPattern="/\d+ scopes?/"
 					/>
@@ -54,7 +55,7 @@
 					</n8n-text>
 				</div>
 
-				<div v-if="isSomethingElseSelected(nodeValues)" class="parameter-item parameter-notice">
+				<div v-if="isCustomApiCallSelected(nodeValues)" class="parameter-item parameter-notice">
 					<n8n-notice
 						:content="$locale.baseText(
 							'nodeSettings.useTheHttpRequestNode',
@@ -353,7 +354,7 @@ export default mixins(
 
 				const credentialType = this.getCredentialTypeByName(activeCredentialType);
 
-				this.activeCredential = credentialType.displayName.split(' ').shift() || '';
+				this.activeCredential = credentialType.displayName.replace(' OAuth2 API', '');
 			},
 			onNodeExecute () {
 				this.$emit('execute');
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index a8fa0a2b0c5df..9d525d166f4b1 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -136,11 +136,11 @@
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
 				:key="SOMETHING_ELSE_KEY"
 				:value="SOMETHING_ELSE_KEY"
-				:label="$locale.baseText('parameterInput.somethingElse')"
+				:label="$locale.baseText('parameterInput.customApiCall')"
 			>
 				<div class="list-option">
 					<div class="option-headline">
-						{{ $locale.baseText('parameterInput.somethingElse') }}
+						{{ $locale.baseText('parameterInput.customApiCall') }}
 					</div>
 				</div>
 			</n8n-option>
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 8a272e1ab7534..7ae388ed1229a 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -181,8 +181,8 @@ export default mixins(
 				}
 
 				if (
-					this.isSomethingElseSelected(this.nodeValues) &&
-					this.mustHideDuringSomethingElse(parameter, this.nodeValues)
+					this.isCustomApiCallSelected(this.nodeValues) &&
+					this.mustHideDuringCustomApiCall(parameter, this.nodeValues)
 				) {
 					return false;
 				}
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index b7b7dd39797e2..8f13f8dd29e43 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -48,7 +48,7 @@ export const nodeHelpers = mixins(
 				return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
 			},
 
-			isSomethingElseSelected (nodeValues: INodeParameters): boolean {
+			isCustomApiCallSelected (nodeValues: INodeParameters): boolean {
 				const { parameters } = nodeValues;
 
 				if (!isObjectLiteral(parameters)) return false;
@@ -59,7 +59,7 @@ export const nodeHelpers = mixins(
 				);
 			},
 
-			mustHideDuringSomethingElse (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
+			mustHideDuringCustomApiCall (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
 				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
 
 				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index eca33a656b810..9c5f027d4f117 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -412,7 +412,7 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes": "{activeCredential} has {count} scope available<br>{scopes} | {activeCredential} credential has {count} scopes available<br>{scopes}",
+	"nodeSettings.scopes": "{activeCredential} credentials have {count} scope available<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
@@ -486,7 +486,7 @@
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.addExpression": "Add Expression",
-	"parameterInput.somethingElse": "Something Else",
+	"parameterInput.customApiCall": "Custom API Call",
 	"parameterInput.error": "ERROR",
 	"parameterInput.issues": "Issues",
 	"parameterInput.loadingOptions": "Loading options...",

From f96161213b11fcbb048b450383cf4659d41945e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 14:33:15 +0200
Subject: [PATCH 067/104] :test_tube: Update tests

---
 .../src/components/N8nNotice/Notice.vue              |  9 +++++----
 .../components/N8nNotice/__tests__/Notice.spec.ts    | 12 +++++-------
 .../__tests__/__snapshots__/Notice.spec.ts.snap      |  6 +++---
 packages/editor-ui/src/components/NodeSettings.vue   |  5 +----
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 7cb93915bbfda..474befbb8bcaa 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -8,7 +8,7 @@
 						v-html="preExpansionText"
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
-						role="pre-expansion-text-region"
+						role="pre-expansion-region"
 					/>
 					<a
 						v-if="expandFromContent"
@@ -21,7 +21,7 @@
 					<span
 						:class="expanded ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
-						role="region"
+						role="post-expansion-region"
 						v-html="expandFromContent ? postExpansionText : sanitizedContent"
 					/>
 					<span v-if="canTruncate">
@@ -72,7 +72,7 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-		trailingEllispsis: {
+		trailingEllipsis: {
 			type: Boolean,
 			default: false,
 		},
@@ -148,9 +148,10 @@ export default Vue.extend({
 
 <style lang="scss" module>
 .notice {
+	font-size: var(--font-size-2xs);
 	display: flex;
 	color: var(--custom-font-black);
-	margin: 0;
+	margin: var(--spacing-s) 0;
 	padding: var(--spacing-2xs);
 	background-color: var(--background-color);
 	border-width: 1px 1px 1px 7px;
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index 8b9bdeb9763da..5c107dab56549 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -63,16 +63,13 @@ describe('components', () => {
 					props: {
 						id: 'notice',
 						truncate: true,
+						trailingEllipsis: true,
 						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 					},
 					stubs: ['n8n-text'],
 				});
 
-				const button = await wrapper.findByRole('button');
-				const region = await wrapper.findByRole('region');
-
-				expect(button).toBeVisible();
-				expect(button).toHaveTextContent('Show more');
+				const region = await wrapper.findByRole('post-expansion-region');
 
 				expect(region).toBeVisible();
 				expect(region.textContent!.endsWith('...')).toBeTruthy();
@@ -83,13 +80,14 @@ describe('components', () => {
 					props: {
 						id: 'notice',
 						truncate: true,
+						trailingEllipsis: true,
 						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 					},
 					stubs: ['n8n-text'],
 				});
 
 				const button = await wrapper.findByRole('button');
-				const region = await wrapper.findByRole('region');
+				const region = await wrapper.findByRole('post-expansion-region');
 
 				await fireEvent.click(button);
 
@@ -98,7 +96,7 @@ describe('components', () => {
 			});
 		});
 
-
+		// @TODO
 		// describe('expansion text', () => {
 		// 	it('should expand from content', async () => {
 		// 		const wrapper = render(N8nNotice, {
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index e770eaf4ee5eb..21d2db37112ba 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`components > N8nNotice > props > content > should render HTML 1`] = `
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
@@ -17,7 +17,7 @@ exports[`components > N8nNotice > props > content > should render correctly with
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
@@ -29,7 +29,7 @@ exports[`components > N8nNotice > props > content > should sanitize rendered HTM
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index b169ad6955fa5..6239372b81dee 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -38,7 +38,7 @@
 						:content="scopesContent"
 						:truncate="true"
 						:truncateAt="scopesContent.indexOf('<br>')"
-						:trailingEllispsis="false"
+						:trailingEllipsis="false"
 						:expandFromContent="true"
 						:expansionTextPattern="/\d+ scopes?/"
 					/>
@@ -655,9 +655,6 @@ export default mixins(
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
 
-		.notice[role=alert] {
-			margin: var(--spacing-s) 0;
-		}
 	}
 }
 

From baa4b08ff896ef7f182102c7f0d5a2212a6c3e24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 14:33:35 +0200
Subject: [PATCH 068/104] :test_tube: Update snapshot

---
 .../__tests__/__snapshots__/Notice.spec.ts.snap    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index 21d2db37112ba..c01e800f510b0 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nNotice > props > content > should render HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\"><strong>Hello world!</strong> This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\"><strong>Hello world!</strong> This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
@@ -13,11 +13,11 @@ exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 `;
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\">This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\">This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
@@ -25,11 +25,11 @@ exports[`components > N8nNotice > props > content > should render correctly with
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">
       <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_12mks_45\\"> This is a notice.</span>
+      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\"> This is a notice.</span>
       <!---->
     </n8n-text-stub>
   </div>
@@ -37,7 +37,7 @@ exports[`components > N8nNotice > props > content > should sanitize rendered HTM
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_12mks_1 _warning_12mks_20\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
     <n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
   </div>

From 93bfb7e8d9dc69c45a166dc87a4dbbcc699628cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 14:53:49 +0200
Subject: [PATCH 069/104] :pencil2: Fix singular version

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 9c5f027d4f117..1acd9844df46f 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -412,7 +412,7 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes": "{activeCredential} credentials have {count} scope available<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
+	"nodeSettings.scopes": "{count} scope available for {activeCredential} credentials<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",

From 4b2ecf8a274056c2dc5b3b24ec810a7bdcba0a26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 14:53:57 +0200
Subject: [PATCH 070/104] :test_tube: Finalize tests

---
 .../N8nNotice/__tests__/Notice.spec.ts        | 72 ++++++++++++-------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index 5c107dab56549..db8191dc00cac 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -96,30 +96,54 @@ describe('components', () => {
 			});
 		});
 
-		// @TODO
-		// describe('expansion text', () => {
-		// 	it('should expand from content', async () => {
-		// 		const wrapper = render(N8nNotice, {
-		// 			props: {
-		// 				id: 'notice',
-		// 				truncate: true,
-		// 				expandFromContent: true,
-		// 				expansionTextPattern: /\d+ scopes?/,
-		// 				content: 'Google credential has 2 scopes available<br>user.profile<br>user.contacts',
-		// 			},
-		// 			stubs: ['n8n-text'],
-		// 		});
-
-		// 		const button = await wrapper.findByRole('pre-expansion-text-region');
-		// 		const region = await wrapper.findByRole('expansion-text-region');
-
-		// 		expect(button).toBeVisible();
-		// 		expect(button).toHaveTextContent('2 scopes');
-
-		// 		expect(region).toBeVisible();
-		// 		expect(region.textContent!.endsWith('...')).toBeTruthy(); // TODO
-		// 	});
-		// });
+		describe('expansion text', () => {
+			it('should expand from content - multiple scopes', async () => {
+				const wrapper = render(N8nNotice, {
+					props: {
+						id: 'notice',
+						truncate: true,
+						expandFromContent: true,
+						expansionTextPattern: /\d+ scopes?/,
+						content: '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts',
+					},
+					stubs: ['n8n-text'],
+				});
+
+				const preRegion = await wrapper.findByRole('pre-expansion-region');
+				const expansionRegion = await wrapper.findByRole('expansion-text-region');
+				const postRegion = await wrapper.findByRole('post-expansion-region');
+
+				expect(preRegion.textContent).toBe('');
+				expect(expansionRegion).toBeVisible();
+				expect(postRegion).toBeVisible();
 
+				expect(expansionRegion).toHaveTextContent('2 scopes');
+				expect(postRegion).toHaveTextContent('available for Google Calendar credentials');
+			});
+
+			it('should expand from content - single scope', async () => {
+				const wrapper = render(N8nNotice, {
+					props: {
+						id: 'notice',
+						truncate: true,
+						expandFromContent: true,
+						expansionTextPattern: /\d+ scopes?/,
+						content: '1 scope available for Google Books credentials<br>user.books',
+					},
+					stubs: ['n8n-text'],
+				});
+
+				const preRegion = await wrapper.findByRole('pre-expansion-region');
+				const expansionRegion = await wrapper.findByRole('expansion-text-region');
+				const postRegion = await wrapper.findByRole('post-expansion-region');
+
+				expect(preRegion.textContent).toBe('');
+				expect(expansionRegion).toBeVisible();
+				expect(postRegion).toBeVisible();
+
+				expect(expansionRegion).toHaveTextContent('1 scope');
+				expect(postRegion).toHaveTextContent('available for Google Books credentials');
+			});
+		});
 	});
 });

From d6e2895f3016d362f5f1dfc10a6cf03e6f58218e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 15:42:08 +0200
Subject: [PATCH 071/104] :pencil2: Rename constant

---
 packages/editor-ui/src/components/Node.vue             |  4 ++--
 packages/editor-ui/src/components/ParameterInput.vue   | 10 +++++-----
 .../editor-ui/src/components/mixins/nodeHelpers.ts     |  6 +++---
 packages/editor-ui/src/constants.ts                    |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 641f2e427fd85..c4e3efac7aa4e 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -75,7 +75,7 @@
 <script lang="ts">
 
 import Vue from 'vue';
-import { SOMETHING_ELSE_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
+import { CUSTOM_API_CALL_KEY, WAIT_TIME_UNLIMITED } from '@/constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
@@ -338,7 +338,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		setSubtitle() {
 			const nodeSubtitle = this.getNodeSubtitle(this.data, this.nodeType, this.getWorkflow()) || '';
 
-			this.nodeSubtitle = nodeSubtitle.includes(SOMETHING_ELSE_KEY)
+			this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY)
 				? ''
 				: nodeSubtitle;
 		},
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 9d525d166f4b1..2b4e46b84992c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -134,8 +134,8 @@
 			</n8n-option>
 			<n8n-option
 				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
-				:key="SOMETHING_ELSE_KEY"
-				:value="SOMETHING_ELSE_KEY"
+				:key="CUSTOM_API_CALL_KEY"
+				:value="CUSTOM_API_CALL_KEY"
 				:label="$locale.baseText('parameterInput.customApiCall')"
 			>
 				<div class="list-option">
@@ -231,7 +231,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
-import { SOMETHING_ELSE_KEY } from '@/constants';
+import { CUSTOM_API_CALL_KEY } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -271,7 +271,7 @@ export default mixins(
 				remoteParameterOptionsLoadingIssues: null as string | null,
 				textEditDialogVisible: false,
 				tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
-				SOMETHING_ELSE_KEY,
+				CUSTOM_API_CALL_KEY,
 				dateTimePickerOptions: {
 					shortcuts: [
 						{
@@ -501,7 +501,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
-						if (checkValue === SOMETHING_ELSE_KEY) continue;
+						if (checkValue === CUSTOM_API_CALL_KEY) continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 8f13f8dd29e43..538b56dac7b16 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -1,7 +1,7 @@
 import {
 	HTTP_REQUEST_NODE_TYPE,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
-	SOMETHING_ELSE_KEY,
+	CUSTOM_API_CALL_KEY,
 } from '@/constants';
 
 import {
@@ -54,8 +54,8 @@ export const nodeHelpers = mixins(
 				if (!isObjectLiteral(parameters)) return false;
 
 				return (
-					parameters.resource === SOMETHING_ELSE_KEY ||
-					parameters.operation === SOMETHING_ELSE_KEY
+					parameters.resource === CUSTOM_API_CALL_KEY ||
+					parameters.operation === CUSTOM_API_CALL_KEY
 				);
 			},
 
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 95d498cfef071..2b89460abc5d6 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -5,7 +5,7 @@ export const NODE_NAME_PREFIX = 'node-';
 export const PLACEHOLDER_FILLED_AT_EXECUTION_TIME = '[filled at execution time]';
 
 // parameter input
-export const SOMETHING_ELSE_KEY = '__SOMETHING_ELSE__';
+export const CUSTOM_API_CALL_KEY = '__CUSTOM_API_CALL__';
 
 // workflows
 export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';

From 4f3738dfe296ca02c3d5870f75c07ed7b5fe3c20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 16:09:31 +0200
Subject: [PATCH 072/104] :test_tube: Expand tests

---
 .../src/components/N8nNotice/Notice.vue       |   2 +-
 .../N8nNotice/__tests__/Notice.spec.ts        | 194 +++++++++++++++---
 2 files changed, 161 insertions(+), 35 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 474befbb8bcaa..f41c6f8be403c 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -13,7 +13,7 @@
 					<a
 						v-if="expandFromContent"
 						v-html="expansionText"
-						role="expansion-text-region"
+						role="expansion-region"
 						:aria-controls="`${id}-content`"
 						:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
 						@click="toggleExpanded"
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index db8191dc00cac..6b9574f981b3c 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -58,7 +58,7 @@ describe('components', () => {
 		});
 
 		describe('truncation', () => {
-			it('should truncate content longer than 150 characters', async () => {
+			it('should truncate content longer than 150 characters - with trailing ellipsis', async () => {
 				const wrapper = render(N8nNotice, {
 					props: {
 						id: 'notice',
@@ -69,10 +69,10 @@ describe('components', () => {
 					stubs: ['n8n-text'],
 				});
 
-				const region = await wrapper.findByRole('post-expansion-region');
+				const post = await wrapper.findByRole('post-expansion-region');
 
-				expect(region).toBeVisible();
-				expect(region.textContent!.endsWith('...')).toBeTruthy();
+				expect(post).toBeVisible();
+				expect(post.textContent!.endsWith('...')).toBeTruthy();
 			});
 
 			it('should expand truncated text when clicking \'Show more\'', async () => {
@@ -87,63 +87,189 @@ describe('components', () => {
 				});
 
 				const button = await wrapper.findByRole('button');
-				const region = await wrapper.findByRole('post-expansion-region');
+				const post = await wrapper.findByRole('post-expansion-region');
 
 				await fireEvent.click(button);
 
 				expect(button).toHaveTextContent('Show less');
-				expect(region.textContent!.endsWith('...')).not.toBeTruthy();
+				expect(post.textContent!.endsWith('...')).not.toBeTruthy();
 			});
 		});
 
 		describe('expansion text', () => {
-			it('should expand from content - multiple scopes', async () => {
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						expandFromContent: true,
-						expansionTextPattern: /\d+ scopes?/,
-						content: '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts',
-					},
-					stubs: ['n8n-text'],
+
+			describe('should expand from content', () => {
+
+				it('expansion text at start - without trailing ellipsis', async () => {
+					const wrapper = render(N8nNotice, {
+						props: {
+							id: 'notice',
+							truncate: true,
+							expandFromContent: true,
+							expansionTextPattern: /\d+ scopes?/,
+							content: '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts',
+						},
+						stubs: ['n8n-text'],
+					});
+
+					const pre = await wrapper.findByRole('pre-expansion-region');
+					const expansionRegion = await wrapper.findByRole('expansion-region');
+					const post = await wrapper.findByRole('post-expansion-region');
+
+					expect(pre).toBeVisible();
+					expect(expansionRegion).toBeVisible();
+					expect(post).toBeVisible();
+
+					expect(pre).toBeEmptyDOMElement();
+					expect(expansionRegion).toHaveTextContent('2 scopes');
+					expect(post).toHaveTextContent('available for Google Calendar credentials');
+					expect(post.textContent?.endsWith('...')).toBe(false);
 				});
 
-				const preRegion = await wrapper.findByRole('pre-expansion-region');
-				const expansionRegion = await wrapper.findByRole('expansion-text-region');
-				const postRegion = await wrapper.findByRole('post-expansion-region');
+				it('expansion text at start - with trailing ellipsis', async () => {
+					const content = '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts';
+
+					const wrapper = render(N8nNotice, {
+						props: {
+							id: 'notice',
+							truncate: true,
+							truncateAt: content.indexOf('<br>'),
+							trailingEllipsis: true,
+							expandFromContent: true,
+							expansionTextPattern: /\d+ scopes?/,
+							content,
+						},
+						stubs: ['n8n-text'],
+					});
+
+					const pre = await wrapper.findByRole('pre-expansion-region');
+					const expansionRegion = await wrapper.findByRole('expansion-region');
+					const post = await wrapper.findByRole('post-expansion-region');
 
-				expect(preRegion.textContent).toBe('');
-				expect(expansionRegion).toBeVisible();
-				expect(postRegion).toBeVisible();
+					expect(pre).toBeVisible();
+					expect(expansionRegion).toBeVisible();
+					expect(post).toBeVisible();
+
+					expect(pre).toBeEmptyDOMElement();
+					expect(expansionRegion).toHaveTextContent('2 scopes');
+					expect(post).toHaveTextContent('available for Google Calendar credentials');
+					expect(post.textContent?.endsWith('...')).toBe(true);
+				});
 
-				expect(expansionRegion).toHaveTextContent('2 scopes');
-				expect(postRegion).toHaveTextContent('available for Google Calendar credentials');
+				it('expansion text at middle - without trailing ellipsis', async () => {
+					const wrapper = render(N8nNotice, {
+						props: {
+							id: 'notice',
+							truncate: true,
+							expandFromContent: true,
+							expansionTextPattern: /\d+ scopes?/,
+							content: 'Google Books has 1 scope available<br>user.books',
+						},
+						stubs: ['n8n-text'],
+					});
+
+					const pre = await wrapper.findByRole('pre-expansion-region');
+					const expansion = await wrapper.findByRole('expansion-region');
+					const post = await wrapper.findByRole('post-expansion-region');
+
+					expect(pre).toBeVisible();
+					expect(expansion).toBeVisible();
+					expect(post).toBeVisible();
+
+					expect(pre).toHaveTextContent('Google Books has');
+					expect(expansion).toHaveTextContent('1 scope');
+					expect(post).toHaveTextContent('available');
+					expect(post.textContent?.endsWith('...')).toBe(false);
+				});
 			});
 
-			it('should expand from content - single scope', async () => {
+			it('expansion text at middle - with trailing ellipsis', async () => {
+				const content = 'Google Books has 1 scope available<br>user.books';
+
 				const wrapper = render(N8nNotice, {
 					props: {
 						id: 'notice',
 						truncate: true,
+						truncateAt: content.indexOf('<br>'),
+						trailingEllipsis: true,
 						expandFromContent: true,
 						expansionTextPattern: /\d+ scopes?/,
-						content: '1 scope available for Google Books credentials<br>user.books',
+						content,
 					},
 					stubs: ['n8n-text'],
 				});
 
-				const preRegion = await wrapper.findByRole('pre-expansion-region');
-				const expansionRegion = await wrapper.findByRole('expansion-text-region');
-				const postRegion = await wrapper.findByRole('post-expansion-region');
+				const pre = await wrapper.findByRole('pre-expansion-region');
+				const expansion = await wrapper.findByRole('expansion-region');
+				const post = await wrapper.findByRole('post-expansion-region');
+
+				expect(pre).toBeVisible();
+				expect(expansion).toBeVisible();
+				expect(post).toBeVisible();
+
+				expect(pre).toHaveTextContent('Google Books has');
+				expect(expansion).toHaveTextContent('1 scope');
+				expect(post).toHaveTextContent('available');
+				expect(post.textContent?.endsWith('...')).toBe(true);
+			});
+		});
+
+		it('expansion text at end - without trailing ellipsis', async () => {
+			const content = 'Google Calendar credentials have 1 scope<br>user.profile';
+
+			const wrapper = render(N8nNotice, {
+				props: {
+					id: 'notice',
+					truncate: true,
+					truncateAt: content.indexOf('<br>'),
+					expandFromContent: true,
+					expansionTextPattern: /\d+ scopes?/,
+					content,
+				},
+				stubs: ['n8n-text'],
+			});
+
+			const pre = await wrapper.findByRole('pre-expansion-region');
+			const expansionRegion = await wrapper.findByRole('expansion-region');
+			const post = await wrapper.findByRole('post-expansion-region');
+
+			expect(pre).toBeVisible();
+			expect(expansionRegion).toBeVisible();
+			expect(post).toBeVisible();
+
+			expect(pre).toHaveTextContent('Google Calendar credentials have');
+			expect(expansionRegion).toHaveTextContent('1 scope');
+			expect(post).toBeEmptyDOMElement();
+			expect(post.textContent?.endsWith('...')).toBe(false);
+		});
 
-				expect(preRegion.textContent).toBe('');
-				expect(expansionRegion).toBeVisible();
-				expect(postRegion).toBeVisible();
+		it('expansion text at end - with trailing ellipsis', async () => {
+			const content = 'Google Calendar credentials have 1 scope<br>user.profile';
 
-				expect(expansionRegion).toHaveTextContent('1 scope');
-				expect(postRegion).toHaveTextContent('available for Google Books credentials');
+			const wrapper = render(N8nNotice, {
+				props: {
+					id: 'notice',
+					truncate: true,
+					truncateAt: content.indexOf('<br>'),
+					trailingEllipsis: true,
+					expandFromContent: true,
+					expansionTextPattern: /\d+ scopes?/,
+					content,
+				},
+				stubs: ['n8n-text'],
 			});
+
+			const pre = await wrapper.findByRole('pre-expansion-region');
+			const expansionRegion = await wrapper.findByRole('expansion-region');
+			const post = await wrapper.findByRole('post-expansion-region');
+
+			expect(pre).toBeVisible();
+			expect(expansionRegion).toBeVisible();
+			expect(post).toBeVisible();
+
+			expect(pre).toHaveTextContent('Google Calendar credentials have');
+			expect(expansionRegion).toHaveTextContent('1 scope');
+			expect(post).toHaveTextContent('...');
 		});
 	});
 });

From 1640e9be1061575810f57bf66dd8add1b9de6899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 11 May 2022 16:14:37 +0200
Subject: [PATCH 073/104] :fire: Remove `truncate` prop

---
 packages/design-system/src/components/N8nNotice/Notice.vue | 6 +-----
 packages/editor-ui/src/components/NodeSettings.vue         | 2 --
 packages/editor-ui/src/components/ParameterInputList.vue   | 1 -
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index f41c6f8be403c..4e281729b09a9 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -68,10 +68,6 @@ export default Vue.extend({
 			type: Number,
 			default: 150,
 		},
-		truncate: {
-			type: Boolean,
-			default: false,
-		},
 		trailingEllipsis: {
 			type: Boolean,
 			default: false,
@@ -106,7 +102,7 @@ export default Vue.extend({
 			];
 		},
 		canTruncate(): boolean {
-			return this.truncate && this.content.length > this.truncateAt;
+			return this.truncateAt !== undefined && this.content.length > this.truncateAt;
 		},
 		truncatedContent(): string {
 			if (!this.canTruncate || this.expanded) {
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 6239372b81dee..04cbed2f8e7f7 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -36,7 +36,6 @@
 					<n8n-notice
 						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
 						:content="scopesContent"
-						:truncate="true"
 						:truncateAt="scopesContent.indexOf('<br>')"
 						:trailingEllipsis="false"
 						:expandFromContent="true"
@@ -65,7 +64,6 @@
 								},
 							},
 						)"
-						:truncate="false"
 					/>
 				</div>
 
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 7ae388ed1229a..5069a44ad9b2b 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -20,7 +20,6 @@
 				v-else-if="parameter.type === 'notice'"
 				class="parameter-item"
 				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-				:truncate="parameter.typeOptions && parameter.typeOptions.truncate"
 				:truncateAt="parameter.typeOptions && parameter.typeOptions.truncateAt"
 			/>
 

From dac800d93e9ea3beeaeaf85a838ff513ded9d274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 10:25:59 +0200
Subject: [PATCH 074/104] :truck: Move scopes fetching to store

---
 package-lock.json                                   | 4 ++--
 packages/editor-ui/src/Interface.ts                 | 4 +++-
 packages/editor-ui/src/api/credentials.ts           | 4 ++++
 packages/editor-ui/src/components/NodeSettings.vue  | 2 +-
 packages/editor-ui/src/components/mixins/restApi.ts | 5 -----
 packages/editor-ui/src/modules/credentials.ts       | 4 ++++
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 65dcd913a889b..8b49d57f8f58e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "n8n",
-	"version": "0.175.1",
+	"version": "0.176.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "n8n",
-			"version": "0.175.1",
+			"version": "0.176.0",
 			"dependencies": {
 				"@babel/core": "^7.14.6",
 				"@fontsource/open-sans": "^4.5.0",
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index b0b7ef2e79ac7..92c4966f4fbc6 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -159,6 +159,9 @@ export interface IExternalHooks {
 	run(eventName: string, metadata?: IDataObject): Promise<void>;
 }
 
+/**
+ * @deprecated Do not add methods to this interface.
+ */
 export interface IRestApi {
 	getActiveWorkflows(): Promise<string[]>;
 	getActivationError(id: string): Promise<IActivationError | undefined >;
@@ -184,7 +187,6 @@ export interface IRestApi {
 	retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
 	getTimezones(): Promise<IDataObject>;
 	getBinaryBufferString(dataPath: string): Promise<string>;
-	getScopes: (credentialType: string) => Promise<string[]>;
 }
 
 export interface INodeTranslationHeaders {
diff --git a/packages/editor-ui/src/api/credentials.ts b/packages/editor-ui/src/api/credentials.ts
index 60a81e061e697..07685ac05e314 100644
--- a/packages/editor-ui/src/api/credentials.ts
+++ b/packages/editor-ui/src/api/credentials.ts
@@ -20,6 +20,10 @@ export async function getAllCredentials(context: IRestApiContext): Promise<ICred
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 
+export async function getScopes(context: IRestApiContext, credentialType: string): Promise<ICredentialsResponse[]> {
+	return await makeRestApiRequest(context, 'GET', '/oauth2-credential/scopes', { credentialType });
+}
+
 export async function createNewCredential(context: IRestApiContext, data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
 	return makeRestApiRequest(context, 'POST', `/credentials`, data as unknown as IDataObject);
 }
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 04cbed2f8e7f7..529e628f347b3 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -348,7 +348,7 @@ export default mixins(
 					return;
 				}
 
-				this.scopes = await this.restApi().getScopes(activeCredentialType);
+				this.scopes = await this.$store.dispatch('credentials/fetchScopes', activeCredentialType);
 
 				const credentialType = this.getCredentialTypeByName(activeCredentialType);
 
diff --git a/packages/editor-ui/src/components/mixins/restApi.ts b/packages/editor-ui/src/components/mixins/restApi.ts
index 72e22cad096a1..7dad40044f90a 100644
--- a/packages/editor-ui/src/components/mixins/restApi.ts
+++ b/packages/editor-ui/src/components/mixins/restApi.ts
@@ -195,11 +195,6 @@ export const restApi = Vue.extend({
 				getBinaryBufferString: (dataPath: string): Promise<string> => {
 					return self.restApi().makeRestApiRequest('GET', `/data/${dataPath}`);
 				},
-
-				// Returns scopes for OAuth credential types
-				getScopes: (credentialType: string): Promise<string[]> => {
-					return self.restApi().makeRestApiRequest('GET', '/oauth2-credential/scopes', { credentialType });
-				},
 			};
 		},
 	},
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index 6e99ed3a88c04..8f32f42e8f766 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -8,6 +8,7 @@ import { getCredentialTypes,
 	oAuth2CredentialAuthorize,
 	oAuth1CredentialAuthorize,
 	testCredential,
+	getScopes,
 } from '@/api/credentials';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
@@ -135,6 +136,9 @@ const module: Module<ICredentialsState, IRootState> = {
 
 			return credentials;
 		},
+		fetchScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<ICredentialsResponse[]> => {
+			return await getScopes(context.rootGetters.getRestApiContext, credentialType);
+		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
 			return await getCredentialData(context.rootGetters.getRestApiContext, id);
 		},

From 9cbcf0b92c68c29eac96bfa30f7040f2940d2b5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 10:39:37 +0200
Subject: [PATCH 075/104] :truck: Move method to component

---
 packages/editor-ui/src/components/ParameterInputList.vue | 9 +++++++++
 packages/editor-ui/src/components/mixins/nodeHelpers.ts  | 8 --------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 5069a44ad9b2b..8b5b07e0d3f47 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -174,6 +174,15 @@ export default mixins(
 
 				this.$emit('valueChanged', parameterData);
 			},
+
+			mustHideDuringCustomApiCall (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
+				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
+
+				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
+
+				return !MUST_REMAIN_VISIBLE.includes(parameter.name);
+			},
+
 			displayNodeParameter (parameter: INodeProperties): boolean {
 				if (parameter.type === 'hidden') {
 					return false;
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 538b56dac7b16..5a78539cf9261 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -59,14 +59,6 @@ export const nodeHelpers = mixins(
 				);
 			},
 
-			mustHideDuringCustomApiCall (parameter: INodeProperties, nodeValues: INodeParameters): boolean {
-				if (parameter && parameter.displayOptions && parameter.displayOptions.hide) return true;
-
-				const MUST_REMAIN_VISIBLE = ['authentication', 'resource', 'operation', ...Object.keys(nodeValues)];
-
-				return !MUST_REMAIN_VISIBLE.includes(parameter.name);
-			},
-
 			// Returns the parameter value
 			getParameterValue (nodeValues: INodeParameters, parameterName: string, path: string) {
 				return get(

From b445f7209e6503c48cfa729569da205e851e9a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 10:42:41 +0200
Subject: [PATCH 076/104] :zap: Use constant

---
 packages/editor-ui/src/components/ParameterInputList.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 8b5b07e0d3f47..38d7c4ab50db9 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -103,6 +103,7 @@ 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,
@@ -135,7 +136,7 @@ export default mixins(
 			indexToShowSlotAt (): number {
 				if (this.isHttpRequestNodeV2(this.node)) return 2;
 
-				if (this.node.type === 'n8n-nodes-base.webhook') return 1;
+				if (this.node.type === WEBHOOK_NODE_TYPE) return 1;
 
 				return 0;
 			},

From 6f0ed1c59a39c383186d551ff59204ab7f8d3ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 12:29:26 +0200
Subject: [PATCH 077/104] :zap: Refactor `Notice` component

---
 .../src/components/N8nNotice/Notice.vue       | 106 +++++-------------
 .../editor-ui/src/components/NodeSettings.vue |  30 +++--
 .../src/components/ParameterInputList.vue     |   1 -
 .../src/plugins/i18n/locales/en.json          |   2 +
 4 files changed, 47 insertions(+), 92 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 4e281729b09a9..e61d23dc8e91e 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -1,39 +1,14 @@
 <template>
-	<div :id="id" :class="classes" role="alert">
+	<div :id="id" :class="classes" role="alert" @click=onClick>
 		<div class="notice-content">
 			<n8n-text size="small">
 				<slot>
 					<span
-						v-if="expandFromContent"
-						v-html="preExpansionText"
-						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:class="showFullContent ? $style['expanded'] : $style['truncated']"
 						:id="`${id}-content`"
-						role="pre-expansion-region"
+						role="region"
+						v-html="sanitizeHtml(showFullContent ? fullContent : content)"
 					/>
-					<a
-						v-if="expandFromContent"
-						v-html="expansionText"
-						role="expansion-region"
-						:aria-controls="`${id}-content`"
-						:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-						@click="toggleExpanded"
-					/>
-					<span
-						:class="expanded ? $style['expanded'] : $style['truncated']"
-						:id="`${id}-content`"
-						role="post-expansion-region"
-						v-html="expandFromContent ? postExpansionText : sanitizedContent"
-					/>
-					<span v-if="canTruncate">
-						<a
-							role="button"
-							@click="toggleExpanded"
-							:aria-controls="`${id}-content`"
-							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
-						>
-							{{ expanded ? t('notice.showLess') : expandFromContent ? '' : t('notice.showMore') }}
-						</a>
-					</span>
 				</slot>
 			</n8n-text>
 		</div>
@@ -45,9 +20,7 @@ import Vue from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import N8nText from "../../components/N8nText";
 import Locale from "../../mixins/locale";
-import {uid} from "../../utils";
-
-const DEFAULT_TRUNCATION_MAX_LENGTH = 150;
+import { uid } from "../../utils";
 
 export default Vue.extend({
 	name: 'n8n-notice',
@@ -64,25 +37,13 @@ export default Vue.extend({
 			type: String,
 			default: 'warning',
 		},
-		truncateAt: {
-			type: Number,
-			default: 150,
-		},
-		trailingEllipsis: {
-			type: Boolean,
-			default: false,
-		},
 		content: {
+			required: true,
 			type: String,
-			default: '',
-		},
-		expandFromContent: {
-			type: Boolean,
-			default: false,
 		},
-		expansionTextPattern: {
-			type: RegExp,
-			default: () => /./,
+		fullContent: {
+			type: String,
+			default: '',
 		},
 	},
 	components: {
@@ -90,7 +51,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			expanded: false,
+			showFullContent: false,
 		};
 	},
 	computed: {
@@ -102,41 +63,28 @@ export default Vue.extend({
 			];
 		},
 		canTruncate(): boolean {
-			return this.truncateAt !== undefined && this.content.length > this.truncateAt;
+			return this.fullContent !== undefined;
 		},
-		truncatedContent(): string {
-			if (!this.canTruncate || this.expanded) {
-				return this.content;
-			}
-
-			return this.content.slice(0, this.truncateAt as number) + (this.trailingEllipsis ? '...' : '');
+	},
+	methods: {
+		toggleExpanded() {
+			this.showFullContent = !this.showFullContent;
 		},
-		sanitizedContent(): string {
-			return sanitizeHtml(this.truncatedContent);
+		sanitizeHtml(text: string): string {
+			return sanitizeHtml(
+				text, {
+					allowedAttributes: { a: ['data-key', 'href', 'target'] },
+				}
+			);
 		},
-		expansionText(): string {
-			const match = this.truncatedContent.match(this.expansionTextPattern);
+		onClick(e) {
+			if (e.target.localName !== 'a') return;
 
-			if (match.length !== 1) {
-				throw new Error('Expansion text must appear once in content');
+			if (e.target.dataset.key === 'show-less') {
+				this.showFullContent = false;
+			} else if (e.target.dataset.key === 'toggle-expand') {
+				this.showFullContent = !this.showFullContent;
 			}
-
-			return match[0];
-		},
-		preExpansionText(): string {
-			const pre = this.truncatedContent.split(this.expansionTextPattern).shift();
-
-			return sanitizeHtml(pre);
-		},
-		postExpansionText(): string {
-			const post = this.truncatedContent.split(this.expansionTextPattern).pop();
-
-			return sanitizeHtml(post);
-		},
-	},
-	methods: {
-		toggleExpanded() {
-			this.expanded = !this.expanded;
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 529e628f347b3..00b18d6f2bc96 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -35,11 +35,8 @@
 				>
 					<n8n-notice
 						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
-						:content="scopesContent"
-						:truncateAt="scopesContent.indexOf('<br>')"
-						:trailingEllipsis="false"
-						:expandFromContent="true"
-						:expansionTextPattern="/\d+ scopes?/"
+						:content="scopesShortContent"
+						:fullContent="scopesFullContent"
 					/>
 					<node-credentials
 						:node="node"
@@ -58,11 +55,7 @@
 					<n8n-notice
 						:content="$locale.baseText(
 							'nodeSettings.useTheHttpRequestNode',
-							{
-								interpolate: {
-									nodeTypeDisplayName: nodeType.displayName
-								},
-							},
+							{ interpolate: { nodeTypeDisplayName: nodeType.displayName } }
 						)"
 					/>
 				</div>
@@ -185,9 +178,20 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
-			scopesContent (): string {
+			scopesShortContent (): string {
+				return this.$locale.baseText(
+					'nodeSettings.scopes.shortContent',
+					{
+						adjustToNumber: this.scopes.length,
+						interpolate: {
+							activeCredential: this.activeCredential,
+						},
+					},
+				);
+			},
+			scopesFullContent (): string {
 				return this.$locale.baseText(
-					'nodeSettings.scopes',
+					'nodeSettings.scopes.fullContent',
 					{
 						adjustToNumber: this.scopes.length,
 						interpolate: {
@@ -207,6 +211,8 @@ export default mixins(
 		},
 		data () {
 			return {
+				truncatedContent: 'Lorem ipsum <a data-key="toggle-expand">scopes</a> sit amet, consectetur adipiscing elit.',
+				fullContent: 'Lorem ipsum <a data-key="toggle-expand">scopes</a> sit amet, consectetur adipiscing elit. Vestibulum ornare euismod enim ac iaculis. Nulla lobortis, eros at consequat venenatis, elit turpis tempus lorem, feugiat consectetur sem metus ac nisl. Sed tincidunt lectus non lorem elementum posuere. Nunc velit purus, placerat id est eu, mollis volutpat arcu. Nunc interdum rutrum laoreet. Praesent ut dictum elit. Sed nisi libero, lacinia sit amet lectus in, pharetra varius enim. Maecenas in ante lectus. Proin blandit turpis id leo iaculis, at ultrices odio lobortis. <a data-key="show-less">Show less</a>',
 				nodeValid: true,
 				nodeColor: null,
 				openPanel: 'params',
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 38d7c4ab50db9..cf25b86cf1ef6 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -20,7 +20,6 @@
 				v-else-if="parameter.type === 'notice'"
 				class="parameter-item"
 				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-				:truncateAt="parameter.typeOptions && parameter.typeOptions.truncateAt"
 			/>
 
 			<div
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 1acd9844df46f..322aa47df2adc 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -413,6 +413,8 @@
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.scopes": "{count} scope available for {activeCredential} credentials<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
+	"nodeSettings.scopes.shortContent": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
+	"nodeSettings.scopes.fullContent": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",

From 7d7773efa8b1f648b11afc7956006bf7edadc3ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 12:29:33 +0200
Subject: [PATCH 078/104] :test_tube: Update tests

---
 .../N8nNotice/__tests__/Notice.spec.ts        | 215 ------------------
 .../__snapshots__/Notice.spec.ts.snap         |  18 +-
 2 files changed, 3 insertions(+), 230 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index 6b9574f981b3c..5bebb09dbe5b2 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -56,220 +56,5 @@ describe('components', () => {
 				});
 			});
 		});
-
-		describe('truncation', () => {
-			it('should truncate content longer than 150 characters - with trailing ellipsis', async () => {
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						trailingEllipsis: true,
-						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-					},
-					stubs: ['n8n-text'],
-				});
-
-				const post = await wrapper.findByRole('post-expansion-region');
-
-				expect(post).toBeVisible();
-				expect(post.textContent!.endsWith('...')).toBeTruthy();
-			});
-
-			it('should expand truncated text when clicking \'Show more\'', async () => {
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						trailingEllipsis: true,
-						content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-					},
-					stubs: ['n8n-text'],
-				});
-
-				const button = await wrapper.findByRole('button');
-				const post = await wrapper.findByRole('post-expansion-region');
-
-				await fireEvent.click(button);
-
-				expect(button).toHaveTextContent('Show less');
-				expect(post.textContent!.endsWith('...')).not.toBeTruthy();
-			});
-		});
-
-		describe('expansion text', () => {
-
-			describe('should expand from content', () => {
-
-				it('expansion text at start - without trailing ellipsis', async () => {
-					const wrapper = render(N8nNotice, {
-						props: {
-							id: 'notice',
-							truncate: true,
-							expandFromContent: true,
-							expansionTextPattern: /\d+ scopes?/,
-							content: '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts',
-						},
-						stubs: ['n8n-text'],
-					});
-
-					const pre = await wrapper.findByRole('pre-expansion-region');
-					const expansionRegion = await wrapper.findByRole('expansion-region');
-					const post = await wrapper.findByRole('post-expansion-region');
-
-					expect(pre).toBeVisible();
-					expect(expansionRegion).toBeVisible();
-					expect(post).toBeVisible();
-
-					expect(pre).toBeEmptyDOMElement();
-					expect(expansionRegion).toHaveTextContent('2 scopes');
-					expect(post).toHaveTextContent('available for Google Calendar credentials');
-					expect(post.textContent?.endsWith('...')).toBe(false);
-				});
-
-				it('expansion text at start - with trailing ellipsis', async () => {
-					const content = '2 scopes available for Google Calendar credentials<br>user.profile<br>user.contacts';
-
-					const wrapper = render(N8nNotice, {
-						props: {
-							id: 'notice',
-							truncate: true,
-							truncateAt: content.indexOf('<br>'),
-							trailingEllipsis: true,
-							expandFromContent: true,
-							expansionTextPattern: /\d+ scopes?/,
-							content,
-						},
-						stubs: ['n8n-text'],
-					});
-
-					const pre = await wrapper.findByRole('pre-expansion-region');
-					const expansionRegion = await wrapper.findByRole('expansion-region');
-					const post = await wrapper.findByRole('post-expansion-region');
-
-					expect(pre).toBeVisible();
-					expect(expansionRegion).toBeVisible();
-					expect(post).toBeVisible();
-
-					expect(pre).toBeEmptyDOMElement();
-					expect(expansionRegion).toHaveTextContent('2 scopes');
-					expect(post).toHaveTextContent('available for Google Calendar credentials');
-					expect(post.textContent?.endsWith('...')).toBe(true);
-				});
-
-				it('expansion text at middle - without trailing ellipsis', async () => {
-					const wrapper = render(N8nNotice, {
-						props: {
-							id: 'notice',
-							truncate: true,
-							expandFromContent: true,
-							expansionTextPattern: /\d+ scopes?/,
-							content: 'Google Books has 1 scope available<br>user.books',
-						},
-						stubs: ['n8n-text'],
-					});
-
-					const pre = await wrapper.findByRole('pre-expansion-region');
-					const expansion = await wrapper.findByRole('expansion-region');
-					const post = await wrapper.findByRole('post-expansion-region');
-
-					expect(pre).toBeVisible();
-					expect(expansion).toBeVisible();
-					expect(post).toBeVisible();
-
-					expect(pre).toHaveTextContent('Google Books has');
-					expect(expansion).toHaveTextContent('1 scope');
-					expect(post).toHaveTextContent('available');
-					expect(post.textContent?.endsWith('...')).toBe(false);
-				});
-			});
-
-			it('expansion text at middle - with trailing ellipsis', async () => {
-				const content = 'Google Books has 1 scope available<br>user.books';
-
-				const wrapper = render(N8nNotice, {
-					props: {
-						id: 'notice',
-						truncate: true,
-						truncateAt: content.indexOf('<br>'),
-						trailingEllipsis: true,
-						expandFromContent: true,
-						expansionTextPattern: /\d+ scopes?/,
-						content,
-					},
-					stubs: ['n8n-text'],
-				});
-
-				const pre = await wrapper.findByRole('pre-expansion-region');
-				const expansion = await wrapper.findByRole('expansion-region');
-				const post = await wrapper.findByRole('post-expansion-region');
-
-				expect(pre).toBeVisible();
-				expect(expansion).toBeVisible();
-				expect(post).toBeVisible();
-
-				expect(pre).toHaveTextContent('Google Books has');
-				expect(expansion).toHaveTextContent('1 scope');
-				expect(post).toHaveTextContent('available');
-				expect(post.textContent?.endsWith('...')).toBe(true);
-			});
-		});
-
-		it('expansion text at end - without trailing ellipsis', async () => {
-			const content = 'Google Calendar credentials have 1 scope<br>user.profile';
-
-			const wrapper = render(N8nNotice, {
-				props: {
-					id: 'notice',
-					truncate: true,
-					truncateAt: content.indexOf('<br>'),
-					expandFromContent: true,
-					expansionTextPattern: /\d+ scopes?/,
-					content,
-				},
-				stubs: ['n8n-text'],
-			});
-
-			const pre = await wrapper.findByRole('pre-expansion-region');
-			const expansionRegion = await wrapper.findByRole('expansion-region');
-			const post = await wrapper.findByRole('post-expansion-region');
-
-			expect(pre).toBeVisible();
-			expect(expansionRegion).toBeVisible();
-			expect(post).toBeVisible();
-
-			expect(pre).toHaveTextContent('Google Calendar credentials have');
-			expect(expansionRegion).toHaveTextContent('1 scope');
-			expect(post).toBeEmptyDOMElement();
-			expect(post.textContent?.endsWith('...')).toBe(false);
-		});
-
-		it('expansion text at end - with trailing ellipsis', async () => {
-			const content = 'Google Calendar credentials have 1 scope<br>user.profile';
-
-			const wrapper = render(N8nNotice, {
-				props: {
-					id: 'notice',
-					truncate: true,
-					truncateAt: content.indexOf('<br>'),
-					trailingEllipsis: true,
-					expandFromContent: true,
-					expansionTextPattern: /\d+ scopes?/,
-					content,
-				},
-				stubs: ['n8n-text'],
-			});
-
-			const pre = await wrapper.findByRole('pre-expansion-region');
-			const expansionRegion = await wrapper.findByRole('expansion-region');
-			const post = await wrapper.findByRole('post-expansion-region');
-
-			expect(pre).toBeVisible();
-			expect(expansionRegion).toBeVisible();
-			expect(post).toBeVisible();
-
-			expect(pre).toHaveTextContent('Google Calendar credentials have');
-			expect(expansionRegion).toHaveTextContent('1 scope');
-			expect(post).toHaveTextContent('...');
-		});
 	});
 });
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index c01e800f510b0..faf8e8881d3a6 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -3,11 +3,7 @@
 exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
-      <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\"><strong>Hello world!</strong> This is a notice.</span>
-      <!---->
-    </n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
@@ -15,11 +11,7 @@ exports[`components > N8nNotice > props > content > should render HTML 1`] = `
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
-      <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\">This is a notice.</span>
-      <!---->
-    </n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\">This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
@@ -27,11 +19,7 @@ exports[`components > N8nNotice > props > content > should render correctly with
 exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
 "<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\">
-      <!---->
-      <!----><span id=\\"notice-content\\" role=\\"post-expansion-region\\" class=\\"_truncated_1h8e0_46\\"> This is a notice.</span>
-      <!---->
-    </n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\"> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;

From e475399f8a9f3f9d6e3f7db81bd249da05ef0a4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 12:30:23 +0200
Subject: [PATCH 079/104] :fire: Remove unused keys

---
 packages/workflow/src/Interfaces.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index a7ad929026bc0..b521bf5b2379d 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -861,8 +861,6 @@ export interface INodePropertyTypeOptions {
 	rows?: number; // Supported by: string
 	showAlpha?: boolean; // Supported by: color
 	sortable?: boolean; // Supported when "multipleValues" set to true
-	truncate?: boolean; // Supported by: notice
-	truncateAt?: number; // Supported by: notice
 	[key: string]: any;
 }
 

From fc3fc95586292c8b8558b8f6ec46553756571a86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 13:20:06 +0200
Subject: [PATCH 080/104] :zap: Inject custom API call option

---
 .../editor-ui/src/components/NodeSettings.vue | 23 ++++++++++++++++---
 .../src/components/ParameterInput.vue         | 14 +----------
 .../src/components/mixins/nodeHelpers.ts      |  4 ++--
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 00b18d6f2bc96..8b86b85ef4d38 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -99,6 +99,7 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { mapGetters } from 'vuex';
+import { CUSTOM_API_CALL_KEY } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -167,9 +168,25 @@ export default mixins(
 				});
 			},
 			parametersNoneSetting (): INodeProperties[] {
-				return this.parameters.filter((item) => {
-					return !item.isNodeSetting;
-				});
+				return this.parameters.reduce<INodeProperties[]>((acc, parameter) => {
+					if (parameter.isNodeSetting) return acc;
+
+					if (
+						['resource', 'operation'].includes(parameter.name) &&
+						this.isSupportedByHttpRequestNode
+					) {
+						const copy: INodeProperties & { options: [] } = JSON.parse(JSON.stringify(parameter));
+
+						copy.options.push({
+							name: this.$locale.baseText('parameterInput.customApiCall'),
+							value: `${CUSTOM_API_CALL_KEY}-${parameter.name}-${this.node}`,
+						 });
+
+						 return acc.push(copy), acc;
+					}
+
+					return acc.push(parameter), acc;
+				}, []);
 			},
 			parameters (): INodeProperties[] {
 				if (this.nodeType === null) {
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 2b4e46b84992c..2639ad9f3fe2f 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -132,18 +132,6 @@
 					<div v-if="option.description" class="option-description" v-html="getOptionsOptionDescription(option)"></div>
 				</div>
 			</n8n-option>
-			<n8n-option
-				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
-				:key="CUSTOM_API_CALL_KEY"
-				:value="CUSTOM_API_CALL_KEY"
-				:label="$locale.baseText('parameterInput.customApiCall')"
-			>
-				<div class="list-option">
-					<div class="option-headline">
-						{{ $locale.baseText('parameterInput.customApiCall') }}
-					</div>
-				</div>
-			</n8n-option>
 		</n8n-select>
 
 		<n8n-select
@@ -501,7 +489,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
-						if (checkValue === CUSTOM_API_CALL_KEY) continue;
+						if (checkValue !== undefined && checkValue.includes(CUSTOM_API_CALL_KEY)) continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 5a78539cf9261..1b93603fe4211 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -54,8 +54,8 @@ export const nodeHelpers = mixins(
 				if (!isObjectLiteral(parameters)) return false;
 
 				return (
-					parameters.resource === CUSTOM_API_CALL_KEY ||
-					parameters.operation === CUSTOM_API_CALL_KEY
+					parameters.resource !== undefined && parameters.resource.includes(CUSTOM_API_CALL_KEY) ||
+					parameters.operation !== undefined && parameters.operation.includes(CUSTOM_API_CALL_KEY)
 				);
 			},
 

From 4acf25b0601bd13c0cc8a3a24525e8b0e46585ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 13:21:25 +0200
Subject: [PATCH 081/104] :fire: Remove unused props

---
 packages/editor-ui/src/components/NodeSettings.vue       | 1 -
 packages/editor-ui/src/components/ParameterInput.vue     | 1 -
 packages/editor-ui/src/components/ParameterInputFull.vue | 2 --
 packages/editor-ui/src/components/ParameterInputList.vue | 2 --
 4 files changed, 6 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 8b86b85ef4d38..b9ee40150370d 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -31,7 +31,6 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
-					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				>
 					<n8n-notice
 						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 2639ad9f3fe2f..2f08cc2254a07 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -246,7 +246,6 @@ export default mixins(
 			'hideIssues', // boolean
 			'errorHighlight',
 			'isForCredential', // boolean
-			'isSupportedByHttpRequestNode', // boolean
 		],
 		data () {
 			return {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index df905f4eae02a..127944c533252 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -12,7 +12,6 @@
 			:displayOptions="displayOptions"
 			:path="path"
 			:isReadOnly="isReadOnly"
-			:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 			@valueChanged="valueChanged"
 			@focus="focused = true"
 			@blur="focused = false"
@@ -49,7 +48,6 @@ export default Vue
 			'parameter',
 			'path',
 			'value',
-			'isSupportedByHttpRequestNode',
 		],
 		methods: {
 			getArgument (argumentName: string): string | number | boolean | undefined {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index cf25b86cf1ef6..c7714e8e3f657 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -77,7 +77,6 @@
 					:path="getPath(parameter.name)"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChanged"
-					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				/>
 			</div>
 		</div>
@@ -120,7 +119,6 @@ export default mixins(
 			'path', // string
 			'hideDelete', // boolean
 			'indent',
-			'isSupportedByHttpRequestNode', // boolean
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {

From bc58827a3d90b61824cf9d87982f571c8c9941c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 13:32:42 +0200
Subject: [PATCH 082/104] :art: Use `compact` prop

---
 packages/design-system/src/components/N8nNotice/Notice.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index e61d23dc8e91e..81a663b9c931d 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :id="id" :class="classes" role="alert" @click=onClick>
 		<div class="notice-content">
-			<n8n-text size="small">
+			<n8n-text size="small" :compact="true">
 				<slot>
 					<span
 						:class="showFullContent ? $style['expanded'] : $style['truncated']"
@@ -107,10 +107,6 @@ export default Vue.extend({
 	a {
 		font-weight: var(--font-weight-bold);
 	}
-
-	span {
-		line-height: var(--font-line-height-compact);
-	}
 }
 
 .warning {

From 56fd98bca425dc6cf3d8ccdb52bbc7d15435ae45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 13:44:45 +0200
Subject: [PATCH 083/104] :test_tube: Update snapshots

---
 .../__tests__/__snapshots__/Notice.spec.ts.snap  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
index faf8e8881d3a6..d39ad415d75c3 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
+++ b/packages/design-system/src/components/N8nNotice/__tests__/__snapshots__/Notice.spec.ts.snap
@@ -1,33 +1,33 @@
 // Vitest Snapshot v1
 
 exports[`components > N8nNotice > props > content > should render HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"><strong>Hello world!</strong> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\">This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\">This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_1h8e0_46\\"> This is a notice.</span></n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\"><span id=\\"notice-content\\" role=\\"region\\" class=\\"_truncated_kaqw5_43\\"> This is a notice.</span></n8n-text-stub>
   </div>
 </div>"
 `;
 
 exports[`components > N8nNotice > should render correctly 1`] = `
-"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_1h8e0_1 _warning_1h8e0_21\\">
+"<div id=\\"notice\\" role=\\"alert\\" class=\\"notice _notice_kaqw5_1 _warning_kaqw5_18\\">
   <div class=\\"notice-content\\">
-    <n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
+    <n8n-text-stub size=\\"small\\" compact=\\"true\\" tag=\\"span\\">This is a notice.</n8n-text-stub>
   </div>
 </div>"
 `;

From 989ddc10fc08c9c24264df54f34a6f80ec3c3469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 16:04:54 +0200
Subject: [PATCH 084/104] :truck: Move scopes to store

---
 packages/editor-ui/src/Interface.ts           |  5 +++
 packages/editor-ui/src/api/credentials.ts     |  2 +-
 .../editor-ui/src/components/NodeSettings.vue | 41 ++++++++++---------
 packages/editor-ui/src/modules/credentials.ts | 19 ++++++++-
 4 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 92c4966f4fbc6..9ecf52d9311f5 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -825,9 +825,14 @@ export interface ICredentialMap {
 	[name: string]: ICredentialsResponse;
 }
 
+interface IScopesMap {
+	[credentialType: string]: string[];
+}
+
 export interface ICredentialsState {
 	credentialTypes: ICredentialTypeMap;
 	credentials: ICredentialMap;
+	scopes: IScopesMap;
 }
 
 export interface ITagsState {
diff --git a/packages/editor-ui/src/api/credentials.ts b/packages/editor-ui/src/api/credentials.ts
index 07685ac05e314..2e6065f88038a 100644
--- a/packages/editor-ui/src/api/credentials.ts
+++ b/packages/editor-ui/src/api/credentials.ts
@@ -20,7 +20,7 @@ export async function getAllCredentials(context: IRestApiContext): Promise<ICred
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 
-export async function getScopes(context: IRestApiContext, credentialType: string): Promise<ICredentialsResponse[]> {
+export async function getScopes(context: IRestApiContext, credentialType: string): Promise<string[]> {
 	return await makeRestApiRequest(context, 'GET', '/oauth2-credential/scopes', { credentialType });
 }
 
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index b9ee40150370d..6e426b61bac7f 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -33,7 +33,7 @@
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
 				>
 					<n8n-notice
-						v-if="isHttpRequestNodeV2(node) && scopes.length > 0"
+						v-if="isHttpRequestNodeV2(node) && activeCredential.scopes.length > 0"
 						:content="scopesShortContent"
 						:fullContent="scopesFullContent"
 					/>
@@ -117,7 +117,7 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
-			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
+			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getScopesByCredentialType' ]),
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -198,9 +198,9 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.shortContent',
 					{
-						adjustToNumber: this.scopes.length,
+						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
-							activeCredential: this.activeCredential,
+							activeCredential: this.activeCredential.displayName,
 						},
 					},
 				);
@@ -209,17 +209,14 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.fullContent',
 					{
-						adjustToNumber: this.scopes.length,
+						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
-							activeCredential: this.activeCredential,
-							scopes: this.scopesToDisplay,
+							activeCredential: this.activeCredential.displayName,
+							scopes: this.activeCredential.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>'),
 						},
 					},
 				);
 			},
-			scopesToDisplay(): string {
-				return this.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>');
-			},
 		},
 		props: {
 			eventBus: {
@@ -245,8 +242,10 @@ export default mixins(
 					parameters: {},
 				} as INodeParameters,
 				isSupportedByHttpRequestNode: false,
-				activeCredential: '',
-				scopes: [] as string[],
+				activeCredential: {
+					displayName: '',
+					scopes: [] as string[],
+				},
 
 				nodeSettings: [
 					{
@@ -363,18 +362,22 @@ export default mixins(
 				});
 			},
 			async prepareScopesNotice(activeCredentialType: string) {
-				if (!this.isHttpRequestNodeV2(this.node)) return;
-
-				if (!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')) {
-					this.scopes = [];
+				if (
+					!this.isHttpRequestNodeV2(this.node) ||
+					!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')
+				) {
 					return;
 				}
 
-				this.scopes = await this.$store.dispatch('credentials/fetchScopes', activeCredentialType);
-
 				const credentialType = this.getCredentialTypeByName(activeCredentialType);
 
-				this.activeCredential = credentialType.displayName.replace(' OAuth2 API', '');
+				this.activeCredential.displayName = credentialType.displayName.replace('OAuth2 API', '').trim();
+
+				const storedScopes = this.getScopesByCredentialType(activeCredentialType);
+
+				if (storedScopes) return storedScopes;
+
+				this.activeCredential.scopes = await this.$store.dispatch('credentials/fetchScopes', activeCredentialType);
 			},
 			onNodeExecute () {
 				this.$emit('execute');
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index 8f32f42e8f766..50952e59ffe09 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -36,6 +36,7 @@ const module: Module<ICredentialsState, IRootState> = {
 	state: {
 		credentialTypes: {},
 		credentials: {},
+		scopes: {},
 	},
 	mutations: {
 		setCredentialTypes: (state: ICredentialsState, credentialTypes: ICredentialType[]) => {
@@ -54,6 +55,14 @@ const module: Module<ICredentialsState, IRootState> = {
 				return accu;
 			}, {});
 		},
+		setScopes: (
+			state: ICredentialsState,
+			{ credentialType, scopes }: { credentialType: string; scopes: string[] },
+		) => {
+			if (state.scopes[credentialType] !== undefined) return;
+
+			state.scopes[credentialType] = scopes;
+		},
 		upsertCredential(state: ICredentialsState, credential: ICredentialsResponse) {
 			if (credential.id) {
 				Vue.set(state.credentials, credential.id, credential);
@@ -121,6 +130,9 @@ const module: Module<ICredentialsState, IRootState> = {
 				});
 			};
 		},
+		getScopesByCredentialType (state: ICredentialsState) {
+			return (credentialTypeName: string) => state.scopes[credentialTypeName];
+		},
 	},
 	actions: {
 		fetchCredentialTypes: async (context: ActionContext<ICredentialsState, IRootState>) => {
@@ -136,8 +148,11 @@ const module: Module<ICredentialsState, IRootState> = {
 
 			return credentials;
 		},
-		fetchScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<ICredentialsResponse[]> => {
-			return await getScopes(context.rootGetters.getRestApiContext, credentialType);
+		fetchScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<string[]> => {
+			const scopes = await getScopes(context.rootGetters.getRestApiContext, credentialType);
+			context.commit('setScopes', { credentialType, scopes });
+
+			return scopes;
 		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
 			return await getCredentialData(context.rootGetters.getRestApiContext, id);

From 705d6cd85f4424030b726a6e660a6b0e7980b665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 16:51:40 +0200
Subject: [PATCH 085/104] :truck: Move `nodeCredentialTypes` to parent

---
 .../editor-ui/src/components/NodeCredentials.vue |  6 +-----
 .../editor-ui/src/components/NodeSettings.vue    | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index ec74adfd63031..1b062d46342b3 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -108,12 +108,8 @@ export default mixins(
 				this.node.parameters.authentication === 'genericCredentialType';
 		},
 		credentialTypesNode (): string[] {
-			const nodeCredentialTypes = this.credentialTypesNodeDescription
+			return this.credentialTypesNodeDescription
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
-
-			this.$emit('nodeCredentialTypes', nodeCredentialTypes);
-
-			return nodeCredentialTypes;
 		},
 		credentialTypesNodeDescriptionDisplayed (): INodeCredentialDescription[] {
 			return this.credentialTypesNodeDescription
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 6e426b61bac7f..3818c50bc01ee 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -40,7 +40,6 @@
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
-						@nodeCredentialTypes="checkHttpRequestNodeSupport"
 						@newHttpRequestNodeCredentialType="prepareScopesNotice"
 					/>
 				</parameter-input-list>
@@ -375,7 +374,10 @@ export default mixins(
 
 				const storedScopes = this.getScopesByCredentialType(activeCredentialType);
 
-				if (storedScopes) return storedScopes;
+				if (storedScopes) {
+					this.activeCredential.scopes = storedScopes;
+					return;
+				}
 
 				this.activeCredential.scopes = await this.$store.dispatch('credentials/fetchScopes', activeCredentialType);
 			},
@@ -633,6 +635,16 @@ export default mixins(
 		},
 		mounted () {
 			this.setNodeValues();
+
+			if (!this.isHttpRequestNodeV2(this.node)) {
+				const activeNodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+
+				if (activeNodeType && activeNodeType.credentials) {
+					const credentialTypeNames = activeNodeType.credentials.map((c: { name: string }) => c.name);
+					this.checkHttpRequestNodeSupport(credentialTypeNames);
+				}
+			}
+
 			if (this.eventBus) {
 				(this.eventBus as Vue).$on('openSettings', () => {
 					this.openPanel = 'settings';

From 04eff36a1d8c43089135e9de2b180436e114f26a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 16:52:57 +0200
Subject: [PATCH 086/104] :pencil2: Rename cred types per branding

---
 packages/nodes-base/credentials/GithubApi.credentials.ts        | 2 +-
 packages/nodes-base/credentials/GithubOAuth2Api.credentials.ts  | 2 +-
 packages/nodes-base/credentials/GitlabApi.credentials.ts        | 2 +-
 packages/nodes-base/credentials/GitlabOAuth2Api.credentials.ts  | 2 +-
 packages/nodes-base/credentials/HubspotApi.credentials.ts       | 2 +-
 packages/nodes-base/credentials/HubspotAppToken.credentials.ts  | 2 +-
 .../nodes-base/credentials/HubspotDeveloperApi.credentials.ts   | 2 +-
 packages/nodes-base/credentials/HubspotOAuth2Api.credentials.ts | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nodes-base/credentials/GithubApi.credentials.ts b/packages/nodes-base/credentials/GithubApi.credentials.ts
index 2be14a867464b..83c5c5f9d41ad 100644
--- a/packages/nodes-base/credentials/GithubApi.credentials.ts
+++ b/packages/nodes-base/credentials/GithubApi.credentials.ts
@@ -5,7 +5,7 @@ import {
 
 export class GithubApi implements ICredentialType {
 	name = 'githubApi';
-	displayName = 'Github API';
+	displayName = 'GitHub API';
 	documentationUrl = 'github';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/GithubOAuth2Api.credentials.ts b/packages/nodes-base/credentials/GithubOAuth2Api.credentials.ts
index 057b8d29c345b..401b44825f758 100644
--- a/packages/nodes-base/credentials/GithubOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/GithubOAuth2Api.credentials.ts
@@ -9,7 +9,7 @@ export class GithubOAuth2Api implements ICredentialType {
 	extends = [
 		'oAuth2Api',
 	];
-	displayName = 'Github OAuth2 API';
+	displayName = 'GitHub OAuth2 API';
 	documentationUrl = 'github';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/GitlabApi.credentials.ts b/packages/nodes-base/credentials/GitlabApi.credentials.ts
index 0171110071667..54509272e7d88 100644
--- a/packages/nodes-base/credentials/GitlabApi.credentials.ts
+++ b/packages/nodes-base/credentials/GitlabApi.credentials.ts
@@ -6,7 +6,7 @@ import {
 
 export class GitlabApi implements ICredentialType {
 	name = 'gitlabApi';
-	displayName = 'Gitlab API';
+	displayName = 'GitLab API';
 	documentationUrl = 'gitlab';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/GitlabOAuth2Api.credentials.ts b/packages/nodes-base/credentials/GitlabOAuth2Api.credentials.ts
index 6385db7f8abeb..2f49e4caedcd6 100644
--- a/packages/nodes-base/credentials/GitlabOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/GitlabOAuth2Api.credentials.ts
@@ -9,7 +9,7 @@ export class GitlabOAuth2Api implements ICredentialType {
 	extends = [
 		'oAuth2Api',
 	];
-	displayName = 'Gitlab OAuth2 API';
+	displayName = 'GitLab OAuth2 API';
 	documentationUrl = 'gitlab';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HubspotApi.credentials.ts b/packages/nodes-base/credentials/HubspotApi.credentials.ts
index f475d442a77ae..8b0d768ee17f5 100644
--- a/packages/nodes-base/credentials/HubspotApi.credentials.ts
+++ b/packages/nodes-base/credentials/HubspotApi.credentials.ts
@@ -5,7 +5,7 @@ import {
 
 export class HubspotApi implements ICredentialType {
 	name = 'hubspotApi';
-	displayName = 'Hubspot API';
+	displayName = 'HubSpot API';
 	documentationUrl = 'hubspot';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HubspotAppToken.credentials.ts b/packages/nodes-base/credentials/HubspotAppToken.credentials.ts
index 4f6df9c0e1fdb..278ad8edd71eb 100644
--- a/packages/nodes-base/credentials/HubspotAppToken.credentials.ts
+++ b/packages/nodes-base/credentials/HubspotAppToken.credentials.ts
@@ -5,7 +5,7 @@ import {
 
 export class HubspotAppToken implements ICredentialType {
 	name = 'hubspotAppToken';
-	displayName = 'Hubspot App Token';
+	displayName = 'HubSpot App Token';
 	documentationUrl = 'hubspot';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HubspotDeveloperApi.credentials.ts b/packages/nodes-base/credentials/HubspotDeveloperApi.credentials.ts
index cba087f307dbe..e03782052caa9 100644
--- a/packages/nodes-base/credentials/HubspotDeveloperApi.credentials.ts
+++ b/packages/nodes-base/credentials/HubspotDeveloperApi.credentials.ts
@@ -14,7 +14,7 @@ const scopes = [
 
 export class HubspotDeveloperApi implements ICredentialType {
 	name = 'hubspotDeveloperApi';
-	displayName = 'Hubspot Developer API';
+	displayName = 'HubSpot Developer API';
 	documentationUrl = 'hubspot';
 	extends = [
 		'oAuth2Api',
diff --git a/packages/nodes-base/credentials/HubspotOAuth2Api.credentials.ts b/packages/nodes-base/credentials/HubspotOAuth2Api.credentials.ts
index c2f6cf7e497b4..fd31a368d9a7a 100644
--- a/packages/nodes-base/credentials/HubspotOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/HubspotOAuth2Api.credentials.ts
@@ -23,7 +23,7 @@ export class HubspotOAuth2Api implements ICredentialType {
 	extends = [
 		'oAuth2Api',
 	];
-	displayName = 'Hubspot OAuth2 API';
+	displayName = 'HubSpot OAuth2 API';
 	documentationUrl = 'hubspot';
 	properties: INodeProperties[] = [
 		{

From 9bf01d8c276df6d6d71eb8e05d91f576f9a38a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 17:01:10 +0200
Subject: [PATCH 087/104] :bug: Clear scopes when none

---
 packages/editor-ui/src/components/NodeSettings.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 3818c50bc01ee..511a850909b3a 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -365,6 +365,7 @@ export default mixins(
 					!this.isHttpRequestNodeV2(this.node) ||
 					!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')
 				) {
+					this.activeCredential.scopes = [];
 					return;
 				}
 

From 5f0d5b9688b114077624546288b82b646cc3889f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 17:01:19 +0200
Subject: [PATCH 088/104] :zap: Add default

---
 packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 5343702897cd4..27353212b96d6 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -258,7 +258,7 @@ export class HttpRequest implements INodeType {
 				typeOptions: {
 					loadOptionsMethod: 'getNodeCredentialTypes',
 				},
-				default: '',
+				default: 'actionNetworkApi',
 				placeholder: 'None',
 				displayOptions: {
 					show: {

From 9c7a0869ee6607503494fb505e232cedbae83bbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 12 May 2022 17:09:57 +0200
Subject: [PATCH 089/104] :truck: Move `newHttpRequestNodeCredentialType` to
 parent

---
 .../editor-ui/src/components/NodeCredentials.vue    |  4 ----
 packages/editor-ui/src/components/NodeSettings.vue  | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 1b062d46342b3..f2b02f0988437 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -120,10 +120,6 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
-			if (this.isHttpRequestNodeV2(this.node)) {
-				this.$emit('newHttpRequestNodeCredentialType', this.node.parameters.nodeCredentialType);
-			}
-
 			if (this.isGenericAuth) {
 				const { genericAuthType } = this.node.parameters as { genericAuthType: string };
 
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 511a850909b3a..6015ca92b0008 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -40,7 +40,6 @@
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
-						@newHttpRequestNodeCredentialType="prepareScopesNotice"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -458,6 +457,13 @@ export default mixins(
 				});
 			},
 			valueChanged (parameterData: IUpdateInformation) {
+				if (
+					this.isHttpRequestNodeV2(this.node) &&
+					parameterData.name === 'parameters.nodeCredentialType'
+				) {
+					this.prepareScopesNotice(parameterData.value as string);
+				}
+
 				let newValue: NodeParameterValue;
 				if (parameterData.hasOwnProperty('value')) {
 					// New value is given
@@ -644,6 +650,11 @@ export default mixins(
 					const credentialTypeNames = activeNodeType.credentials.map((c: { name: string }) => c.name);
 					this.checkHttpRequestNodeSupport(credentialTypeNames);
 				}
+			} else if (
+				this.isHttpRequestNodeV2(this.node) &&
+				this.node.parameters.authentication === 'existingCredentialType'
+			) {
+				this.prepareScopesNotice(this.node.parameters.nodeCredentialType as string);
 			}
 
 			if (this.eventBus) {

From f2e901ac36c1a6c9e217a73a71a538e52b39a10b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 09:32:43 +0200
Subject: [PATCH 090/104] :fire: Remove test data

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 6015ca92b0008..6478dc90f4058 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -222,8 +222,6 @@ export default mixins(
 		},
 		data () {
 			return {
-				truncatedContent: 'Lorem ipsum <a data-key="toggle-expand">scopes</a> sit amet, consectetur adipiscing elit.',
-				fullContent: 'Lorem ipsum <a data-key="toggle-expand">scopes</a> sit amet, consectetur adipiscing elit. Vestibulum ornare euismod enim ac iaculis. Nulla lobortis, eros at consequat venenatis, elit turpis tempus lorem, feugiat consectetur sem metus ac nisl. Sed tincidunt lectus non lorem elementum posuere. Nunc velit purus, placerat id est eu, mollis volutpat arcu. Nunc interdum rutrum laoreet. Praesent ut dictum elit. Sed nisi libero, lacinia sit amet lectus in, pharetra varius enim. Maecenas in ante lectus. Proin blandit turpis id leo iaculis, at ultrices odio lobortis. <a data-key="show-less">Show less</a>',
 				nodeValid: true,
 				nodeColor: null,
 				openPanel: 'params',

From 43d1ffe9a176eaaa27e3ff40175bbe488b978895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:03:19 +0200
Subject: [PATCH 091/104] :zap: Separate lines for readability

---
 packages/editor-ui/src/components/NodeSettings.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 6478dc90f4058..ce94edf2a1b70 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -182,7 +182,9 @@ export default mixins(
 						 return acc.push(copy), acc;
 					}
 
-					return acc.push(parameter), acc;
+					acc.push(parameter);
+
+					return acc;
 				}, []);
 			},
 			parameters (): INodeProperties[] {

From 64db4e49dd9e095a23a8664f24c4d9134334e73c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:03:35 +0200
Subject: [PATCH 092/104] :zap: Change reference from node to node name

---
 packages/editor-ui/src/components/NodeSettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index ce94edf2a1b70..0acff2a133429 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -176,7 +176,7 @@ export default mixins(
 
 						copy.options.push({
 							name: this.$locale.baseText('parameterInput.customApiCall'),
-							value: `${CUSTOM_API_CALL_KEY}-${parameter.name}-${this.node}`,
+							value: `${CUSTOM_API_CALL_KEY}-${parameter.name}-${this.node.name}`,
 						 });
 
 						 return acc.push(copy), acc;

From 3d44b18e0bbcb2f8b1f6487c288bb7a8fd5b3e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:05:02 +0200
Subject: [PATCH 093/104] :pencil2: Rename i18n keys

---
 packages/editor-ui/src/components/NodeSettings.vue  | 4 ++--
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 0acff2a133429..1f8da219bed79 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -196,7 +196,7 @@ export default mixins(
 			},
 			scopesShortContent (): string {
 				return this.$locale.baseText(
-					'nodeSettings.scopes.shortContent',
+					'nodeSettings.scopes.notice',
 					{
 						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
@@ -207,7 +207,7 @@ export default mixins(
 			},
 			scopesFullContent (): string {
 				return this.$locale.baseText(
-					'nodeSettings.scopes.fullContent',
+					'nodeSettings.scopes.expandedNoticeWithScopes',
 					{
 						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 322aa47df2adc..2fa77bd806ae1 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -413,8 +413,8 @@
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.scopes": "{count} scope available for {activeCredential} credentials<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
-	"nodeSettings.scopes.shortContent": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
-	"nodeSettings.scopes.fullContent": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
+	"nodeSettings.scopes.notice": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
+	"nodeSettings.scopes.expandedNoticeWithScopes": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",

From 6fa4c9c86ce3e6cc4e837b03f73841567038241d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:30:50 +0200
Subject: [PATCH 094/104] :zap: Refactor OAuth check

---
 packages/editor-ui/src/components/NodeSettings.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 1f8da219bed79..1c12ca4bb343c 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -351,12 +351,13 @@ export default mixins(
 			 */
 			checkHttpRequestNodeSupport(credentialTypeNames: string[]) {
 				this.isSupportedByHttpRequestNode = credentialTypeNames.some(name => {
-					const credentialType = this.getCredentialTypeByName(name);
+					const credType = this.getCredentialTypeByName(name);
 
-					return (
-						credentialType.name.slice(0, -4).endsWith('OAuth') ||
-						credentialType.authenticate !== undefined
+					const isOAuth = Array.isArray(credType.extends) && credType.extends.some(
+						(parentType: string) => ['oAuth2Api', 'oAuth1Api'].includes(parentType),
 					);
+
+					return isOAuth || credType.authenticate !== undefined;
 				});
 			},
 			async prepareScopesNotice(activeCredentialType: string) {

From 7991e5afed0f9560322de28279b1285fcfce2cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:46:37 +0200
Subject: [PATCH 095/104] :fire: Remove unused key

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 2fa77bd806ae1..eaffe6d7ccb3b 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -412,7 +412,6 @@
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes": "{count} scope available for {activeCredential} credentials<br>{scopes} | {count} scopes available for {activeCredential} credentials<br>{scopes}",
 	"nodeSettings.scopes.notice": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
 	"nodeSettings.scopes.expandedNoticeWithScopes": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
 	"nodeView.addNode": "Add node",

From 9a7686f9e39aa071bc4b03a483526ca6022c308e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 11:52:06 +0200
Subject: [PATCH 096/104] :truck: Move `OAuth1/2 API` to i18n

---
 packages/editor-ui/src/components/NodeSettings.vue  | 7 ++++++-
 packages/editor-ui/src/plugins/i18n/locales/en.json | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 1c12ca4bb343c..d4bf68af79908 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -371,7 +371,12 @@ export default mixins(
 
 				const credentialType = this.getCredentialTypeByName(activeCredentialType);
 
-				this.activeCredential.displayName = credentialType.displayName.replace('OAuth2 API', '').trim();
+				const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api');
+				const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api');
+
+				this.activeCredential.displayName = credentialType.displayName
+					.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
+					.trim();
 
 				const storedScopes = this.getScopesByCredentialType(activeCredentialType);
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index eaffe6d7ccb3b..be0267f842f3d 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -402,6 +402,8 @@
 	"nodeSettings.nodeDescription": "Node Description",
 	"nodeSettings.notes.description": "Optional note to save with the node",
 	"nodeSettings.notes.displayName": "Notes",
+	"nodeSettings.oauth1Api": "OAuth1 API",
+	"nodeSettings.oauth2Api": "OAuth2 API",
 	"nodeSettings.notesInFlow.description": "If active, the note above will display in the flow as a subtitle",
 	"nodeSettings.notesInFlow.displayName": "Display note in flow?",
 	"nodeSettings.parameters": "Parameters",

From db8225ccd51e70cc945e10caf0af3b3d62c08303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 12:06:27 +0200
Subject: [PATCH 097/104] :zap: Refactor `skipCheck`

---
 .../editor-ui/src/components/ParameterInput.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 2f08cc2254a07..c09524d702de2 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -481,10 +481,13 @@ export default mixins(
 					const validOptions = this.parameterOptions!.map((options: INodePropertyOptions) => options.value);
 
 					const checkValues: string[] = [];
-					if (Array.isArray(this.displayValue)) {
-						checkValues.push.apply(checkValues, this.displayValue);
-					} else {
-						checkValues.push(this.displayValue as string);
+
+					if (!this.skipCheck(this.displayValue)) {
+						if (Array.isArray(this.displayValue)) {
+							checkValues.push.apply(checkValues, this.displayValue);
+						} else {
+							checkValues.push(this.displayValue as string);
+						}
 					}
 
 					for (const checkValue of checkValues) {
@@ -586,6 +589,12 @@ export default mixins(
 			},
 		},
 		methods: {
+			/**
+			 * Check whether a param value must be skipped when collecting node param issues for validation.
+			 */
+			skipCheck(value: string | number | boolean | null) {
+				return typeof value === 'string' && value.includes(CUSTOM_API_CALL_KEY);
+			},
 			getPlaceholder(): string {
 				return this.isForCredential
 					? this.$locale.credText().placeholder(this.parameter)

From a6d9e26f4b5ca45478b0e448aca2f7e14ed8840d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 12:11:32 +0200
Subject: [PATCH 098/104] :zap: Add `stopPropagation` and `preventDefault`

---
 packages/design-system/src/components/N8nNotice/Notice.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 81a663b9c931d..55571d3ec5162 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -81,8 +81,12 @@ export default Vue.extend({
 			if (e.target.localName !== 'a') return;
 
 			if (e.target.dataset.key === 'show-less') {
+				e.stopPropagation();
+				e.preventDefault();
 				this.showFullContent = false;
-			} else if (e.target.dataset.key === 'toggle-expand') {
+			} else if (this.canTruncate && e.target.dataset.key === 'toggle-expand') {
+				e.stopPropagation();
+				e.preventDefault();
 				this.showFullContent = !this.showFullContent;
 			}
 		},

From 7f304a348e2b39e40973211c1d18e806f72783ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 13:41:07 +0200
Subject: [PATCH 099/104] :truck: Move active credential scopes logic to store

---
 packages/editor-ui/src/Interface.ts           |  1 +
 .../editor-ui/src/components/NodeSettings.vue | 38 +++++++++----------
 packages/editor-ui/src/modules/credentials.ts | 17 +++++++--
 packages/editor-ui/src/store.ts               |  8 ++++
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 9ecf52d9311f5..b31a76c1f994b 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -782,6 +782,7 @@ export interface IRootState {
 	activeWorkflows: string[];
 	activeActions: string[];
 	activeCredentialType: string | null;
+	activeCredentialScopes: string[];
 	activeNode: string | null;
 	baseUrl: string;
 	defaultLocale: string;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d4bf68af79908..98fe6ca289922 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -33,7 +33,7 @@
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
 				>
 					<n8n-notice
-						v-if="isHttpRequestNodeV2(node) && activeCredential.scopes.length > 0"
+						v-if="isHttpRequestNodeV2(node) && this.activeCredentialScopes.length > 0"
 						:content="scopesShortContent"
 						:fullContent="scopesFullContent"
 					/>
@@ -115,7 +115,11 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
-			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getScopesByCredentialType' ]),
+			...mapGetters(['activeCredentialScopes']),
+			...mapGetters('credentials', [
+				'getCredentialTypeByName',
+				'getScopesByCredentialType',
+			]),
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -198,9 +202,9 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.notice',
 					{
-						adjustToNumber: this.activeCredential.scopes.length,
+						adjustToNumber: this.activeCredentialScopes.length,
 						interpolate: {
-							activeCredential: this.activeCredential.displayName,
+							activeCredential: this.activeCredential.shortDisplayName,
 						},
 					},
 				);
@@ -209,10 +213,12 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.expandedNoticeWithScopes',
 					{
-						adjustToNumber: this.activeCredential.scopes.length,
+						adjustToNumber: this.activeCredentialScopes.length,
 						interpolate: {
-							activeCredential: this.activeCredential.displayName,
-							scopes: this.activeCredential.scopes.map(scope => scope.replace(/\//g, '/<wbr>')).join('<br>'),
+							activeCredential: this.activeCredential.shortDisplayName,
+							scopes: this.activeCredentialScopes.map(
+								(scope: string) => scope.replace(/\//g, '/<wbr>'),
+							).join('<br>'),
 						},
 					},
 				);
@@ -241,8 +247,7 @@ export default mixins(
 				} as INodeParameters,
 				isSupportedByHttpRequestNode: false,
 				activeCredential: {
-					displayName: '',
-					scopes: [] as string[],
+					shortDisplayName: '',
 				},
 
 				nodeSettings: [
@@ -365,27 +370,22 @@ export default mixins(
 					!this.isHttpRequestNodeV2(this.node) ||
 					!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')
 				) {
-					this.activeCredential.scopes = [];
+					this.$store.commit('setActiveCredentialScopes', [], { root: true });
 					return;
 				}
 
 				const credentialType = this.getCredentialTypeByName(activeCredentialType);
 
+				this.$store.commit('setActiveCredentialType', credentialType.name);
+
 				const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api');
 				const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api');
 
-				this.activeCredential.displayName = credentialType.displayName
+				this.activeCredential.shortDisplayName = credentialType.displayName
 					.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
 					.trim();
 
-				const storedScopes = this.getScopesByCredentialType(activeCredentialType);
-
-				if (storedScopes) {
-					this.activeCredential.scopes = storedScopes;
-					return;
-				}
-
-				this.activeCredential.scopes = await this.$store.dispatch('credentials/fetchScopes', activeCredentialType);
+				this.$store.dispatch('credentials/fetchActiveCredentialScopes', activeCredentialType);
 			},
 			onNodeExecute () {
 				this.$emit('execute');
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index 50952e59ffe09..ac88148ac9cf2 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -148,11 +148,20 @@ const module: Module<ICredentialsState, IRootState> = {
 
 			return credentials;
 		},
-		fetchScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<string[]> => {
-			const scopes = await getScopes(context.rootGetters.getRestApiContext, credentialType);
-			context.commit('setScopes', { credentialType, scopes });
+		fetchActiveCredentialScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<string[]> => {
+			const storedScopes = context.getters.getScopesByCredentialType(credentialType);
 
-			return scopes;
+			if (storedScopes) {
+				context.commit('setActiveCredentialScopes', storedScopes, { root: true });
+				return storedScopes;
+			}
+
+			const apiScopes = await getScopes(context.rootGetters.getRestApiContext, credentialType);
+
+			context.commit('setActiveCredentialScopes', apiScopes, { root: true });
+			context.commit('setScopes', { credentialType, scopes: apiScopes });
+
+			return apiScopes;
 		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
 			return await getCredentialData(context.rootGetters.getRestApiContext, id);
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index f818ba114bffd..2b973dfa16b77 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -48,6 +48,7 @@ const state: IRootState = {
 	activeActions: [],
 	activeNode: null,
 	activeCredentialType: null,
+	activeCredentialScopes: [] as string[],
 	// @ts-ignore
 	baseUrl: process.env.VUE_APP_URL_BASE_API ? process.env.VUE_APP_URL_BASE_API : (window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH),
 	defaultLocale: 'en',
@@ -573,6 +574,9 @@ export const store = new Vuex.Store({
 		setActiveCredentialType (state, activeCredentialType: string) {
 			state.activeCredentialType = activeCredentialType;
 		},
+		setActiveCredentialScopes (state, scopes: string[]) {
+			state.activeCredentialScopes = scopes;
+		},
 
 		setLastSelectedNode (state, nodeName: string) {
 			state.lastSelectedNode = nodeName;
@@ -661,6 +665,10 @@ export const store = new Vuex.Store({
 			return state.activeCredentialType;
 		},
 
+		activeCredentialScopes: (state): string[] => {
+			return state.activeCredentialScopes;
+		},
+
 		isActionActive: (state) => (action: string): boolean => {
 			return state.activeActions.includes(action);
 		},

From 959d57d135ed69f2a38a543798e3a6fa041840c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 13 May 2022 13:54:18 +0200
Subject: [PATCH 100/104] :art: Fix spacing for `NodeWebhooks` component

---
 packages/editor-ui/src/components/NodeWebhooks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 66d56487d92c9..7a6f8141e3e76 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -128,7 +128,7 @@ export default mixins(
 
 .webhoooks {
 	padding-bottom: var(--spacing-xs);
-	margin: var(--spacing-xs) 0;
+	margin: var(--spacing-xs) 0 0 0;
 	border-bottom: 1px solid #ccc;
 
 	.headline {

From 4f1c1e9ed43daf061a6f1d3adb35b1968e018dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 16 May 2022 10:26:18 +0200
Subject: [PATCH 101/104] :zap: Implement feedback

---
 packages/cli/src/CredentialsHelper.ts         |  30 ----
 packages/cli/src/LoadNodesAndCredentials.ts   |   1 -
 packages/cli/src/Server.ts                    |  62 ++++++++-
 packages/cli/src/api/oauth2Credential.api.ts  |  61 ---------
 packages/cli/src/constants.ts                 |   2 -
 packages/cli/src/requests.d.ts                |   1 -
 .../cli/test/integration/oauth2.api.test.ts   | 129 ------------------
 .../cli/test/integration/shared/constants.ts  |   5 -
 .../cli/test/integration/shared/types.d.ts    |   2 +-
 packages/cli/test/integration/shared/utils.ts |   7 +-
 packages/editor-ui/src/Interface.ts           |   6 -
 packages/editor-ui/src/api/credentials.ts     |   4 -
 .../editor-ui/src/components/NodeSettings.vue |  79 +++--------
 packages/editor-ui/src/modules/credentials.ts |  53 ++++---
 .../editor-ui/src/plugins/i18n/docs/README.md |  14 +-
 .../src/plugins/i18n/locales/en.json          |   6 +-
 packages/editor-ui/src/store.ts               |   8 --
 .../nodes/HttpRequest/HttpRequest.node.ts     |   7 +
 18 files changed, 125 insertions(+), 352 deletions(-)
 delete mode 100644 packages/cli/src/api/oauth2Credential.api.ts
 delete mode 100644 packages/cli/test/integration/oauth2.api.test.ts

diff --git a/packages/cli/src/CredentialsHelper.ts b/packages/cli/src/CredentialsHelper.ts
index 99c92a5bc7050..7707cd1a39228 100644
--- a/packages/cli/src/CredentialsHelper.ts
+++ b/packages/cli/src/CredentialsHelper.ts
@@ -286,36 +286,6 @@ export class CredentialsHelper extends ICredentialsHelper {
 		return combineProperties;
 	}
 
-	/**
-	 * Returns the scope of a credential type
-	 *
-	 * @param {string} type
-	 * @returns {string[]}
-	 * @memberof CredentialsHelper
-	 */
-	getScopes(type: string): string[] {
-		const scopeProperty = this.getCredentialsProperties(type).find(({ name }) => name === 'scope');
-
-		// edge case: scope property exists but is required to be empty string, e.g. GoToWebinar
-		if (scopeProperty?.default === '') return [];
-
-		if (!scopeProperty?.default || typeof scopeProperty.default !== 'string') {
-			const errorMessage = `No \`scope\` property found for credential type: ${type}`;
-
-			Logger.error(errorMessage);
-
-			throw new Error(errorMessage);
-		}
-
-		const { default: scopeDefault } = scopeProperty;
-
-		if (/ /.test(scopeDefault)) return scopeDefault.split(' ');
-
-		if (/,/.test(scopeDefault)) return scopeDefault.split(',');
-
-		return [scopeDefault];
-	}
-
 	/**
 	 * Returns the decrypted credential data with applied overwrites
 	 *
diff --git a/packages/cli/src/LoadNodesAndCredentials.ts b/packages/cli/src/LoadNodesAndCredentials.ts
index 10d85f8834ebc..c1178c9058ece 100644
--- a/packages/cli/src/LoadNodesAndCredentials.ts
+++ b/packages/cli/src/LoadNodesAndCredentials.ts
@@ -58,7 +58,6 @@ class LoadNodesAndCredentialsClass {
 			// In case "n8n" package is the root and the packages are
 			// in the "node_modules" folder underneath it.
 			path.join(__dirname, '..', '..', 'node_modules', 'n8n-workflow'),
-			path.join(__dirname, '..', 'node_modules', 'n8n-workflow'), // for test run
 		];
 		for (const checkPath of checkPaths) {
 			try {
diff --git a/packages/cli/src/Server.ts b/packages/cli/src/Server.ts
index 1ba0731f11f29..107667ab3c6d8 100644
--- a/packages/cli/src/Server.ts
+++ b/packages/cli/src/Server.ts
@@ -157,7 +157,6 @@ import { ExecutionEntity } from './databases/entities/ExecutionEntity';
 import { SharedWorkflow } from './databases/entities/SharedWorkflow';
 import { AUTH_COOKIE_NAME, RESPONSE_ERROR_MESSAGES } from './constants';
 import { credentialsController } from './api/credentials.api';
-import { oauth2CredentialController } from './api/oauth2Credential.api';
 import {
 	getInstanceBaseUrl,
 	isEmailSetUp,
@@ -1450,7 +1449,7 @@ class App {
 					if (defaultLocale === 'en') {
 						return nodeInfos.reduce<INodeTypeDescription[]>((acc, { name, version }) => {
 							const { description } = NodeTypes().getByNameAndVersion(name, version);
-							acc.push(description);
+							acc.push(injectCustomApiCallOption(description));
 							return acc;
 						}, []);
 					}
@@ -1474,7 +1473,7 @@ class App {
 							// ignore - no translation exists at path
 						}
 
-						nodeTypes.push(description);
+						nodeTypes.push(injectCustomApiCallOption(description));
 					}
 
 					const nodeTypes: INodeTypeDescription[] = [];
@@ -1922,8 +1921,6 @@ class App {
 		// OAuth2-Credential/Auth
 		// ----------------------------------------
 
-		this.app.use(`/${this.restEndpoint}/oauth2-credential`, oauth2CredentialController);
-
 		// Authorize OAuth Data
 		this.app.get(
 			`/${this.restEndpoint}/oauth2-credential/auth`,
@@ -3109,3 +3106,58 @@ async function getExecutionsCount(
 
 	return { count, estimated: false };
 }
+
+const CUSTOM_API_CALL_NAME = 'Custom API Call';
+const CUSTOM_API_CALL_KEY = '__CUSTOM_API_CALL__';
+
+/**
+ * Inject a `Custom API Call` option into `resource` and `operation`
+ * parameters in a node that supports proxy auth.
+ */
+function injectCustomApiCallOption(description: INodeTypeDescription) {
+	if (!supportsProxyAuth(description)) return description;
+
+	description.properties.forEach((p) => {
+		if (
+			['resource', 'operation'].includes(p.name) &&
+			Array.isArray(p.options) &&
+			p.options[p.options.length - 1].name !== CUSTOM_API_CALL_NAME
+		) {
+			p.options.push({
+				name: CUSTOM_API_CALL_NAME,
+				value: CUSTOM_API_CALL_KEY,
+			});
+		}
+
+		return p;
+	});
+
+	return description;
+}
+
+const credentialTypes = CredentialTypes();
+
+/**
+ * Whether any of the node's credential types may be used to
+ * make a request from a node other than itself.
+ */
+function supportsProxyAuth(description: INodeTypeDescription) {
+	if (!description.credentials) return false;
+
+	return description.credentials.some(({ name }) => {
+		const credType = credentialTypes.getByName(name);
+
+		if (credType.authenticate !== undefined) return true;
+
+		return isOAuth(credType);
+	});
+}
+
+function isOAuth(credType: ICredentialType) {
+	return (
+		Array.isArray(credType.extends) &&
+		credType.extends.some((parentType) =>
+			['oAuth2Api', 'googleOAuth2Api', 'oAuth1Api'].includes(parentType),
+		)
+	);
+}
diff --git a/packages/cli/src/api/oauth2Credential.api.ts b/packages/cli/src/api/oauth2Credential.api.ts
deleted file mode 100644
index 66dbe9f02182d..0000000000000
--- a/packages/cli/src/api/oauth2Credential.api.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable import/no-cycle */
-import express from 'express';
-import { UserSettings } from 'n8n-core';
-import { LoggerProxy } from 'n8n-workflow';
-import { ResponseHelper } from '..';
-import { RESPONSE_ERROR_MESSAGES } from '../constants';
-import { CredentialsHelper } from '../CredentialsHelper';
-import { getLogger } from '../Logger';
-import { OAuthRequest } from '../requests';
-
-export const oauth2CredentialController = express.Router();
-
-/**
- * Initialize Logger if needed
- */
-oauth2CredentialController.use((req, res, next) => {
-	try {
-		LoggerProxy.getInstance();
-	} catch (error) {
-		LoggerProxy.init(getLogger());
-	}
-	next();
-});
-
-/**
- * GET /oauth2-credential/scopes
- */
-oauth2CredentialController.get(
-	'/scopes',
-	ResponseHelper.send(async (req: OAuthRequest.OAuth2Credential.Scopes): Promise<string[]> => {
-		const { credentialType: type } = req.query;
-
-		if (!type) {
-			LoggerProxy.debug(
-				'Request for OAuth2 credential scopes failed because of missing credential type in query string',
-			);
-
-			throw new ResponseHelper.ResponseError(
-				RESPONSE_ERROR_MESSAGES.NO_CREDENTIAL_TYPE,
-				undefined,
-				400,
-			);
-		}
-
-		if (!type.endsWith('OAuth2Api')) {
-			LoggerProxy.debug(
-				'Request for OAuth2 credential scopes failed because requested credential type is not OAuth2',
-			);
-
-			throw new ResponseHelper.ResponseError(
-				RESPONSE_ERROR_MESSAGES.CREDENTIAL_TYPE_NOT_OAUTH2,
-				undefined,
-				400,
-			);
-		}
-
-		const encryptionKey = await UserSettings.getEncryptionKey();
-
-		return new CredentialsHelper(encryptionKey).getScopes(type);
-	}),
-);
diff --git a/packages/cli/src/constants.ts b/packages/cli/src/constants.ts
index cae556dc96822..59062c46448c5 100644
--- a/packages/cli/src/constants.ts
+++ b/packages/cli/src/constants.ts
@@ -7,8 +7,6 @@ import { RESPONSE_ERROR_MESSAGES as CORE_RESPONSE_ERROR_MESSAGES } from 'n8n-cor
 export const RESPONSE_ERROR_MESSAGES = {
 	NO_CREDENTIAL: 'Credential not found',
 	NO_ENCRYPTION_KEY: CORE_RESPONSE_ERROR_MESSAGES.NO_ENCRYPTION_KEY,
-	NO_CREDENTIAL_TYPE: 'Missing query string param: `credentialType`',
-	CREDENTIAL_TYPE_NOT_OAUTH2: 'Credential type is not OAuth2 - no scopes can be provided',
 };
 
 export const AUTH_COOKIE_NAME = 'n8n-auth';
diff --git a/packages/cli/src/requests.d.ts b/packages/cli/src/requests.d.ts
index 2b94504e4132c..fdc0891ec9b92 100644
--- a/packages/cli/src/requests.d.ts
+++ b/packages/cli/src/requests.d.ts
@@ -245,7 +245,6 @@ export declare namespace OAuthRequest {
 	namespace OAuth2Credential {
 		type Auth = OAuth1Credential.Auth;
 		type Callback = AuthenticatedRequest<{}, {}, {}, { code: string; state: string }>;
-		type Scopes = AuthenticatedRequest<{}, {}, {}, { credentialType: string }>;
 	}
 }
 
diff --git a/packages/cli/test/integration/oauth2.api.test.ts b/packages/cli/test/integration/oauth2.api.test.ts
deleted file mode 100644
index f66dca3d28e3e..0000000000000
--- a/packages/cli/test/integration/oauth2.api.test.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import express from 'express';
-
-import * as utils from './shared/utils';
-import * as testDb from './shared/testDb';
-import { RESPONSE_ERROR_MESSAGES } from '../../src/constants';
-
-import type { Role } from '../../src/databases/entities/Role';
-import { CredentialTypes, LoadNodesAndCredentials } from '../../src';
-import { LOAD_NODES_AND_CREDS_TEST_TIMEOUT } from './shared/constants';
-
-const SCOPES_ENDPOINT = '/oauth2-credential/scopes';
-
-let app: express.Application;
-let testDbName = '';
-let globalOwnerRole: Role;
-
-beforeAll(async () => {
-	app = utils.initTestServer({
-		endpointGroups: ['oauth2-credential'],
-		applyAuth: true,
-	});
-	const initResult = await testDb.init();
-	testDbName = initResult.testDbName;
-
-	utils.initConfigFile();
-
-	globalOwnerRole = await testDb.getGlobalOwnerRole();
-	utils.initTestLogger();
-
-	const loadNodesAndCredentials = LoadNodesAndCredentials();
-	await loadNodesAndCredentials.init();
-
-	const credentialTypes = CredentialTypes();
-	await credentialTypes.init(loadNodesAndCredentials.credentialTypes);
-}, LOAD_NODES_AND_CREDS_TEST_TIMEOUT);
-
-afterAll(async () => {
-	await testDb.terminate(testDbName);
-});
-
-describe('OAuth2 scopes', () => {
-	beforeEach(async () => {
-		await testDb.truncate(['User'], testDbName);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should return scopes - comma-delimited`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent
-			.get(SCOPES_ENDPOINT)
-			.query({ credentialType: 'twistOAuth2Api' });
-
-		expect(response.statusCode).toBe(200);
-
-		const scopes = response.body.data;
-		const TWIST_OAUTH2_API_SCOPES_TOTAL = 6;
-
-		expect(Array.isArray(scopes)).toBe(true);
-		expect(scopes.length).toBe(TWIST_OAUTH2_API_SCOPES_TOTAL);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should return scopes - whitespace-delimited`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent
-			.get(SCOPES_ENDPOINT)
-			.query({ credentialType: 'dropboxOAuth2Api' });
-
-		expect(response.statusCode).toBe(200);
-
-		const scopes = response.body.data;
-		const DROPBOX_OAUTH2_API_SCOPES_TOTAL = 4;
-
-		expect(Array.isArray(scopes)).toBe(true);
-		expect(scopes.length).toBe(DROPBOX_OAUTH2_API_SCOPES_TOTAL);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should return scope - non-delimited`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent
-			.get(SCOPES_ENDPOINT)
-			.query({ credentialType: 'harvestOAuth2Api' });
-
-		expect(response.statusCode).toBe(200);
-
-		const scopes = response.body.data;
-
-		expect(Array.isArray(scopes)).toBe(true);
-		expect(scopes.length).toBe(1);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should fail with missing credential type`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent.get(SCOPES_ENDPOINT);
-
-		expect(response.statusCode).toBe(400);
-		expect(response.body.message).toBe(RESPONSE_ERROR_MESSAGES.NO_CREDENTIAL_TYPE);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should fail with non-OAuth2 credential type`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent
-			.get(SCOPES_ENDPOINT)
-			.query({ credentialType: 'disqusApi' });
-
-		expect(response.statusCode).toBe(400);
-		expect(response.body.message).toBe(RESPONSE_ERROR_MESSAGES.CREDENTIAL_TYPE_NOT_OAUTH2);
-	});
-
-	test(`GET ${SCOPES_ENDPOINT} should fail with wrong OAuth2 credential type`, async () => {
-		const ownerShell = await testDb.createUserShell(globalOwnerRole);
-		const authOwnerShellAgent = utils.createAgent(app, { auth: true, user: ownerShell });
-
-		const response = await authOwnerShellAgent
-			.get(SCOPES_ENDPOINT)
-			.query({ credentialType: 'wrongOAuth2Api' });
-
-		expect(response.statusCode).toBe(500);
-		expect(response.body.message).toBe(`${RESPONSE_ERROR_MESSAGES.NO_CREDENTIAL}: wrongOAuth2Api`);
-	});
-});
diff --git a/packages/cli/test/integration/shared/constants.ts b/packages/cli/test/integration/shared/constants.ts
index 180a96163773c..75c2a69a38ba6 100644
--- a/packages/cli/test/integration/shared/constants.ts
+++ b/packages/cli/test/integration/shared/constants.ts
@@ -62,8 +62,3 @@ export const BOOTSTRAP_MYSQL_CONNECTION_NAME: Readonly<string> = 'n8n_bs_mysql';
  * Timeout (in milliseconds) to account for fake SMTP service being slow to respond.
  */
 export const SMTP_TEST_TIMEOUT = 30_000;
-
-/**
- * Timeout (in milliseconds) to account for `LoadNodesAndCredentials()` being slow to run on CI/CD server.
- */
-export const LOAD_NODES_AND_CREDS_TEST_TIMEOUT = 30_000;
diff --git a/packages/cli/test/integration/shared/types.d.ts b/packages/cli/test/integration/shared/types.d.ts
index 732d925d84a3a..bca1c86fbc530 100644
--- a/packages/cli/test/integration/shared/types.d.ts
+++ b/packages/cli/test/integration/shared/types.d.ts
@@ -15,7 +15,7 @@ export type SmtpTestAccount = {
 	};
 };
 
-type EndpointGroup = 'me' | 'users' | 'auth' | 'owner' | 'passwordReset' | 'credentials' | 'oauth2-credential';
+type EndpointGroup = 'me' | 'users' | 'auth' | 'owner' | 'passwordReset' | 'credentials';
 
 export type CredentialPayload = {
 	name: string;
diff --git a/packages/cli/test/integration/shared/utils.ts b/packages/cli/test/integration/shared/utils.ts
index 1cd38341b2dbe..3086b9634996d 100644
--- a/packages/cli/test/integration/shared/utils.ts
+++ b/packages/cli/test/integration/shared/utils.ts
@@ -26,7 +26,6 @@ import { credentialsController } from '../../../src/api/credentials.api';
 import type { User } from '../../../src/databases/entities/User';
 import type { EndpointGroup, SmtpTestAccount } from './types';
 import type { N8nApp } from '../../../src/UserManagement/Interfaces';
-import { oauth2CredentialController } from '../../../src/api/oauth2Credential.api';
 
 /**
  * Initialize a test server.
@@ -64,7 +63,6 @@ export function initTestServer({
 	if (routerEndpoints.length) {
 		const map: Record<string, express.Router> = {
 			credentials: credentialsController,
-			'oauth2-credential': oauth2CredentialController,
 		};
 
 		for (const group of routerEndpoints) {
@@ -107,10 +105,7 @@ const classifyEndpointGroups = (endpointGroups: string[]) => {
 	const functionEndpoints: string[] = [];
 
 	endpointGroups.forEach((group) =>
-		(['credentials', 'oauth2-credential'].includes(group)
-			? routerEndpoints
-			: functionEndpoints
-		).push(group),
+		(group === 'credentials' ? routerEndpoints : functionEndpoints).push(group),
 	);
 
 	return [routerEndpoints, functionEndpoints];
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index b31a76c1f994b..92c4966f4fbc6 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -782,7 +782,6 @@ export interface IRootState {
 	activeWorkflows: string[];
 	activeActions: string[];
 	activeCredentialType: string | null;
-	activeCredentialScopes: string[];
 	activeNode: string | null;
 	baseUrl: string;
 	defaultLocale: string;
@@ -826,14 +825,9 @@ export interface ICredentialMap {
 	[name: string]: ICredentialsResponse;
 }
 
-interface IScopesMap {
-	[credentialType: string]: string[];
-}
-
 export interface ICredentialsState {
 	credentialTypes: ICredentialTypeMap;
 	credentials: ICredentialMap;
-	scopes: IScopesMap;
 }
 
 export interface ITagsState {
diff --git a/packages/editor-ui/src/api/credentials.ts b/packages/editor-ui/src/api/credentials.ts
index 2e6065f88038a..60a81e061e697 100644
--- a/packages/editor-ui/src/api/credentials.ts
+++ b/packages/editor-ui/src/api/credentials.ts
@@ -20,10 +20,6 @@ export async function getAllCredentials(context: IRestApiContext): Promise<ICred
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 
-export async function getScopes(context: IRestApiContext, credentialType: string): Promise<string[]> {
-	return await makeRestApiRequest(context, 'GET', '/oauth2-credential/scopes', { credentialType });
-}
-
 export async function createNewCredential(context: IRestApiContext, data: ICredentialsDecrypted): Promise<ICredentialsResponse> {
 	return makeRestApiRequest(context, 'POST', `/credentials`, data as unknown as IDataObject);
 }
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 98fe6ca289922..1605c6141f715 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -33,7 +33,7 @@
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
 				>
 					<n8n-notice
-						v-if="isHttpRequestNodeV2(node) && this.activeCredentialScopes.length > 0"
+						v-if="isHttpRequestNodeV2(node) && this.activeCredential.scopes.length > 0"
 						:content="scopesShortContent"
 						:fullContent="scopesFullContent"
 					/>
@@ -96,7 +96,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { mapGetters } from 'vuex';
-import { CUSTOM_API_CALL_KEY } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -115,7 +114,6 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
-			...mapGetters(['activeCredentialScopes']),
 			...mapGetters('credentials', [
 				'getCredentialTypeByName',
 				'getScopesByCredentialType',
@@ -169,27 +167,9 @@ export default mixins(
 				});
 			},
 			parametersNoneSetting (): INodeProperties[] {
-				return this.parameters.reduce<INodeProperties[]>((acc, parameter) => {
-					if (parameter.isNodeSetting) return acc;
-
-					if (
-						['resource', 'operation'].includes(parameter.name) &&
-						this.isSupportedByHttpRequestNode
-					) {
-						const copy: INodeProperties & { options: [] } = JSON.parse(JSON.stringify(parameter));
-
-						copy.options.push({
-							name: this.$locale.baseText('parameterInput.customApiCall'),
-							value: `${CUSTOM_API_CALL_KEY}-${parameter.name}-${this.node.name}`,
-						 });
-
-						 return acc.push(copy), acc;
-					}
-
-					acc.push(parameter);
-
-					return acc;
-				}, []);
+				return this.parameters.filter((item) => {
+					return !item.isNodeSetting;
+				});
 			},
 			parameters (): INodeProperties[] {
 				if (this.nodeType === null) {
@@ -202,7 +182,7 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.notice',
 					{
-						adjustToNumber: this.activeCredentialScopes.length,
+						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
 							activeCredential: this.activeCredential.shortDisplayName,
 						},
@@ -213,10 +193,10 @@ export default mixins(
 				return this.$locale.baseText(
 					'nodeSettings.scopes.expandedNoticeWithScopes',
 					{
-						adjustToNumber: this.activeCredentialScopes.length,
+						adjustToNumber: this.activeCredential.scopes.length,
 						interpolate: {
 							activeCredential: this.activeCredential.shortDisplayName,
-							scopes: this.activeCredentialScopes.map(
+							scopes: this.activeCredential.scopes.map(
 								(scope: string) => scope.replace(/\//g, '/<wbr>'),
 							).join('<br>'),
 						},
@@ -245,9 +225,9 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
-				isSupportedByHttpRequestNode: false,
 				activeCredential: {
 					shortDisplayName: '',
+					scopes: [] as string[],
 				},
 
 				nodeSettings: [
@@ -350,42 +330,27 @@ export default mixins(
 			},
 		},
 		methods: {
-			/**
-			 * Check if any of the node's credential types may be used to
-			 * make a request with the HTTP Request node v2.
-			 */
-			checkHttpRequestNodeSupport(credentialTypeNames: string[]) {
-				this.isSupportedByHttpRequestNode = credentialTypeNames.some(name => {
-					const credType = this.getCredentialTypeByName(name);
-
-					const isOAuth = Array.isArray(credType.extends) && credType.extends.some(
-						(parentType: string) => ['oAuth2Api', 'oAuth1Api'].includes(parentType),
-					);
-
-					return isOAuth || credType.authenticate !== undefined;
-				});
-			},
-			async prepareScopesNotice(activeCredentialType: string) {
+			async prepareScopesNotice(credentialTypeName: string) {
 				if (
 					!this.isHttpRequestNodeV2(this.node) ||
-					!activeCredentialType || !activeCredentialType.endsWith('OAuth2Api')
+					!credentialTypeName || !credentialTypeName.endsWith('OAuth2Api')
 				) {
-					this.$store.commit('setActiveCredentialScopes', [], { root: true });
+					this.activeCredential.scopes = [];
 					return;
 				}
 
-				const credentialType = this.getCredentialTypeByName(activeCredentialType);
-
-				this.$store.commit('setActiveCredentialType', credentialType.name);
+				const { name, displayName } = this.getCredentialTypeByName(credentialTypeName);
 
+				this.activeCredential.scopes = this.getScopesByCredentialType(name);
+				this.activeCredential.shortDisplayName = this.shortenCredentialDisplayName(displayName);
+			},
+			shortenCredentialDisplayName (credentialDisplayName: string) {
 				const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api');
 				const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api');
 
-				this.activeCredential.shortDisplayName = credentialType.displayName
+				return credentialDisplayName
 					.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
 					.trim();
-
-				this.$store.dispatch('credentials/fetchActiveCredentialScopes', activeCredentialType);
 			},
 			onNodeExecute () {
 				this.$emit('execute');
@@ -649,14 +614,7 @@ export default mixins(
 		mounted () {
 			this.setNodeValues();
 
-			if (!this.isHttpRequestNodeV2(this.node)) {
-				const activeNodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
-
-				if (activeNodeType && activeNodeType.credentials) {
-					const credentialTypeNames = activeNodeType.credentials.map((c: { name: string }) => c.name);
-					this.checkHttpRequestNodeSupport(credentialTypeNames);
-				}
-			} else if (
+			if (
 				this.isHttpRequestNodeV2(this.node) &&
 				this.node.parameters.authentication === 'existingCredentialType'
 			) {
@@ -707,7 +665,6 @@ export default mixins(
 		height: 100%;
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
-
 	}
 }
 
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index ac88148ac9cf2..059d1f432243f 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -8,7 +8,6 @@ import { getCredentialTypes,
 	oAuth2CredentialAuthorize,
 	oAuth1CredentialAuthorize,
 	testCredential,
-	getScopes,
 } from '@/api/credentials';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
@@ -24,6 +23,7 @@ import {
 	ICredentialsDecrypted,
 	INodeCredentialTestResult,
 	INodeTypeDescription,
+	INodeProperties,
 } from 'n8n-workflow';
 import { getAppNameFromCredType } from '@/components/helpers';
 
@@ -36,7 +36,6 @@ const module: Module<ICredentialsState, IRootState> = {
 	state: {
 		credentialTypes: {},
 		credentials: {},
-		scopes: {},
 	},
 	mutations: {
 		setCredentialTypes: (state: ICredentialsState, credentialTypes: ICredentialType[]) => {
@@ -55,14 +54,6 @@ const module: Module<ICredentialsState, IRootState> = {
 				return accu;
 			}, {});
 		},
-		setScopes: (
-			state: ICredentialsState,
-			{ credentialType, scopes }: { credentialType: string; scopes: string[] },
-		) => {
-			if (state.scopes[credentialType] !== undefined) return;
-
-			state.scopes[credentialType] = scopes;
-		},
 		upsertCredential(state: ICredentialsState, credential: ICredentialsResponse) {
 			if (credential.id) {
 				Vue.set(state.credentials, credential.id, credential);
@@ -130,8 +121,31 @@ const module: Module<ICredentialsState, IRootState> = {
 				});
 			};
 		},
-		getScopesByCredentialType (state: ICredentialsState) {
-			return (credentialTypeName: string) => state.scopes[credentialTypeName];
+		getScopesByCredentialType (_: ICredentialsState, getters: any) { // tslint:disable-line:no-any
+			return (credentialTypeName: string) => {
+				const credentialType = getters.getCredentialTypeByName(credentialTypeName) as {
+					properties: INodeProperties[];
+				};
+
+				const scopeProperty = credentialType.properties.find((p) => p.name === 'scope');
+
+				if (
+					!scopeProperty ||
+					!scopeProperty.default ||
+					typeof scopeProperty.default !== 'string' ||
+					scopeProperty.default === ''
+				) {
+					return [];
+				}
+
+				const { default: scopeDefault } = scopeProperty;
+
+				if (/ /.test(scopeDefault)) return scopeDefault.split(' ');
+
+				if (/,/.test(scopeDefault)) return scopeDefault.split(',');
+
+				return [scopeDefault];
+			};
 		},
 	},
 	actions: {
@@ -148,21 +162,6 @@ const module: Module<ICredentialsState, IRootState> = {
 
 			return credentials;
 		},
-		fetchActiveCredentialScopes: async (context: ActionContext<ICredentialsState, IRootState>, credentialType: string): Promise<string[]> => {
-			const storedScopes = context.getters.getScopesByCredentialType(credentialType);
-
-			if (storedScopes) {
-				context.commit('setActiveCredentialScopes', storedScopes, { root: true });
-				return storedScopes;
-			}
-
-			const apiScopes = await getScopes(context.rootGetters.getRestApiContext, credentialType);
-
-			context.commit('setActiveCredentialScopes', apiScopes, { root: true });
-			context.commit('setScopes', { credentialType, scopes: apiScopes });
-
-			return apiScopes;
-		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
 			return await getCredentialData(context.rootGetters.getRestApiContext, id);
 		},
diff --git a/packages/editor-ui/src/plugins/i18n/docs/README.md b/packages/editor-ui/src/plugins/i18n/docs/README.md
index 125d5a73bedee..d00ba2e1e21c4 100644
--- a/packages/editor-ui/src/plugins/i18n/docs/README.md
+++ b/packages/editor-ui/src/plugins/i18n/docs/README.md
@@ -318,8 +318,8 @@ Allowed subkeys: `options.{optionName}.displayName` and `options.{optionName}.de
 {
 	"nodeView.resource.displayName": "🇩🇪 Resource",
 	"nodeView.resource.description": "🇩🇪 Resource to operate on",
-	"nodeView.resource.options.file.displayName": "🇩🇪 File",
-	"nodeView.resource.options.issue.displayName": "🇩🇪 Issue",
+	"nodeView.resource.options.file.name": "🇩🇪 File",
+	"nodeView.resource.options.issue.name": "🇩🇪 Issue",
 }
 ```
 
@@ -327,6 +327,16 @@ Allowed subkeys: `options.{optionName}.displayName` and `options.{optionName}.de
 	<img src="img/node2.png" width="400">
 </p>
 
+For nodes whose credentials may be used in the HTTP Request node, an additional option `Custom API Call` is injected into the `Resource` and `Operation` parameters. Use the `__CUSTOM_API_CALL__` key to translate this additional option.
+
+```json
+{
+	"nodeView.resource.options.file.name": "🇩🇪 File",
+	"nodeView.resource.options.issue.name": "🇩🇪 Issue",
+	"nodeView.resource.options.__CUSTOM_API_CALL__.name": "🇩🇪 Custom API Call",
+}
+```
+
 #### `collection` and `fixedCollection` parameters
 
 Allowed keys: `displayName`, `description`, `placeholder`, `multipleValueButtonText`
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index be0267f842f3d..0d16e8ff9536e 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -409,13 +409,13 @@
 	"nodeSettings.parameters": "Parameters",
 	"nodeSettings.retryOnFail.description": "If active, the node tries to execute again when it fails",
 	"nodeSettings.retryOnFail.displayName": "Retry On Fail",
+	"nodeSettings.scopes.expandedNoticeWithScopes": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
+	"nodeSettings.scopes.notice": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
 	"nodeSettings.theNodeIsNotValidAsItsTypeIsUnknown": "The node is not valid as its type ({nodeType}) is unknown",
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
+	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
-	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
-	"nodeSettings.scopes.notice": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
-	"nodeSettings.scopes.expandedNoticeWithScopes": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a> | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials<br>{scopes}<br><a data-key=\"show-less\">Show less</a>",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 2b973dfa16b77..f818ba114bffd 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -48,7 +48,6 @@ const state: IRootState = {
 	activeActions: [],
 	activeNode: null,
 	activeCredentialType: null,
-	activeCredentialScopes: [] as string[],
 	// @ts-ignore
 	baseUrl: process.env.VUE_APP_URL_BASE_API ? process.env.VUE_APP_URL_BASE_API : (window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH),
 	defaultLocale: 'en',
@@ -574,9 +573,6 @@ export const store = new Vuex.Store({
 		setActiveCredentialType (state, activeCredentialType: string) {
 			state.activeCredentialType = activeCredentialType;
 		},
-		setActiveCredentialScopes (state, scopes: string[]) {
-			state.activeCredentialScopes = scopes;
-		},
 
 		setLastSelectedNode (state, nodeName: string) {
 			state.lastSelectedNode = nodeName;
@@ -665,10 +661,6 @@ export const store = new Vuex.Store({
 			return state.activeCredentialType;
 		},
 
-		activeCredentialScopes: (state): string[] => {
-			return state.activeCredentialScopes;
-		},
-
 		isActionActive: (state) => (action: string): boolean => {
 			return state.activeActions.includes(action);
 		},
diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index 27353212b96d6..a788ec47878b4 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -271,6 +271,13 @@ export class HttpRequest implements INodeType {
 					},
 				},
 			},
+			// @TODO expression not resolving, using Notion as example
+			// {
+			// 	displayName: 'Supports Proxy Auth',
+			// 	name: 'supportsProxyAuth',
+			// 	type: 'hidden',
+			// 	default: '={{ $parameter["&authentication"] === "existingCredentialType" }}',
+			// },
 			{
 				displayName: 'Generic Auth Type',
 				name: 'genericAuthType',

From 661284825cfc746780331e04237c6e6b35e7e736 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Mon, 16 May 2022 13:19:58 +0200
Subject: [PATCH 102/104] :zap: Update HTTPRN default and issue copy

---
 packages/editor-ui/src/components/ParameterInput.vue      | 7 ++++++-
 packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index c09524d702de2..63c53a263827f 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -496,7 +496,12 @@ export default mixins(
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
 							}
-							issues.parameters[this.parameter.name] = [`The value "${checkValue}" is not supported!`];
+
+							if (this.isHttpRequestNodeV2(this.node)) {
+								issues.parameters[this.parameter.name] = ['Select a credential type from the dropdown'];
+							} else {
+								issues.parameters[this.parameter.name] = [`The value "${checkValue}" is not supported!`];
+							}
 						}
 					}
 				} else if (this.remoteParameterOptionsLoadingIssues !== null) {
diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index a788ec47878b4..bc6a2436f45cd 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -258,7 +258,7 @@ export class HttpRequest implements INodeType {
 				typeOptions: {
 					loadOptionsMethod: 'getNodeCredentialTypes',
 				},
-				default: 'actionNetworkApi',
+				default: '',
 				placeholder: 'None',
 				displayOptions: {
 					show: {

From 2ac022e12a51d13178f8850b092a7fe68fbd031d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 19 May 2022 14:44:43 +0200
Subject: [PATCH 103/104] Refactor to use `CredentialsSelect` param (#3304)

* :zap: Refactor into cred type param

* :zap: Componentize scopes notice

* :fire: Remove unused data

* :fire: Remove unused `loadOptions`

* :zap: Componentize `NodeCredentialType`

* :bug: Fix param validation

* :fire: Remove dup methods

* :zap: Refactor all references to `isHttpRequestNodeV2`

* :art: Fix styling

* :fire: Remove unused import

* :fire: Remove unused properties

* :art: Fix spacing for Pipedrive Trigger node

* :art: Undo Webhook node styling change

* :fire: Remove unused style

* :zap: Cover `httpHeaderAuth` edge case

* :bug: Fix `this.node` reference

* :truck: Rename to `credentialsSelect`

* :bug: Fix mistaken renaming

* :zap: Set one attribute per line

* :zap: Move condition to instantiation site

* :truck: Rename prop

* :zap: Refactor away `prepareScopesNotice`

* :pencil2: Rename i18n keys

* :pencil2: Update i18n calls

* :pencil2: Add more i18n keys

* :fire: Remove unused props

* :pencil2: Add explanatory comment

* :zap: Adjust check in `hasProxyAuth`

* :zap: Refactor `credentialSelected` from prop to event

* :zap: Eventify `valueChanged`, `setFocus`, `onBlur`

* :zap: Eventify `optionSelected`

* :zap: Add `noDataExpression`

* :fire: Remove logging

* :fire: Remove URL from scopes

* :zap: Disregard expressions for display

* :art: Use CSS modules

* :blue_book: Tigthen interface

* :bug: Fix generic auth display

* :bug: Fix generic auth validation

* :blue_book: Loosen type

* :truck: Move event params to end

* :zap: Generalize reference

* :zap: Refactor generic auth as `credentialsSelect` param

* :rewind: Restore check for `httpHeaderAuth `

* :truck: Rename `existing` to `predefined`
---
 .../src/components/CredentialsSelect.vue      | 152 ++++++++++++++++++
 .../src/components/NodeCredentials.vue        |  27 +---
 .../editor-ui/src/components/NodeSettings.vue |  76 ---------
 .../editor-ui/src/components/NodeWebhooks.vue |   2 +-
 .../src/components/ParameterInput.vue         | 144 ++++++++++++-----
 .../src/components/ParameterInputList.vue     |   7 -
 .../src/components/ParameterIssues.vue        |  30 ++++
 .../src/components/ParameterOptions.vue       |  68 ++++++++
 .../editor-ui/src/components/ScopesNotice.vue |  55 +++++++
 .../src/components/mixins/nodeHelpers.ts      |  17 +-
 .../src/components/mixins/workflowHelpers.ts  |   2 +-
 packages/editor-ui/src/modules/credentials.ts |   5 +-
 .../src/plugins/i18n/locales/en.json          |   6 +-
 .../credentials/HttpBasicAuth.credentials.ts  |   1 +
 .../credentials/HttpDigestAuth.credentials.ts |   1 +
 .../credentials/HttpHeaderAuth.credentials.ts |   1 +
 .../credentials/HttpQueryAuth.credentials.ts  |   1 +
 .../credentials/OAuth1Api.credentials.ts      |   1 +
 .../credentials/OAuth2Api.credentials.ts      |   1 +
 .../nodes/HttpRequest/HttpRequest.node.ts     | 132 +++------------
 packages/workflow/src/Interfaces.ts           |   7 +-
 21 files changed, 462 insertions(+), 274 deletions(-)
 create mode 100644 packages/editor-ui/src/components/CredentialsSelect.vue
 create mode 100644 packages/editor-ui/src/components/ParameterIssues.vue
 create mode 100644 packages/editor-ui/src/components/ParameterOptions.vue
 create mode 100644 packages/editor-ui/src/components/ScopesNotice.vue

diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
new file mode 100644
index 0000000000000..4f59d9c88dc80
--- /dev/null
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -0,0 +1,152 @@
+<template>
+	<div>
+		<div :class="$style['parameter-value-container']">
+			<n8n-select
+				:size="inputSize"
+				filterable
+				:value="displayValue"
+				:placeholder="parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')"
+				:title="displayTitle"
+				@change="(value) => $emit('valueChanged', value)"
+				@keydown.stop
+				@focus="$emit('setFocus')"
+				@blur="$emit('onBlur')"
+			>
+				<n8n-option
+					v-for="credType in supportedCredentialTypes"
+					:value="credType.name"
+					:key="credType.name"
+				>
+					<div class="list-option">
+						<div class="option-headline">
+							{{ credType.displayName }}
+						</div>
+						<div
+							v-if="credType.description"
+							class="option-description"
+							v-html="credType.description"
+						/>
+					</div>
+				</n8n-option>
+			</n8n-select>
+			<slot name="issues-and-options" />
+		</div>
+
+		<scopes-notice
+			v-if="scopes.length > 0"
+			:activeCredentialType="activeCredentialType"
+			:scopes="scopes"
+		/>
+		<div>
+			<node-credentials
+				:node="node"
+				:overrideCredType="node.parameters[parameter.name]"
+				@credentialSelected="(updateInformation) => $emit('credentialSelected', updateInformation)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { ICredentialType } from 'n8n-workflow';
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import ScopesNotice from '@/components/ScopesNotice.vue';
+import NodeCredentials from '@/components/NodeCredentials.vue';
+
+export default Vue.extend({
+	name: 'CredentialsSelect',
+	components: {
+		ScopesNotice,
+		NodeCredentials,
+	},
+	props: [
+		'activeCredentialType',
+		'node',
+		'parameter',
+		'inputSize',
+		'displayValue',
+		'isReadOnly',
+		'displayTitle',
+	],
+	computed: {
+		...mapGetters('credentials', ['allCredentialTypes', 'getScopesByCredentialType']),
+		scopes(): string[] {
+			if (!this.activeCredentialType) return [];
+
+			return this.getScopesByCredentialType(this.activeCredentialType);
+		},
+		supportedCredentialTypes(): ICredentialType[] {
+			return this.allCredentialTypes.filter((c: ICredentialType) => this.isSupported(c.name));
+		},
+	},
+	methods: {
+		/**
+		 * Check if a credential type belongs to one of the supported sets defined
+		 * in the `credentialTypes` key in a `credentialsSelect` parameter
+		 */
+		isSupported(name: string): boolean {
+			const supported = this.getSupportedSets(this.parameter.credentialTypes);
+
+			const checkedCredType = this.$store.getters['credentials/getCredentialTypeByName'](name);
+
+			for (const property of supported.has) {
+				if (checkedCredType[property] !== undefined) {
+
+					// edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth
+					if (name === 'httpHeaderAuth' && property === 'authenticate') continue;
+
+					return true;
+				}
+			}
+
+			if (
+				checkedCredType.extends &&
+				checkedCredType.extends.some(
+					(parentType: string) => supported.extends.includes(parentType),
+				)
+			) {
+				return true;
+			}
+
+			if (checkedCredType.extends && supported.extends.length) {
+				// recurse upward until base credential type
+				// e.g. microsoftDynamicsOAuth2Api -> microsoftOAuth2Api -> oAuth2Api
+				return checkedCredType.extends.reduce(
+					(acc: boolean, parentType: string) => acc || this.isSupported(parentType),
+					false,
+				);
+			}
+
+			return false;
+		},
+		getSupportedSets(credentialTypes: string[]) {
+			return credentialTypes.reduce<{ extends: string[]; has: string[] }>((acc, cur) => {
+				const _extends = cur.split('extends:');
+
+				if (_extends.length === 2) {
+					acc.extends.push(_extends[1]);
+					return acc;
+				}
+
+				const _has = cur.split('has:');
+
+				if (_has.length === 2) {
+					acc.has.push(_has[1]);
+					return acc;
+				}
+
+				return acc;
+			}, { extends: [], has: [] });
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+.parameter-value-container {
+	display: flex;
+	align-items: center;
+}
+
+</style>
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index f2b02f0988437..623580172bbaf 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -87,6 +87,7 @@ export default mixins(
 	name: 'NodeCredentials',
 	props: [
 		'node', // INodeUi
+		'overrideCredType', // cred type
 	],
 	data () {
 		return {
@@ -99,14 +100,6 @@ export default mixins(
 			credentialOptions: 'allCredentialsByType',
 			getCredentialTypeByName: 'getCredentialTypeByName',
 		}),
-		isProxyAuth(): boolean {
-			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authentication === 'existingCredentialType';
-		},
-		isGenericAuth(): boolean {
-			return this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authentication === 'genericCredentialType';
-		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
@@ -120,17 +113,9 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
-			if (this.isGenericAuth) {
-				const { genericAuthType } = this.node.parameters as { genericAuthType: string };
-
-				return [this.getCredentialTypeByName(genericAuthType)];
-			}
+			const credType = this.getCredentialTypeByName(this.overrideCredType);
 
-			if (this.isProxyAuth) {
-				const { nodeCredentialType } = this.node.parameters as { nodeCredentialType?: string };
-
-				if (nodeCredentialType) return [this.getCredentialTypeByName(nodeCredentialType)];
-			}
+			if (credType) return [credType];
 
 			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (activeNodeType && activeNodeType.credentials) {
@@ -321,11 +306,7 @@ export default mixins(
 
 <style lang="scss" module>
 .container {
-	margin: 0;
-
-	> * {
-		margin-bottom: var(--spacing-xs);
-	}
+	margin-top: var(--spacing-xs);
 }
 
 .warning {
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 1605c6141f715..9a4ec98aef469 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -32,11 +32,6 @@
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
 				>
-					<n8n-notice
-						v-if="isHttpRequestNodeV2(node) && this.activeCredential.scopes.length > 0"
-						:content="scopesShortContent"
-						:fullContent="scopesFullContent"
-					/>
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
@@ -95,7 +90,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
-import { mapGetters } from 'vuex';
 
 export default mixins(
 	externalHooks,
@@ -114,10 +108,6 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
-			...mapGetters('credentials', [
-				'getCredentialTypeByName',
-				'getScopesByCredentialType',
-			]),
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -178,31 +168,6 @@ export default mixins(
 
 				return this.nodeType.properties;
 			},
-			scopesShortContent (): string {
-				return this.$locale.baseText(
-					'nodeSettings.scopes.notice',
-					{
-						adjustToNumber: this.activeCredential.scopes.length,
-						interpolate: {
-							activeCredential: this.activeCredential.shortDisplayName,
-						},
-					},
-				);
-			},
-			scopesFullContent (): string {
-				return this.$locale.baseText(
-					'nodeSettings.scopes.expandedNoticeWithScopes',
-					{
-						adjustToNumber: this.activeCredential.scopes.length,
-						interpolate: {
-							activeCredential: this.activeCredential.shortDisplayName,
-							scopes: this.activeCredential.scopes.map(
-								(scope: string) => scope.replace(/\//g, '/<wbr>'),
-							).join('<br>'),
-						},
-					},
-				);
-			},
 		},
 		props: {
 			eventBus: {
@@ -225,10 +190,6 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
-				activeCredential: {
-					shortDisplayName: '',
-					scopes: [] as string[],
-				},
 
 				nodeSettings: [
 					{
@@ -330,28 +291,6 @@ export default mixins(
 			},
 		},
 		methods: {
-			async prepareScopesNotice(credentialTypeName: string) {
-				if (
-					!this.isHttpRequestNodeV2(this.node) ||
-					!credentialTypeName || !credentialTypeName.endsWith('OAuth2Api')
-				) {
-					this.activeCredential.scopes = [];
-					return;
-				}
-
-				const { name, displayName } = this.getCredentialTypeByName(credentialTypeName);
-
-				this.activeCredential.scopes = this.getScopesByCredentialType(name);
-				this.activeCredential.shortDisplayName = this.shortenCredentialDisplayName(displayName);
-			},
-			shortenCredentialDisplayName (credentialDisplayName: string) {
-				const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api');
-				const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api');
-
-				return credentialDisplayName
-					.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
-					.trim();
-			},
 			onNodeExecute () {
 				this.$emit('execute');
 			},
@@ -428,13 +367,6 @@ export default mixins(
 				});
 			},
 			valueChanged (parameterData: IUpdateInformation) {
-				if (
-					this.isHttpRequestNodeV2(this.node) &&
-					parameterData.name === 'parameters.nodeCredentialType'
-				) {
-					this.prepareScopesNotice(parameterData.value as string);
-				}
-
 				let newValue: NodeParameterValue;
 				if (parameterData.hasOwnProperty('value')) {
 					// New value is given
@@ -613,14 +545,6 @@ export default mixins(
 		},
 		mounted () {
 			this.setNodeValues();
-
-			if (
-				this.isHttpRequestNodeV2(this.node) &&
-				this.node.parameters.authentication === 'existingCredentialType'
-			) {
-				this.prepareScopesNotice(this.node.parameters.nodeCredentialType as string);
-			}
-
 			if (this.eventBus) {
 				(this.eventBus as Vue).$on('openSettings', () => {
 					this.openPanel = 'settings';
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 7a6f8141e3e76..66d56487d92c9 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -128,7 +128,7 @@ export default mixins(
 
 .webhoooks {
 	padding-bottom: var(--spacing-xs);
-	margin: var(--spacing-xs) 0 0 0;
+	margin: var(--spacing-xs) 0;
 	border-bottom: 1px solid #ccc;
 
 	.headline {
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 63c53a263827f..26d0aadef376d 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -104,6 +104,37 @@
 			:placeholder="parameter.placeholder"
 		/>
 
+		<credentials-select
+			v-else-if="parameter.type === 'credentialsSelect' || (parameter.name === 'genericAuthType')"
+			ref="inputField"
+			:parameter="parameter"
+			:node="node"
+			:activeCredentialType="activeCredentialType"
+			:inputSize="inputSize"
+			:displayValue="displayValue"
+			:isReadOnly="isReadOnly"
+			:displayTitle="displayTitle"
+			@credentialSelected="credentialSelected"
+			@valueChanged="valueChanged"
+			@setFocus="setFocus"
+			@onBlur="onBlur"
+		>
+			<template v-slot:issues-and-options>
+				<parameter-issues
+					:issues="getIssues"
+				/>
+				<parameter-options
+				 	v-if="displayOptionsComputed"
+					:displayOptionsComputed="displayOptionsComputed"
+					:parameter="parameter"
+					:isValueExpression="isValueExpression"
+					:isDefault="isDefault"
+					:hasRemoteMethod="hasRemoteMethod"
+					@optionSelected="optionSelected"
+				/>
+			</template>
+		</credentials-select>
+
 		<n8n-select
 			v-else-if="parameter.type === 'options'"
 			ref="inputField"
@@ -169,26 +200,21 @@
 		/>
 	</div>
 
-	<div class="parameter-issues" v-if="getIssues.length">
-		<n8n-tooltip placement="top" >
-			<div slot="content" v-html="`${$locale.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
-			<font-awesome-icon icon="exclamation-triangle" />
-		</n8n-tooltip>
-	</div>
+	<parameter-issues
+		v-if="parameter.type !== 'credentialsSelect'"
+		:issues="getIssues"
+	/>
+
+	<parameter-options
+		v-if="displayOptionsComputed && parameter.type !== 'credentialsSelect'"
+		:displayOptionsComputed="displayOptionsComputed"
+		:parameter="parameter"
+		:isValueExpression="isValueExpression"
+		:isDefault="isDefault"
+		:hasRemoteMethod="hasRemoteMethod"
+		@optionSelected="optionSelected"
+	/>
 
-	<div class="parameter-options" v-if="displayOptionsComputed">
-			<el-dropdown trigger="click" @command="optionSelected" size="mini">
-				<span class="el-dropdown-link">
-					<font-awesome-icon icon="cogs" class="reset-icon clickable" :title="$locale.baseText('parameterInput.parameterOptions')"/>
-				</span>
-				<el-dropdown-menu slot="dropdown">
-					<el-dropdown-item command="addExpression" v-if="parameter.noDataExpression !== true && !isValueExpression">{{ $locale.baseText('parameterInput.addExpression') }}</el-dropdown-item>
-					<el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">{{ $locale.baseText('parameterInput.removeExpression') }}</el-dropdown-item>
-					<el-dropdown-item command="refreshOptions" v-if="hasRemoteMethod">{{ $locale.baseText('parameterInput.refreshList') }}</el-dropdown-item>
-					<el-dropdown-item command="resetValue" :disabled="isDefault" divided>{{ $locale.baseText('parameterInput.resetValue') }}</el-dropdown-item>
-				</el-dropdown-menu>
-			</el-dropdown>
-	</div>
 	</div>
 </template>
 
@@ -197,6 +223,7 @@ import { get } from 'lodash';
 
 import {
 	INodeUi,
+	INodeUpdatePropertiesInformation,
 } from '@/Interface';
 import {
 	NodeHelpers,
@@ -209,7 +236,12 @@ import {
 } from 'n8n-workflow';
 
 import CodeEdit from '@/components/CodeEdit.vue';
+import CredentialsSelect from '@/components/CredentialsSelect.vue';
 import ExpressionEdit from '@/components/ExpressionEdit.vue';
+import NodeCredentials from '@/components/NodeCredentials.vue';
+import ScopesNotice from '@/components/ScopesNotice.vue';
+import ParameterOptions from '@/components/ParameterOptions.vue';
+import ParameterIssues from '@/components/ParameterIssues.vue';
 // @ts-ignore
 import PrismEditor from 'vue-prism-editor';
 import TextEdit from '@/components/TextEdit.vue';
@@ -220,6 +252,7 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
 import { CUSTOM_API_CALL_KEY } from '@/constants';
+import { mapGetters } from 'vuex';
 
 export default mixins(
 	externalHooks,
@@ -232,7 +265,12 @@ export default mixins(
 		components: {
 			CodeEdit,
 			ExpressionEdit,
+			NodeCredentials,
+			CredentialsSelect,
 			PrismEditor,
+			ScopesNotice,
+			ParameterOptions,
+			ParameterIssues,
 			TextEdit,
 		},
 		props: [
@@ -259,6 +297,7 @@ export default mixins(
 				textEditDialogVisible: false,
 				tempValue: '', //  el-date-picker and el-input does not seem to work without v-model so add one
 				CUSTOM_API_CALL_KEY,
+				activeCredentialType: '',
 				dateTimePickerOptions: {
 					shortcuts: [
 						{
@@ -305,6 +344,7 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapGetters('credentials', ['allCredentialTypes']),
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -375,6 +415,13 @@ export default mixins(
 					returnValue = this.expressionValueComputed;
 				}
 
+				if (this.parameter.type === 'credentialsSelect') {
+					const credType = this.$store.getters['credentials/getCredentialTypeByName'](this.value);
+					if (credType) {
+						returnValue = credType.displayName;
+					}
+				}
+
 				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
 					// Convert the value to rgba that el-color-picker can display it correctly
 					const bigint = parseInt(returnValue.slice(1), 16);
@@ -473,7 +520,17 @@ export default mixins(
 
 				const issues = NodeHelpers.getParameterIssues(this.parameter, this.node.parameters, newPath.join('.'), this.node);
 
-				if (['options', 'multiOptions'].includes(this.parameter.type) && this.remoteParameterOptionsLoading === false && this.remoteParameterOptionsLoadingIssues === null) {
+				if (this.parameter.type === 'credentialsSelect' && this.displayValue === '') {
+					issues.parameters = issues.parameters || {};
+
+					const issue = this.$locale.baseText('parameterInput.selectACredentialTypeFromTheDropdown');
+
+					issues.parameters[this.parameter.name] = [issue];
+				} else if (
+					['options', 'multiOptions'].includes(this.parameter.type) &&
+					this.remoteParameterOptionsLoading === false &&
+					this.remoteParameterOptionsLoadingIssues === null
+				) {
 					// Check if the value resolves to a valid option
 					// Currently it only displays an error in the node itself in
 					// case the value is not valid. The workflow can still be executed
@@ -497,11 +554,12 @@ export default mixins(
 								issues.parameters = {};
 							}
 
-							if (this.isHttpRequestNodeV2(this.node)) {
-								issues.parameters[this.parameter.name] = ['Select a credential type from the dropdown'];
-							} else {
-								issues.parameters[this.parameter.name] = [`The value "${checkValue}" is not supported!`];
-							}
+							const issue = this.$locale.baseText(
+								'parameterInput.theValueIsNotSupported',
+								{ interpolate: { checkValue } },
+							);
+
+							issues.parameters[this.parameter.name] = [issue];
 						}
 					}
 				} else if (this.remoteParameterOptionsLoadingIssues !== null) {
@@ -568,6 +626,9 @@ export default mixins(
 				const styles = {
 					width: '100%',
 				};
+				if (this.parameter.type === 'credentialsSelect') {
+					return styles;
+				}
 				if (this.displayOptionsComputed === true) {
 					deductWidth += 25;
 				}
@@ -594,6 +655,17 @@ export default mixins(
 			},
 		},
 		methods: {
+			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
+				// Update the values on the node
+				this.$store.commit('updateNodeProperties', updateInformation);
+
+				const node = this.$store.getters.getNodeByName(updateInformation.name);
+
+				// Update the issues
+				this.updateNodeCredentialIssues(node);
+
+				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
+			},
 			/**
 			 * Check whether a param value must be skipped when collecting node param issues for validation.
 			 */
@@ -752,6 +824,10 @@ export default mixins(
 				this.$emit('textInput', parameterData);
 			},
 			valueChanged (value: string[] | string | number | boolean | Date | null) {
+				if (this.parameter.name === 'nodeCredentialType') {
+					this.activeCredentialType = value as string;
+				}
+
 				if (value instanceof Date) {
 					value = value.toISOString();
 				}
@@ -805,6 +881,10 @@ export default mixins(
 				this.nodeName = this.node.name;
 			}
 
+			if (this.node && this.node.parameters.authentication === 'predefinedCredentialType') {
+				this.activeCredentialType = this.node.parameters.nodeCredentialType as string;
+			}
+
 			if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && this.displayValue !== null && this.displayValue.toString().charAt(0) !== '#') {
 				const newValue = this.rgbaToHex(this.displayValue as string);
 				if (newValue !== null) {
@@ -871,20 +951,6 @@ export default mixins(
 	display: inline-block;
 }
 
-.parameter-options {
-	width: 25px;
-	text-align: right;
-	float: right;
-}
-
-.parameter-issues {
-	width: 20px;
-	text-align: right;
-	float: right;
-	color: #ff8080;
-	font-size: var(--font-size-s);
-}
-
 ::v-deep .color-input {
 	display: flex;
 
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index c7714e8e3f657..bfb5d6d49a6a3 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -131,8 +131,6 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			indexToShowSlotAt (): number {
-				if (this.isHttpRequestNodeV2(this.node)) return 2;
-
 				if (this.node.type === WEBHOOK_NODE_TYPE) return 1;
 
 				return 0;
@@ -285,11 +283,6 @@ export default mixins(
 
 <style lang="scss">
 .parameter-input-list-wrapper {
-
-	div:first-child > .node-credentials {
-		padding-top: var(--spacing-xs);
-	}
-
 	.delete-option {
 		display: none;
 		position: absolute;
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
new file mode 100644
index 0000000000000..380da2d1a1cbe
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -0,0 +1,30 @@
+<template>
+	<div :class="$style['parameter-issues']" v-if="issues.length">
+		<n8n-tooltip placement="top" >
+			<div slot="content" v-html="`${$locale.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div>
+			<font-awesome-icon icon="exclamation-triangle" />
+		</n8n-tooltip>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'ParameterIssues',
+	props: [
+		'issues',
+	],
+});
+</script>
+
+<style module lang="scss">
+.parameter-issues {
+	width: 20px;
+	text-align: right;
+	float: right;
+	color: #ff8080;
+	font-size: var(--font-size-s);
+	padding-left: var(--spacing-4xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
new file mode 100644
index 0000000000000..3c6ad0110dbec
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -0,0 +1,68 @@
+<template>
+	<div :class="$style['parameter-options']">
+		<el-dropdown
+			trigger="click"
+			@command="(opt) => $emit('optionSelected', opt)"
+			size="mini"
+		>
+			<span class="el-dropdown-link">
+				<font-awesome-icon
+					icon="cogs"
+					class="reset-icon clickable"
+					:title="$locale.baseText('parameterInput.parameterOptions')"
+				/>
+			</span>
+			<el-dropdown-menu slot="dropdown">
+				<el-dropdown-item
+					v-if="parameter.noDataExpression !== true && !isValueExpression"
+					command="addExpression"
+				>
+					{{ $locale.baseText('parameterInput.addExpression') }}
+				</el-dropdown-item>
+				<el-dropdown-item
+					v-if="parameter.noDataExpression !== true && isValueExpression"
+					command="removeExpression"
+				>
+					{{ $locale.baseText('parameterInput.removeExpression') }}
+				</el-dropdown-item>
+				<el-dropdown-item
+					v-if="hasRemoteMethod"
+					command="refreshOptions"
+				>
+					{{ $locale.baseText('parameterInput.refreshList') }}
+				</el-dropdown-item>
+				<el-dropdown-item
+					command="resetValue"
+					:disabled="isDefault"
+					divided
+				>
+					{{ $locale.baseText('parameterInput.resetValue') }}
+				</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'ParameterOptions',
+	props: [
+		'displayOptionsComputed',
+		'optionSelected',
+		'parameter',
+		'isValueExpression',
+		'isDefault',
+		'hasRemoteMethod',
+	],
+});
+</script>
+
+<style module lang="scss">
+.parameter-options {
+	width: 25px;
+	text-align: right;
+	float: right;
+}
+</style>
diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue
new file mode 100644
index 0000000000000..739ee8aa3af2d
--- /dev/null
+++ b/packages/editor-ui/src/components/ScopesNotice.vue
@@ -0,0 +1,55 @@
+<template>
+	<n8n-notice
+		:content="scopesShortContent"
+		:fullContent="scopesFullContent"
+	/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+
+export default Vue.extend({
+	name: 'ScopesNotice',
+	props: [
+		'activeCredentialType',
+		'scopes',
+	],
+	computed: {
+		...mapGetters('credentials', ['getCredentialTypeByName']),
+		scopesShortContent (): string {
+			return this.$locale.baseText(
+				'nodeSettings.scopes.notice',
+				{
+					adjustToNumber: this.scopes.length,
+					interpolate: {
+						activeCredential: this.shortCredentialDisplayName,
+					},
+				},
+			);
+		},
+		scopesFullContent (): string {
+			return this.$locale.baseText(
+				'nodeSettings.scopes.expandedNoticeWithScopes',
+				{
+					adjustToNumber: this.scopes.length,
+					interpolate: {
+						activeCredential: this.shortCredentialDisplayName,
+						scopes: this.scopes.map(
+							(s: string) => s.includes('/') ? s.split('/').pop() : s,
+						).join('<br>'),
+					},
+				},
+			);
+		},
+		shortCredentialDisplayName (): string {
+			const oauth1Api = this.$locale.baseText('generic.oauth1Api');
+			const oauth2Api = this.$locale.baseText('generic.oauth2Api');
+
+			return this.getCredentialTypeByName(this.activeCredentialType).displayName
+				.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
+				.trim();
+		},
+	},
+});
+</script>
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 1b93603fe4211..b51dacd9790db 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -1,5 +1,4 @@
 import {
-	HTTP_REQUEST_NODE_TYPE,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 	CUSTOM_API_CALL_KEY,
 } from '@/constants';
@@ -44,8 +43,8 @@ export const nodeHelpers = mixins(
 			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
 		},
 		methods: {
-			isHttpRequestNodeV2 (node: INodeUi): boolean {
-				return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2;
+			hasProxyAuth (node: INodeUi): boolean {
+				return Object.keys(node.parameters).includes('nodeCredentialType');
 			},
 
 			isCustomApiCallSelected (nodeValues: INodeParameters): boolean {
@@ -243,8 +242,8 @@ export const nodeHelpers = mixins(
 				} = node.parameters as HttpRequestNode.V2.AuthParams;
 
 				if (
-					this.isHttpRequestNodeV2(node) &&
 					authentication === 'genericCredentialType' &&
+					genericAuthType !== '' &&
 					selectedCredsAreUnusable(node, genericAuthType)
 				) {
 					const credential = this.getCredentialTypeByName(genericAuthType);
@@ -252,8 +251,8 @@ export const nodeHelpers = mixins(
 				}
 
 				if (
-					this.isHttpRequestNodeV2(node) &&
-					authentication === 'existingCredentialType' &&
+					this.hasProxyAuth(node) &&
+					authentication === 'predefinedCredentialType' &&
 					nodeCredentialType !== '' &&
 					node.credentials !== undefined
 				) {
@@ -266,8 +265,8 @@ export const nodeHelpers = mixins(
 				}
 
 				if (
-					this.isHttpRequestNodeV2(node) &&
-					authentication === 'existingCredentialType' &&
+					this.hasProxyAuth(node) &&
+					authentication === 'predefinedCredentialType' &&
 					nodeCredentialType !== '' &&
 					selectedCredsAreUnusable(node, nodeCredentialType)
 				) {
@@ -501,7 +500,7 @@ function selectedCredsDoNotExist(
 declare namespace HttpRequestNode {
 	namespace V2 {
 		type AuthParams = {
-			authentication: 'none' | 'genericCredentialType' | 'existingCredentialType';
+			authentication: 'none' | 'genericCredentialType' | 'predefinedCredentialType';
 			genericAuthType: string;
 			nodeCredentialType: string;
 		};
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 0e86843cc1da0..5608eafccfe5b 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -330,7 +330,7 @@ export const workflowHelpers = mixins(
 					if (node.credentials !== undefined && nodeType.credentials !== undefined) {
 						const saveCredenetials: INodeCredentials = {};
 						for (const nodeCredentialTypeName of Object.keys(node.credentials)) {
-							if (this.isHttpRequestNodeV2(node)) {
+							if (this.hasProxyAuth(node)) {
 								saveCredenetials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName];
 								continue;
 							}
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index 059d1f432243f..b4264e0209e15 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -138,7 +138,10 @@ const module: Module<ICredentialsState, IRootState> = {
 					return [];
 				}
 
-				const { default: scopeDefault } = scopeProperty;
+				let { default: scopeDefault } = scopeProperty;
+
+				// disregard expressions for display
+				scopeDefault = scopeDefault.replace(/^=/, '').replace(/\{\{.*\}\}/, '');
 
 				if (/ /.test(scopeDefault)) return scopeDefault.split(' ');
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 3bcd4b5689e74..fc5f9a42ca564 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -242,6 +242,8 @@
 	"forgotPassword.returnToSignIn": "Back to sign in",
 	"forgotPassword.sendingEmailError": "Problem sending email",
 	"forgotPassword.smtpErrorContactAdministrator": "Please contact your administrator (problem with your SMTP setup)",
+	"generic.oauth1Api": "OAuth1 API",
+	"generic.oauth2Api": "OAuth2 API",
 	"genericHelpers.loading": "Loading",
 	"genericHelpers.min": "min",
 	"genericHelpers.sec": "sec",
@@ -403,8 +405,6 @@
 	"nodeSettings.nodeDescription": "Node Description",
 	"nodeSettings.notes.description": "Optional note to save with the node",
 	"nodeSettings.notes.displayName": "Notes",
-	"nodeSettings.oauth1Api": "OAuth1 API",
-	"nodeSettings.oauth2Api": "OAuth2 API",
 	"nodeSettings.notesInFlow.description": "If active, the note above will display in the flow as a subtitle",
 	"nodeSettings.notesInFlow.displayName": "Display note in flow?",
 	"nodeSettings.parameters": "Parameters",
@@ -506,6 +506,8 @@
 	"parameterInput.resetValue": "Reset Value",
 	"parameterInput.select": "Select",
 	"parameterInput.selectDateAndTime": "Select date and time",
+	"parameterInput.selectACredentialTypeFromTheDropdown": "Select a credential type from the dropdown",
+	"parameterInput.theValueIsNotSupported": "The value \"{checkValue}\" is not supported!",
 	"parameterInputExpanded.openDocs": "Open docs",
 	"parameterInputExpanded.thisFieldIsRequired": "This field is required",
 	"parameterInputList.delete": "Delete",
diff --git a/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts b/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
index 16697e0f8efd1..95800f55765c9 100644
--- a/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
@@ -8,6 +8,7 @@ export class HttpBasicAuth implements ICredentialType {
 	name = 'httpBasicAuth';
 	displayName = 'Basic Auth';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	icon = 'node:n8n-nodes-base.httpRequest';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts b/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
index 5c24cfa07a9d1..2133202032be1 100644
--- a/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
@@ -8,6 +8,7 @@ export class HttpDigestAuth implements ICredentialType {
 	name = 'httpDigestAuth';
 	displayName = 'Digest Auth';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	icon = 'node:n8n-nodes-base.httpRequest';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts b/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
index 9ac6d4b38b14c..87f7829731517 100644
--- a/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
@@ -9,6 +9,7 @@ export class HttpHeaderAuth implements ICredentialType {
 	name = 'httpHeaderAuth';
 	displayName = 'Header Auth';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	icon = 'node:n8n-nodes-base.httpRequest';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts b/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
index 79e4c1c6ca535..9679c4abfba8d 100644
--- a/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
@@ -8,6 +8,7 @@ export class HttpQueryAuth implements ICredentialType {
 	name = 'httpQueryAuth';
 	displayName = 'Query Auth';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	icon = 'node:n8n-nodes-base.httpRequest';
 	properties: INodeProperties[] = [
 		{
diff --git a/packages/nodes-base/credentials/OAuth1Api.credentials.ts b/packages/nodes-base/credentials/OAuth1Api.credentials.ts
index bbcb0bce99b60..ca6ce4974ac52 100644
--- a/packages/nodes-base/credentials/OAuth1Api.credentials.ts
+++ b/packages/nodes-base/credentials/OAuth1Api.credentials.ts
@@ -7,6 +7,7 @@ export class OAuth1Api implements ICredentialType {
 	name = 'oAuth1Api';
 	displayName = 'OAuth1 API';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	properties: INodeProperties[] = [
 		{
 			displayName: 'Authorization URL',
diff --git a/packages/nodes-base/credentials/OAuth2Api.credentials.ts b/packages/nodes-base/credentials/OAuth2Api.credentials.ts
index b6c1781e81c36..f68b5fa25c9b9 100644
--- a/packages/nodes-base/credentials/OAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/OAuth2Api.credentials.ts
@@ -8,6 +8,7 @@ export class OAuth2Api implements ICredentialType {
 	name = 'oAuth2Api';
 	displayName = 'OAuth2 API';
 	documentationUrl = 'httpRequest';
+	genericAuth = true;
 	properties: INodeProperties[] = [
 		{
 			displayName: 'Authorization URL',
diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
index bc6a2436f45cd..98913a40ef6d5 100644
--- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
+++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts
@@ -223,6 +223,7 @@ export class HttpRequest implements INodeType {
 			{
 				displayName: 'Authentication',
 				name: 'authentication',
+				noDataExpression: true,
 				type: 'options',
 				required: true,
 				options: [
@@ -231,8 +232,8 @@ export class HttpRequest implements INodeType {
 						value: 'none',
 					},
 					{
-						name: 'Existing Credential Type',
-						value: 'existingCredentialType',
+						name: 'Predefined Credential Type',
+						value: 'predefinedCredentialType',
 						description: 'We\'ve already implemented auth for many services so that you don\'t have to set it up manually',
 					},
 					{
@@ -253,17 +254,19 @@ export class HttpRequest implements INodeType {
 			{
 				displayName: 'Credential Type',
 				name: 'nodeCredentialType',
-				type: 'options',
+				type: 'credentialsSelect',
+				noDataExpression: true,
 				required: true,
-				typeOptions: {
-					loadOptionsMethod: 'getNodeCredentialTypes',
-				},
 				default: '',
-				placeholder: 'None',
+				credentialTypes: [
+					'extends:oAuth2Api',
+					'extends:oAuth1Api',
+					'has:authenticate',
+				],
 				displayOptions: {
 					show: {
 						authentication: [
-							'existingCredentialType',
+							'predefinedCredentialType',
 						],
 						'@version': [
 							2,
@@ -271,45 +274,15 @@ export class HttpRequest implements INodeType {
 					},
 				},
 			},
-			// @TODO expression not resolving, using Notion as example
-			// {
-			// 	displayName: 'Supports Proxy Auth',
-			// 	name: 'supportsProxyAuth',
-			// 	type: 'hidden',
-			// 	default: '={{ $parameter["&authentication"] === "existingCredentialType" }}',
-			// },
 			{
 				displayName: 'Generic Auth Type',
 				name: 'genericAuthType',
-				type: 'options',
+				type: 'credentialsSelect',
 				required: true,
-				options: [
-					{
-						name: 'Basic Auth',
-						value: 'httpBasicAuth',
-					},
-					{
-						name: 'Digest Auth',
-						value: 'httpDigestAuth',
-					},
-					{
-						name: 'Header Auth',
-						value: 'httpHeaderAuth',
-					},
-					{
-						name: 'Query Auth',
-						value: 'httpQueryAuth',
-					},
-					{
-						name: 'OAuth1',
-						value: 'oAuth1Api',
-					},
-					{
-						name: 'OAuth2',
-						value: 'oAuth2Api',
-					},
+				default: '',
+				credentialTypes: [
+					'has:genericAuth',
 				],
-				default: 'httpBasicAuth',
 				displayOptions: {
 					show: {
 						authentication: [
@@ -871,14 +844,6 @@ export class HttpRequest implements INodeType {
 		],
 	};
 
-	methods = {
-		loadOptions: {
-			getNodeCredentialTypes(this: ILoadOptionsFunctions): Promise<INodePropertyOptions[]> {
-				return Promise.resolve(CREDENTIAL_TYPES);
-			},
-		},
-	};
-
 	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
 		const items = this.getInputData();
 
@@ -895,7 +860,7 @@ export class HttpRequest implements INodeType {
 		const responseFormat = this.getNodeParameter('responseFormat', 0) as string;
 
 		try {
-			authentication = this.getNodeParameter('authentication', 0) as 'existingCredentialType' | 'genericCredentialType' | 'none';
+			authentication = this.getNodeParameter('authentication', 0) as 'predefinedCredentialType' | 'genericCredentialType' | 'none';
 		} catch (_) {}
 
 		let httpBasicAuth;
@@ -925,7 +890,7 @@ export class HttpRequest implements INodeType {
 			try {
 				oAuth2Api = await this.getCredentials('oAuth2Api');
 			} catch (_) {}
-		} else if (authentication === 'existingCredentialType') {
+		} else if (authentication === 'predefinedCredentialType') {
 			try {
 				nodeCredentialType = this.getNodeParameter('nodeCredentialType', 0) as string;
 			} catch (_) {}
@@ -1240,7 +1205,7 @@ export class HttpRequest implements INodeType {
 						this.helpers.request(requestOptions),
 					);
 				}
-			} else if (authentication === 'existingCredentialType' && nodeCredentialType) {
+			} else if (authentication === 'predefinedCredentialType' && nodeCredentialType) {
 				// service-specific cred: OAuth1, OAuth2, plain
 				requestPromises.push(
 					this.helpers.requestWithAuthentication.call(this, nodeCredentialType, requestOptions),
@@ -1376,64 +1341,3 @@ export class HttpRequest implements INodeType {
 		return this.prepareOutputData(returnItems);
 	}
 }
-
-const NODES_BASE_ROOT: Readonly<string> = path.resolve(__dirname, '..', '..', '..');
-
-/**
- * Credential types shown as options for `Node Credential Type` parameter.
- */
-const CREDENTIAL_TYPES = getCredPaths().reduce<INodePropertyOptions[]>((acc, credPath) => {
-	const credential = new (getCredClass(credPath))();
-
-	if (!isSupportedNodeCredentialType(credential)) return acc;
-
-	return [
-		...acc,
-		{
-			name: credential.displayName,
-			value: credential.name,
-		},
-	];
-}, []);
-
-function getCredPaths(root = NODES_BASE_ROOT): string[] {
-	const packageJson = require(path.resolve(root, 'package.json'));
-
-	return deduplicate(packageJson.n8n.credentials);
-}
-
-function deduplicate<T>(array: T[]) {
-	return [...new Set(array)];
-}
-
-function getCredClass(credPath: string, root = NODES_BASE_ROOT): { new(): Credential } {
-	const match = credPath.match(/(^dist\/credentials\/(?<credClassName>.*)\.credentials\.js$)/);
-
-	if (!match?.groups) {
-		throw new Error(`Failed to extract credential class name from: ${credPath}`);
-	}
-
-	const fullCredPath = path.resolve(root, credPath);
-
-	return require(fullCredPath)[match.groups.credClassName];
-}
-
-function isGenericAuth(cred: Credential) {
-	return cred.name.startsWith('http') || cred.name.startsWith('oAuth');
-}
-
-function isSupportedNodeCredentialType(cred: Credential) {
-	if (isGenericAuth(cred)) return false;
-
-	if (cred.name === 'notionOAuth2Api') return false; // exists but currently commented out
-
-	if (cred.name.slice(0, -4).endsWith('OAuth')) return true;
-
-	return cred.authenticate !== undefined;
-}
-
-type Credential = {
-	displayName: string;
-	name: string;
-	authenticate?: IAuthenticate;
-};
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index b521bf5b2379d..cf909f255252f 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -276,6 +276,7 @@ export interface ICredentialType {
 	__overwrittenProperties?: string[];
 	authenticate?: IAuthenticate;
 	test?: ICredentialTestRequest;
+	genericAuth?: boolean;
 }
 
 export interface ICredentialTypes {
@@ -831,7 +832,8 @@ export type NodePropertyTypes =
 	| 'multiOptions'
 	| 'number'
 	| 'options'
-	| 'string';
+	| 'string'
+	| 'credentialsSelect';
 
 export type CodeAutocompleteTypes = 'function' | 'functionItem';
 
@@ -888,6 +890,9 @@ export interface INodeProperties {
 	noDataExpression?: boolean;
 	required?: boolean;
 	routing?: INodePropertyRouting;
+	credentialTypes?: Array<
+		'extends:oAuth2Api' | 'extends:oAuth1Api' | 'has:authenticate' | 'has:genericAuth'
+	>;
 }
 export interface INodePropertyOptions {
 	name: string;

From 9389a32be7fd807b51e6d0cd8d7a911045d2514f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Thu, 19 May 2022 14:46:14 +0200
Subject: [PATCH 104/104] Extend metrics for HTTP Request node (#3282)

* :zap: Extend metrics

* :test_tube: Add tests

* :zap: Update param names
---
 .../src/components/NodeCredentials.vue        |  10 +-
 .../src/components/mixins/showMessage.ts      |  27 ++-
 packages/workflow/src/Interfaces.ts           |   6 +-
 packages/workflow/src/TelemetryHelpers.ts     |  91 ++++++++-
 .../workflow/test/TelemetryHelpers.test.ts    | 176 ++++++++++++++++++
 5 files changed, 302 insertions(+), 8 deletions(-)
 create mode 100644 packages/workflow/test/TelemetryHelpers.test.ts

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 623580172bbaf..953a5dc082dc0 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -209,7 +209,15 @@ export default mixins(
 				return;
 			}
 
-			this.$telemetry.track('User selected credential from node modal', { credential_type: credentialType, workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track(
+				'User selected credential from node modal',
+				{
+					credential_type: credentialType,
+					node_type: this.node.type,
+					...(this.isProxyAuth ? { is_service_specific: true } : {}),
+					workflow_id: this.$store.getters.workflowId,
+				},
+			);
 
 			const selectedCredentials = this.$store.getters['credentials/getCredentialById'](credentialId);
 			const oldCredentials = this.node.credentials && this.node.credentials[credentialType] ? this.node.credentials[credentialType] : {};
diff --git a/packages/editor-ui/src/components/mixins/showMessage.ts b/packages/editor-ui/src/components/mixins/showMessage.ts
index d5d50b4af0527..e949329d7cc99 100644
--- a/packages/editor-ui/src/components/mixins/showMessage.ts
+++ b/packages/editor-ui/src/components/mixins/showMessage.ts
@@ -27,8 +27,13 @@ export const showMessage = mixins(externalHooks).extend({
 				stickyNotificationQueue.push(notification);
 			}
 
-			if(messageData.type === 'error' && track) {
-				this.$telemetry.track('Instance FE emitted error', { error_title: messageData.title, error_message: messageData.message, workflow_id: this.$store.getters.workflowId });
+			if (messageData.type === 'error' && track) {
+				this.$telemetry.track('Instance FE emitted error', {
+					error_title: messageData.title,
+					error_message: messageData.message,
+					caused_by_credential: this.causedByCredential(messageData.message),
+					workflow_id: this.$store.getters.workflowId,
+				});
 			}
 
 			return notification;
@@ -135,7 +140,14 @@ export const showMessage = mixins(externalHooks).extend({
 				message,
 				errorMessage: error.message,
 			});
-			this.$telemetry.track('Instance FE emitted error', { error_title: title, error_description: message, error_message: error.message, workflow_id: this.$store.getters.workflowId });
+
+			this.$telemetry.track('Instance FE emitted error', {
+				error_title: title,
+				error_description: message,
+				error_message: error.message,
+				caused_by_credential: this.causedByCredential(error.message),
+				workflow_id: this.$store.getters.workflowId,
+			});
 		},
 
 		async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string): Promise<boolean> {
@@ -203,5 +215,14 @@ export const showMessage = mixins(externalHooks).extend({
 				</details>
 			`;
 		},
+
+		/**
+		 * Whether a workflow execution error was caused by a credential issue, as reflected by the error message.
+		 */
+		causedByCredential(message: string | undefined) {
+			if (!message) return false;
+
+			return message.includes('Credentials for') && message.includes('are not set');
+		},
 	},
 });
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index cf909f255252f..4a75a03c2a16e 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1437,9 +1437,13 @@ export interface INodeGraphItem {
 	type: string;
 	resource?: string;
 	operation?: string;
-	domain?: string;
+	domain?: string; // HTTP Request node v1
+	domain_base?: string; // HTTP Request node v2
+	domain_path?: string; // HTTP Request node v2
 	position: [number, number];
 	mode?: string;
+	credential_type?: string; // HTTP Request node v2
+	credential_set?: boolean; // HTTP Request node v2
 }
 
 export interface INodeNameIndex {
diff --git a/packages/workflow/src/TelemetryHelpers.ts b/packages/workflow/src/TelemetryHelpers.ts
index 600e53bb86fce..50af3365b5b53 100644
--- a/packages/workflow/src/TelemetryHelpers.ts
+++ b/packages/workflow/src/TelemetryHelpers.ts
@@ -60,6 +60,74 @@ function areOverlapping(
 	);
 }
 
+const URL_PARTS_REGEX = /(?<protocolPlusDomain>.*?\..*?)(?<pathnamePlusQs>\/.*)/;
+
+export function getDomainBase(raw: string, urlParts = URL_PARTS_REGEX): string {
+	try {
+		const url = new URL(raw);
+
+		return [url.protocol, url.hostname].join('//');
+	} catch (_) {
+		const match = urlParts.exec(raw);
+
+		if (!match?.groups?.protocolPlusDomain) return '';
+
+		return match.groups.protocolPlusDomain;
+	}
+}
+
+function isSensitive(segment: string) {
+	return /%40/.test(segment) || /^\d+$/.test(segment) || /^[0-9A-F]{8}/i.test(segment);
+}
+
+export const ANONYMIZATION_CHARACTER = '*';
+
+function sanitizeRoute(raw: string, check = isSensitive, char = ANONYMIZATION_CHARACTER) {
+	return raw
+		.split('/')
+		.map((segment) => (check(segment) ? char.repeat(segment.length) : segment))
+		.join('/');
+}
+
+function sanitizeQuery(raw: string, check = isSensitive, char = ANONYMIZATION_CHARACTER) {
+	return raw
+		.split('&')
+		.map((segment) => {
+			const [key, value] = segment.split('=');
+			return [key, check(value) ? char.repeat(value.length) : value].join('=');
+		})
+		.join('&');
+}
+
+function sanitizeUrl(raw: string) {
+	if (/\?/.test(raw)) {
+		const [route, query] = raw.split('?');
+
+		return [sanitizeRoute(route), sanitizeQuery(query)].join('?');
+	}
+
+	return sanitizeRoute(raw);
+}
+
+/**
+ * Return pathname plus query string from URL, anonymizing IDs in route and query params.
+ */
+export function getDomainPath(raw: string, urlParts = URL_PARTS_REGEX): string {
+	try {
+		const url = new URL(raw);
+
+		if (!url.hostname) throw new Error('Malformed URL');
+
+		return sanitizeUrl(url.pathname + url.search);
+	} catch (_) {
+		const match = urlParts.exec(raw);
+
+		if (!match?.groups?.pathnamePlusQs) return '';
+
+		return sanitizeUrl(match.groups.pathnamePlusQs);
+	}
+}
+
 export function generateNodesGraph(
 	workflow: IWorkflowBase,
 	nodeTypes: INodeTypes,
@@ -100,12 +168,29 @@ export function generateNodesGraph(
 				position: node.position,
 			};
 
-			if (node.type === 'n8n-nodes-base.httpRequest') {
+			if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 1) {
 				try {
 					nodeItem.domain = new URL(node.parameters.url as string).hostname;
-				} catch (e) {
-					nodeItem.domain = node.parameters.url as string;
+				} catch (_) {
+					nodeItem.domain = getDomainBase(node.parameters.url as string);
 				}
+			} else if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 2) {
+				const { authentication } = node.parameters as { authentication: string };
+
+				nodeItem.credential_type = {
+					none: 'none',
+					genericCredentialType: node.parameters.genericAuthType as string,
+					existingCredentialType: node.parameters.nodeCredentialType as string,
+				}[authentication];
+
+				nodeItem.credential_set = node.credentials
+					? Object.keys(node.credentials).length > 0
+					: false;
+
+				const { url } = node.parameters as { url: string };
+
+				nodeItem.domain_base = getDomainBase(url);
+				nodeItem.domain_path = getDomainPath(url);
 			} else {
 				const nodeType = nodeTypes.getByNameAndVersion(node.type);
 
diff --git a/packages/workflow/test/TelemetryHelpers.test.ts b/packages/workflow/test/TelemetryHelpers.test.ts
new file mode 100644
index 0000000000000..4adc7d7cf4e90
--- /dev/null
+++ b/packages/workflow/test/TelemetryHelpers.test.ts
@@ -0,0 +1,176 @@
+import { v5 as uuidv5, v3 as uuidv3, v4 as uuidv4, v1 as uuidv1 } from 'uuid';
+import {
+	ANONYMIZATION_CHARACTER as CHAR,
+	getDomainBase,
+	getDomainPath,
+} from '../src/TelemetryHelpers';
+
+describe('getDomainBase should return protocol plus domain', () => {
+	test('in valid URLs', () => {
+		for (const url of validUrls(numericId)) {
+			const { full, protocolPlusDomain } = url;
+			expect(getDomainBase(full)).toBe(protocolPlusDomain);
+		}
+	});
+
+	test('in malformed URLs', () => {
+		for (const url of malformedUrls(numericId)) {
+			const { full, protocolPlusDomain } = url;
+			expect(getDomainBase(full)).toBe(protocolPlusDomain);
+		}
+	});
+});
+
+describe('getDomainPath should return pathname plus query string', () => {
+	describe('anonymizing numeric IDs', () => {
+		test('in valid URLs', () => {
+			for (const url of validUrls(numericId)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+
+		test('in malformed URLs', () => {
+			for (const url of malformedUrls(numericId)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+	});
+
+	describe('anonymizing UUIDs', () => {
+		test('in valid URLs', () => {
+			for (const url of uuidUrls(validUrls)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+
+		test('in malformed URLs', () => {
+			for (const url of uuidUrls(malformedUrls)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+	});
+
+	describe('anonymizing emails', () => {
+		test('in valid URLs', () => {
+			for (const url of validUrls(email)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+
+		test('in malformed URLs', () => {
+			for (const url of malformedUrls(email)) {
+				const { full, pathnamePlusQs } = url;
+				expect(getDomainPath(full)).toBe(pathnamePlusQs);
+			}
+		});
+	});
+});
+
+function validUrls(idMaker: typeof numericId | typeof email, char = CHAR) {
+	const firstId = idMaker();
+	const secondId = idMaker();
+	const firstIdObscured = char.repeat(firstId.length);
+	const secondIdObscured = char.repeat(secondId.length);
+
+	return [
+		{
+			full: `https://test.com/api/v1/users/${firstId}`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}`,
+		},
+		{
+			full: `https://test.com/api/v1/users/${firstId}/`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/`,
+		},
+		{
+			full: `https://test.com/api/v1/users/${firstId}/posts/${secondId}`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/posts/${secondIdObscured}`,
+		},
+		{
+			full: `https://test.com/api/v1/users/${firstId}/posts/${secondId}/`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/posts/${secondIdObscured}/`,
+		},
+		{
+			full: `https://test.com/api/v1/users/${firstId}/posts/${secondId}/`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/posts/${secondIdObscured}/`,
+		},
+		{
+			full: `https://test.com/api/v1/users?id=${firstId}`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users?id=${firstIdObscured}`,
+		},
+		{
+			full: `https://test.com/api/v1/users?id=${firstId}&post=${secondId}`,
+			protocolPlusDomain: 'https://test.com',
+			pathnamePlusQs: `/api/v1/users?id=${firstIdObscured}&post=${secondIdObscured}`,
+		},
+	];
+}
+
+function malformedUrls(idMaker: typeof numericId | typeof email, char = CHAR) {
+	const firstId = idMaker();
+	const secondId = idMaker();
+	const firstIdObscured = char.repeat(firstId.length);
+	const secondIdObscured = char.repeat(secondId.length);
+
+	return [
+		{
+			full: `test.com/api/v1/users/${firstId}/posts/${secondId}/`,
+			protocolPlusDomain: 'test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/posts/${secondIdObscured}/`,
+		},
+		{
+			full: `htp://test.com/api/v1/users/${firstId}/posts/${secondId}/`,
+			protocolPlusDomain: 'htp://test.com',
+			pathnamePlusQs: `/api/v1/users/${firstIdObscured}/posts/${secondIdObscured}/`,
+		},
+		{
+			full: `test.com/api/v1/users?id=${firstId}`,
+			protocolPlusDomain: 'test.com',
+			pathnamePlusQs: `/api/v1/users?id=${firstIdObscured}`,
+		},
+		{
+			full: `test.com/api/v1/users?id=${firstId}&post=${secondId}`,
+			protocolPlusDomain: 'test.com',
+			pathnamePlusQs: `/api/v1/users?id=${firstIdObscured}&post=${secondIdObscured}`,
+		},
+	];
+}
+
+const email = () => encodeURIComponent('test@test.com');
+
+function uuidUrls(
+	urlsMaker: typeof validUrls | typeof malformedUrls,
+	baseName = 'test',
+	namespaceUuid = uuidv4(),
+) {
+	return [
+		...urlsMaker(() => uuidv5(baseName, namespaceUuid)),
+		...urlsMaker(uuidv4),
+		...urlsMaker(() => uuidv3(baseName, namespaceUuid)),
+		...urlsMaker(uuidv1),
+	];
+}
+
+function digit() {
+	return Math.floor(Math.random() * 10);
+}
+
+function positiveDigit(): number {
+	const d = digit();
+
+	return d === 0 ? positiveDigit() : d;
+}
+
+function numericId(length = positiveDigit()) {
+	return Array.from({ length }, digit).join('');
+}