fix(editor): Fix most ts errors in credential components (no-changelog) (#9576)

packages/editor-ui/src/Interface.ts

@@ -118,6 +118,9 @@ declare global {
 	}
 }
 
+/** String that represents a timestamp in the ISO8601 format, i.e. YYYY-MM-DDTHH:MM:SS.sssZ */
+export type Iso8601String = string;
+
 export type EndpointStyle = {
 	width?: number;
 	height?: number;
@@ -351,8 +354,8 @@ export interface IShareWorkflowsPayload {
 
 export interface ICredentialsResponse extends ICredentialsEncrypted {
 	id: string;
-	createdAt: number | string;
+	createdAt: Iso8601String;
-	updatedAt: number | string;
+	updatedAt: Iso8601String;
 	sharedWithProjects?: ProjectSharingData[];
 	homeProject?: ProjectSharingData;
 	currentUserHasAccess?: boolean;
@@ -361,8 +364,8 @@ export interface ICredentialsResponse extends ICredentialsEncrypted {
 }
 
 export interface ICredentialsBase {
-	createdAt: number | string;
+	createdAt: Iso8601String;
-	updatedAt: number | string;
+	updatedAt: Iso8601String;
 }
 
 export interface ICredentialsDecryptedResponse extends ICredentialsBase, ICredentialsDecrypted {

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

@@ -70,7 +70,6 @@ export default defineComponent({
 				updatedAt: '',
 				type: '',
 				name: '',
-				nodesAccess: [],
 				sharedWithProjects: [],
 				homeProject: {} as ProjectSharingData,
 			}),
@@ -118,7 +117,7 @@ export default defineComponent({
 			);
 		},
 		formattedCreatedAtDate(): string {
-			const currentYear = new Date().getFullYear();
+			const currentYear = new Date().getFullYear().toString();
 
 			return dateformat(
 				this.data.createdAt,
@@ -128,10 +127,9 @@ export default defineComponent({
 	},
 	methods: {
 		async onClick(event: Event) {
-			if (
+			const cardActionsEl = this.$refs.cardActions as HTMLDivElement | undefined;
-				this.$refs.cardActions === event.target ||
+			const clickTarget = event.target as HTMLElement | null;
-				this.$refs.cardActions?.contains(event.target)
+			if (cardActionsEl === clickTarget || (clickTarget && cardActionsEl?.contains(clickTarget))) {
-			) {
 				return;
 			}
 

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

@@ -115,8 +115,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
+import { defineComponent, type PropType } from 'vue';
 
 import type { ICredentialsResponse, IUser } from '@/Interface';
 
@@ -158,6 +158,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import type { ProjectSharingData } from '@/features/projects/projects.types';
+import { assert } from '@/utils/assert';
 
 import {
 	getNodeAuthOptions,
@@ -190,9 +191,11 @@ export default defineComponent({
 		activeId: {
 			type: [String, Number],
 			required: false,
+			default: undefined,
 		},
 		mode: {
-			type: String,
+			type: String as PropType<'new' | 'edit'>,
+			default: 'new',
 		},
 	},
 	setup() {
@@ -380,13 +383,14 @@ export default defineComponent({
 				return [];
 			}
 
-			const properties = this.credentialType.properties.filter((propertyData: INodeProperties) => {
+			const credentialType = this.credentialType;
+			const properties = credentialType.properties.filter((propertyData: INodeProperties) => {
 				if (!this.displayCredentialParameter(propertyData)) {
 					return false;
 				}
 				return (
-					!this.credentialType!.__overwrittenProperties ||
+					!credentialType.__overwrittenProperties ||
-					!this.credentialType!.__overwrittenProperties.includes(propertyData.name)
+					!credentialType.__overwrittenProperties.includes(propertyData.name)
 				);
 			});
 
@@ -407,16 +411,17 @@ export default defineComponent({
 					continue;
 				}
 
-				if (property.type === 'string' && !this.credentialData[property.name]) {
+				const credentialProperty = this.credentialData[property.name];
+
+				if (property.type === 'string' && !credentialProperty) {
 					return false;
 				}
 
 				if (property.type === 'number') {
-					const isExpression =
+					const containsExpression =
-						typeof this.credentialData[property.name] === 'string' &&
+						typeof credentialProperty === 'string' && credentialProperty.startsWith('=');
-						this.credentialData[property.name].startsWith('=');
 
-					if (typeof this.credentialData[property.name] !== 'number' && !isExpression) {
+					if (typeof credentialProperty !== 'number' && !containsExpression) {
 						return false;
 					}
 				}
@@ -463,7 +468,7 @@ export default defineComponent({
 					credentialTypeName = this.activeNodeType.credentials[0].name;
 				}
 			}
-			return credentialTypeName || '';
+			return credentialTypeName ?? '';
 		},
 		showSaveButton(): boolean {
 			return (
@@ -757,7 +762,7 @@ export default defineComponent({
 		},
 
 		async retestCredential() {
-			if (!this.isCredentialTestable) {
+			if (!this.isCredentialTestable || !this.credentialTypeName) {
 				this.authError = '';
 				this.testedSuccessfully = false;
 
@@ -768,7 +773,7 @@ export default defineComponent({
 			const details: ICredentialsDecrypted = {
 				id: this.credentialId,
 				name: this.credentialName,
-				type: this.credentialTypeName!,
+				type: this.credentialTypeName,
 				data: credentialData,
 			};
 
@@ -801,20 +806,21 @@ export default defineComponent({
 			this.isSaving = true;
 
 			// Save only the none default data
+			assert(this.credentialType);
 			const data = NodeHelpers.getNodeParameters(
-				this.credentialType!.properties,
+				this.credentialType.properties,
 				this.credentialData as INodeParameters,
 				false,
 				false,
 				null,
 			);
 
+			assert(this.credentialTypeName);
 			const credentialDetails: ICredentialsDecrypted = {
 				id: this.credentialId,
 				name: this.credentialName,
-				type: this.credentialTypeName!,
+				type: this.credentialTypeName,
 				data: data as unknown as ICredentialDataDecryptedObject,
-				nodesAccess: [],
 			};
 
 			if (
@@ -825,7 +831,7 @@ export default defineComponent({
 					.sharedWithProjects as ProjectSharingData[];
 			}
 
-			let credential;
+			let credential: ICredentialsResponse | null = null;
 
 			const isNewCredential = this.mode === 'new' && !this.credentialId;
 
@@ -954,7 +960,7 @@ export default defineComponent({
 		async updateCredential(
 			credentialDetails: ICredentialsDecrypted,
 		): Promise<ICredentialsResponse | null> {
-			let credential;
+			let credential: ICredentialsResponse | null = null;
 			try {
 				if (this.credentialPermissions.update) {
 					credential = await this.credentialsStore.updateCredential({
@@ -974,6 +980,14 @@ export default defineComponent({
 					this.isSharedWithChanged = false;
 				}
 				this.hasUnsavedChanges = false;
+
+				if (credential) {
+					await this.externalHooks.run('credential.saved', {
+						credential_type: credentialDetails.type,
+						credential_id: credential.id,
+						is_new: false,
+					});
+				}
 			} catch (error) {
 				this.showError(
 					error,
@@ -983,12 +997,6 @@ export default defineComponent({
 				return null;
 			}
 
-			await this.externalHooks.run('credential.saved', {
-				credential_type: credentialDetails.type,
-				credential_id: credential.id,
-				is_new: false,
-			});
-
 			// Now that the credentials changed check if any nodes use credentials
 			// which have now a different name
 			this.nodeHelpers.updateNodesCredentialsIssues();

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -105,8 +105,8 @@ export default defineComponent({
 	},
 	props: {
 		credential: {
-			type: Object as PropType<ICredentialsResponse>,
+			type: Object as PropType<ICredentialsResponse | null>,
-			required: true,
+			default: null,
 		},
 		credentialId: {
 			type: String,
@@ -162,7 +162,7 @@ export default defineComponent({
 			return this.credentialsStore.getCredentialOwnerNameById(`${this.credentialId}`);
 		},
 		isCredentialSharedWithCurrentUser(): boolean {
-			return (this.credentialData.sharedWithProjects || []).some((sharee: IUser) => {
+			return (this.credentialData.sharedWithProjects ?? []).some((sharee: IUser) => {
 				return sharee.id === this.usersStore.currentUser?.id;
 			});
 		},

packages/editor-ui/src/components/CredentialEdit/__tests__/OauthButton.test.ts

@@ -11,7 +11,7 @@ describe('OauthButton', () => {
 	test.each([
 		['GoogleAuthButton', true],
 		['n8n-button', false],
-	])('should emit click event only once when %s is clicked', async (name, isGoogleOAuthType) => {
+	])('should emit click event only once when %s is clicked', async (_, isGoogleOAuthType) => {
 		const { emitted, getByRole } = renderComponent({
 			props: { isGoogleOAuthType },
 		});

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

@@ -6,13 +6,11 @@
 				:size="inputSize"
 				filterable
 				:model-value="displayValue"
-				:placeholder="
+				:placeholder="$locale.baseText('parameterInput.select')"
-					parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
-				"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				data-test-id="credential-select"
-				@update:model-value="(value) => $emit('update:modelValue', value)"
+				@update:model-value="(value: string) => $emit('update:modelValue', value)"
 				@keydown.stop
 				@focus="$emit('setFocus')"
 				@blur="$emit('onBlur')"
@@ -28,11 +26,6 @@
 						<div class="option-headline">
 							{{ credType.displayName }}
 						</div>
-						<div
-							v-if="credType.description"
-							class="option-description"
-							v-html="credType.description"
-						/>
 					</div>
 				</n8n-option>
 			</n8n-select>
@@ -62,9 +55,6 @@ import ScopesNotice from '@/components/ScopesNotice.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
 import { mapStores } from 'pinia';
 import { useCredentialsStore } from '@/stores/credentials.store';
-import type { N8nSelect } from 'n8n-design-system';
-
-type N8nSelectRef = InstanceType<typeof N8nSelect>;
 
 export default defineComponent({
 	name: 'CredentialsSelect',
@@ -81,6 +71,7 @@ export default defineComponent({
 		'isReadOnly',
 		'displayTitle',
 	],
+	emits: ['update:modelValue', 'setFocus', 'onBlur', 'credentialSelected'],
 	computed: {
 		...mapStores(useCredentialsStore),
 		allCredentialTypes(): ICredentialType[] {
@@ -97,7 +88,7 @@ export default defineComponent({
 	},
 	methods: {
 		focus() {
-			const selectRef = this.$refs.innerSelect as N8nSelectRef | undefined;
+			const selectRef = this.$refs.innerSelect as HTMLElement | undefined;
 			if (selectRef) {
 				selectRef.focus();
 			}