feat(core): Allow credential reuse on HTTP Request node (#3228)

* ✨ Create controller

* ⚡ Mount controller

* ✏️ Add error messages

* ✨ Create scopes fetcher

* ⚡ Account for non-existent credential type

* 📘 Type scopes request

* ⚡ Adjust error message

* 🧪 Add tests

* ✨ Introduce simple node versioning

* ⚡ Add example how to read version in node-code for custom logic

* 🐛 Fix setting of parameters

* 🐛 Fix another instance where it sets the wrong parameter

* ⚡ Remove unnecessary TOODs

* ✨ Re-version HTTP Request node

* 👕 Satisfy linter

* ⚡ Retrieve node version

* ⏪ Undo Jan's changes to Set node

* 🧪 Fix CI/CD for `/oauth2-credential` tests (#3230)

* 🐛 Fix notice warning missing background color (#3231)

* 🐛 Check for generic auth in node cred types

* ⚡ Refactor credentials dropdown for HTTP Request node (#3222)

* ⚡ Discoverability flow (#3229)

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

* ⚡ Add computed property from versioning branch

* 🐛 Fix cred ref lost and unsaved

* ⚡ Make options consistent with cred type names

* ⚡ Use prop to set component order

* ⚡ Use constant and version

* ⚡ Fix rendering for generic auth creds

* ⚡ Mark as required on first selection

* ⚡ Implement discoverability flow

* ⚡ Mark as required on subsequent selections

* ⚡ Fix marking as required after cred deletion

* ⚡ Refactor to clean up

* ⚡ Detect position automatically

* ⚡ Add i18n to option label

* ⚡ Hide subtitle for custom action

* ⚡ Detect active credential type

* ⚡ Prop drilling to re-render select

* 🔥 Remove unneeded property

* ✏️ Rename arg

* 🔥 Remove unused import

* 🔥 Remove unneeded getters

* 🔥 Remove unused import

* ⚡ Generalize cred component positioning

* ⚡ Set up request

* 🐛 Fix edge case in endpoint

* ⚡ Display scopes alert box

* ⏪ Revert "Generalize cred comp positioning"

This reverts commit 75eea89273b854110fa6d1f96c7c1d78dd3b0731.

* ⚡ Consolidate HTTPRN check

* ⚡ Fix hue percentage to degree

* 🔥 Remove unused import

* 🔥 Remove unused import

* 🔥 Remove unused class

* 🔥 Remove unused import

* 📘 Create type for HTTPRN v2 auth params

* ✏️ Rename check

* 🔥 Remove unused import

* ✏️ Add i18n to `reportUnsetCredential()`

* ⚡ Refactor Alex's spacing changes

* ⚡ Post-merge fixes

* ⚡ Add docs link

* 🔥 Exclude Notion OAuth cred

* ✏️ Update copy

* ✏️ Rename param

* 🎨 Reposition notice and simplify styling

* ✏️ Update copy

* ✏️ Update copy

* ⚡ Hide params during custom action

* ⚡ Show notice if any cred type supported

* 🐛 Prevent scopes text overflow

* 🔥 Remove superfluous check

* ✏️ Break up docstring

* 🎨 Tweak notice styling

* ⚡ Reorder cred param in Webhook node

* ✏️ Shorten cred name in scopes notice

* 🧪 Update Notice snapshots

* 🐛 Fix check when `globalRole` is `undefined`

* ⏪ Revert 3f2c4a6

* ⚡ Apply feedback from Product

* 🧪 Update snapshot

* ⚡ Adjust regex expansion pattern for singular

* 🔥 Remove unused import

* 🔥 Remove logging

* ⚡ Make `somethingElse` key more unique

* ⚡ Move something else to constants

* ⚡ Consolidate notice component

* ⚡ Apply latest feedback

* 🧪 Update tests

* 🧪 Update snapshot

* ✏️ Fix singular version

* 🧪 Finalize tests

* ✏️ Rename constant

* 🧪 Expand tests

* 🔥 Remove `truncate` prop

* 🚚 Move scopes fetching to store

* 🚚 Move method to component

* ⚡ Use constant

* ⚡ Refactor `Notice` component

* 🧪 Update tests

* 🔥 Remove unused keys

* ⚡ Inject custom API call option

* 🔥 Remove unused props

* 🎨 Use `compact` prop

* 🧪 Update snapshots

* 🚚 Move scopes to store

* 🚚 Move `nodeCredentialTypes` to parent

* ✏️ Rename cred types per branding

* 🐛 Clear scopes when none

* ⚡ Add default

* 🚚 Move `newHttpRequestNodeCredentialType` to parent

* 🔥 Remove test data

* ⚡ Separate lines for readability

* ⚡ Change reference from node to node name

* ✏️ Rename i18n keys

* ⚡ Refactor OAuth check

* 🔥 Remove unused key

* 🚚 Move `OAuth1/2 API` to i18n

* ⚡ Refactor `skipCheck`

* ⚡ Add `stopPropagation` and `preventDefault`

* 🚚 Move active credential scopes logic to store

* 🎨 Fix spacing for `NodeWebhooks` component

* ⚡ Implement feedback

* ⚡ Update HTTPRN default and issue copy

* Refactor to use `CredentialsSelect` param (#3304)

* ⚡ Refactor into cred type param

* ⚡ Componentize scopes notice

* 🔥 Remove unused data

* 🔥 Remove unused `loadOptions`

* ⚡ Componentize `NodeCredentialType`

* 🐛 Fix param validation

* 🔥 Remove dup methods

* ⚡ Refactor all references to `isHttpRequestNodeV2`

* 🎨 Fix styling

* 🔥 Remove unused import

* 🔥 Remove unused properties

* 🎨 Fix spacing for Pipedrive Trigger node

* 🎨 Undo Webhook node styling change

* 🔥 Remove unused style

* ⚡ Cover `httpHeaderAuth` edge case

* 🐛 Fix `this.node` reference

* 🚚 Rename to `credentialsSelect`

* 🐛 Fix mistaken renaming

* ⚡ Set one attribute per line

* ⚡ Move condition to instantiation site

* 🚚 Rename prop

* ⚡ Refactor away `prepareScopesNotice`

* ✏️ Rename i18n keys

* ✏️ Update i18n calls

* ✏️ Add more i18n keys

* 🔥 Remove unused props

* ✏️ Add explanatory comment

* ⚡ Adjust check in `hasProxyAuth`

* ⚡ Refactor `credentialSelected` from prop to event

* ⚡ Eventify `valueChanged`, `setFocus`, `onBlur`

* ⚡ Eventify `optionSelected`

* ⚡ Add `noDataExpression`

* 🔥 Remove logging

* 🔥 Remove URL from scopes

* ⚡ Disregard expressions for display

* 🎨 Use CSS modules

* 📘 Tigthen interface

* 🐛 Fix generic auth display

* 🐛 Fix generic auth validation

* 📘 Loosen type

* 🚚 Move event params to end

* ⚡ Generalize reference

* ⚡ Refactor generic auth as `credentialsSelect` param

* ⏪ Restore check for `httpHeaderAuth `

* 🚚 Rename `existing` to `predefined`

* Extend metrics for HTTP Request node (#3282)

* ⚡ Extend metrics

* 🧪 Add tests

* ⚡ Update param names

Co-authored-by: Alex Grozav <alex@grozav.com>

* ⚡ Update check per new branch

* ⚡ Include generic auth check

* ⚡ Adjust telemetry (#3359)

* ⚡ Filter credential types by label

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

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

@@ -104,12 +104,44 @@
 			: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"
 			:size="inputSize"
 			filterable
 			:value="displayValue"
+			:placeholder="parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')"
 			:loading="remoteParameterOptionsLoading"
 			:disabled="isReadOnly || remoteParameterOptionsLoading"
 			:title="displayTitle"
@@ -168,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="!parameter.noDataExpression || hasRemoteMethod">{{ $locale.baseText('parameterInput.resetValue') }}</el-dropdown-item>
-				</el-dropdown-menu>
-			</el-dropdown>
-	</div>
 	</div>
 </template>
 
@@ -196,6 +223,7 @@ import { get } from 'lodash';
 
 import {
 	INodeUi,
+	INodeUpdatePropertiesInformation,
 } from '@/Interface';
 import {
 	NodeHelpers,
@@ -208,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';
@@ -218,6 +251,8 @@ import { showMessage } from '@/components/mixins/showMessage';
 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,
@@ -230,7 +265,12 @@ export default mixins(
 		components: {
 			CodeEdit,
 			ExpressionEdit,
+			NodeCredentials,
+			CredentialsSelect,
 			PrismEditor,
+			ScopesNotice,
+			ParameterOptions,
+			ParameterIssues,
 			TextEdit,
 		},
 		props: [
@@ -257,6 +297,8 @@ 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
+				CUSTOM_API_CALL_KEY,
+				activeCredentialType: '',
 				dateTimePickerOptions: {
 					shortcuts: [
 						{
@@ -303,6 +345,7 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapGetters('credentials', ['allCredentialTypes']),
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -373,6 +416,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);
@@ -471,7 +521,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
@@ -479,18 +539,28 @@ 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) {
+						if (checkValue !== undefined && checkValue.includes(CUSTOM_API_CALL_KEY)) continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
 							}
-							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) {
@@ -557,6 +627,9 @@ export default mixins(
 				const styles = {
 					width: '100%',
 				};
+				if (this.parameter.type === 'credentialsSelect') {
+					return styles;
+				}
 				if (this.displayOptionsComputed === true) {
 					deductWidth += 25;
 				}
@@ -583,6 +656,23 @@ 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.
+			 */
+			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)
@@ -737,6 +827,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();
 				}
@@ -790,6 +884,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) {
@@ -856,20 +954,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;