fix(editor): Fix Vue 3 linting issues (#6748)

* fix(editor): Fix Vue 3 linting issues Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix MainSidebar linter issues * revert pnpm lock * update pnpm lock file --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com>
n8n-io · Jul 26, 2023 · bcbe790 · bcbe790
1 parent dab3d3a
commit bcbe790
Show file tree

Hide file tree

Showing 22 changed files with 266 additions and 371 deletions.
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
@@ -69,14 +69,15 @@ export default defineComponent({
 		Modals,
 	},
 	mixins: [newVersions, userHelpers],
-	setup(props) {
+	async setup(props) {
+		const newVersionsSetup = await newVersions.setup?.(props);
+
 		return {
 			...useGlobalLinkActions(),
 			...useHistoryHelper(useRoute()),
 			...useToast(),
 			externalHooks: useExternalHooks(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...newVersions.setup?.(props),
+			...newVersionsSetup,
 		};
 	},
 	computed: {

diff --git a/packages/editor-ui/src/__tests__/utils.ts b/packages/editor-ui/src/__tests__/utils.ts
@@ -1,6 +1,5 @@
 import type { ISettingsState } from '@/Interface';
 import { UserManagementAuthenticationMethod } from '@/Interface';
-import { render } from '@testing-library/vue';
 
 export const retry = async (assertion: () => any, { interval = 20, timeout = 1000 } = {}) => {
 	return new Promise((resolve, reject) => {

diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -41,12 +41,12 @@ export default defineComponent({
 		onResize() {
 			void this.callDebounced('onResizeEnd', { debounceTime: 50 });
 		},
-		onResizeEnd() {
+		async onResizeEnd() {
 			this.width = window.innerWidth;
-			void this.$nextTick(async () => {
-				const bannerHeight = await getBannerRowHeight();
-				useUIStore().updateBannersHeight(bannerHeight);
-			});
+			await this.$nextTick();
+
+			const bannerHeight = await getBannerRowHeight();
+			useUIStore().updateBannersHeight(bannerHeight);
 		},
 	},
 	computed: {

diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -98,18 +98,17 @@ export default defineComponent({
 			}
 		},
 	},
-	mounted() {
-		void this.$nextTick(() => {
-			const sliderRef = this.$refs.slider as SliderRef | undefined;
-			if (!sliderRef) {
-				return;
-			}
+	async mounted() {
+		await this.$nextTick();
+		const sliderRef = this.$refs.slider as SliderRef | undefined;
+		if (!sliderRef) {
+			return;
+		}
 
-			this.listElement = sliderRef.$el.querySelector('.agile__list');
-			if (this.listElement) {
-				this.listElement.addEventListener('scroll', this.updateCarouselScroll);
-			}
-		});
+		this.listElement = sliderRef.$el.querySelector('.agile__list');
+		if (this.listElement) {
+			this.listElement.addEventListener('scroll', this.updateCarouselScroll);
+		}
 	},
 	beforeUnmount() {
 		const sliderRef = this.$refs.slider as SliderRef | undefined;

diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -89,7 +89,8 @@ export default defineComponent({
 	},
 	async mounted() {
 		this.name = await this.workflowsStore.getDuplicateCurrentWorkflowName(this.data.name);
-		void this.$nextTick(() => this.focusOnNameInput());
+		await this.$nextTick();
+		this.focusOnNameInput();
 	},
 	computed: {
 		...mapStores(useCredentialsStore, useUsersStore, useSettingsStore, useWorkflowsStore),

diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -22,14 +22,13 @@ export default defineComponent({
 			default: () => createEventBus(),
 		},
 	},
-	mounted() {
+	async mounted() {
 		if (!this.enabled) {
 			return;
 		}
 
-		void this.$nextTick(() => {
-			this.eventBus.emit('observe', this.$refs.observed);
-		});
+		await this.$nextTick();
+		this.eventBus.emit('observe', this.$refs.observed);
 	},
 	beforeUnmount() {
 		if (this.enabled) {

diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -39,12 +39,13 @@ export default defineComponent({
 		TabBar,
 	},
 	mixins: [pushConnection, workflowHelpers],
-	setup(props) {
+	async setup(props) {
+		const pushConnectionSetup = await pushConnection.setup?.(props);
+		const workflowHelpersSetup = await workflowHelpers.setup?.(props);
+
 		return {
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowHelpers.setup?.(props),
+			...pushConnectionSetup,
+			...workflowHelpersSetup,
 		};
 	},
 	data() {

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
@@ -135,11 +135,11 @@ export default defineComponent({
 		MainSidebarSourceControl,
 	},
 	mixins: [genericHelpers, workflowHelpers, workflowRun, userHelpers, debounceHelper],
-	setup(props) {
+	async setup(props) {
+		const workflowRunSetup = await workflowRun.setup?.(props);
 		return {
 			...useMessage(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRunSetup,
 		};
 	},
 	data() {
@@ -478,16 +478,15 @@ export default defineComponent({
 		onResize(event: UIEvent) {
 			void this.callDebounced('onResizeEnd', { debounceTime: 100 }, event);
 		},
-		onResizeEnd(event: UIEvent) {
+		async onResizeEnd(event: UIEvent) {
 			const browserWidth = (event.target as Window).outerWidth;
-			this.checkWidthAndAdjustSidebar(browserWidth);
+			await this.checkWidthAndAdjustSidebar(browserWidth);
 		},
-		checkWidthAndAdjustSidebar(width: number) {
+		async checkWidthAndAdjustSidebar(width: number) {
 			if (width < 900) {
 				this.uiStore.sidebarMenuCollapsed = true;
-				this.$nextTick(() => {
-					this.fullyExpanded = !this.isCollapsed;
-				});
+				await this.$nextTick();
+				this.fullyExpanded = !this.isCollapsed;
 			}
 		},
 	},

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
@@ -569,28 +569,26 @@ export default defineComponent({
 				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
-		deleteNode() {
+		async deleteNode() {
 			this.$telemetry.track('User clicked node hover button', {
 				node_type: this.data.type,
 				button_name: 'delete',
 				workflow_id: this.workflowsStore.workflowId,
 			});
 
-			void this.$nextTick(() => {
-				// Wait a tick else vue causes problems because the data is gone
-				this.$emit('removeNode', this.data.name);
-			});
+			// Wait a tick else vue causes problems because the data is gone
+			await this.$nextTick();
+			this.$emit('removeNode', this.data.name);
 		},
-		duplicateNode() {
+		async duplicateNode() {
 			this.$telemetry.track('User clicked node hover button', {
 				node_type: this.data.type,
 				button_name: 'duplicate',
 				workflow_id: this.workflowsStore.workflowId,
 			});
-			void this.$nextTick(() => {
-				// Wait a tick else vue causes problems because the data is gone
-				this.$emit('duplicateNode', this.data.name);
-			});
+			// Wait a tick else vue causes problems because the data is gone
+			await this.$nextTick();
+			this.$emit('duplicateNode', this.data.name);
 		},
 
 		onClick(event: MouseEvent) {

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -188,12 +188,13 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup(props) {
+	async setup(props) {
+		const workflowActivateSetup = await workflowActivate.setup?.(props);
+
 		return {
 			...useDeviceSupport(),
 			...useMessage(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props),
+			...workflowActivateSetup,
 		};
 	},
 	data() {

diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -60,12 +60,12 @@ export default defineComponent({
 			type: String,
 		},
 	},
-	setup(props) {
+	async setup(props) {
+		const workflowRunSetup = await workflowRun.setup?.(props);
 		return {
 			...useToast(),
 			...useMessage(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowRun.setup?.(props),
+			...workflowRunSetup,
 		};
 	},
 	computed: {

diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
@@ -71,15 +71,14 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		onEdit() {
+		async onEdit() {
 			this.newName = this.modelValue;
 			this.editName = true;
-			void this.$nextTick(() => {
-				const inputRef = this.$refs.input as HTMLInputElement | undefined;
-				if (inputRef) {
-					inputRef.focus();
-				}
-			});
+			await this.$nextTick();
+			const inputRef = this.$refs.input as HTMLInputElement | undefined;
+			if (inputRef) {
+				inputRef.focus();
+			}
 		},
 		onRename() {
 			if (this.newName.trim() !== '') {

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
@@ -975,7 +975,7 @@ export default defineComponent({
 		onResourceLocatorDrop(data: string) {
 			this.$emit('drop', data);
 		},
-		setFocus() {
+		async setFocus() {
 			if (['json'].includes(this.parameter.type) && this.getArgument('alwaysOpenEditWindow')) {
 				this.displayEditDialog();
 				return;
@@ -991,14 +991,13 @@ export default defineComponent({
 				this.nodeName = this.node.name;
 			}
 
-			void this.$nextTick(() => {
+			await this.$nextTick();
+			// @ts-ignore
+			if (this.$refs.inputField?.focus && this.$refs.inputField?.$el) {
 				// @ts-ignore
-				if (this.$refs.inputField?.focus && this.$refs.inputField?.$el) {
-					// @ts-ignore
-					this.$refs.inputField.focus();
-					this.isFocused = true;
-				}
-			});
+				this.$refs.inputField.focus();
+				this.isFocused = true;
+			}
 
 			this.$emit('focus');
 		},
@@ -1082,7 +1081,7 @@ export default defineComponent({
 				});
 			}
 		},
-		optionSelected(command: string) {
+		async optionSelected(command: string) {
 			const prevValue = this.modelValue;
 
 			if (command === 'resetValue') {
@@ -1109,7 +1108,7 @@ export default defineComponent({
 					this.valueChanged(`=${this.modelValue}`);
 				}
 
-				this.setFocus();
+				await this.setFocus();
 			} else if (command === 'removeExpression') {
 				let value: NodeParameterValueType = this.expressionEvaluated;
 
@@ -1161,14 +1160,13 @@ export default defineComponent({
 			}
 		},
 	},
-	updated() {
-		void this.$nextTick(() => {
-			const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
+	async updated() {
+		await this.$nextTick();
+		const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
 
-			if (remoteParameterOptions.length > 0) {
-				void this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
-			}
-		});
+		if (remoteParameterOptions.length > 0) {
+			void this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
+		}
 	},
 	mounted() {
 		this.eventBus.on('optionSelected', this.optionSelected);

diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -355,7 +355,7 @@ export default defineComponent({
 		onTypeSelectInput(destinationType: MessageEventBusDestinationTypeNames) {
 			this.typeSelectValue = destinationType;
 		},
-		onContinueAddClicked() {
+		async onContinueAddClicked() {
 			let newDestination;
 			switch (this.typeSelectValue) {
 				case MessageEventBusDestinationTypeNames.syslog:

diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
@@ -162,11 +162,10 @@ export default defineComponent({
 		};
 	},
 	methods: {
-		deleteNode() {
-			void this.$nextTick(() => {
-				// Wait a tick else vue causes problems because the data is gone
-				this.$emit('removeNode', this.data.name);
-			});
+		async deleteNode() {
+			// Wait a tick else vue causes problems because the data is gone
+			await this.$nextTick();
+			this.$emit('removeNode', this.data.name);
 		},
 		onEdit(edit: boolean) {
 			if (edit && !this.isActive && this.node) {

diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
@@ -62,11 +62,10 @@ export default defineComponent({
 		this.tempValue = this.modelValue as string;
 	},
 	watch: {
-		dialogVisible() {
+		async dialogVisible() {
 			if (this.dialogVisible === true) {
-				void nextTick(() => {
-					(this.$refs.inputField as HTMLInputElement).focus();
-				});
+				await nextTick();
+				(this.$refs.inputField as HTMLInputElement).focus();
 			}
 		},
 		modelValue(value: string) {

diff --git a/packages/editor-ui/src/components/VariablesRow.vue b/packages/editor-ui/src/components/VariablesRow.vue
@@ -79,12 +79,11 @@ const valueValidationRules: Array<Rule | RuleGroup> = [
 
 watch(
 	() => modelValue.value.key,
-	() => {
-		void nextTick(() => {
-			if (formValidationStatus.value.key) {
-				updateUsageSyntax();
-			}
-		});
+	async () => {
+		await nextTick();
+		if (formValidationStatus.value.key) {
+			updateUsageSyntax();
+		}
 	},
 );
 

diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -62,11 +62,11 @@ export default defineComponent({
 	name: 'WorkflowActivator',
 	props: ['workflowActive', 'workflowId'],
 	mixins: [workflowActivate],
-	setup(props) {
+	async setup(props) {
+		const workflowActivateSetup = await workflowActivate.setup?.(props);
 		return {
 			...useToast(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowActivate.setup?.(props),
+			...workflowActivateSetup,
 		};
 	},
 	computed: {