diff --git a/package-lock.json b/package-lock.json index 36d336169..292a70b0d 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#f27d07d7a2472afc456413ed150ec3ff0b810464", "@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#f27d07d7a2472afc456413ed150ec3ff0b810464", + "integrity": "sha512-grXJjNartX0p4s7r72O3CDW6NPd4PnfQRP0QuNOc5hXLb3VIdRytl4kXOs71tNekikWKfs0Xtx4OD5XB32qeAA==", "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#f27d07d7a2472afc456413ed150ec3ff0b810464", + "integrity": "sha512-grXJjNartX0p4s7r72O3CDW6NPd4PnfQRP0QuNOc5hXLb3VIdRytl4kXOs71tNekikWKfs0Xtx4OD5XB32qeAA==", + "from": "@scality/core-ui@github:scality/core-ui#f27d07d7a2472afc456413ed150ec3ff0b810464", "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..412824c39 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#f27d07d7a2472afc456413ed150ec3ff0b810464", "@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/public/assets/zenko/.well-known/runtime-app-configuration b/public/assets/zenko/.well-known/runtime-app-configuration index e3beb9717..0fbf9ef4a 100644 --- a/public/assets/zenko/.well-known/runtime-app-configuration +++ b/public/assets/zenko/.well-known/runtime-app-configuration @@ -3,7 +3,7 @@ "apiVersion": "ui.scality.com/v1alpha1", "metadata": { "kind": "zenko-ui", - "name": "zenko.eu-west-1" + "name": "zenko-ui.eu-west-1" }, "spec": { "title": "Data Management", @@ -13,12 +13,12 @@ "zenkoEndpoint": "http://127.0.0.1:8383/s3", "iamEndpoint": "http://127.0.0.1:8383/iam", "features": ["XDM"], - "basePath": "/zenko" + "basePath": "" }, "auth": { "kind": "OIDC", "providerUrl": "https://ui.pod-choco.local/auth/realms/artesca", - "redirectUrl": "http://localhost:8084/zenko", + "redirectUrl": "http://localhost:8084/", "clientId": "zenko-ui", "responseType": "code", "scopes": "openid email profile", diff --git a/src/react/ToastProvider.tsx b/src/react/ToastProvider.tsx new file mode 100644 index 000000000..311dae2da --- /dev/null +++ b/src/react/ToastProvider.tsx @@ -0,0 +1,78 @@ +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 = {}; + +export type MutationConfig = { + mutation: UseMutationResult; + name: string; +}; + +type DescriptionBuilder = { + data?: Data; + error?: unknown; + name: string; +}; + +type MutationsHandlerProps = { + mainMutation: MutationConfig; + dependantMutations?: MutationConfig[]; + messageDescriptionBuilder: ( + successMutations: DescriptionBuilder[], + errorMutations: DescriptionBuilder[], + ) => ReactNode; + toastStyles?: React.CSSProperties; + onMainMutationSuccess?: () => 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..339340392 100644 --- a/src/react/ZenkoUI.tsx +++ b/src/react/ZenkoUI.tsx @@ -3,7 +3,12 @@ import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Activity from './ui-elements/Activity'; import type { AppState } from '../types/state'; -import { Banner, Icon, ScrollbarWrapper } from '@scality/core-ui'; +import { + Banner, + Icon, + ScrollbarWrapper, + ToastProvider, +} from '@scality/core-ui'; import ErrorHandlerModal from './ui-elements/ErrorHandlerModal'; import Loader from './ui-elements/Loader'; import Routes from './Routes'; @@ -60,7 +65,9 @@ function ZenkoUI() { return ( - {content()} + + {content()} + ); } diff --git a/src/react/databrowser/buckets/BucketCreate.tsx b/src/react/databrowser/buckets/BucketCreate.tsx index a8eed95ff..ec667a5ac 100644 --- a/src/react/databrowser/buckets/BucketCreate.tsx +++ b/src/react/databrowser/buckets/BucketCreate.tsx @@ -1,11 +1,10 @@ import { - Banner, Checkbox, Form, FormGroup, FormSection, - Icon, Stack, + useMutationsHandler, } from '@scality/core-ui'; import { Controller, FormProvider, useForm } from 'react-hook-form'; import { ChangeEvent, useMemo, useRef } from 'react'; @@ -24,11 +23,14 @@ 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 { MutationConfig } from '../../ToastProvider'; import { useChangeBucketDefaultRetention, useChangeBucketVersionning, useCreateBucket, } from '../../next-architecture/domain/business/buckets'; +import { PromiseResult } from 'aws-sdk/lib/request'; +import { AWSError, S3 } from 'aws-sdk'; const helpNonAsyncLocation = 'Selected Storage Location does not support Async Metadata updates.'; @@ -121,11 +123,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, @@ -199,7 +206,6 @@ function BucketCreate() { }, }); } - history.push(`/accounts/${accountName}/buckets/${name}`); }, }, ); @@ -216,6 +222,88 @@ function BucketCreate() { } }; + const mainMutation = { + mutation: createBucketMutation, + name: 'createBucket', + } as MutationConfig, unknown>; + + const dependantMutations = [ + { + mutation: changeBucketVersionningMutation, + name: 'changeBucketVersionning', + }, + { + mutation: changeBucketDefaultRetentionMutation, + name: 'changeBucketDefaultRetention', + }, + ] as MutationConfig[]; + + const messageDescriptionBuilder = ( + successMutations: { + data?: unknown; + error?: unknown; + name: string; + }[], + errorMutations: { + data?: unknown; + error?: unknown; + name: string; + }[], + ) => { + 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, + onMainMutationSuccess: () => + 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.'} - - ) - } >