feat(editor): Simplify NDV by moving authentication details to credentials modal (#5067)

* ⚡ Removing authentication parameter from NDV
* ⚡ Added auth type selector to credentials modal
* 🔨 Extracting reusable logic to util functions
* ⚡ Updating credentials position, adding label for radio buttons
* ⚡ Using first node credentials for nodes with single auth options and hiding auth selector UI in that case
* ⚡ Fixing credentials modal when opened from credentials page
* ⚡ Showing all available credentials in NDV credentials dropdown
* ⚡ Updating node credentials dropdown component to show credentials description. Disabling `Credentials of type not found` error in node
* ⚡ Moving auth related fields from NDV to credentials modal. Added support for multiple auth fileds
* ⚡ Moving NDV fields that authentication depends on to credentials modal
* ⚡ Keeping old auth/credentials UI in NDV for HTTP Request and Webhook nodes. Pre-populating credential type for HTTP request node when selected from 'app action' menu
* 💄 Use old label and field position for nodes that use old credentials UI in NDV
* ⚡ Implementing more generic way to find node's auth fileds
* 📚 Adding comments on parameter hiding logic
* ⚡ Fixing node auth options logic for multiple auth fields
* 👕 Fixing lint errors
* 💄 Addressing design review comments
* ⚡ Not selecting first auth option when opening new credential dialog
* ⚡ Using default credentials name and icon if authentication type is not selected
* ⚡ Updating credential data when auth type is changed
* ⚡ Setting new credentials type for HTTP Request and Webhook nodes
* ⚡ Setting nodes with access when changing auth type
* 👕 Fixing lint error
* ⚡ Updating active node auth type from credentials modal
* ⚡ Syncronizing credentials modal and dropdown
* 👕 Fixing linter error
* ⚡ Handling credential dropdown UI for multiple credentials
* 👕 Removing unused imports
* ⚡ Handling auth selection when default auth type is the first option
* ⚡ Updating credentials change listening logic
* ⚡ Resetting credential data when deleting a credential, disabling 'Details' and 'Sharing' tabs if auth type is not selected
* 🐛 Skipping credentials type check when showing mixed credentials in the dropdown and switching credentials type
* ⚡ Showing credential modal tabs for saved credentials
* ⚡ Preventing renaming credentials when no auth type is selected
* 🐛 Fixing credentials modal when opened from credentials page
* ⚡ Keeping auth radio buttons selected when switching tabs
* ✅ Adding initial batch of credentials NDV tests
* ⚡ Updating node auth filed value when new credential type is selected
* ⚡ Using all available credential types for current node to sync credential dropdown with modal
* ⚡ Sorting mixed credentials by date, simplifying credential dropdown option logic
* 🔨 Extracting some reusable logic to utils
* ⚡ Improving required vs optional credentials detection and using it to show auth radio buttons
* 👕 Fixing lint errors
* ✅ Adding more credentials tests
* ⚡ Filtering credential options based on authentication type
* 🔨 Refactoring credentials and auth utils
* ⚡ Updated handling of auth options in credentials modal to work with new logic
* 🔨 Getting the terminology in line
* 📚 Removing leftover comment
* ⚡ Updating node auth filed detection logic to account for different edge-cases
* ⚡ Adding Wait node as an exception for new UI
* ⚡ Updating NDV display when auth type changes
* ⚡ Updating default credentials name when auth type changes
* ⚡ Hiding auth settings after credentials are saved
* ⚡ Always showing credentials modal menu tabs
* ⚡ Improving main auth field detection logic so it doesn't account for authentication fields which can have `none` value
* ⚡ Restoring accidentally deleted not existing credential issue logic
* ⚡ Updating other nodes when deleted credentials have been updated
* ⚡ Using filtered auth type list to show or hide radio buttons section in credentials modal
* 👕 Addressing lint error
* 👌 Addressing PR review feedback
* 👕 Fixing lint issues
* ⚡ Updating main auth filed detection logic so it checks full dependency path to determine if the field is required or optional
* 👌 Addressing the rest of PR feedback
* ✅ Updating credential tests
* ⚡ Resetting credential data on authentication type change
* ⚡ Created AuthTypeSelector component
* 👌 Addressing PR comments
* ⚡ Not resetting overwritten credential properties when changing auth type
* ⚡ Hiding auth selector section if there are no options to show

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

@@ -1,6 +1,11 @@
 <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"
+			:class="{ indent }"
+			data-test-id="parameter-item"
+		>
 			<slot v-if="indexToShowSlotAt === index" />
 
 			<div
@@ -126,6 +131,8 @@ import { Component, PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { isAuthRelatedParameter, getNodeAuthFields, getMainAuthField } from '@/utils';
+import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
 
 export default mixins(workflowHelpers).extend({
 	name: 'ParameterInputList',
@@ -180,6 +187,12 @@ export default mixins(workflowHelpers).extend({
 			}
 			return '';
 		},
+		nodeType(): INodeTypeDescription | null {
+			if (this.node) {
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+			}
+			return null;
+		},
 		filteredParameters(): INodeProperties[] {
 			return this.parameters.filter((parameter: INodeProperties) =>
 				this.displayNodeParameter(parameter),
@@ -191,18 +204,27 @@ export default mixins(workflowHelpers).extend({
 		node(): INodeUi | null {
 			return this.ndvStore.activeNode;
 		},
+		nodeAuthFields(): INodeProperties[] {
+			return getNodeAuthFields(this.nodeType);
+		},
 		indexToShowSlotAt(): number {
 			let index = 0;
+			// For nodes that use old credentials UI, keep credentials below authentication field in NDV
+			// otherwise credentials will use auth filed position since the auth field is moved to credentials modal
+			const fieldOffset = KEEP_AUTH_IN_NDV_FOR_NODES.includes(this.nodeType?.name || '') ? 1 : 0;
 			const credentialsDependencies = this.getCredentialsDependencies();
 
 			this.filteredParameters.forEach((prop, propIndex) => {
 				if (credentialsDependencies.has(prop.name)) {
-					index = propIndex + 1;
+					index = propIndex + fieldOffset;
 				}
 			});
 
 			return index < this.filteredParameters.length ? index : this.filteredParameters.length - 1;
 		},
+		mainNodeAuthField(): INodeProperties | null {
+			return getMainAuthField(this.nodeType || undefined);
+		},
 	},
 	methods: {
 		onParameterBlur(parameterName: string) {
@@ -273,7 +295,6 @@ export default mixins(workflowHelpers).extend({
 
 			return !MUST_REMAIN_VISIBLE.includes(parameter.name);
 		},
-
 		displayNodeParameter(parameter: INodeProperties): boolean {
 			if (parameter.type === 'hidden') {
 				return false;
@@ -286,6 +307,16 @@ export default mixins(workflowHelpers).extend({
 				return false;
 			}
 
+			// Hide authentication related fields since it will now be part of credentials modal
+			if (
+				!KEEP_AUTH_IN_NDV_FOR_NODES.includes(this.node?.type || '') &&
+				this.mainNodeAuthField &&
+				(parameter.name === this.mainNodeAuthField?.name ||
+					this.shouldHideAuthRelatedParameter(parameter))
+			) {
+				return false;
+			}
+
 			if (parameter.displayOptions === undefined) {
 				// If it is not defined no need to do a proper check
 				return true;
@@ -357,6 +388,15 @@ export default mixins(workflowHelpers).extend({
 				this.$emit('activate');
 			}
 		},
+		isNodeAuthField(name: string): boolean {
+			return this.nodeAuthFields.find((field) => field.name === name) !== undefined;
+		},
+		shouldHideAuthRelatedParameter(parameter: INodeProperties): boolean {
+			// TODO: For now, hide all fields that are used in authentication fields displayOptions
+			// Ideally, we should check if any non-auth field depends on it before hiding it but
+			// since there is no such case, omitting it to avoid additional computation
+			return isAuthRelatedParameter(this.nodeAuthFields, parameter);
+		},
 	},
 	watch: {
 		filteredParameterNames(newValue, oldValue) {