From e8d948e942b525a1ab79a30868833dd631dda567 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 21 Jun 2023 16:54:59 +0300
Subject: [PATCH] fix: editor kind of working, lots of issues to fix

---
 .../src/components/N8nDatatable/Datatable.vue |  2 +-
 .../src/components/N8nLoading/Loading.vue     |  4 +-
 .../src/components/N8nMenuItem/MenuItem.vue   |  2 +-
 .../src/components/N8nPopover/Popover.vue     |  4 +-
 .../components/N8nUserSelect/UserSelect.vue   |  2 +-
 .../src/css/common/transition.scss            | 20 ++---
 packages/design-system/src/css/dialog.scss    | 11 +++
 packages/design-system/src/locale/index.ts    |  2 -
 packages/editor-ui/src/App.vue                |  5 ++
 packages/editor-ui/src/components/Banner.vue  |  2 +-
 .../CodeNodeEditor/CodeNodeEditor.vue         | 10 +--
 .../src/components/CollectionWorkflowCard.vue |  2 +-
 .../src/components/ExecutionFilter.vue        |  6 +-
 .../src/components/ExecutionsList.vue         |  2 +-
 .../src/components/ExecutionsUsage.vue        |  2 +-
 .../ExpandableInput/ExpandableInputBase.vue   |  4 +-
 .../ExpandableInput/ExpandableInputEdit.vue   |  2 +-
 .../ExpandableInputPreview.vue                |  6 +-
 .../src/components/ExpressionEdit.vue         |  2 +-
 .../src/components/InlineTextEdit.vue         |  6 +-
 .../editor-ui/src/components/InputPanel.vue   |  2 +-
 .../components/MainHeader/WorkflowDetails.vue |  4 +-
 .../editor-ui/src/components/MainSidebar.vue  |  4 +-
 packages/editor-ui/src/components/Modal.vue   |  6 +-
 .../NodeCreator/ItemTypes/CategoryItem.vue    |  2 +-
 .../Node/NodeCreator/Modes/ActionsMode.vue    | 19 ++--
 .../Node/NodeCreator/NodeCreator.vue          |  3 +-
 .../Node/NodeCreator/Panel/NodesListPanel.vue |  4 +-
 .../Renderers/CategorizedItemsRenderer.vue    |  2 +-
 .../src/components/NodeDetailsView.vue        |  2 +-
 .../editor-ui/src/components/NodeSettings.vue |  4 +-
 .../src/components/ParameterInput.vue         | 90 ++++++++++---------
 .../src/components/ParameterInputWrapper.vue  |  2 +-
 .../src/components/ParameterOptions.vue       |  3 +-
 packages/editor-ui/src/components/RunData.vue |  8 +-
 .../editor-ui/src/components/RunDataTable.vue |  2 +-
 .../editor-ui/src/components/TagsDropdown.vue |  1 -
 .../editor-ui/src/components/TextEdit.vue     |  2 +-
 .../src/components/WorkflowShareModal.ee.vue  |  2 +-
 .../forms/ResourceFiltersDropdown.vue         |  2 +-
 .../layouts/ResourcesListLayout.vue           |  3 +-
 .../transitions/SlideTransition.vue           |  2 +-
 .../editor-ui/src/views/CredentialsView.vue   |  1 -
 .../editor-ui/src/views/SettingsApiView.vue   |  2 +-
 .../src/views/SettingsUsageAndPlan.vue        |  6 +-
 .../src/views/SettingsVersionControl.vue      |  6 +-
 .../editor-ui/src/views/WorkflowsView.vue     |  6 +-
 47 files changed, 153 insertions(+), 133 deletions(-)

diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
index 9d3d760a65..2da5734871 100644
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -159,7 +159,7 @@ export default defineComponent({
 					size="mini"
 					:value="rowsPerPage"
 					@update:modelValue="onRowsPerPageChange"
-					popper-append-to-body
+					teleported
 				>
 					<template #prepend>{{ t('datatable.pageSize') }}</template>
 					<n8n-option
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 29e0d4fdc9..29b62cba92 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -28,7 +28,7 @@
 				</div>
 			</div>
 			<div :class="$style.custom" v-else-if="variant === 'custom'">
-				<el-skeleton-item :variant="variant" />
+				<el-skeleton-item />
 			</div>
 			<el-skeleton-item v-else :variant="variant" />
 		</template>
@@ -98,7 +98,7 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
-.n8n-loading-custom .el-skeleton {
+.n8n-loading-custom.el-skeleton {
 	&,
 	.el-skeleton__item {
 		width: 100%;
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 3eef68f87b..d128bb7658 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -9,7 +9,7 @@
 				[$style.active]: mode === 'router' && isItemActive(item),
 			}"
 			:index="item.id"
-			popper-append-to-body
+			teleported
 			:popper-class="`${$style.submenuPopper} ${popperClass}`"
 		>
 			<template #title>
diff --git a/packages/design-system/src/components/N8nPopover/Popover.vue b/packages/design-system/src/components/N8nPopover/Popover.vue
index aa2d4eb98b..352eb6053c 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.vue
+++ b/packages/design-system/src/components/N8nPopover/Popover.vue
@@ -16,8 +16,8 @@ export default defineComponent({
 <template>
 	<el-popover v-bind="{ ...$props, ...$attrs }">
 		<template #reference>
-			<slot />
+			<slot name="reference" />
 		</template>
-		<slot name="content" />
+		<slot />
 	</el-popover>
 </template>
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index 218d057970..9615ac5a34 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -6,7 +6,7 @@
 		:filterMethod="setFilter"
 		:placeholder="placeholder"
 		:default-first-option="true"
-		:popper-append-to-body="true"
+		teleported
 		:popper-class="$style.limitPopperWidth"
 		:noDataText="t('nds.userSelect.noMatchingUsers')"
 		:size="size"
diff --git a/packages/design-system/src/css/common/transition.scss b/packages/design-system/src/css/common/transition.scss
index ce49d94895..26c8c1d448 100644
--- a/packages/design-system/src/css/common/transition.scss
+++ b/packages/design-system/src/css/common/transition.scss
@@ -4,8 +4,8 @@
 .fade-in-linear-leave-active {
 	transition: var.$fade-linear-transition;
 }
-.fade-in-linear-enter,
-.fade-in-linear-leave,
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-from,
 .fade-in-linear-leave-active {
 	opacity: 0;
 }
@@ -14,8 +14,8 @@
 .el-fade-in-linear-leave-active {
 	transition: var.$fade-linear-transition;
 }
-.el-fade-in-linear-enter,
-.el-fade-in-linear-leave,
+.el-fade-in-linear-enter-from,
+.el-fade-in-linear-leave-from,
 .el-fade-in-linear-leave-active {
 	opacity: 0;
 }
@@ -24,7 +24,7 @@
 .el-fade-in-leave-active {
 	transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.el-fade-in-enter,
+.el-fade-in-enter-from,
 .el-fade-in-leave-active {
 	opacity: 0;
 }
@@ -33,7 +33,7 @@
 .el-zoom-in-center-leave-active {
 	transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.el-zoom-in-center-enter,
+.el-zoom-in-center-enter-from,
 .el-zoom-in-center-leave-active {
 	opacity: 0;
 	transform: scaleX(0);
@@ -46,7 +46,7 @@
 	transition: var.$md-fade-transition;
 	transform-origin: center top;
 }
-.el-zoom-in-top-enter,
+.el-zoom-in-top-enter-from,
 .el-zoom-in-top-leave-active {
 	opacity: 0;
 	transform: scaleY(0);
@@ -59,7 +59,7 @@
 	transition: var.$md-fade-transition;
 	transform-origin: center bottom;
 }
-.el-zoom-in-bottom-enter,
+.el-zoom-in-bottom-enter-from,
 .el-zoom-in-bottom-leave-active {
 	opacity: 0;
 	transform: scaleY(0);
@@ -72,7 +72,7 @@
 	transition: var.$md-fade-transition;
 	transform-origin: top left;
 }
-.el-zoom-in-left-enter,
+.el-zoom-in-left-enter-from,
 .el-zoom-in-left-leave-active {
 	opacity: 0;
 	transform: scale(0.45, 0.45);
@@ -89,7 +89,7 @@
 .el-list-leave-active {
 	transition: all 1s;
 }
-.el-list-enter,
+.el-list-enter-from,
 .el-list-leave-active {
 	opacity: 0;
 	transform: translateY(-30px);
diff --git a/packages/design-system/src/css/dialog.scss b/packages/design-system/src/css/dialog.scss
index 09eddb78eb..b2b1c19152 100644
--- a/packages/design-system/src/css/dialog.scss
+++ b/packages/design-system/src/css/dialog.scss
@@ -3,6 +3,17 @@
 @use './common/var';
 @use 'common/popup';
 
+@include mixins.b(overlay) {
+	width: 100%;
+	height: 100%;
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	padding: var(--spacing-2xl);
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
 @include mixins.b(dialog) {
 	position: relative;
 	margin: 0 auto 50px;
diff --git a/packages/design-system/src/locale/index.ts b/packages/design-system/src/locale/index.ts
index d616df517e..4688b6a5ba 100644
--- a/packages/design-system/src/locale/index.ts
+++ b/packages/design-system/src/locale/index.ts
@@ -36,8 +36,6 @@ export async function use(l: string) {
 	try {
 		const ndsLang = (await import(`./lang/${l}.ts`)) as { default: N8nLocale };
 
-		console.log('ndsLang', ndsLang);
-
 		lang = ndsLang.default;
 
 		// todo breaks select empty data
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index d1930dd77c..4298029f1e 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -276,6 +276,11 @@ export default defineComponent({
 	height: 100vh;
 	width: 100%;
 	justify-content: center;
+
+	main {
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .header {
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 8b48fe6883..45fd870516 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-tag :type="theme" size="medium" :disable-transitions="true" :class="$style.container">
+	<el-tag :type="theme" :disable-transitions="true" :class="$style.container">
 		<font-awesome-icon
 			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
 			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 9deed663d1..66a270b8fe 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -66,7 +66,7 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		value: {
+		modelValue: {
 			type: String,
 		},
 	},
@@ -209,8 +209,8 @@ export default defineComponent({
 		if (!this.isReadOnly) codeNodeEditorEventBus.on('error-line-number', this.highlightLine);
 
 		// empty on first load, default param value
-		if (!this.value) {
-			this.$emit('valueChanged', this.placeholder);
+		if (!this.modelValue) {
+			this.$emit('update:modelValue', this.placeholder);
 		}
 
 		const { isReadOnly, language } = this;
@@ -242,7 +242,7 @@ export default defineComponent({
 
 					this.trackCompletion(viewUpdate);
 
-					this.$emit('valueChanged', this.editor?.state.doc.toString());
+					this.$emit('update:modelValue', this.editor?.state.doc.toString());
 				}),
 			);
 		}
@@ -251,7 +251,7 @@ export default defineComponent({
 		extensions.push(this.languageCompartment.of(languageSupport), ...otherExtensions);
 
 		const state = EditorState.create({
-			doc: this.value || this.placeholder,
+			doc: this.modelValue || this.placeholder,
 			extensions,
 		});
 
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 630d638873..b7775bc973 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-card :class="$style.card" v-on="$listeners">
+	<n8n-card :class="$style.card" v-bind="$attrs">
 		<template #header v-if="!loading">
 			<span v-text="title" :class="$style.title" />
 		</template>
diff --git a/packages/editor-ui/src/components/ExecutionFilter.vue b/packages/editor-ui/src/components/ExecutionFilter.vue
index 4f686967a5..3e1487eb63 100644
--- a/packages/editor-ui/src/components/ExecutionFilter.vue
+++ b/packages/editor-ui/src/components/ExecutionFilter.vue
@@ -244,7 +244,7 @@ onBeforeMount(() => {
 				<div :class="$style.group">
 					<n8n-tooltip placement="right">
 						<template #content>
-							<i18n-t tag="span" path="executionsFilter.customData.docsTooltip">
+							<i18n-t tag="span" keypath="executionsFilter.customData.docsTooltip">
 								<template #link>
 									<a
 										target="_blank"
@@ -266,7 +266,7 @@ onBeforeMount(() => {
 						}}</label>
 						<n8n-tooltip :disabled="isAdvancedExecutionFilterEnabled" placement="top">
 							<template #content>
-								<i18n-t tag="span" path="executionsFilter.customData.inputTooltip">
+								<i18n-t tag="span" keypath="executionsFilter.customData.inputTooltip">
 									<template #link>
 										<a
 											href="#"
@@ -294,7 +294,7 @@ onBeforeMount(() => {
 						}}</label>
 						<n8n-tooltip :disabled="isAdvancedExecutionFilterEnabled" placement="top">
 							<template #content>
-								<i18n-t tag="span" path="executionsFilter.customData.inputTooltip">
+								<i18n-t tag="span" keypath="executionsFilter.customData.inputTooltip">
 									<template #link>
 										<a href="#" @click.prevent="goToUpgrade">{{
 											locale.baseText('executionsFilter.customData.inputTooltip.link')
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 3d41f88388..aec976ce3b 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -95,7 +95,7 @@
 								</span>
 								<i18n-t
 									v-if="!isWaitTillIndefinite(execution)"
-									:path="getStatusTextTranslationPath(execution)"
+									:keypath="getStatusTextTranslationPath(execution)"
 								>
 									<template #status>
 										<span :class="$style.status">{{ getStatusText(execution) }}</span>
diff --git a/packages/editor-ui/src/components/ExecutionsUsage.vue b/packages/editor-ui/src/components/ExecutionsUsage.vue
index ae6aa2aec0..b11acb7888 100644
--- a/packages/editor-ui/src/components/ExecutionsUsage.vue
+++ b/packages/editor-ui/src/components/ExecutionsUsage.vue
@@ -6,7 +6,7 @@
 			</n8n-text>
 		</div>
 		<div v-else-if="!isTrialExpired && trialHasExecutionsLeft" :class="$style.usageText">
-			<i18n-t path="executionUsage.currentUsage">
+			<i18n-t keypath="executionUsage.currentUsage">
 				<template #text>
 					<n8n-text size="small" color="text-dark">
 						{{ locale.baseText('executionUsage.currentUsage.text') }}
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index 5d0c57ef24..ba4ca6f41b 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -10,10 +10,10 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	name: 'ExpandableInputBase',
-	props: ['value', 'placeholder', 'staticSize'],
+	props: ['modelValue', 'placeholder', 'staticSize'],
 	computed: {
 		hiddenValue() {
-			let value = (this.value as string).replace(/\s/g, '.'); // force input to expand on space chars
+			let value = (this.modelValue as string).replace(/\s/g, '.'); // force input to expand on space chars
 			if (!value) {
 				// @ts-ignore
 				value = this.placeholder;
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index a040829520..3040c4f016 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -1,5 +1,5 @@
 <template>
-	<ExpandableInputBase :value="modelValue" :placeholder="placeholder">
+	<ExpandableInputBase :modelValue="modelValue" :placeholder="placeholder">
 		<input
 			class="el-input__inner"
 			:value="modelValue"
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index 4820297941..b7f9f43495 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -1,9 +1,9 @@
 <template>
-	<ExpandableInputBase :value="value" :staticSize="true">
+	<ExpandableInputBase :modelValue="modelValue" :staticSize="true">
 		<template>
 			<input
 				:class="{ 'el-input__inner': true, clickable: true }"
-				:value="value"
+				:value="modelValue"
 				:disabled="true"
 				size="4"
 			/>
@@ -18,7 +18,7 @@ import ExpandableInputBase from './ExpandableInputBase.vue';
 export default defineComponent({
 	name: 'ExpandableInputPreview',
 	components: { ExpandableInputBase },
-	props: ['value'],
+	props: ['modelValue'],
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 70046dd17b..b41f4baf96 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="dialogVisible" @keydown.stop>
 		<el-dialog
-			:visible="dialogVisible"
+			:modelValue="dialogVisible"
 			class="expression-dialog classic"
 			append-to-body
 			width="80%"
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 793f414ef3..d47e705df0 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -15,7 +15,7 @@
 		</span>
 
 		<span @click="onClick" class="preview" v-else>
-			<ExpandableInputPreview :value="previewValue || value" />
+			<ExpandableInputPreview :modelValue="previewValue || modelValue" />
 		</span>
 	</span>
 </template>
@@ -34,7 +34,7 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -75,7 +75,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$data.newValue = this.value;
+			this.$data.newValue = this.modelValue;
 			this.$emit('toggle');
 		},
 		onBlur() {
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 1910f49b5b..8e91e5ef27 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -25,7 +25,7 @@
 			<div :class="$style.titleSection">
 				<n8n-select
 					v-if="parentNodes.length"
-					:popper-append-to-body="true"
+					teleported
 					size="small"
 					:modelValue="currentNodeName"
 					@update:modelValue="onSelect"
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index f636db8114..ee9c208331 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -10,7 +10,7 @@
 				>
 					<template #default="{ shortenedName }">
 						<InlineTextEdit
-							:value="workflowName"
+							:modelValue="workflowName"
 							:previewValue="shortenedName"
 							:isEditEnabled="isNameEditEnabled"
 							:maxLength="MAX_WORKFLOW_NAME_LENGTH"
@@ -77,7 +77,7 @@
 						</n8n-button>
 						<template #content>
 							<i18n-t
-								:path="
+								:keypath="
 									contextBasedTranslationKeys.workflows.sharing.unavailable.description.tooltip
 								"
 								tag="span"
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 7d096da150..76500f9ab4 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -445,7 +445,9 @@ export default defineComponent({
 			}
 		},
 		goToRoute(route: string | { name: string }) {
+			console.log(this.$router);
 			this.$router.push(route).catch((failure) => {
+				console.log(failure);
 				// Catch navigation failures caused by route guards
 				if (!isNavigationFailure(failure)) {
 					console.error(failure);
@@ -466,8 +468,6 @@ export default defineComponent({
 				}
 			}
 
-			console.log(defaultSettingsRoute);
-
 			return defaultSettingsRoute;
 		},
 		onResize(event: UIEvent) {
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 3b8d788a68..7f7f8f1d65 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:visible="uiStore.isModalOpen(this.name)"
+		:modelValue="uiStore.isModalOpen(this.name)"
 		:before-close="closeDialog"
 		:class="{
 			'dialog-wrapper': true,
@@ -16,7 +16,7 @@
 		append-to-body
 		:data-test-id="`${this.name}-modal`"
 	>
-		<template #title v-if="$scopedSlots.header">
+		<template #header v-if="$slots.header">
 			<slot name="header" v-if="!loading" />
 		</template>
 		<template #title v-else-if="title">
@@ -40,7 +40,7 @@
 				<n8n-spinner />
 			</div>
 		</div>
-		<div v-if="!loading && $scopedSlots.footer" :class="$style.footer">
+		<div v-if="!loading && $slots.footer" :class="$style.footer">
 			<slot name="footer" :close="closeDialog" />
 		</div>
 	</el-dialog>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
index b42dd251fa..329dbba756 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/CategoryItem.vue
@@ -21,7 +21,7 @@ const categoryName = computed(() => {
 <template>
 	<div
 		:class="$style.categoryWrapper"
-		v-on="$listeners"
+		v-bind="$attrs"
 		data-keyboard-nav="true"
 		data-test-id="node-creator-category-item"
 	>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
index ba2e246536..feb4061b3c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, defineComponent } from 'vue';
+import { computed, getCurrentInstance, onMounted, defineComponent, h } from 'vue';
 import type { VNode, PropType } from 'vue';
 import type {
 	INodeCreateElement,
@@ -211,15 +211,16 @@ const OrderSwitcher = defineComponent({
 			type: String as PropType<NodeFilterType>,
 		},
 	},
-	render(h): VNode {
-		const triggers = this.$slots?.triggers?.[0];
-		const actions = this.$slots?.actions?.[0];
+	setup(props, { slots }) {
+		const triggers = slots.triggers?.();
+		const actions = slots.actions?.();
 
-		return h(
-			'div',
-			{},
-			this.rootView === REGULAR_NODE_CREATOR_VIEW ? [actions, triggers] : [triggers, actions],
-		);
+		return () =>
+			h(
+				'div',
+				{},
+				props.rootView === REGULAR_NODE_CREATOR_VIEW ? [actions, triggers] : [triggers, actions],
+			);
 	},
 });
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index d56adaf562..9b111be328 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -13,7 +13,7 @@
 				@mouseup="onMouseUp"
 				data-test-id="node-creator"
 			>
-				<NodesListPanel @nodeTypeSelected="$listeners.nodeTypeSelected" />
+				<NodesListPanel @nodeTypeSelected="onNodeTypeSelected" />
 			</div>
 		</slide-transition>
 	</div>
@@ -33,6 +33,7 @@ import NodesListPanel from './Panel/NodesListPanel.vue';
 
 export interface Props {
 	active?: boolean;
+	onNodeTypeSelected?: (nodeType: string) => void;
 }
 
 const props = defineProps<Props>();
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
index 0962d3cea1..8d0c634e57 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue
@@ -129,10 +129,10 @@ function onBackButton() {
 			/>
 			<div :class="$style.renderedItems">
 				<!-- Actions mode -->
-				<ActionsRenderer v-if="isActionsMode && activeViewStack.subcategory" v-on="$listeners" />
+				<ActionsRenderer v-if="isActionsMode && activeViewStack.subcategory" v-bind="$attrs" />
 
 				<!-- Nodes Mode -->
-				<NodesRenderer v-else :rootView="nodeCreatorView" v-on="$listeners" />
+				<NodesRenderer v-else :rootView="nodeCreatorView" v-bind="$attrs" />
 			</div>
 		</aside>
 	</transition>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
index 6ea7adef79..503ee6f54f 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
@@ -117,8 +117,8 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 		<!-- Pass through listeners & empty slot to ItemsRenderer -->
 		<ItemsRenderer
 			v-if="expanded"
+			v-bind="$attrs"
 			:elements="elements"
-			v-on="$listeners"
 			:isTrigger="isTriggerCategory"
 		>
 			<template #default> </template>
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 394ad849bb..767a61cebc 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:visible="(!!activeNode || renaming) && !isActiveStickyNode"
+		:modelValue="(!!activeNode || renaming) && !isActiveStickyNode"
 		:before-close="close"
 		:show-close="false"
 		class="data-display-wrapper ndv-wrapper"
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 710ea9222a..7ef346ab42 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -48,7 +48,7 @@
 			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
 				<div class="mb-l">
 					<i18n-t
-						path="nodeSettings.communityNodeUnknown.description"
+						keypath="nodeSettings.communityNodeUnknown.description"
 						tag="span"
 						@click="onMissingNodeTextClick"
 					>
@@ -68,7 +68,7 @@
 					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
 				</n8n-link>
 			</div>
-			<i18n-t v-else path="nodeSettings.nodeTypeUnknown.description" tag="span">
+			<i18n-t v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span">
 				<template #action>
 					<a
 						:href="CUSTOM_NODES_DOCS_URL"
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 2109d2eead..be5e1c2844 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -3,7 +3,11 @@
 		<expression-edit
 			:dialogVisible="expressionEditDialogVisible"
 			:modelValue="
-				isResourceLocatorParameter && typeof value !== 'string' ? (value ? value.value : '') : value
+				isResourceLocatorParameter && typeof modelValue !== 'string'
+					? modelValue
+						? modelValue.value
+						: ''
+					: modelValue
 			"
 			:parameter="parameter"
 			:path="path"
@@ -17,7 +21,7 @@
 				v-if="isResourceLocatorParameter"
 				ref="resourceLocator"
 				:parameter="parameter"
-				:modelValue="value"
+				:modelValue="modelValue"
 				:dependentParametersValues="dependentParametersValues"
 				:displayTitle="displayTitle"
 				:expressionDisplayValue="expressionDisplayValue"
@@ -55,7 +59,7 @@
 			>
 				<el-dialog
 					v-if="codeEditDialogVisible"
-					visible
+					:modelValue="true"
 					append-to-body
 					:close-on-click-modal="false"
 					width="80%"
@@ -66,18 +70,18 @@
 				>
 					<div class="ignore-key-press">
 						<code-node-editor
-							:value="value"
+							:modelValue="modelValue"
 							:defaultValue="parameter.default"
 							:language="editorLanguage"
 							:isReadOnly="isReadOnly"
-							@valueChanged="expressionUpdated"
+							@update:modelValue="expressionUpdated"
 						/>
 					</div>
 				</el-dialog>
 
 				<text-edit
 					:dialogVisible="textEditDialogVisible"
-					:value="value"
+					:value="modelValue"
 					:parameter="parameter"
 					:path="path"
 					:isReadOnly="isReadOnly"
@@ -88,17 +92,17 @@
 				<code-node-editor
 					v-if="editorType === 'codeNodeEditor' && isCodeNode(node)"
 					:mode="node.parameters.mode"
-					:value="value"
+					:modelValue="modelValue"
 					:defaultValue="parameter.default"
 					:language="editorLanguage"
 					:isReadOnly="isReadOnly"
 					:aiButtonEnabled="settingsStore.isCloudDeployment"
-					@valueChanged="valueChangedDebounced"
+					@update:modelValue="valueChangedDebounced"
 				/>
 
 				<html-editor
 					v-else-if="editorType === 'htmlEditor'"
-					:html="value"
+					:html="modelValue"
 					:isReadOnly="isReadOnly"
 					:rows="getArgument('rows')"
 					:disableExpressionColoring="!isHtmlNode(node)"
@@ -108,7 +112,7 @@
 
 				<sql-editor
 					v-else-if="editorType === 'sqlEditor'"
-					:query="value"
+					:query="modelValue"
 					:dialect="getArgument('sqlDialect')"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChangedDebounced"
@@ -121,7 +125,7 @@
 				>
 					<code-node-editor
 						v-if="!codeEditDialogVisible"
-						:value="value"
+						:modelValue="modelValue"
 						:language="editorLanguage"
 						:isReadOnly="true"
 					/>
@@ -137,8 +141,8 @@
 					:rows="getArgument('rows')"
 					:modelValue="displayValue"
 					:disabled="isReadOnly"
-					@update:modelValue="onTextInputChange"
-					@change="valueChanged"
+					@update:modelValue="valueChanged"
+					@change="onTextInputChange"
 					@keydown.stop
 					@focus="setFocus"
 					@blur="onBlur"
@@ -171,7 +175,7 @@
 					:disabled="isReadOnly"
 					@focus="setFocus"
 					@blur="onBlur"
-					@change="valueChanged"
+					@update:modelValue="valueChanged"
 					:title="displayTitle"
 					:show-alpha="getArgument('showAlpha')"
 				/>
@@ -203,7 +207,7 @@
 						: $locale.baseText('parameterInput.selectDateAndTime')
 				"
 				:picker-options="dateTimePickerOptions"
-				@change="valueChanged"
+				@update:modelValue="valueChanged"
 				@focus="setFocus"
 				@blur="onBlur"
 				@keydown.stop
@@ -221,8 +225,8 @@
 				:disabled="isReadOnly"
 				:title="displayTitle"
 				:placeholder="parameter.placeholder"
-				@change="valueChanged"
-				@update:modelValue="onTextInputChange"
+				@change="onTextInputChange"
+				@update:modelValue="valueChanged"
 				@focus="setFocus"
 				@blur="onBlur"
 				@keydown.stop
@@ -260,7 +264,7 @@
 				:loading="remoteParameterOptionsLoading"
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"
-				@change="valueChanged"
+				@update:modelValue="valueChanged"
 				@keydown.stop
 				@focus="setFocus"
 				@blur="onBlur"
@@ -298,7 +302,7 @@
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"
 				:placeholder="$locale.baseText('parameterInput.select')"
-				@change="valueChanged"
+				@update:modelValue="valueChanged"
 				@keydown.stop
 				@focus="setFocus"
 				@blur="onBlur"
@@ -335,7 +339,7 @@
 				active-color="#13ce66"
 				:value="displayValue"
 				:disabled="isReadOnly"
-				@change="valueChanged"
+				@update:modelValue="valueChanged"
 			/>
 		</div>
 
@@ -417,7 +421,7 @@ export default defineComponent({
 		path: {
 			type: String,
 		},
-		value: {
+		modelValue: {
 			type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
 		},
 		hideLabel: {
@@ -521,7 +525,7 @@ export default defineComponent({
 			// on which the current field depends on changes
 			await this.loadRemoteParameterOptions();
 		},
-		value() {
+		modelValue() {
 			if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
 				// Do not set for color with alpha else wrong value gets displayed in field
 				return;
@@ -542,7 +546,9 @@ export default defineComponent({
 				return '';
 			}
 
-			const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
+			const value = isResourceLocatorValue(this.modelValue)
+				? this.modelValue.value
+				: this.modelValue;
 			if (typeof value === 'string' && value.startsWith('=')) {
 				return value.slice(1);
 			}
@@ -550,7 +556,7 @@ export default defineComponent({
 			return `${this.displayValue ?? ''}`;
 		},
 		isValueExpression(): boolean {
-			return isValueExpression(this.parameter, this.value);
+			return isValueExpression(this.parameter, this.modelValue);
 		},
 		codeAutocomplete(): string | undefined {
 			return this.getArgument('codeAutocomplete') as string | undefined;
@@ -608,16 +614,16 @@ export default defineComponent({
 			let returnValue;
 			if (this.isValueExpression === false) {
 				returnValue = this.isResourceLocatorParameter
-					? isResourceLocatorValue(this.value)
-						? this.value.value
+					? isResourceLocatorValue(this.modelValue)
+						? this.modelValue.value
 						: ''
-					: this.value;
+					: this.modelValue;
 			} else {
 				returnValue = this.expressionEvaluated;
 			}
 
-			if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
-				const credType = this.credentialsStore.getCredentialTypeByName(this.value);
+			if (this.parameter.type === 'credentialsSelect' && typeof this.modelValue === 'string') {
+				const credType = this.credentialsStore.getCredentialTypeByName(this.modelValue);
 				if (credType) {
 					returnValue = credType.displayName;
 				}
@@ -942,7 +948,7 @@ export default defineComponent({
 		},
 		expressionUpdated(value: string) {
 			const val: NodeParameterValueType = this.isResourceLocatorParameter
-				? { __rl: true, value, mode: this.value.mode }
+				? { __rl: true, value, mode: this.modelValue.mode }
 				: value;
 			this.valueChanged(val);
 		},
@@ -1063,26 +1069,30 @@ export default defineComponent({
 			}
 		},
 		optionSelected(command: string) {
-			const prevValue = this.value;
+			const prevValue = this.modelValue;
 
 			if (command === 'resetValue') {
 				this.valueChanged(this.parameter.default);
 			} else if (command === 'addExpression') {
 				if (this.isResourceLocatorParameter) {
-					if (isResourceLocatorValue(this.value)) {
-						this.valueChanged({ __rl: true, value: `=${this.value.value}`, mode: this.value.mode });
+					if (isResourceLocatorValue(this.modelValue)) {
+						this.valueChanged({
+							__rl: true,
+							value: `=${this.modelValue.value}`,
+							mode: this.modelValue.mode,
+						});
 					} else {
-						this.valueChanged({ __rl: true, value: `=${this.value}`, mode: '' });
+						this.valueChanged({ __rl: true, value: `=${this.modelValue}`, mode: '' });
 					}
 				} else if (
 					this.parameter.type === 'number' &&
-					(!this.value || this.value === '[Object: null]')
+					(!this.modelValue || this.modelValue === '[Object: null]')
 				) {
 					this.valueChanged('={{ 0 }}');
 				} else if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
-					this.valueChanged(`={{ ${this.value} }}`);
+					this.valueChanged(`={{ ${this.modelValue} }}`);
 				} else {
-					this.valueChanged(`=${this.value}`);
+					this.valueChanged(`=${this.modelValue}`);
 				}
 
 				this.setFocus();
@@ -1101,14 +1111,14 @@ export default defineComponent({
 						);
 				}
 
-				if (this.isResourceLocatorParameter && isResourceLocatorValue(this.value)) {
-					this.valueChanged({ __rl: true, value, mode: this.value.mode });
+				if (this.isResourceLocatorParameter && isResourceLocatorValue(this.modelValue)) {
+					this.valueChanged({ __rl: true, value, mode: this.modelValue.mode });
 				} else {
 					let newValue = typeof value !== 'undefined' ? value : null;
 
 					if (this.parameter.type === 'string') {
 						// Strip the '=' from the beginning
-						newValue = this.value ? this.value.toString().substring(1) : null;
+						newValue = this.modelValue ? this.modelValue.toString().substring(1) : null;
 					}
 
 					this.valueChanged(newValue);
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index a8d794eb98..4026494edd 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -4,7 +4,7 @@
 			ref="param"
 			:inputSize="inputSize"
 			:parameter="parameter"
-			:value="value"
+			:modelValue="value"
 			:path="path"
 			:isReadOnly="isReadOnly"
 			:droppable="droppable"
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 9bb6742450..a0d8d156d0 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -44,6 +44,7 @@ import type { NodeParameterValueType } from 'n8n-workflow';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { isValueExpression, isResourceLocatorValue } from '@/utils';
+import { i18n } from '@/plugins/i18n';
 
 export default defineComponent({
 	name: 'parameter-options',
@@ -81,7 +82,7 @@ export default defineComponent({
 		loadingMessage: {
 			type: String,
 			default() {
-				return this.$locale.baseText('genericHelpers.loading');
+				return i18n.baseText('genericHelpers.loading');
 			},
 		},
 	},
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index ed5e9ff9c3..5b35d075a7 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -132,7 +132,7 @@
 				:modelValue="runIndex"
 				@update:modelValue="onRunIndexChange"
 				@click.stop
-				popper-append-to-body
+				teleported
 			>
 				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
 				<n8n-option
@@ -195,9 +195,9 @@
 			<div v-else-if="editMode.enabled" :class="$style.editMode">
 				<div :class="[$style.editModeBody, 'ignore-key-press']">
 					<code-node-editor
-						:value="editMode.value"
+						:modelValue="editMode.value"
 						language="json"
-						@valueChanged="ndvStore.setOutputPanelEditModeValue($event)"
+						@update:modelValue="ndvStore.setOutputPanelEditModeValue($event)"
 					/>
 				</div>
 				<div :class="$style.editModeFooter">
@@ -459,7 +459,7 @@
 					size="mini"
 					:modelValue="pageSize"
 					@update:modelValue="onPageSizeChange"
-					popper-append-to-body
+					teleported
 				>
 					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
 					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 33c36b2739..7dcc8026b2 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -65,7 +65,7 @@
 						<n8n-tooltip placement="bottom-end">
 							<template #content>
 								<div>
-									<i18n-t path="dataMapping.tableView.tableColumnsExceeded.tooltip">
+									<i18n-t keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
 										<template #columnLimit>{{ columnLimit }}</template>
 										<template #link>
 											<a @click="switchToJsonView">{{
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 3c06bc63cf..5f95771e05 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -14,7 +14,6 @@
 			ref="select"
 			loading-text="..."
 			popper-class="tags-dropdown"
-			size="medium"
 		>
 			<n8n-option
 				v-if="options.length === 0 && filter && createEnabled"
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index 7cb893aa38..5f893e7ce9 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="dialogVisible">
 		<el-dialog
-			:visible="dialogVisible"
+			:modelValue="dialogVisible"
 			append-to-body
 			width="80%"
 			:title="`${$locale.baseText('textEdit.edit')} ${$locale
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index d052f05315..f911cc7281 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -71,7 +71,7 @@
 					<template #fallback>
 						<n8n-text>
 							<i18n-t
-								:path="
+								:keypath="
 									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
 								"
 								tag="span"
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index 5d3f207c12..7c5441620d 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-	<n8n-popover trigger="click">
+	<n8n-popover trigger="click" width="304" size="large">
 		<template #reference>
 			<n8n-button
 				icon="filter"
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index d756d2edc2..264ce6a401 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -66,7 +66,6 @@
 								v-model="filters.search"
 								:class="[$style['search'], 'mr-2xs']"
 								:placeholder="$locale.baseText(`${resourceKey}.search.placeholder`)"
-								size="medium"
 								clearable
 								ref="search"
 								data-test-id="resources-list-search"
@@ -76,7 +75,7 @@
 								</template>
 							</n8n-input>
 							<div :class="$style['sort-and-filter']">
-								<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
+								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
 									<n8n-option
 										v-for="sortOption in sortOptions"
 										:key="sortOption"
diff --git a/packages/editor-ui/src/components/transitions/SlideTransition.vue b/packages/editor-ui/src/components/transitions/SlideTransition.vue
index 872e1f43ea..2f86c9073d 100644
--- a/packages/editor-ui/src/components/transitions/SlideTransition.vue
+++ b/packages/editor-ui/src/components/transitions/SlideTransition.vue
@@ -18,7 +18,7 @@ export default defineComponent({
 	transition: 200ms ease;
 }
 .slide-leave-to,
-.slide-enter {
+.slide-enter-from {
 	transform: translateX(100%);
 }
 </style>
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index 3840e228c0..1727f67371 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -24,7 +24,6 @@
 				/>
 				<n8n-select
 					:modelValue="filters.type"
-					size="medium"
 					multiple
 					filterable
 					ref="typeInput"
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index e9fc2d69b8..85c407a474 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -12,7 +12,7 @@
 		<div v-if="apiKey">
 			<p class="mb-s">
 				<n8n-info-tip :bold="false">
-					<i18n-t path="settings.api.view.info" tag="span">
+					<i18n-t keypath="settings.api.view.info" tag="span">
 						<template #apiAction>
 							<a
 								href="https://docs.n8n.io/api"
diff --git a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
index 89ca243437..e491674896 100644
--- a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
+++ b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
@@ -138,7 +138,7 @@ const openPricingPage = () => {
 		/>
 		<div v-if="!usageStore.isDesktop && !usageStore.isLoading">
 			<n8n-heading :class="$style.title" size="large">
-				<i18n-t path="settings.usageAndPlan.description">
+				<i18n-t keypath="settings.usageAndPlan.description">
 					<template #name>{{ usageStore.planName }}</template>
 					<template #type>
 						<span v-if="usageStore.planId">{{
@@ -160,7 +160,7 @@ const openPricingPage = () => {
 							:style="{ width: `${usageStore.executionPercentage}%` }"
 						></span>
 					</span>
-					<i18n-t :class="$style.count" path="settings.usageAndPlan.activeWorkflows.count">
+					<i18n-t :class="$style.count" keypath="settings.usageAndPlan.activeWorkflows.count">
 						<template #count>{{ usageStore.executionCount }}</template>
 						<template #limit>
 							<span v-if="usageStore.executionLimit < 0">{{
@@ -203,7 +203,7 @@ const openPricingPage = () => {
 				top="0"
 				@closed="onDialogClosed"
 				@opened="onDialogOpened"
-				:visible.sync="activationKeyModal"
+				v-model="activationKeyModal"
 				:title="locale.baseText('settings.usageAndPlan.dialog.activation.title')"
 			>
 				<template #default>
diff --git a/packages/editor-ui/src/views/SettingsVersionControl.vue b/packages/editor-ui/src/views/SettingsVersionControl.vue
index 158e1b20ea..d35746d1f7 100644
--- a/packages/editor-ui/src/views/SettingsVersionControl.vue
+++ b/packages/editor-ui/src/views/SettingsVersionControl.vue
@@ -189,7 +189,7 @@ const refreshBranches = async () => {
 			data-test-id="version-control-content-licensed"
 		>
 			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">
-				<i18n-t path="settings.versionControl.description">
+				<i18n-t keypath="settings.versionControl.description">
 					<template #link>
 						<a :href="versionControlDocsSetupUrl" target="_blank">
 							{{ locale.baseText('settings.versionControl.description.link') }}
@@ -280,7 +280,7 @@ const refreshBranches = async () => {
 					</n8n-button>
 				</div>
 				<n8n-notice type="info" class="mt-s">
-					<i18n-t path="settings.versionControl.sshKeyDescription">
+					<i18n-t keypath="settings.versionControl.sshKeyDescription">
 						<template #link>
 							<a :href="versionControlDocsSetupUrl" target="_blank">{{
 								locale.baseText('settings.versionControl.sshKeyDescriptionLink')
@@ -342,7 +342,7 @@ const refreshBranches = async () => {
 						v-model="versionControlStore.preferences.branchReadOnly"
 						:class="$style.readOnly"
 					>
-						<i18n-t path="settings.versionControl.readonly">
+						<i18n-t keypath="settings.versionControl.readonly">
 							<template #bold>
 								<strong>{{ locale.baseText('settings.versionControl.readonly.bold') }}</strong>
 							</template>
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index ce8af2d5f7..b594f2fda0 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -77,11 +77,7 @@
 					color="text-base"
 					class="mb-3xs"
 				/>
-				<n8n-select
-					:modelValue="filters.status"
-					@update:modelValue="setKeyValue('status', $event)"
-					size="medium"
-				>
+				<n8n-select :modelValue="filters.status" @update:modelValue="setKeyValue('status', $event)">
 					<n8n-option
 						v-for="option in statusFilterOptions"
 						:key="option.label"