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
2023-01-27 09:05:43 +01:00
parent 874c735d0a
commit b321c5e4ec
21 changed files with 1105 additions and 146 deletions
--- a/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import { IUpdateInformation, NodeAuthenticationOption } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import {
+	getAuthTypeForNodeCredential,
+	getNodeAuthFields,
+	getNodeAuthOptions,
+	isAuthRelatedParameter,
+} from '@/utils';
+import { INodeProperties, INodeTypeDescription, NodeParameterValue } from 'n8n-workflow';
+import { computed, onMounted, ref } from 'vue';
+import Vue from 'vue';
+
+export interface Props {
+	credentialType: Object;
+}
+
+const emit = defineEmits<{
+	(event: 'authTypeChanged', value: string): void;
+}>();
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+
+const props = defineProps<Props>();
+
+const selected = ref('');
+const authRelatedFieldsValues = ref({} as { [key: string]: NodeParameterValue });
+
+onMounted(() => {
+	if (activeNodeType.value?.credentials) {
+		const credentialsForType =
+			activeNodeType.value.credentials.find((cred) => cred.name === props.credentialType.name) ||
+			null;
+		const authOptionForCred = getAuthTypeForNodeCredential(
+			activeNodeType.value,
+			credentialsForType,
+		);
+		selected.value = authOptionForCred?.value || '';
+	}
+
+	// Populate default values of related fields
+	authRelatedFields.value.forEach((field) => {
+		Vue.set(authRelatedFieldsValues.value, field.name, field.default);
+	});
+});
+
+const activeNodeType = computed<INodeTypeDescription | null>(() => {
+	const activeNode = ndvStore.activeNode;
+	if (activeNode) {
+		return nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+	}
+	return null;
+});
+
+const authOptions = computed<NodeAuthenticationOption[]>(() => {
+	return getNodeAuthOptions(activeNodeType.value);
+});
+
+const filteredNodeAuthOptions = computed<NodeAuthenticationOption[]>(() => {
+	return authOptions.value.filter((option) => shouldShowAuthOption(option));
+});
+
+// These are node properties that authentication fields depend on
+// (have them in their display options). They all are show here
+// instead of in the NDV
+const authRelatedFields = computed<INodeProperties[]>(() => {
+	const nodeAuthFields = getNodeAuthFields(activeNodeType.value);
+	return (
+		activeNodeType.value?.properties.filter((prop) =>
+			isAuthRelatedParameter(nodeAuthFields, prop),
+		) || []
+	);
+});
+
+function shouldShowAuthOption(option: NodeAuthenticationOption): boolean {
+	// Node auth radio button should be shown if any of the fields that it depends on
+	// has value specified in it's displayOptions.show
+	if (authRelatedFields.value.length === 0) {
+		// If there are no related fields, show option
+		return true;
+	}
+
+	let shouldDisplay = false;
+	Object.keys(authRelatedFieldsValues.value).forEach((fieldName) => {
+		if (option.displayOptions && option.displayOptions.show) {
+			if (
+				option.displayOptions.show[fieldName]?.includes(authRelatedFieldsValues.value[fieldName])
+			) {
+				shouldDisplay = true;
+				return;
+			}
+		}
+	});
+	return shouldDisplay;
+}
+
+function onAuthTypeChange(newType: string): void {
+	emit('authTypeChanged', newType);
+}
+
+function valueChanged(data: IUpdateInformation): void {
+	Vue.set(authRelatedFieldsValues.value, data.name, data.value);
+}
+
+defineExpose({
+	onAuthTypeChange,
+});
+</script>
+
+<template>
+	<div v-if="filteredNodeAuthOptions.length > 0" data-test-id="node-auth-type-selector">
+		<div v-for="parameter in authRelatedFields" :key="parameter.name" class="mb-l">
+			<parameter-input-full
+				:parameter="parameter"
+				:value="authRelatedFieldsValues[parameter.name] || parameter.default"
+				:path="parameter.name"
+				:displayOptions="false"
+				@valueChanged="valueChanged"
+			/>
+		</div>
+		<div>
+			<n8n-input-label
+				:label="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorLabel')"
+				:tooltipText="$locale.baseText('credentialEdit.credentialConfig.authTypeSelectorTooltip')"
+				:required="true"
+			/>
+		</div>
+		<el-radio
+			v-for="prop in filteredNodeAuthOptions"
+			:key="prop.value"
+			v-model="selected"
+			:label="prop.value"
+			:class="$style.authRadioButton"
+			border
+			@change="onAuthTypeChange"
+			>{{ prop.name }}</el-radio
+		>
+	</div>
+</template>
+
+<style lang="scss" module>
+.authRadioButton {
+	margin-right: 0 !important;
+	& + & {
+		margin-left: 8px !important;
+	}
+}
+</style>
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/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) {
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -12,12 +12,12 @@
 			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
-						<CredentialIcon :credentialTypeName="credentialTypeName" />
+						<CredentialIcon :credentialTypeName="defaultCredentialTypeName" />
 					</div>
 					<InlineNameEdit
 						:name="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.updateName"
+						:readonly="!credentialPermissions.updateName || !credentialType"
 						type="Credential"
 						@input="onNameEdit"
 						data-test-id="credential-name"
@@ -52,7 +52,7 @@
 			<hr />
 		</template>
 		<template #content>
-			<div :class="$style.container">
+			<div :class="$style.container" data-test-id="credential-edit-dialog">
 				<div :class="$style.sidebar">
 					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
 				</div>
@@ -71,10 +71,14 @@
 						:parentTypes="parentTypes"
 						:requiredPropertiesFilled="requiredPropertiesFilled"
 						:credentialPermissions="credentialPermissions"
+						:mode="mode"
+						:selectedCredential="selectedCredential"
+						:showAuthTypeSelector="requiredCredentials"
 						@change="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
 						@scrollToTop="scrollToTop"
+						@authTypeChanged="onAuthTypeChanged"
 					/>
 				</div>
 				<div v-else-if="activeTab === 'sharing' && credentialType" :class="$style.mainContent">
@@ -107,7 +111,7 @@
 <script lang="ts">
 import Vue from 'vue';

-import type { ICredentialsResponse, IUser } from '@/Interface';
+import type { ICredentialsResponse, IUser, NewCredentialsModal } from '@/Interface';

 import {
 	CredentialInformation,
@@ -116,6 +120,7 @@ import {
 	ICredentialsDecrypted,
 	ICredentialType,
 	INode,
+	INodeCredentialDescription,
 	INodeParameters,
 	INodeProperties,
 	INodeTypeDescription,
@@ -134,12 +139,11 @@ import CredentialSharing from './CredentialSharing.ee.vue';
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
-import { EnterpriseEditionFeature } from '@/constants';
+import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { IDataObject } from 'n8n-workflow';
 import FeatureComingSoon from '../FeatureComingSoon.vue';
 import { getCredentialPermissions, IPermissions } from '@/permissions';
 import { IMenuItem } from 'n8n-design-system';
-import { BaseTextKey } from '@/plugins/i18n';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
@@ -147,7 +151,13 @@ import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
-import { isValidCredentialResponse } from '@/utils';
+import {
+	isValidCredentialResponse,
+	getNodeAuthOptions,
+	getNodeCredentialForSelectedAuthType,
+	updateNodeAuthType,
+	isCredentialModalState,
+} from '@/utils';

 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -171,8 +181,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			required: true,
 		},
 		activeId: {
-			type: [String],
-			required: true,
+			type: [String, Number],
+			required: false,
 		},
 		mode: {
 			type: String,
@@ -196,22 +206,21 @@ export default mixins(showMessage, nodeHelpers).extend({
 			testedSuccessfully: false,
 			isRetesting: false,
 			EnterpriseEditionFeature,
+			selectedCredential: '',
+			requiredCredentials: false, // Are credentials required or optional for the node
+			hasUserSpecifiedName: false,
 		};
 	},
 	async mounted() {
-		this.nodeAccess = this.nodesWithAccess.reduce((accu: NodeAccessMap, node: { name: string }) => {
-			if (this.mode === 'new') {
-				accu[node.name] = { nodeType: node.name }; // enable all nodes by default
-			} else {
-				accu[node.name] = null;
-			}
+		this.requiredCredentials =
+			isCredentialModalState(this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY]) &&
+			this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;

-			return accu;
-		}, {});
+		this.setupNodeAccess();

 		if (this.mode === 'new' && this.credentialTypeName) {
 			this.credentialName = await this.credentialsStore.getNewCredentialName({
-				credentialTypeName: this.credentialTypeName,
+				credentialTypeName: this.defaultCredentialTypeName,
 			});

 			if (this.currentUser) {
@@ -264,6 +273,38 @@ export default mixins(showMessage, nodeHelpers).extend({
 			useUsersStore,
 			useWorkflowsStore,
 		),
+		activeNodeType(): INodeTypeDescription | null {
+			const activeNode = this.ndvStore.activeNode;
+
+			if (activeNode) {
+				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+			}
+			return null;
+		},
+		selectedCredentialType(): INodeCredentialDescription | null {
+			if (this.mode !== 'new') {
+				return null;
+			}
+
+			// If there is already selected type, use it
+			if (this.selectedCredential !== '') {
+				return this.credentialsStore.getCredentialTypeByName(this.selectedCredential);
+			} else if (this.requiredCredentials) {
+				// Otherwise, use credential type that corresponds to the first auth option in the node definition
+				const nodeAuthOptions = getNodeAuthOptions(this.activeNodeType);
+				// But only if there is zero or one auth options available
+				if (nodeAuthOptions.length > 0 && this.activeNodeType?.credentials) {
+					return getNodeCredentialForSelectedAuthType(
+						this.activeNodeType,
+						nodeAuthOptions[0].value,
+					);
+				} else {
+					return this.activeNodeType?.credentials ? this.activeNodeType.credentials[0] : null;
+				}
+			}
+
+			return null;
+		},
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
@@ -282,7 +323,9 @@ export default mixins(showMessage, nodeHelpers).extend({

 				return null;
 			}
-
+			if (this.selectedCredentialType) {
+				return this.selectedCredentialType.name;
+			}
 			return `${this.activeId}`;
 		},
 		credentialType(): ICredentialType | null {
@@ -419,6 +462,15 @@ export default mixins(showMessage, nodeHelpers).extend({
 		isSharingAvailable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
+		defaultCredentialTypeName(): string {
+			let credentialTypeName = this.credentialTypeName;
+			if (!credentialTypeName || credentialTypeName === 'null') {
+				if (this.activeNodeType && this.activeNodeType.credentials) {
+					credentialTypeName = this.activeNodeType.credentials[0].name;
+				}
+			}
+			return credentialTypeName || '';
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -614,6 +666,7 @@ export default mixins(showMessage, nodeHelpers).extend({

 		onNameEdit(text: string) {
 			this.hasUnsavedChanges = true;
+			this.hasUserSpecifiedName = true;
 			this.credentialName = text;
 		},

@@ -876,6 +929,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.isDeleting = false;
 			// Now that the credentials were removed check if any nodes used them
 			this.updateNodesCredentialsIssues();
+			this.credentialData = {};

 			this.$showMessage({
 				title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
@@ -946,6 +1000,50 @@ export default mixins(showMessage, nodeHelpers).extend({

 			window.addEventListener('message', receiveMessage, false);
 		},
+		async onAuthTypeChanged(type: string): Promise<void> {
+			if (!this.activeNodeType?.credentials) {
+				return;
+			}
+			const credentialsForType = getNodeCredentialForSelectedAuthType(this.activeNodeType, type);
+			if (credentialsForType) {
+				this.selectedCredential = credentialsForType.name;
+				this.resetCredentialData();
+				this.setupNodeAccess();
+				// Update current node auth type so credentials dropdown can be displayed properly
+				updateNodeAuthType(this.ndvStore.activeNode, type);
+				// Also update credential name but only if the default name is still used
+				if (this.hasUnsavedChanges && !this.hasUserSpecifiedName) {
+					const newDefaultName = await this.credentialsStore.getNewCredentialName({
+						credentialTypeName: this.defaultCredentialTypeName,
+					});
+					this.credentialName = newDefaultName;
+				}
+			}
+		},
+		setupNodeAccess(): void {
+			this.nodeAccess = this.nodesWithAccess.reduce(
+				(accu: NodeAccessMap, node: { name: string }) => {
+					if (this.mode === 'new') {
+						accu[node.name] = { nodeType: node.name }; // enable all nodes by default
+					} else {
+						accu[node.name] = null;
+					}
+
+					return accu;
+				},
+				{},
+			);
+		},
+		resetCredentialData(): void {
+			if (!this.credentialType) {
+				return;
+			}
+			for (const property of this.credentialType.properties) {
+				if (!this.credentialType.__overwrittenProperties?.includes(property.name)) {
+					Vue.set(this.credentialData, property.name, property.default as CredentialInformation);
+				}
+			}
+		},
 	},
 });
 </script>