From 552cf8f3db98934a918b38fa22408fdf1efebd02 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Mon, 6 May 2024 11:20:55 -0400
Subject: [PATCH] fix(editor): Fix type errors in the `SettingsLdapView.vue`
 (no-changelog) (#9308)

---
 packages/design-system/src/types/form.ts      |  1 +
 .../editor-ui/src/v3-infinite-loading.d.ts    | 16 ++++++
 .../editor-ui/src/views/SettingsLdapView.vue  | 55 +++++++++++++++----
 3 files changed, 61 insertions(+), 11 deletions(-)
 create mode 100644 packages/editor-ui/src/v3-infinite-loading.d.ts

diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts
index 1ef109623..ab359bd6d 100644
--- a/packages/design-system/src/types/form.ts
+++ b/packages/design-system/src/types/form.ts
@@ -57,6 +57,7 @@ export type IFormInput = {
 		disabled?: boolean;
 		labelSize?: 'small' | 'medium' | 'large';
 		labelAlignment?: 'left' | 'right' | 'center';
+		tooltipText?: string;
 	};
 	shouldDisplay?: (values: { [key: string]: unknown }) => boolean;
 };
diff --git a/packages/editor-ui/src/v3-infinite-loading.d.ts b/packages/editor-ui/src/v3-infinite-loading.d.ts
new file mode 100644
index 000000000..1fa589586
--- /dev/null
+++ b/packages/editor-ui/src/v3-infinite-loading.d.ts
@@ -0,0 +1,16 @@
+declare module 'v3-infinite-loading' {
+	import { Plugin, DefineComponent } from 'vue';
+
+	interface InfiniteLoadingProps {
+		target: string;
+	}
+
+	export interface Events {
+		infinite: (state: { loaded: () => void; complete: () => void }) => void;
+	}
+
+	const InfiniteLoading: DefineComponent<InfiniteLoadingProps, {}, {}, {}, {}, {}, {}, Events> &
+		Plugin;
+
+	export default InfiniteLoading;
+}
diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index f0feb3823..0fd348ab0 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -138,6 +138,7 @@
 </template>
 
 <script lang="ts">
+import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
 import { capitalizeFirstLetter } from '@/utils/htmlUtils';
 import { convertToDisplayDate } from '@/utils/typesUtils';
@@ -155,16 +156,14 @@ import { MODAL_CONFIRM } from '@/constants';
 
 import humanizeDuration from 'humanize-duration';
 import { ElTable, ElTableColumn } from 'element-plus';
+import type { Events } from 'v3-infinite-loading';
 import InfiniteLoading from 'v3-infinite-loading';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUIStore } from '@/stores/ui.store';
 import { createEventBus } from 'n8n-design-system/utils';
-import type { N8nFormInputs } from 'n8n-design-system';
-import type { CellStyle } from 'element-plus';
-
-type N8nFormInputsRef = InstanceType<typeof N8nFormInputs>;
+import type { TableColumnCtx } from 'element-plus';
 
 type TableRow = {
 	status: string;
@@ -174,6 +173,38 @@ type TableRow = {
 	runMode: string;
 };
 
+type LDAPConfigForm = {
+	loginEnabled: boolean;
+	loginLabel: string;
+	serverAddress: string;
+	allowUnauthorizedCerts: boolean;
+	port: number;
+	connectionSecurity: string;
+	baseDn: string;
+	bindingType: 'admin' | 'anonymous';
+	adminDn: string;
+	adminPassword: string;
+	email: string;
+	firstName: string;
+	lastName: string;
+	loginId: string;
+	ldapId: string;
+	userFilter: string;
+	synchronizationEnabled: boolean;
+	synchronizationInterval: string;
+	pageSize: string;
+	searchTimeout: string;
+};
+
+type CellClassStyleMethodParams<T> = {
+	data: {
+		row: T;
+		rowIndex: number;
+		column: TableColumnCtx<T>;
+		columnIndex: number;
+	};
+};
+
 export default defineComponent({
 	name: 'SettingsLdapView',
 	components: {
@@ -205,10 +236,6 @@ export default defineComponent({
 			syncEnabled: false,
 		};
 	},
-	async mounted() {
-		if (!this.isLDAPFeatureEnabled) return;
-		await this.getLdapConfig();
-	},
 	computed: {
 		...mapStores(useUsersStore, useSettingsStore, useUIStore),
 		currentUser(): null | IUser {
@@ -218,11 +245,16 @@ export default defineComponent({
 			return this.settingsStore.settings.enterprise.ldap;
 		},
 	},
+	async mounted() {
+		if (!this.isLDAPFeatureEnabled) return;
+		await this.getLdapConfig();
+	},
 	methods: {
 		goToUpgrade() {
 			void this.uiStore.goToUpgrade('ldap', 'upgrade-ldap');
 		},
-		cellClassStyle({ row, column }: CellStyle<TableRow>) {
+		cellClassStyle({ data }: CellClassStyleMethodParams<TableRow>): CSSProperties {
+			const { row, column } = data;
 			if (column.property === 'status') {
 				if (row.status === 'Success') {
 					return { color: 'green' };
@@ -270,7 +302,8 @@ export default defineComponent({
 		async onSubmit(): Promise<void> {
 			// We want to save all form values (incl. the hidden onces), so we are using
 			// `values` data prop of the `FormInputs` child component since they are all preserved there
-			const formInputsRef = this.$refs.ldapConfigForm as N8nFormInputsRef | undefined;
+			const formInputsRef = this.$refs.ldapConfigForm as { values: LDAPConfigForm };
+
 			if (!this.hasAnyChanges || !formInputsRef) {
 				return;
 			}
@@ -681,7 +714,7 @@ export default defineComponent({
 				this.showError(error, this.$locale.baseText('settings.ldap.configurationError'));
 			}
 		},
-		async getLdapSynchronizations(state: { loaded: () => void; complete: () => void }) {
+		async getLdapSynchronizations(state: Parameters<Events['infinite']>[0]) {
 			try {
 				this.loadingTable = true;
 				const data = await this.settingsStore.getLdapSynchronizations({