From c3f3e98718e9c41e751f4ed7ed1289cedc2f3924 Mon Sep 17 00:00:00 2001 From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Date: Fri, 4 Mar 2022 19:34:24 +0300 Subject: [PATCH] :bug: Fix issue with tooltips getting displayed behind node details view * fix tooltips z-index * move all element ui components * update package lock --- package-lock.json | 78 +++++++++---------- packages/design-system/package.json | 5 +- .../design-system/src/components/index.js | 69 ++++++++++++++++ packages/editor-ui/package.json | 1 - packages/editor-ui/src/plugins/components.ts | 73 ++++++++--------- packages/editor-ui/vue.config.js | 2 - 6 files changed, 144 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 99461f2cd0..58f4b9b9f3 100644 --- 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": { diff --git a/packages/design-system/package.json b/packages/design-system/package.json index d0831a2201..df0910335d 100644 --- 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", diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js index c62ee197e9..4061459513 100644 --- 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, }; diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json index 562965a066..8c63bf18ff 100644 --- 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", diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts index 7c84fa12a6..449168e9b9 100644 --- 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); diff --git a/packages/editor-ui/vue.config.js b/packages/editor-ui/vue.config.js index b001f73168..35338dd497 100644 --- 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: {