refactor(editor): Fix remaining FE type check errors (no-changelog) (#9607)

Co-authored-by: Alex Grozav <alex@grozav.com>

packages/editor-ui/src/plugins/codemirror/completions/__tests__/mock.ts

@@ -6,6 +6,7 @@ import type {
 	IExecuteData,
 	INodeTypeData,
 } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
 import { WorkflowDataProxy } from 'n8n-workflow';
 import { createTestWorkflowObject } from '@/__tests__/mocks';
 
@@ -91,7 +92,7 @@ const connections: IConnections = {
 			[
 				{
 					node: 'Function',
-					type: 'main',
+					type: NodeConnectionType.Main,
 					index: 0,
 				},
 			],
@@ -102,7 +103,7 @@ const connections: IConnections = {
 			[
 				{
 					node: 'Rename',
-					type: 'main',
+					type: NodeConnectionType.Main,
 					index: 0,
 				},
 			],
@@ -113,7 +114,7 @@ const connections: IConnections = {
 			[
 				{
 					node: 'End',
-					type: 'main',
+					type: NodeConnectionType.Main,
 					index: 0,
 				},
 			],

packages/editor-ui/src/plugins/codemirror/completions/__tests__/variables.completions.test.ts

@@ -14,8 +14,8 @@ beforeEach(() => {
 describe('variablesCompletions', () => {
 	test('should return completions for $vars prefix', () => {
 		environmentsStore.variables = [
-			{ key: 'VAR1', value: 'Value1', id: 1 },
-			{ key: 'VAR2', value: 'Value2', id: 2 },
+			{ key: 'VAR1', value: 'Value1', id: '1' },
+			{ key: 'VAR2', value: 'Value2', id: '2' },
 		];
 
 		const state = EditorState.create({ doc: '$vars.', selection: { anchor: 6 } });
@@ -39,7 +39,7 @@ describe('variablesCompletions', () => {
 	});
 
 	test('should escape special characters in matcher', () => {
-		environmentsStore.variables = [{ key: 'VAR1', value: 'Value1', id: 1 }];
+		environmentsStore.variables = [{ key: 'VAR1', value: 'Value1', id: '1' }];
 
 		const state = EditorState.create({ doc: '$vars.', selection: { anchor: 6 } });
 		const context = new CompletionContext(state, 6, true);
@@ -49,7 +49,7 @@ describe('variablesCompletions', () => {
 	});
 
 	test('should return completions for custom matcher', () => {
-		environmentsStore.variables = [{ key: 'VAR1', value: 'Value1', id: 1 }];
+		environmentsStore.variables = [{ key: 'VAR1', value: 'Value1', id: '1' }];
 
 		const state = EditorState.create({ doc: '$custom.', selection: { anchor: 8 } });
 		const context = new CompletionContext(state, 8, true);

packages/editor-ui/src/plugins/components.ts

@@ -9,7 +9,7 @@ import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
 import RBAC from '@/components/RBAC.vue';
 import ParameterInputList from '@/components/ParameterInputList.vue';
 
-export const GlobalComponentsPlugin: Plugin<{}> = {
+export const GlobalComponentsPlugin: Plugin = {
 	install(app) {
 		const messageService = useMessage();
 
@@ -18,7 +18,7 @@ export const GlobalComponentsPlugin: Plugin<{}> = {
 		app.component('ParameterInputList', ParameterInputList);
 
 		app.use(ElementPlus);
-		app.use(N8nPlugin);
+		app.use(N8nPlugin, {});
 
 		// app.use(ElLoading);
 		// app.use(ElNotification);

packages/editor-ui/src/plugins/connectors/N8nCustomConnector.ts

@@ -169,7 +169,7 @@ export class N8nConnector extends AbstractConnector {
 
 	targetGap: number;
 
-	overrideTargetEndpoint: Endpoint | null;
+	overrideTargetEndpoint: Endpoint;
 
 	getEndpointOffset?: (e: Endpoint) => number | null;
 
@@ -517,7 +517,7 @@ export class N8nConnector extends AbstractConnector {
 	}
 
 	resetTargetEndpoint() {
-		this.overrideTargetEndpoint = null;
+		this.overrideTargetEndpoint = null as unknown as Endpoint;
 	}
 
 	_computeBezier(paintInfo: N8nConnectorPaintGeometry) {

packages/editor-ui/src/plugins/directives.ts

@@ -2,7 +2,7 @@ import type { Plugin } from 'vue';
 import VueTouchEvents from 'vue3-touch-events';
 import { vOnClickOutside } from '@vueuse/components';
 
-export const GlobalDirectivesPlugin: Plugin<{}> = {
+export const GlobalDirectivesPlugin: Plugin = {
 	install(app) {
 		app.use(VueTouchEvents);
 		app.directive('on-click-outside', vOnClickOutside);

packages/editor-ui/src/plugins/i18n/index.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vue';
 import axios from 'axios';
 import { createI18n } from 'vue-i18n';
-import { locale } from 'n8n-design-system';
+import { locale, type N8nLocaleTranslateFn } from 'n8n-design-system';
 import type { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
 
 import type { INodeTranslationHeaders } from '@/Interface';
@@ -22,6 +22,8 @@ export const i18nInstance = createI18n({
 	messages: { en: englishBaseText },
 });
 
+type BaseTextOptions = { adjustToNumber?: number; interpolate?: Record<string, string | number> };
+
 export class I18nClass {
 	private baseTextCache = new Map<string, string>();
 
@@ -48,10 +50,7 @@ export class I18nClass {
 	/**
 	 * Render a string of base text, i.e. a string with a fixed path to the localized value. Optionally allows for [interpolation](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting) when the localized value contains a string between curly braces.
 	 */
-	baseText(
-		key: BaseTextKey,
-		options?: { adjustToNumber?: number; interpolate?: Record<string, string | number> },
-	): string {
+	baseText(key: BaseTextKey, options?: BaseTextOptions): string {
 		// Create a unique cache key
 		const cacheKey = `${key}-${JSON.stringify(options)}`;
 
@@ -438,11 +437,10 @@ export function addHeaders(headers: INodeTranslationHeaders, language: string) {
 
 export const i18n: I18nClass = new I18nClass();
 
-export const I18nPlugin: Plugin<{}> = {
+export const I18nPlugin: Plugin = {
 	async install(app) {
-		locale.i18n((key: string, options?: { interpolate: Record<string, unknown> }) =>
-			i18nInstance.global.t(key, options?.interpolate || {}),
-		);
+		locale.i18n(((key: string, options?: BaseTextOptions) =>
+			i18nInstance.global.t(key, options?.interpolate ?? {})) as N8nLocaleTranslateFn);
 
 		app.config.globalProperties.$locale = i18n;
 

packages/editor-ui/src/plugins/icons/index.ts

@@ -166,7 +166,7 @@ function addIcon(icon: IconDefinition) {
 	library.add(icon);
 }
 
-export const FontAwesomePlugin: Plugin<{}> = {
+export const FontAwesomePlugin: Plugin = {
 	install: (app) => {
 		addIcon(faAngleDoubleLeft);
 		addIcon(faAngleDown);

packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts

@@ -32,8 +32,6 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 
 	messageOverlay: Overlay | null;
 
-	canvas: HTMLElement | null;
-
 	constructor(endpoint: Endpoint, params: N8nPlusEndpointParams) {
 		super(endpoint, params);
 
@@ -41,7 +39,6 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 		this.label = '';
 		this.stalkOverlay = null;
 		this.messageOverlay = null;
-		this.canvas = null;
 
 		this.unbindEvents();
 		this.bindEvents();
@@ -111,7 +108,6 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
 			this[`${fnKey}Class`]('long-stalk');
 
 			if (this.label) {
-				// @ts-expect-error: Overlay interface is missing the `canvas` property
 				stalkOverlay.canvas.setAttribute('data-label', this.label);
 			}
 		}

packages/editor-ui/src/plugins/jsplumb/index.ts

@@ -4,11 +4,13 @@ import * as N8nPlusEndpointRenderer from '@/plugins/jsplumb/N8nPlusEndpointRende
 import { N8nConnector } from '@/plugins/connectors/N8nCustomConnector';
 import * as N8nAddInputEndpointRenderer from '@/plugins/jsplumb/N8nAddInputEndpointRenderer';
 import { N8nAddInputEndpointHandler } from '@/plugins/jsplumb/N8nAddInputEndpointType';
+import type { AbstractConnector } from '@jsplumb/core';
 import { Connectors, EndpointFactory } from '@jsplumb/core';
+import type { Constructable } from '@jsplumb/util';
 
-export const JsPlumbPlugin: Plugin<{}> = {
+export const JsPlumbPlugin: Plugin = {
 	install: () => {
-		Connectors.register(N8nConnector.type, N8nConnector);
+		Connectors.register(N8nConnector.type, N8nConnector as Constructable<AbstractConnector>);
 
 		N8nPlusEndpointRenderer.register();
 		EndpointFactory.registerHandler(N8nPlusEndpointHandler);

packages/editor-ui/src/plugins/telemetry/index.ts

@@ -120,7 +120,7 @@ export class Telemetry {
 		}
 	}
 
-	page(route: Route) {
+	page(route: RouteLocation) {
 		if (this.rudderStack) {
 			if (route.path === this.previousPath) {
 				// avoid duplicate requests query is changed for example on search page
@@ -128,8 +128,8 @@ export class Telemetry {
 			}
 			this.previousPath = route.path;
 
-			const pageName = route.name;
-			let properties: { [key: string]: string } = {};
+			const pageName = String(route.name);
+			let properties: Record<string, unknown> = {};
 			if (route.meta?.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
 				properties = route.meta.telemetry.getProperties(route);
 			}
@@ -330,7 +330,7 @@ export class Telemetry {
 
 export const telemetry = new Telemetry();
 
-export const TelemetryPlugin: Plugin<{}> = {
+export const TelemetryPlugin: Plugin = {
 	install(app) {
 		app.config.globalProperties.$telemetry = telemetry;
 	},