refactor: Phase out TSLint in editor-ui (no-changelog) (#4935)

* 🔥 Remove `tslint.json`

* 🔥 Remove TSLint commands

* 🔥 Remove exceptions in `editor-ui`

* 🔥 Remove from `.npmignore`

* 🔥 Remove from `eslint-config`

* 🔥 Remove exception from `design-system`

* 🎨 Prettify

* 📦 Update pnpm-lock

* 🔥 Remove duplicate import

* 🔥 Remove exemption for `no-explicit-any`

* 👕 Inline `no-explicit-any` exemptions

.npmignore

@@ -23,7 +23,6 @@ yarn-error.log*
 .editorconfig
 .eslintrc.js
 tsconfig.json
-tslint.json
 
 .turbo
 *.tsbuildinfo

packages/@n8n_io/eslint-config/package.json

@@ -14,8 +14,7 @@
     "eslint-plugin-import": "~2.26",
     "eslint-plugin-n8n-local-rules": "~1.0",
     "eslint-plugin-prettier": "~4.2",
-    "eslint-plugin-vue": "~7.17",
-    "tslint": "^6.1.3"
+    "eslint-plugin-vue": "~7.17"
   },
   "scripts": {
     "clean": "rimraf .turbo",

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts

@@ -1,4 +1,3 @@
-/* tslint:disable:variable-name */
 import N8nNodeCreatorNode from './NodeCreatorNode.vue';
 import { StoryFn } from '@storybook/vue';
 

packages/editor-ui/.eslintrc.js

@@ -28,7 +28,6 @@ module.exports = {
 		'@typescript-eslint/naming-convention': 'off',
 		'@typescript-eslint/no-duplicate-imports': 'off',
 		'@typescript-eslint/no-empty-interface': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
 		'@typescript-eslint/no-floating-promises': 'off',
 		'@typescript-eslint/no-for-in-array': 'off',
 		'@typescript-eslint/no-loop-func': 'off',

packages/editor-ui/package.json

@@ -18,8 +18,8 @@
     "build": "cross-env VUE_APP_PUBLIC_PATH=\"/{{BASE_PATH}}/\" NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
     "typecheck": "vue-tsc --emitDeclarationOnly",
     "dev": "pnpm serve",
-    "lint": "tslint -p tsconfig.json -c tslint.json && eslint --ext .js,.ts,.vue src",
-    "lintfix": "tslint --fix -p tsconfig.json -c tslint.json && eslint --ext .js,.ts,.vue src --fix",
+    "lint": "eslint --ext .js,.ts,.vue src",
+    "lintfix": "eslint --ext .js,.ts,.vue src --fix",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev",
     "test": "vitest run",

packages/editor-ui/src/Interface.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { IMenuItem } from 'n8n-design-system';
 import {
 	jsPlumbInstance,
@@ -75,19 +76,19 @@ declare module 'jsplumb' {
 			};
 		};
 
-		// bind(event: string, (connection: Connection): void;): void; // tslint:disable-line:no-any
+		// bind(event: string, (connection: Connection): void;): void;
 		bind(event: string, callback: Function): void;
 		removeOverlay(name: string): void;
 		removeOverlays(): void;
-		setParameter(name: string, value: any): void; // tslint:disable-line:no-any
+		setParameter(name: string, value: any): void;
 		setPaintStyle(arg0: PaintStyle): void;
-		addOverlay(arg0: any[]): void; // tslint:disable-line:no-any
-		setConnector(arg0: any[]): void; // tslint:disable-line:no-any
+		addOverlay(arg0: any[]): void;
+		setConnector(arg0: any[]): void;
 		getUuids(): [string, string];
 	}
 
 	interface Endpoint {
-		endpoint: any; // tslint:disable-line:no-any
+		endpoint: any;
 		elementId: string;
 		__meta?: {
 			nodeName: string;
@@ -96,7 +97,7 @@ declare module 'jsplumb' {
 			totalEndpoints: number;
 		};
 		getUuid(): string;
-		getOverlay(name: string): any; // tslint:disable-line:no-any
+		getOverlay(name: string): any;
 		repaint(params?: object): void;
 	}
 
@@ -219,7 +220,7 @@ export interface IRestApi {
 		firstId?: string | number,
 	): Promise<IExecutionsListResponse>;
 	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
-	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
+	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>;
 	getCredentialTranslation(credentialType: string): Promise<object>;
 	removeTestWebhook(workflowId: string): Promise<boolean>;
 	runWorkflow(runData: IStartRunData): Promise<IExecutionPushResponse>;

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

@@ -62,8 +62,8 @@ export default mixins(genericHelpers, debounceHelper).extend({
 
 			return 'SM';
 		},
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value(): any | undefined {
-			// tslint:disable-line:no-any
 			if (this.$props.valueXS !== undefined && this.$data.width < BREAKPOINT_SM) {
 				return this.$props.valueXS;
 			}

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

@@ -601,8 +601,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			Vue.set(this.credentialData, 'sharedWith', sharees);
 			this.hasUnsavedChanges = true;
 		},
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		onDataChange({ name, value }: { name: string; value: any }) {
-			// tslint:disable-line:no-any
 			this.hasUnsavedChanges = true;
 
 			const { oauthTokenData, ...credData } = this.credentialData;

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

@@ -139,7 +139,8 @@ export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 		},
 
 		itemSelected(eventData: IVariableItemSelected) {
-			(this.$refs.inputFieldExpression as any).itemSelected(eventData); // tslint:disable-line:no-any
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(this.$refs.inputFieldExpression as any).itemSelected(eventData);
 			this.$externalHooks().run('expressionEdit.itemSelected', {
 				parameter: this.parameter,
 				value: this.value,
@@ -215,8 +216,9 @@ export default mixins(externalHooks, genericHelpers, debounceHelper).extend({
 			this.latestValue = this.value;
 
 			const resolvedExpressionValue =
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				(this.$refs.expressionResult && (this.$refs.expressionResult as any).getValue()) ||
-				undefined; // tslint:disable-line:no-any
+				undefined;
 			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', {
 				dialogVisible: newValue,
 				parameter: this.parameter,

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue

@@ -70,7 +70,8 @@ export default Vue.extend({
 					cursor +=
 						segment.kind === 'plaintext'
 							? segment.plaintext.length
-							: (segment.resolved as any).toString().length;
+							: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+							  (segment.resolved as any).toString().length;
 
 					segment.to = cursor;
 

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue

@@ -67,7 +67,8 @@ export default Vue.extend({
 					cursor +=
 						segment.kind === 'plaintext'
 							? segment.plaintext.length
-							: (segment.resolved as any).toString().length;
+							: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+							  (segment.resolved as any).toString().length;
 					segment.to = cursor;
 					return segment;
 				})

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

@@ -87,7 +87,12 @@
 			</div>
 
 			<div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions">
-				<div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')" data-test-id="delete-node-button">
+				<div
+					v-touch:tap="deleteNode"
+					class="option"
+					:title="$locale.baseText('node.deleteNode')"
+					data-test-id="delete-node-button"
+				>
 					<font-awesome-icon icon="trash" />
 				</div>
 				<div

packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue

@@ -97,6 +97,7 @@ const draggableStyle = computed<{ top: string; left: string }>(() => ({
 
 const isCommunityNode = computed<boolean>(() => isCommunityPackageName(props.nodeType.name));
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const displayName = computed<any>(() => {
 	const displayName = props.nodeType.displayName.trimEnd();
 

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

@@ -428,6 +428,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 
 				try {
 					parameters = JSON.parse(parameters) as {
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						[key: string]: any;
 					};
 

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

@@ -444,14 +444,16 @@ export default mixins(
 				shortcuts: [
 					{
 						text: 'Today', // TODO
-						// tslint:disable-next-line:no-any
+
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						onClick(picker: any) {
 							picker.$emit('pick', new Date());
 						},
 					},
 					{
 						text: 'Yesterday', // TODO
-						// tslint:disable-next-line:no-any
+
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						onClick(picker: any) {
 							const date = new Date();
 							date.setTime(date.getTime() - 3600 * 1000 * 24);
@@ -460,7 +462,8 @@ export default mixins(
 					},
 					{
 						text: 'A week ago', // TODO
-						// tslint:disable-next-line:no-any
+
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						onClick(picker: any) {
 							const date = new Date();
 							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);

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

@@ -188,7 +188,8 @@ export default mixins(showMessage).extend({
 		focusOnTag(tagId: string) {
 			const tagOptions = (this.$refs.tag as Vue[]) || [];
 			if (tagOptions && tagOptions.length) {
-				const added = tagOptions.find((ref: any) => ref.value === tagId); // tslint:disable-line:no-any
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const added = tagOptions.find((ref: any) => ref.value === tagId);
 			}
 		},
 		focusOnInput() {

packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue

@@ -171,7 +171,8 @@ export default Vue.extend({
 
 		focusOnInput(): void {
 			setTimeout(() => {
-				const input = this.$refs.nameInput as any; // tslint:disable-line:no-any
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const input = this.$refs.nameInput as any;
 				if (input && input.focus) {
 					input.focus();
 				}
@@ -180,7 +181,8 @@ export default Vue.extend({
 
 		focusOnDelete(): void {
 			setTimeout(() => {
-				const input = this.$refs.deleteHiddenInput as any; // tslint:disable-line:no-any
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const input = this.$refs.deleteHiddenInput as any;
 				if (input && input.focus) {
 					input.focus();
 				}

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

@@ -259,7 +259,10 @@
 						</div>
 					</el-col>
 				</el-row>
-				<div v-if="workflowSettings.executionTimeout > -1" data-test-id="workflow-settings-timeout-form">
+				<div
+					v-if="workflowSettings.executionTimeout > -1"
+					data-test-id="workflow-settings-timeout-form"
+				>
 					<el-row>
 						<el-col :span="10" class="setting-name">
 							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
@@ -334,7 +337,11 @@ import {
 	WorkflowCallerPolicyDefaultOption,
 } from '@/Interface';
 import Modal from './Modal.vue';
-import {EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY} from '../constants';
+import {
+	EnterpriseEditionFeature,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from '../constants';
 
 import mixins from 'vue-typed-mixins';
 
@@ -409,7 +416,9 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten
 			return this.workflowsStore.workflowId;
 		},
 		isWorkflowSharingEnabled(): boolean {
-			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing);
+			return this.settingsStore.isEnterpriseFeatureEnabled(
+				EnterpriseEditionFeature.WorkflowSharing,
+			);
 		},
 	},
 	async mounted() {

packages/editor-ui/src/mixins/debounce.ts

@@ -4,11 +4,11 @@ import Vue from 'vue';
 export const debounceHelper = Vue.extend({
 	data() {
 		return {
-			debouncedFunctions: [] as any[], // tslint:disable-line:no-any
+			debouncedFunctions: [] as any[],
 		};
 	},
 	methods: {
-		// tslint:disable-next-line:no-any
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		async callDebounced(...inputParameters: any[]): Promise<void> {
 			const functionName = inputParameters.shift() as string;
 			const { trailing, debounceTime } = inputParameters.shift();

packages/editor-ui/src/mixins/emitter.ts

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import Vue from 'vue';
 
-// tslint:disable-next-line:no-any
 function broadcast(componentName: string, eventName: string, params: any) {
 	// @ts-ignore
 	(this as Vue).$children.forEach((child) => {
@@ -19,7 +19,6 @@ function broadcast(componentName: string, eventName: string, params: any) {
 
 export default Vue.extend({
 	methods: {
-		// tslint:disable-next-line:no-any
 		$dispatch(componentName: string, eventName: string, params: any) {
 			let parent = this.$parent || this.$root;
 			let name = parent.$options.name;
@@ -37,7 +36,7 @@ export default Vue.extend({
 				parent.$emit.apply(parent, [eventName].concat(params));
 			}
 		},
-		// tslint:disable-next-line:no-any
+
 		$broadcast(componentName: string, eventName: string, params: any) {
 			broadcast.call(this, componentName, eventName, params);
 		},

packages/editor-ui/src/mixins/genericHelpers.ts

@@ -6,7 +6,8 @@ import mixins from 'vue-typed-mixins';
 export const genericHelpers = mixins(showMessage).extend({
 	data() {
 		return {
-			loadingService: null as any | null, // tslint:disable-line:no-any
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			loadingService: null as any | null,
 		};
 	},
 	computed: {

packages/editor-ui/src/mixins/restApi.ts

@@ -65,7 +65,7 @@ export const restApi = Vue.extend({
 					method: Method,
 					endpoint: string,
 					data?: IDataObject,
-					// tslint:disable-next-line:no-any
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				): Promise<any> {
 					return makeRestApiRequest(self.rootStore.getRestApiContext, method, endpoint, data);
 				},

packages/editor-ui/src/mixins/workflowHelpers.ts

@@ -68,7 +68,6 @@ import { useTemplatesStore } from '@/stores/templates';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsEEStore } from '@/stores/workflows.ee';
-import { ICredentialMap, ICredentialsResponse, IUsedCredential } from '@/Interface';
 import { getWorkflowPermissions, IPermissions } from '@/permissions';
 import { ICredentialsResponse } from '@/Interface';
 

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

@@ -124,7 +124,7 @@ import {
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-// tslint:disable-next-line:no-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function addIcon(icon: any) {
 	library.add(icon as IconDefinition);
 }

packages/editor-ui/src/shims.d.ts

@@ -10,9 +10,7 @@ declare global {
 	}
 
 	namespace JSX {
-		// tslint:disable no-empty-interface
 		interface Element extends VNode {}
-		// tslint:disable no-empty-interface
 		interface ElementClass extends Vue {}
 		interface IntrinsicElements {
 			[elem: string]: any;

packages/editor-ui/src/stores/nodeTypes.ts

@@ -125,7 +125,6 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, {
 			Vue.set(this, 'nodeTypes', nodeTypes);
 
 			// Trigger compute of mergedAppNodes getter so it's ready when user opens the node creator
-			// tslint:disable-next-line: no-unused-expression
 			useNodeCreatorStore().mergedAppNodes;
 		},
 		removeNodeTypes(nodeTypesToRemove: INodeTypeDescription[]): void {

packages/editor-ui/src/stores/workflows.ts

@@ -557,7 +557,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			][sourceData.index]) {
 				for (propertyName of checkProperties) {
 					if (
-						// tslint:disable-next-line:no-any
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						(existingConnection as any)[propertyName] !== (destinationData as any)[propertyName]
 					) {
 						continue connectionLoop;

packages/editor-ui/src/utils/sortUtils.ts

@@ -202,7 +202,8 @@ function getValue<T extends object>(obj: T, prop: string): unknown {
 	}
 
 	const segments = prop.split('.');
-	let result: any = obj; // tslint:disable-line:no-any
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let result: any = obj;
 	let i = 0;
 	while (result && i < segments.length) {
 		result = result[segments[i]];

packages/editor-ui/src/views/NodeView.vue

@@ -2401,6 +2401,7 @@ export default mixins(
 			this.canvasStore.setZoomLevel(1, 0);
 			this.canvasStore.zoomToFit();
 		},
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		tryToAddWelcomeSticky: once(async function (this: any) {
 			const newWorkflow = this.workflowData;
 			if (window.posthog?.getFeatureFlag?.('welcome-note') === 'test') {