diff --git a/package-lock.json b/package-lock.json index 36d336169..a9f68fee3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#0.93.0", + "@scality/core-ui": "github:scality/core-ui#0b877541d7a1c867a399ad5d5e76b853de97b669", "@scality/module-federation": "github:scality/module-federation#1.1.0", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", @@ -45,6 +45,7 @@ "react-dropzone": "12.0.4", "react-error-boundary": "^3.1.1", "react-hook-form": "^7.28.1", + "react-intl": "^5.25.1", "react-query": "3.34.0", "react-redux": "^7.1.3", "react-router-dom": "5.2.0", @@ -2108,6 +2109,92 @@ "@floating-ui/core": "^0.3.0" } }, + "node_modules/@formatjs/ecma402-abstract": { + "version": "1.11.4", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz", + "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==", + "dependencies": { + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/fast-memoize": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz", + "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/icu-messageformat-parser": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz", + "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/icu-skeleton-parser": "1.3.6", + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/icu-skeleton-parser": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz", + "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/intl": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz", + "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.1.0", + "@formatjs/intl-displaynames": "5.4.3", + "@formatjs/intl-listformat": "6.5.3", + "intl-messageformat": "9.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "typescript": "^4.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@formatjs/intl-displaynames": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz", + "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/intl-listformat": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz", + "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "node_modules/@formatjs/intl-localematcher": { + "version": "0.2.25", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz", + "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "0.2.36", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", @@ -3098,11 +3185,13 @@ "dev": true }, "node_modules/@scality/core-ui": { - "version": "0.93.0", - "resolved": "git+ssh://git@github.com/scality/core-ui.git#e04d684714d555afc84dafd3789001029e59345b", + "version": "0.98.0", + "resolved": "git+ssh://git@github.com/scality/core-ui.git#0b877541d7a1c867a399ad5d5e76b853de97b669", + "integrity": "sha512-TSZ1vr57+WtgCGq+UwPm3JX80WYV9BIvcuohlvy3WaighYFFXkYYWPYjbZb3460J5bFtnUfmAhd0PRygZDBn3w==", "license": "SEE LICENSE IN LICENSE", "dependencies": { - "@floating-ui/dom": "^0.1.10" + "@floating-ui/dom": "^0.1.10", + "framer-motion": "^4.1.17" }, "peerDependencies": { "@fortawesome/fontawesome-free": "^5.10.2", @@ -9604,6 +9693,48 @@ "node": ">=0.10.0" } }, + "node_modules/framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0", + "react-dom": ">=16.8 || ^17.0.0" + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, + "node_modules/framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -10121,6 +10252,11 @@ "integrity": "sha512-xAxZkM1dRyGV2Ou5bzMxBPNLoRCjcX+ya7KSWybQD2KwLphxsapUVK6x/02o7f4VU6GPSXch9vNY2+gkU8tYWQ==", "dev": true }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "node_modules/history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", @@ -10855,6 +10991,17 @@ "node": ">=10.13.0" } }, + "node_modules/intl-messageformat": { + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz", + "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.1.0", + "tslib": "^2.1.0" + } + }, "node_modules/ip-regex": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz", @@ -15503,6 +15650,17 @@ "@babel/runtime": "^7.4.5" } }, + "node_modules/popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, "node_modules/portable-fetch": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/portable-fetch/-/portable-fetch-3.0.0.tgz", @@ -16142,6 +16300,32 @@ "react": "^16.3.0 || ^17.0.0" } }, + "node_modules/react-intl": { + "version": "5.25.1", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz", + "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/icu-messageformat-parser": "2.1.0", + "@formatjs/intl": "2.2.1", + "@formatjs/intl-displaynames": "5.4.3", + "@formatjs/intl-listformat": "6.5.3", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/react": "16 || 17 || 18", + "hoist-non-react-statics": "^3.3.2", + "intl-messageformat": "9.13.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": "^16.3.0 || 17 || 18", + "typescript": "^4.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -18665,6 +18849,15 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, "node_modules/styled-components": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", @@ -22554,6 +22747,84 @@ "@floating-ui/core": "^0.3.0" } }, + "@formatjs/ecma402-abstract": { + "version": "1.11.4", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz", + "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==", + "requires": { + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "@formatjs/fast-memoize": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz", + "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@formatjs/icu-messageformat-parser": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz", + "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/icu-skeleton-parser": "1.3.6", + "tslib": "^2.1.0" + } + }, + "@formatjs/icu-skeleton-parser": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz", + "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "tslib": "^2.1.0" + } + }, + "@formatjs/intl": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz", + "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.1.0", + "@formatjs/intl-displaynames": "5.4.3", + "@formatjs/intl-listformat": "6.5.3", + "intl-messageformat": "9.13.0", + "tslib": "^2.1.0" + } + }, + "@formatjs/intl-displaynames": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz", + "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "@formatjs/intl-listformat": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz", + "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/intl-localematcher": "0.2.25", + "tslib": "^2.1.0" + } + }, + "@formatjs/intl-localematcher": { + "version": "0.2.25", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz", + "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==", + "requires": { + "tslib": "^2.1.0" + } + }, "@fortawesome/fontawesome-common-types": { "version": "0.2.36", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", @@ -23348,10 +23619,12 @@ "dev": true }, "@scality/core-ui": { - "version": "git+ssh://git@github.com/scality/core-ui.git#e04d684714d555afc84dafd3789001029e59345b", - "from": "@scality/core-ui@github:scality/core-ui#0.93.0", + "version": "git+ssh://git@github.com/scality/core-ui.git#0b877541d7a1c867a399ad5d5e76b853de97b669", + "integrity": "sha512-TSZ1vr57+WtgCGq+UwPm3JX80WYV9BIvcuohlvy3WaighYFFXkYYWPYjbZb3460J5bFtnUfmAhd0PRygZDBn3w==", + "from": "@scality/core-ui@github:scality/core-ui#0b877541d7a1c867a399ad5d5e76b853de97b669", "requires": { - "@floating-ui/dom": "^0.1.10" + "@floating-ui/dom": "^0.1.10", + "framer-motion": "^4.1.17" } }, "@scality/module-federation": { @@ -28392,6 +28665,44 @@ "map-cache": "^0.2.2" } }, + "framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + } + } + }, + "framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "requires": { + "tslib": "^2.1.0" + } + }, "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -28775,6 +29086,11 @@ "integrity": "sha512-xAxZkM1dRyGV2Ou5bzMxBPNLoRCjcX+ya7KSWybQD2KwLphxsapUVK6x/02o7f4VU6GPSXch9vNY2+gkU8tYWQ==", "dev": true }, + "hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", @@ -29329,6 +29645,17 @@ "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==", "dev": true }, + "intl-messageformat": { + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz", + "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.1.0", + "tslib": "^2.1.0" + } + }, "ip-regex": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz", @@ -32843,6 +33170,17 @@ "@babel/runtime": "^7.4.5" } }, + "popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "requires": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, "portable-fetch": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/portable-fetch/-/portable-fetch-3.0.0.tgz", @@ -33335,6 +33673,23 @@ "prop-types": "^15.5.8" } }, + "react-intl": { + "version": "5.25.1", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz", + "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.4", + "@formatjs/icu-messageformat-parser": "2.1.0", + "@formatjs/intl": "2.2.1", + "@formatjs/intl-displaynames": "5.4.3", + "@formatjs/intl-listformat": "6.5.3", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/react": "16 || 17 || 18", + "hoist-non-react-statics": "^3.3.2", + "intl-messageformat": "9.13.0", + "tslib": "^2.1.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -35330,6 +35685,15 @@ "schema-utils": "^2.7.0" } }, + "style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "requires": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, "styled-components": { "version": "5.3.5", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", diff --git a/package.json b/package.json index ac73a0f60..5d722a4d7 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@hookform/resolvers": "^2.8.8", "@js-temporal/polyfill": "^0.4.3", "@monaco-editor/react": "^4.4.5", - "@scality/core-ui": "github:scality/core-ui#0.93.0", + "@scality/core-ui": "github:scality/core-ui#0b877541d7a1c867a399ad5d5e76b853de97b669", "@scality/module-federation": "github:scality/module-federation#1.1.0", "@types/react-table": "^7.7.10", "@types/react-virtualized": "^9.21.20", @@ -102,6 +102,7 @@ "react-dropzone": "12.0.4", "react-error-boundary": "^3.1.1", "react-hook-form": "^7.28.1", + "react-intl": "^5.25.1", "react-query": "3.34.0", "react-redux": "^7.1.3", "react-router-dom": "5.2.0", diff --git a/src/react/ToastProvider.tsx b/src/react/ToastProvider.tsx new file mode 100644 index 000000000..0ecd9ddbe --- /dev/null +++ b/src/react/ToastProvider.tsx @@ -0,0 +1,84 @@ +import { ErrorPage500 } from '@scality/core-ui'; +import { ComponentWithFederatedImports } from '@scality/module-federation'; +import { Node, ReactNode } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import { useIntl } from 'react-intl'; +import { UseMutationResult } from 'react-query'; + +const toastGlobal = {}; + +type MainMutationConfig = { + mutation: UseMutationResult; + name: string; + isPrimary: boolean; +}; + +type DependantMutationConfig = Omit< + MainMutationConfig, + 'isPrimary' +>; + +type DescriptionBuilder = { + data?: Data; + error?: unknown; + name: string; +}; + +type MutationsHandlerProps = { + mainMutation: MainMutationConfig; + dependantMutations?: DependantMutationConfig[]; + messageDescriptionBuilder: ( + successMutations: DescriptionBuilder[], + errorMutations: DescriptionBuilder[], + ) => ReactNode; + toastStyles?: React.CSSProperties; + onPrimarySuccess?: () => void; +}; + +export function useToast() { + return toastGlobal.hooks.useToast(); +} + +export function useMutationsHandler( + mutationsHandlerProps: MutationsHandlerProps, +) { + return toastGlobal.hooks2.useMutationsHandler(mutationsHandlerProps); +} + +const InternalToastProvider = ({ moduleExports, children }) => { + toastGlobal.hooks = moduleExports['./toast/useToast']; + toastGlobal.hooks2 = moduleExports['./toast/useMutationsHandler']; + return <>{children}; +}; + +function ErrorFallback() { + const intl = useIntl(); + const language = intl.locale; + return ; +} + +export function ToastProvider({ children }: { children: Node }): Node { + return ( + + } + componentProps={{ + children, + }} + federatedImports={[ + { + scope: 'shell', + module: './toast/useToast', + remoteEntryUrl: window.shellUIRemoteEntryUrl, + }, + { + scope: 'shell', + module: './toast/useMutationsHandler', + remoteEntryUrl: window.shellUIRemoteEntryUrl, + }, + ]} + /> + + ); +} diff --git a/src/react/ZenkoUI.tsx b/src/react/ZenkoUI.tsx index c4a8fd8ab..5ae7be913 100644 --- a/src/react/ZenkoUI.tsx +++ b/src/react/ZenkoUI.tsx @@ -11,6 +11,7 @@ import { ThemeProvider } from 'styled-components'; import { loadAppConfig } from './actions'; import { useConfig } from './next-architecture/ui/ConfigProvider'; import { useAuth } from './next-architecture/ui/AuthProvider'; +import { ToastProvider } from './ToastProvider'; function ZenkoUI() { const isConfigLoaded = useSelector( @@ -60,7 +61,9 @@ function ZenkoUI() { return ( - {content()} + + {content()} + ); } diff --git a/src/react/databrowser/buckets/BucketCreate.tsx b/src/react/databrowser/buckets/BucketCreate.tsx index a8eed95ff..589f5d5ee 100644 --- a/src/react/databrowser/buckets/BucketCreate.tsx +++ b/src/react/databrowser/buckets/BucketCreate.tsx @@ -24,6 +24,7 @@ import { XDM_FEATURE } from '../../../js/config'; import { renderLocation } from '../../locations/utils'; import { convertRemToPixels } from '@scality/core-ui/dist/utils'; import { useHistory, useParams } from 'react-router-dom'; +import { useMutationsHandler } from '../../ToastProvider'; import { useChangeBucketDefaultRetention, useChangeBucketVersionning, @@ -121,11 +122,16 @@ function BucketCreate() { const formRef = useRef(null); useOutsideClick(formRef, clearServerError); - const { mutate: createBucket, error } = useCreateBucket(); - const { mutate: changeBucketVersionning } = useChangeBucketVersionning(); - const { mutate: changeBucketDefaultRetention } = + const createBucketMutation = useCreateBucket(); + const changeBucketVersionningMutation = useChangeBucketVersionning(); + const changeBucketDefaultRetentionMutation = useChangeBucketDefaultRetention(); + const { mutate: createBucket, error } = createBucketMutation; + const { mutate: changeBucketVersionning } = changeBucketVersionningMutation; + const { mutate: changeBucketDefaultRetention } = + changeBucketDefaultRetentionMutation; + const onSubmit = ({ name, locationName, @@ -167,7 +173,7 @@ function BucketCreate() { ObjectLockEnabledForBucket: isObjectLockEnabled, }, { - onSuccess: () => { + onSuccess: (data) => { if (isVersioning) { changeBucketVersionning({ Bucket: name, @@ -199,7 +205,7 @@ function BucketCreate() { }, }); } - history.push(`/accounts/${accountName}/buckets/${name}`); + // history.push(`/accounts/${accountName}/buckets/${name}`); }, }, ); @@ -216,6 +222,82 @@ function BucketCreate() { } }; + const mainMutation = { + mutation: createBucketMutation, + name: 'createBucket', + isPrimary: true, + }; + + const dependantMutations = [ + { + mutation: changeBucketVersionningMutation, + name: 'changeBucketVersionning', + }, + { + mutation: changeBucketDefaultRetentionMutation, + name: 'changeBucketDefaultRetention', + }, + ]; + + const messageDescriptionBuilder = (successMutations, errorMutations) => { + const bucketCreateMessage = 'Bucket successfully created.'; + const bucketVersionningMessage = 'Bucket version enabled.'; + const retentionMessage = 'Default retention enabled.'; + + if (errorMutations.length) { + return ( + <> + {errorMessage || + (error && + typeof error === 'object' && + 'message' in error && + error?.message) || + 'An unexpected error occurred.'} + + ); + } else if (successMutations.length) { + const isBucketCreated = successMutations.find( + ({ name }) => name === 'createBucket', + ); + const isBucketVersionning = successMutations.find( + ({ name }) => name === 'changeBucketVersionning', + ); + const isBucketDefaultRetention = successMutations.find( + ({ name }) => name === 'changeBucketDefaultRetention', + ); + + return ( + <> + {isBucketCreated && <>{bucketCreateMessage}} + {isBucketVersionning && ( + <> +
+ {bucketVersionningMessage} + + )} + {isBucketDefaultRetention && ( + <> +
+ {retentionMessage} + + )} + + ); + } + }; + + useMutationsHandler({ + mainMutation, + dependantMutations, + messageDescriptionBuilder, + toastStyles: { + top: '3rem', + right: '1rem', + }, + onPrimarySuccess: () => + history.push(`/accounts/${accountName}/buckets/${name}`), + }); + return (
} - banner={ - (errorMessage || error) && ( - } - title={'Error'} - > - {errorMessage || - (error && - typeof error === 'object' && - 'message' in error && - error?.message) || - 'An unexpected error occurred.'} - - ) - } + // banner={ + // (errorMessage || error) && ( + // } + // title={'Error'} + // > + // {errorMessage || + // (error && + // typeof error === 'object' && + // 'message' in error && + // error?.message) || + // 'An unexpected error occurred.'} + // + // ) + // } >