ci: Enforce code formatting on editor-ui (no-changelog) (#5022)

* ci: Enforce code formatting on editor-ui (no-changelog)

* pnpm format on all frontend code

packages/design-system/src/components/N8nAlert/Alert.vue

@@ -45,18 +45,16 @@ const props = withDefaults(defineProps<AlertProps>(), {
 });
 
 const icon = computed(() => {
-	/* eslint-disable prettier/prettier */
 	switch (props.type) {
-	case 'success':
+		case 'success':
-		return 'check-circle';
+			return 'check-circle';
-	case 'warning':
+		case 'warning':
-		return 'exclamation-triangle';
+			return 'exclamation-triangle';
-	case 'error':
+		case 'error':
-		return 'times-circle';
+			return 'times-circle';
-	default:
+		default:
-		return 'info-circle';
+			return 'info-circle';
 	}
-	/* eslint-enable */
 });
 
 const style = useCssModule();

packages/editor-ui/.eslintrc.js

@@ -19,7 +19,6 @@ module.exports = {
 		'import/order': 'off',
 		'import/no-cycle': 'warn',
 		indent: 'off',
-		'prettier/prettier': 'off',
 		'@typescript-eslint/ban-types': 'off',
 		'@typescript-eslint/dot-notation': 'off',
 		'@typescript-eslint/lines-between-class-members': 'off',

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

@@ -273,7 +273,12 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import Modal from '@/components/Modal.vue';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import { WAIT_TIME_UNLIMITED, EXECUTIONS_MODAL_KEY, VIEWS, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
+import {
+	WAIT_TIME_UNLIMITED,
+	EXECUTIONS_MODAL_KEY,
+	VIEWS,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+} from '@/constants';
 
 import { restApi } from '@/mixins/restApi';
 import { genericHelpers } from '@/mixins/genericHelpers';
@@ -435,8 +440,14 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten
 		},
 		convertToDisplayDate,
 		displayExecution(execution: IExecutionsSummary, e: PointerEvent) {
-			if (!this.workflowsStore.workflowId || this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || execution.workflowId !== this.workflowsStore.workflowId) {
+			if (
-				const workflowExecutions: IExecutionsSummary[] = this.combinedExecutions.filter(ex => ex.workflowId === execution.workflowId);
+				!this.workflowsStore.workflowId ||
+				this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
+				execution.workflowId !== this.workflowsStore.workflowId
+			) {
+				const workflowExecutions: IExecutionsSummary[] = this.combinedExecutions.filter(
+					(ex) => ex.workflowId === execution.workflowId,
+				);
 				this.workflowsStore.currentWorkflowExecutions = workflowExecutions;
 				this.workflowsStore.activeWorkflowExecution = execution;
 			}

packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue

@@ -211,7 +211,9 @@ export default Vue.extend({
 		},
 		scrollToActiveCard(): void {
 			const executionsList = this.$refs.executionList as HTMLElement;
-			const currentExecutionCard = this.$refs[`execution-${this.workflowsStore.activeWorkflowExecution?.id}`] as Vue[];
+			const currentExecutionCard = this.$refs[
+				`execution-${this.workflowsStore.activeWorkflowExecution?.id}`
+			] as Vue[];
 
 			if (executionsList && currentExecutionCard && this.workflowsStore.activeWorkflowExecution) {
 				const cardElement = currentExecutionCard[0].$el as HTMLElement;

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

@@ -192,7 +192,7 @@ export default mixins(
 				}
 				await this.openWorkflow(this.$route.params.name);
 				this.uiStore.nodeViewInitialized = false;
-				if(this.workflowsStore.currentWorkflowExecutions.length === 0) {
+				if (this.workflowsStore.currentWorkflowExecutions.length === 0) {
 					this.setExecutions();
 				}
 				if (this.activeExecution) {

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

@@ -7,7 +7,6 @@ type Props = {
 withDefaults(defineProps<Props>(), {
 	canDrop: false,
 });
-
 </script>
 
 <template>

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

@@ -18,7 +18,7 @@
 			@dragend="onDragEnd"
 		>
 			<template #preview="{ canDrop, el }">
-				<MappingPill v-if="el" :html="getShortKey(el)"	:can-drop="canDrop" />
+				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
 			</template>
 			<template>
 				<vue-json-pretty
@@ -251,7 +251,6 @@ export default mixins(externalHooks).extend({
 		background-color: var(--color-primary-tint-2);
 	}
 }
-
 </style>
 
 <style lang="scss">

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

@@ -84,7 +84,7 @@ const onDragEnd = (el: HTMLElement) => {
 			@dragend="onDragEnd"
 		>
 			<template #preview="{ canDrop, el }">
-				<MappingPill v-if="el" :html="el.outerHTML"	:can-drop="canDrop" />
+				<MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
 			</template>
 			<template>
 				<div :class="$style.schema">
@@ -127,5 +127,4 @@ const onDragEnd = (el: HTMLElement) => {
 	display: inline-block;
 	padding: 0 var(--spacing-s) var(--spacing-s);
 }
-
 </style>

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

@@ -40,7 +40,7 @@
 								@dragend="(column) => onDragEnd(column, 'column')"
 							>
 								<template #preview="{ canDrop }">
-									<MappingPill :html="shorten(column, 16, 2)"	:can-drop="canDrop" />
+									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
 								</template>
 								<template #default="{ isDragging }">
 									<div
@@ -97,7 +97,10 @@
 				ref="draggable"
 			>
 				<template #preview="{ canDrop, el }">
-					<MappingPill :html="shorten(getPathNameFromTarget(el) || '', 16, 2)"	:can-drop="canDrop" />
+					<MappingPill
+						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
+						:can-drop="canDrop"
+					/>
 				</template>
 				<template>
 					<tr

packages/editor-ui/src/router.ts

@@ -53,7 +53,7 @@ function getTemplatesRedirect() {
 	const settingsStore = useSettingsStore();
 	const isTemplatesEnabled: boolean = settingsStore.isTemplatesEnabled;
 	if (!isTemplatesEnabled) {
-		return {name: VIEWS.NOT_FOUND};
+		return { name: VIEWS.NOT_FOUND };
 	}
 
 	return false;
@@ -75,7 +75,7 @@ const router = new Router({
 			name: VIEWS.HOMEPAGE,
 			meta: {
 				getRedirect() {
-					return {name: VIEWS.WORKFLOWS};
+					return { name: VIEWS.WORKFLOWS };
 				},
 				permissions: {
 					allow: {
@@ -450,7 +450,10 @@ const router = new Router({
 							deny: {
 								shouldDeny: () => {
 									const settingsStore = useSettingsStore();
-									return settingsStore.settings.hideUsagePage === true || settingsStore.settings.deployment?.type === 'cloud';
+									return (
+										settingsStore.settings.hideUsagePage === true ||
+										settingsStore.settings.deployment?.type === 'cloud'
+									);
 								},
 							},
 						},

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

@@ -945,8 +945,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			this.currentWorkflowExecutions.splice(this.currentWorkflowExecutions.indexOf(execution), 1);
 		},
 		addToCurrentExecutions(executions: IExecutionsSummary[]): void {
-			executions.forEach(execution => {
+			executions.forEach((execution) => {
-				const exists = this.currentWorkflowExecutions.find(ex => ex.id === execution.id);
+				const exists = this.currentWorkflowExecutions.find((ex) => ex.id === execution.id);
 				if (!exists && execution.workflowId === this.workflowId) {
 					this.currentWorkflowExecutions.push(execution);
 				}

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

@@ -18,8 +18,19 @@
 				@mouseup="mouseUp"
 				@wheel="canvasStore.wheelScroll"
 			>
-				<div id="node-view-background" class="node-view-background" :style="backgroundStyle" data-test-id="node-view-background" />
+				<div
-				<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView" data-test-id="node-view">
+					id="node-view-background"
+					class="node-view-background"
+					:style="backgroundStyle"
+					data-test-id="node-view-background"
+				/>
+				<div
+					id="node-view"
+					class="node-view"
+					:style="workflowStyle"
+					ref="nodeView"
+					data-test-id="node-view"
+				>
 					<canvas-add-button
 						:style="canvasAddButtonStyle"
 						@click="showTriggerCreator('trigger_placeholder_button')"

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

@@ -148,9 +148,7 @@ const onDialogOpened = () => {
 			</div>
 		</div>
 
-		<n8n-info-tip>{{
+		<n8n-info-tip>{{ locale.baseText('settings.usageAndPlan.activeWorkflows.hint') }}</n8n-info-tip>
-			locale.baseText('settings.usageAndPlan.activeWorkflows.hint')
-		}}</n8n-info-tip>
 
 		<div :class="$style.buttons">
 			<n8n-button