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

@@ -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',

packages/design-system/.gitignore

@@ -1,2 +1,3 @@
 coverage
 storybook-static
+**/*.stories.js

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',

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

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"
   }

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: {

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: {

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: {

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: {},

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>

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: {

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() {

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: `

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,
 	},

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>

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>

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: {},

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: {

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: {

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 };

packages/design-system/src/plugins/elementUIComponents.ts

@@ -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);
-	},
-};

packages/design-system/src/shims-element-ui.d.ts

@@ -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';

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() {

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);

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

@@ -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';

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: