diff --git a/package-lock.json b/package-lock.json index e4b097c2..e02c61df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,15 +10,15 @@ "hasInstallScript": true, "license": "GNU AGPLv3", "dependencies": { - "@patternfly/patternfly": "5.4.0", - "@patternfly/react-charts": "7.4.2", - "@patternfly/react-component-groups": "^5.2.0", - "@patternfly/react-core": "5.4.0", - "@patternfly/react-icons": "5.4.0", - "@patternfly/react-table": "5.4.0", - "@patternfly/react-tokens": "5.4.0", + "@ausuliv/frontend-components-notifications": "^4.1.5", + "@patternfly/patternfly": "6.0.0-prerelease.13", + "@patternfly/react-charts": "8.0.0-prerelease.10", + "@patternfly/react-component-groups": "6.0.0-prerelease.2", + "@patternfly/react-core": "6.0.0-prerelease.13", + "@patternfly/react-icons": "6.0.0-prerelease.4", + "@patternfly/react-table": "6.0.0-prerelease.13", + "@patternfly/react-tokens": "6.0.0-prerelease.4", "@redhat-cloud-services/frontend-components": "^4.2.15", - "@redhat-cloud-services/frontend-components-notifications": "^4.1.0", "@redhat-cloud-services/frontend-components-translations": "^3.2.8", "@redhat-cloud-services/frontend-components-utilities": "^4.0.17", "@redhat-cloud-services/rbac-client": "^2.2.4", @@ -117,6 +117,151 @@ "node": ">=6.0.0" } }, + "node_modules/@ausuliv/frontend-components": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components/-/frontend-components-4.2.11.tgz", + "integrity": "sha512-5EiOvSy/cW4O3H1mhEY2D/GwihmoNkq6U7+3c+Ek/oNHqD4dw+dKGUk1/XQ0GTGUozy4+DmiZ8OzrBzQDW0BLw==", + "license": "Apache-2.0", + "dependencies": { + "@ausuliv/frontend-components-utilities": "^4.0.10", + "@patternfly/react-component-groups": "6.0.0-alpha.12", + "@redhat-cloud-services/types": "^0.0.24", + "@scalprum/core": "^0.7.0", + "@scalprum/react-core": "^0.7.0", + "classnames": "^2.2.5", + "sanitize-html": "^2.7.2" + }, + "peerDependencies": { + "@patternfly/react-core": "6.0.0-alpha.100", + "@patternfly/react-icons": "6.0.0-alpha.35", + "@patternfly/react-table": "6.0.0-alpha.101", + "lodash": "^4.17.15", + "prop-types": "^15.6.2", + "react": "^18.2.0", + "react-content-loader": "^6.2.0", + "react-dom": "^18.2.0", + "react-redux": ">=7.0.0", + "react-router-dom": "^5.0.0 || ^6.0.0" + } + }, + "node_modules/@ausuliv/frontend-components-notifications": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components-notifications/-/frontend-components-notifications-4.1.5.tgz", + "integrity": "sha512-Zm+QOT1wvJl60V6SD9KEIROYJt0uBgNsRKmtz9Q2UnhjCP/DZGVhYsSk97cNth+c59nWhdciKEjvrw1aubzsxw==", + "license": "Apache-2.0", + "dependencies": { + "@ausuliv/frontend-components": "^4.2.9", + "@ausuliv/frontend-components-utilities": "^4.0.11", + "redux-promise-middleware": "6.1.3" + }, + "peerDependencies": { + "@patternfly/react-core": "6.0.0-alpha.100", + "@patternfly/react-icons": "6.0.0-alpha.35", + "prop-types": "^15.6.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-redux": ">=7.2.9", + "redux": ">=4.2.0" + } + }, + "node_modules/@ausuliv/frontend-components-utilities": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components-utilities/-/frontend-components-utilities-4.0.13.tgz", + "integrity": "sha512-eQWk0ATeaFunJaqWZKwldEE77+k5z+8MzBDiLI6az0IWp8mykZcZnkV72517r6YI/UPU4Nm50UtMd1Gw8q7yIA==", + "license": "Apache-2.0", + "dependencies": { + "@redhat-cloud-services/rbac-client": "^1.0.100", + "@redhat-cloud-services/types": "^0.0.24", + "@sentry/browser": "^5.30.0", + "awesome-debounce-promise": "^2.1.0", + "axios": "^0.28.1", + "commander": "^2.20.3", + "mkdirp": "^1.0.4", + "p-all": "^5.0.0", + "react-content-loader": "^6.2.0" + }, + "peerDependencies": { + "@patternfly/react-core": "6.0.0-alpha.100", + "@patternfly/react-table": "6.0.0-alpha.101", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-redux": ">=7.0.0", + "react-router-dom": "^5.0.0 || ^6.0.0" + } + }, + "node_modules/@ausuliv/frontend-components-utilities/node_modules/@redhat-cloud-services/rbac-client": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/rbac-client/-/rbac-client-1.4.5.tgz", + "integrity": "sha512-7kryZfzEYuw1V7c8bO5esXnfeYQO4Skz1XhluJ2whZNji8HcVbwDjBsQxy0+ndaSVirh5d86fufb00vK6fyUjw==", + "license": "Apache-2.0", + "dependencies": { + "axios": "^0.27.2", + "tslib": "^2.6.2" + } + }, + "node_modules/@ausuliv/frontend-components-utilities/node_modules/@redhat-cloud-services/rbac-client/node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, + "node_modules/@ausuliv/frontend-components-utilities/node_modules/axios": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz", + "integrity": "sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/@ausuliv/frontend-components/node_modules/@patternfly/react-component-groups": { + "version": "6.0.0-alpha.12", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.0.0-alpha.12.tgz", + "integrity": "sha512-tmR6SWEVntEYPXQvtnivZgL3xdhPb6Fa73Yiyse9wSrrEo/Vv8oBD+e1SswOImfS0ELzFc9bLby20cN0xZQAKw==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^6.0.0-alpha.100", + "@patternfly/react-icons": "^6.0.0-alpha.35", + "@patternfly/react-table": "^6.0.0-alpha.101", + "clsx": "^2.1.1", + "react-jss": "^10.10.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, + "node_modules/@ausuliv/frontend-components/node_modules/@scalprum/core": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@scalprum/core/-/core-0.7.0.tgz", + "integrity": "sha512-zvrPXexI+bxHGFY/teuwPI5yjnOuiq8uT+RDsrm3gnpr1AqZQVUiGdskl1ON/ci5lSs1kNadmXceF1BTKlicwg==", + "license": "Apache-2.0", + "dependencies": { + "@openshift/dynamic-plugin-sdk": "^5.0.1", + "tslib": "^2.6.2" + } + }, + "node_modules/@ausuliv/frontend-components/node_modules/@scalprum/react-core": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@scalprum/react-core/-/react-core-0.7.1.tgz", + "integrity": "sha512-CdLSwg46MYyDqCjWGuim/u0HF6GaPPGxXRD6AkWCkB4o3feBep+2zRAjzNfi3IlhNufWaiswxLpThhTLG4cgMg==", + "license": "Apache-2.0", + "dependencies": { + "@openshift/dynamic-plugin-sdk": "^5.0.1", + "@scalprum/core": "^0.7.0", + "lodash": "^4.17.0" + }, + "peerDependencies": { + "react": ">=16.8.0 || >=17.0.0 || ^18.0.0", + "react-dom": ">=16.8.0 || >=17.0.0 || ^18.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.23.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", @@ -2163,22 +2308,22 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.4.0.tgz", - "integrity": "sha512-9B33M4N0/KDyss6NpCwAhz18za7R+sXYiFrUObhGoJ1Cmg06SeScVrEAjT4yJwAClWUlKh604Af9wE4D7IF8Lg==", + "version": "6.0.0-prerelease.13", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.0.0-prerelease.13.tgz", + "integrity": "sha512-Rs5WuiIzt87pp2saJ2AtN1pU9qj7/VjU4vsKEprIf0S1hBANrGVuMWrDBxfsBQptWqc9TLpxJJcuPEUjz2w5aw==", "license": "MIT" }, "node_modules/@patternfly/react-charts": { - "version": "7.4.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.4.2.tgz", - "integrity": "sha512-R46g/xrCmAduc6aWth/z+qmDkkJxAN4RrPLFN8Kecy3Lwk115qqyuxBikXg4jEdGhycVDzzNXHS68XQEmxBYAg==", + "version": "8.0.0-prerelease.10", + "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-8.0.0-prerelease.10.tgz", + "integrity": "sha512-uoCb/jT1TBKY5otqmlsbXYOIP2l6mj5chxo8UveZ3lVnJ/taZB4V0RgqdDpO2Nih7yGsrXzlFm2Op2rWcuzoAA==", "license": "MIT", "dependencies": { - "@patternfly/react-styles": "^5.4.0", - "@patternfly/react-tokens": "^5.4.0", + "@patternfly/react-styles": "^6.0.0-prerelease.3", + "@patternfly/react-tokens": "^6.0.0-prerelease.4", "hoist-non-react-statics": "^3.3.2", "lodash": "^4.17.21", - "tslib": "^2.6.3", + "tslib": "^2.7.0", "victory-area": "^37.1.1", "victory-axis": "^37.1.1", "victory-bar": "^37.1.1", @@ -2209,14 +2354,15 @@ "license": "0BSD" }, "node_modules/@patternfly/react-component-groups": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.2.0.tgz", - "integrity": "sha512-kb57OOVJ9L5fbY/kiil8awPWuJVops8Rz1ZNFtkEb72mF3lhmRadYNheLBeaD8T9GE1dOaVJRMMf133ZSKN87g==", + "version": "6.0.0-prerelease.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.0.0-prerelease.2.tgz", + "integrity": "sha512-ma9Ec/abB0iI9jf2mPafrqdFGXSTJpe+XIg+hLTHSHr4LKFYNIGd80z6cWlZ1CuQqt8ukIawnNvxenOY27FjLw==", + "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.1.1", - "@patternfly/react-icons": "^5.1.1", - "@patternfly/react-table": "^5.1.1", - "clsx": "^2.0.0", + "@patternfly/react-core": "^6.0.0-alpha.101", + "@patternfly/react-icons": "^6.0.0-alpha.36", + "@patternfly/react-table": "^6.0.0-alpha.102", + "clsx": "^2.1.1", "react-jss": "^10.10.0" }, "peerDependencies": { @@ -2225,17 +2371,17 @@ } }, "node_modules/@patternfly/react-core": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.4.0.tgz", - "integrity": "sha512-Tz2Y9V4G2pnwrylc/4/FyxIRFvxiA8BEBIG6UBwXxrstnJmJaHgAIy6QJdJmERzVx3GVDz6/rM0PnMqa5R6auQ==", + "version": "6.0.0-prerelease.13", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-prerelease.13.tgz", + "integrity": "sha512-jvfOL+uTwL+47RXWe2PqeeWEAWvKsTqbu1RUiRrfwCZ5My/BCcuSACsNY+5yvebNAVg6xlHxOcfO71ouw4GtrQ==", "license": "MIT", "dependencies": { - "@patternfly/react-icons": "^5.4.0", - "@patternfly/react-styles": "^5.4.0", - "@patternfly/react-tokens": "^5.4.0", - "focus-trap": "7.5.4", + "@patternfly/react-icons": "^6.0.0-prerelease.4", + "@patternfly/react-styles": "^6.0.0-prerelease.3", + "@patternfly/react-tokens": "^6.0.0-prerelease.4", + "focus-trap": "7.6.0", "react-dropzone": "^14.2.3", - "tslib": "^2.6.3" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", @@ -2249,9 +2395,9 @@ "license": "0BSD" }, "node_modules/@patternfly/react-icons": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.4.0.tgz", - "integrity": "sha512-2M3qN/naultvRHeG2laJMmoIroFCGAyfwTVrnCjSkG6/KnRoXV0+dqd+Xrh7xzpzvIJB1klvifC0oX42cEkDrA==", + "version": "6.0.0-prerelease.4", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-prerelease.4.tgz", + "integrity": "sha512-KHo0v4XG4vS5wSZ76EUOrXDM636/ikXe6lNYqbAL/KRfqhfvXHEESZnK+0p1tpoBwwEUivAmJNSdIjppBPhACg==", "license": "MIT", "peerDependencies": { "react": "^17 || ^18", @@ -2259,23 +2405,23 @@ } }, "node_modules/@patternfly/react-styles": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.4.0.tgz", - "integrity": "sha512-4ZE0s6LkX/0KsN0FOeogrDoj18m+BPA73YKnabZGB4SDRzrBNeBh2a6bSt546ZseEjkoJ+S81kOG0G8YckPQYg==", + "version": "6.0.0-prerelease.3", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-prerelease.3.tgz", + "integrity": "sha512-VyAODCKA/PkyGMVT0A2G2TVVx1H1QKBrmXBwY11Ba3ggvuLZ2zWu+vU9LyM/HhmefOwy+5/P8bmRtLM+37D/CA==", "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.4.0.tgz", - "integrity": "sha512-HkXxVEPeI6nRVSUSHb5BungF41IfjB8W2VqaA3SX+6fGxQAW0e/Hb58ctUdPR2VJ/S2YZFcIcqCCWQtQEf+xKA==", + "version": "6.0.0-prerelease.13", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-prerelease.13.tgz", + "integrity": "sha512-++VqhagEQY9dfDXryaXNgF26DxTv7+NKTDC+s7RD+HcbUxKxCzkOL9gEDvVxka1qQKglMfKyFTcZ58FsUpN4JA==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.4.0", - "@patternfly/react-icons": "^5.4.0", - "@patternfly/react-styles": "^5.4.0", - "@patternfly/react-tokens": "^5.4.0", + "@patternfly/react-core": "^6.0.0-prerelease.13", + "@patternfly/react-icons": "^6.0.0-prerelease.4", + "@patternfly/react-styles": "^6.0.0-prerelease.3", + "@patternfly/react-tokens": "^6.0.0-prerelease.4", "lodash": "^4.17.21", - "tslib": "^2.6.3" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", @@ -2289,9 +2435,9 @@ "license": "0BSD" }, "node_modules/@patternfly/react-tokens": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.4.0.tgz", - "integrity": "sha512-KONkwCVOMyklhuuaYeYgcAsGtCBQXnsBGZeolhOdSzr2Mj0RVSW0oMrQPgZuPVzhhC/kbqgClHJJl6xuG9xheA==", + "version": "6.0.0-prerelease.4", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.4.tgz", + "integrity": "sha512-T1/C6nj78zvk4zLUp3VvNI3hChPR2vEy0BasIG3AYakWoLJsdOY6qS3PlLulawNZvlK7KH0X7VRfT1Zk073R6A==", "license": "MIT" }, "node_modules/@pkgjs/parseargs": { @@ -2693,25 +2839,6 @@ "node": ">=8" } }, - "node_modules/@redhat-cloud-services/frontend-components-notifications": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-4.1.0.tgz", - "integrity": "sha512-bEoAeZMVY+UuSriSeruZ1pIesiPEjScrVFJQ5Wq/w3UFc79oXSYOgpRElxblPUH/LbKqp7inbzqRm2FxMcVxYg==", - "dependencies": { - "@redhat-cloud-services/frontend-components": "^4.0.9", - "@redhat-cloud-services/frontend-components-utilities": "^4.0.2", - "redux-promise-middleware": "6.1.3" - }, - "peerDependencies": { - "@patternfly/react-core": "^5.0.0", - "@patternfly/react-icons": "^5.0.0", - "prop-types": "^15.6.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-redux": ">=7.2.9", - "redux": ">=4.2.0" - } - }, "node_modules/@redhat-cloud-services/frontend-components-translations": { "version": "3.2.8", "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-translations/-/frontend-components-translations-3.2.8.tgz", @@ -2755,6 +2882,23 @@ "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-1.0.9.tgz", "integrity": "sha512-dKYYSLU0cwNkOSq5kSvdKWzgwFGBk45uwAwoHGi44PMQdWkuz+tXhYLrKKAXoSXVahR6VFjBDONlaxok8Lzkcw==" }, + "node_modules/@redhat-cloud-services/frontend-components/node_modules/@patternfly/react-component-groups": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.2.0.tgz", + "integrity": "sha512-kb57OOVJ9L5fbY/kiil8awPWuJVops8Rz1ZNFtkEb72mF3lhmRadYNheLBeaD8T9GE1dOaVJRMMf133ZSKN87g==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^5.1.1", + "@patternfly/react-icons": "^5.1.1", + "@patternfly/react-table": "^5.1.1", + "clsx": "^2.0.0", + "react-jss": "^10.10.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, "node_modules/@redhat-cloud-services/frontend-components/node_modules/@redhat-cloud-services/types": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-1.0.9.tgz", @@ -2815,6 +2959,12 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@redhat-cloud-services/types": { + "version": "0.0.24", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-0.0.24.tgz", + "integrity": "sha512-P50stc+mnWLycID46/AKmD/760r5N1eoam//O6MUVriqVorUdht7xkUL78aJZU1vw8WW6xlrDHwz3F6BM148qg==", + "license": "Apache-2.0" + }, "node_modules/@reduxjs/toolkit": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz", @@ -5136,6 +5286,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "license": "MIT", "engines": { "node": ">=4" } @@ -6114,9 +6265,10 @@ } }, "node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -9845,6 +9997,7 @@ "version": "0.6.0", "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "license": "MIT", "dependencies": { "tslib": "^2.4.0" }, @@ -9974,9 +10127,9 @@ "license": "ISC" }, "node_modules/focus-trap": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz", - "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.0.tgz", + "integrity": "sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==", "license": "MIT", "dependencies": { "tabbable": "^6.2.0" @@ -16865,6 +17018,7 @@ "version": "14.2.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "license": "MIT", "dependencies": { "attr-accept": "^2.2.2", "file-selector": "^0.6.0", diff --git a/package.json b/package.json index 201dbb6b..884a735f 100644 --- a/package.json +++ b/package.json @@ -48,15 +48,15 @@ "verify": "npm-run-all build lint test" }, "dependencies": { - "@patternfly/patternfly": "5.4.0", - "@patternfly/react-charts": "7.4.2", - "@patternfly/react-component-groups": "^5.2.0", - "@patternfly/react-core": "5.4.0", - "@patternfly/react-icons": "5.4.0", - "@patternfly/react-table": "5.4.0", - "@patternfly/react-tokens": "5.4.0", + "@patternfly/patternfly": "6.0.0-prerelease.13", + "@patternfly/react-charts": "8.0.0-prerelease.10", + "@patternfly/react-component-groups": "6.0.0-prerelease.2", + "@patternfly/react-core": "6.0.0-prerelease.13", + "@patternfly/react-icons": "6.0.0-prerelease.4", + "@patternfly/react-table": "6.0.0-prerelease.13", + "@patternfly/react-tokens": "6.0.0-prerelease.4", "@redhat-cloud-services/frontend-components": "^4.2.15", - "@redhat-cloud-services/frontend-components-notifications": "^4.1.0", + "@ausuliv/frontend-components-notifications": "^4.1.5", "@redhat-cloud-services/frontend-components-translations": "^3.2.8", "@redhat-cloud-services/frontend-components-utilities": "^4.0.17", "@redhat-cloud-services/rbac-client": "^2.2.4", @@ -132,6 +132,9 @@ "webpack-bundle-analyzer": "^4.10.2" }, "overrides": { + "@patternfly/react-core": "6.0.0-prerelease.13", + "@patternfly/react-icons": "6.0.0-prerelease.4", + "@patternfly/react-table": "6.0.0-prerelease.13", "@typescript-eslint/eslint-plugin": "^8.6.0", "eslint": "^9.11.0", "redux": "^5.0.1" diff --git a/src/app.tsx b/src/app.tsx index fec7429a..70872ecd 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,8 +1,8 @@ import './app.scss'; +import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal'; +import { notificationsReducer } from '@ausuliv/frontend-components-notifications/redux'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; -import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal'; -import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux'; import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry'; import React, { useEffect, useLayoutEffect } from 'react'; import { invalidateSession } from 'utils/sessionStorage'; diff --git a/src/appEntry.tsx b/src/appEntry.tsx index 149af41d..e2aaf82a 100644 --- a/src/appEntry.tsx +++ b/src/appEntry.tsx @@ -1,10 +1,10 @@ /* eslint-disable no-console */ // Todo: Uncomment for use with non-shared PatternFly packages -// import '@patternfly/patternfly/patternfly.css'; +import '@patternfly/patternfly/patternfly.css'; // Todo: revert import '@patternfly/patternfly/patternfly-addons.css'; import './styles/global.css'; -import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal'; +import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal'; import IntlProvider from '@redhat-cloud-services/frontend-components-translations/Provider'; import { getLocale } from 'components/i18n'; import React from 'react'; diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss index d97c63d3..c3a019b5 100644 --- a/src/routes/components/dataTable/dataTable.scss +++ b/src/routes/components/dataTable/dataTable.scss @@ -4,13 +4,13 @@ div { display: block; margin-right: 0; - margin-bottom: var(--pf-v5-global--spacer--xs); + margin-bottom: var(--pf-t--global--spacer--xs); &.iconOverride { &.decrease { - color: var(--pf-v5-global--success-color--100); + color: var(--pf-t--global--color--status--success--default); } &.increase { - color: var(--pf-v5-global--danger-color--100); + color: var(--pf-t--global--color--status--danger--default); } .fa-sort-up { margin-left: 10px; @@ -19,10 +19,10 @@ margin-left: 10px; } .fa-sort-up::before { - color: var(--pf-v5-global--danger-color--100); + color: var(--pf-t--global--color--status--danger--default); } .fa-sort-down::before { - color: var(--pf-v5-global--success-color--100); + color: var(--pf-t--global--color--status--success--default); } span { margin-right: -17px !important; @@ -32,7 +32,7 @@ } .tableOverride { - &.pf-v5-c-table tbody .pf-v5-c-table__check input { + &.pf-v6-c-table tbody .pf-v6-c-table__check input { margin-top: .40rem; } } diff --git a/src/routes/components/dataTable/dataTable.styles.ts b/src/routes/components/dataTable/dataTable.styles.ts index 9519faaa..51716443 100644 --- a/src/routes/components/dataTable/dataTable.styles.ts +++ b/src/routes/components/dataTable/dataTable.styles.ts @@ -1,9 +1,9 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_disabled_color_100 from '@patternfly/react-tokens/dist/js/global_disabled_color_100'; -import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs'; -import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl'; -import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; -import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +import t_global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_color_disabled_100 from '@patternfly/react-tokens/dist/js/t_global_color_disabled_100'; +import t_global_font_size_xs from '@patternfly/react-tokens/dist/js/t_global_font_size_xs'; +import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; +import t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { @@ -17,10 +17,10 @@ export const styles = { minWidth: '50px', }, emptyState: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_BackgroundColor_light_100.value, display: 'flex', justifyContent: 'center', - paddingTop: global_spacer_3xl.value, + paddingTop: t_global_spacer_3xl.value, height: '35vh', width: '100%', }, @@ -28,11 +28,11 @@ export const styles = { position: 'relative', }, infoArrowDesc: { - bottom: global_spacer_xs.value, + bottom: t_global_spacer_xs.value, }, infoDescription: { - color: global_disabled_color_100.value, - fontSize: global_FontSize_xs.value, + color: t_global_color_disabled_100.value, + fontSize: t_global_font_size_xs.value, }, lastItem: { textAlign: 'right', @@ -50,6 +50,6 @@ export const styles = { width: '1%', }, warningIcon: { - paddingLeft: global_spacer_sm.var, + paddingLeft: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/dataTable/dataTable.tsx b/src/routes/components/dataTable/dataTable.tsx index 09d11a9f..ffcb982c 100644 --- a/src/routes/components/dataTable/dataTable.tsx +++ b/src/routes/components/dataTable/dataTable.tsx @@ -1,13 +1,6 @@ import './dataTable.scss'; -import { - Bullseye, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - Spinner, -} from '@patternfly/react-core'; +import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core'; import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon'; import type { ThProps } from '@patternfly/react-table'; import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; @@ -58,8 +51,7 @@ class DataTable extends React.Component { return emptyState ? ( emptyState ) : ( - - } /> + {intl.formatMessage(messages.detailsEmptyState)} ); diff --git a/src/routes/components/dataTable/selectableTable.tsx b/src/routes/components/dataTable/selectableTable.tsx index a9cb6107..305a4200 100644 --- a/src/routes/components/dataTable/selectableTable.tsx +++ b/src/routes/components/dataTable/selectableTable.tsx @@ -1,11 +1,4 @@ -import { - Bullseye, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - Spinner, -} from '@patternfly/react-core'; +import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core'; import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon'; import type { ThProps } from '@patternfly/react-table'; import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; @@ -53,8 +46,7 @@ class SelectableTable extends React.Component { return emptyState; } return ( - - } /> + {intl.formatMessage(messages.detailsEmptyState)} ); diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx index a3b76aac..80e53bbc 100644 --- a/src/routes/components/dataToolbar/basicToolbar.tsx +++ b/src/routes/components/dataToolbar/basicToolbar.tsx @@ -14,7 +14,6 @@ import { isEqual } from 'routes/utils/equal'; import type { Filter } from 'routes/utils/filter'; import { createMapStateToProps } from 'store/common'; -import { styles } from './dataToolbar.styles'; import { getCategoryInput, getCategorySelect, @@ -278,7 +277,7 @@ export class BasicToolbarBase extends React.Component +
)}{' '} {actions && {actions}} - + {pagination} diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss index e6d8b1bf..45a3a07c 100644 --- a/src/routes/components/dataToolbar/dataToolbar.scss +++ b/src/routes/components/dataToolbar/dataToolbar.scss @@ -3,15 +3,15 @@ // Workaround for https://github.com/patternfly/patternfly-react/issues/4477 // and https://github.com/patternfly/patternfly-react/issues/6371 .selectOverride { - .pf-v5-c-menu-toggle { + .pf-v6-c-menu-toggle { min-width: 250px; } } .toolbarOverride { - .pf-v5-c-button.pf-m-control::after { + .pf-v6-c-button.pf-m-control::after { border-left: none; } // Alternative workaround to overriding table sticky style - // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301; + // --pf-v6-c-toolbar--ZIndex: auto; z-index: 301; } diff --git a/src/routes/components/dataToolbar/dataToolbar.styles.ts b/src/routes/components/dataToolbar/dataToolbar.styles.ts deleted file mode 100644 index 69501132..00000000 --- a/src/routes/components/dataToolbar/dataToolbar.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import type React from 'react'; - -export const styles = { - export: { - marginRight: global_spacer_md.value, - }, - toolbarContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, -} as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx index d0d1ac36..557ca13e 100644 --- a/src/routes/components/dataToolbar/utils/category.tsx +++ b/src/routes/components/dataToolbar/utils/category.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import { Button, ButtonVariant, @@ -58,8 +58,8 @@ export const getCategoryInput = ({ return ( @@ -89,13 +89,12 @@ export const getCategoryInput = ({ size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length} /> + > )} @@ -104,7 +103,7 @@ export const getCategoryInput = ({ ); }; -export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => { +export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => { return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }]; }; @@ -195,7 +194,7 @@ export const getCategorySelect = ({ isDisabled, onCategorySelect, }: { - categoryOptions?: ToolbarChipGroup[]; // Options for category menu + categoryOptions?: ToolbarLabelGroup[]; // Options for category menu currentCategory?: string; filters?: Filters; isDisabled?: boolean; @@ -222,7 +221,7 @@ export const getCategorySelect = ({ ); }; -export const getCategorySelectOptions = (categoryOptions: ToolbarChipGroup[]): SelectWrapperOption[] => { +export const getCategorySelectOptions = (categoryOptions: ToolbarLabelGroup[]): SelectWrapperOption[] => { const options: SelectWrapperOption[] = []; categoryOptions.map(option => { diff --git a/src/routes/components/dataToolbar/utils/common.ts b/src/routes/components/dataToolbar/utils/common.ts index 52b42566..ac6dae01 100644 --- a/src/routes/components/dataToolbar/utils/common.ts +++ b/src/routes/components/dataToolbar/utils/common.ts @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { intl } from 'components/i18n'; import messages from 'locales/messages'; @@ -10,11 +10,11 @@ export interface Filters { [key: string]: Filter[] | { [key: string]: Filter[] }; } -export interface ToolbarChipGroupExt extends ToolbarChipGroup { +export interface ToolbarChipGroupExt extends ToolbarLabelGroup { ariaLabelKey?: string; placeholderKey?: string; selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss - selectOptions?: ToolbarChipGroup[]; + selectOptions?: ToolbarLabelGroup[]; } export const defaultFilters = { @@ -90,7 +90,7 @@ export const getChips = (filters: Filter[]): string[] => { return chips; }; -export const getDefaultCategory = (categoryOptions: ToolbarChipGroup[], groupBy: string, query: Query) => { +export const getDefaultCategory = (categoryOptions: ToolbarLabelGroup[], groupBy: string, query: Query) => { if (!categoryOptions) { return 'name'; } diff --git a/src/routes/components/dataToolbar/utils/custom.tsx b/src/routes/components/dataToolbar/utils/custom.tsx index 76b37694..e32528eb 100644 --- a/src/routes/components/dataToolbar/utils/custom.tsx +++ b/src/routes/components/dataToolbar/utils/custom.tsx @@ -39,8 +39,8 @@ export const getCustomSelect = ({ return ( diff --git a/src/routes/components/page/loading/loading.tsx b/src/routes/components/page/loading/loading.tsx index 99af6462..84c4d07a 100644 --- a/src/routes/components/page/loading/loading.tsx +++ b/src/routes/components/page/loading/loading.tsx @@ -19,7 +19,7 @@ const Loading = ({ body, heading, title }: LoadingProps) => { )} - + diff --git a/src/routes/components/page/noOptimizations/noOptimizations.tsx b/src/routes/components/page/noOptimizations/noOptimizations.tsx index 57780fd9..aaa6dbe5 100644 --- a/src/routes/components/page/noOptimizations/noOptimizations.tsx +++ b/src/routes/components/page/noOptimizations/noOptimizations.tsx @@ -18,7 +18,7 @@ const NoOptimizations = ({ title }: NoOptimizationsProps) => { )} - + diff --git a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx index 4b78a714..5287d3a4 100644 --- a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx +++ b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx @@ -1,10 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -22,12 +16,13 @@ class NoOptimizationsStateBase extends React.Component - } - headingLevel="h1" - /> + {intl.formatMessage(messages.noOptimizationsDesc)} ); diff --git a/src/routes/components/page/notAuthorized/notAuthorized.tsx b/src/routes/components/page/notAuthorized/notAuthorized.tsx index ca01b158..96febf76 100644 --- a/src/routes/components/page/notAuthorized/notAuthorized.tsx +++ b/src/routes/components/page/notAuthorized/notAuthorized.tsx @@ -19,7 +19,7 @@ const NotAuthorized = ({ pathname, title }: NotAuthorizedProps) => { )} - + diff --git a/src/routes/components/page/notAuthorized/notAuthorizedState.tsx b/src/routes/components/page/notAuthorized/notAuthorizedState.tsx index 74fc9fcb..13b9fccd 100644 --- a/src/routes/components/page/notAuthorized/notAuthorizedState.tsx +++ b/src/routes/components/page/notAuthorized/notAuthorizedState.tsx @@ -1,4 +1,4 @@ -import UnAuthorized from '@patternfly/react-component-groups/dist/esm/NotAuthorized'; +import UnauthorizedAccess from '@patternfly/react-component-groups/dist/esm/UnauthorizedAccess'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -30,7 +30,7 @@ class NotAuthorizedStateBase extends React.Component; + return ; } } diff --git a/src/routes/components/page/notAvailable/notAvailable.tsx b/src/routes/components/page/notAvailable/notAvailable.tsx index 953d1f6f..80c8eaec 100644 --- a/src/routes/components/page/notAvailable/notAvailable.tsx +++ b/src/routes/components/page/notAvailable/notAvailable.tsx @@ -17,7 +17,7 @@ const NotAvailable = ({ title }: NotAvailableProps) => { )} - + diff --git a/src/routes/components/page/notConfigured/notConfigured.tsx b/src/routes/components/page/notConfigured/notConfigured.tsx index 524fe77a..cee4b51d 100644 --- a/src/routes/components/page/notConfigured/notConfigured.tsx +++ b/src/routes/components/page/notConfigured/notConfigured.tsx @@ -18,7 +18,7 @@ const NotConfigured = ({ title }: NotConfiguredProps) => { )} - + diff --git a/src/routes/components/page/notConfigured/notConfiguredState.tsx b/src/routes/components/page/notConfigured/notConfiguredState.tsx index e9949531..3cb4f3ef 100644 --- a/src/routes/components/page/notConfigured/notConfiguredState.tsx +++ b/src/routes/components/page/notConfigured/notConfiguredState.tsx @@ -1,11 +1,4 @@ -import { - ClipboardCopy, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { ClipboardCopy, EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; import { useIntl } from 'react-intl'; @@ -47,12 +40,13 @@ const NotConfiguredState: React.FC = () => { }; return ( - - } - headingLevel="h1" - /> + {intl.formatMessage(messages.notConfiguredDesc)} {intl.formatMessage(messages.notConfiguredNamespace, { clipboard: getNamespaceClipboard() })} diff --git a/src/routes/components/page/notFound/notFound.tsx b/src/routes/components/page/notFound/notFound.tsx index 9084e9b0..645530de 100644 --- a/src/routes/components/page/notFound/notFound.tsx +++ b/src/routes/components/page/notFound/notFound.tsx @@ -1,11 +1,11 @@ +import { MissingPage } from '@patternfly/react-component-groups/dist/esm/MissingPage'; import { PageSection } from '@patternfly/react-core'; -import { InvalidObject } from '@redhat-cloud-services/frontend-components/InvalidObject'; import React from 'react'; const NotFound = () => { return ( - - + + ); }; diff --git a/src/routes/components/page/welcome/welcome.tsx b/src/routes/components/page/welcome/welcome.tsx index 9ca951cc..49a3d088 100644 --- a/src/routes/components/page/welcome/welcome.tsx +++ b/src/routes/components/page/welcome/welcome.tsx @@ -16,7 +16,7 @@ const Welcome = ({ title }: WelcomeOwnProps) => { )} - + diff --git a/src/routes/components/page/welcome/welcomeState.tsx b/src/routes/components/page/welcome/welcomeState.tsx index 49a2ffeb..cc526433 100644 --- a/src/routes/components/page/welcome/welcomeState.tsx +++ b/src/routes/components/page/welcome/welcomeState.tsx @@ -1,10 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import messages from 'locales/messages'; import React from 'react'; @@ -18,12 +12,13 @@ class WelcomeStateBase extends React.Component { const { intl } = this.props; return ( - - } - headingLevel="h5" - /> + {intl.formatMessage(messages.welcomeInfo, { url: ( diff --git a/src/routes/components/perspective/perspective.styles.ts b/src/routes/components/perspective/perspective.styles.ts index b8ebe1d6..366622ff 100644 --- a/src/routes/components/perspective/perspective.styles.ts +++ b/src/routes/components/perspective/perspective.styles.ts @@ -1,4 +1,4 @@ -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { @@ -8,7 +8,7 @@ export const styles = { }, perspectiveLabel: { marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, whiteSpace: 'nowrap', }, perspectiveOptionLabel: { diff --git a/src/routes/components/resourceTypeahead/resourceFetch.tsx b/src/routes/components/resourceTypeahead/resourceFetch.tsx index 62ca952e..7e2838ed 100644 --- a/src/routes/components/resourceTypeahead/resourceFetch.tsx +++ b/src/routes/components/resourceTypeahead/resourceFetch.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { getQuery } from 'api/queries/query'; import type { Resource } from 'api/resources/resource'; @@ -56,7 +56,7 @@ const ResourceFetch: React.FC = ({ }) => { const { resource, resourceFetchStatus } = useMapToProps({ resourcePathsType, resourceType, search }); - const getOptions = (): ToolbarChipGroup[] => { + const getOptions = (): ToolbarLabelGroup[] => { let options = []; if (resource && resource.data && resource.data.length > 0 && resourceFetchStatus !== FetchStatus.inProgress) { options = resource.data.map(item => { diff --git a/src/routes/components/resourceTypeahead/resourceInput.tsx b/src/routes/components/resourceTypeahead/resourceInput.tsx index b7d22a46..19062d1b 100644 --- a/src/routes/components/resourceTypeahead/resourceInput.tsx +++ b/src/routes/components/resourceTypeahead/resourceInput.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import { Button, Divider, @@ -23,7 +23,7 @@ interface ResourceInputOwnProps { isDisabled?: boolean; onChange?: (evt: FormEvent, value: string) => void; onClear?: () => void; - options?: ToolbarChipGroup[]; + options?: ToolbarLabelGroup[]; onSelect?: (value: string) => void; placeholder?: string; search?: string; @@ -69,12 +69,11 @@ const ResourceInput: React.FC = ({ {search && search.length && ( + /> )} diff --git a/src/routes/components/selectWrapper/select.styles.ts b/src/routes/components/selectWrapper/select.styles.ts index 0adf3439..87dad960 100644 --- a/src/routes/components/selectWrapper/select.styles.ts +++ b/src/routes/components/selectWrapper/select.styles.ts @@ -1,8 +1,8 @@ -import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; import type React from 'react'; export const styles = { badge: { - marginLeft: global_spacer_sm.var, + marginLeft: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/selectWrapper/selectWrapper.scss b/src/routes/components/selectWrapper/selectWrapper.scss index c89b9bbd..7e1cf3bc 100644 --- a/src/routes/components/selectWrapper/selectWrapper.scss +++ b/src/routes/components/selectWrapper/selectWrapper.scss @@ -2,10 +2,10 @@ // Workaround for missing "position" property .selectWrapper { - .pf-v5-c-menu-toggle { + .pf-v6-c-menu-toggle { max-width: unset; } - .pf-v5-c-menu-toggle__text { + .pf-v6-c-menu-toggle__text { width: max-content; } } diff --git a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx index 7370aec9..0c308fb7 100644 --- a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx +++ b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx @@ -1,5 +1,5 @@ import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import { Bullseye, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core'; +import { Bullseye, EmptyState, EmptyStateBody } from '@patternfly/react-core'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import type { Query } from 'api/queries/query'; import { parseQuery } from 'api/queries/query'; @@ -101,10 +101,12 @@ const EmptyFilterStateBase: React.FC = ({ } else if (showEmptyState2) { return ; } else { - return ; + return null; } }; + const item = getItem(); + return (
= ({ ...(showMargin ? styles.containerMargin : {}), }} > - - {getItem()} - + + {item} {intl.formatMessage(subTitle)}
diff --git a/src/routes/components/state/emptyValueState/emptyValueState.scss b/src/routes/components/state/emptyValueState/emptyValueState.scss index ada26156..eb0faca0 100644 --- a/src/routes/components/state/emptyValueState/emptyValueState.scss +++ b/src/routes/components/state/emptyValueState/emptyValueState.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .emptyValueContainer { - font-size: var(--pf-v5-global--FontSize--sm); + font-size: var(--pf-t--global--font--size--sm); } diff --git a/src/routes/components/state/errorState/errorState.tsx b/src/routes/components/state/errorState/errorState.tsx index fc3f60cf..dafbc2ba 100644 --- a/src/routes/components/state/errorState/errorState.tsx +++ b/src/routes/components/state/errorState/errorState.tsx @@ -1,10 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core'; import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon'; import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon'; import type { AxiosError } from 'axios'; @@ -29,8 +23,13 @@ const ErrorStateBase: React.FC = ({ error, icon = ErrorCircleOI } return ( - - } headingLevel="h5" /> + {subTitle} ); diff --git a/src/routes/components/state/loadingState/loadingState.tsx b/src/routes/components/state/loadingState/loadingState.tsx index 17a3f21b..293d92d9 100644 --- a/src/routes/components/state/loadingState/loadingState.tsx +++ b/src/routes/components/state/loadingState/loadingState.tsx @@ -1,4 +1,4 @@ -import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateVariant, Spinner } from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateVariant, Spinner } from '@patternfly/react-core'; import { intl as defaultIntl } from 'components/i18n'; import messages from 'locales/messages'; import React from 'react'; @@ -19,9 +19,8 @@ const LoadingStateBase: React.FC = ({ heading = intl.formatMessage(messages.loadingStateTitle), }) => { return ( - + - {body} ); diff --git a/src/routes/components/state/optimizedState/optimizedState.styles.ts b/src/routes/components/state/optimizedState/optimizedState.styles.ts deleted file mode 100644 index e1c6d9b8..00000000 --- a/src/routes/components/state/optimizedState/optimizedState.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { global_success_color_100 } from '@patternfly/react-tokens/dist/js/global_success_color_100'; -import type React from 'react'; - -export const styles = { - icon: { - color: global_success_color_100.var, - }, -} as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/state/optimizedState/optimizedState.tsx b/src/routes/components/state/optimizedState/optimizedState.tsx index eddbcf77..3b212135 100644 --- a/src/routes/components/state/optimizedState/optimizedState.tsx +++ b/src/routes/components/state/optimizedState/optimizedState.tsx @@ -1,10 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core'; import { CheckCircleIcon } from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import { intl as defaultIntl } from 'components/i18n'; import messages from 'locales/messages'; @@ -12,8 +6,6 @@ import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; import { injectIntl } from 'react-intl'; -import { styles } from './optimizedState.styles'; - interface LoadingStateProps extends WrappedComponentProps { body?: string; heading?: string; @@ -28,12 +20,14 @@ const LoadingStateBase: React.FC = ({ heading = intl.formatMessage(messages.optimizedStateTitle), }) => { return ( - - } - titleText={heading} - /> + {body} ); diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts index f1e9ed73..c8dff60d 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts @@ -1,38 +1,32 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; +import t_global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; import type React from 'react'; export const styles = { alertContainer: { - marginBottom: global_spacer_lg.value, + marginBottom: t_global_spacer_lg.value, }, codeBlock: { display: 'flex', }, - container: { - minHeight: '100vh', - }, currentActions: { height: '36px', }, + headerContainer: { + paddingBottom: 0, + }, optimizedState: { minHeight: '285px', }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + paginationContainer: { + marginTop: t_global_spacer_sm.var, }, projectLink: { padding: 0, }, - tabs: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingLeft: global_spacer_lg.value, - }, utilizationContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - marginTop: global_spacer_lg.value, + backgroundColor: t_global_BackgroundColor_light_100.value, + marginTop: t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx index 9b2ba170..57de9323 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx @@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import type { AnyAction } from 'redux'; import type { ThunkDispatch } from 'redux-thunk'; -import { Loading } from 'routes/components/page/loading'; +import { LoadingState } from 'routes/components/state/loadingState'; import type { RootState } from 'store'; import { FetchStatus } from 'store/common'; import { rosActions, rosSelectors } from 'store/ros'; @@ -241,22 +241,24 @@ const OptimizationsBreakdown: React.FC = () => { const [availableTabs] = useState(getAvailableTabs()); return ( -
- -
{getTabs(availableTabs)}
- + <> + + + + {getTabs(availableTabs)} + {isLoading ? ( - @@ -268,7 +270,7 @@ const OptimizationsBreakdown: React.FC = () => { )} . -
+ ); }; diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.styles.ts index 5f013f19..7bdf66f5 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.styles.ts +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.styles.ts @@ -1,16 +1,16 @@ import { chart_color_blue_100 } from '@patternfly/react-tokens/dist/js/chart_color_blue_100'; import { chart_color_blue_200 } from '@patternfly/react-tokens/dist/js/chart_color_blue_200'; import { chart_color_blue_400 } from '@patternfly/react-tokens/dist/js/chart_color_blue_400'; -import { chart_color_red_200 } from '@patternfly/react-tokens/dist/js/chart_color_red_200'; +import { t_global_color_status_danger_200 } from '@patternfly/react-tokens/dist/js/t_global_color_status_danger_200'; export const chartStyles = { limit: { fill: 'none', }, - limitColorScale: [chart_color_red_200.value], + limitColorScale: [t_global_color_status_danger_200.var], request: { fill: 'none', }, - requestColorScale: [chart_color_blue_400.value], - usageColorScale: [chart_color_blue_100.value, chart_color_blue_200.value], + requestColorScale: [chart_color_blue_400.var], + usageColorScale: [chart_color_blue_100.var, chart_color_blue_200.var], }; diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.styles.ts index 67f78261..84a8d545 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.styles.ts +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.styles.ts @@ -1,20 +1,15 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_FontSize_md from '@patternfly/react-tokens/dist/js/global_FontSize_md'; -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_font_size_md from '@patternfly/react-tokens/dist/js/t_global_font_size_md'; +import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; import type React from 'react'; export const styles = { description: { - marginTop: global_spacer_lg.var, - }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, infoTitle: { fontWeight: 'bold', @@ -22,15 +17,15 @@ export const styles = { title: { alignItems: 'center', display: 'flex', - marginTop: global_spacer_md.var, + marginTop: t_global_spacer_md.var, }, toolbar: { display: 'flex', justifyContent: 'space-between', - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, warningIcon: { - paddingLeft: global_spacer_sm.var, + paddingLeft: t_global_spacer_sm.var, paddingTop: '2px', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.tsx index d989a789..1c9a9ee0 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.tsx +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownHeader.tsx @@ -1,13 +1,4 @@ -import { - Icon, - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, - Title, - TitleSizes, -} from '@patternfly/react-core'; +import { Content, ContentVariants, Icon, Title, TitleSizes } from '@patternfly/react-core'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import type { RecommendationReportData } from 'api/ros/recommendations'; import messages from 'locales/messages'; @@ -70,42 +61,42 @@ const OptimizationsBreakdownHeader: React.FC const workloadType = report?.workload_type ? report.workload_type : ''; return ( - - - + + + {intl.formatMessage(messages.optimizationsValues, { value: 'last_reported' })} - - {lastReported} - + + {lastReported} + {intl.formatMessage(messages.optimizationsValues, { value: 'cluster' })} - - {cluster} - + + {cluster} + {intl.formatMessage(messages.optimizationsValues, { value: 'project' })} - - + + - - + + {intl.formatMessage(messages.optimizationsValues, { value: 'workload_type' })} - - {workloadType} - + + {workloadType} + {intl.formatMessage(messages.optimizationsValues, { value: 'workload' })} - - {workload} - - + + {workload} + + ); }; return ( -
+
{getBackToLink()}
diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.styles.ts index be5cc17d..52de399f 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.styles.ts +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.styles.ts @@ -1,5 +1,5 @@ -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; export const chartStyles = { chartHeight: 350, @@ -13,8 +13,8 @@ export const styles = { display: 'flex', }, dividerContainer: { - marginRight: `-${global_spacer_sm.value}`, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + marginRight: `-${t_global_spacer_sm.value}`, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.tsx index a1c6ab48..e3c8e949 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.tsx +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownUtilization.tsx @@ -125,38 +125,40 @@ const OptimizationsBreakdownUtilization: React.FC<OptimizationsBreakdownUtilizat }; return ( - <Grid hasGutter> - <GridItem xl={6}> - <div style={styles.container}> - <div style={styles.cardContainer}> - <Card isPlain> - <CardTitle> - <Title headingLevel="h2" size={TitleSizes.lg}> - {intl.formatMessage(messages.cpuUtilization)} - - - {getChart(UsageType.cpuUsage, RecommendationType.cpu)} - + + + +
+
+ + + + {intl.formatMessage(messages.cpuUtilization)} + + + {getChart(UsageType.cpuUsage, RecommendationType.cpu)} + +
+
- -
- - - - - - {intl.formatMessage(messages.memoryUtilization)} - - - {getChart(UsageType.memoryUsage, RecommendationType.memory)} - - - + + + + + + {intl.formatMessage(messages.memoryUtilization)} + + + {getChart(UsageType.memoryUsage, RecommendationType.memory)} + + + + ); }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts deleted file mode 100644 index bcd3af1a..00000000 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts +++ /dev/null @@ -1,14 +0,0 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import type React from 'react'; - -export const styles = { - container: { - minHeight: '100vh', - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, -} as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx index 7ce925f3..70e123c4 100644 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx +++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx @@ -1,8 +1,7 @@ -import { PageSection } from '@patternfly/react-core'; +import { Card, CardBody, PageSection } from '@patternfly/react-core'; import React from 'react'; import { OptimizationsTable } from 'routes/optimizations/optimizationsTable'; -import { styles } from './optimizationsDetails.styles'; import { OptimizationsDetailsHeader } from './optimizationsDetailsHeader'; interface OptimizationsDetailsOwnProps { @@ -23,19 +22,25 @@ const OptimizationsDetails: React.FC = ({ projectPath, }) => { return ( -
- - - + <> + + -
+ + + + + + + + ); }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.styles.ts b/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.styles.ts index d82039c6..5a7b19ef 100644 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.styles.ts +++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.styles.ts @@ -1,22 +1,15 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_FontSize_md from '@patternfly/react-tokens/dist/js/global_FontSize_md'; -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; -import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_font_size_md from '@patternfly/react-tokens/dist/js/t_global_font_size_md'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; import type React from 'react'; export const styles = { - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, - headerContent: { - display: 'flex', - justifyContent: 'space-between', + headerContainer: { + paddingBottom: 0, }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.tsx b/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.tsx index 6b13f785..dbcceed4 100644 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.tsx +++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetailsHeader.tsx @@ -16,40 +16,37 @@ const OptimizationsDetailsHeader: React.FC = () const intl = useIntl(); return ( -
-
- - {intl.formatMessage(messages.optimizations)} - <span style={styles.infoIcon}> - <Popover - aria-label={intl.formatMessage(messages.optimizationsInfoArialLabel)} - enableFlip - bodyContent={ - <> - <p>{intl.formatMessage(messages.optimizationsInfoTitle)}</p> - <br /> - <p> - {intl.formatMessage(messages.optimizationsInfoDesc, { - learnMore: ( - <a href={intl.formatMessage(messages.docsOptimizations)} rel="noreferrer" target="_blank"> - {intl.formatMessage(messages.learnMore)} - </a> - ), - })} - </p> - </> - } - > - <Button - aria-label={intl.formatMessage(messages.optimizationsInfoButtonArialLabel)} - variant={ButtonVariant.plain} - > - <OutlinedQuestionCircleIcon /> - </Button> - </Popover> - </span> - -
+
+ + {intl.formatMessage(messages.optimizations)} + <span style={styles.infoIcon}> + <Popover + aria-label={intl.formatMessage(messages.optimizationsInfoArialLabel)} + enableFlip + bodyContent={ + <> + <p>{intl.formatMessage(messages.optimizationsInfoTitle)}</p> + <br /> + <p> + {intl.formatMessage(messages.optimizationsInfoDesc, { + learnMore: ( + <a href={intl.formatMessage(messages.docsOptimizations)} rel="noreferrer" target="_blank"> + {intl.formatMessage(messages.learnMore)} + </a> + ), + })} + </p> + </> + } + > + <Button + icon={<OutlinedQuestionCircleIcon />} + aria-label={intl.formatMessage(messages.optimizationsInfoButtonArialLabel)} + variant={ButtonVariant.plain} + /> + </Popover> + </span> +
); }; diff --git a/src/routes/optimizations/optimizationsSummary/optimizations.styles.ts b/src/routes/optimizations/optimizationsSummary/optimizations.styles.ts index cf85bacc..de2d9e3d 100644 --- a/src/routes/optimizations/optimizationsSummary/optimizations.styles.ts +++ b/src/routes/optimizations/optimizationsSummary/optimizations.styles.ts @@ -1,8 +1,8 @@ -import global_FontSize_md from '@patternfly/react-tokens/dist/js/global_FontSize_md'; +import t_global_font_size_md from '@patternfly/react-tokens/dist/js/t_global_font_size_md'; import type React from 'react'; export const styles = { infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/optimizations/optimizationsSummary/optimizationsSummary.scss b/src/routes/optimizations/optimizationsSummary/optimizationsSummary.scss index 7a01575b..1954db4b 100644 --- a/src/routes/optimizations/optimizationsSummary/optimizationsSummary.scss +++ b/src/routes/optimizations/optimizationsSummary/optimizationsSummary.scss @@ -2,8 +2,8 @@ .skeleton { height: 125px; - margin-bottom: var(--pf-v5-global--spacer--md); - margin-top: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--font--size--md); + margin-top: var(--pf-t--global--font--size--md); } .summary { diff --git a/src/routes/optimizations/optimizationsSummary/optimizationsSummary.tsx b/src/routes/optimizations/optimizationsSummary/optimizationsSummary.tsx index bb02412f..191735df 100644 --- a/src/routes/optimizations/optimizationsSummary/optimizationsSummary.tsx +++ b/src/routes/optimizations/optimizationsSummary/optimizationsSummary.tsx @@ -81,11 +81,10 @@ const OptimizationsSummary: React.FC = ({ } > + /> diff --git a/src/routes/optimizations/optimizationsTable/optimizationsTable.tsx b/src/routes/optimizations/optimizationsTable/optimizationsTable.tsx index a7aca803..eb5120a6 100644 --- a/src/routes/optimizations/optimizationsTable/optimizationsTable.tsx +++ b/src/routes/optimizations/optimizationsTable/optimizationsTable.tsx @@ -11,9 +11,9 @@ import { useDispatch, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import type { AnyAction } from 'redux'; import type { ThunkDispatch } from 'redux-thunk'; -import { Loading } from 'routes/components/page/loading'; import { NotAvailable } from 'routes/components/page/notAvailable'; import { NotConfigured } from 'routes/components/page/notConfigured'; +import { LoadingState } from 'routes/components/state/loadingState'; import { styles } from 'routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles'; import { getOrderById, getOrderByValue } from 'routes/utils/orderBy'; import * as queryUtils from 'routes/utils/query'; @@ -198,14 +198,14 @@ const OptimizationsTable: React.FC = ({ <> {getToolbar()} {reportFetchStatus === FetchStatus.inProgress ? ( - ) : ( <> {getTable()} -
{getPagination(isDisabled, true)}
+
{getPagination(isDisabled, true)}
)} diff --git a/src/routes/optimizations/optimizationsTable/optimizationsToolbar.tsx b/src/routes/optimizations/optimizationsTable/optimizationsToolbar.tsx index 0254434b..ddddeb6d 100644 --- a/src/routes/optimizations/optimizationsTable/optimizationsToolbar.tsx +++ b/src/routes/optimizations/optimizationsTable/optimizationsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { RosQuery } from 'api/queries/rosQuery'; import messages from 'locales/messages'; import React from 'react'; @@ -20,7 +20,7 @@ interface OptimizationsToolbarOwnProps { } interface OptimizationsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type OptimizationsToolbarProps = OptimizationsToolbarOwnProps & WrappedComponentProps; @@ -35,7 +35,7 @@ class OptimizationsToolbarBase extends React.Component { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { hideCluster, hideProject, intl } = this.props; const options = [ diff --git a/src/routes/staging/optimizations/optimizationsBadgeStaging.tsx b/src/routes/staging/optimizations/optimizationsBadgeStaging.tsx index 288d8f99..35ca1347 100644 --- a/src/routes/staging/optimizations/optimizationsBadgeStaging.tsx +++ b/src/routes/staging/optimizations/optimizationsBadgeStaging.tsx @@ -14,7 +14,7 @@ const OptimizationsBadgeStaging: React.FC = () = const projectFilter = 'openshift'; return ( - + ); diff --git a/src/routes/staging/optimizations/optimizationsLinkStaging.tsx b/src/routes/staging/optimizations/optimizationsLinkStaging.tsx index a807316c..e0f69889 100644 --- a/src/routes/staging/optimizations/optimizationsLinkStaging.tsx +++ b/src/routes/staging/optimizations/optimizationsLinkStaging.tsx @@ -33,7 +33,7 @@ const OptimizationsLinkStaging: React.FC = () => }); return ( - + ); diff --git a/src/routes/staging/optimizations/optimizationsSummaryStaging.tsx b/src/routes/staging/optimizations/optimizationsSummaryStaging.tsx index f7f93f87..b2fce5a6 100644 --- a/src/routes/staging/optimizations/optimizationsSummaryStaging.tsx +++ b/src/routes/staging/optimizations/optimizationsSummaryStaging.tsx @@ -12,7 +12,7 @@ type OptimizationsSummaryStagingProps = OptimizationsSummaryStagingOwnProps; const OptimizationsSummaryStaging: React.FC = () => { return ( - + ); diff --git a/src/routes/staging/optimizations/optimizationsTableStaging.tsx b/src/routes/staging/optimizations/optimizationsTableStaging.tsx index fa2df17a..c5c6ad22 100644 --- a/src/routes/staging/optimizations/optimizationsTableStaging.tsx +++ b/src/routes/staging/optimizations/optimizationsTableStaging.tsx @@ -34,7 +34,7 @@ const OptimizationsDetailsStaging: React.FC = const projectFilter = 'openshift'; return ( - + *, -.pf-v5-l-grid .pf-v5-l-grid__item { +.pf-v6-l-grid > *, +.pf-v6-l-grid .pf-v6-l-grid__item { min-height: 0; min-width: 0; } diff --git a/src/styles/revert.css b/src/styles/revert.css index 4f16bad4..95151f85 100644 --- a/src/styles/revert.css +++ b/src/styles/revert.css @@ -1,10 +1,10 @@ /* For testing only */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/revert */ -[class*="pf-v5-c"], -[class*="pf-v5-c"] *, -[class*="pf-v5-l"], -[class*="pf-v5-l"] *, -[class*="pf-v5-u"], -[class*="pf-v5-u"] * { +[class*="pf-v6-c"], +[class*="pf-v6-c"] *, +[class*="pf-v6-l"], +[class*="pf-v6-l"] *, +[class*="pf-v6-u"], +[class*="pf-v6-u"] * { all: revert; } diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 01dbc9f0..55c7a49a 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,29 +1,26 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_BoxShadow_sm_right from '@patternfly/react-tokens/dist/js/global_BoxShadow_sm_right'; -import global_breakpoint_lg from '@patternfly/react-tokens/dist/js/global_breakpoint_lg'; -import global_breakpoint_md from '@patternfly/react-tokens/dist/js/global_breakpoint_md'; -import global_breakpoint_sm from '@patternfly/react-tokens/dist/js/global_breakpoint_sm'; -import global_breakpoint_xl from '@patternfly/react-tokens/dist/js/global_breakpoint_xl'; -import global_breakpoint_xs from '@patternfly/react-tokens/dist/js/global_breakpoint_xs'; -import global_Color_dark_100 from '@patternfly/react-tokens/dist/js/global_Color_dark_100'; +import t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_box_shadow_sm_right from '@patternfly/react-tokens/dist/js/t_global_box_shadow_sm_right'; +import t_global_breakpoint_lg from '@patternfly/react-tokens/dist/js/t_global_breakpoint_lg'; +import t_global_breakpoint_md from '@patternfly/react-tokens/dist/js/t_global_breakpoint_md'; +import t_global_breakpoint_sm from '@patternfly/react-tokens/dist/js/t_global_breakpoint_sm'; +import t_global_breakpoint_xl from '@patternfly/react-tokens/dist/js/t_global_breakpoint_xl'; +import t_global_breakpoint_xs from '@patternfly/react-tokens/dist/js/t_global_breakpoint_xs'; const createBreakpoint = (size: string) => `@media (min-width: ${size})`; const breakpoints = { - xs: createBreakpoint(global_breakpoint_xs.value), - sm: createBreakpoint(global_breakpoint_sm.value), - md: createBreakpoint(global_breakpoint_md.value), - lg: createBreakpoint(global_breakpoint_lg.value), - xl: createBreakpoint(global_breakpoint_xl.value), + xs: createBreakpoint(t_global_breakpoint_xs.value), + sm: createBreakpoint(t_global_breakpoint_sm.value), + md: createBreakpoint(t_global_breakpoint_md.value), + lg: createBreakpoint(t_global_breakpoint_lg.value), + xl: createBreakpoint(t_global_breakpoint_xl.value), }; export const theme = { breakpoints, page_breakpoint: breakpoints.md, page_masthead_height: 70, - page_sidebar_background: global_BackgroundColor_light_100.value, - page_sidebar_boxShadow: global_BoxShadow_sm_right.value, + page_sidebar_background: t_global_background_color_100.value, + page_sidebar_boxShadow: t_global_box_shadow_sm_right.value, page_sidebar_width: 300, - verticalNav_color: global_Color_dark_100.value, - verticalNav_link_color: global_Color_dark_100.value, };