fix(editor): Fix type errors in NodeCredentials (no-changelog) (#9567)

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

@@ -10,7 +10,6 @@
 			<n8n-input-label
 				:label="getCredentialsFieldLabel(credentialTypeDescription)"
 				:bold="false"
-				:set="(issues = getIssues(credentialTypeDescription.name))"
 				size="small"
 				color="text-dark"
 				data-test-id="credentials-label"
@@ -25,15 +24,24 @@
 				</div>
 				<div
 					v-else
-					:class="issues.length && !hideIssues ? $style.hasIssues : $style.input"
+					:class="
+						getIssues(credentialTypeDescription.name).length && !hideIssues
+							? $style.hasIssues
+							: $style.input
+					"
 					data-test-id="node-credentials-select"
 				>
 					<n8n-select
 						:model-value="getSelectedId(credentialTypeDescription.name)"
-						:placeholder="getSelectPlaceholder(credentialTypeDescription.name, issues)"
+						:placeholder="
+							getSelectPlaceholder(
+								credentialTypeDescription.name,
+								getIssues(credentialTypeDescription.name),
+							)
+						"
 						size="small"
 						@update:model-value="
-							(value) =>
+							(value: string) =>
 								onCredentialSelected(
 									credentialTypeDescription.name,
 									value,
@@ -65,12 +73,15 @@
 						</n8n-option>
 					</n8n-select>
 
-					<div v-if="issues.length && !hideIssues" :class="$style.warning">
+					<div
+						v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
+						:class="$style.warning"
+					>
 						<n8n-tooltip placement="top">
 							<template #content>
 								<TitledList
 									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
-									:items="issues"
+									:items="getIssues(credentialTypeDescription.name)"
 								/>
 							</template>
 							<font-awesome-icon icon="exclamation-triangle" />
@@ -109,7 +120,6 @@ import type {
 	IUser,
 } from '@/Interface';
 import type {
-	ICredentialType,
 	INodeCredentialDescription,
 	INodeCredentialsDetails,
 	INodeParameters,
@@ -136,6 +146,7 @@ import {
 	updateNodeAuthType,
 	isRequiredCredential,
 } from '@/utils/nodeTypesUtils';
+import { assert } from '@/utils/assert';
 
 interface CredentialDropdownOption extends ICredentialsResponse {
 	typeDisplayName: string;
@@ -157,6 +168,7 @@ export default defineComponent({
 		},
 		overrideCredType: {
 			type: String,
+			default: '',
 		},
 		showAll: {
 			type: Boolean,
@@ -167,6 +179,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	emits: { credentialSelected: null, valueChanged: null, blur: null },
 	setup() {
 		const nodeHelpers = useNodeHelpers();
 
@@ -182,6 +195,60 @@ export default defineComponent({
 			listeningForAuthChange: false,
 		};
 	},
+	computed: {
+		...mapStores(
+			useCredentialsStore,
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+		),
+		currentUser(): IUser {
+			return this.usersStore.currentUser ?? ({} as IUser);
+		},
+		credentialTypesNode(): string[] {
+			return this.credentialTypesNodeDescription.map(
+				(credentialTypeDescription) => credentialTypeDescription.name,
+			);
+		},
+		credentialTypesNodeDescriptionDisplayed(): INodeCredentialDescription[] {
+			return this.credentialTypesNodeDescription.filter((credentialTypeDescription) => {
+				return this.displayCredentials(credentialTypeDescription);
+			});
+		},
+		credentialTypesNodeDescription(): INodeCredentialDescription[] {
+			const credType = this.credentialsStore.getCredentialTypeByName(this.overrideCredType);
+
+			if (credType) return [credType];
+
+			const activeNodeType = this.nodeType;
+			if (activeNodeType?.credentials) {
+				return activeNodeType.credentials;
+			}
+
+			return [];
+		},
+		credentialTypeNames() {
+			const returnData: Record<string, string> = {};
+			for (const credentialTypeName of this.credentialTypesNode) {
+				const credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeName);
+				returnData[credentialTypeName] = credentialType
+					? credentialType.displayName
+					: credentialTypeName;
+			}
+			return returnData;
+		},
+		selected(): Record<string, INodeCredentialsDetails> {
+			return this.node.credentials ?? {};
+		},
+		nodeType(): INodeTypeDescription | null {
+			return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
+		},
+		mainNodeAuthField(): INodeProperties | null {
+			return getMainAuthField(this.nodeType);
+		},
+	},
 	watch: {
 		'node.parameters': {
 			immediate: true,
@@ -197,10 +264,9 @@ export default defineComponent({
 						const newAuth = newValue[this.mainNodeAuthField.name];
 
 						if (newAuth) {
-							const credentialType = getNodeCredentialForSelectedAuthType(
-								nodeType,
-								newAuth.toString(),
-							);
+							const authType =
+								typeof newAuth === 'object' ? JSON.stringify(newAuth) : newAuth.toString();
+							const credentialType = getNodeCredentialForSelectedAuthType(nodeType, authType);
 							if (credentialType) {
 								this.subscribedToCredentialType = credentialType.name;
 							}
@@ -212,7 +278,7 @@ export default defineComponent({
 	},
 	mounted() {
 		// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
-		this.credentialsStore.$onAction(({ name, after, store, args }) => {
+		this.credentialsStore.$onAction(({ name, after, args }) => {
 			const listeningForActions = ['createNewCredential', 'updateCredential', 'deleteCredential'];
 			const credentialType = this.subscribedToCredentialType;
 			if (!credentialType) {
@@ -269,68 +335,10 @@ export default defineComponent({
 			});
 		});
 	},
-	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNodeTypesStore,
-			useNDVStore,
-			useUIStore,
-			useUsersStore,
-			useWorkflowsStore,
-		),
-		currentUser(): IUser {
-			return this.usersStore.currentUser || ({} as IUser);
-		},
-		credentialTypesNode(): string[] {
-			return this.credentialTypesNodeDescription.map(
-				(credentialTypeDescription) => credentialTypeDescription.name,
-			);
-		},
-		credentialTypesNodeDescriptionDisplayed(): INodeCredentialDescription[] {
-			return this.credentialTypesNodeDescription.filter((credentialTypeDescription) => {
-				return this.displayCredentials(credentialTypeDescription);
-			});
-		},
-		credentialTypesNodeDescription(): INodeCredentialDescription[] {
-			const credType = this.credentialsStore.getCredentialTypeByName(this.overrideCredType);
-
-			if (credType) return [credType];
-
-			const activeNodeType = this.nodeType;
-			if (activeNodeType?.credentials) {
-				return activeNodeType.credentials;
-			}
-
-			return [];
-		},
-		credentialTypeNames() {
-			const returnData: {
-				[key: string]: string;
-			} = {};
-			let credentialType: ICredentialType | undefined;
-			for (const credentialTypeName of this.credentialTypesNode) {
-				credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeName);
-				returnData[credentialTypeName] = credentialType
-					? credentialType.displayName
-					: credentialTypeName;
-			}
-			return returnData;
-		},
-		selected(): { [type: string]: INodeCredentialsDetails } {
-			return this.node.credentials || {};
-		},
-		nodeType(): INodeTypeDescription | null {
-			return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
-		},
-		mainNodeAuthField(): INodeProperties | null {
-			return getMainAuthField(this.nodeType);
-		},
-	},
-
 	methods: {
 		getAllRelatedCredentialTypes(credentialType: INodeCredentialDescription): string[] {
-			const isRequiredCredential = this.showMixedCredentials(credentialType);
-			if (isRequiredCredential) {
+			const credentialIsRequired = this.showMixedCredentials(credentialType);
+			if (credentialIsRequired) {
 				if (this.mainNodeAuthField) {
 					const credentials = getAllNodeCredentialForAuthType(
 						this.nodeType,
@@ -401,6 +409,7 @@ export default defineComponent({
 				name: this.node.name,
 				properties: {
 					credentials,
+					position: this.node.position,
 				},
 			};
 
@@ -439,16 +448,14 @@ export default defineComponent({
 
 			const selectedCredentials = this.credentialsStore.getCredentialById(credentialId);
 			const selectedCredentialsType = this.showAll ? selectedCredentials.type : credentialType;
-			const oldCredentials = this.node.credentials?.[selectedCredentialsType]
-				? this.node.credentials[selectedCredentialsType]
-				: {};
+			const oldCredentials = this.node.credentials?.[selectedCredentialsType] ?? null;
 
 			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
 
 			// if credentials has been string or neither id matched nor name matched uniquely
 			if (
-				oldCredentials.id === null ||
-				(oldCredentials.id &&
+				oldCredentials?.id === null ||
+				(oldCredentials?.id &&
 					!this.credentialsStore.getCredentialByIdAndType(
 						oldCredentials.id,
 						selectedCredentialsType,
@@ -492,7 +499,7 @@ export default defineComponent({
 			const node: INodeUi = this.node;
 
 			const credentials = {
-				...(node.credentials || {}),
+				...(node.credentials ?? {}),
 				[selectedCredentialsType]: selected,
 			};
 
@@ -500,6 +507,7 @@ export default defineComponent({
 				name: this.node.name,
 				properties: {
 					credentials,
+					position: this.node.position,
 				},
 			};
 
@@ -543,8 +551,10 @@ export default defineComponent({
 		},
 
 		editCredential(credentialType: string): void {
-			const { id } = this.node.credentials[credentialType];
-			this.uiStore.openExistingCredential(id);
+			const credential = this.node.credentials?.[credentialType];
+			assert(credential?.id);
+
+			this.uiStore.openExistingCredential(credential.id);
 
 			this.$telemetry.track('User opened Credential modal', {
 				credential_type: credentialType,