From 55c201eb21e3d50c76386994e3d4602a0414ae55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Fri, 25 Nov 2022 10:51:51 +0100
Subject: [PATCH] refactor: Improve typings for element-ui imports
 (no-changelog) (#4678)

* convert all stories to typescript

* stricter typing for element-ui imports
---
 packages/design-system/.eslintrc.js           |  4 +-
 packages/design-system/.gitignore             |  1 +
 packages/design-system/.storybook/main.js     |  2 +-
 packages/design-system/.storybook/preview.js  |  6 ++
 packages/design-system/package.json           |  2 +-
 .../N8nActionDropdown/ActionDropdown.vue      | 16 +++--
 ...gle.stories.js => ActionToggle.stories.ts} |  0
 .../N8nActionToggle/ActionToggle.vue          | 25 ++++---
 .../{Avatar.stories.js => Avatar.stories.ts}  |  0
 .../{Badge.stories.js => Badge.stories.ts}    |  0
 ...{BlockUi.stories.js => BlockUi.stories.ts} |  0
 .../src/components/N8nCheckbox/Checkbox.vue   |  4 +-
 ...{FormBox.stories.js => FormBox.stories.ts} |  0
 ...mInput.stories.js => FormInput.stories.ts} |  0
 ...nputs.stories.js => FormInputs.stories.ts} |  0
 ...{Heading.stories.js => Heading.stories.ts} |  0
 .../{Icon.stories.js => Icon.stories.ts}      |  0
 .../src/components/N8nInput/Input.vue         |  4 +-
 ...Label.stories.js => InputLabel.stories.ts} |  0
 ...mber.stories.js => InputNumber.stories.ts} |  0
 .../components/N8nInputNumber/InputNumber.vue |  7 +-
 .../{Link.stories.js => Link.stories.ts}      |  0
 ...{Loading.stories.js => Loading.stories.ts} |  0
 .../src/components/N8nLoading/Loading.vue     |  7 +-
 ...arkdown.stories.js => Markdown.stories.ts} |  0
 .../src/components/N8nMenu/Menu.vue           |  4 +-
 .../N8nMenuItem/MenuItem.stories.ts           |  4 +-
 .../src/components/N8nMenuItem/MenuItem.vue   |  7 +-
 .../src/components/N8nOption/Option.vue       |  7 +-
 ...{Popover.stories.js => Popover.stories.ts} |  0
 .../src/components/N8nPopover/Popover.vue     |  7 +-
 ...ons.stories.js => RadioButtons.stories.ts} |  0
 ...er.stories.js => ResizeWrapper.stories.ts} |  0
 .../src/components/N8nSelect/Select.vue       |  4 +-
 ...{Spinner.stories.js => Spinner.stories.ts} |  0
 .../{Sticky.stories.js => Sticky.stories.ts}  |  0
 .../{Tabs.stories.js => Tabs.stories.ts}      |  0
 .../N8nTag/{Tag.stories.js => Tag.stories.ts} |  0
 .../{Tags.stories.js => Tags.stories.ts}      |  0
 .../{Text.stories.js => Text.stories.ts}      |  0
 ...{Tooltip.stories.js => Tooltip.stories.ts} |  0
 .../src/components/N8nTooltip/Tooltip.vue     |  4 +-
 ...serInfo.stories.js => UserInfo.stories.ts} |  0
 ...elect.stories.js => UserSelect.stories.ts} |  0
 .../components/N8nUserSelect/UserSelect.vue   |  9 ++-
 ...rsList.stories.js => UsersList.stories.ts} |  0
 packages/design-system/src/main.js            | 16 +----
 .../src/plugins/elementUIComponents.ts        | 65 -------------------
 .../design-system/src/shims-element-ui.d.ts   | 41 ------------
 .../ExecutionsView/ExecutionPreview.vue       |  3 +-
 packages/editor-ui/src/plugins/components.ts  |  9 +--
 packages/editor-ui/src/shims-element-ui.d.ts  | 41 ------------
 pnpm-lock.yaml                                |  8 +--
 53 files changed, 75 insertions(+), 232 deletions(-)
 rename packages/design-system/src/components/N8nActionToggle/{ActionToggle.stories.js => ActionToggle.stories.ts} (100%)
 rename packages/design-system/src/components/N8nAvatar/{Avatar.stories.js => Avatar.stories.ts} (100%)
 rename packages/design-system/src/components/N8nBadge/{Badge.stories.js => Badge.stories.ts} (100%)
 rename packages/design-system/src/components/N8nBlockUi/{BlockUi.stories.js => BlockUi.stories.ts} (100%)
 rename packages/design-system/src/components/N8nFormBox/{FormBox.stories.js => FormBox.stories.ts} (100%)
 rename packages/design-system/src/components/N8nFormInput/{FormInput.stories.js => FormInput.stories.ts} (100%)
 rename packages/design-system/src/components/N8nFormInputs/{FormInputs.stories.js => FormInputs.stories.ts} (100%)
 rename packages/design-system/src/components/N8nHeading/{Heading.stories.js => Heading.stories.ts} (100%)
 rename packages/design-system/src/components/N8nIcon/{Icon.stories.js => Icon.stories.ts} (100%)
 rename packages/design-system/src/components/N8nInputLabel/{InputLabel.stories.js => InputLabel.stories.ts} (100%)
 rename packages/design-system/src/components/N8nInputNumber/{InputNumber.stories.js => InputNumber.stories.ts} (100%)
 rename packages/design-system/src/components/N8nLink/{Link.stories.js => Link.stories.ts} (100%)
 rename packages/design-system/src/components/N8nLoading/{Loading.stories.js => Loading.stories.ts} (100%)
 rename packages/design-system/src/components/N8nMarkdown/{Markdown.stories.js => Markdown.stories.ts} (100%)
 rename packages/design-system/src/components/N8nPopover/{Popover.stories.js => Popover.stories.ts} (100%)
 rename packages/design-system/src/components/N8nRadioButtons/{RadioButtons.stories.js => RadioButtons.stories.ts} (100%)
 rename packages/design-system/src/components/N8nResizeWrapper/{ResizeWrapper.stories.js => ResizeWrapper.stories.ts} (100%)
 rename packages/design-system/src/components/N8nSpinner/{Spinner.stories.js => Spinner.stories.ts} (100%)
 rename packages/design-system/src/components/N8nSticky/{Sticky.stories.js => Sticky.stories.ts} (100%)
 rename packages/design-system/src/components/N8nTabs/{Tabs.stories.js => Tabs.stories.ts} (100%)
 rename packages/design-system/src/components/N8nTag/{Tag.stories.js => Tag.stories.ts} (100%)
 rename packages/design-system/src/components/N8nTags/{Tags.stories.js => Tags.stories.ts} (100%)
 rename packages/design-system/src/components/N8nText/{Text.stories.js => Text.stories.ts} (100%)
 rename packages/design-system/src/components/N8nTooltip/{Tooltip.stories.js => Tooltip.stories.ts} (100%)
 rename packages/design-system/src/components/N8nUserInfo/{UserInfo.stories.js => UserInfo.stories.ts} (100%)
 rename packages/design-system/src/components/N8nUserSelect/{UserSelect.stories.js => UserSelect.stories.ts} (100%)
 rename packages/design-system/src/components/N8nUsersList/{UsersList.stories.js => UsersList.stories.ts} (100%)
 delete mode 100644 packages/design-system/src/plugins/elementUIComponents.ts
 delete mode 100644 packages/design-system/src/shims-element-ui.d.ts
 delete mode 100644 packages/editor-ui/src/shims-element-ui.d.ts

diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js
index 59cd103069..99933f5d65 100644
--- a/packages/design-system/.eslintrc.js
+++ b/packages/design-system/.eslintrc.js
@@ -24,13 +24,13 @@ module.exports = {
 
 	overrides: [
 		{
-			files: ['src/**/*.stories.{js,ts}'],
+			files: ['src/**/*.stories.ts'],
 			rules: {
 				'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
 			},
 		},
 		{
-			files: ['src/**/*.stories.{js,ts}', 'src/**/*.vue', 'src/**/*.spec.ts'],
+			files: ['src/**/*.stories.ts', 'src/**/*.vue', 'src/**/*.spec.ts'],
 			rules: {
 				'@typescript-eslint/naming-convention': [
 					'warn',
diff --git a/packages/design-system/.gitignore b/packages/design-system/.gitignore
index 8db271232f..728ede7e79 100644
--- a/packages/design-system/.gitignore
+++ b/packages/design-system/.gitignore
@@ -1,2 +1,3 @@
 coverage
 storybook-static
+**/*.stories.js
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index e4413680bc..f11d0b2cd9 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -4,7 +4,7 @@ const path = require('path');
  * @type {import('@storybook/core-common').StorybookConfig}
  */
 module.exports = {
-	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|ts)'],
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.ts'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
index 3c85a33dba..be5e60d537 100644
--- a/packages/design-system/.storybook/preview.js
+++ b/packages/design-system/.storybook/preview.js
@@ -1,11 +1,17 @@
 import './font-awesome-icons';
 import './storybook.scss';
 
+import ElementUI from 'element-ui';
 import lang from 'element-ui/lib/locale/lang/en';
 import locale from 'element-ui/lib/locale';
 
+import designSystemComponents from '../src/plugins/n8nComponents';
+
 import Vue from 'vue';
 
+Vue.use(ElementUI);
+Vue.use(designSystemComponents);
+
 locale.use(lang);
 
 // https://github.com/storybookjs/storybook/issues/6153
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 5e2af41df2..39eee7b272 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -74,7 +74,7 @@
     "webpack": "^4.46.0"
   },
   "dependencies": {
-    "element-ui": "~2.15.7",
+    "element-ui": "~2.15.12",
     "sanitize-html": "2.7.0",
     "vue2-boring-avatars": "0.3.4"
   }
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 6dd046009f..b87ea83b1c 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -26,7 +26,7 @@
 							}"
 						>
 							<span v-if="item.icon" :class="$style.icon">
-								<n8n-icon :icon="item.icon" :size="item.iconSize" />
+								<n8n-icon :icon="item.icon" :size="iconSize" />
 							</span>
 							<span :class="$style.label">
 								{{ item.label }}
@@ -41,9 +41,11 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import ElDropdown from 'element-ui/lib/dropdown';
-import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
-import ElDropdownItem from 'element-ui/lib/dropdown-item';
+import {
+	Dropdown as ElDropdown,
+	DropdownMenu as ElDropdownMenu,
+	DropdownItem as ElDropdownItem,
+} from 'element-ui';
 import N8nIcon from '../N8nIcon';
 
 interface IActionDropdownItem {
@@ -64,9 +66,9 @@ interface IActionDropdownItem {
 export default Vue.extend({
 	name: 'n8n-action-dropdown',
 	components: {
-		ElDropdownMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElDropdown, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElDropdownItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdown,
+		ElDropdownMenu,
+		ElDropdownItem,
 		N8nIcon,
 	},
 	props: {
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.js b/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.js
rename to packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index e48a1c3d5a..1b71a5b3eb 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -38,23 +38,32 @@
 </template>
 
 <script lang="ts">
-import ElDropdown from 'element-ui/lib/dropdown';
-import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
-import ElDropdownItem from 'element-ui/lib/dropdown-item';
-import N8nIcon from '../N8nIcon';
 import Vue from 'vue';
+import {
+	Dropdown as ElDropdown,
+	DropdownMenu as ElDropdownMenu,
+	DropdownItem as ElDropdownItem,
+} from 'element-ui';
+import N8nIcon from '../N8nIcon';
+
+interface Action {
+	label: string;
+	value: string;
+	disabled: boolean;
+	type?: 'external-link';
+}
 
 export default Vue.extend({
 	name: 'n8n-action-toggle',
 	components: {
-		ElDropdown, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElDropdownMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElDropdownItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElDropdown,
+		ElDropdownMenu,
+		ElDropdownItem,
 		N8nIcon,
 	},
 	props: {
 		actions: {
-			type: Array,
+			type: Array<Action>,
 			default: () => [],
 		},
 		placement: {
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.stories.js b/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nAvatar/Avatar.stories.js
rename to packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
diff --git a/packages/design-system/src/components/N8nBadge/Badge.stories.js b/packages/design-system/src/components/N8nBadge/Badge.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nBadge/Badge.stories.js
rename to packages/design-system/src/components/N8nBadge/Badge.stories.ts
diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.js b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nBlockUi/BlockUi.stories.js
rename to packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index 6a7a53d809..cb655ab8d7 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -18,13 +18,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import ElCheckbox from 'element-ui/lib/checkbox';
+import { Checkbox as ElCheckbox } from 'element-ui';
 import N8nInputLabel from '../N8nInputLabel';
 
 export default Vue.extend({
 	name: 'n8n-checkbox',
 	components: {
-		ElCheckbox, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElCheckbox,
 		N8nInputLabel,
 	},
 	props: {
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.stories.js b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nFormBox/FormBox.stories.js
rename to packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.stories.js b/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nFormInput/FormInput.stories.js
rename to packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
rename to packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
diff --git a/packages/design-system/src/components/N8nHeading/Heading.stories.js b/packages/design-system/src/components/N8nHeading/Heading.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nHeading/Heading.stories.js
rename to packages/design-system/src/components/N8nHeading/Heading.stories.ts
diff --git a/packages/design-system/src/components/N8nIcon/Icon.stories.js b/packages/design-system/src/components/N8nIcon/Icon.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nIcon/Icon.stories.js
rename to packages/design-system/src/components/N8nIcon/Icon.stories.ts
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 8f4e6f3aad..6378864882 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -24,13 +24,13 @@
 </template>
 
 <script lang="ts">
-import ElInput from 'element-ui/lib/input';
+import { Input as ElInput } from 'element-ui';
 import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'n8n-input',
 	components: {
-		ElInput, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElInput,
 	},
 	props: {
 		value: {},
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.js b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nInputLabel/InputLabel.stories.js
rename to packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.js b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nInputNumber/InputNumber.stories.js
rename to packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
index 3fc7553897..edc6211c17 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
@@ -1,7 +1,4 @@
 <script lang="ts">
-import N8nInputNumber from 'element-ui/lib/input-number';
-
-N8nInputNumber.name = 'n8n-input-number'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-
-export default N8nInputNumber;
+import { InputNumber } from 'element-ui';
+export default InputNumber;
 </script>
diff --git a/packages/design-system/src/components/N8nLink/Link.stories.js b/packages/design-system/src/components/N8nLink/Link.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nLink/Link.stories.js
rename to packages/design-system/src/components/N8nLink/Link.stories.ts
diff --git a/packages/design-system/src/components/N8nLoading/Loading.stories.js b/packages/design-system/src/components/N8nLoading/Loading.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nLoading/Loading.stories.js
rename to packages/design-system/src/components/N8nLoading/Loading.stories.ts
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 0821dba20a..57625b2f00 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -36,16 +36,15 @@
 </template>
 
 <script lang="ts">
-import ElSkeleton from 'element-ui/lib/skeleton';
-import ElSkeletonItem from 'element-ui/lib/skeleton-item';
+import { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from 'element-ui';
 
 import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'n8n-loading',
 	components: {
-		ElSkeleton, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElSkeletonItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElSkeleton,
+		ElSkeletonItem,
 	},
 	props: {
 		animated: {
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.js b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nMarkdown/Markdown.stories.js
rename to packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 957d87b814..2050146215 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import ElMenu from 'element-ui/lib/menu';
+import { Menu as ElMenu } from 'element-ui';
 import N8nMenuItem from '../N8nMenuItem';
 
 import Vue, { PropType } from 'vue';
@@ -61,7 +61,7 @@ import { IMenuItem } from '../../types';
 export default Vue.extend({
 	name: 'n8n-menu',
 	components: {
-		ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElMenu,
 		N8nMenuItem,
 	},
 	data() {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index f0c1516ab9..5d035d0fcd 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -1,5 +1,5 @@
 import N8nMenuItem from '.';
-import ElMenu from 'element-ui/lib/menu';
+import { Menu as ElMenu } from 'element-ui';
 import type { StoryFn } from '@storybook/vue';
 
 export default {
@@ -10,7 +10,7 @@ export default {
 const template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
-		ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElMenu,
 		N8nMenuItem,
 	},
 	template: `
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index f5a76f1a6f..c1c7f58527 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -71,8 +71,7 @@
 </template>
 
 <script lang="ts">
-import ElSubmenu from 'element-ui/lib/submenu';
-import ElMenuItem from 'element-ui/lib/menu-item';
+import { Submenu as ElSubmenu, MenuItem as ElMenuItem } from 'element-ui';
 import N8nTooltip from '../N8nTooltip';
 import N8nIcon from '../N8nIcon';
 import { IMenuItem } from '../../types';
@@ -81,8 +80,8 @@ import Vue, { PropType } from 'vue';
 export default Vue.extend({
 	name: 'n8n-menu-item',
 	components: {
-		ElSubmenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElMenuItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElSubmenu,
+		ElMenuItem,
 		N8nIcon,
 		N8nTooltip,
 	},
diff --git a/packages/design-system/src/components/N8nOption/Option.vue b/packages/design-system/src/components/N8nOption/Option.vue
index f2026d05ed..f17ed7602e 100644
--- a/packages/design-system/src/components/N8nOption/Option.vue
+++ b/packages/design-system/src/components/N8nOption/Option.vue
@@ -1,7 +1,4 @@
 <script lang="ts">
-import ElOption from 'element-ui/lib/option';
-
-ElOption.name = 'n8n-option'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-
-export default ElOption;
+import { Option } from 'element-ui';
+export default Option;
 </script>
diff --git a/packages/design-system/src/components/N8nPopover/Popover.stories.js b/packages/design-system/src/components/N8nPopover/Popover.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nPopover/Popover.stories.js
rename to packages/design-system/src/components/N8nPopover/Popover.stories.ts
diff --git a/packages/design-system/src/components/N8nPopover/Popover.vue b/packages/design-system/src/components/N8nPopover/Popover.vue
index 77f598f250..b85cad06e7 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.vue
+++ b/packages/design-system/src/components/N8nPopover/Popover.vue
@@ -1,7 +1,4 @@
 <script lang="ts">
-import ElPopover from 'element-ui/lib/popover';
-
-ElPopover.name = 'n8n-popover'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
-
-export default ElPopover;
+import { Popover } from 'element-ui';
+export default Popover;
 </script>
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js
rename to packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
rename to packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index fd94a816f3..b8fd63924e 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import ElSelect from 'element-ui/lib/select';
+import { Select as ElSelect } from 'element-ui';
 import Vue from 'vue';
 
 export interface IProps {
@@ -44,7 +44,7 @@ export interface IProps {
 export default Vue.extend({
 	name: 'n8n-select',
 	components: {
-		ElSelect, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElSelect,
 	},
 	props: {
 		value: {},
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.stories.js b/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nSpinner/Spinner.stories.js
rename to packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.stories.js b/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nSticky/Sticky.stories.js
rename to packages/design-system/src/components/N8nSticky/Sticky.stories.ts
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.stories.js b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nTabs/Tabs.stories.js
rename to packages/design-system/src/components/N8nTabs/Tabs.stories.ts
diff --git a/packages/design-system/src/components/N8nTag/Tag.stories.js b/packages/design-system/src/components/N8nTag/Tag.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nTag/Tag.stories.js
rename to packages/design-system/src/components/N8nTag/Tag.stories.ts
diff --git a/packages/design-system/src/components/N8nTags/Tags.stories.js b/packages/design-system/src/components/N8nTags/Tags.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nTags/Tags.stories.js
rename to packages/design-system/src/components/N8nTags/Tags.stories.ts
diff --git a/packages/design-system/src/components/N8nText/Text.stories.js b/packages/design-system/src/components/N8nText/Text.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nText/Text.stories.js
rename to packages/design-system/src/components/N8nText/Text.stories.ts
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.js b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nTooltip/Tooltip.stories.js
rename to packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index 7094a8cb10..877249fbe3 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import ElTooltip from 'element-ui/lib/tooltip';
+import { Tooltip as ElTooltip } from 'element-ui';
 import type { IN8nButton } from '@/types';
 import N8nButton from '../N8nButton';
 
@@ -29,7 +29,7 @@ export default Vue.extend({
 	name: 'n8n-tooltip',
 	inheritAttrs: false,
 	components: {
-		ElTooltip, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElTooltip,
 		N8nButton,
 	},
 	props: {
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js
rename to packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.js b/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nUserSelect/UserSelect.stories.js
rename to packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index e3821ea3b3..a2c208b93a 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -31,20 +31,19 @@
 
 <script lang="ts">
 import 'vue';
+import mixins from 'vue-typed-mixins';
+import { Select as ElSelect, Option as ElOption } from 'element-ui';
 import N8nUserInfo from '../N8nUserInfo';
 import { IUser } from '../../types';
-import ElSelect from 'element-ui/lib/select';
-import ElOption from 'element-ui/lib/option';
 import Locale from '../../mixins/locale';
-import mixins from 'vue-typed-mixins';
 import { t } from '../../locale';
 
 export default mixins(Locale).extend({
 	name: 'n8n-user-select',
 	components: {
 		N8nUserInfo,
-		ElSelect, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
-		ElOption, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+		ElSelect,
+		ElOption,
 	},
 	props: {
 		users: {
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.stories.js b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
similarity index 100%
rename from packages/design-system/src/components/N8nUsersList/UsersList.stories.js
rename to packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
diff --git a/packages/design-system/src/main.js b/packages/design-system/src/main.js
index 9da9a9c5e0..b8b42e10ab 100644
--- a/packages/design-system/src/main.js
+++ b/packages/design-system/src/main.js
@@ -1,18 +1,4 @@
 import * as locale from './locale';
 import designSystemComponents from './plugins/n8nComponents';
-import elementUIComponents from './plugins/elementUIComponents';
 
-import Loading from 'element-ui/lib/loading';
-import MessageBox from 'element-ui/lib/message-box';
-import Message from 'element-ui/lib/message';
-import Notification from 'element-ui/lib/notification';
-
-export {
-	Loading,
-	MessageBox,
-	Message,
-	Notification,
-	locale,
-	designSystemComponents,
-	elementUIComponents,
-};
+export { locale, designSystemComponents };
diff --git a/packages/design-system/src/plugins/elementUIComponents.ts b/packages/design-system/src/plugins/elementUIComponents.ts
deleted file mode 100644
index 224be43079..0000000000
--- a/packages/design-system/src/plugins/elementUIComponents.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import Vue from 'vue';
-
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
-import Drawer from 'element-ui/lib/drawer';
-import Dialog from 'element-ui/lib/dialog';
-import Dropdown from 'element-ui/lib/dropdown';
-import DropdownMenu from 'element-ui/lib/dropdown-menu';
-import DropdownItem from 'element-ui/lib/dropdown-item';
-import Submenu from 'element-ui/lib/submenu';
-import Radio from 'element-ui/lib/radio';
-import RadioGroup from 'element-ui/lib/radio-group';
-import RadioButton from 'element-ui/lib/radio-button';
-import Checkbox from 'element-ui/lib/checkbox';
-import Switch from 'element-ui/lib/switch';
-import Select from 'element-ui/lib/select';
-import Option from 'element-ui/lib/option';
-import OptionGroup from 'element-ui/lib/option-group';
-import Pagination from 'element-ui/lib/pagination';
-import ButtonGroup from 'element-ui/lib/button-group';
-import Table from 'element-ui/lib/table';
-import TableColumn from 'element-ui/lib/table-column';
-import DatePicker from 'element-ui/lib/date-picker';
-import Tabs from 'element-ui/lib/tabs';
-import TabPane from 'element-ui/lib/tab-pane';
-import Tag from 'element-ui/lib/tag';
-import Row from 'element-ui/lib/row';
-import Col from 'element-ui/lib/col';
-import Badge from 'element-ui/lib/badge';
-import Card from 'element-ui/lib/card';
-import ColorPicker from 'element-ui/lib/color-picker';
-import Container from 'element-ui/lib/container';
-
-export default {
-	install: (app: typeof Vue) => {
-		app.component('ElCollapseTransition', CollapseTransition);
-		app.component('ElDialog', Dialog);
-		app.component('ElDrawer', Drawer);
-		app.component('ElDropdown', Dropdown);
-		app.component('ElDropdownMenu', DropdownMenu);
-		app.component('ElDropdownItem', DropdownItem);
-		app.component('ElSubmenu', Submenu);
-		app.component('ElRadio', Radio);
-		app.component('ElRadioGroup', RadioGroup);
-		app.component('ElRadioButton', RadioButton);
-		app.component('ElCheckbox', Checkbox);
-		app.component('ElSwitch', Switch);
-		app.component('ElSelect', Select);
-		app.component('n8n-option', Option);
-		app.component('ElOptionGroup', OptionGroup);
-		app.component('ElButtonGroup', ButtonGroup);
-		app.component('ElTable', Table);
-		app.component('ElTableColumn', TableColumn);
-		app.component('ElDatePicker', DatePicker);
-		app.component('ElTabs', Tabs);
-		app.component('ElTabPane', TabPane);
-		app.component('ElTag', Tag);
-		app.component('ElRow', Row);
-		app.component('ElCol', Col);
-		app.component('ElBadge', Badge);
-		app.component('ElCard', Card);
-		app.component('ElColorPicker', ColorPicker);
-		app.component('ElContainer', Container);
-		app.component('ElPagination', Pagination);
-	},
-};
diff --git a/packages/design-system/src/shims-element-ui.d.ts b/packages/design-system/src/shims-element-ui.d.ts
deleted file mode 100644
index 890388a8d1..0000000000
--- a/packages/design-system/src/shims-element-ui.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-declare module 'element-ui/lib/drawer';
-declare module 'element-ui/lib/dialog';
-declare module 'element-ui/lib/dropdown';
-declare module 'element-ui/lib/dropdown-menu';
-declare module 'element-ui/lib/dropdown-item';
-declare module 'element-ui/lib/submenu';
-declare module 'element-ui/lib/radio';
-declare module 'element-ui/lib/radio-group';
-declare module 'element-ui/lib/radio-button';
-declare module 'element-ui/lib/checkbox';
-declare module 'element-ui/lib/switch';
-declare module 'element-ui/lib/select';
-declare module 'element-ui/lib/option';
-declare module 'element-ui/lib/option-group';
-declare module 'element-ui/lib/pagination';
-declare module 'element-ui/lib/button-group';
-declare module 'element-ui/lib/table';
-declare module 'element-ui/lib/table-column';
-declare module 'element-ui/lib/date-picker';
-declare module 'element-ui/lib/tabs';
-declare module 'element-ui/lib/tab-pane';
-declare module 'element-ui/lib/tag';
-declare module 'element-ui/lib/row';
-declare module 'element-ui/lib/col';
-declare module 'element-ui/lib/badge';
-declare module 'element-ui/lib/card';
-declare module 'element-ui/lib/color-picker';
-declare module 'element-ui/lib/container';
-declare module 'element-ui/lib/loading';
-declare module 'element-ui/lib/message-box';
-declare module 'element-ui/lib/message';
-declare module 'element-ui/lib/menu';
-declare module 'element-ui/lib/menu-item';
-declare module 'element-ui/lib/notification';
-declare module 'element-ui/lib/popover';
-declare module 'element-ui/lib/transitions/collapse-transition';
-declare module 'element-ui/lib/tooltip';
-declare module 'element-ui/lib/input-number';
-declare module 'element-ui/lib/input';
-declare module 'element-ui/lib/skeleton';
-declare module 'element-ui/lib/skeleton-item';
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 32ed85692d..16fe0ac1ef 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -73,11 +73,12 @@ import { executionHelpers, IExecutionUIData } from '@/mixins/executionsHelpers';
 import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
-import ElDropdown from 'element-ui/lib/dropdown';
+import { Dropdown as ElDropdown } from 'element-ui';
 
 export default mixins(restApi, showMessage, executionHelpers).extend({
 	name: 'execution-preview',
 	components: {
+		ElDropdown,
 		WorkflowPreview,
 	},
 	data() {
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 3f7c6fec04..ddc707089a 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -7,20 +7,17 @@ import "regenerator-runtime/runtime";
 
 import VueAgile from 'vue-agile';
 
+import ElementUI from 'element-ui';
+import { Loading, MessageBox, Message, Notification } from 'element-ui';
 import {
-	Loading,
-	MessageBox,
-	Message,
-	Notification,
 	designSystemComponents,
-	elementUIComponents,
 } from 'n8n-design-system';
 import { ElMessageBoxOptions } from "element-ui/types/message-box";
 import EnterpriseEdition from "@/components/EnterpriseEdition.ee.vue";
 
 Vue.use(Fragment.Plugin);
 
-Vue.use(elementUIComponents);
+Vue.use(ElementUI);
 Vue.use(designSystemComponents);
 
 Vue.component('enterprise-edition', EnterpriseEdition);
diff --git a/packages/editor-ui/src/shims-element-ui.d.ts b/packages/editor-ui/src/shims-element-ui.d.ts
deleted file mode 100644
index 890388a8d1..0000000000
--- a/packages/editor-ui/src/shims-element-ui.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-declare module 'element-ui/lib/drawer';
-declare module 'element-ui/lib/dialog';
-declare module 'element-ui/lib/dropdown';
-declare module 'element-ui/lib/dropdown-menu';
-declare module 'element-ui/lib/dropdown-item';
-declare module 'element-ui/lib/submenu';
-declare module 'element-ui/lib/radio';
-declare module 'element-ui/lib/radio-group';
-declare module 'element-ui/lib/radio-button';
-declare module 'element-ui/lib/checkbox';
-declare module 'element-ui/lib/switch';
-declare module 'element-ui/lib/select';
-declare module 'element-ui/lib/option';
-declare module 'element-ui/lib/option-group';
-declare module 'element-ui/lib/pagination';
-declare module 'element-ui/lib/button-group';
-declare module 'element-ui/lib/table';
-declare module 'element-ui/lib/table-column';
-declare module 'element-ui/lib/date-picker';
-declare module 'element-ui/lib/tabs';
-declare module 'element-ui/lib/tab-pane';
-declare module 'element-ui/lib/tag';
-declare module 'element-ui/lib/row';
-declare module 'element-ui/lib/col';
-declare module 'element-ui/lib/badge';
-declare module 'element-ui/lib/card';
-declare module 'element-ui/lib/color-picker';
-declare module 'element-ui/lib/container';
-declare module 'element-ui/lib/loading';
-declare module 'element-ui/lib/message-box';
-declare module 'element-ui/lib/message';
-declare module 'element-ui/lib/menu';
-declare module 'element-ui/lib/menu-item';
-declare module 'element-ui/lib/notification';
-declare module 'element-ui/lib/popover';
-declare module 'element-ui/lib/transitions/collapse-transition';
-declare module 'element-ui/lib/tooltip';
-declare module 'element-ui/lib/input-number';
-declare module 'element-ui/lib/input';
-declare module 'element-ui/lib/skeleton';
-declare module 'element-ui/lib/skeleton-item';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d1930dab1..e4ce259e7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -403,7 +403,7 @@ importers:
       '@vitejs/plugin-vue2': ^1.1.2
       c8: 7.11.0
       core-js: ^3.6.5
-      element-ui: ~2.15.7
+      element-ui: ~2.15.12
       jsdom: 19.0.0
       markdown-it: ^12.3.2
       markdown-it-emoji: ^2.0.0
@@ -429,7 +429,7 @@ importers:
       webpack: ^4.46.0
       xss: ^1.0.10
     dependencies:
-      element-ui: 2.15.10_vue@2.7.13
+      element-ui: 2.15.12_vue@2.7.13
       markdown-it: 12.3.2
       markdown-it-emoji: 2.0.2
       markdown-it-link-attributes: 4.0.1
@@ -10441,8 +10441,8 @@ packages:
     resolution: {integrity: sha512-xs7vEuSZ84+JsHSTFqqG0TE3i8EAivHomRQZhhcRvsmnjsh5C2KdhwNKf4ZRYtzq75wojpFyqb62m32Oam57wA==}
     dev: true
 
-  /element-ui/2.15.10_vue@2.7.13:
-    resolution: {integrity: sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==}
+  /element-ui/2.15.12_vue@2.7.13:
+    resolution: {integrity: sha512-Y5FMT2BPOindU2GkDEQ5ZKUVxDawKONRNMh2eL3uBx1FOtvUJ+L6IxXLVsNxq4WnaX/UnVNgWXebl7DobygZMg==}
     peerDependencies:
       vue: ^2.5.17
     dependencies: