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/CredentialEdit/CredentialConfig.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container">
+	<div :class="$style.container" data-test-id="node-credentials-config-container">
 		<banner
 			v-show="showValidationWarning"
 			theme="danger"
@@ -70,6 +70,12 @@
 				</span>
 			</n8n-notice>
 
+			<AuthTypeSelector
+				v-if="showAuthTypeSelector && isNewCredential"
+				:credentialType="credentialType"
+				@authTypeChanged="onAuthTypeChange"
+			/>
+
 			<CopyInput
 				v-if="isOAuthType && credentialProperties.length"
 				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
@@ -115,14 +121,14 @@
 			@click="$emit('oauth')"
 		/>
 
-		<n8n-text v-if="!credentialType" color="text-base" size="medium">
+		<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
 			{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
 		</n8n-text>
 	</div>
 </template>
 
 <script lang="ts">
-import { ICredentialType } from 'n8n-workflow';
+import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
 import { getAppNameFromCredType, isCommunityPackageName } from '@/utils';
 
 import Banner from '../Banner.vue';
@@ -140,15 +146,21 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { ICredentialsResponse, IUpdateInformation, NodeAuthenticationOption } from '@/Interface';
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
 	components: {
+		AuthTypeSelector,
 		Banner,
 		CopyInput,
 		CredentialInputs,
 		OauthButton,
+		ParameterInputFull,
 		GoogleAuthButton,
 	},
 	props: {
@@ -192,6 +204,13 @@ export default mixins(restApi).extend({
 		requiredPropertiesFilled: {
 			type: Boolean,
 		},
+		mode: {
+			type: String,
+			required: true,
+		},
+		showAuthTypeSelector: {
+			type: Boolean,
+		},
 	},
 	data() {
 		return {
@@ -215,7 +234,22 @@ export default mixins(restApi).extend({
 		);
 	},
 	computed: {
-		...mapStores(useCredentialsStore, useNDVStore, useRootStore, useUIStore, useWorkflowsStore),
+		...mapStores(
+			useCredentialsStore,
+			useNDVStore,
+			useNodeTypesStore,
+			useRootStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		activeNodeType(): INodeTypeDescription | null {
+			const activeNode = this.ndvStore.activeNode;
+
+			if (activeNode) {
+				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+			}
+			return null;
+		},
 		appName(): string {
 			if (!this.credentialType) {
 				return '';
@@ -284,8 +318,17 @@ export default mixins(restApi).extend({
 				!this.authError
 			);
 		},
+		isMissingCredentials(): boolean {
+			return this.credentialType === null;
+		},
+		isNewCredential(): boolean {
+			return this.mode === 'new' && !this.credentialId;
+		},
 	},
 	methods: {
+		getCredentialOptions(type: string): ICredentialsResponse[] {
+			return this.credentialsStore.allUsableCredentialsByType[type];
+		},
 		onDataChange(event: { name: string; value: string | number | boolean | Date | null }): void {
 			this.$emit('change', event);
 		},
@@ -297,6 +340,9 @@ export default mixins(restApi).extend({
 				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
+		onAuthTypeChange(newType: string): void {
+			this.$emit('authTypeChanged', newType);
+		},
 	},
 	watch: {
 		showOAuthSuccessBanner(newValue, oldValue) {