🐛 Fix issue with tooltips getting displayed behind node details view

* fix tooltips z-index * move all element ui components * update package lock
2024-09-21 01:47:36 +03:00 · 2022-03-04 19:34:24 +03:00 · 2022-03-04 19:34:24 +03:00 · c3f3e98718
commit c3f3e98718
parent 3513aa128a
6 changed files with 144 additions and 84 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -157,14 +157,14 @@
 			"integrity": "sha512-dG76W7ElfLi+fbTjnZVGj+M9e0BIEJmRxU6fHaUQ12bZBe8EJKYb2GV50YWNaP2uJiVQ5+7nXEVj1VN1UQtaEw=="
 		},
 		"@azure/ms-rest-js": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/@azure/ms-rest-js/-/ms-rest-js-2.6.0.tgz",
-			"integrity": "sha512-4C5FCtvEzWudblB+h92/TYYPiq7tuElX8icVYToxOdggnYqeec4Se14mjse5miInKtZahiFHdl8lZA/jziEc5g==",
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/@azure/ms-rest-js/-/ms-rest-js-2.6.1.tgz",
+			"integrity": "sha512-LLi4jRe/qy5IM8U2CkoDgSZp2OH+MgDe2wePmhz8uY84Svc53EhHaamVyoU6BjjHBxvCRh1vcD1urJDccrxqIw==",
 			"requires": {
 				"@azure/core-auth": "^1.1.4",
 				"abort-controller": "^3.0.0",
 				"form-data": "^2.5.0",
-				"node-fetch": "^2.6.0",
+				"node-fetch": "^2.6.7",
 				"tough-cookie": "^3.0.1",
 				"tslib": "^1.10.0",
 				"tunnel": "0.0.6",
@ -11046,9 +11046,9 @@
 					}
 				},
 				"terser": {
-					"version": "5.11.0",
-					"resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
-					"integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
+					"version": "5.12.0",
+					"resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+					"integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
 					"requires": {
 						"acorn": "^8.5.0",
 						"commander": "^2.20.0",
@ -11911,9 +11911,9 @@
 					}
 				},
 				"terser": {
-					"version": "5.11.0",
-					"resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
-					"integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
+					"version": "5.12.0",
+					"resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+					"integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
 					"requires": {
 						"acorn": "^8.5.0",
 						"commander": "^2.20.0",
@ -12881,9 +12881,9 @@
 			},
 			"dependencies": {
 				"csstype": {
-					"version": "3.0.10",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-					"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+					"version": "3.0.11",
+					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
+					"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
 				}
 			}
 		},
@ -13155,9 +13155,9 @@
 			}
 		},
 		"@types/yargs-parser": {
-			"version": "20.2.1",
-			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
-			"integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw=="
+			"version": "21.0.0",
+			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
+			"integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
 		},
 		"@typescript-eslint/eslint-plugin": {
 			"version": "4.33.0",
@ -15913,9 +15913,9 @@
 			"integrity": "sha512-uUbetCWczQHbsKyX1C99XpQHBM8SWfovvaZhPIj23/1uV7SQf0WeRZbiLpw0JZm+LHTChfNgrLfDJOVoU2kU+A=="
 		},
 		"aws-sdk": {
-			"version": "2.1082.0",
-			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1082.0.tgz",
-			"integrity": "sha512-aDrUZ63O/ocuC827ursDqFQAm3jhqsJu1DvMCCFg73y+FK9pXXNHp2mwdi3UeeHvtfxISCLCjuyO3VFd/tpVfA==",
+			"version": "2.1085.0",
+			"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1085.0.tgz",
+			"integrity": "sha512-zL20v5QXoSsb2S6RKAhDmfnZYUIRldR93ihJ6mCYrw6Zl+Dir2SVmALy++U/zduDbKB4NaU72mscumx2RWc7Hg==",
 			"requires": {
 				"buffer": "4.9.2",
 				"events": "1.1.1",
@ -20415,9 +20415,9 @@
 			}
 		},
 		"csstype": {
-			"version": "2.6.19",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
-			"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
+			"version": "2.6.20",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+			"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 		},
 		"currently-unhandled": {
 			"version": "0.4.1",
@ -21344,9 +21344,9 @@
 			"integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
 		},
 		"electron-to-chromium": {
-			"version": "1.4.73",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz",
-			"integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA=="
+			"version": "1.4.75",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",
+			"integrity": "sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q=="
 		},
 		"element-resize-detector": {
 			"version": "1.2.4",
@ -22024,9 +22024,9 @@
 			}
 		},
 		"eslint-config-prettier": {
-			"version": "8.4.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz",
-			"integrity": "sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw=="
+			"version": "8.5.0",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+			"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q=="
 		},
 		"eslint-config-riot": {
 			"version": "1.0.0",
@ -32259,11 +32259,11 @@
 			"dev": true
 		},
 		"magic-string": {
-			"version": "0.25.7",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
-			"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+			"version": "0.25.9",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+			"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
 			"requires": {
-				"sourcemap-codec": "^1.4.4"
+				"sourcemap-codec": "^1.4.8"
 			}
 		},
 		"mailparser": {
@ -37553,9 +37553,9 @@
 			}
 		},
 		"react-router": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
-			"integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+			"integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
 			"requires": {
 				"history": "^5.2.0"
 			},
@ -37571,12 +37571,12 @@
 			}
 		},
 		"react-router-dom": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
-			"integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+			"integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
 			"requires": {
 				"history": "^5.2.0",
-				"react-router": "6.2.1"
+				"react-router": "6.2.2"
 			},
 			"dependencies": {
 				"history": {
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@ -29,15 +29,14 @@
    "@fortawesome/fontawesome-svg-core": "1.x",
    "@fortawesome/free-solid-svg-icons": "5.x",
    "@fortawesome/vue-fontawesome": "2.x",
-    "core-js": "3.x",
-    "element-ui": "2.15.x"
+    "core-js": "3.x"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "core-js": "^3.6.5",
-    "element-ui": "2.15.x",
+    "element-ui": "~2.15.7",
    "storybook-addon-themes": "^6.1.0",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
--- a/packages/design-system/src/components/index.js
+++ b/packages/design-system/src/components/index.js
@ -1,3 +1,36 @@
+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 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';
+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';
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+
 import N8nButton from './N8nButton';
 import N8nIcon from './N8nIcon';
 import N8nIconButton from './N8nIconButton';
@ -19,6 +52,10 @@ import N8nText from './N8nText';
 import N8nTooltip from './N8nTooltip';
 import N8nOption from './N8nOption';

+import lang from 'element-ui/lib/locale/lang/en';
+import locale from 'element-ui/lib/locale';
+locale.use(lang);
+
 export {
 	N8nButton,
 	N8nIcon,
@ -40,4 +77,36 @@ export {
 	N8nText,
 	N8nTooltip,
 	N8nOption,
+	Dialog,
+	Drawer,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	Submenu,
+	Radio,
+	RadioGroup,
+	RadioButton,
+	Checkbox,
+	Switch,
+	Select,
+	Option,
+	OptionGroup,
+	ButtonGroup,
+	Table,
+	TableColumn,
+	DatePicker,
+	Tabs,
+	TabPane,
+	Tag,
+	Row,
+	Col,
+	Badge,
+	Card,
+	ColorPicker,
+	Container,
+	Loading,
+	MessageBox,
+	Message,
+	Notification,
+	CollapseTransition,
 };
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@ -63,7 +63,6 @@
    "babel-eslint": "^10.0.1",
    "cross-env": "^7.0.2",
    "dateformat": "^3.0.3",
-    "element-ui": "~2.15.7",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-vue": "^7.16.0",
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@ -5,46 +5,43 @@ import Fragment from 'vue-fragment';

 import "regenerator-runtime/runtime";

-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 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';
-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';
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import VueAgile from 'vue-agile';

-// @ts-ignore
-import lang from 'element-ui/lib/locale/lang/en';
-// @ts-ignore
-import locale from 'element-ui/lib/locale';
-
 import {
+	// element ui components
+	Dialog,
+	Drawer,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	Submenu,
+	Radio,
+	RadioGroup,
+	RadioButton,
+	Checkbox,
+	Switch,
+	Select,
+	Option,
+	OptionGroup,
+	ButtonGroup,
+	Table,
+	TableColumn,
+	DatePicker,
+	Tabs,
+	TabPane,
+	Tag,
+	Row,
+	Col,
+	Badge,
+	Card,
+	ColorPicker,
+	Container,
+	Loading,
+	MessageBox,
+	Message,
+	Notification,
+	CollapseTransition,
+
 	N8nIconButton,
 	N8nButton,
 	N8nInfoTip,
@ -91,8 +88,6 @@ Vue.use(N8nTooltip);
 Vue.use(N8nOption);

 // element io
-locale.use(lang);
-
 Vue.use(Dialog);
 Vue.use(Drawer);
 Vue.use(Dropdown);
--- a/packages/editor-ui/vue.config.js
+++ b/packages/editor-ui/vue.config.js
@ -1,5 +1,4 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const webpack = require('webpack');

 module.exports = {
 	chainWebpack: config => {
@ -27,7 +26,6 @@ module.exports = {
 		},
 		plugins: [
 			new MonacoWebpackPlugin({ languages: ['javascript', 'json', 'typescript'] }),
-			new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en'),
 		],
 	},
 	css: {