diff --git a/package-lock.json b/package-lock.json index 7ce208c8c..e900631ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,15 +10,15 @@ "hasInstallScript": true, "license": "GNU AGPLv3", "dependencies": { - "@patternfly/patternfly": "5.4.1", - "@patternfly/react-charts": "7.4.3", - "@patternfly/react-component-groups": "^5.4.0", - "@patternfly/react-core": "5.4.1", - "@patternfly/react-icons": "5.4.0", - "@patternfly/react-table": "5.4.1", - "@patternfly/react-tokens": "5.4.0", + "@ausuliv/frontend-components-notifications": "^4.1.5", + "@patternfly/patternfly": "6.0.0-prerelease.15", + "@patternfly/react-charts": "8.0.0-prerelease.14", + "@patternfly/react-component-groups": "6.0.0-prerelease.5", + "@patternfly/react-core": "6.0.0-prerelease.21", + "@patternfly/react-icons": "6.0.0-prerelease.7", + "@patternfly/react-table": "6.0.0-prerelease.22", + "@patternfly/react-tokens": "6.0.0-prerelease.7", "@redhat-cloud-services/frontend-components": "^4.2.16", - "@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.5", @@ -37,7 +37,21 @@ "redux": "^5.0.1", "redux-thunk": "^3.1.0", "typesafe-actions": "^5.1.0", - "victory": "^37.1.2" + "victory-area": "^37.1.2", + "victory-axis": "^37.1.2", + "victory-bar": "^37.1.2", + "victory-box-plot": "^37.1.2", + "victory-chart": "^37.1.2", + "victory-core": "^37.1.2", + "victory-create-container": "^37.1.2", + "victory-group": "^37.1.2", + "victory-legend": "^37.1.2", + "victory-line": "^37.1.2", + "victory-pie": "^37.1.2", + "victory-scatter": "^37.1.2", + "victory-stack": "^37.1.2", + "victory-tooltip": "^37.1.2", + "victory-voronoi-container": "^37.1.2" }, "devDependencies": { "@eslint/compat": "^1.2.0", @@ -116,6 +130,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", @@ -2315,22 +2474,26 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.4.1.tgz", - "integrity": "sha512-0+KxsQJrFzOMANALW82BHAO7bSm9tEbG1RrOlGT23ME1CaBoetGSMRLymutvojn/b/EKfJIr5rLzQa+14Lvg2g==", + "version": "6.0.0-prerelease.15", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.0.0-prerelease.15.tgz", + "integrity": "sha512-7/tRjaWBMX9bvMhIexdAONgxKiVbOCuFffLEKq+p+Q4t8Qq8fqGM7eAznzOx3YbLKIzqVtmbRrgTAIkpsSe1aw==", "license": "MIT" }, "node_modules/@patternfly/react-charts": { - "version": "7.4.3", - "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.4.3.tgz", - "integrity": "sha512-HW55rc7UtuiUSk5kUEdCsbfU+/lVPXDruebQKxzImseiyjeLL3e3Tb8L778ga6Kt0YKaUTaqETuprR9ucRA0+w==", + "version": "8.0.0-prerelease.14", + "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-8.0.0-prerelease.14.tgz", + "integrity": "sha512-YgAkHPnXG6IDPK4x6UxmZC7knMUuA5GOqk4YWMMuyM7tQNaukOjxQhVHZZW3a2ozcHmqcwwqydOUi2Dfw3tweA==", "license": "MIT", "dependencies": { - "@patternfly/react-styles": "^5.4.0", - "@patternfly/react-tokens": "^5.4.0", + "@patternfly/react-styles": "^6.0.0-prerelease.6", + "@patternfly/react-tokens": "^6.0.0-prerelease.7", "hoist-non-react-statics": "^3.3.2", "lodash": "^4.17.21", - "tslib": "^2.6.3", + "tslib": "^2.7.0" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18", "victory-area": "^37.1.1", "victory-axis": "^37.1.1", "victory-bar": "^37.1.1", @@ -2348,10 +2511,6 @@ "victory-tooltip": "^37.1.1", "victory-voronoi-container": "^37.1.1", "victory-zoom-container": "^37.1.1" - }, - "peerDependencies": { - "react": "^17 || ^18", - "react-dom": "^17 || ^18" } }, "node_modules/@patternfly/react-charts/node_modules/tslib": { @@ -2361,14 +2520,14 @@ "license": "0BSD" }, "node_modules/@patternfly/react-component-groups": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.4.0.tgz", - "integrity": "sha512-faRrjz/D4saTjNgQa2p8tSlEXeeyBMGK9eGqdOKc5DG0smP1e+lN7dXDYNPARpKXj9fmaUltzux+w/7NLwxUhw==", + "version": "6.0.0-prerelease.5", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.0.0-prerelease.5.tgz", + "integrity": "sha512-ScCyHu1AB/NJZZ7m8eSD/qmjxYjWkVokxpfuaeVD7dcW7DLcDuZSp+cd8JOIeLyuThtHlrFEqnDEHVS+FQMSQg==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.3.3", - "@patternfly/react-icons": "^5.4.0", - "@patternfly/react-table": "^5.3.3", + "@patternfly/react-core": "^6.0.0-prerelease.21", + "@patternfly/react-icons": "^6.0.0-prerelease.7", + "@patternfly/react-table": "^6.0.0-prerelease.22", "clsx": "^2.1.1", "react-jss": "^10.10.0" }, @@ -2378,17 +2537,17 @@ } }, "node_modules/@patternfly/react-core": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.4.1.tgz", - "integrity": "sha512-PJjwN4OCR7jTdWKi0RzuFdtlSQ8gBR+0REczuDHHPW8ky0bs1cIcqGsn5p/b6OgPlztl3UaXqRYLsroiEMasOw==", + "version": "6.0.0-prerelease.21", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.0.0-prerelease.21.tgz", + "integrity": "sha512-EaGcKUPeeR253vY4N0Ahm9oOVtltoI6JycfclwmzjevOzpYvuLj1jcsVwL8wqgWYQVpURoBm1yxIdx34fo5UHA==", "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.7", + "@patternfly/react-styles": "^6.0.0-prerelease.6", + "@patternfly/react-tokens": "^6.0.0-prerelease.7", + "focus-trap": "7.6.0", "react-dropzone": "^14.2.3", - "tslib": "^2.6.3" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", @@ -2402,9 +2561,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.7", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.0.0-prerelease.7.tgz", + "integrity": "sha512-DQmecVgXRIiD3ww4KUuJ0qO76TmYMDEJ1ao1+DYuTSP+FzeJLJKuE9QxvL8qn3anyKtuORBuHdTIjM52mVq5Vg==", "license": "MIT", "peerDependencies": { "react": "^17 || ^18", @@ -2412,23 +2571,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.6", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.0.0-prerelease.6.tgz", + "integrity": "sha512-tI28gIJFgbgVQs7Xj705csfl6T92dr5Bh7ynR5gN4+QdTWCUWmSctp46G2ZewXdrIN+C+2zUPE86o77aFp4CWw==", "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.4.1.tgz", - "integrity": "sha512-T05djy6YPqjbGWjpnwUs9oqup8oqqIOBnDOcThnHukgzlwnZvLNywgdoMR5XAKxTcIx/iBE1cu8ieETlITOGLw==", + "version": "6.0.0-prerelease.22", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.0.0-prerelease.22.tgz", + "integrity": "sha512-vGDWr14YATIY9RnxaOpyjkPlw4aKBM7dhHJRPXY0cwCFehSGwwzQpialZyi+92I2WfBF1Cb75doDAtxTSi8UZQ==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.4.1", - "@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.21", + "@patternfly/react-icons": "^6.0.0-prerelease.7", + "@patternfly/react-styles": "^6.0.0-prerelease.6", + "@patternfly/react-tokens": "^6.0.0-prerelease.7", "lodash": "^4.17.21", - "tslib": "^2.6.3" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", @@ -2442,9 +2601,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.7", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.7.tgz", + "integrity": "sha512-SLgVwbIgVx26LCjaXkpNlPIZYqWpHJkw3QX/n3URLmIcRlCw536/rKO1PzXaeuCCqhuSq66J6R125zM2eJjM6A==", "license": "MIT" }, "node_modules/@pkgjs/parseargs": { @@ -2876,25 +3035,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", @@ -2938,6 +3078,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.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.4.0.tgz", + "integrity": "sha512-faRrjz/D4saTjNgQa2p8tSlEXeeyBMGK9eGqdOKc5DG0smP1e+lN7dXDYNPARpKXj9fmaUltzux+w/7NLwxUhw==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^5.3.3", + "@patternfly/react-icons": "^5.4.0", + "@patternfly/react-table": "^5.3.3", + "clsx": "^2.1.1", + "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", @@ -2997,6 +3154,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.8", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.8.tgz", @@ -3278,159 +3441,6 @@ "node": ">=10" } }, - "node_modules/@swc/core-darwin-x64": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz", - "integrity": "sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz", - "integrity": "sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz", - "integrity": "sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz", - "integrity": "sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz", - "integrity": "sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-linux-x64-musl": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz", - "integrity": "sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz", - "integrity": "sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz", - "integrity": "sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=10" - } - }, - "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.7.26", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz", - "integrity": "sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "Apache-2.0 AND MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=10" - } - }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -6632,10 +6642,11 @@ "dev": true }, "node_modules/cookie": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", - "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -7215,12 +7226,6 @@ "node": ">=12" } }, - "node_modules/d3-voronoi": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz", - "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==", - "license": "BSD-3-Clause" - }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -9880,17 +9885,18 @@ } }, "node_modules/express": { - "version": "4.21.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", - "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz", + "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==", "dev": true, + "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", "body-parser": "1.20.3", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.7.1", + "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -10220,9 +10226,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" @@ -20018,44 +20024,6 @@ "node": ">= 0.8" } }, - "node_modules/victory": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory/-/victory-37.1.2.tgz", - "integrity": "sha512-V1YkJiWQ/vu5MSZ/Yf9/AJQeE+N1p1eUW6r5xJgOjbhioIbnL7FBTyJW1AXqqDZN9WdyECI3TkFQ1l/QbgztoA==", - "license": "MIT", - "dependencies": { - "victory-area": "37.1.2", - "victory-axis": "37.1.2", - "victory-bar": "37.1.2", - "victory-box-plot": "37.1.2", - "victory-brush-container": "37.1.2", - "victory-brush-line": "37.1.2", - "victory-candlestick": "37.1.2", - "victory-canvas": "37.1.2", - "victory-chart": "37.1.2", - "victory-core": "37.1.2", - "victory-create-container": "37.1.2", - "victory-cursor-container": "37.1.2", - "victory-errorbar": "37.1.2", - "victory-group": "37.1.2", - "victory-histogram": "37.1.2", - "victory-legend": "37.1.2", - "victory-line": "37.1.2", - "victory-pie": "37.1.2", - "victory-polar-axis": "37.1.2", - "victory-scatter": "37.1.2", - "victory-selection-container": "37.1.2", - "victory-shared-events": "37.1.2", - "victory-stack": "37.1.2", - "victory-tooltip": "37.1.2", - "victory-voronoi": "37.1.2", - "victory-voronoi-container": "37.1.2", - "victory-zoom-container": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, "node_modules/victory-area": { "version": "37.1.2", "resolved": "https://registry.npmjs.org/victory-area/-/victory-area-37.1.2.tgz", @@ -20125,47 +20093,6 @@ "react": ">=16.6.0" } }, - "node_modules/victory-brush-line": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-brush-line/-/victory-brush-line-37.1.2.tgz", - "integrity": "sha512-Bq9JGu/o4p/NQ/ZOASUm6MmomS+2b0EvAHjULa06z7nsElNePpedTYPk2aAb7mr4sJZe6u/AsDMthG+C8Zc32Q==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.19", - "react-fast-compare": "^3.2.0", - "victory-core": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, - "node_modules/victory-candlestick": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-candlestick/-/victory-candlestick-37.1.2.tgz", - "integrity": "sha512-X+pLwvdIj/+nrvk1bZxhdJ9UBj7QLN4jdkIPDl6ekjfZ9Ylhi8/I/ttAkBu+7w7ilpGudIK6fr7PVHyZyYU6TA==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.19", - "victory-core": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, - "node_modules/victory-canvas": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-canvas/-/victory-canvas-37.1.2.tgz", - "integrity": "sha512-4Qmz7YpFBj2KaBSe+j5zLVrKAJLG3HtXVVaKI3oUzw4GzHlYXf77dJLYe2EqJVEFCMgVsmASqE3xVTklioMV7g==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.19", - "victory-bar": "37.1.2", - "victory-core": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, "node_modules/victory-chart": { "version": "37.1.2", "resolved": "https://registry.npmjs.org/victory-chart/-/victory-chart-37.1.2.tgz", @@ -20228,19 +20155,6 @@ "react": ">=16.6.0" } }, - "node_modules/victory-errorbar": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-errorbar/-/victory-errorbar-37.1.2.tgz", - "integrity": "sha512-sgs1nla57Ctt9slG5WXWdxqTXtTdKcZM+u83C5j1ceKKmMjCiqiNYmMQpF7yz7Nj2ewJTrOzZON9h2zgurr2Cg==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.19", - "victory-core": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, "node_modules/victory-group": { "version": "37.1.2", "resolved": "https://registry.npmjs.org/victory-group/-/victory-group-37.1.2.tgz", @@ -20256,22 +20170,6 @@ "react": ">=16.6.0" } }, - "node_modules/victory-histogram": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-histogram/-/victory-histogram-37.1.2.tgz", - "integrity": "sha512-IGeQZ2HGuvmMyYxoKOczIILNH6ARDJaWcDG3h5BX4jP4JH2+eWeEukCVHGT3b1VM1OFxuvPijJrePXYzKgQ+AQ==", - "license": "MIT", - "dependencies": { - "lodash": "^4.17.19", - "react-fast-compare": "^3.2.0", - "victory-bar": "37.1.2", - "victory-core": "37.1.2", - "victory-vendor": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, "node_modules/victory-legend": { "version": "37.1.2", "resolved": "https://registry.npmjs.org/victory-legend/-/victory-legend-37.1.2.tgz", @@ -20417,20 +20315,6 @@ "d3-timer": "^3.0.1" } }, - "node_modules/victory-voronoi": { - "version": "37.1.2", - "resolved": "https://registry.npmjs.org/victory-voronoi/-/victory-voronoi-37.1.2.tgz", - "integrity": "sha512-rbihVJMDLmrMKfm6mbzTft9BbaJWZkymFkYxZZT0ZdHjsyaFm7t3jjrtvG1cq6HsTI10AfCh7iWmD9aky69eMQ==", - "license": "MIT", - "dependencies": { - "d3-voronoi": "^1.1.4", - "lodash": "^4.17.19", - "victory-core": "37.1.2" - }, - "peerDependencies": { - "react": ">=16.6.0" - } - }, "node_modules/victory-voronoi-container": { "version": "37.1.2", "resolved": "https://registry.npmjs.org/victory-voronoi-container/-/victory-voronoi-container-37.1.2.tgz", diff --git a/package.json b/package.json index 0afaaa241..fb59ac314 100644 --- a/package.json +++ b/package.json @@ -52,15 +52,15 @@ "verify": "npm-run-all build lint test" }, "dependencies": { - "@patternfly/patternfly": "5.4.1", - "@patternfly/react-charts": "7.4.3", - "@patternfly/react-component-groups": "^5.4.0", - "@patternfly/react-core": "5.4.1", - "@patternfly/react-icons": "5.4.0", - "@patternfly/react-table": "5.4.1", - "@patternfly/react-tokens": "5.4.0", + "@patternfly/patternfly": "6.0.0-prerelease.15", + "@patternfly/react-charts": "8.0.0-prerelease.14", + "@patternfly/react-component-groups": "6.0.0-prerelease.5", + "@patternfly/react-core": "6.0.0-prerelease.21", + "@patternfly/react-icons": "6.0.0-prerelease.7", + "@patternfly/react-table": "6.0.0-prerelease.22", + "@patternfly/react-tokens": "6.0.0-prerelease.7", "@redhat-cloud-services/frontend-components": "^4.2.16", - "@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.5", @@ -79,7 +79,21 @@ "redux": "^5.0.1", "redux-thunk": "^3.1.0", "typesafe-actions": "^5.1.0", - "victory": "^37.1.2" + "victory-area": "^37.1.2", + "victory-axis": "^37.1.2", + "victory-bar": "^37.1.2", + "victory-box-plot": "^37.1.2", + "victory-chart": "^37.1.2", + "victory-core": "^37.1.2", + "victory-create-container": "^37.1.2", + "victory-group": "^37.1.2", + "victory-legend": "^37.1.2", + "victory-line": "^37.1.2", + "victory-pie": "^37.1.2", + "victory-scatter": "^37.1.2", + "victory-stack": "^37.1.2", + "victory-tooltip": "^37.1.2", + "victory-voronoi-container": "^37.1.2" }, "devDependencies": { "@eslint/compat": "^1.2.0", @@ -135,6 +149,9 @@ "webpack-bundle-analyzer": "^4.10.2" }, "overrides": { + "@patternfly/react-core": "6.0.0-prerelease.21", + "@patternfly/react-icons": "6.0.0-prerelease.7", + "@patternfly/react-table": "6.0.0-prerelease.22", "@typescript-eslint/eslint-plugin": "^8.8.1", "eslint": "^9.12.0", "redux": "^5.0.1" diff --git a/src/app.tsx b/src/app.tsx index fec7429a0..70872ecde 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 e1624c553..d01e92298 100644 --- a/src/appEntry.tsx +++ b/src/appEntry.tsx @@ -4,7 +4,7 @@ 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/components/drawers/commonDrawer/commonDrawer.tsx b/src/components/drawers/commonDrawer/commonDrawer.tsx index 229a4e2d7..026c1f756 100644 --- a/src/components/drawers/commonDrawer/commonDrawer.tsx +++ b/src/components/drawers/commonDrawer/commonDrawer.tsx @@ -50,7 +50,7 @@ class CommonDrawerBase extends React.Component { // https://github.com/redhat-developer/rhosak-ui/blob/main/packages/ui/src/components/KafkaInstanceDrawer/KafkaInstanceDrawer.tsx#L69-L78 return ( - + {children} diff --git a/src/components/drawers/exports/exports.styles.ts b/src/components/drawers/exports/exports.styles.ts index e0ffabf43..178a929f4 100644 --- a/src/components/drawers/exports/exports.styles.ts +++ b/src/components/drawers/exports/exports.styles.ts @@ -1,30 +1,30 @@ -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 global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_background_color_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_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 = { content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + paddingBottom: t_global_spacer_lg.value, + paddingTop: t_global_spacer_lg.value, }, exportsIcon: { - marginLeft: global_spacer_md.value, - marginRight: global_spacer_sm.value, + marginLeft: t_global_spacer_md.value, + marginRight: t_global_spacer_sm.value, }, exportsLink: { display: 'flex', alignItems: 'center', }, pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + backgroundColor: t_global_background_color_100.value, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, toolbarContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + backgroundColor: t_global_background_color_100.value, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/components/drawers/exports/exportsLink.tsx b/src/components/drawers/exports/exportsLink.tsx index 82dbee0ef..90350f78e 100644 --- a/src/components/drawers/exports/exportsLink.tsx +++ b/src/components/drawers/exports/exportsLink.tsx @@ -50,7 +50,7 @@ class ExportsLinkBase extends React.Component { // @redhat-cloud-services/frontend-components-notifications does not expose PatternFly's actionLinks prop if (isActionLink) { return ( -
+
{intl.formatMessage(messages.exportsTitle)}
); diff --git a/src/components/drawers/exports/exportsTable.styles.ts b/src/components/drawers/exports/exportsTable.styles.ts index 03c215f93..cc3505825 100644 --- a/src/components/drawers/exports/exportsTable.styles.ts +++ b/src/components/drawers/exports/exportsTable.styles.ts @@ -1,25 +1,25 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_danger_color_200 from '@patternfly/react-tokens/dist/js/global_danger_color_200'; -import global_FontSize_sm from '@patternfly/react-tokens/dist/js/global_FontSize_sm'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; +import t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_color_status_danger_200 from '@patternfly/react-tokens/dist/js/t_global_color_status_danger_200'; +import t_global_font_size_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_sm'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; +import t_global_spacer_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl'; import type React from 'react'; export const styles = { emptyState: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, display: 'flex', justifyContent: 'center', - paddingTop: global_spacer_xl.value, + paddingTop: t_global_spacer_xl.value, width: '100%', }, failed: { - color: global_danger_color_200.value, + color: t_global_color_status_danger_200.value, }, failedButton: { - fontSize: global_FontSize_sm.value, + fontSize: t_global_font_size_sm.value, }, failedHeader: { - marginLeft: global_spacer_md.value, + marginLeft: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/components/drawers/exports/exportsTable.tsx b/src/components/drawers/exports/exportsTable.tsx index 9fa0c55f8..9770d7cea 100644 --- a/src/components/drawers/exports/exportsTable.tsx +++ b/src/components/drawers/exports/exportsTable.tsx @@ -4,8 +4,6 @@ import { EmptyState, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, Label, Popover, } from '@patternfly/react-core'; @@ -140,12 +138,11 @@ class ExportsTableBase extends React.Component - {intl.formatMessage(messages.noExportsStateTitle)}} - icon={} - headingLevel="h5" - /> + {intl.formatMessage(messages.noExportsStateTitle)}} + > {intl.formatMessage(messages.exportsEmptyState)}
} > + > )} > diff --git a/src/components/drawers/exports/exportsToolbar.tsx b/src/components/drawers/exports/exportsToolbar.tsx index c0302554b..479b5682c 100644 --- a/src/components/drawers/exports/exportsToolbar.tsx +++ b/src/components/drawers/exports/exportsToolbar.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 messages from 'locales/messages'; import React from 'react'; @@ -32,7 +32,7 @@ type ExportsToolbarProps = ExportsToolbarOwnProps & WrappedComponentProps; export class ExportsToolbarBase extends React.Component { - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl } = this.props; return [{ name: intl.formatMessage(messages.filterByValues, { value: 'name' }), key: 'name' }]; diff --git a/src/components/inactiveSources/inactiveSources.scss b/src/components/inactiveSources/inactiveSources.scss index b46cf0a92..d13a020fb 100644 --- a/src/components/inactiveSources/inactiveSources.scss +++ b/src/components/inactiveSources/inactiveSources.scss @@ -1,8 +1,8 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .alert { - background-color: var(--pf-v5-global--BackgroundColor--light-100); - padding-left: var(--pf-v5-global--spacer--lg); - padding-right: var(--pf-v5-global--spacer--lg); - padding-top: var(--pf-v5-global--spacer--lg); + background-color: var(--pf-t--global--background--color--primary--default); + padding-left: var(--pf-t--global--spacer--lg); + padding-right: var(--pf-t--global--spacer--lg); + padding-top: var(--pf-t--global--spacer--lg); } diff --git a/src/routes/components/charts/chartTheme/theme-utils.ts b/src/routes/components/charts/chartTheme/theme-utils.ts index e8df95739..1ada18054 100644 --- a/src/routes/components/charts/chartTheme/theme-utils.ts +++ b/src/routes/components/charts/chartTheme/theme-utils.ts @@ -1,4 +1,4 @@ -import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts'; +import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts/victory'; import { default as ChartTheme } from './theme-koku'; diff --git a/src/routes/components/charts/common/chartUtils.ts b/src/routes/components/charts/common/chartUtils.ts index 2dd2819fd..d727adf0f 100644 --- a/src/routes/components/charts/common/chartUtils.ts +++ b/src/routes/components/charts/common/chartUtils.ts @@ -1,4 +1,4 @@ -import { getInteractiveLegendItemStyles } from '@patternfly/react-charts'; +import { getInteractiveLegendItemStyles } from '@patternfly/react-charts/victory'; import { intl } from 'components/i18n'; import messages from 'locales/messages'; import type { FormatOptions, Formatter } from 'utils/format'; diff --git a/src/routes/components/charts/costChart/costChart.tsx b/src/routes/components/charts/costChart/costChart.tsx index 430375b21..de09ee8e3 100644 --- a/src/routes/components/charts/costChart/costChart.tsx +++ b/src/routes/components/charts/costChart/costChart.tsx @@ -8,7 +8,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts b/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts index 5494744d1..2d1cbabda 100644 --- a/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts +++ b/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts @@ -1,19 +1,19 @@ import { chart_color_blue_300 } from '@patternfly/react-tokens/dist/js/chart_color_blue_300'; -import { chart_color_cyan_300 } from '@patternfly/react-tokens/dist/js/chart_color_cyan_300'; -import { chart_color_gold_300 } from '@patternfly/react-tokens/dist/js/chart_color_gold_300'; import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300'; import { chart_color_orange_300 } from '@patternfly/react-tokens/dist/js/chart_color_orange_300'; import { chart_color_purple_300 } from '@patternfly/react-tokens/dist/js/chart_color_purple_300'; +import { chart_color_teal_300 } from '@patternfly/react-tokens/dist/js/chart_color_teal_300'; +import { chart_color_yellow_300 } from '@patternfly/react-tokens/dist/js/chart_color_yellow_300'; export const chartStyles = { // See: https://github.com/project-koku/koku-ui/issues/241 colorScale: [ chart_color_blue_300.value, - chart_color_gold_300.value, + chart_color_yellow_300.value, chart_color_green_300.value, chart_color_purple_300.value, chart_color_orange_300.value, - chart_color_cyan_300.value, + chart_color_teal_300.value, ], yAxis: { axisLabel: { diff --git a/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx b/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx index 3d395a9dd..95566c4ac 100644 --- a/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx +++ b/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx @@ -10,7 +10,7 @@ import { ChartThemeColor, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; diff --git a/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx b/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx index 3b810686d..f9a353c24 100644 --- a/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx +++ b/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx @@ -10,7 +10,7 @@ import { ChartLine, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx b/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx index ded4cfc4b..65a463ba4 100644 --- a/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx +++ b/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx @@ -10,7 +10,7 @@ import { ChartLine, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap b/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap index eb7120c3a..cc8a37186 100644 --- a/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap +++ b/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap @@ -6,9 +6,9 @@ exports[`null previous and current reports are handled 1`] = ` class="chartOverride" >

@@ -22,7 +22,7 @@ exports[`null previous and current reports are handled 1`] = ` style="height: 100px;" >
@@ -92,7 +92,7 @@ exports[`null previous and current reports are handled 1`] = ` d="M8,25C7.8933333333333335,24.886666666666667,7.786666666666666,24.773333333333333,7.68,24.66C7.573333333333333,24.546666666666667,7.466666666666666,24.433333333333334,7.359999999999999,24.32C7.253333333333333,24.206666666666667,7.146666666666667,24.093333333333334,7.040000000000001,23.98C6.9333333333333345,23.866666666666667,6.826666666666667,23.753333333333334,6.720000000000001,23.64C6.613333333333334,23.526666666666667,6.506666666666667,23.413333333333334,6.4,23.3C6.293333333333334,23.186666666666667,6.1866666666666665,23.073333333333334,6.08,22.96C5.973333333333334,22.846666666666668,5.866666666666666,22.733333333333334,5.76,22.62C5.653333333333333,22.506666666666668,5.546666666666666,22.393333333333334,5.4399999999999995,22.28C5.333333333333333,22.166666666666668,5.2266666666666675,22.053333333333335,5.120000000000001,21.94C5.0133333333333345,21.826666666666668,4.906666666666667,21.713333333333335,4.800000000000001,21.6C4.693333333333334,21.486666666666668,4.586666666666667,21.373333333333335,4.48,21.26C4.373333333333334,21.14666666666667,4.266666666666667,21.033333333333335,4.16,20.92C4.053333333333334,20.80666666666667,3.9466666666666668,20.69333333333333,3.84,20.58C3.733333333333333,20.466666666666665,3.6266666666666665,20.353333333333335,3.5199999999999996,20.240000000000002C3.413333333333333,20.12666666666667,3.306666666666666,20.013333333333332,3.1999999999999997,19.9C3.093333333333333,19.786666666666665,2.9866666666666664,19.673333333333332,2.8799999999999994,19.56C2.773333333333333,19.446666666666665,2.666666666666667,19.33333333333333,2.5600000000000005,19.219999999999995C2.4533333333333336,19.106666666666662,2.346666666666667,18.993333333333332,2.24,18.88C2.1333333333333333,18.766666666666666,2.026666666666667,18.653333333333332,1.92,18.54C1.8133333333333332,18.426666666666666,1.7066666666666663,18.313333333333333,1.5999999999999996,18.2C1.4933333333333334,18.086666666666666,1.386666666666667,17.973333333333336,1.2800000000000007,17.860000000000003C1.173333333333334,17.74666666666667,1.066666666666667,17.633333333333336,0.9600000000000004,17.520000000000003C0.8533333333333338,17.40666666666667,0.7466666666666671,17.293333333333333,0.6400000000000006,17.18C0.533333333333334,17.066666666666666,0.42666666666666736,16.953333333333333,0.32000000000000073,16.84C0.21333333333333382,16.726666666666667,0.10666666666666691,16.613333333333333,0,16.5C-0.10666666666666676,16.386666666666667,-0.21333333333333354,16.273333333333333,-0.3200000000000003,16.16C-0.42666666666666647,16.046666666666667,-0.5333333333333327,15.933333333333334,-0.6399999999999988,15.82C-0.7466666666666661,15.706666666666665,-0.8533333333333335,15.593333333333332,-0.9600000000000009,15.479999999999999C-1.066666666666667,15.366666666666665,-1.1733333333333331,15.253333333333334,-1.2799999999999994,15.14C-1.386666666666666,15.026666666666667,-1.493333333333333,14.913333333333334,-1.5999999999999996,14.8C-1.7066666666666659,14.686666666666667,-1.813333333333332,14.573333333333334,-1.9199999999999982,14.46C-2.0266666666666655,14.346666666666668,-2.133333333333333,14.233333333333334,-2.24,14.120000000000001C-2.346666666666667,14.006666666666668,-2.4533333333333336,13.893333333333334,-2.5600000000000005,13.780000000000001C-2.6666666666666665,13.666666666666668,-2.773333333333333,13.553333333333333,-2.879999999999999,13.44C-2.986666666666666,13.326666666666664,-3.0933333333333324,13.213333333333331,-3.1999999999999993,13.099999999999998C-3.306666666666666,12.986666666666665,-3.4133333333333327,12.873333333333335,-3.5199999999999996,12.760000000000002C-3.6266666666666665,12.646666666666668,-3.733333333333333,12.533333333333333,-3.84,12.42C-3.9466666666666668,12.306666666666667,-4.053333333333334,12.193333333333333,-4.16,12.08C-4.266666666666667,11.966666666666667,-4.373333333333332,11.853333333333332,-4.479999999999999,11.739999999999998C-4.586666666666666,11.626666666666663,-4.693333333333333,11.513333333333332,-4.800000000000001,11.399999999999999C-4.906666666666667,11.286666666666665,-5.013333333333333,11.173333333333332,-5.119999999999999,11.059999999999999C-5.226666666666666,10.946666666666665,-5.333333333333333,10.833333333333334,-5.4399999999999995,10.72C-5.546666666666666,10.606666666666667,-5.653333333333333,10.493333333333334,-5.76,10.38C-5.866666666666666,10.266666666666667,-5.973333333333334,10.153333333333332,-6.08,10.04C-6.1866666666666665,9.926666666666666,-6.293333333333334,9.813333333333333,-6.4,9.7C-6.506666666666667,9.586666666666666,-6.613333333333332,9.473333333333333,-6.719999999999999,9.36C-6.826666666666665,9.246666666666666,-6.933333333333333,9.133333333333333,-7.039999999999999,9.02C-7.146666666666666,8.906666666666666,-7.253333333333331,8.793333333333333,-7.359999999999998,8.68C-7.466666666666665,8.566666666666666,-7.573333333333332,8.453333333333333,-7.68,8.34C-7.786666666666666,8.226666666666667,-7.8933333333333335,8.113333333333333,-8,8" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #38812f; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #3d7317; fill-opacity: 0.3; stroke-width: 2;" /> @@ -102,7 +102,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -139,7 +139,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -160,7 +160,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -181,7 +181,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -196,7 +196,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -234,7 +234,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -255,7 +255,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -276,7 +276,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -297,7 +297,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -318,7 +318,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -346,7 +346,7 @@ exports[`null previous and current reports are handled 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #8bc1f7;" + style="fill: #92c5f9;" /> @@ -385,7 +385,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -417,9 +417,9 @@ exports[`reports are formatted to datums 1`] = ` class="chartOverride" >

@@ -433,7 +433,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px;" >
@@ -503,7 +503,7 @@ exports[`reports are formatted to datums 1`] = ` d="M8,22.95206455054681C7.822222222222222,22.771400817995907,7.644444444444445,22.590737085445003,7.466666666666667,22.410050680181378C7.288888888888889,22.229364274917753,7.111111111111112,22.0486476393705,6.933333333333334,21.867946118965058C6.7555555555555555,21.687244598559616,6.577777777777778,21.50652796301236,6.4,21.325841557748735C6.222222222222222,21.14515515248511,6.044444444444445,20.964514092646926,5.866666666666667,20.7838276873833C5.688888888888889,20.603141282119676,5.511111111111112,20.42242464657242,5.333333333333334,20.241723126166978C5.155555555555556,20.061021605761535,4.977777777777779,19.880312527785186,4.800000000000001,19.699618564950654C4.622222222222223,19.51892460211612,4.444444444444444,19.3382457544234,4.266666666666666,19.157559349159776C4.088888888888889,18.97687294389615,3.911111111111111,18.79619409620343,3.733333333333334,18.615500133368897C3.555555555555556,18.43480617053436,3.3777777777777778,18.254097092558016,3.1999999999999997,18.073395572152574C3.022222222222222,17.89269405174713,2.844444444444445,17.746810260513914,2.6666666666666674,17.53129101093625C2.4888888888888894,17.315771761358587,2.3111111111111113,17.080655730417,2.1333333333333333,16.780280074686583C1.9555555555555555,16.479904418956167,1.7777777777777775,16.078680537032096,1.5999999999999996,15.729037076553746C1.4222222222222218,15.379393616075397,1.2444444444444442,15.027566017604695,1.0666666666666664,14.682419311816485C0.8888888888888887,14.337272606028275,0.7111111111111109,14.005442340179602,0.5333333333333332,13.658156841824486C0.3555555555555555,13.310871343469369,0.17777777777777773,12.945538365786431,0,12.598706321685782C-0.17777777777777773,12.251874277585133,-0.3555555555555555,11.914519427402864,-0.5333333333333332,11.577164577220593" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #38812f; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #3d7317; fill-opacity: 0.3; stroke-width: 2;" /> @@ -513,7 +513,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -550,7 +550,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -571,7 +571,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -592,7 +592,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -607,7 +607,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -645,7 +645,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -666,7 +666,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -687,7 +687,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -715,7 +715,7 @@ exports[`reports are formatted to datums 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #8bc1f7;" + style="fill: #92c5f9;" /> @@ -754,7 +754,7 @@ exports[`reports are formatted to datums 1`] = ` diff --git a/src/routes/components/charts/historicalCostChart/historicalCostChart.styles.ts b/src/routes/components/charts/historicalCostChart/historicalCostChart.styles.ts index 47adc3d3b..035aba701 100644 --- a/src/routes/components/charts/historicalCostChart/historicalCostChart.styles.ts +++ b/src/routes/components/charts/historicalCostChart/historicalCostChart.styles.ts @@ -8,8 +8,8 @@ import { chart_color_green_200 } from '@patternfly/react-tokens/dist/js/chart_co import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300'; import { chart_color_green_400 } from '@patternfly/react-tokens/dist/js/chart_color_green_400'; import { chart_color_green_500 } from '@patternfly/react-tokens/dist/js/chart_color_green_500'; -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_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 chartStyles = { @@ -79,9 +79,9 @@ export const chartStyles = { export const styles = { chart: { - marginTop: global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, title: { - marginLeft: '-' + global_spacer_lg.value, + marginLeft: '-' + t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx b/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx index 09d2ec394..a71a5a07a 100644 --- a/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx +++ b/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx @@ -8,7 +8,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap b/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap index bdd3404fa..41e9ae32b 100644 --- a/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap +++ b/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap @@ -5,9 +5,9 @@ exports[`null previous and current reports are handled 1`] = ` class="chartOverride" >

@@ -21,7 +21,7 @@ exports[`null previous and current reports are handled 1`] = ` style="height: 100px;" >
@@ -91,7 +91,7 @@ exports[`null previous and current reports are handled 1`] = ` d="M8,25C7.8933333333333335,24.886666666666667,7.786666666666666,24.773333333333333,7.68,24.66C7.573333333333333,24.546666666666667,7.466666666666666,24.433333333333334,7.359999999999999,24.32C7.253333333333333,24.206666666666667,7.146666666666667,24.093333333333334,7.040000000000001,23.98C6.9333333333333345,23.866666666666667,6.826666666666667,23.753333333333334,6.720000000000001,23.64C6.613333333333334,23.526666666666667,6.506666666666667,23.413333333333334,6.4,23.3C6.293333333333334,23.186666666666667,6.1866666666666665,23.073333333333334,6.08,22.96C5.973333333333334,22.846666666666668,5.866666666666666,22.733333333333334,5.76,22.62C5.653333333333333,22.506666666666668,5.546666666666666,22.393333333333334,5.4399999999999995,22.28C5.333333333333333,22.166666666666668,5.2266666666666675,22.053333333333335,5.120000000000001,21.94C5.0133333333333345,21.826666666666668,4.906666666666667,21.713333333333335,4.800000000000001,21.6C4.693333333333334,21.486666666666668,4.586666666666667,21.373333333333335,4.48,21.26C4.373333333333334,21.14666666666667,4.266666666666667,21.033333333333335,4.16,20.92C4.053333333333334,20.80666666666667,3.9466666666666668,20.69333333333333,3.84,20.58C3.733333333333333,20.466666666666665,3.6266666666666665,20.353333333333335,3.5199999999999996,20.240000000000002C3.413333333333333,20.12666666666667,3.306666666666666,20.013333333333332,3.1999999999999997,19.9C3.093333333333333,19.786666666666665,2.9866666666666664,19.673333333333332,2.8799999999999994,19.56C2.773333333333333,19.446666666666665,2.666666666666667,19.33333333333333,2.5600000000000005,19.219999999999995C2.4533333333333336,19.106666666666662,2.346666666666667,18.993333333333332,2.24,18.88C2.1333333333333333,18.766666666666666,2.026666666666667,18.653333333333332,1.92,18.54C1.8133333333333332,18.426666666666666,1.7066666666666663,18.313333333333333,1.5999999999999996,18.2C1.4933333333333334,18.086666666666666,1.386666666666667,17.973333333333336,1.2800000000000007,17.860000000000003C1.173333333333334,17.74666666666667,1.066666666666667,17.633333333333336,0.9600000000000004,17.520000000000003C0.8533333333333338,17.40666666666667,0.7466666666666671,17.293333333333333,0.6400000000000006,17.18C0.533333333333334,17.066666666666666,0.42666666666666736,16.953333333333333,0.32000000000000073,16.84C0.21333333333333382,16.726666666666667,0.10666666666666691,16.613333333333333,0,16.5C-0.10666666666666676,16.386666666666667,-0.21333333333333354,16.273333333333333,-0.3200000000000003,16.16C-0.42666666666666647,16.046666666666667,-0.5333333333333327,15.933333333333334,-0.6399999999999988,15.82C-0.7466666666666661,15.706666666666665,-0.8533333333333335,15.593333333333332,-0.9600000000000009,15.479999999999999C-1.066666666666667,15.366666666666665,-1.1733333333333331,15.253333333333334,-1.2799999999999994,15.14C-1.386666666666666,15.026666666666667,-1.493333333333333,14.913333333333334,-1.5999999999999996,14.8C-1.7066666666666659,14.686666666666667,-1.813333333333332,14.573333333333334,-1.9199999999999982,14.46C-2.0266666666666655,14.346666666666668,-2.133333333333333,14.233333333333334,-2.24,14.120000000000001C-2.346666666666667,14.006666666666668,-2.4533333333333336,13.893333333333334,-2.5600000000000005,13.780000000000001C-2.6666666666666665,13.666666666666668,-2.773333333333333,13.553333333333333,-2.879999999999999,13.44C-2.986666666666666,13.326666666666664,-3.0933333333333324,13.213333333333331,-3.1999999999999993,13.099999999999998C-3.306666666666666,12.986666666666665,-3.4133333333333327,12.873333333333335,-3.5199999999999996,12.760000000000002C-3.6266666666666665,12.646666666666668,-3.733333333333333,12.533333333333333,-3.84,12.42C-3.9466666666666668,12.306666666666667,-4.053333333333334,12.193333333333333,-4.16,12.08C-4.266666666666667,11.966666666666667,-4.373333333333332,11.853333333333332,-4.479999999999999,11.739999999999998C-4.586666666666666,11.626666666666663,-4.693333333333333,11.513333333333332,-4.800000000000001,11.399999999999999C-4.906666666666667,11.286666666666665,-5.013333333333333,11.173333333333332,-5.119999999999999,11.059999999999999C-5.226666666666666,10.946666666666665,-5.333333333333333,10.833333333333334,-5.4399999999999995,10.72C-5.546666666666666,10.606666666666667,-5.653333333333333,10.493333333333334,-5.76,10.38C-5.866666666666666,10.266666666666667,-5.973333333333334,10.153333333333332,-6.08,10.04C-6.1866666666666665,9.926666666666666,-6.293333333333334,9.813333333333333,-6.4,9.7C-6.506666666666667,9.586666666666666,-6.613333333333332,9.473333333333333,-6.719999999999999,9.36C-6.826666666666665,9.246666666666666,-6.933333333333333,9.133333333333333,-7.039999999999999,9.02C-7.146666666666666,8.906666666666666,-7.253333333333331,8.793333333333333,-7.359999999999998,8.68C-7.466666666666665,8.566666666666666,-7.573333333333332,8.453333333333333,-7.68,8.34C-7.786666666666666,8.226666666666667,-7.8933333333333335,8.113333333333333,-8,8" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #4cb140; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #63993d; fill-opacity: 0.3; stroke-width: 2;" /> @@ -101,7 +101,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -142,7 +142,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -163,7 +163,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -178,7 +178,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -219,7 +219,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -240,7 +240,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -261,7 +261,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -282,7 +282,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -310,7 +310,7 @@ exports[`null previous and current reports are handled 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #8bc1f7;" + style="fill: #92c5f9;" /> @@ -349,7 +349,7 @@ exports[`null previous and current reports are handled 1`] = ` @@ -379,9 +379,9 @@ exports[`reports are formatted to datums 1`] = ` class="chartOverride" >

@@ -395,7 +395,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px;" >
@@ -465,7 +465,7 @@ exports[`reports are formatted to datums 1`] = ` d="M8,16.5Z" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #4cb140; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #63993d; fill-opacity: 0.3; stroke-width: 2;" /> @@ -475,7 +475,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -516,7 +516,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -537,7 +537,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -552,7 +552,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -593,7 +593,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -614,7 +614,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -635,7 +635,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -656,7 +656,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -684,7 +684,7 @@ exports[`reports are formatted to datums 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #8bc1f7;" + style="fill: #92c5f9;" /> @@ -723,7 +723,7 @@ exports[`reports are formatted to datums 1`] = ` diff --git a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.styles.ts b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.styles.ts index 2dc599d62..e6c415a9f 100644 --- a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.styles.ts +++ b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.styles.ts @@ -8,8 +8,8 @@ import { chart_color_green_200 } from '@patternfly/react-tokens/dist/js/chart_co import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300'; import { chart_color_green_400 } from '@patternfly/react-tokens/dist/js/chart_color_green_400'; import { chart_color_green_500 } from '@patternfly/react-tokens/dist/js/chart_color_green_500'; -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_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'; export const chartStyles = { // See: https://github.com/project-koku/koku-ui/issues/241 @@ -64,9 +64,9 @@ export const chartStyles = { export const styles = { chart: { - marginTop: global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, title: { - marginLeft: '-' + global_spacer_lg.value, + marginLeft: '-' + t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx index a1c7d80ae..d77b09278 100644 --- a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx +++ b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx @@ -8,7 +8,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap b/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap index bdc2fac6c..e62082a9f 100644 --- a/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap +++ b/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap @@ -5,9 +5,9 @@ exports[`reports are formatted to datums 1`] = ` class="chartOverride" >

@@ -21,7 +21,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px;" >
@@ -91,7 +91,7 @@ exports[`reports are formatted to datums 1`] = ` d="M0.5333333333333332,14Z" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #38812f; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #3d7317; fill-opacity: 0.3; stroke-width: 2;" /> @@ -121,7 +121,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -151,7 +151,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -183,7 +183,7 @@ exports[`reports are formatted to datums 1`] = ` d="M8,20C7.8933333333333335,19.92,7.786666666666666,19.840000000000003,7.68,19.76C7.573333333333333,19.68,7.466666666666666,19.6,7.359999999999999,19.52C7.253333333333333,19.439999999999998,7.146666666666667,19.359999999999996,7.040000000000001,19.279999999999998C6.9333333333333345,19.2,6.826666666666667,19.12,6.720000000000001,19.040000000000003C6.613333333333334,18.960000000000004,6.506666666666667,18.880000000000003,6.4,18.8C6.293333333333334,18.72,6.1866666666666665,18.64,6.08,18.560000000000002C5.973333333333334,18.480000000000004,5.866666666666666,18.4,5.76,18.32C5.653333333333333,18.240000000000002,5.546666666666666,18.16,5.4399999999999995,18.080000000000002C5.333333333333333,18.000000000000004,5.2266666666666675,17.92,5.120000000000001,17.840000000000003C5.0133333333333345,17.76,4.906666666666667,17.68,4.800000000000001,17.6C4.693333333333334,17.520000000000003,4.586666666666667,17.440000000000005,4.48,17.360000000000003C4.373333333333334,17.28,4.266666666666667,17.199999999999996,4.16,17.119999999999997C4.053333333333334,17.04,3.9466666666666668,16.96,3.84,16.880000000000003C3.733333333333333,16.800000000000004,3.6266666666666665,16.720000000000002,3.5199999999999996,16.64C3.413333333333333,16.56,3.306666666666666,16.48,3.1999999999999997,16.4C3.093333333333333,16.319999999999997,2.9866666666666664,16.239999999999995,2.8799999999999994,16.159999999999997C2.773333333333333,16.08,2.666666666666667,16,2.5600000000000005,15.92C2.4533333333333336,15.84,2.346666666666667,15.76,2.24,15.68C2.1333333333333333,15.6,2.026666666666667,15.520000000000001,1.92,15.440000000000001C1.8133333333333332,15.360000000000001,1.7066666666666663,15.28,1.5999999999999996,15.2C1.4933333333333334,15.12,1.386666666666667,15.040000000000001,1.2800000000000007,14.96C1.173333333333334,14.88,1.066666666666667,14.8,0.9600000000000004,14.72C0.8533333333333338,14.64,0.7466666666666671,14.56,0.6400000000000006,14.48C0.533333333333334,14.4,0.42666666666666736,14.32,0.32000000000000073,14.24C0.21333333333333382,14.16,0.10666666666666691,14.08,0,14C-0.10666666666666676,13.92,-0.21333333333333354,13.84,-0.3200000000000003,13.76C-0.42666666666666647,13.68,-0.5333333333333327,13.6,-0.6399999999999988,13.52C-0.7466666666666661,13.44,-0.8533333333333335,13.36,-0.9600000000000009,13.28C-1.066666666666667,13.2,-1.1733333333333331,13.12,-1.2799999999999994,13.04C-1.386666666666666,12.959999999999999,-1.493333333333333,12.88,-1.5999999999999996,12.8C-1.7066666666666659,12.72,-1.813333333333332,12.639999999999999,-1.9199999999999982,12.559999999999999C-2.0266666666666655,12.479999999999999,-2.133333333333333,12.4,-2.24,12.32C-2.346666666666667,12.24,-2.4533333333333336,12.159999999999998,-2.5600000000000005,12.079999999999998C-2.6666666666666665,11.999999999999998,-2.773333333333333,11.92,-2.879999999999999,11.84C-2.986666666666666,11.76,-3.0933333333333324,11.679999999999998,-3.1999999999999993,11.599999999999998C-3.306666666666666,11.519999999999998,-3.4133333333333327,11.44,-3.5199999999999996,11.36C-3.6266666666666665,11.28,-3.733333333333333,11.200000000000001,-3.84,11.120000000000001C-3.9466666666666668,11.040000000000001,-4.053333333333334,10.959999999999999,-4.16,10.879999999999999C-4.266666666666667,10.799999999999999,-4.373333333333332,10.72,-4.479999999999999,10.64C-4.586666666666666,10.56,-4.693333333333333,10.479999999999999,-4.800000000000001,10.399999999999999C-4.906666666666667,10.319999999999999,-5.013333333333333,10.24,-5.119999999999999,10.16C-5.226666666666666,10.08,-5.333333333333333,10,-5.4399999999999995,9.92C-5.546666666666666,9.84,-5.653333333333333,9.76,-5.76,9.68C-5.866666666666666,9.6,-5.973333333333334,9.52,-6.08,9.44C-6.1866666666666665,9.36,-6.293333333333334,9.28,-6.4,9.2C-6.506666666666667,9.12,-6.613333333333332,9.04,-6.719999999999999,8.959999999999999C-6.826666666666665,8.879999999999999,-6.933333333333333,8.799999999999999,-7.039999999999999,8.719999999999999C-7.146666666666666,8.639999999999999,-7.253333333333331,8.56,-7.359999999999998,8.48C-7.466666666666665,8.4,-7.573333333333332,8.32,-7.68,8.24C-7.786666666666666,8.16,-7.8933333333333335,8.08,-8,8" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #06c; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #0066cc; fill-opacity: 0.3; stroke-width: 2;" /> @@ -215,7 +215,7 @@ exports[`reports are formatted to datums 1`] = ` d="M8,20C7.8933333333333335,19.92,7.786666666666666,19.840000000000003,7.68,19.76C7.573333333333333,19.68,7.466666666666666,19.6,7.359999999999999,19.52C7.253333333333333,19.439999999999998,7.146666666666667,19.359999999999996,7.040000000000001,19.279999999999998C6.9333333333333345,19.2,6.826666666666667,19.12,6.720000000000001,19.040000000000003C6.613333333333334,18.960000000000004,6.506666666666667,18.880000000000003,6.4,18.8C6.293333333333334,18.72,6.1866666666666665,18.64,6.08,18.560000000000002C5.973333333333334,18.480000000000004,5.866666666666666,18.4,5.76,18.32C5.653333333333333,18.240000000000002,5.546666666666666,18.16,5.4399999999999995,18.080000000000002C5.333333333333333,18.000000000000004,5.2266666666666675,17.92,5.120000000000001,17.840000000000003C5.0133333333333345,17.76,4.906666666666667,17.68,4.800000000000001,17.6C4.693333333333334,17.520000000000003,4.586666666666667,17.440000000000005,4.48,17.360000000000003C4.373333333333334,17.28,4.266666666666667,17.199999999999996,4.16,17.119999999999997C4.053333333333334,17.04,3.9466666666666668,16.96,3.84,16.880000000000003C3.733333333333333,16.800000000000004,3.6266666666666665,16.720000000000002,3.5199999999999996,16.64C3.413333333333333,16.56,3.306666666666666,16.48,3.1999999999999997,16.4C3.093333333333333,16.319999999999997,2.9866666666666664,16.239999999999995,2.8799999999999994,16.159999999999997C2.773333333333333,16.08,2.666666666666667,16,2.5600000000000005,15.92C2.4533333333333336,15.84,2.346666666666667,15.76,2.24,15.68C2.1333333333333333,15.6,2.026666666666667,15.520000000000001,1.92,15.440000000000001C1.8133333333333332,15.360000000000001,1.7066666666666663,15.28,1.5999999999999996,15.2C1.4933333333333334,15.12,1.386666666666667,15.040000000000001,1.2800000000000007,14.96C1.173333333333334,14.88,1.066666666666667,14.8,0.9600000000000004,14.72C0.8533333333333338,14.64,0.7466666666666671,14.56,0.6400000000000006,14.48C0.533333333333334,14.4,0.42666666666666736,14.32,0.32000000000000073,14.24C0.21333333333333382,14.16,0.10666666666666691,14.08,0,14C-0.10666666666666676,13.92,-0.21333333333333354,13.84,-0.3200000000000003,13.76C-0.42666666666666647,13.68,-0.5333333333333327,13.6,-0.6399999999999988,13.52C-0.7466666666666661,13.44,-0.8533333333333335,13.36,-0.9600000000000009,13.28C-1.066666666666667,13.2,-1.1733333333333331,13.12,-1.2799999999999994,13.04C-1.386666666666666,12.959999999999999,-1.493333333333333,12.88,-1.5999999999999996,12.8C-1.7066666666666659,12.72,-1.813333333333332,12.639999999999999,-1.9199999999999982,12.559999999999999C-2.0266666666666655,12.479999999999999,-2.133333333333333,12.4,-2.24,12.32C-2.346666666666667,12.24,-2.4533333333333336,12.159999999999998,-2.5600000000000005,12.079999999999998C-2.6666666666666665,11.999999999999998,-2.773333333333333,11.92,-2.879999999999999,11.84C-2.986666666666666,11.76,-3.0933333333333324,11.679999999999998,-3.1999999999999993,11.599999999999998C-3.306666666666666,11.519999999999998,-3.4133333333333327,11.44,-3.5199999999999996,11.36C-3.6266666666666665,11.28,-3.733333333333333,11.200000000000001,-3.84,11.120000000000001C-3.9466666666666668,11.040000000000001,-4.053333333333334,10.959999999999999,-4.16,10.879999999999999C-4.266666666666667,10.799999999999999,-4.373333333333332,10.72,-4.479999999999999,10.64C-4.586666666666666,10.56,-4.693333333333333,10.479999999999999,-4.800000000000001,10.399999999999999C-4.906666666666667,10.319999999999999,-5.013333333333333,10.24,-5.119999999999999,10.16C-5.226666666666666,10.08,-5.333333333333333,10,-5.4399999999999995,9.92C-5.546666666666666,9.84,-5.653333333333333,9.76,-5.76,9.68C-5.866666666666666,9.6,-5.973333333333334,9.52,-6.08,9.44C-6.1866666666666665,9.36,-6.293333333333334,9.28,-6.4,9.2C-6.506666666666667,9.12,-6.613333333333332,9.04,-6.719999999999999,8.959999999999999C-6.826666666666665,8.879999999999999,-6.933333333333333,8.799999999999999,-7.039999999999999,8.719999999999999C-7.146666666666666,8.639999999999999,-7.253333333333331,8.56,-7.359999999999998,8.48C-7.466666666666665,8.4,-7.573333333333332,8.32,-7.68,8.24C-7.786666666666666,8.16,-7.8933333333333335,8.08,-8,8" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #7cc674; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #87bb62; fill-opacity: 0.3; stroke-width: 2;" /> @@ -225,7 +225,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -266,7 +266,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -287,7 +287,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -302,7 +302,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -343,7 +343,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -364,7 +364,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -385,7 +385,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -413,7 +413,7 @@ exports[`reports are formatted to datums 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #8bc1f7;" + style="fill: #92c5f9;" /> @@ -512,7 +512,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -529,7 +529,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -546,7 +546,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -563,7 +563,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -580,7 +580,7 @@ exports[`reports are formatted to datums 1`] = ` diff --git a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.styles.ts b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.styles.ts index a389d6562..4ab350886 100644 --- a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.styles.ts +++ b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.styles.ts @@ -8,8 +8,8 @@ import { chart_color_green_200 } from '@patternfly/react-tokens/dist/js/chart_co import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300'; import { chart_color_green_400 } from '@patternfly/react-tokens/dist/js/chart_color_green_400'; import { chart_color_green_500 } from '@patternfly/react-tokens/dist/js/chart_color_green_500'; -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_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 chartStyles = { @@ -85,9 +85,9 @@ export const chartStyles = { export const styles = { chart: { - marginTop: global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, title: { - marginLeft: '-' + global_spacer_lg.value, + marginLeft: '-' + t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx index aa1498a89..76af8959b 100644 --- a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx +++ b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx @@ -9,7 +9,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap b/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap index 520d90ebf..b884dc63b 100644 --- a/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap +++ b/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap @@ -3,9 +3,9 @@ exports[`reports are formatted to datums 1`] = `

Example Trend Title @@ -18,7 +18,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px;" >
@@ -94,7 +94,7 @@ exports[`reports are formatted to datums 1`] = ` d="M0.5333333333333332,29Z" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #38812f; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #3d7317; fill-opacity: 0.3; stroke-width: 2;" /> @@ -104,7 +104,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -145,7 +145,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -166,7 +166,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -181,7 +181,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -222,7 +222,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -243,7 +243,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -264,7 +264,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -292,7 +292,7 @@ exports[`reports are formatted to datums 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #d2d2d2;" + style="fill: #e0e0e0;" /> @@ -331,7 +331,7 @@ exports[`reports are formatted to datums 1`] = ` diff --git a/src/routes/components/charts/trendChart/trendChart.tsx b/src/routes/components/charts/trendChart/trendChart.tsx index 3543360a3..9d6b685fa 100644 --- a/src/routes/components/charts/trendChart/trendChart.tsx +++ b/src/routes/components/charts/trendChart/trendChart.tsx @@ -8,7 +8,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap b/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap index 0450bf780..cf78708c5 100644 --- a/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap +++ b/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap @@ -6,7 +6,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px;" >
@@ -82,7 +82,7 @@ exports[`reports are formatted to datums 1`] = ` d="M0.5333333333333332,25Z" role="presentation" shape-rendering="auto" - style="fill: none; stroke: #38812f; fill-opacity: 0.3; stroke-width: 2;" + style="fill: none; stroke: #3d7317; fill-opacity: 0.3; stroke-width: 2;" /> @@ -112,7 +112,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -142,7 +142,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -152,7 +152,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -193,7 +193,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -214,7 +214,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -229,7 +229,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -270,7 +270,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -291,7 +291,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -312,7 +312,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -340,7 +340,7 @@ exports[`reports are formatted to datums 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: #d2d2d2;" + style="fill: #e0e0e0;" /> @@ -419,7 +419,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -436,7 +436,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -453,7 +453,7 @@ exports[`reports are formatted to datums 1`] = ` diff --git a/src/routes/components/charts/usageChart/usageChart.styles.ts b/src/routes/components/charts/usageChart/usageChart.styles.ts index 32ac38720..9fe2dc680 100644 --- a/src/routes/components/charts/usageChart/usageChart.styles.ts +++ b/src/routes/components/charts/usageChart/usageChart.styles.ts @@ -4,11 +4,11 @@ import chart_color_green_200 from '@patternfly/react-tokens/dist/js/chart_color_ import chart_color_green_300 from '@patternfly/react-tokens/dist/js/chart_color_green_300'; import chart_color_green_400 from '@patternfly/react-tokens/dist/js/chart_color_green_400'; import chart_color_green_500 from '@patternfly/react-tokens/dist/js/chart_color_green_500'; -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; +import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; export const chartStyles = { chartContainer: { - marginTop: global_spacer_lg.value, + marginTop: t_global_spacer_lg.value, }, currentRequestData: { data: { diff --git a/src/routes/components/charts/usageChart/usageChart.tsx b/src/routes/components/charts/usageChart/usageChart.tsx index 11964f4bb..1ebd46100 100644 --- a/src/routes/components/charts/usageChart/usageChart.tsx +++ b/src/routes/components/charts/usageChart/usageChart.tsx @@ -8,7 +8,7 @@ import { ChartLegendTooltip, createContainer, getInteractiveLegendEvents, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { Title, TitleSizes } from '@patternfly/react-core'; import { getDate } from 'date-fns'; import messages from 'locales/messages'; diff --git a/src/routes/components/cluster/cluster.styles.ts b/src/routes/components/cluster/cluster.styles.ts index 51744d5af..c12eb535f 100644 --- a/src/routes/components/cluster/cluster.styles.ts +++ b/src/routes/components/cluster/cluster.styles.ts @@ -1,10 +1,10 @@ -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 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 type React from 'react'; export const styles = { clustersContainer: { - marginRight: global_spacer_3xl.value, - marginTop: global_spacer_sm.value, + marginRight: t_global_spacer_3xl.value, + marginTop: t_global_spacer_sm.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/cluster/modal/clusterModal.scss b/src/routes/components/cluster/modal/clusterModal.scss index d247c868b..8393ee2ea 100644 --- a/src/routes/components/cluster/modal/clusterModal.scss +++ b/src/routes/components/cluster/modal/clusterModal.scss @@ -1,10 +1,10 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .modalOverride { - & .pf-v5-c-modal-box__body { - margin-top: var(--pf-v5-global--spacer--lg); + & .pf-v6-c-modal-box__body { + margin-top: var(--pf-t--global--spacer--lg); } - & .pf-v5-c-modal-box__footer { + & .pf-v6-c-modal-box__footer { display: none; } } diff --git a/src/routes/components/cluster/modal/clusterModal.styles.ts b/src/routes/components/cluster/modal/clusterModal.styles.ts index a3290aa67..f5c2c6c77 100644 --- a/src/routes/components/cluster/modal/clusterModal.styles.ts +++ b/src/routes/components/cluster/modal/clusterModal.styles.ts @@ -1,4 +1,4 @@ -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; +import t_global_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; import type React from 'react'; export const styles = { @@ -8,7 +8,7 @@ export const styles = { width: '600px', }, subTitle: { - marginTop: global_spacer_2xl.value, + marginTop: t_global_spacer_2xl.value, textAlign: 'right', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/cluster/modal/clusterModal.tsx b/src/routes/components/cluster/modal/clusterModal.tsx index 840f31ec7..e1d8e5517 100644 --- a/src/routes/components/cluster/modal/clusterModal.tsx +++ b/src/routes/components/cluster/modal/clusterModal.tsx @@ -1,6 +1,6 @@ import './clusterModal.scss'; -import { Modal } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -38,18 +38,16 @@ class ClusterModalBase extends React.Component { const { clusters, groupBy, intl, isOpen, title } = this.props; return ( - - + + + + + ); } diff --git a/src/routes/components/costDistribution/costDistribution.styles.ts b/src/routes/components/costDistribution/costDistribution.styles.ts index 2c0446177..74a642049 100644 --- a/src/routes/components/costDistribution/costDistribution.styles.ts +++ b/src/routes/components/costDistribution/costDistribution.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 = { }, label: { marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, whiteSpace: 'nowrap', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/costType/costType.styles.ts b/src/routes/components/costType/costType.styles.ts index 3b190e483..b362c2d37 100644 --- a/src/routes/components/costType/costType.styles.ts +++ b/src/routes/components/costType/costType.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 = { }, costLabel: { marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, whiteSpace: 'nowrap', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/currency/currency.styles.ts b/src/routes/components/currency/currency.styles.ts index e71386da9..6b74bdcc4 100644 --- a/src/routes/components/currency/currency.styles.ts +++ b/src/routes/components/currency/currency.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 = { }, currencyLabel: { marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, whiteSpace: 'nowrap', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss index d97c63d36..e4c02450f 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 { - margin-top: .40rem; + &.pf-v6-c-table tbody .pf-v6-c-table__check input { + margin-top: .26rem; } } diff --git a/src/routes/components/dataTable/dataTable.styles.ts b/src/routes/components/dataTable/dataTable.styles.ts index c18c613e3..c5df9f4e1 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_background_color_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_body_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_body_sm'; +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_background_color_100.value, display: 'flex', justifyContent: 'center', - paddingTop: global_spacer_3xl.value, + paddingTop: t_global_spacer_3xl.value, height: '35vh', width: '100%', }, @@ -31,11 +31,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_body_sm.value, }, lastItem: { textAlign: 'right', @@ -53,6 +53,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 07ae4a492..671bc7cc1 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'; @@ -54,8 +47,7 @@ class DataTable extends React.Component { return emptyState ? ( emptyState ) : ( - - } /> + {intl.formatMessage(messages.detailsEmptyState)} ); diff --git a/src/routes/components/dataTable/expandableTable.tsx b/src/routes/components/dataTable/expandableTable.tsx index 9c9c6441d..958d3023c 100644 --- a/src/routes/components/dataTable/expandableTable.tsx +++ b/src/routes/components/dataTable/expandableTable.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'; @@ -60,8 +53,7 @@ class ExpandableTable extends React.Component - } /> + {intl.formatMessage(messages.detailsEmptyState)} ); diff --git a/src/routes/components/dataTable/selectableTable.tsx b/src/routes/components/dataTable/selectableTable.tsx index 2d6d21f68..91e295630 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 ed24adf3b..7cce2f181 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 { getBulkSelect } from './utils/bulkSelect'; import { getCategoryInput, @@ -335,14 +334,14 @@ export class BasicToolbarBase extends React.Component +
- {showBulkSelect && {this.getBulkSelectComponent()}} + {showBulkSelect && {this.getBulkSelectComponent()}} {showFilter && ( }> @@ -353,7 +352,7 @@ export class BasicToolbarBase extends React.Component )} {actions && {actions}} - + {pagination} diff --git a/src/routes/components/dataToolbar/costCategoryValue.tsx b/src/routes/components/dataToolbar/costCategoryValue.tsx index 30602f1b0..fb5fd543e 100644 --- a/src/routes/components/dataToolbar/costCategoryValue.tsx +++ b/src/routes/components/dataToolbar/costCategoryValue.tsx @@ -147,13 +147,12 @@ class CostCategoryValueBase extends React.Component + > ); diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss index e6d8b1bf2..45a3a07c6 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 index 054c1a36f..3e77f324c 100644 --- a/src/routes/components/dataToolbar/dataToolbar.styles.ts +++ b/src/routes/components/dataToolbar/dataToolbar.styles.ts @@ -1,17 +1,11 @@ -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 t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_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, + marginRight: t_global_spacer_md.value, }, platformCosts: { - marginTop: '6px', + paddingTop: '8px', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/dataToolbar/dataToolbar.tsx b/src/routes/components/dataToolbar/dataToolbar.tsx index c1a1af26f..76f37c3a7 100644 --- a/src/routes/components/dataToolbar/dataToolbar.tsx +++ b/src/routes/components/dataToolbar/dataToolbar.tsx @@ -18,7 +18,6 @@ import type { Filter } from 'routes/utils/filter'; import { createMapStateToProps } from 'store/common'; import { awsCategoryKey, orgUnitIdKey, platformCategoryKey, tagKey } from 'utils/props'; -import { styles } from './dataToolbar.styles'; import { getColumnManagement, getExportButton, getKebab, getPlatformCosts } from './utils/actions'; import { getBulkSelect } from './utils/bulkSelect'; import { @@ -748,14 +747,14 @@ export class DataToolbarBase extends React.Component +
- {showBulkSelect && {this.getBulkSelectComponent()}} + {showBulkSelect && {this.getBulkSelectComponent()}} {showFilter && ( }> @@ -774,12 +773,14 @@ export class DataToolbarBase extends React.Component )} {(showExport || showColumnManagement) && ( - - {showColumnManagement && this.getColumnManagementComponent()} - {showPlatformCosts && this.getPlatformCostsComponent()} - {showExport && this.getExportButtonComponent()} - {(showColumnManagement || showPlatformCosts) && this.getKebab()} - + <> + {showColumnManagement && this.getColumnManagementComponent()} + {showPlatformCosts && this.getPlatformCostsComponent()} + + {showExport && this.getExportButtonComponent()} + {(showColumnManagement || showPlatformCosts) && this.getKebab()} + + )} {(dateRange || datePicker) && ( @@ -787,7 +788,7 @@ export class DataToolbarBase extends React.Component )} - + {pagination} diff --git a/src/routes/components/dataToolbar/tagValue.tsx b/src/routes/components/dataToolbar/tagValue.tsx index 4515deed7..389b844f3 100644 --- a/src/routes/components/dataToolbar/tagValue.tsx +++ b/src/routes/components/dataToolbar/tagValue.tsx @@ -147,13 +147,12 @@ class TagValueBase extends React.Component { + > ); diff --git a/src/routes/components/dataToolbar/utils/actions.tsx b/src/routes/components/dataToolbar/utils/actions.tsx index 615f53948..f09599d65 100644 --- a/src/routes/components/dataToolbar/utils/actions.tsx +++ b/src/routes/components/dataToolbar/utils/actions.tsx @@ -37,18 +37,17 @@ export const getExportButton = ({ }) => { return ( + > ); }; diff --git a/src/routes/components/dataToolbar/utils/bulkSelect.tsx b/src/routes/components/dataToolbar/utils/bulkSelect.tsx index f1401daca..a7ec3ff53 100644 --- a/src/routes/components/dataToolbar/utils/bulkSelect.tsx +++ b/src/routes/components/dataToolbar/utils/bulkSelect.tsx @@ -75,19 +75,17 @@ export const getBulkSelect = ({ isExpanded={isBulkSelectOpen} onClick={() => onBulkSelectToggle(!isBulkSelectOpen)} ref={toggleRef} - splitButtonOptions={{ - items: [ - , - ], - }} + splitButtonItems={[ + , + ]} > {anySelected ? intl.formatMessage(messages.selected, { value: numSelected }) : null} diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx index 6838155d4..aec866603 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 ( @@ -90,13 +90,12 @@ export const getCategoryInput = ({ size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length} /> + > )} @@ -105,7 +104,7 @@ export const getCategoryInput = ({ ); }; -export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => { +export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => { return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }]; }; @@ -196,7 +195,7 @@ export const getCategorySelect = ({ isDisabled, onCategorySelect, }: { - categoryOptions?: ToolbarChipGroup[]; // Options for category menu + categoryOptions?: ToolbarLabelGroup[]; // Options for category menu currentCategory?: string; filters?: Filters; isDisabled?: boolean; @@ -224,7 +223,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 b71d23a9c..d11fb4b32 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,12 +10,12 @@ export interface Filters { [key: string]: Filter[] | { [key: string]: Filter[] }; } -export interface ToolbarChipGroupExt extends ToolbarChipGroup { +export interface ToolbarChipGroupExt extends ToolbarLabelGroup { ariaLabelKey?: string; placeholderKey?: string; resourceKey?: string; selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss - selectOptions?: ToolbarChipGroup[]; + selectOptions?: ToolbarLabelGroup[]; } export const defaultFilters = { @@ -91,7 +91,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/costCategory.tsx b/src/routes/components/dataToolbar/utils/costCategory.tsx index 9439a52e3..9fe49360d 100644 --- a/src/routes/components/dataToolbar/utils/costCategory.tsx +++ b/src/routes/components/dataToolbar/utils/costCategory.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; import type { Resource, ResourcePathsType } from 'api/resources/resource'; import { intl } from 'components/i18n'; @@ -59,7 +59,7 @@ export const getCostCategoryKeySelect = ({ export const getCostCategoryKeyOptions = ( resourceReport: Resource, isSelectWrapperOption = false -): ToolbarChipGroup[] | SelectWrapperOption[] => { +): ToolbarLabelGroup[] | SelectWrapperOption[] => { let data = []; let options = []; @@ -122,7 +122,7 @@ export const getCostCategoryValueSelect = ({ }: { currentCategory?: string; currentCostCategoryKey?: string; - costCategoryKeyOption: ToolbarChipGroup; + costCategoryKeyOption: ToolbarLabelGroup; costCategoryKeyValueInput?: string; filters?: Filters; isDisabled?: boolean; @@ -141,8 +141,8 @@ export const getCostCategoryValueSelect = ({ return ( diff --git a/src/routes/components/dataToolbar/utils/custom.tsx b/src/routes/components/dataToolbar/utils/custom.tsx index 76b37694a..e32528ebb 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/dataToolbar/utils/orgUntits.tsx b/src/routes/components/dataToolbar/utils/orgUntits.tsx index 63e626f78..11980b509 100644 --- a/src/routes/components/dataToolbar/utils/orgUntits.tsx +++ b/src/routes/components/dataToolbar/utils/orgUntits.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import { ToolbarFilter } from '@patternfly/react-core'; import type { Org } from 'api/orgs/org'; import { intl } from 'components/i18n'; @@ -62,8 +62,8 @@ export const getOrgUnitSelect = ({ key: orgUnitIdKey, name: intl.formatMessage(messages.filterByValues, { value: 'org_unit_id' }), }} - chips={chips} - deleteChip={onDelete} + labels={chips} + deleteLabel={onDelete} key={orgUnitIdKey} showToolbarItem={currentCategory === orgUnitIdKey} > @@ -81,7 +81,7 @@ export const getOrgUnitSelect = ({ ); }; -export const getOrgUnitOptions = (orgReport: Org): ToolbarChipGroup[] => { +export const getOrgUnitOptions = (orgReport: Org): ToolbarLabelGroup[] => { let options = []; if (!orgReport?.data) { return options; diff --git a/src/routes/components/dataToolbar/utils/tags.tsx b/src/routes/components/dataToolbar/utils/tags.tsx index e32a09fe5..2bbb07116 100644 --- a/src/routes/components/dataToolbar/utils/tags.tsx +++ b/src/routes/components/dataToolbar/utils/tags.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; import type { Tag, TagPathsType } from 'api/tags/tag'; import { intl } from 'components/i18n'; @@ -56,7 +56,7 @@ export const getTagKeySelect = ({ export const getTagKeyOptions = ( tagReport: Tag, isSelectWrapperOption = false -): ToolbarChipGroup[] | SelectWrapperOption[] => { +): ToolbarLabelGroup[] | SelectWrapperOption[] => { let data = []; let options = []; @@ -124,7 +124,7 @@ export const getTagValueSelect = ({ onTagValueSelect?: (event: any, selection) => void; onTagValueInput?: (event: any) => void; onTagValueInputChange?: (value: string) => void; - tagKeyOption?: ToolbarChipGroup; + tagKeyOption?: ToolbarLabelGroup; tagPathsType?: TagPathsType; tagKeyValueInput?: string; }) => { @@ -137,8 +137,8 @@ export const getTagValueSelect = ({ return ( diff --git a/src/routes/components/dateRange/dateRange.scss b/src/routes/components/dateRange/dateRange.scss index 1ae639c0c..9f0807baa 100644 --- a/src/routes/components/dateRange/dateRange.scss +++ b/src/routes/components/dateRange/dateRange.scss @@ -1,7 +1,7 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .dropdownOverride { - button.pf-v5-c-menu-toggle { + button.pf-v6-c-menu-toggle { max-width: unset; } } diff --git a/src/routes/components/dropdownWrapper/dropdown.styles.ts b/src/routes/components/dropdownWrapper/dropdown.styles.ts index 0adf34399..87dad9605 100644 --- a/src/routes/components/dropdownWrapper/dropdown.styles.ts +++ b/src/routes/components/dropdownWrapper/dropdown.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/dropdownWrapper/dropdownWrapper.scss b/src/routes/components/dropdownWrapper/dropdownWrapper.scss index 8d940ce0a..ea02ecfcb 100644 --- a/src/routes/components/dropdownWrapper/dropdownWrapper.scss +++ b/src/routes/components/dropdownWrapper/dropdownWrapper.scss @@ -2,10 +2,10 @@ // Workaround for missing "position" property .dropdownWrapper { - .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/export/exportModal.styles.ts b/src/routes/components/export/exportModal.styles.ts index f3b7b69d9..b2a331e0e 100644 --- a/src/routes/components/export/exportModal.styles.ts +++ b/src/routes/components/export/exportModal.styles.ts @@ -1,24 +1,24 @@ -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 global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { alert: { - marginBottom: global_spacer_md.var, + marginBottom: t_global_spacer_md.var, }, form: { - marginLeft: global_spacer_sm.var, + marginLeft: t_global_spacer_sm.var, }, modal: { input: { - marginRight: global_spacer_xs.var, + marginRight: t_global_spacer_xs.var, }, ul: { - marginLeft: global_spacer_sm.var, + marginLeft: t_global_spacer_sm.var, }, }, title: { - marginBottom: global_spacer_md.var, + marginBottom: t_global_spacer_md.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/export/exportModal.tsx b/src/routes/components/export/exportModal.tsx index d6f65484b..a72ac5a4a 100644 --- a/src/routes/components/export/exportModal.tsx +++ b/src/routes/components/export/exportModal.tsx @@ -10,6 +10,10 @@ import { HelperText, HelperTextItem, Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, Radio, TextInput, } from '@patternfly/react-core'; @@ -196,13 +200,117 @@ export class ExportModalBase extends React.Component + + + {error && } +
+ {isExportsToggleEnabled ? ( + + {intl.formatMessage(messages.exportDesc, { value: {intl.formatMessage(messages.exportsTitle)} })} + + ) : ( + {intl.formatMessage(messages.exportHeading, { groupBy })} + )} +
+
+ + {isExportsToggleEnabled && ( + + + + {validated === 'error' && ( + + {intl.formatMessage(helpText)} + + )} + + + )} + {showAggregateType && ( + + + {resolutionOptions.map((option, index) => ( + + ))} + + + )} + {showTimeScope && ( + + + {timeScopeOptions.map((option, index) => ( + + ))} + + + )} + {showFormatType && isExportsToggleEnabled && ( + + + {formatTypeOptions.map((option, index) => ( + + ))} + + + )} + + +
    + {sortedItems.map((groupItem, index) => { + return
  • {groupItem.label}
    • ; + })} +
+ + + +
+ + , + /> , - ]} - > - {error && } -
- {isExportsToggleEnabled ? ( - - {intl.formatMessage(messages.exportDesc, { value: {intl.formatMessage(messages.exportsTitle)} })} - - ) : ( - {intl.formatMessage(messages.exportHeading, { groupBy })} - )} -
-
- - {isExportsToggleEnabled && ( - - - - {validated === 'error' && ( - - {intl.formatMessage(helpText)} - - )} - - - )} - {showAggregateType && ( - - - {resolutionOptions.map((option, index) => ( - - ))} - - - )} - {showTimeScope && ( - - - {timeScopeOptions.map((option, index) => ( - - ))} - - - )} - {showFormatType && isExportsToggleEnabled && ( - - - {formatTypeOptions.map((option, index) => ( - - ))} - - - )} - - -
    - {sortedItems.map((groupItem, index) => { - return
  • {groupItem.label}
    • ; - })} -
- - - -
+ + ); } diff --git a/src/routes/components/groupBy/groupBy.styles.ts b/src/routes/components/groupBy/groupBy.styles.ts index 47323b481..7bc126d23 100644 --- a/src/routes/components/groupBy/groupBy.styles.ts +++ b/src/routes/components/groupBy/groupBy.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 = { }, groupBySelectorLabel: { marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, whiteSpace: 'nowrap', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/page/loading/loading.tsx b/src/routes/components/page/loading/loading.tsx index 99af6462d..84c4d07a9 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/maintenance/maintenance.tsx b/src/routes/components/page/maintenance/maintenance.tsx index df754ec94..0411c77c5 100644 --- a/src/routes/components/page/maintenance/maintenance.tsx +++ b/src/routes/components/page/maintenance/maintenance.tsx @@ -5,7 +5,7 @@ import { MaintenanceState } from './maintenanceState'; const Maintenance = () => { return ( - + ); diff --git a/src/routes/components/page/maintenance/maintenanceState.tsx b/src/routes/components/page/maintenance/maintenanceState.tsx index f64d20de7..bf144e562 100644 --- a/src/routes/components/page/maintenance/maintenanceState.tsx +++ b/src/routes/components/page/maintenance/maintenanceState.tsx @@ -28,6 +28,7 @@ class MaintenanceStateBase extends React.Component{intl.formatMessage(messages.maintenanceEmptyStateThanks)} } + titleText={undefined} /> ); } diff --git a/src/routes/components/page/noData/noData.tsx b/src/routes/components/page/noData/noData.tsx index 0fedc8d05..70bb0b695 100644 --- a/src/routes/components/page/noData/noData.tsx +++ b/src/routes/components/page/noData/noData.tsx @@ -20,7 +20,7 @@ const NoData = ({ detailsComponent, showReload, title }: NoDataProps) => { )} - + diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx index 7ce759d65..003d9daeb 100644 --- a/src/routes/components/page/noData/noDataState.tsx +++ b/src/routes/components/page/noData/noDataState.tsx @@ -1,12 +1,4 @@ -import { - Button, - EmptyState, - EmptyStateBody, - EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, 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'; @@ -25,12 +17,13 @@ class NoDataStateBase extends React.Component { const { detailsComponent, intl, showReload = true } = this.props; return ( - - } - headingLevel="h5" - /> + {intl.formatMessage(messages.noDataStateDesc, { status: detailsComponent, diff --git a/src/routes/components/page/noInstances/noInstances.tsx b/src/routes/components/page/noInstances/noInstances.tsx index 627d33420..fa4da40a3 100644 --- a/src/routes/components/page/noInstances/noInstances.tsx +++ b/src/routes/components/page/noInstances/noInstances.tsx @@ -18,7 +18,7 @@ const NoInstances = ({ title }: NoInstancesProps) => { )} - + diff --git a/src/routes/components/page/noInstances/noInstancesState.tsx b/src/routes/components/page/noInstances/noInstancesState.tsx index 4a242d7b3..39d790de6 100644 --- a/src/routes/components/page/noInstances/noInstancesState.tsx +++ b/src/routes/components/page/noInstances/noInstancesState.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'; @@ -22,12 +16,13 @@ class NoInstancesStateBase extends React.Component { const { intl } = this.props; return ( - - } - headingLevel="h1" - /> + {intl.formatMessage(messages.noInstancesDesc)} ); diff --git a/src/routes/components/page/noProviders/noProviders.tsx b/src/routes/components/page/noProviders/noProviders.tsx index 3aea1200e..79b13d32e 100644 --- a/src/routes/components/page/noProviders/noProviders.tsx +++ b/src/routes/components/page/noProviders/noProviders.tsx @@ -20,7 +20,7 @@ const NoProviders = ({ providerType, title }: NoProvidersProps) => { )} - + diff --git a/src/routes/components/page/noProviders/noProvidersState.styles.ts b/src/routes/components/page/noProviders/noProvidersState.styles.ts index 345d2ca84..3ad97fb65 100644 --- a/src/routes/components/page/noProviders/noProvidersState.styles.ts +++ b/src/routes/components/page/noProviders/noProvidersState.styles.ts @@ -1,12 +1,12 @@ -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; -import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; +import t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { iconSpacer: { - marginLeft: global_spacer_xs.value, + marginLeft: t_global_spacer_xs.value, }, viewSources: { - marginTop: global_spacer_lg.value, + marginTop: t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/page/noProviders/noProvidersState.tsx b/src/routes/components/page/noProviders/noProvidersState.tsx index 11ed24d09..5d6667352 100644 --- a/src/routes/components/page/noProviders/noProvidersState.tsx +++ b/src/routes/components/page/noProviders/noProvidersState.tsx @@ -5,8 +5,6 @@ import { EmptyState, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; @@ -84,12 +82,13 @@ class NoProvidersStateBase extends React.Component { icon = CostIcon; } return ( - - } - headingLevel="h1" - /> + {intl.formatMessage(descKey)} {detailsComponent && {detailsComponent}} diff --git a/src/routes/components/page/notAuthorized/notAuthorized.tsx b/src/routes/components/page/notAuthorized/notAuthorized.tsx index 57f183a56..2ac0bb5b8 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 ffa95918c..4f2c7dad0 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'; @@ -62,7 +62,12 @@ class NotAuthorizedStateBase extends React.Component; + return ( + <> + Test + + + ); } } diff --git a/src/routes/components/page/notAvailable/notAvailable.tsx b/src/routes/components/page/notAvailable/notAvailable.tsx index 342b64599..5b6ced033 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/notFound/notFound.tsx b/src/routes/components/page/notFound/notFound.tsx index 9084e9b07..645530de4 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/perspective/perspective.styles.ts b/src/routes/components/perspective/perspective.styles.ts index b8ebe1d62..366622ff0 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/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap b/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap index 7c07cf5a3..76dde5a04 100644 --- a/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap +++ b/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap @@ -3,35 +3,35 @@ exports[`contains skeleton readers if in progress 1`] = `
diff --git a/src/routes/components/reports/reportSummary/reportSummary.scss b/src/routes/components/reports/reportSummary/reportSummary.scss index e55656282..252e6a958 100644 --- a/src/routes/components/reports/reportSummary/reportSummary.scss +++ b/src/routes/components/reports/reportSummary/reportSummary.scss @@ -2,12 +2,12 @@ .chartSkeleton { height: 125px; - margin-bottom: var(--pf-v5-global--spacer--md); - margin-top: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--spacer--md); + margin-top: var(--pf-t--global--spacer--md); } .legendSkeleton { - margin-top: var(--pf-v5-global--spacer--md), + margin-top: var(--pf-t--global--spacer--md), } .reportSummary { @@ -16,7 +16,7 @@ .subtitle { display: inline-block; - font-size: var(--pf-v5-global--FontSize--xs); - color: var(--pf-v5-global--Color--200); + font-size: var(--pf-t--global--font--size--xs); + color: var(--pf-t--global--text--color--200); margin-bottom: 0; } diff --git a/src/routes/components/reports/reportSummary/reportSummaryAlt.scss b/src/routes/components/reports/reportSummary/reportSummaryAlt.scss index c73fe7209..71929688f 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryAlt.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryAlt.scss @@ -2,18 +2,18 @@ .chartSkeleton { height: 175px; - margin-bottom: var(--pf-v5-global--spacer--md); - margin-top: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--spacer--md); + margin-top: var(--pf-t--global--spacer--md); } .cost { flex-grow: 1; min-height: 470px; - margin-tight: var(--pf-v5-global--spacer--md); + margin-tight: var(--pf-t--global--spacer--md); } .legendSkeleton { - margin-top: var(--pf-v5-global--spacer--md), + margin-top: var(--pf-t--global--spacer--md), } .reportSummary { @@ -22,11 +22,11 @@ .subtitle { display: inline-block; - font-size: var(--pf-v5-global--FontSize--xs); - color: var(--pf-v5-global--Color--200); + font-size: var(--pf-t--global--font--size--xs); + color: var(--pf-t--global--text--color--200); margin-bottom: 0; } .tops { - margin-top: var(--pf-v5-global--spacer--lg), + margin-top: var(--pf-t--global--spacer--lg), } diff --git a/src/routes/components/reports/reportSummary/reportSummaryCost.scss b/src/routes/components/reports/reportSummary/reportSummaryCost.scss index 22b63d796..062359a96 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryCost.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryCost.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .chart { - margin-bottom: var(--pf-v5-global--spacer--sm); + margin-bottom: var(--pf-t--global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss index 22b63d796..062359a96 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .chart { - margin-bottom: var(--pf-v5-global--spacer--sm); + margin-bottom: var(--pf-t--global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss index 47363e31f..1893af627 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .chart { - margin-nottom: var(--pf-v5-global--spacer--sm); + margin-nottom: var(--pf-t--global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDetails.scss b/src/routes/components/reports/reportSummary/reportSummaryDetails.scss index c569b949f..a85b1ef70 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryDetails.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryDetails.scss @@ -1,40 +1,40 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .reportSummaryDetails { - margin-bottom: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--spacer--md); display: flex; align-Items: flex-end; } .text { - padding-bottom: var(--pf-v5-global--spacer--sm); - line-height: var(--pf-v5-global--LineHeight--sm); - font-size: var(--pf-v5-global--FontSize--xs); + padding-bottom: var(--pf-t--global--spacer--sm); + line-height: var(--pf-t--global--font--line-height--100); + font-size: var(--pf-t--global--font--size--xs); } .units { - padding-left: var(--pf-v5-global--spacer--xs); - padding-bottom: var(--pf-v5-global--spacer--sm); - line-height: var(--pf-v5-global--LineHeight--sm); - font-size: var(--pf-v5-global--FontSize--xs); + padding-left: var(--pf-t--global--spacer--xs); + padding-bottom: var(--pf-t--global--spacer--sm); + line-height: var(--pf-t--global--font--line-height--100); + font-size: var(--pf-t--global--font--size--xs); white-space: nowrap; } .value { - color: var(--pf-v5-global--Color--100); - margin-right: var(--pf-v5-global--spacer--sm); - font-size: var(--pf-v5-global--FontSize--2xl); + color: var(--pf-t--global--text--color--100); + margin-right: var(--pf-t--global--spacer--sm); + font-size: var(--pf-t--global--font--size--2xl); } .valueAlt { - color: var(--pf-v5-global--Color--100); - margin-right: var(--pf-v5-global--spacer--sm); - font-size: var(--pf-v5-global--FontSize--4xl); + color: var(--pf-t--global--text--color--100); + margin-right: var(--pf-t--global--spacer--sm); + font-size: var(--pf-t--global--font--size--4xl); } .valueContainer { display: inline-block; - margin-bottom: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--spacer--md); width: 50%; word-Wrap: break-word; } diff --git a/src/routes/components/reports/reportSummary/reportSummaryItem.scss b/src/routes/components/reports/reportSummary/reportSummaryItem.scss index 7bcc047b7..3e181ec25 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryItem.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryItem.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .reportSummaryItem:not(:last-child) { - margin-bottom: var(--pf-v5-global--spacer--md); + margin-bottom: var(--pf-t--global--spacer--md); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryItems.scss b/src/routes/components/reports/reportSummary/reportSummaryItems.scss index b8f585f23..af491cfae 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryItems.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryItems.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .skeleton { - margin-top: var(--pf-v5-global--spacer--md); + margin-top: var(--pf-t--global--spacer--md); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryTrend.scss index 47363e31f..1893af627 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryTrend.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryTrend.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .chart { - margin-nottom: var(--pf-v5-global--spacer--sm); + margin-nottom: var(--pf-t--global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryUsage.scss b/src/routes/components/reports/reportSummary/reportSummaryUsage.scss index 22b63d796..062359a96 100644 --- a/src/routes/components/reports/reportSummary/reportSummaryUsage.scss +++ b/src/routes/components/reports/reportSummary/reportSummaryUsage.scss @@ -1,5 +1,5 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .chart { - margin-bottom: var(--pf-v5-global--spacer--sm); + margin-bottom: var(--pf-t--global--spacer--sm); } diff --git a/src/routes/components/resourceTypeahead/resourceFetch.tsx b/src/routes/components/resourceTypeahead/resourceFetch.tsx index 39a4c3814..4ac5c99ce 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'; @@ -58,7 +58,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 b7d22a467..868358ce3 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 0adf34399..87dad9605 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/selectTypeaheadWrapper.tsx b/src/routes/components/selectWrapper/selectTypeaheadWrapper.tsx index 593ccb4a2..8bc654c15 100644 --- a/src/routes/components/selectWrapper/selectTypeaheadWrapper.tsx +++ b/src/routes/components/selectWrapper/selectTypeaheadWrapper.tsx @@ -183,12 +183,11 @@ const SelectTypeaheadWrapper: React.FC = ({ {!!inputValue && ( + > )} diff --git a/src/routes/components/selectWrapper/selectWrapper.scss b/src/routes/components/selectWrapper/selectWrapper.scss index c89b9bbd2..7e1cf3bc6 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 04a61cb87..a44d47cd1 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'; @@ -112,10 +112,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 ada261561..eb0faca03 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 fc3f60cf1..dafbc2ba0 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 0ae19d140..bb9375932 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'; @@ -18,9 +18,8 @@ const LoadingStateBase: React.FC = ({ heading = intl.formatMessage(messages.loadingStateTitle), }) => { return ( - + - {body} ); diff --git a/src/routes/details/awsBreakdown/instances/instances.styles.ts b/src/routes/details/awsBreakdown/instances/instances.styles.ts new file mode 100644 index 000000000..30798340c --- /dev/null +++ b/src/routes/details/awsBreakdown/instances/instances.styles.ts @@ -0,0 +1,7 @@ +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; + +export const styles = { + paginationContainer: { + marginTop: t_global_spacer_sm.var, + }, +} as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/awsBreakdown/instances/instances.tsx b/src/routes/details/awsBreakdown/instances/instances.tsx index 73aeb6d73..bbd90d655 100644 --- a/src/routes/details/awsBreakdown/instances/instances.tsx +++ b/src/routes/details/awsBreakdown/instances/instances.tsx @@ -1,4 +1,4 @@ -import { Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Card, CardBody, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { getQuery } from 'api/queries/query'; import type { Report } from 'api/reports/report'; @@ -12,12 +12,11 @@ import { useDispatch, useSelector } from 'react-redux'; import type { AnyAction } from 'redux'; import type { ThunkDispatch } from 'redux-thunk'; import { ExportModal } from 'routes/components/export'; -import { Loading } from 'routes/components/page/loading'; import { NoInstances } from 'routes/components/page/noInstances'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import type { ColumnManagementModalOption } from 'routes/details/components/columnManagement'; import { ColumnManagementModal, initHiddenColumns } from 'routes/details/components/columnManagement'; -import { styles } from 'routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; import { getExcludeTagKey, getFilterByTagKey } from 'routes/utils/groupBy'; @@ -29,6 +28,7 @@ import { reportActions, reportSelectors } from 'store/reports'; import { useQueryFromRoute, useQueryState } from 'utils/hooks'; import { accountKey, logicalAndPrefix, orgUnitIdKey, regionKey, serviceKey } from 'utils/props'; +import { styles } from './instances.styles'; import { InstancesTable, InstanceTableColumnIds } from './instancesTable'; import { InstancesToolbar } from './instancesToolbar'; @@ -314,19 +314,21 @@ const Instances: React.FC = ({ costType, currency }) => { const computedItems = getComputedItems(); return ( - <> - {getExportModal(computedItems)} - {getColumnManagementModal()} - {getToolbar(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - - ) : ( - <> - {getTable()} -
{getPagination(isDisabled, true)}
- - )} - + + + {getExportModal(computedItems)} + {getColumnManagementModal()} + {getToolbar(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + + ) : ( + <> + {getTable()} +
{getPagination(isDisabled, true)}
+ + )} + + ); }; diff --git a/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx b/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx index 2903c3e3b..57784f33e 100644 --- a/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx +++ b/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { AwsQuery } from 'api/queries/awsQuery'; import { getQuery } from 'api/queries/query'; import { ResourcePathsType } from 'api/resources/resource'; @@ -52,7 +52,7 @@ interface InstancesToolbarDispatchProps { } interface InstancesToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type InstancesToolbarProps = InstancesToolbarOwnProps & @@ -96,7 +96,7 @@ export class InstancesToolbarBase extends React.Component { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { hideAccount, hideRegion, hideTags, intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/awsDetails/awsDetails.styles.ts b/src/routes/details/awsDetails/awsDetails.styles.ts index e9d9bd507..45bbb413e 100644 --- a/src/routes/details/awsDetails/awsDetails.styles.ts +++ b/src/routes/details/awsDetails/awsDetails.styles.ts @@ -1,30 +1,15 @@ -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_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 = { - awsDetails: { - minHeight: '100%', + alert: { + marginBottom: t_global_spacer_lg.value, }, - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/awsDetails/awsDetails.tsx b/src/routes/details/awsDetails/awsDetails.tsx index c27e37963..5637cf2ca 100644 --- a/src/routes/details/awsDetails/awsDetails.tsx +++ b/src/routes/details/awsDetails/awsDetails.tsx @@ -1,6 +1,6 @@ import 'routes/components/dataTable/dataTable.scss'; -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { AwsQuery } from 'api/queries/awsQuery'; @@ -20,6 +20,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -423,45 +424,48 @@ class AwsDetails extends React.Component { } return ( -
- handleOnCostTypeSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> -
-
+ <> + + handleOnCostTypeSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + + + {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( )} - {this.getToolbar(computedItems)} -
- {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - - ) : ( - <> -
{this.getTable()}
-
-
{this.getPagination(isDisabled, true)}
-
- - )} -
-
+ + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + + ) : ( + <> + {this.getTable()} +
{this.getPagination(isDisabled, true)}
+ + )} + + + + ); } } diff --git a/src/routes/details/awsDetails/detailsHeader.styles.ts b/src/routes/details/awsDetails/detailsHeader.styles.ts index d55ff51cc..30cfada2a 100644 --- a/src/routes/details/awsDetails/detailsHeader.styles.ts +++ b/src/routes/details/awsDetails/detailsHeader.styles.ts @@ -1,12 +1,11 @@ -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_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_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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -15,18 +14,14 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/awsDetails/detailsHeader.tsx b/src/routes/details/awsDetails/detailsHeader.tsx index f29878aa1..f63ab4d85 100644 --- a/src/routes/details/awsDetails/detailsHeader.tsx +++ b/src/routes/details/awsDetails/detailsHeader.tsx @@ -128,7 +128,7 @@ class DetailsHeaderBase extends React.Component { const hasCost = report?.meta?.total?.cost?.total; return ( -
+
diff --git a/src/routes/details/awsDetails/detailsToolbar.tsx b/src/routes/details/awsDetails/detailsToolbar.tsx index d51d96132..45707427a 100644 --- a/src/routes/details/awsDetails/detailsToolbar.tsx +++ b/src/routes/details/awsDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { Org } from 'api/orgs/org'; import { OrgPathsType, OrgType } from 'api/orgs/org'; import type { AwsQuery } from 'api/queries/awsQuery'; @@ -61,7 +61,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -112,7 +112,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, orgReport, resourceReport, tagReport } = this.props; const options = [ diff --git a/src/routes/details/azureDetails/azureDetails.styles.ts b/src/routes/details/azureDetails/azureDetails.styles.ts index 805571cde..45bbb413e 100644 --- a/src/routes/details/azureDetails/azureDetails.styles.ts +++ b/src/routes/details/azureDetails/azureDetails.styles.ts @@ -1,31 +1,15 @@ -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_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 = { - azureDetails: { - minHeight: '100%', + alert: { + marginBottom: t_global_spacer_lg.value, }, - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/azureDetails/azureDetails.tsx b/src/routes/details/azureDetails/azureDetails.tsx index 049562495..1a4172734 100644 --- a/src/routes/details/azureDetails/azureDetails.tsx +++ b/src/routes/details/azureDetails/azureDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { AzureQuery } from 'api/queries/azureQuery'; @@ -18,6 +18,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -381,43 +382,46 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState> } return ( - <div style={styles.azureDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/details/azureDetails/detailsHeader.styles.ts b/src/routes/details/azureDetails/detailsHeader.styles.ts index d55ff51cc..30cfada2a 100644 --- a/src/routes/details/azureDetails/detailsHeader.styles.ts +++ b/src/routes/details/azureDetails/detailsHeader.styles.ts @@ -1,12 +1,11 @@ -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_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_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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -15,18 +14,14 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/azureDetails/detailsHeader.tsx b/src/routes/details/azureDetails/detailsHeader.tsx index b7d9166eb..9c1585ccf 100644 --- a/src/routes/details/azureDetails/detailsHeader.tsx +++ b/src/routes/details/azureDetails/detailsHeader.tsx @@ -112,7 +112,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> { const hasCost = report?.meta?.total?.cost?.total; return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> <FlexItem> <Title headingLevel="h1" style={styles.title} size={TitleSizes['2xl']}> diff --git a/src/routes/details/azureDetails/detailsToolbar.tsx b/src/routes/details/azureDetails/detailsToolbar.tsx index 0b9559de6..47d75caa6 100644 --- a/src/routes/details/azureDetails/detailsToolbar.tsx +++ b/src/routes/details/azureDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { AzureQuery } from 'api/queries/azureQuery'; import { getQuery } from 'api/queries/azureQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -47,7 +47,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -90,7 +90,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/components/breakdown/breakdown.styles.ts b/src/routes/details/components/breakdown/breakdown.styles.ts index 3f3d7061e..3a513b32c 100644 --- a/src/routes/details/components/breakdown/breakdown.styles.ts +++ b/src/routes/details/components/breakdown/breakdown.styles.ts @@ -1,11 +1,7 @@ -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; import type React from 'react'; export const styles = { - content: { - paddingBottom: global_spacer_lg.value, - paddingLeft: global_spacer_lg.value, - paddingRight: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/breakdown/breakdownBase.tsx b/src/routes/details/components/breakdown/breakdownBase.tsx index 7b488e1db..73ed6b233 100644 --- a/src/routes/details/components/breakdown/breakdownBase.tsx +++ b/src/routes/details/components/breakdown/breakdownBase.tsx @@ -1,4 +1,4 @@ -import { Tab, TabContent, Tabs, TabTitleText } from '@patternfly/react-core'; +import { PageSection, Tab, TabContent, Tabs, TabTitleText } from '@patternfly/react-core'; import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; import type { Providers } from 'api/providers'; import type { ProviderType } from 'api/providers'; @@ -182,17 +182,13 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> { <> <TabTitleText>{this.getTabTitle(tab)}</TabTitleText> {showBadge && ( - <span> - { - <AsyncComponent - scope="costManagementMfe" - appName="cost-management-mfe" - module="./MfeOptimizationsBadge" - cluster={queryState?.filter_by?.cluster ? queryState.filter_by.cluster : undefined} - project={groupBy === 'project' ? groupByValue : undefined} - /> - } - </span> + <AsyncComponent + scope="costManagementMfe" + appName="cost-management-mfe" + module="./MfeOptimizationsBadge" + cluster={queryState?.filter_by?.cluster ? queryState.filter_by.cluster : undefined} + project={groupBy === 'project' ? groupByValue : undefined} + /> )} </> } @@ -335,35 +331,37 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> { return ( <> - <BreakdownHeader - breadcrumbLabel={breadcrumbLabel} - breadcrumbPath={ - router?.location?.state?.details?.breadcrumbPath - ? router.location.state.details.breadcrumbPath - : breadcrumbPath - } - clusterInfoComponent={clusterInfoComponent} - dataDetailsComponent={dataDetailsComponent} - costDistribution={costDistribution} - costType={costType} - currency={currency} - description={description} - detailsURL={detailsURL} - groupBy={groupBy} - onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router, router.location.state)} - onCostTypeSelect={() => handleOnCostTypeSelect(query, router, router.location.state)} - onCurrencySelect={() => handleOnCurrencySelect(query, router, router.location.state)} - query={query} - report={report} - showCostDistribution={showCostDistribution && !(optimizationsComponent && activeTabKey === 2)} - showCostType={showCostType} - showCurrency={!(optimizationsComponent && activeTabKey === 2)} - tabs={this.getTabs(availableTabs)} - tagPathsType={tagPathsType} - timeScopeValue={timeScopeValue} - title={title} - /> - <div style={styles.content}>{this.getTabContent(availableTabs)}</div> + <PageSection style={styles.headerContainer}> + <BreakdownHeader + breadcrumbLabel={breadcrumbLabel} + breadcrumbPath={ + router?.location?.state?.details?.breadcrumbPath + ? router.location.state.details.breadcrumbPath + : breadcrumbPath + } + clusterInfoComponent={clusterInfoComponent} + dataDetailsComponent={dataDetailsComponent} + costDistribution={costDistribution} + costType={costType} + currency={currency} + description={description} + detailsURL={detailsURL} + groupBy={groupBy} + onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router, router.location.state)} + onCostTypeSelect={() => handleOnCostTypeSelect(query, router, router.location.state)} + onCurrencySelect={() => handleOnCurrencySelect(query, router, router.location.state)} + query={query} + report={report} + showCostDistribution={showCostDistribution && !(optimizationsComponent && activeTabKey === 2)} + showCostType={showCostType} + showCurrency={!(optimizationsComponent && activeTabKey === 2)} + tabs={this.getTabs(availableTabs)} + tagPathsType={tagPathsType} + timeScopeValue={timeScopeValue} + title={title} + /> + </PageSection> + <PageSection>{this.getTabContent(availableTabs)}</PageSection> </> ); } diff --git a/src/routes/details/components/breakdown/breakdownHeader.scss b/src/routes/details/components/breakdown/breakdownHeader.scss index 44af56837..524f6a585 100644 --- a/src/routes/details/components/breakdown/breakdownHeader.scss +++ b/src/routes/details/components/breakdown/breakdownHeader.scss @@ -1,11 +1,11 @@ .breadcrumbOverride { - .pf-v5-c-breadcrumb__item:not(:last-child) { - margin-left: var(--pf-v5-c-breadcrumb__item--MarginRight); + .pf-v6-c-breadcrumb__item:not(:last-child) { + margin-left: var(--pf-t--global--spacer--sm); margin-right: 0; } - .pf-v5-c-breadcrumb__item-divider { + .pf-v6-c-breadcrumb__item-divider { margin-left: 0; - margin-right: var(--pf-v5-c-breadcrumb__item-divider--MarginLeft); + margin-right: var(--pf-t--global--spacer--sm); } } diff --git a/src/routes/details/components/breakdown/breakdownHeader.styles.ts b/src/routes/details/components/breakdown/breakdownHeader.styles.ts index a971ab86e..0e2a425c1 100644 --- a/src/routes/details/components/breakdown/breakdownHeader.styles.ts +++ b/src/routes/details/components/breakdown/breakdownHeader.styles.ts @@ -1,10 +1,9 @@ -import global_BackgroundColor_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_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_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 global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +import t_global_color_disabled_100 from '@patternfly/react-tokens/dist/js/t_global_color_disabled_100'; +import t_global_font_size_body_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_body_sm'; +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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { @@ -12,11 +11,11 @@ export const styles = { marginLeft: '-17px', }, costDistribution: { - marginTop: global_spacer_sm.var, - paddingBottom: global_spacer_sm.var, + marginTop: t_global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, costLabel: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, costValue: { marginTop: 0, @@ -27,16 +26,16 @@ export const styles = { textAlign: 'right', }, costType: { - marginTop: global_spacer_sm.var, - paddingBottom: global_spacer_sm.var, + marginTop: t_global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, description: { - color: global_disabled_color_100.value, - fontSize: global_FontSize_xs.value, + color: t_global_color_disabled_100.value, + fontSize: t_global_font_size_body_sm.value, marginBottom: 0, }, filterChip: { - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, }, filteredBy: { whiteSpace: 'nowrap', @@ -44,14 +43,8 @@ export const styles = { filteredByContainer: { display: 'flex', alignItems: 'center', - marginBottom: global_spacer_sm.var, - marginTop: global_spacer_sm.var, - }, - header: { - backgroundColor: global_BackgroundColor_100.var, - paddingLeft: global_spacer_lg.var, - paddingRight: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, + marginBottom: t_global_spacer_sm.var, + marginTop: t_global_spacer_sm.var, }, headerContent: { alignItems: 'unset', @@ -59,14 +52,15 @@ export const styles = { }, perspectiveContainer: { alignItems: 'unset', - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, paddingLeft: '1px', - paddingTop: global_spacer_xs.var, + paddingTop: t_global_spacer_xs.var, }, tabs: { display: 'flex', }, tag: { - marginLeft: global_spacer_lg.var, + marginLeft: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/breakdown/breakdownHeader.tsx b/src/routes/details/components/breakdown/breakdownHeader.tsx index 541505091..b64287c35 100644 --- a/src/routes/details/components/breakdown/breakdownHeader.tsx +++ b/src/routes/details/components/breakdown/breakdownHeader.tsx @@ -3,10 +3,10 @@ import './breakdownHeader.scss'; import { Button, ButtonVariant, - Chip, - ChipGroup, Flex, FlexItem, + Label, + LabelGroup, Popover, Title, TitleSizes, @@ -125,13 +125,13 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> { const chips: any[] = getChips(filters[key]); return ( <span key={key} style={styles.filterChip}> - <ChipGroup categoryName={getLabel(key)}> + <LabelGroup categoryName={getLabel(key)}> {chips.map((chip, index) => ( - <Chip key={`${key}-${index}`} isReadOnly> + <Label variant="outline" key={`${key}-${index}`}> {chip.node} - </Chip> + </Label> ))} - </ChipGroup> + </LabelGroup> </span> ); } else { @@ -139,13 +139,13 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> { const chips: any[] = getChips(filters[key][key2]); return ( <span key={key2} style={styles.filterChip}> - <ChipGroup categoryName={getLabel(key2)}> + <LabelGroup categoryName={getLabel(key2)}> {chips.map((chip, index) => ( - <Chip key={`${key2}-${index}`} isReadOnly> + <Label variant="outline" key={`${key2}-${index}`}> {chip.node} - </Chip> + </Label> ))} - </ChipGroup> + </LabelGroup> </span> ); }); @@ -163,11 +163,10 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> { bodyContent={<p>{intl.formatMessage(messages.filteredByWarning)}</p>} > <Button + icon={<OutlinedQuestionCircleIcon />} aria-label={intl.formatMessage(messages.overviewInfoButtonArialLabel)} variant={ButtonVariant.plain} - > - <OutlinedQuestionCircleIcon /> - </Button> + ></Button> </Popover> </span> {filterChips} @@ -235,16 +234,16 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> { : groupBy; return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }} style={styles.headerContent}> <FlexItem> <nav aria-label={intl.formatMessage(messages.breakdownBackToDetailsAriaLabel)} className="breadcrumbOverride" > - <ol className="pf-v5-c-breadcrumb__list"> - <li className="pf-v5-c-breadcrumb__item"> - <span className="pf-v5-c-breadcrumb__item-divider"> + <ol className="pf-v6-c-breadcrumb__list"> + <li className="pf-v6-c-breadcrumb__item"> + <span className="pf-v6-c-breadcrumb__item-divider"> <AngleLeftIcon /> </span> {this.getBackToLink(groupByKey)} @@ -302,7 +301,7 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> { </div> </FlexItem> </Flex> - <div> + <div className="pf-v6-c-tabs"> <div style={styles.tabs}> {tabs} <div style={styles.tag}>{showTags && <TagLink id="tags" tagPathsType={tagPathsType} />}</div> diff --git a/src/routes/details/components/columnManagement/columnManagementModal.tsx b/src/routes/details/components/columnManagement/columnManagementModal.tsx index c9ff23eb9..f01aff5ad 100644 --- a/src/routes/details/components/columnManagement/columnManagementModal.tsx +++ b/src/routes/details/components/columnManagement/columnManagementModal.tsx @@ -1,6 +1,8 @@ import { Button, ButtonVariant, + Content, + ContentVariants, DataList, DataListCell, DataListCheck, @@ -8,10 +10,10 @@ import { DataListItemCells, DataListItemRow, Modal, + ModalBody, + ModalFooter, + ModalHeader, ModalVariant, - Text, - TextContent, - TextVariants, } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; @@ -124,58 +126,57 @@ export class ColumnManagementModalBase extends React.Component<ColumnManagementM const { options, intl } = this.props; return ( - <Modal - description={ - <TextContent> - <Text component={TextVariants.p}>{intl.formatMessage(messages.manageColumnsDesc)}</Text> - <Button isInline onClick={this.selectAll} variant="link"> - {intl.formatMessage(messages.selectAll)} - </Button> - </TextContent> - } - // style={styles.modal} - isOpen={this.props.isOpen} - onClose={this.handleClose} - title={intl.formatMessage(messages.manageColumnsTitle)} - variant={ModalVariant.medium} - actions={[ + <Modal isOpen={this.props.isOpen} onClose={this.handleClose} variant={ModalVariant.medium}> + <ModalHeader + description={ + <Content> + <Content component={ContentVariants.p}>{intl.formatMessage(messages.manageColumnsDesc)}</Content> + <Button isInline onClick={this.selectAll} variant="link"> + {intl.formatMessage(messages.selectAll)} + </Button> + </Content> + } + title={intl.formatMessage(messages.manageColumnsTitle)} + /> + <ModalBody> + <DataList + aria-label={intl.formatMessage(messages.manageColumnsAriaLabel)} + id="table-column-management" + isCompact + > + {options.map(option => ( + <DataListItem aria-labelledby={option.value} key={option.value}> + <DataListItemRow> + <DataListCheck + aria-labelledby={`${option.value}Label`} + isChecked={!this.isHidden(option.value)} + name={option.value} + id={option.value} + onChange={this.handleChange} + /> + <DataListItemCells + dataListCells={[ + <DataListCell id={`${option.value}Label`} key="table-column-management-item1"> + <span>{intl.formatMessage(option.label)}</span> + </DataListCell>, + <DataListCell key="table-column-management-item2"> + {option.description && <span>{intl.formatMessage(option.description)}</span>} + </DataListCell>, + ]} + /> + </DataListItemRow> + </DataListItem> + ))} + </DataList> + </ModalBody> + <ModalFooter> <Button key="save" onClick={this.handleSave} variant={ButtonVariant.link}> {intl.formatMessage(messages.save)} - </Button>, + </Button> <Button key="cancel" onClick={this.handleClose} variant={ButtonVariant.link}> {intl.formatMessage(messages.cancel)} - </Button>, - ]} - > - <DataList - aria-label={intl.formatMessage(messages.manageColumnsAriaLabel)} - id="table-column-management" - isCompact - > - {options.map(option => ( - <DataListItem aria-labelledby={option.value} key={option.value}> - <DataListItemRow> - <DataListCheck - aria-labelledby={`${option.value}Label`} - isChecked={!this.isHidden(option.value)} - name={option.value} - id={option.value} - onChange={this.handleChange} - /> - <DataListItemCells - dataListCells={[ - <DataListCell id={`${option.value}Label`} key="table-column-management-item1"> - <span>{intl.formatMessage(option.label)}</span> - </DataListCell>, - <DataListCell key="table-column-management-item2"> - {option.description && <span>{intl.formatMessage(option.description)}</span>} - </DataListCell>, - ]} - /> - </DataListItemRow> - </DataListItem> - ))} - </DataList> + </Button> + </ModalFooter> </Modal> ); } diff --git a/src/routes/details/components/costChart/costChart.styles.ts b/src/routes/details/components/costChart/costChart.styles.ts index 6bdbf0e25..5849c6e65 100644 --- a/src/routes/details/components/costChart/costChart.styles.ts +++ b/src/routes/details/components/costChart/costChart.styles.ts @@ -1,20 +1,20 @@ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; -import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; +import t_global_font_weight_body_bold_legacy from '@patternfly/react-tokens/dist/js/t_global_font_weight_body_bold_legacy'; +import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const chartStyles = { chartHeight: 150, chartWidth: 475, subTitle: { - fontWeight: global_FontWeight_bold.value as any, + fontWeight: t_global_font_weight_body_bold_legacy.value as any, }, }; export const styles = { chartSkeleton: { height: '125px', - marginBottom: global_spacer_md.value, - marginTop: global_spacer_3xl.value, + marginBottom: t_global_spacer_md.value, + marginTop: t_global_spacer_3xl.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/costChart/costChart.tsx b/src/routes/details/components/costChart/costChart.tsx index bcb4eabaa..72e39c469 100644 --- a/src/routes/details/components/costChart/costChart.tsx +++ b/src/routes/details/components/costChart/costChart.tsx @@ -1,4 +1,4 @@ -import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; import { Skeleton } from '@patternfly/react-core'; import type { Report } from 'api/reports/report'; import messages from 'locales/messages'; diff --git a/src/routes/details/components/costOverview/costOverviewBase.tsx b/src/routes/details/components/costOverview/costOverviewBase.tsx index 0cae77a3c..574a97305 100644 --- a/src/routes/details/components/costOverview/costOverviewBase.tsx +++ b/src/routes/details/components/costOverview/costOverviewBase.tsx @@ -111,9 +111,7 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> { </> } > - <Button variant={ButtonVariant.plain}> - <OutlinedQuestionCircleIcon style={styles.info} /> - </Button> + <Button icon={<OutlinedQuestionCircleIcon style={styles.info} />} variant={ButtonVariant.plain}></Button> </Popover> @@ -161,9 +159,7 @@ class CostOverviewsBase extends React.Component { } > - + diff --git a/src/routes/details/components/historicalData/historicalChart.styles.ts b/src/routes/details/components/historicalData/historicalChart.styles.ts index 91842f46d..df3414b93 100644 --- a/src/routes/details/components/historicalData/historicalChart.styles.ts +++ b/src/routes/details/components/historicalData/historicalChart.styles.ts @@ -1,7 +1,7 @@ -import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl'; -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_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +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 chartStyles = { @@ -10,25 +10,25 @@ export const chartStyles = { export const styles = { chartContainer: { - marginLeft: global_spacer_lg.value, + marginLeft: t_global_spacer_lg.value, }, chartSkeleton: { height: '125px', - marginBottom: global_spacer_md.value, - marginTop: global_spacer_3xl.value, + marginBottom: t_global_spacer_md.value, + marginTop: t_global_spacer_3xl.value, }, costChart: { - marginBottom: global_spacer_sm.value, - marginTop: global_spacer_sm.value, + marginBottom: t_global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, legendSkeleton: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, trendChart: { - marginBottom: global_spacer_sm.value, - marginTop: global_spacer_sm.value, + marginBottom: t_global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, usageChart: { - marginTop: global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/overheadCostChart/overheadCostChart.styles.ts b/src/routes/details/components/overheadCostChart/overheadCostChart.styles.ts index b70708a55..e0da166f8 100644 --- a/src/routes/details/components/overheadCostChart/overheadCostChart.styles.ts +++ b/src/routes/details/components/overheadCostChart/overheadCostChart.styles.ts @@ -1,20 +1,20 @@ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; -import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; +import t_global_font_weight_body_bold_legacy from '@patternfly/react-tokens/dist/js/t_global_font_weight_body_bold_legacy'; +import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const chartStyles = { chartHeight: 150, chartWidth: 525, subTitle: { - fontWeight: global_FontWeight_bold.value as any, + fontWeight: t_global_font_weight_body_bold_legacy.value as any, }, }; export const styles = { chartSkeleton: { height: '125px', - marginBottom: global_spacer_md.value, - marginTop: global_spacer_3xl.value, + marginBottom: t_global_spacer_md.value, + marginTop: t_global_spacer_3xl.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/overheadCostChart/overheadCostChart.tsx b/src/routes/details/components/overheadCostChart/overheadCostChart.tsx index f1031bd4a..3ddf968d2 100644 --- a/src/routes/details/components/overheadCostChart/overheadCostChart.tsx +++ b/src/routes/details/components/overheadCostChart/overheadCostChart.tsx @@ -1,4 +1,4 @@ -import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; import { Skeleton } from '@patternfly/react-core'; import type { Report } from 'api/reports/report'; import messages from 'locales/messages'; diff --git a/src/routes/details/components/providerDetails/components/cloudData.tsx b/src/routes/details/components/providerDetails/components/cloudData.tsx index f8fbc4fe2..52214af6c 100644 --- a/src/routes/details/components/providerDetails/components/cloudData.tsx +++ b/src/routes/details/components/providerDetails/components/cloudData.tsx @@ -1,4 +1,4 @@ -import { ProgressStep, ProgressStepper, Text, TextContent, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants, ProgressStep, ProgressStepper } from '@patternfly/react-core'; import type { Provider } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; @@ -26,9 +26,9 @@ const CloudData: React.FC = ({ provider }: CloudDataProps) => { return ( <> - - {intl.formatMessage(messages.dataDetailsCloudData)} - + + {intl.formatMessage(messages.dataDetailsCloudData)} + = ({ provider }: ClusterDataProps) return ( <> - - {intl.formatMessage(messages.dataDetailsClusterData)} - + + {intl.formatMessage(messages.dataDetailsClusterData)} + = ({ provider, providerType return ( <> - - {title} - + + {title} + { const { isOpen, title } = this.props; return ( - - + + + + + ); } diff --git a/src/routes/details/components/pvcChart/modal/pvcToolbar.tsx b/src/routes/details/components/pvcChart/modal/pvcToolbar.tsx index d5c352438..f95e98d98 100644 --- a/src/routes/details/components/pvcChart/modal/pvcToolbar.tsx +++ b/src/routes/details/components/pvcChart/modal/pvcToolbar.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 messages from 'locales/messages'; import React from 'react'; @@ -18,7 +18,7 @@ interface PvcToolbarOwnProps { } interface PvcToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type PvcToolbarProps = PvcToolbarOwnProps & WrappedComponentProps; @@ -33,7 +33,7 @@ class PvcToolbarBase extends React.Component { }); } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl } = this.props; const options = [ diff --git a/src/routes/details/components/pvcChart/pvc.scss b/src/routes/details/components/pvcChart/pvc.scss index 512b84c1e..7c2b72e9a 100644 --- a/src/routes/details/components/pvcChart/pvc.scss +++ b/src/routes/details/components/pvcChart/pvc.scss @@ -1,5 +1,5 @@ .textContentOverride { - &.pf-v5-c-content dl { + &.pf-v6-c-content dl { grid-column-gap: 1rem; } } diff --git a/src/routes/details/components/pvcChart/pvcChart.styles.ts b/src/routes/details/components/pvcChart/pvcChart.styles.ts index 37316a3f7..69b1f252b 100644 --- a/src/routes/details/components/pvcChart/pvcChart.styles.ts +++ b/src/routes/details/components/pvcChart/pvcChart.styles.ts @@ -1,30 +1,30 @@ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; -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_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; +import t_global_font_weight_body_bold_legacy from '@patternfly/react-tokens/dist/js/t_global_font_weight_body_bold_legacy'; +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_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl'; import type React from 'react'; export const styles = { chartContainer: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, chartSkeleton: { - marginBottom: global_spacer_md.value, + marginBottom: t_global_spacer_md.value, }, capacity: { - fontWeight: global_FontWeight_bold.value as any, + fontWeight: t_global_font_weight_body_bold_legacy.value as any, }, description: { display: 'flex', justifyContent: 'space-between', - marginBottom: global_spacer_md.value, - marginRight: global_spacer_xl.value, + marginBottom: t_global_spacer_md.value, + marginRight: t_global_spacer_xl.value, }, divider: { - marginBottom: global_spacer_lg.value, - marginTop: global_spacer_lg.value, + marginBottom: t_global_spacer_lg.value, + marginTop: t_global_spacer_lg.value, }, legendSkeleton: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/pvcChart/pvcChart.tsx b/src/routes/details/components/pvcChart/pvcChart.tsx index 2a26fe4eb..9bcd8916c 100644 --- a/src/routes/details/components/pvcChart/pvcChart.tsx +++ b/src/routes/details/components/pvcChart/pvcChart.tsx @@ -1,16 +1,8 @@ import 'routes/components/charts/common/chart.scss'; import './pvc.scss'; -import { ChartBullet } from '@patternfly/react-charts'; -import { - Divider, - Skeleton, - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, -} from '@patternfly/react-core'; +import { ChartBullet } from '@patternfly/react-charts/victory'; +import { Content, ContentVariants, Divider, Skeleton } from '@patternfly/react-core'; import type { OcpQuery } from 'api/queries/ocpQuery'; import { parseQuery } from 'api/queries/ocpQuery'; import type { Query } from 'api/queries/query'; @@ -219,26 +211,22 @@ class PvcChartBase extends React.Component { return (
- - - - {intl.formatMessage(messages.names, { count: 1 })} - - {item.persistent_volume_claim} - {intl.formatMessage(messages.cluster)} - {item.clusters ? item.clusters[0] : null} - - - - -   -   - {intl.formatMessage(messages.storageClass)} - - {item.storage_class ? item.storage_class[0] : null} - - - + + + {intl.formatMessage(messages.names, { count: 1 })} + {item.persistent_volume_claim} + {intl.formatMessage(messages.cluster)} + {item.clusters ? item.clusters[0] : null} + + + + +   +   + {intl.formatMessage(messages.storageClass)} + {item.storage_class ? item.storage_class[0] : null} + +
); }; diff --git a/src/routes/details/components/summary/modal/summaryModal.styles.ts b/src/routes/details/components/summary/modal/summaryModal.styles.ts index e5ced047f..68077daac 100644 --- a/src/routes/details/components/summary/modal/summaryModal.styles.ts +++ b/src/routes/details/components/summary/modal/summaryModal.styles.ts @@ -1,9 +1,9 @@ -import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; +import t_global_spacer_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl'; import type React from 'react'; export const styles = { mainContent: { - marginTop: global_spacer_xl.value, + marginTop: t_global_spacer_xl.value, }, subTitle: { textAlign: 'right', diff --git a/src/routes/details/components/summary/modal/summaryModal.tsx b/src/routes/details/components/summary/modal/summaryModal.tsx index b7e9e0c4a..7d58ac830 100644 --- a/src/routes/details/components/summary/modal/summaryModal.tsx +++ b/src/routes/details/components/summary/modal/summaryModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import type { ReportPathsType } from 'api/reports/report'; import messages from 'locales/messages'; @@ -43,23 +43,22 @@ class SummaryModalBase extends React.Component { this.props; return ( - - + + + + ); } diff --git a/src/routes/details/components/summary/summaryCard.styles.ts b/src/routes/details/components/summary/summaryCard.styles.ts index 8934e2ab4..d40b42c20 100644 --- a/src/routes/details/components/summary/summaryCard.styles.ts +++ b/src/routes/details/components/summary/summaryCard.styles.ts @@ -1,10 +1,10 @@ -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 = { card: {}, skeleton: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, viewAllContainer: { marginLeft: '-15px', diff --git a/src/routes/details/components/tag/modal/tagContent.styles.ts b/src/routes/details/components/tag/modal/tagContent.styles.ts index 8e64e6a31..78dc3f7ba 100644 --- a/src/routes/details/components/tag/modal/tagContent.styles.ts +++ b/src/routes/details/components/tag/modal/tagContent.styles.ts @@ -1,12 +1,12 @@ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; -import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg'; +import t_global_font_weight_body_bold_legacy from '@patternfly/react-tokens/dist/js/t_global_font_weight_body_bold_legacy'; +import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; import type React from 'react'; export const styles = { dataListHeading: { - fontWeight: global_FontWeight_bold.value as any, + fontWeight: t_global_font_weight_body_bold_legacy.value as any, }, groupByHeading: { - marginBottom: global_spacer_lg.value, + marginBottom: t_global_spacer_lg.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/tag/modal/tagModal.styles.ts b/src/routes/details/components/tag/modal/tagModal.styles.ts index 68374c31f..c8f6a1997 100644 --- a/src/routes/details/components/tag/modal/tagModal.styles.ts +++ b/src/routes/details/components/tag/modal/tagModal.styles.ts @@ -1,9 +1,9 @@ -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; +import t_global_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; import type React from 'react'; export const styles = { subTitle: { - marginTop: global_spacer_2xl.value, + marginTop: t_global_spacer_2xl.value, textAlign: 'right', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/tag/modal/tagModal.tsx b/src/routes/details/components/tag/modal/tagModal.tsx index da4bd85b5..437d8b7c4 100644 --- a/src/routes/details/components/tag/modal/tagModal.tsx +++ b/src/routes/details/components/tag/modal/tagModal.tsx @@ -1,4 +1,4 @@ -import { Modal } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { getQuery, parseQuery } from 'api/queries/query'; import type { Tag, TagData, TagPathsType } from 'api/tags/tag'; @@ -98,18 +98,16 @@ class TagModalBase extends React.Component { const groupByValue = query && query.filter && query.filter.account ? query.filter.account : this.props.groupByValue; return ( - - + + + + + ); } diff --git a/src/routes/details/components/tag/tag.styles.ts b/src/routes/details/components/tag/tag.styles.ts index 939c017bc..57aeaaa87 100644 --- a/src/routes/details/components/tag/tag.styles.ts +++ b/src/routes/details/components/tag/tag.styles.ts @@ -1,13 +1,13 @@ -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 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 type React from 'react'; export const styles = { tagLink: { - marginLeft: global_spacer_sm.value, + marginLeft: t_global_spacer_sm.value, }, tagsContainer: { - marginRight: global_spacer_3xl.value, - marginTop: global_spacer_sm.value, + marginRight: t_global_spacer_3xl.value, + marginTop: t_global_spacer_sm.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/usageChart/usageChart.styles.ts b/src/routes/details/components/usageChart/usageChart.styles.ts index 33eebc5a6..bb57b7d11 100644 --- a/src/routes/details/components/usageChart/usageChart.styles.ts +++ b/src/routes/details/components/usageChart/usageChart.styles.ts @@ -1,21 +1,21 @@ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/js/global_FontWeight_bold'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; +import t_global_font_weight_body_bold_legacy from '@patternfly/react-tokens/dist/js/t_global_font_weight_body_bold_legacy'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { chartContainer: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, chartSkeleton: { - marginBottom: global_spacer_md.value, + marginBottom: t_global_spacer_md.value, }, capacity: { - fontWeight: global_FontWeight_bold.value as any, + fontWeight: t_global_font_weight_body_bold_legacy.value as any, }, legendSkeleton: { - marginTop: global_spacer_md.value, + marginTop: t_global_spacer_md.value, }, subtitle: { - marginBottom: global_spacer_md.value, + marginBottom: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/usageChart/usageChart.tsx b/src/routes/details/components/usageChart/usageChart.tsx index bd275fa35..1e6a2be26 100644 --- a/src/routes/details/components/usageChart/usageChart.tsx +++ b/src/routes/details/components/usageChart/usageChart.tsx @@ -1,6 +1,6 @@ import 'routes/components/charts/common/chart.scss'; -import { ChartBullet } from '@patternfly/react-charts'; +import { ChartBullet } from '@patternfly/react-charts/victory'; import { Grid, GridItem, Skeleton } from '@patternfly/react-core'; import type { OcpQuery } from 'api/queries/ocpQuery'; import { parseQuery } from 'api/queries/ocpQuery'; diff --git a/src/routes/details/gcpDetails/detailsHeader.styles.ts b/src/routes/details/gcpDetails/detailsHeader.styles.ts index d55ff51cc..30cfada2a 100644 --- a/src/routes/details/gcpDetails/detailsHeader.styles.ts +++ b/src/routes/details/gcpDetails/detailsHeader.styles.ts @@ -1,12 +1,11 @@ -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_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_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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -15,18 +14,14 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/gcpDetails/detailsHeader.tsx b/src/routes/details/gcpDetails/detailsHeader.tsx index dbfd4b42b..50df3c9cc 100644 --- a/src/routes/details/gcpDetails/detailsHeader.tsx +++ b/src/routes/details/gcpDetails/detailsHeader.tsx @@ -113,7 +113,7 @@ class DetailsHeaderBase extends React.Component { const hasCost = report?.meta?.total?.cost?.total; return ( -
+
diff --git a/src/routes/details/gcpDetails/detailsToolbar.tsx b/src/routes/details/gcpDetails/detailsToolbar.tsx index 196559e6d..5f57db817 100644 --- a/src/routes/details/gcpDetails/detailsToolbar.tsx +++ b/src/routes/details/gcpDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { GcpQuery } from 'api/queries/gcpQuery'; import { getQuery } from 'api/queries/gcpQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -48,7 +48,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -91,7 +91,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/gcpDetails/gcpDetails.styles.ts b/src/routes/details/gcpDetails/gcpDetails.styles.ts index 7ac804174..45bbb413e 100644 --- a/src/routes/details/gcpDetails/gcpDetails.styles.ts +++ b/src/routes/details/gcpDetails/gcpDetails.styles.ts @@ -1,29 +1,15 @@ -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_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 = { - gcpDetails: { - minHeight: '100%', + alert: { + marginBottom: t_global_spacer_lg.value, }, - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - padding: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/gcpDetails/gcpDetails.tsx b/src/routes/details/gcpDetails/gcpDetails.tsx index b14e10925..5b8c89d07 100644 --- a/src/routes/details/gcpDetails/gcpDetails.tsx +++ b/src/routes/details/gcpDetails/gcpDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { GcpQuery } from 'api/queries/gcpQuery'; @@ -18,6 +18,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -381,43 +382,46 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> { } return ( - <div style={styles.gcpDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/details/ibmDetails/detailsHeader.styles.ts b/src/routes/details/ibmDetails/detailsHeader.styles.ts index d55ff51cc..30cfada2a 100644 --- a/src/routes/details/ibmDetails/detailsHeader.styles.ts +++ b/src/routes/details/ibmDetails/detailsHeader.styles.ts @@ -1,12 +1,11 @@ -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_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_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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -15,18 +14,14 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ibmDetails/detailsHeader.tsx b/src/routes/details/ibmDetails/detailsHeader.tsx index 625b4fdb0..2bf16fd29 100644 --- a/src/routes/details/ibmDetails/detailsHeader.tsx +++ b/src/routes/details/ibmDetails/detailsHeader.tsx @@ -113,7 +113,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> { const hasCost = report?.meta?.total?.cost?.total; return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> <FlexItem> <Title headingLevel="h1" style={styles.title} size={TitleSizes['2xl']}> diff --git a/src/routes/details/ibmDetails/detailsToolbar.tsx b/src/routes/details/ibmDetails/detailsToolbar.tsx index 3a4ca85da..243b6175e 100644 --- a/src/routes/details/ibmDetails/detailsToolbar.tsx +++ b/src/routes/details/ibmDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { IbmQuery } from 'api/queries/ibmQuery'; import { getQuery } from 'api/queries/ibmQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -48,7 +48,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -91,7 +91,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/ibmDetails/ibmDetails.styles.ts b/src/routes/details/ibmDetails/ibmDetails.styles.ts index c22caf82f..45bbb413e 100644 --- a/src/routes/details/ibmDetails/ibmDetails.styles.ts +++ b/src/routes/details/ibmDetails/ibmDetails.styles.ts @@ -1,30 +1,15 @@ -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_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 = { - gcpDetails: { - minHeight: '100%', + alert: { + marginBottom: t_global_spacer_lg.value, }, - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ibmDetails/ibmDetails.tsx b/src/routes/details/ibmDetails/ibmDetails.tsx index fbfdb3c2e..2f925a4d3 100644 --- a/src/routes/details/ibmDetails/ibmDetails.tsx +++ b/src/routes/details/ibmDetails/ibmDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { IbmQuery } from 'api/queries/ibmQuery'; @@ -18,6 +18,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedIbmReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -383,43 +384,46 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> { } return ( - <div style={styles.ibmDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/details/ociDetails/detailsHeader.styles.ts b/src/routes/details/ociDetails/detailsHeader.styles.ts index d55ff51cc..30cfada2a 100644 --- a/src/routes/details/ociDetails/detailsHeader.styles.ts +++ b/src/routes/details/ociDetails/detailsHeader.styles.ts @@ -1,12 +1,11 @@ -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_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_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 t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -15,18 +14,14 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ociDetails/detailsHeader.tsx b/src/routes/details/ociDetails/detailsHeader.tsx index 3d4324bfb..873195a27 100644 --- a/src/routes/details/ociDetails/detailsHeader.tsx +++ b/src/routes/details/ociDetails/detailsHeader.tsx @@ -112,7 +112,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> { const hasCost = report?.meta?.total?.cost?.total; return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> <FlexItem> <Title headingLevel="h1" style={styles.title} size={TitleSizes['2xl']}> diff --git a/src/routes/details/ociDetails/detailsToolbar.tsx b/src/routes/details/ociDetails/detailsToolbar.tsx index a7e5259cd..d024a11a7 100644 --- a/src/routes/details/ociDetails/detailsToolbar.tsx +++ b/src/routes/details/ociDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { OciQuery } from 'api/queries/ociQuery'; import { getQuery } from 'api/queries/ociQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -47,7 +47,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -90,7 +90,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/ociDetails/ociDetails.styles.ts b/src/routes/details/ociDetails/ociDetails.styles.ts index 451ce3248..45bbb413e 100644 --- a/src/routes/details/ociDetails/ociDetails.styles.ts +++ b/src/routes/details/ociDetails/ociDetails.styles.ts @@ -1,31 +1,15 @@ -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_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 = { - ociDetails: { - minHeight: '100%', + alert: { + marginBottom: t_global_spacer_lg.value, }, - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ociDetails/ociDetails.tsx b/src/routes/details/ociDetails/ociDetails.tsx index 402134f38..982846591 100644 --- a/src/routes/details/ociDetails/ociDetails.tsx +++ b/src/routes/details/ociDetails/ociDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { OciQuery } from 'api/queries/ociQuery'; @@ -18,6 +18,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOciReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -382,43 +383,46 @@ class OciDetails extends React.Component<OciDetailsProps, OciDetailsState> { } return ( - <div style={styles.ociDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts index c20bdbf4e..e06170b49 100644 --- a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts +++ b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts @@ -1,21 +1,21 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import global_warning_color_100 from '@patternfly/react-tokens/dist/js/global_warning_color_100'; +import t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/js/t_global_color_status_warning_100'; +import t_global_font_size_body_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_body_sm'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { clusterInfoButton: { - fontSize: global_FontSize_xs.value, + fontSize: t_global_font_size_body_sm.value, }, loading: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, }, spacingRight: { - marginRight: global_spacer_md.value, + marginRight: t_global_spacer_md.value, }, updateAvailable: { - color: global_warning_color_100.value, + color: t_global_color_status_warning_100.value, paddingLeft: '5px', }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.scss b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.scss index 21831c538..e51e40eb2 100644 --- a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.scss +++ b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.scss @@ -1,7 +1,7 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .textContentOverride { - &.pf-v5-c-content ul { - padding-left: var(--pf-v5-global--spacer--lg); + &.pf-v6-c-content ul { + padding-left: var(--pf-t--global--spacer--lg); } } diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.tsx b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.tsx index 82ef83ed1..a050bbea6 100644 --- a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.tsx +++ b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoContent.tsx @@ -1,6 +1,6 @@ import './clusterInfoContent.scss'; -import { Icon, Text, TextContent, TextList, TextListItem, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants, Icon } from '@patternfly/react-core'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; @@ -60,17 +60,17 @@ const ClusterInfoContent: React.FC<ClusterInfoContentProps> = ({ clusterId }: Cl const release = getReleasePath(); return ( - <TextContent className="textContentOverride"> - <Text component={TextVariants.h3}>{intl.formatMessage(messages.clusterId)}</Text> - <TextList isPlain> - <TextListItem> + <Content className="textContentOverride"> + <Content component={ContentVariants.h3}>{intl.formatMessage(messages.clusterId)}</Content> + <Content component="ul" isPlainList> + <Content component="li"> <span style={styles.spacingRight}>{clusterId}</span> <a href={`${release}/openshift/details/${clusterId}`}>{intl.formatMessage(messages.ocpClusterDetails)}</a> - </TextListItem> - </TextList> - <Text component={TextVariants.h3}>{intl.formatMessage(messages.metricsOperatorVersion)}</Text> - <TextList isPlain> - <TextListItem> + </Content> + </Content> + <Content component={ContentVariants.h3}>{intl.formatMessage(messages.metricsOperatorVersion)}</Content> + <Content component="ul" isPlainList> + <Content component="li"> <span style={styles.spacingRight}>{clusterProvider?.additional_context?.operator_version}</span> {clusterProvider?.additional_context?.operator_update_available && ( <> @@ -80,17 +80,17 @@ const ClusterInfoContent: React.FC<ClusterInfoContentProps> = ({ clusterId }: Cl <span style={styles.updateAvailable}>{intl.formatMessage(messages.updateAvailable)}</span> </> )} - </TextListItem> - </TextList> + </Content> + </Content> {clusterProvider && ( <> - <Text component={TextVariants.h3}>{intl.formatMessage(messages.redHatIntegration)}</Text> - <TextList isPlain> - <TextListItem> + <Content component={ContentVariants.h3}>{intl.formatMessage(messages.redHatIntegration)}</Content> + <Content component="ul" isPlainList> + <Content component="li"> <span style={styles.spacingRight}>{intl.formatMessage(messages.source, { value: 'ocp' })}</span> <a href={`${release}/settings/integrations/detail/${clusterProvider.id}`}>{clusterProvider.name}</a> - </TextListItem> - <TextListItem> + </Content> + <Content component="li"> {clusterProvider?.cost_models?.length ? ( clusterProvider.cost_models.map((cm, index) => ( <React.Fragment key={index}> @@ -101,12 +101,12 @@ const ClusterInfoContent: React.FC<ClusterInfoContentProps> = ({ clusterId }: Cl ) : ( <a href={formatPath(routes.settings.path, true)}>{intl.formatMessage(messages.assignCostModel)}</a> )} - </TextListItem> - </TextList> + </Content> + </Content> {cloudProvider && <CloudIntegration provider={cloudProvider} />} </> )} - </TextContent> + </Content> ); }; diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoModal.tsx b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoModal.tsx index 01090f2d7..5fafed8ec 100644 --- a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoModal.tsx +++ b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfoModal.tsx @@ -1,5 +1,4 @@ -import { Button, ButtonVariant } from '@patternfly/react-core'; -import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core/next'; +import { Button, ButtonVariant, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import messages from 'locales/messages'; import React, { useState } from 'react'; import { useIntl } from 'react-intl'; diff --git a/src/routes/details/ocpBreakdown/clusterInfo/components/cloudIntegration.tsx b/src/routes/details/ocpBreakdown/clusterInfo/components/cloudIntegration.tsx index 64d35cd2b..f047a76da 100644 --- a/src/routes/details/ocpBreakdown/clusterInfo/components/cloudIntegration.tsx +++ b/src/routes/details/ocpBreakdown/clusterInfo/components/cloudIntegration.tsx @@ -1,4 +1,4 @@ -import { Text, TextList, TextListItem, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; import type { Provider } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; @@ -24,12 +24,12 @@ const CloudIntegration: React.FC<CloudIntegrationProps> = ({ provider }: CloudIn return ( <> - <Text component={TextVariants.h3}>{intl.formatMessage(messages.cloudIntegration)}</Text> - <TextList isPlain> - <TextListItem> + <Content component={ContentVariants.h3}>{intl.formatMessage(messages.cloudIntegration)}</Content> + <Content component="ul" isPlainList> + <Content component="li"> <SourceLink provider={provider} /> - </TextListItem> - <TextListItem> + </Content> + <Content component="li"> {provider?.cost_models?.length ? ( provider.cost_models.map(cm => ( <> @@ -40,8 +40,8 @@ const CloudIntegration: React.FC<CloudIntegrationProps> = ({ provider }: CloudIn ) : ( <a href={formatPath(routes.settings.path, true)}>{intl.formatMessage(messages.assignCostModel)}</a> )} - </TextListItem> - </TextList> + </Content> + </Content> </> ); }; diff --git a/src/routes/details/ocpBreakdown/optimizations.tsx b/src/routes/details/ocpBreakdown/optimizations.tsx index 05e8b903d..ac5fe753c 100644 --- a/src/routes/details/ocpBreakdown/optimizations.tsx +++ b/src/routes/details/ocpBreakdown/optimizations.tsx @@ -1,3 +1,4 @@ +import { Card, CardBody } from '@patternfly/react-core'; import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; import messages from 'locales/messages'; import React from 'react'; @@ -28,22 +29,26 @@ const Optimizations: React.FC<OptimizationsProps> = () => { const isOptimizationsPath = queryFromRoute?.optimizationsPath === 'true'; return ( - <AsyncComponent - scope="costManagementMfe" - appName="cost-management-mfe" - module="./MfeOptimizationsTable" - breadcrumbLabel={intl.formatMessage(messages.breakdownBackToOptimizationsProject, { value: groupByValue })} - breadcrumbPath={formatPath(`${routes.ocpBreakdown.path}${location.search}${otimizationsTab}`)} - cluster={clusterFilter} - hideCluster={clusterFilter !== undefined} - hideProject={groupBy === 'project'} - isOptimizationsPath={isOptimizationsPath} - linkPath={formatPath(routes.optimizationsBreakdown.path)} - linkState={{ - ...(location.state && location.state), - }} - project={groupBy === 'project' ? groupByValue : undefined} - /> + <Card> + <CardBody> + <AsyncComponent + scope="costManagementMfe" + appName="cost-management-mfe" + module="./MfeOptimizationsTable" + breadcrumbLabel={intl.formatMessage(messages.breakdownBackToOptimizationsProject, { value: groupByValue })} + breadcrumbPath={formatPath(`${routes.ocpBreakdown.path}${location.search}${otimizationsTab}`)} + cluster={clusterFilter} + hideCluster={clusterFilter !== undefined} + hideProject={groupBy === 'project'} + isOptimizationsPath={isOptimizationsPath} + linkPath={formatPath(routes.optimizationsBreakdown.path)} + linkState={{ + ...(location.state && location.state), + }} + project={groupBy === 'project' ? groupByValue : undefined} + /> + </CardBody> + </Card> ); }; diff --git a/src/routes/details/ocpDetails/detailsHeader.styles.ts b/src/routes/details/ocpDetails/detailsHeader.styles.ts index caa2a81fe..2021c3ff6 100644 --- a/src/routes/details/ocpDetails/detailsHeader.styles.ts +++ b/src/routes/details/ocpDetails/detailsHeader.styles.ts @@ -1,13 +1,12 @@ -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 global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +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_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 = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -16,13 +15,9 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', @@ -31,12 +26,12 @@ export const styles = { verticalAlign: 'middle', }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, infoTitle: { fontWeight: 'bold', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ocpDetails/detailsHeader.tsx b/src/routes/details/ocpDetails/detailsHeader.tsx index ca043529b..97457ccac 100644 --- a/src/routes/details/ocpDetails/detailsHeader.tsx +++ b/src/routes/details/ocpDetails/detailsHeader.tsx @@ -143,7 +143,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, DetailsHeade } return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> <FlexItem> <Title headingLevel="h1" style={styles.title} size={TitleSizes['2xl']}> diff --git a/src/routes/details/ocpDetails/detailsToolbar.tsx b/src/routes/details/ocpDetails/detailsToolbar.tsx index 0af210f88..aa727bf71 100644 --- a/src/routes/details/ocpDetails/detailsToolbar.tsx +++ b/src/routes/details/ocpDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { OcpQuery } from 'api/queries/ocpQuery'; import { getQuery } from 'api/queries/ocpQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -48,7 +48,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -90,7 +90,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps, Det } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/ocpDetails/ocpDetails.styles.ts b/src/routes/details/ocpDetails/ocpDetails.styles.ts index 1ee4315c6..45bbb413e 100644 --- a/src/routes/details/ocpDetails/ocpDetails.styles.ts +++ b/src/routes/details/ocpDetails/ocpDetails.styles.ts @@ -1,31 +1,15 @@ -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_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 = { - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + alert: { + marginBottom: t_global_spacer_lg.value, }, - ocpDetails: { - minHeight: '100vh', + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ocpDetails/ocpDetails.tsx b/src/routes/details/ocpDetails/ocpDetails.tsx index bfccb8d9a..916d5b61f 100644 --- a/src/routes/details/ocpDetails/ocpDetails.tsx +++ b/src/routes/details/ocpDetails/ocpDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import type { OcpQuery } from 'api/queries/ocpQuery'; @@ -20,6 +20,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import type { ColumnManagementModalOption } from 'routes/details/components/columnManagement'; import { ColumnManagementModal, initHiddenColumns } from 'routes/details/components/columnManagement'; import { ProviderDetails } from 'routes/details/components/providerDetails'; @@ -457,46 +458,49 @@ class OcpDetails extends React.Component<OcpDetailsProps, OcpDetailsState> { } return ( - <div style={styles.ocpDetails}> - <DetailsHeader - costDistribution={costDistribution} - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + costDistribution={costDistribution} + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {this.getColumnManagementModal()} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {this.getColumnManagementModal()} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/details/rhelDetails/detailsHeader.styles.ts b/src/routes/details/rhelDetails/detailsHeader.styles.ts index eab228cfa..491fa9d97 100644 --- a/src/routes/details/rhelDetails/detailsHeader.styles.ts +++ b/src/routes/details/rhelDetails/detailsHeader.styles.ts @@ -1,13 +1,12 @@ -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 global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +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_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 = { costValue: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, marginBottom: 0, }, dateTitle: { @@ -16,27 +15,23 @@ export const styles = { exportContainer: { display: 'flex', }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, info: { verticalAlign: 'middle', }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, infoTitle: { fontWeight: 'bold', }, perspective: { - paddingTop: global_spacer_lg.var, - marginTop: global_spacer_xs.var, + paddingTop: t_global_spacer_lg.var, + marginTop: t_global_spacer_xs.var, }, perspectiveContainer: { alignItems: 'unset', }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/rhelDetails/detailsHeader.tsx b/src/routes/details/rhelDetails/detailsHeader.tsx index e07876024..50c4b19dc 100644 --- a/src/routes/details/rhelDetails/detailsHeader.tsx +++ b/src/routes/details/rhelDetails/detailsHeader.tsx @@ -136,7 +136,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps> { } return ( - <header style={styles.header}> + <header> <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> <FlexItem> <Title headingLevel="h1" style={styles.title} size={TitleSizes['2xl']}> diff --git a/src/routes/details/rhelDetails/detailsToolbar.tsx b/src/routes/details/rhelDetails/detailsToolbar.tsx index 6f87a4a85..87c642c42 100644 --- a/src/routes/details/rhelDetails/detailsToolbar.tsx +++ b/src/routes/details/rhelDetails/detailsToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { OcpQuery } from 'api/queries/ocpQuery'; import { getQuery } from 'api/queries/ocpQuery'; import { ResourcePathsType } from 'api/resources/resource'; @@ -47,7 +47,7 @@ interface DetailsToolbarDispatchProps { } interface DetailsToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type DetailsToolbarProps = DetailsToolbarOwnProps & @@ -89,7 +89,7 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> { } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { intl, tagReport } = this.props; const options = [ diff --git a/src/routes/details/rhelDetails/rhelDetails.styles.ts b/src/routes/details/rhelDetails/rhelDetails.styles.ts index 20be10cf3..45bbb413e 100644 --- a/src/routes/details/rhelDetails/rhelDetails.styles.ts +++ b/src/routes/details/rhelDetails/rhelDetails.styles.ts @@ -1,31 +1,15 @@ -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_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 = { - content: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, + alert: { + marginBottom: t_global_spacer_lg.value, }, - ocpDetails: { - minHeight: '100%', + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/rhelDetails/rhelDetails.tsx b/src/routes/details/rhelDetails/rhelDetails.tsx index dd1916e17..03ae59489 100644 --- a/src/routes/details/rhelDetails/rhelDetails.tsx +++ b/src/routes/details/rhelDetails/rhelDetails.tsx @@ -1,4 +1,4 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Alert, Card, CardBody, PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import { getProvidersQuery } from 'api/queries/providersQuery'; @@ -19,6 +19,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import type { ColumnManagementModalOption } from 'routes/details/components/columnManagement'; import { ColumnManagementModal, initHiddenColumns } from 'routes/details/components/columnManagement'; import { ProviderDetails } from 'routes/details/components/providerDetails'; @@ -436,44 +437,47 @@ class RhelDetails extends React.Component<RhelDetailsProps, RhelDetailsState> { } return ( - <div style={styles.ocpDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onGroupBySelect={this.handleOnGroupBySelect} + query={query} + report={report} + timeScopeValue={timeScopeValue} + /> + </PageSection> + <PageSection> + <Card> {!isCurrentMonthData && isDetailsDateRangeToggleEnabled && ( <Alert isInline + style={styles.alert} title={intl.formatMessage(messages.noCurrentData, { dateRange: getSinceDateRangeString(), })} variant="info" /> )} - {this.getToolbar(computedItems)} - </div> - {this.getExportModal(computedItems)} - {this.getColumnManagementModal()} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> - )} - </div> - </div> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {this.getColumnManagementModal()} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </PageSection> + </> ); } } diff --git a/src/routes/explorer/explorer.styles.ts b/src/routes/explorer/explorer.styles.ts index 611083247..45bbb413e 100644 --- a/src/routes/explorer/explorer.styles.ts +++ b/src/routes/explorer/explorer.styles.ts @@ -1,45 +1,15 @@ -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_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 = { alert: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginBottom: t_global_spacer_lg.value, }, - chartContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - paddingRight: global_spacer_lg.value, - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, - }, - chartContent: { - paddingTop: global_spacer_lg.value, - }, - explorer: { - minHeight: '100%', + headerContainer: { + paddingBottom: 0, }, paginationContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - tableContent: { - paddingBottom: global_spacer_lg.value, - paddingTop: global_spacer_lg.value, - }, - toolbarContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorer.tsx b/src/routes/explorer/explorer.tsx index 5d8d5a2af..b413a57a0 100644 --- a/src/routes/explorer/explorer.tsx +++ b/src/routes/explorer/explorer.tsx @@ -1,4 +1,13 @@ -import { Alert, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { + Alert, + Card, + CardBody, + Grid, + GridItem, + PageSection, + Pagination, + PaginationVariant, +} from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import { getProvidersQuery } from 'api/queries/providersQuery'; @@ -21,6 +30,7 @@ import { Loading } from 'routes/components/page/loading'; import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderDetails } from 'routes/details/components/providerDetails'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedExplorerReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -551,108 +561,118 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> { const isDateRangeSelected = query.dateRangeType !== undefined; return ( - <div style={styles.explorer}> - <ExplorerHeader - costDistribution={costDistribution} - costType={costType} - currency={currency} - dateRangeType={dateRangeType} - endDate={endDate} - groupBy={ - groupByCostCategory - ? `${awsCategoryPrefix}${groupByCostCategory}` - : groupByTagKey - ? `${tagPrefix}${groupByTagKey}` - : groupById - } - isCurrentMonthData={isCurrentMonthData} - onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} - onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} - onGroupBySelect={this.handleOnGroupBySelect} - onPerspectiveClicked={this.handleOnPerspectiveClick} - perspective={perspective} - report={report} - startDate={startDate} - /> - {!isDataAvailable && isDetailsDateRangeToggleEnabled ? ( - this.getEmptyProviderState() - ) : ( - <> - {isDetailsDateRangeToggleEnabled ? ( - <div style={styles.chartContent}> - {!isCurrentMonthData && !isDateRangeSelected && dateRangeType === DateRangeType.previousMonth && ( - <Alert - isInline - style={styles.alert} - title={intl.formatMessage(messages.noCurrentData, { - dateRange: getSinceDateRangeString(), - })} - variant="info" - /> - )} - <div style={styles.chartContainer}> - <ExplorerChart - costDistribution={costDistribution} - costType={costType} - currency={currency} - dateRangeType={dateRangeType} - endDate={endDate} - groupBy={ - groupByCostCategory - ? `${awsCategoryPrefix}${groupByCostCategory}` - : groupByTagKey - ? `${tagPrefix}${groupByTagKey}` - : groupById - } - perspective={perspective} - startDate={startDate} - /> - </div> - </div> - ) : ( - (itemsTotal > 0 || isChartSkeletonToggleEnabled) && ( - <div style={styles.chartContent}> - <div style={styles.chartContainer}> - <ExplorerChart - costDistribution={costDistribution} - costType={costType} - currency={currency} - dateRangeType={dateRangeType} - endDate={endDate} - groupBy={ - groupByCostCategory - ? `${awsCategoryPrefix}${groupByCostCategory}` - : groupByTagKey - ? `${tagPrefix}${groupByTagKey}` - : groupById - } - perspective={perspective} - startDate={startDate} - /> - </div> - </div> - ) - )} - <div style={styles.tableContent}> - <div style={styles.toolbarContainer}>{this.getToolbar(computedItems)}</div> - {this.getExportModal(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> + <> + <PageSection style={styles.headerContainer}> + <ExplorerHeader + costDistribution={costDistribution} + costType={costType} + currency={currency} + dateRangeType={dateRangeType} + endDate={endDate} + groupBy={ + groupByCostCategory + ? `${awsCategoryPrefix}${groupByCostCategory}` + : groupByTagKey + ? `${tagPrefix}${groupByTagKey}` + : groupById + } + isCurrentMonthData={isCurrentMonthData} + onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} + onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} + onGroupBySelect={this.handleOnGroupBySelect} + onPerspectiveClicked={this.handleOnPerspectiveClick} + perspective={perspective} + report={report} + startDate={startDate} + /> + </PageSection> + <PageSection> + {!isDataAvailable && isDetailsDateRangeToggleEnabled ? ( + this.getEmptyProviderState() + ) : ( + <Grid hasGutter> + {isDetailsDateRangeToggleEnabled ? ( + <GridItem sm={12}> + <Card> + {!isCurrentMonthData && !isDateRangeSelected && dateRangeType === DateRangeType.previousMonth && ( + <Alert + isInline + style={styles.alert} + title={intl.formatMessage(messages.noCurrentData, { + dateRange: getSinceDateRangeString(), + })} + variant="info" + /> + )} + <CardBody> + <ExplorerChart + costDistribution={costDistribution} + costType={costType} + currency={currency} + dateRangeType={dateRangeType} + endDate={endDate} + groupBy={ + groupByCostCategory + ? `${awsCategoryPrefix}${groupByCostCategory}` + : groupByTagKey + ? `${tagPrefix}${groupByTagKey}` + : groupById + } + perspective={perspective} + startDate={startDate} + /> + </CardBody> + </Card> + </GridItem> ) : ( - <> - <div style={styles.tableContainer}>{this.getTable()}</div> - <div style={styles.paginationContainer}> - <div style={styles.pagination}>{this.getPagination(isDisabled, true)}</div> - </div> - </> + (itemsTotal > 0 || isChartSkeletonToggleEnabled) && ( + <GridItem sm={12}> + <Card> + <CardBody> + <ExplorerChart + costDistribution={costDistribution} + costType={costType} + currency={currency} + dateRangeType={dateRangeType} + endDate={endDate} + groupBy={ + groupByCostCategory + ? `${awsCategoryPrefix}${groupByCostCategory}` + : groupByTagKey + ? `${tagPrefix}${groupByTagKey}` + : groupById + } + perspective={perspective} + startDate={startDate} + /> + </CardBody> + </Card> + </GridItem> + ) )} - </div> - </> - )} - </div> + <GridItem sm={12}> + <Card> + <CardBody> + {this.getToolbar(computedItems)} + {this.getExportModal(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {this.getTable()} + <div style={styles.paginationContainer}>{this.getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> + </GridItem> + </Grid> + )} + </PageSection> + </> ); } } diff --git a/src/routes/explorer/explorerChart.styles.ts b/src/routes/explorer/explorerChart.styles.ts index 7d29f1f86..72c73cb88 100644 --- a/src/routes/explorer/explorerChart.styles.ts +++ b/src/routes/explorer/explorerChart.styles.ts @@ -1,8 +1,7 @@ -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; -import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl'; -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_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; +import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +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 chartStyles = { @@ -10,29 +9,24 @@ export const chartStyles = { }; export const styles = { - chartContainer: { - marginLeft: global_spacer_2xl.value, - }, chartSkeleton: { height: '125px', - marginBottom: global_spacer_md.value, - marginTop: global_spacer_3xl.value, + marginBottom: t_global_spacer_md.value, + marginTop: t_global_spacer_3xl.value, }, costChart: { - marginBottom: global_spacer_sm.value, - marginTop: global_spacer_sm.value, + marginBottom: t_global_spacer_sm.value, + marginLeft: t_global_spacer_2xl.value, + marginTop: t_global_spacer_sm.value, }, legendSkeleton: { - marginTop: global_spacer_md.value, - }, - titleContainer: { - marginLeft: global_spacer_lg.value, + marginTop: t_global_spacer_md.value, }, trendChart: { - marginBottom: global_spacer_sm.value, - marginTop: global_spacer_sm.value, + marginBottom: t_global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, usageChart: { - marginTop: global_spacer_sm.value, + marginTop: t_global_spacer_sm.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorerChart.tsx b/src/routes/explorer/explorerChart.tsx index a4ddd6c45..35652ab58 100644 --- a/src/routes/explorer/explorerChart.tsx +++ b/src/routes/explorer/explorerChart.tsx @@ -245,30 +245,26 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar // Todo: get title from perspective menu return ( <> - <div style={styles.titleContainer}> - <Title headingLevel="h3" size={TitleSizes.md}> - {intl.formatMessage(messages.explorerChartTitle, { value: perspective })} - -
-
-
- {reportFetchStatus === FetchStatus.inProgress ? ( - this.getSkeleton() - ) : ( - 0 ? datums[0] : []} - top2ndData={datums.length > 1 ? datums[1] : []} - top3rdData={datums.length > 2 ? datums[2] : []} - top4thData={datums.length > 3 ? datums[3] : []} - top5thData={datums.length > 4 ? datums[4] : []} - top6thData={datums.length > 5 ? datums[5] : []} - /> - )} -
+ + {intl.formatMessage(messages.explorerChartTitle, { value: perspective })} + +
+ {reportFetchStatus === FetchStatus.inProgress ? ( + this.getSkeleton() + ) : ( + 0 ? datums[0] : []} + top2ndData={datums.length > 1 ? datums[1] : []} + top3rdData={datums.length > 2 ? datums[2] : []} + top4thData={datums.length > 3 ? datums[3] : []} + top5thData={datums.length > 4 ? datums[4] : []} + top6thData={datums.length > 5 ? datums[5] : []} + /> + )}
); diff --git a/src/routes/explorer/explorerDatePicker.styles.ts b/src/routes/explorer/explorerDatePicker.styles.ts index 88e747d48..36d49674e 100644 --- a/src/routes/explorer/explorerDatePicker.styles.ts +++ b/src/routes/explorer/explorerDatePicker.styles.ts @@ -1,9 +1,9 @@ -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 = { toContainer: { - marginLeft: global_spacer_md.var, - marginRight: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, + marginRight: t_global_spacer_md.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorerFilter.scss b/src/routes/explorer/explorerFilter.scss index 70ce63a22..741ffdb3e 100644 --- a/src/routes/explorer/explorerFilter.scss +++ b/src/routes/explorer/explorerFilter.scss @@ -1,7 +1,11 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .explorerToolbarOverride { - .pf-v5-c-toolbar__content { + background-color: unset; + .pf-v6-c-toolbar__content { padding-left: 0; } + .pf-v6-c-toolbar { + --pf-v6-c-toolbar--PaddingBlockEnd: 0; + } } diff --git a/src/routes/explorer/explorerFilter.styles.ts b/src/routes/explorer/explorerFilter.styles.ts index 560bcf952..4ea10ef48 100644 --- a/src/routes/explorer/explorerFilter.styles.ts +++ b/src/routes/explorer/explorerFilter.styles.ts @@ -1,10 +1,8 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -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 = { toolbarContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingTop: global_spacer_sm.var, + paddingTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorerFilter.tsx b/src/routes/explorer/explorerFilter.tsx index eb188a75e..eef548665 100644 --- a/src/routes/explorer/explorerFilter.tsx +++ b/src/routes/explorer/explorerFilter.tsx @@ -1,6 +1,6 @@ import './explorerFilter.scss'; -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import type { Org, OrgPathsType } from 'api/orgs/org'; import { OrgType } from 'api/orgs/org'; import type { Query } from 'api/queries/query'; @@ -79,7 +79,7 @@ interface ExplorerFilterDispatchProps { } interface ExplorerFilterState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; currentDateRange: DateRangeType; showDatePicker?: boolean; } @@ -134,7 +134,7 @@ export class ExplorerFilterBase extends React.Component { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { orgReport, perspective, intl, isOcpCloudGroupBysToggleEnabled, resourceReport, tagReport } = this.props; const options = []; diff --git a/src/routes/explorer/explorerHeader.styles.ts b/src/routes/explorer/explorerHeader.styles.ts index 8ddf9e3f2..978dbdb98 100644 --- a/src/routes/explorer/explorerHeader.styles.ts +++ b/src/routes/explorer/explorerHeader.styles.ts @@ -1,10 +1,8 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_Color_100 from '@patternfly/react-tokens/dist/js/global_Color_100'; -import global_Color_200 from '@patternfly/react-tokens/dist/js/global_Color_200'; -import global_FontSize_sm from '@patternfly/react-tokens/dist/js/global_FontSize_sm'; -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_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_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'; +import t_global_text_color_100 from '@patternfly/react-tokens/dist/js/t_global_text_color_100'; +import t_global_text_color_200 from '@patternfly/react-tokens/dist/js/t_global_text_color_200'; import type React from 'react'; export const styles = { @@ -15,22 +13,15 @@ export const styles = { costValue: { marginTop: 0, marginBottom: 0, - marginRight: global_spacer_md.var, + marginRight: t_global_spacer_md.var, }, costLabelUnit: { - fontSize: global_FontSize_sm.value, - color: global_Color_100.var, + fontSize: t_global_font_size_sm.value, + color: t_global_text_color_100.var, }, costLabelDate: { - fontSize: global_FontSize_sm.value, - color: global_Color_200.var, - }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingBottom: global_spacer_md.var, - paddingLeft: global_spacer_lg.var, - paddingRight: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, + fontSize: t_global_font_size_sm.value, + color: t_global_text_color_200.var, }, headerContent: { alignItems: 'unset', @@ -41,9 +32,9 @@ export const styles = { }, perspectiveContainer: { alignItems: 'unset', - paddingTop: global_spacer_md.var, + paddingTop: t_global_spacer_md.var, }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorerHeader.tsx b/src/routes/explorer/explorerHeader.tsx index f7ca49ed1..7914d171b 100644 --- a/src/routes/explorer/explorerHeader.tsx +++ b/src/routes/explorer/explorerHeader.tsx @@ -297,7 +297,7 @@ class ExplorerHeaderBase extends React.Component +
diff --git a/src/routes/explorer/explorerTable.scss b/src/routes/explorer/explorerTable.scss index eec90e1a4..bb48e1908 100644 --- a/src/routes/explorer/explorerTable.scss +++ b/src/routes/explorer/explorerTable.scss @@ -1,15 +1,15 @@ @import url("~@patternfly/patternfly/base/patternfly-variables.css"); .explorerTableOverride { - &.pf-v5-c-table { - .pf-v5-c-table__sticky-column { + &.pf-v6-c-table { + .pf-v6-c-table__sticky-column { z-index: 99; } } - &.pf-v5-c-table tbody .pf-v5-c-table__check input { - margin-top: .40rem; + &.pf-v6-c-table tbody .pf-v6-c-table__check input { + margin-top: .35rem; } .stickyColumn { - --pf-v5-c-table--cell--Width: 1%; + --pf-v6-c-table--cell--Width: 1%; } } diff --git a/src/routes/explorer/explorerTable.styles.ts b/src/routes/explorer/explorerTable.styles.ts index 77e86fc7a..62dbf95ab 100644 --- a/src/routes/explorer/explorerTable.styles.ts +++ b/src/routes/explorer/explorerTable.styles.ts @@ -1,8 +1,8 @@ -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_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs'; +import t_global_background_color_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_body_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_body_sm'; +import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl'; +import t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs'; import type React from 'react'; export const styles = { @@ -10,10 +10,10 @@ export const styles = { minWidth: '50px', }, emptyState: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, display: 'flex', justifyContent: 'center', - paddingTop: global_spacer_3xl.value, + paddingTop: t_global_spacer_3xl.value, height: '35vh', width: '100%', }, @@ -21,10 +21,10 @@ 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_body_sm.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/explorer/explorerTable.tsx b/src/routes/explorer/explorerTable.tsx index 9497ac551..0005229a1 100644 --- a/src/routes/explorer/explorerTable.tsx +++ b/src/routes/explorer/explorerTable.tsx @@ -1,15 +1,6 @@ import './explorerTable.scss'; -import { - Bullseye, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - Label, - Spinner, - Tooltip, -} from '@patternfly/react-core'; +import { Bullseye, EmptyState, EmptyStateBody, Label, Spinner, Tooltip } from '@patternfly/react-core'; import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon'; import type { ThProps } from '@patternfly/react-table'; import { @@ -384,8 +375,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl } } return ( - <EmptyState> - <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} /> + <EmptyState icon={CalculatorIcon} titleText=""> <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody> </EmptyState> ); diff --git a/src/routes/explorer/explorerToolbar.tsx b/src/routes/explorer/explorerToolbar.tsx index a9805fed9..3646dab3c 100644 --- a/src/routes/explorer/explorerToolbar.tsx +++ b/src/routes/explorer/explorerToolbar.tsx @@ -1,4 +1,4 @@ -import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarLabelGroup } from '@patternfly/react-core'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; import { injectIntl } from 'react-intl'; @@ -33,7 +33,7 @@ interface ExplorerToolbarDispatchProps { } interface ExplorerToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type ExplorerToolbarProps = ExplorerToolbarOwnProps & diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts deleted file mode 100644 index 696df518c..000000000 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -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 type React from 'react'; - -export const styles = { - alertContainer: { - marginBottom: global_spacer_lg.value, - }, - codeBlock: { - display: 'flex', - }, - container: { - minHeight: '100vh', - }, - currentActions: { - height: '36px', - }, - 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/optimizationsBreakdown/optimizationsBreakdown.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx index 63962ce2e..62e0dd92a 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx @@ -1,8 +1,6 @@ import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; import React from 'react'; -import { styles } from './optimizationsBreakdown.styles'; - interface OptimizationsBreakdownOwnProps { // TBD... } @@ -11,9 +9,7 @@ type OptimizationsBreakdownProps = OptimizationsBreakdownOwnProps; const OptimizationsBreakdown: React.FC<OptimizationsBreakdownProps> = () => { return ( - <div style={styles.container}> - <AsyncComponent scope="costManagementMfe" appName="cost-management-mfe" module="./MfeOptimizationsBreakdown" /> - </div> + <AsyncComponent scope="costManagementMfe" appName="cost-management-mfe" module="./MfeOptimizationsBreakdown" /> ); }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts deleted file mode 100644 index bcd3af1a9..000000000 --- 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 d116c9259..4ed98c5ed 100644 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx +++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx @@ -6,8 +6,6 @@ import { useLocation } from 'react-router-dom'; import { routes } from 'routes'; import { formatPath } from 'utils/paths'; -import { styles } from './optimizationsDetails.styles'; - interface OptimizationsDetailsOwnProps { // TBD... } @@ -19,20 +17,18 @@ const OptimizationsDetails: React.FC<OptimizationsDetailsProps> = () => { const location = useLocation(); return ( - <div style={styles.container}> - <AsyncComponent - scope="costManagementMfe" - appName="cost-management-mfe" - module="./MfeOptimizationsDetails" - breadcrumbLabel={intl.formatMessage(messages.breakdownBackToOptimizations)} - breadcrumbPath={formatPath(`${routes.optimizationsDetails.path}${location.search}`)} - linkPath={formatPath(routes.optimizationsBreakdown.path)} - linkState={{ - ...(location.state && location.state), - }} - projectPath={formatPath(routes.ocpBreakdown.path)} - /> - </div> + <AsyncComponent + scope="costManagementMfe" + appName="cost-management-mfe" + module="./MfeOptimizationsDetails" + breadcrumbLabel={intl.formatMessage(messages.breakdownBackToOptimizations)} + breadcrumbPath={formatPath(`${routes.optimizationsDetails.path}${location.search}`)} + linkPath={formatPath(routes.optimizationsBreakdown.path)} + linkState={{ + ...(location.state && location.state), + }} + projectPath={formatPath(routes.ocpBreakdown.path)} + /> ); }; diff --git a/src/routes/overview/awsOcpDashboard/awsOcpDashboardWidget.styles.ts b/src/routes/overview/awsOcpDashboard/awsOcpDashboardWidget.styles.ts index 73148dca5..df7c0d1f5 100644 --- a/src/routes/overview/awsOcpDashboard/awsOcpDashboardWidget.styles.ts +++ b/src/routes/overview/awsOcpDashboard/awsOcpDashboardWidget.styles.ts @@ -1,5 +1,5 @@ -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; -import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; +import t_global_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; +import t_global_spacer_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl'; import type React from 'react'; export const chartStyles = { @@ -9,9 +9,9 @@ export const chartStyles = { export const styles = { tabs: { - marginTop: global_spacer_2xl.value, + marginTop: t_global_spacer_2xl.value, }, tabItems: { - marginTop: global_spacer_xl.value, + marginTop: t_global_spacer_xl.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/overview/components/dashboardWidget.styles.ts b/src/routes/overview/components/dashboardWidget.styles.ts index 853cd824b..96e79e316 100644 --- a/src/routes/overview/components/dashboardWidget.styles.ts +++ b/src/routes/overview/components/dashboardWidget.styles.ts @@ -1,6 +1,6 @@ -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; -import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'; -import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; +import t_global_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; +import t_global_spacer_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl'; import type React from 'react'; export const chartStyles = { @@ -10,15 +10,15 @@ export const chartStyles = { export const styles = { comparison: { - marginBottom: global_spacer_md.value, + marginBottom: t_global_spacer_md.value, }, comparisonContainer: { display: 'flex', }, tabs: { - marginTop: global_spacer_2xl.value, + marginTop: t_global_spacer_2xl.value, }, tabItems: { - marginTop: global_spacer_xl.value, + marginTop: t_global_spacer_xl.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/overview/overview.scss b/src/routes/overview/overview.scss index eb721c917..928df8865 100644 --- a/src/routes/overview/overview.scss +++ b/src/routes/overview/overview.scss @@ -1,5 +1,5 @@ .headerOverride { - &.pf-v5-c-page__main-section { - --pf-v5-c-page__main-section--PaddingBottom: 0; + &.pf-v6-c-page__main-section { + --pf-v6-c-page__main-section--PaddingBottom: 0; // Todo: PaddingBottom no longer exists? } } diff --git a/src/routes/overview/overview.styles.ts b/src/routes/overview/overview.styles.ts index 7179a46cb..92db154ef 100644 --- a/src/routes/overview/overview.styles.ts +++ b/src/routes/overview/overview.styles.ts @@ -1,7 +1,6 @@ -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 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 type React from 'react'; export const styles = { @@ -11,11 +10,13 @@ export const styles = { textAlign: 'end', }, costType: { - marginLeft: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, }, - header: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, + headerContainer: { + paddingBottom: 0, + }, + headerContent: { + display: 'flex', }, headerContentLeft: { display: 'flex', @@ -24,17 +25,13 @@ export const styles = { display: 'flex', }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, infoTitle: { fontWeight: 'bold', }, - main: { - padding: global_spacer_lg.value, - }, tabs: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingBottom: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, + paddingBottom: t_global_spacer_lg.var, + paddingTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/overview/overview.tsx b/src/routes/overview/overview.tsx index 3cfe13ce7..47c074851 100644 --- a/src/routes/overview/overview.tsx +++ b/src/routes/overview/overview.tsx @@ -5,6 +5,7 @@ import { ButtonVariant, Flex, FlexItem, + PageSection, Popover, Tab, TabContent, @@ -728,75 +729,76 @@ class OverviewBase extends React.Component<OverviewProps, OverviewState> { } return ( <> - <header style={styles.header}> - <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> - <FlexItem> - <Title headingLevel="h1" size={TitleSizes['2xl']}> - {title} - <span style={styles.infoIcon}> - <Popover - aria-label={intl.formatMessage(messages.overviewInfoArialLabel)} - enableFlip - bodyContent={ - <> - <p style={styles.infoTitle}>{intl.formatMessage(messages.openShiftCloudInfrastructure)}</p> - <p>{intl.formatMessage(messages.openShiftCloudInfrastructureDesc)}</p> - <br /> - <p style={styles.infoTitle}>{intl.formatMessage(messages.openShift)}</p> - <p>{intl.formatMessage(messages.openShiftDesc)}</p> - <br /> - {isFinsightsToggleEnabled && ( - <> - <p style={styles.infoTitle}>{intl.formatMessage(messages.rhel)}</p> - <p>{intl.formatMessage(messages.rhelDesc)}</p> - <br /> - </> - )} - <p style={styles.infoTitle}>{intl.formatMessage(messages.aws)}</p> - <p>{intl.formatMessage(messages.awsDesc)}</p> - <br /> - <p style={styles.infoTitle}>{intl.formatMessage(messages.gcp)}</p> - <p>{intl.formatMessage(messages.gcpDesc)}</p> - {isIbmToggleEnabled && ( - <> - <br /> - <p style={styles.infoTitle}>{intl.formatMessage(messages.ibm)}</p> - <p>{intl.formatMessage(messages.ibmDesc)}</p> - </> - )} - <br /> - <p style={styles.infoTitle}>{intl.formatMessage(messages.azure)}</p> - <p>{intl.formatMessage(messages.azureDesc)}</p> - <br /> - <p style={styles.infoTitle}>{intl.formatMessage(messages.oci)}</p> - <p>{intl.formatMessage(messages.ociDesc)}</p> - </> - } - > - <Button - aria-label={intl.formatMessage(messages.overviewInfoButtonArialLabel)} - variant={ButtonVariant.plain} + <PageSection style={styles.headerContainer}> + <header> + <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}> + <FlexItem> + <Title headingLevel="h1" size={TitleSizes['2xl']}> + {title} + <span style={styles.infoIcon}> + <Popover + aria-label={intl.formatMessage(messages.overviewInfoArialLabel)} + enableFlip + bodyContent={ + <> + <p style={styles.infoTitle}>{intl.formatMessage(messages.openShiftCloudInfrastructure)}</p> + <p>{intl.formatMessage(messages.openShiftCloudInfrastructureDesc)}</p> + <br /> + <p style={styles.infoTitle}>{intl.formatMessage(messages.openShift)}</p> + <p>{intl.formatMessage(messages.openShiftDesc)}</p> + <br /> + {isFinsightsToggleEnabled && ( + <> + <p style={styles.infoTitle}>{intl.formatMessage(messages.rhel)}</p> + <p>{intl.formatMessage(messages.rhelDesc)}</p> + <br /> + </> + )} + <p style={styles.infoTitle}>{intl.formatMessage(messages.aws)}</p> + <p>{intl.formatMessage(messages.awsDesc)}</p> + <br /> + <p style={styles.infoTitle}>{intl.formatMessage(messages.gcp)}</p> + <p>{intl.formatMessage(messages.gcpDesc)}</p> + {isIbmToggleEnabled && ( + <> + <br /> + <p style={styles.infoTitle}>{intl.formatMessage(messages.ibm)}</p> + <p>{intl.formatMessage(messages.ibmDesc)}</p> + </> + )} + <br /> + <p style={styles.infoTitle}>{intl.formatMessage(messages.azure)}</p> + <p>{intl.formatMessage(messages.azureDesc)}</p> + <br /> + <p style={styles.infoTitle}>{intl.formatMessage(messages.oci)}</p> + <p>{intl.formatMessage(messages.ociDesc)}</p> + </> + } > - <OutlinedQuestionCircleIcon /> - </Button> - </Popover> - </span> - - - -
{this.getCurrency()}
- - -
{this.getTabs(availableTabs)}
-
-
- {this.getPerspective()} - {this.getCostType()} + + + + + + +
{this.getCurrency()}
+ + +
{this.getTabs(availableTabs)}
+
+
+ {this.getPerspective()} + {this.getCostType()} +
+
{getSinceDateRangeString()}
-
{getSinceDateRangeString()}
-
-
-
{this.getTabContent(availableTabs)}
+ + + {this.getTabContent(availableTabs)} ); } diff --git a/src/routes/settings/calculations/calculations.styles.ts b/src/routes/settings/calculations/calculations.styles.ts index 3b34f647c..75756fca8 100644 --- a/src/routes/settings/calculations/calculations.styles.ts +++ b/src/routes/settings/calculations/calculations.styles.ts @@ -1,38 +1,25 @@ -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 global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +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 = { costType: { - marginBottom: global_spacer_lg.var, - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, width: 'fit-content', }, costTypeContainer: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingBottom: global_spacer_lg.var, - paddingLeft: global_spacer_lg.var, - paddingRight: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, currency: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, width: 'fit-content', }, - currencyContainer: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingBottom: global_spacer_lg.var, - paddingLeft: global_spacer_lg.var, - paddingRight: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, - }, resetContainer: { display: 'inline-block', - paddingLeft: global_spacer_md.var, + paddingLeft: t_global_spacer_md.var, }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/calculations/calculations.tsx b/src/routes/settings/calculations/calculations.tsx index 4d3e78ecd..84acf24a8 100644 --- a/src/routes/settings/calculations/calculations.tsx +++ b/src/routes/settings/calculations/calculations.tsx @@ -1,4 +1,4 @@ -import { PageSection, Title, TitleSizes, Tooltip } from '@patternfly/react-core'; +import { Card, CardBody, Title, TitleSizes, Tooltip } from '@patternfly/react-core'; import { AccountSettingsType } from 'api/accountSettings'; import messages from 'locales/messages'; import React, { useEffect, useState } from 'react'; @@ -59,7 +59,7 @@ const Calculations: React.FC = ({ canWrite }) => { const getCurrency = () => { return ( -
+ <> {intl.formatMessage(messages.currency)} @@ -75,7 +75,7 @@ const Calculations: React.FC = ({ canWrite }) => { /> )}
-
+ ); }; @@ -105,10 +105,12 @@ const Calculations: React.FC = ({ canWrite }) => { }, [costTypeAccountSettingsUpdateStatus, currencyAccountSettingsUpdateStatus]); return ( - - {getCurrency()} - {getCostType()} - + + + {getCurrency()} + {getCostType()} + + ); }; diff --git a/src/routes/settings/costCategory/costCategory.styles.ts b/src/routes/settings/costCategory/costCategory.styles.ts index 19d3215ba..dd942d14c 100644 --- a/src/routes/settings/costCategory/costCategory.styles.ts +++ b/src/routes/settings/costCategory/costCategory.styles.ts @@ -1,20 +1,16 @@ -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 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 = { action: { - marginLeft: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, }, - descContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingLeft: global_spacer_md.value, - paddingRight: global_spacer_md.value, - paddingTop: global_spacer_md.value, + paginationContainer: { + marginTop: t_global_spacer_sm.var, }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + tableContainer: { + marginTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/costCategory/costCategory.tsx b/src/routes/settings/costCategory/costCategory.tsx index 03547941c..a8828d131 100644 --- a/src/routes/settings/costCategory/costCategory.tsx +++ b/src/routes/settings/costCategory/costCategory.tsx @@ -1,4 +1,4 @@ -import { PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Card, CardBody, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { getQuery } from 'api/queries/query'; import type { Settings } from 'api/settings'; @@ -11,8 +11,8 @@ import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; 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 { LoadingState } from 'routes/components/state/loadingState'; import * as queryUtils from 'routes/utils/query'; import type { RootState } from 'store'; import { FetchStatus } from 'store/common'; @@ -216,8 +216,8 @@ const CostCategory: React.FC = ({ canWrite }) => { return ; } return ( - -
+ + {intl.formatMessage(messages.costCategoryDesc, { learnMore: ( @@ -225,17 +225,19 @@ const CostCategory: React.FC = ({ canWrite }) => { ), })} -
- {getToolbar(categories)} - {settingsStatus === FetchStatus.inProgress ? ( - - ) : ( - <> - {getTable()} -
{getPagination(isDisabled, true)}
- - )} - +
+ {getToolbar(categories)} + {settingsStatus === FetchStatus.inProgress ? ( + + ) : ( + <> + {getTable()} +
{getPagination(isDisabled, true)}
+ + )} +
+ + ); }; diff --git a/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap b/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap index 12b6b07f3..966ad686e 100644 --- a/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap +++ b/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap @@ -3,25 +3,25 @@ exports[`rate-table sort by metric & measurement 1`] = ` [ {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"Node"} , {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"} , {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"} , {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"} diff --git a/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap b/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap index b2edbad87..c6e6e3638 100644 --- a/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap +++ b/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap @@ -3,7 +3,7 @@ exports[`warning icon 1`] = `
); }; diff --git a/src/routes/settings/costModels/components/rateForm/rateForm.tsx b/src/routes/settings/costModels/components/rateForm/rateForm.tsx index cf0f47f4b..6a1c883ee 100644 --- a/src/routes/settings/costModels/components/rateForm/rateForm.tsx +++ b/src/routes/settings/costModels/components/rateForm/rateForm.tsx @@ -226,8 +226,8 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn updateDefaultTag={updateDefaultTag} updateTag={updateTag} /> - )} diff --git a/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx b/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx index 8dd783b5f..e411fad5b 100644 --- a/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx +++ b/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx @@ -91,13 +91,12 @@ const TaggingRatesFormBase: React.FC = ({  
}> + > diff --git a/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap b/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap index c080cca6b..8496b4d09 100644 --- a/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap +++ b/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap @@ -2,7 +2,7 @@ exports[`dialog title renders correctly with icon and title text 1`] = ` Test dialog diff --git a/src/routes/settings/costModels/costModel/addRateModal.tsx b/src/routes/settings/costModels/costModel/addRateModal.tsx index 335c6de4e..5d3daa802 100644 --- a/src/routes/settings/costModels/costModel/addRateModal.tsx +++ b/src/routes/settings/costModels/costModel/addRateModal.tsx @@ -1,4 +1,14 @@ -import { Alert, Button, ButtonVariant, Form, Modal } from '@patternfly/react-core'; +import { + Alert, + Button, + ButtonVariant, + Form, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, +} from '@patternfly/react-core'; import type { CostModelRequest } from 'api/costModels'; import type { CostModel } from 'api/costModels'; import type { MetricHash } from 'api/metrics'; @@ -59,13 +69,15 @@ export const AddRateModalBase: React.FC = ({ }, [isOpen]); return ( - + + +
+ {updateError && } + + +
+ , + , - ]} - > -
- {updateError && } - - + +
); }; diff --git a/src/routes/settings/costModels/costModel/addSourceStep.tsx b/src/routes/settings/costModels/costModel/addSourceStep.tsx index cf2388ac0..b3c51c64f 100644 --- a/src/routes/settings/costModels/costModel/addSourceStep.tsx +++ b/src/routes/settings/costModels/costModel/addSourceStep.tsx @@ -16,6 +16,7 @@ import { createMapStateToProps } from 'store/common'; import { sourcesActions, sourcesSelectors } from 'store/sourceSettings'; import { AssignSourcesToolbar } from './assignSourcesModalToolbar'; +import { styles } from './costModelInfo.styles'; interface AddSourcesStepOwnProps extends WrappedComponentProps { checked: { [uuid: string]: { selected: boolean; meta: Provider } }; @@ -230,6 +231,7 @@ class AddSourcesStepBase extends React.Component + + + + {updateApiError && } + + + + + {intl.formatMessage(messages.names, { count: 1 })} + + + + + {this.props.costModel.name} + + + + + {intl.formatMessage(messages.sourceType)} + + + + + {this.props.costModel.source_type} + + + + + + { + this.setState({ checked: newState }); + }} + /> + + + + , + , - ]} - > - - {updateApiError && } - - - - - {intl.formatMessage(messages.names, { count: 1 })} - - - - - {this.props.costModel.name} - - - - - {intl.formatMessage(messages.sourceType)} - - - - - {this.props.costModel.source_type} - - - - - - { - this.setState({ checked: newState }); - }} - /> - - + + ); } diff --git a/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx b/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx index 6c3d80b12..8d68f85ae 100644 --- a/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx +++ b/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx @@ -70,8 +70,8 @@ export const AssignSourcesToolbarBase: React.FC = }> - - + + - - - } - headingLevel="h2" - /> - - {intl.formatMessage(messages.costModelsUUIDEmptyStateDesc, { - uuid: this.props.router.params.uuid, - })} - - - + + + {intl.formatMessage(messages.costModelsUUIDEmptyStateDesc, { + uuid: this.props.router.params.uuid, + })} + + ); } @@ -114,20 +101,18 @@ class CostModelInfo extends React.Component + <>
this.setState({ tabIndex })} /> -
+ {current.source_type === 'OpenShift Container Platform' ? ( <> ) : ( <> )} -
-
+ + ); } } diff --git a/src/routes/settings/costModels/costModel/costModelsDetails.styles.ts b/src/routes/settings/costModels/costModel/costModelsDetails.styles.ts index efd594557..73cd670f0 100644 --- a/src/routes/settings/costModels/costModel/costModelsDetails.styles.ts +++ b/src/routes/settings/costModels/costModel/costModelsDetails.styles.ts @@ -1,7 +1,7 @@ -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 global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'; +import t_global_background_color_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_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 = { @@ -10,62 +10,29 @@ export const styles = { wordWrap: 'break-word', }, content: { - paddingTop: global_spacer_lg.value, + paddingTop: t_global_spacer_lg.value, height: '182vh', }, - costmodelsContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - paddingLeft: global_spacer_lg.value, - paddingRight: global_spacer_lg.value, - }, currency: { - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_lg.value, - }, - tableContainer: { - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - }, - paginationContainer: { - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - paddingLeft: global_spacer_lg.value, - paddingRight: global_spacer_lg.value, - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - marginBottom: global_spacer_lg.value, - backgroundColor: global_BackgroundColor_light_100.value, - }, - toolbarContainer: { - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, - marginLeft: global_spacer_lg.value, - marginRight: global_spacer_lg.value, - backgroundColor: global_BackgroundColor_light_100.value, - }, - header: { - padding: global_spacer_lg.var, - backgroundColor: global_BackgroundColor_light_100.var, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_lg.value, }, headerContent: { display: 'flex', justifyContent: 'space-between', }, headerCostModel: { - padding: global_spacer_lg.value, + padding: t_global_spacer_lg.value, paddingBottom: 0, - backgroundColor: global_BackgroundColor_light_100.var, + backgroundColor: t_global_background_color_100.var, }, breadcrumb: { - paddingBottom: global_spacer_md.var, + paddingBottom: t_global_spacer_md.var, }, title: { - paddingBottom: global_spacer_sm.var, + paddingBottom: t_global_spacer_sm.var, }, sourceTypeTitle: { - paddingBottom: global_spacer_md.var, + paddingBottom: t_global_spacer_md.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/costModels/costModel/dialog.tsx b/src/routes/settings/costModels/costModel/dialog.tsx index e0103402c..a2c6c1c5d 100644 --- a/src/routes/settings/costModels/costModel/dialog.tsx +++ b/src/routes/settings/costModels/costModel/dialog.tsx @@ -1,4 +1,4 @@ -import { Alert, Button, Modal } from '@patternfly/react-core'; +import { Alert, Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { intl as defaultIntl } from 'components/i18n'; import messages from 'locales/messages'; import React from 'react'; @@ -50,13 +50,14 @@ const DialogBase: React.FC = ({ aria-label={title} isOpen={isOpen} onClose={onClose} - actions={actions} - title={title} - titleIconVariant="warning" - variant={isSmall ? 'small' : 'default'} + variant={isSmall ? ModalVariant.small : ModalVariant.default} > - {error && } - {body} + + + {error && } + {body} + + {actions} ); }; diff --git a/src/routes/settings/costModels/costModel/header.tsx b/src/routes/settings/costModels/costModel/header.tsx index 270376f1d..ca92ce826 100644 --- a/src/routes/settings/costModels/costModel/header.tsx +++ b/src/routes/settings/costModels/costModel/header.tsx @@ -1,6 +1,8 @@ import { Breadcrumb, BreadcrumbItem, + Content, + ContentVariants, List, ListItem, Split, @@ -8,11 +10,6 @@ import { Tab, Tabs, TabTitleText, - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, Title, TitleSizes, } from '@patternfly/react-core'; @@ -168,18 +165,16 @@ const Header: React.FC = ({ /> - - - - {intl.formatMessage(messages.costModelsLastUpdated)} - - {dateTime} - {intl.formatMessage(messages.currency)} - + + + {intl.formatMessage(messages.costModelsLastUpdated)} + {dateTime} + {intl.formatMessage(messages.currency)} + {intl.formatMessage(messages.currencyOptions, { units: current.currency || 'USD' })} - - - + + + {current.source_type === 'OpenShift Container Platform' ? ( onSelectTab(index)}> - - } - headingLevel="h2" - /> + {intl.formatMessage(messages.priceListEmptyRateDesc)} @@ -357,35 +343,29 @@ class PriceListTable extends React.Component - - - - - - this.setState({ - pagination: { ...this.state.pagination, page }, - }) - } - onPerPageSelect={(_evt, perPage) => - this.setState({ - pagination: { page: 1, perPage }, - }) - } - titles={{ - paginationAriaLabel: intl.formatMessage(messages.paginationTitle, { - title: intl.formatMessage(messages.priceList), - placement: 'bottom', - }), - }} - variant="bottom" - /> - - - + + this.setState({ + pagination: { ...this.state.pagination, page }, + }) + } + onPerPageSelect={(_evt, perPage) => + this.setState({ + pagination: { page: 1, perPage }, + }) + } + style={styles.pagination} + titles={{ + paginationAriaLabel: intl.formatMessage(messages.paginationTitle, { + title: intl.formatMessage(messages.priceList), + placement: 'bottom', + }), + }} + variant="bottom" + /> )} diff --git a/src/routes/settings/costModels/costModel/sourcesTable.tsx b/src/routes/settings/costModels/costModel/sourcesTable.tsx index 03b9ee65c..3f2023a40 100644 --- a/src/routes/settings/costModels/costModel/sourcesTable.tsx +++ b/src/routes/settings/costModels/costModel/sourcesTable.tsx @@ -58,14 +58,13 @@ const SourcesTable: React.FC = ({ canWrite, costModels, intl, + > diff --git a/src/routes/settings/costModels/costModel/sourcesToolbar.tsx b/src/routes/settings/costModels/costModel/sourcesToolbar.tsx index 57cbd8414..3c4d0ac70 100644 --- a/src/routes/settings/costModels/costModel/sourcesToolbar.tsx +++ b/src/routes/settings/costModels/costModel/sourcesToolbar.tsx @@ -72,10 +72,10 @@ export const SourcesToolbar: React.FC = ({ }> - + diff --git a/src/routes/settings/costModels/costModel/table.styles.ts b/src/routes/settings/costModels/costModel/table.styles.ts index 7c7b85bbf..9c7181bd3 100644 --- a/src/routes/settings/costModels/costModel/table.styles.ts +++ b/src/routes/settings/costModels/costModel/table.styles.ts @@ -1,3 +1,4 @@ +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { @@ -7,8 +8,6 @@ export const styles = { justifyContent: 'center', }, sourceTypeTitle: { - marginLeft: 20, - marginTop: 8, - marginBottom: 8, + marginBottom: t_global_spacer_md.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/costModels/costModel/table.tsx b/src/routes/settings/costModels/costModel/table.tsx index efab2048d..d2cb06acc 100644 --- a/src/routes/settings/costModels/costModel/table.tsx +++ b/src/routes/settings/costModels/costModel/table.tsx @@ -1,11 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, - Title, - TitleSizes, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, Title, TitleSizes } from '@patternfly/react-core'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import type { CostModel } from 'api/costModels'; import messages from 'locales/messages'; @@ -124,12 +117,11 @@ class TableBase extends React.Component { )} {rows.length === 0 && (
- - } - headingLevel="h2" - /> + {intl.formatMessage(messages.costModelsSourceEmptyStateTitle)}
diff --git a/src/routes/settings/costModels/costModel/updateCostModel.tsx b/src/routes/settings/costModels/costModel/updateCostModel.tsx index 27a373d66..df73b92ef 100644 --- a/src/routes/settings/costModels/costModel/updateCostModel.tsx +++ b/src/routes/settings/costModels/costModel/updateCostModel.tsx @@ -1,4 +1,16 @@ -import { Alert, Button, Form, FormGroup, Modal, TextArea, TextInput } from '@patternfly/react-core'; +import { + Alert, + Button, + Form, + FormGroup, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, + TextArea, + TextInput, +} from '@patternfly/react-core'; import type { CostModel } from 'api/costModels'; import messages from 'locales/messages'; import { cloneDeep } from 'lodash'; @@ -76,50 +88,12 @@ class UpdateCostModelBase extends React.Component setDialogOpen({ name: 'updateCostModel', isOpen: false })} - variant="small" - actions={[ - , - , - ]} + variant={ModalVariant.small} > - <> + + {updateError && }
@@ -160,7 +134,45 @@ class UpdateCostModelBase extends React.Component
- + + + + + ); } diff --git a/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx b/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx index 8d0dd5414..6e8a26684 100644 --- a/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx +++ b/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx @@ -2,15 +2,17 @@ import { Alert, Button, Checkbox, + Content, Form, FormGroup, Modal, + ModalBody, + ModalFooter, + ModalHeader, ModalVariant, Radio, Stack, StackItem, - Text, - TextContent, Title, TitleSizes, } from '@patternfly/react-core'; @@ -91,16 +93,97 @@ class UpdateDistributionDialogBase extends React.Component< const { error, current, intl, isLoading, onClose, updateCostModel } = this.props; return ( - {intl.formatMessage(messages.learnMore)} - - } isOpen onClose={() => onClose({ name: 'updateDistribution', isOpen: false })} variant={ModalVariant.medium} - actions={[ + > + + {intl.formatMessage(messages.learnMore)} + + } + title={intl.formatMessage(messages.costDistribution)} + /> + + + {error && } + + + {intl.formatMessage(messages.distributionType)} + + + + {intl.formatMessage(messages.distributionModelDesc)} + + + + +
+ + + + +
+ + + + {intl.formatMessage(messages.distributeCostsToProjects)} + + + +
+ + + + + + +
+ + + + , + , - ]} - > - - {error && } - - - {intl.formatMessage(messages.distributionType)} - - - {intl.formatMessage(messages.distributionModelDesc)} - - - -
- - - - -
- - - - {intl.formatMessage(messages.distributeCostsToProjects)} - - - -
- - - - - - -
- - + + ); } diff --git a/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx b/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx index 723f642b6..632a304fd 100644 --- a/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx +++ b/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx @@ -1,6 +1,7 @@ import { Alert, Button, + Content, Flex, FlexItem, Form, @@ -13,12 +14,13 @@ import { List, ListItem, Modal, + ModalBody, + ModalFooter, + ModalHeader, ModalVariant, Radio, Stack, StackItem, - Text, - TextContent, TextInput, Title, TitleSizes, @@ -110,12 +112,104 @@ class UpdateMarkupDialogBase extends React.Component onClose({ name: 'updateMarkup', isOpen: false })} - variant={ModalVariant.medium} - actions={[ + onClose({ name: 'updateMarkup', isOpen: false })} variant={ModalVariant.medium}> + + + + {error && } + + + + {intl.formatMessage(messages.markupOrDiscountModalDesc)} + + + + + + + {intl.formatMessage(messages.markupOrDiscount)} + + + + + + + + + + + +
+ + + + {isDiscount + ? intl.formatMessage(messages.discountMinus) + : intl.formatMessage(messages.markupPlus)} + + + + + + {intl.formatMessage(messages.percentSymbol)} + + + {validated === 'error' && ( + + {intl.formatMessage(helpText)} + + )} + +
+ + + + + + + + + {intl.formatMessage(messages.examplesTitle)} + + + + {intl.formatMessage(messages.costModelsExamplesNoAdjust)} + {intl.formatMessage(messages.costModelsExamplesDoubleMarkup)} + {intl.formatMessage(messages.costModelsExamplesReduceZero)} + {intl.formatMessage(messages.costModelsExamplesReduceSeventyfive)} + + + + + , + , - ]} - > - - {error && } - - - {intl.formatMessage(messages.markupOrDiscountModalDesc)} - - - - - - {intl.formatMessage(messages.markupOrDiscount)} - - - - - - - - - - - -
- - - - {isDiscount - ? intl.formatMessage(messages.discountMinus) - : intl.formatMessage(messages.markupPlus)} - - - - - - {intl.formatMessage(messages.percentSymbol)} - - - {validated === 'error' && ( - - {intl.formatMessage(helpText)} - - )} - -
- - - - - - - - - {intl.formatMessage(messages.examplesTitle)} - - - - {intl.formatMessage(messages.costModelsExamplesNoAdjust)} - {intl.formatMessage(messages.costModelsExamplesDoubleMarkup)} - {intl.formatMessage(messages.costModelsExamplesReduceZero)} - {intl.formatMessage(messages.costModelsExamplesReduceSeventyfive)} - - - + + ); } diff --git a/src/routes/settings/costModels/costModel/updateRateModel.test.tsx b/src/routes/settings/costModels/costModel/updateRateModel.test.tsx index 845509e79..33676e1ef 100644 --- a/src/routes/settings/costModels/costModel/updateRateModel.test.tsx +++ b/src/routes/settings/costModels/costModel/updateRateModel.test.tsx @@ -271,7 +271,7 @@ describe('update-rate', () => { render(); const descInput = screen.getByDisplayValue('openshift-aws-node'); - const saveButton = screen.getByText(regExp(messages.save)); + const saveButton = screen.getByRole('button', { name: regExp(messages.save)} ); expect(saveButton.getAttribute('disabled')).not.toBeNull(); await user.clear(descInput); @@ -289,45 +289,33 @@ describe('update-rate', () => { render(); - const saveButton = screen.getByText(regExp(messages.save)); + const saveButton = screen.getByRole('button', { name: regExp(messages.save)} ); + // Note: hidden is used because "RTL queries only find accessible elements by default, and some internal logic in + // Popper is setting the menu to aria-hidden after a selection is made the first time" await user.click(screen.getByLabelText('Select Measurement')); - options = await screen.findAllByRole('option'); + options = await screen.findAllByRole('option', { hidden: true}); await user.click(options[1]); - expect(saveButton.getAttribute('disabled')).toBeNull(); + expect(saveButton).not.toBeDisabled(); await user.click(screen.getByLabelText('Select Measurement')); - options = await screen.findAllByRole('option'); + options = await screen.findAllByRole('option', { hidden: true}); await user.click(options[0]); - expect(saveButton.getAttribute('disabled')).not.toBeNull(); + expect(saveButton).toBeDisabled(); await user.click(screen.getByLabelText('Select Metric')); - options = await screen.findAllByRole('option'); + options = await screen.findAllByRole('option', { hidden: true}); await user.click(options[1]); - await user.click(screen.getByLabelText('Select Measurement')); - options = await screen.findAllByRole('option'); - await user.click(options[5]); // Previous select options are not being removed from page - - expect(saveButton.getAttribute('disabled')).toBeNull(); - - await user.click(screen.getByLabelText('Select Metric')); - options = await screen.findAllByRole('option'); - await user.click(options[0]); - - await user.click(screen.getByLabelText('Select Measurement')); - options = await screen.findAllByRole('option'); - await user.click(options[0]); - - expect(saveButton.getAttribute('disabled')).not.toBeNull(); + expect(saveButton).not.toBeDisabled(); }, 10000); test('regular', async () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); render(); - const saveButton = screen.getByText(regExp(messages.save)); + const saveButton = screen.getByRole('button', { name: regExp(messages.save)} ); await user.click(screen.getByLabelText(/infrastructure/i)); expect(saveButton.getAttribute('disabled')).toBeNull(); @@ -351,7 +339,7 @@ describe('update-rate', () => { test('tag', async () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); render(); - const saveButton = screen.getByText(regExp(messages.save)); + const saveButton = screen.getByRole('button', { name: regExp(messages.save)} ); expect(saveButton.getAttribute('disabled')).not.toBeNull(); await user.type(screen.getByDisplayValue(/^container$/i), '1'); expect(saveButton.getAttribute('disabled')).toBeNull(); diff --git a/src/routes/settings/costModels/costModel/updateRateModel.tsx b/src/routes/settings/costModels/costModel/updateRateModel.tsx index b57dcf706..e87b13558 100644 --- a/src/routes/settings/costModels/costModel/updateRateModel.tsx +++ b/src/routes/settings/costModels/costModel/updateRateModel.tsx @@ -1,4 +1,14 @@ -import { Alert, Button, Modal, Stack, StackItem } from '@patternfly/react-core'; +import { + Alert, + Button, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + ModalVariant, + Stack, + StackItem, +} from '@patternfly/react-core'; import type { CostModelRequest } from 'api/costModels'; import type { MetricHash } from 'api/metrics'; import { intl as defaultIntl } from 'components/i18n'; @@ -102,12 +112,28 @@ const UpdateRateModalBase: React.FC = ({ return ( + + + + {updateError && ( + + + + )} + +
+ + +
+ + + , + , - ]} - > - - {updateError && ( - - - - )} - -
- - -
- + + ); }; diff --git a/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx b/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx index 3d49c4940..dec9d0b2e 100644 --- a/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx +++ b/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx @@ -70,8 +70,8 @@ export const AssignSourcesToolbarBase: React.FC = }> - - + + = ({ // Todo: Remove key={newSteps.length} workaround -- see https://github.com/patternfly/patternfly-react/issues/9752 return ( - + + <Icon status="warning"> <ExclamationTriangleIcon /> </Icon>{' '} {intl.formatMessage(messages.createCostModelExit)} - } - onClose={closeConfirmDialog} - actions={[OkButton, CancelButton]} - variant="small" - > - {intl.formatMessage(messages.createCostModelConfirmMsg)} + + {intl.formatMessage(messages.createCostModelConfirmMsg)} + + {OkButton} + {CancelButton} + ); diff --git a/src/routes/settings/costModels/costModelWizard/distribution.tsx b/src/routes/settings/costModels/costModelWizard/distribution.tsx index 022655c24..1854a4cc6 100644 --- a/src/routes/settings/costModels/costModelWizard/distribution.tsx +++ b/src/routes/settings/costModels/costModelWizard/distribution.tsx @@ -1,14 +1,4 @@ -import { - Checkbox, - FormGroup, - Radio, - Stack, - StackItem, - Text, - TextContent, - Title, - TitleSizes, -} from '@patternfly/react-core'; +import { Checkbox, Content, FormGroup, Radio, Stack, StackItem, Title, TitleSizes } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -62,11 +52,13 @@ class DistributionBase extends React.Component {intl.formatMessage(messages.distributionType)} - - {intl.formatMessage(messages.distributionModelDesc)} - + + + {intl.formatMessage(messages.distributionModelDesc)} + + - +
- + {intl.formatMessage(messages.markupOrDiscount)} - - {intl.formatMessage(messages.markupOrDiscountModalDesc)} - + + {intl.formatMessage(messages.markupOrDiscountModalDesc)} + @@ -155,9 +154,9 @@ class MarkupWithDistributionBase extends React.Component
- - {intl.formatMessage(messages.examplesTitle)} - + + {intl.formatMessage(messages.examplesTitle)} + {intl.formatMessage(messages.costModelsExamplesNoAdjust)} {intl.formatMessage(messages.costModelsExamplesDoubleMarkup)} diff --git a/src/routes/settings/costModels/costModelWizard/priceListTable.tsx b/src/routes/settings/costModels/costModelWizard/priceListTable.tsx index cd75a9422..3792e0ecc 100644 --- a/src/routes/settings/costModels/costModelWizard/priceListTable.tsx +++ b/src/routes/settings/costModels/costModelWizard/priceListTable.tsx @@ -1,15 +1,12 @@ import { Bullseye, Button, + Content, EmptyState, EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, Pagination, Stack, StackItem, - Text, - TextContent, Title, TitleSizes, } from '@patternfly/react-core'; @@ -92,12 +89,11 @@ class PriceListTable extends React.Component ( - - } - headingLevel="h2" - /> + {intl.formatMessage(messages.costModelsWizardEmptyStateSkipStep, { value: {intl.formatMessage(messages.next)}, @@ -120,9 +116,9 @@ class PriceListTable extends React.Component - - {intl.formatMessage(messages.costModelsWizardSubTitleTable)} - + + {intl.formatMessage(messages.costModelsWizardSubTitleTable)} + = ({ intl }) => ( {({ onClose, name }) => ( - - - - - } - headingLevel="h2" - /> + {intl.formatMessage(messages.costModelsWizardReviewStatusSubTitle, { value: name })} @@ -102,95 +85,83 @@ const ReviewDetailsBase: React.FC = ({ intl }) => ( - - + + {intl.formatMessage(messages.costModelsWizardReviewStatusSubDetails, { create: {intl.formatMessage(messages.create)}, back: {intl.formatMessage(messages.back)}, })} - - + + - - - - {intl.formatMessage(messages.names, { count: 1 })} - - {name} - - {intl.formatMessage(messages.description)} - - {description} - - {intl.formatMessage(messages.currency)} - - + + + {intl.formatMessage(messages.names, { count: 1 })} + {name} + {intl.formatMessage(messages.description)} + {description} + {intl.formatMessage(messages.currency)} + {intl.formatMessage(messages.currencyOptions, { units: currencyUnits })} - + {type === 'OCP' && ( <> - - {intl.formatMessage(messages.priceList)} - - + {intl.formatMessage(messages.priceList)} + {tiers.length > 0 ? ( ) : ( intl.formatMessage(messages.costModelsWizardNoRatesAdded) )} - + )} - + {intl.formatMessage(messages.costModelsWizardReviewMarkDiscount)} - - + + {intl.formatMessage(messages.percent, { value: isDiscount ? '-' + markup : markup })} - + {type === 'OCP' && ( <> - - {intl.formatMessage(messages.costDistribution)} - - + {intl.formatMessage(messages.costDistribution)} + {intl.formatMessage(messages.distributionTypeDesc, { type: distribution })} - - + + {intl.formatMessage(messages.distributePlatformCosts, { value: distributePlatformUnallocated, })} - - + + {intl.formatMessage(messages.distributeUnallocatedCapacity, { value: distributeWorkerUnallocated, })} - - + + {intl.formatMessage(messages.distributeCosts, { value: distributeNetwork, type: 'network', })} - - + + {intl.formatMessage(messages.distributeCosts, { value: distributeStorage, type: 'storage', })} - + )} - + {intl.formatMessage(messages.costModelsAssignSources, { count: 2 })}{' '} {selectedSources.find(src => Boolean(src.costmodel)) && ( )} - - - {selectedSources.map(r => r.name).join(', ')} - - - + + {selectedSources.map(r => r.name).join(', ')} + + diff --git a/src/routes/settings/costModels/costModelWizard/table.tsx b/src/routes/settings/costModels/costModelWizard/table.tsx index b30e0c419..3e4d16f26 100644 --- a/src/routes/settings/costModels/costModelWizard/table.tsx +++ b/src/routes/settings/costModels/costModelWizard/table.tsx @@ -1,4 +1,4 @@ -import { Checkbox, Stack, StackItem, Text, TextContent, TextVariants, Title, TitleSizes } from '@patternfly/react-core'; +import { Checkbox, Content, ContentVariants, Stack, StackItem, Title, TitleSizes } from '@patternfly/react-core'; import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import messages from 'locales/messages'; import React from 'react'; @@ -38,18 +38,18 @@ const SourcesTable: React.FC = ({ intl }) => { - - {intl.formatMessage(messages.costModelsWizardSourceSubtitle)} - + + {intl.formatMessage(messages.costModelsWizardSourceSubtitle)} + - - + + {intl.formatMessage(messages.costModelsWizardSourceCaption, { value: type.toLowerCase(), })} - - + + = props => { onPerPageSelect, } = props; return ( - - - - - - - + ); }; diff --git a/src/routes/settings/costModels/costModelsDetails/costModelsDetails.styles.ts b/src/routes/settings/costModels/costModelsDetails/costModelsDetails.styles.ts index c6af422cc..23b8b485d 100644 --- a/src/routes/settings/costModels/costModelsDetails/costModelsDetails.styles.ts +++ b/src/routes/settings/costModels/costModelsDetails/costModelsDetails.styles.ts @@ -1,10 +1,12 @@ -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 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 = { - descContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - padding: global_spacer_md.value, + paginationContainer: { + marginTop: t_global_spacer_sm.var, + }, + tableContainer: { + marginTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/costModels/costModelsDetails/costModelsDetails.tsx b/src/routes/settings/costModels/costModelsDetails/costModelsDetails.tsx index 09576a786..011725287 100644 --- a/src/routes/settings/costModels/costModelsDetails/costModelsDetails.tsx +++ b/src/routes/settings/costModels/costModelsDetails/costModelsDetails.tsx @@ -1,4 +1,4 @@ -import { PageSection } from '@patternfly/react-core'; +import { Card, CardBody } from '@patternfly/react-core'; import messages from 'locales/messages'; import { parse, stringify } from 'qs'; import React from 'react'; @@ -48,8 +48,8 @@ class CostModelsDetailsBase extends React.Component const { intl } = this.props; return ( - -
+ + {intl.formatMessage(messages.costModelsDesc, { learnMore: ( @@ -57,13 +57,17 @@ class CostModelsDetailsBase extends React.Component ), })} -
- - - - - - + + +
+ + +
+ +
+
+ + ); } } diff --git a/src/routes/settings/costModels/costModelsDetails/dialog.test.tsx b/src/routes/settings/costModels/costModelsDetails/dialog.test.tsx index 15ce3eb02..b7a239e5b 100644 --- a/src/routes/settings/costModels/costModelsDetails/dialog.test.tsx +++ b/src/routes/settings/costModels/costModelsDetails/dialog.test.tsx @@ -74,11 +74,11 @@ test('delete dialog open', async () => { }, }; renderUI(state); - expect(screen.queryAllByText(regExp(messages.costModelsDelete))).toHaveLength(2); + expect(screen.getAllByRole('button', { name: regExp(messages.costModelsDelete)})).toHaveLength(1); expect(screen.queryAllByText(/This action will delete/i)).toHaveLength(1); - expect(screen.queryAllByText(/The following sources are assigned to/i)).toHaveLength(0); - await act(async () => user.click(screen.getAllByText(regExp(messages.costModelsDelete))[1])); - expect(screen.getAllByText(regExp(messages.costModelsDelete))[1].getAttribute('disabled')).not.toBeNull(); + expect(screen.queryAllByText(/The following integrations are assigned to/i)).toHaveLength(0); + await act(async () => user.click(screen.getAllByRole('button', { name: regExp(messages.costModelsDelete)})[0])); + expect(screen.getAllByRole('button', { name: regExp(messages.costModelsDelete)})[0].getAttribute('disabled')).not.toBeNull(); }); test('delete dialog error', async () => { diff --git a/src/routes/settings/costModels/costModelsDetails/dialog.tsx b/src/routes/settings/costModels/costModelsDetails/dialog.tsx index 0fd7c1981..293999122 100644 --- a/src/routes/settings/costModels/costModelsDetails/dialog.tsx +++ b/src/routes/settings/costModels/costModelsDetails/dialog.tsx @@ -1,7 +1,7 @@ -import type { ModalProps } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { intl as defaultIntl } from 'components/i18n'; import messages from 'locales/messages'; +import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; @@ -11,6 +11,34 @@ import { costModelsActions, costModelsSelectors } from 'store/costModels'; import { DeleteDialogActions, DeleteDialogBody, getDialogStateName } from './utils/dialog'; +export interface ReportSummaryProps extends WrappedComponentProps { + actions?: React.ReactNode; + ariaLabel?: string; + children?: React.ReactNode; + isOpen?: boolean; + onClose?: () => void; + title?: string; + titleIconVariant?: 'warning'; + variant?: ModalVariant; +} + +const DeleteDialogBase: React.FC = ({ + actions, + ariaLabel: ariaLabel, + children, + isOpen, + onClose, + title, + titleIconVariant, + variant, +}) => ( + + + {children} + {actions} + +); + const mapStateToProps = (state: RootState) => { return { isOpen: costModelsSelectors.isDialogOpen(state)('costmodel').deleteCostModel, @@ -61,14 +89,14 @@ const mergeProps = ( actions, isOpen: stateName !== 'close', variant: ModalVariant.small, - 'aria-label': intl.formatMessage(messages.costModelsDelete), + ariaLabel: intl.formatMessage(messages.costModelsDelete), title: intl.formatMessage(messages.costModelsDelete), titleIconVariant: 'warning', onClose: dispatchProps.closeDialog, children, - } as ModalProps; + }; }; -const DeleteDialog = injectIntl(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Modal)); +const DeleteDialog = injectIntl(connect(mapStateToProps, mapDispatchToProps, mergeProps)(DeleteDialogBase)); export default DeleteDialog; diff --git a/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx b/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx index 45f032b9d..b684cd76c 100644 --- a/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx +++ b/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx @@ -1,4 +1,4 @@ -import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core'; import React from 'react'; interface EmptyStateBaseProps { @@ -10,8 +10,7 @@ interface EmptyStateBaseProps { function EmptyStateBase(props: EmptyStateBaseProps): JSX.Element { return ( - - } headingLevel="h2" /> + {props.description} {props.actions ? props.actions : null} diff --git a/src/routes/settings/costModels/costModelsDetails/table.tsx b/src/routes/settings/costModels/costModelsDetails/table.tsx index 153985077..dd24a67f4 100644 --- a/src/routes/settings/costModels/costModelsDetails/table.tsx +++ b/src/routes/settings/costModels/costModelsDetails/table.tsx @@ -137,14 +137,13 @@ class CostModelsTableBase extends React.Component + > )} diff --git a/src/routes/settings/costModels/costModelsDetails/utils/dialog.tsx b/src/routes/settings/costModels/costModelsDetails/utils/dialog.tsx index d932b12e8..12be2b3cb 100644 --- a/src/routes/settings/costModels/costModelsDetails/utils/dialog.tsx +++ b/src/routes/settings/costModels/costModelsDetails/utils/dialog.tsx @@ -3,13 +3,10 @@ import { AlertVariant, Button, ButtonVariant, + Content, + ContentVariants, Stack, StackItem, - Text, - TextContent, - TextList, - TextListItem, - TextListVariants, } from '@patternfly/react-core'; import React from 'react'; @@ -62,19 +59,21 @@ function CannotDeleteContent({ head, body, sources }: CannotDeleteContentProps): return ( - - {head} - + + {head} + - - {body} - + + {body} + {sources.map(source => ( - {source} + + {source} + ))} - - + + ); diff --git a/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx b/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx index 269e62918..2cc1fe9c4 100644 --- a/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx +++ b/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx @@ -143,7 +143,12 @@ const DescriptionFilterBase: React.FC = ({ /> ) : null; return ( - + {children} ); @@ -218,7 +223,12 @@ const NameFilterBase: React.FC = ({ /> ) : null; return ( - + {children} ); @@ -310,7 +320,12 @@ const SourceTypeFilterBase: React.FC = ({ /> ) : null; return ( - + {children} ); diff --git a/src/routes/settings/platformProjects/platformProjects.scss b/src/routes/settings/platformProjects/platformProjects.scss index 31a1a9a99..0006032db 100644 --- a/src/routes/settings/platformProjects/platformProjects.scss +++ b/src/routes/settings/platformProjects/platformProjects.scss @@ -1,5 +1,5 @@ @media only screen and (min-width: 1450px) { - .pf-v5-c-table__td { + .pf-v6-c-table__td { &.defaultColumn { width: 70%; } diff --git a/src/routes/settings/platformProjects/platformProjects.styles.ts b/src/routes/settings/platformProjects/platformProjects.styles.ts index 19d3215ba..dd942d14c 100644 --- a/src/routes/settings/platformProjects/platformProjects.styles.ts +++ b/src/routes/settings/platformProjects/platformProjects.styles.ts @@ -1,20 +1,16 @@ -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 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 = { action: { - marginLeft: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, }, - descContainer: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingLeft: global_spacer_md.value, - paddingRight: global_spacer_md.value, - paddingTop: global_spacer_md.value, + paginationContainer: { + marginTop: t_global_spacer_sm.var, }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + tableContainer: { + marginTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/platformProjects/platformProjects.tsx b/src/routes/settings/platformProjects/platformProjects.tsx index 7eed9e24f..c62ed45ad 100644 --- a/src/routes/settings/platformProjects/platformProjects.tsx +++ b/src/routes/settings/platformProjects/platformProjects.tsx @@ -1,4 +1,4 @@ -import { PageSection, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Card, CardBody, Pagination, PaginationVariant } from '@patternfly/react-core'; import type { Query } from 'api/queries/query'; import { getQuery } from 'api/queries/query'; import type { Settings } from 'api/settings'; @@ -11,8 +11,8 @@ import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; 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 { LoadingState } from 'routes/components/state/loadingState'; import * as queryUtils from 'routes/utils/query'; import type { RootState } from 'store'; import { FetchStatus } from 'store/common'; @@ -221,8 +221,8 @@ const PlatformProjects: React.FC = ({ canWrite }) => { return ; } return ( - -
+ + {intl.formatMessage(messages.platformProjectsDesc, { learnMore: ( @@ -230,17 +230,19 @@ const PlatformProjects: React.FC = ({ canWrite }) => { ), })} -
- {getToolbar(categories)} - {settingsStatus === FetchStatus.inProgress ? ( - - ) : ( - <> - {getTable()} -
{getPagination(isDisabled, true)}
- - )} - +
+ {getToolbar(categories)} + {settingsStatus === FetchStatus.inProgress ? ( + + ) : ( + <> + {getTable()} +
{getPagination(isDisabled, true)}
+ + )} +
+ + ); }; diff --git a/src/routes/settings/settings.scss b/src/routes/settings/settings.scss deleted file mode 100644 index 41f95abea..000000000 --- a/src/routes/settings/settings.scss +++ /dev/null @@ -1,5 +0,0 @@ -.tabsOverride { - .pf-v5-c-tabs { - --pf-v5-c-tabs--before--border-width--base: 0px; - } -} diff --git a/src/routes/settings/settings.styles.ts b/src/routes/settings/settings.styles.ts index a27259da9..c20665af6 100644 --- a/src/routes/settings/settings.styles.ts +++ b/src/routes/settings/settings.styles.ts @@ -1,20 +1,15 @@ -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 t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg'; import type React from 'react'; export const styles = { - header: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingLeft: global_spacer_lg.var, - paddingRight: global_spacer_lg.var, - paddingTop: global_spacer_lg.var, + headerContainer: { + paddingBottom: 0, }, headerContent: { display: 'flex', justifyContent: 'space-between', }, tabs: { - backgroundColor: global_BackgroundColor_light_100.var, - paddingTop: global_spacer_lg.var, + paddingTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/settings.tsx b/src/routes/settings/settings.tsx index 563de7688..16bd806e3 100644 --- a/src/routes/settings/settings.tsx +++ b/src/routes/settings/settings.tsx @@ -1,6 +1,4 @@ -import './settings.scss'; - -import { Tab, TabContent, Tabs, TabTitleText, Title, TitleSizes } from '@patternfly/react-core'; +import { PageSection, Tab, TabContent, Tabs, TabTitleText, Title, TitleSizes } from '@patternfly/react-core'; import { getUserAccessQuery } from 'api/queries/userAccessQuery'; import type { UserAccess } from 'api/userAccess'; import { UserAccessType } from 'api/userAccess'; @@ -11,8 +9,8 @@ import React, { useState } from 'react'; import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; import { routes } from 'routes'; -import { Loading } from 'routes/components/page/loading'; import { NotAuthorized } from 'routes/components/page/notAuthorized'; +import { LoadingState } from 'routes/components/state/loadingState'; import { Calculations } from 'routes/settings/calculations'; import { CostModelsDetails } from 'routes/settings/costModels'; import { PlatformProjects } from 'routes/settings/platformProjects'; @@ -199,21 +197,23 @@ const Settings: React.FC = () => { const availableTabs = getAvailableTabs(); return ( -
-
-
- - {intl.formatMessage(messages.settingsTitle)} - -
- {userAccessFetchStatus === FetchStatus.inProgress ? ( - - ) : ( -
{getTabs(availableTabs)}
- )} -
-
{getTabContent(availableTabs)}
-
+ <> + +
+
+ + {intl.formatMessage(messages.settingsTitle)} + +
+ {userAccessFetchStatus === FetchStatus.inProgress ? ( + + ) : ( +
{getTabs(availableTabs)}
+ )} +
+ + {getTabContent(availableTabs)} + ); }; diff --git a/src/routes/settings/tagLabels/tagLabels.styles.ts b/src/routes/settings/tagLabels/tagLabels.styles.ts deleted file mode 100644 index 10204ce96..000000000 --- a/src/routes/settings/tagLabels/tagLabels.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -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 type React from 'react'; - -export const styles = { - container: { - backgroundColor: global_BackgroundColor_light_100.var, - padding: global_spacer_lg.var, - }, -} as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagLabels.tsx b/src/routes/settings/tagLabels/tagLabels.tsx index ccec295d9..48a676230 100644 --- a/src/routes/settings/tagLabels/tagLabels.tsx +++ b/src/routes/settings/tagLabels/tagLabels.tsx @@ -1,9 +1,8 @@ -import { Accordion, AccordionContent, AccordionItem, AccordionToggle, PageSection } from '@patternfly/react-core'; +import { Accordion, AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core'; import messages from 'locales/messages'; import React, { useState } from 'react'; import { useIntl } from 'react-intl'; -import { styles } from './tagLabels.styles'; import TagMapping from './tagMapping/tagMapping'; import { Tags } from './tags'; @@ -80,17 +79,16 @@ const TagLabels: React.FC = ({ canWrite }) => { return availableItems.map((val, index) => { const isExpanded = activeKey === index; return ( - + { handleOnToggle(_evt, index); }} > {val.label} - {getAccordionContent(val.item, index)} + {getAccordionContent(val.item, index)} ); }); @@ -98,13 +96,7 @@ const TagLabels: React.FC = ({ canWrite }) => { const availableItems = getAvailableItems(); - return ( - -
- {getAccordionItem(availableItems)} -
- - ); + return {getAccordionItem(availableItems)}; }; export default TagLabels; diff --git a/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.styles.ts b/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.styles.ts index 5e4601d38..f02d553e3 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.styles.ts +++ b/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.styles.ts @@ -1,7 +1,7 @@ -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 = { alertContainer: { - paddingBottom: global_spacer_md.value, + paddingBottom: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.tsx b/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.tsx index 0c4c946ca..4d39cee6d 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.tsx +++ b/src/routes/settings/tagLabels/tagMapping/components/childTagMapping/childTagMapping.tsx @@ -1,5 +1,4 @@ -import { Alert, Button } from '@patternfly/react-core'; -import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next'; +import { Alert, Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core'; import type { SettingsData } from 'api/settings'; import { SettingsType } from 'api/settings'; import type { AxiosError } from 'axios'; diff --git a/src/routes/settings/tagLabels/tagMapping/components/childTags/childTagsTable.styles.ts b/src/routes/settings/tagLabels/tagMapping/components/childTags/childTagsTable.styles.ts index 95218da16..c85185fa8 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/childTags/childTagsTable.styles.ts +++ b/src/routes/settings/tagLabels/tagMapping/components/childTags/childTagsTable.styles.ts @@ -1,15 +1,15 @@ -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 t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { loading: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, minHeight: '520px', }, pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + backgroundColor: t_global_background_color_100.value, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.scss b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.scss index 563ac152c..730d28c97 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.scss +++ b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.scss @@ -1,5 +1,5 @@ .iconOverride { - .pf-v5-c-modal-box__title-icon { - color: var(--pf-v5-global--warning-color--100); + .pf-v6-c-modal-box__title-icon { + color: var(--pf-t--global--color--status--warning--default); } } diff --git a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.tsx b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.tsx index 32985f805..e7890aa4a 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.tsx +++ b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMapping.tsx @@ -1,7 +1,6 @@ import './deleteTagMapping.scss'; -import { Button } from '@patternfly/react-core'; -import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next'; +import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core'; import type { SettingsData } from 'api/settings'; import type { SettingsType } from 'api/settings'; import type { AxiosError } from 'axios'; diff --git a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMappingAction.tsx b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMappingAction.tsx index c4e54fb0a..44b9bf315 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMappingAction.tsx +++ b/src/routes/settings/tagLabels/tagMapping/components/deleteTagMapping/deleteTagMappingAction.tsx @@ -31,14 +31,13 @@ const DeleteTagMappingAction: React.FC = ({ canWrit return getTooltip( + > ); }; diff --git a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.styles.ts b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.styles.ts index 81737fd94..aa7ffa09c 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.styles.ts +++ b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.styles.ts @@ -1,31 +1,31 @@ -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 t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +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 = { alert: { - marginBottom: global_FontSize_md.value, + marginBottom: t_global_font_size_md.value, }, descContainer: { - marginTop: global_FontSize_md.value, + marginTop: t_global_font_size_md.value, }, emptyState: { - margin: global_FontSize_md.value, + margin: t_global_font_size_md.value, }, icon: { - margin: global_FontSize_md.value, + margin: t_global_font_size_md.value, }, loading: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, minHeight: '520px', }, reviewDescContainer: { - marginBottom: global_FontSize_md.value, + marginBottom: t_global_font_size_md.value, }, reviewTable: { marginTop: '-10px', }, spacing: { - marginRight: global_FontSize_md.value, + marginRight: t_global_font_size_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.tsx b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.tsx index f46ced598..23977f37d 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.tsx +++ b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMapping.tsx @@ -1,6 +1,8 @@ import { Button, ButtonVariant, + Modal, + ModalVariant, Title, TitleSizes, Tooltip, @@ -8,7 +10,6 @@ import { WizardHeader, WizardStep, } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core/next'; import type { SettingsData } from 'api/settings'; import { SettingsType } from 'api/settings'; import type { AxiosError } from 'axios'; @@ -75,7 +76,7 @@ const ParentTagMapping: React.FC = ({ const getSuccessEmptyState = () => { return ( -
+
= ({ const intl = useIntl(); return ( - - - - - } - headingLevel="h5" - /> + {intl.formatMessage(messages.tagMappingWizardSuccessDesc, { learnMore: ( diff --git a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMappingReview.tsx b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMappingReview.tsx index 31d3fdd3a..dcb6dd4c1 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMappingReview.tsx +++ b/src/routes/settings/tagLabels/tagMapping/components/parentTagMapping/parentTagMappingReview.tsx @@ -1,16 +1,4 @@ -import { - Alert, - Stack, - StackItem, - Text, - TextContent, - TextList, - TextListItem, - TextListItemVariants, - TextListVariants, - Title, - TitleSizes, -} from '@patternfly/react-core'; +import { Alert, Content, ContentVariants, Stack, StackItem, Title, TitleSizes } from '@patternfly/react-core'; import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import type { SettingsData } from 'api/settings'; import type { AxiosError } from 'axios'; @@ -51,34 +39,28 @@ const ParentTagMappingReview: React.FC = ({ - - + + {intl.formatMessage(messages.tagMappingWizardReviewDesc, { create: {intl.formatMessage(messages.create)}, back: {intl.formatMessage(messages.back)}, })} - - + + - - - - {intl.formatMessage(messages.tagKeyParent)} - - {parentTags.map(item => item.key)} - - {intl.formatMessage(messages.tagKeyParentSource)} - - + + + {intl.formatMessage(messages.tagKeyParent)} + {parentTags.map(item => item.key)} + {intl.formatMessage(messages.tagKeyParentSource)} + {parentTags.map(item => intl.formatMessage(messages.sourceTypes, { value: item?.source_type?.toLowerCase() }) )} - - - {intl.formatMessage(messages.tagKeyChild)} - - + + {intl.formatMessage(messages.tagKeyChild)} +
= ({
- - - + + + diff --git a/src/routes/settings/tagLabels/tagMapping/components/parentTags/parentTagsTable.styles.ts b/src/routes/settings/tagLabels/tagMapping/components/parentTags/parentTagsTable.styles.ts index 95218da16..c85185fa8 100644 --- a/src/routes/settings/tagLabels/tagMapping/components/parentTags/parentTagsTable.styles.ts +++ b/src/routes/settings/tagLabels/tagMapping/components/parentTags/parentTagsTable.styles.ts @@ -1,15 +1,15 @@ -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 t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100'; +import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md'; import type React from 'react'; export const styles = { loading: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: t_global_background_color_100.value, minHeight: '520px', }, pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + backgroundColor: t_global_background_color_100.value, + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagMapping/tagMapping.styles.ts b/src/routes/settings/tagLabels/tagMapping/tagMapping.styles.ts index fd7b8a0a8..b4a5de529 100644 --- a/src/routes/settings/tagLabels/tagMapping/tagMapping.styles.ts +++ b/src/routes/settings/tagLabels/tagMapping/tagMapping.styles.ts @@ -1,29 +1,30 @@ -import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; -import global_spacer_2xl from '@patternfly/react-tokens/dist/js/global_spacer_2xl'; -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_spacer_2xl from '@patternfly/react-tokens/dist/js/t_global_spacer_2xl'; +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 = { action: { - marginLeft: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, }, childActionColumn: { - paddingRight: global_spacer_2xl.value, + paddingRight: t_global_spacer_2xl.value, }, childSourceTypeColumn: { - paddingRight: global_spacer_sm.value, + paddingRight: t_global_spacer_sm.value, }, childTagKeyColumn: { - paddingLeft: global_spacer_lg.value, + paddingLeft: t_global_spacer_lg.value, }, emptyStateContainer: { - paddingTop: global_spacer_md.value, + paddingTop: t_global_spacer_md.value, }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + paginationContainer: { + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_sm.value, + }, + tableContainer: { + marginTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tagMapping/tagMapping.tsx b/src/routes/settings/tagLabels/tagMapping/tagMapping.tsx index 160b28076..2d45975b5 100644 --- a/src/routes/settings/tagLabels/tagMapping/tagMapping.tsx +++ b/src/routes/settings/tagLabels/tagMapping/tagMapping.tsx @@ -181,19 +181,21 @@ const TagMapping: React.FC = ({ canWrite }) => { warning: {intl.formatMessage(messages.tagMappingWarning)}, })}
- {hasMappings && getToolbar(mappings)} - {settingsStatus === FetchStatus.inProgress ? ( - - ) : hasMappings ? ( - <> - {getTable()} -
{getPagination(isDisabled, true)}
- - ) : ( -
- -
- )} +
+ {hasMappings && getToolbar(mappings)} + {settingsStatus === FetchStatus.inProgress ? ( + + ) : hasMappings ? ( + <> + {getTable()} +
{getPagination(isDisabled, true)}
+ + ) : ( +
+ +
+ )} +
); }; diff --git a/src/routes/settings/tagLabels/tagMapping/tagMappingEmptyState.tsx b/src/routes/settings/tagLabels/tagMapping/tagMappingEmptyState.tsx index c5964cb81..97c4dd66f 100644 --- a/src/routes/settings/tagLabels/tagMapping/tagMappingEmptyState.tsx +++ b/src/routes/settings/tagLabels/tagMapping/tagMappingEmptyState.tsx @@ -3,8 +3,6 @@ import { EmptyStateActions, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; @@ -29,12 +27,13 @@ const TagMappingEmptyState: React.FC = ({ const intl = useIntl(); return ( - - } - headingLevel="h5" - /> + {intl.formatMessage(messages.noMappedTagsDesc, { learnMore: ( diff --git a/src/routes/settings/tagLabels/tags/tags.styles.ts b/src/routes/settings/tagLabels/tags/tags.styles.ts index 690536658..152e326ff 100644 --- a/src/routes/settings/tagLabels/tags/tags.styles.ts +++ b/src/routes/settings/tagLabels/tags/tags.styles.ts @@ -1,14 +1,17 @@ -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 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 = { action: { - marginLeft: global_spacer_md.var, + marginLeft: t_global_spacer_md.var, }, - pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + paginationContainer: { + paddingBottom: t_global_spacer_md.value, + paddingTop: t_global_spacer_sm.value, + }, + tableContainer: { + marginTop: t_global_spacer_lg.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/settings/tagLabels/tags/tags.tsx b/src/routes/settings/tagLabels/tags/tags.tsx index 805b19d55..7650a1ad3 100644 --- a/src/routes/settings/tagLabels/tags/tags.tsx +++ b/src/routes/settings/tagLabels/tags/tags.tsx @@ -222,25 +222,25 @@ const Tags: React.FC = ({ canWrite }) => { return ( <> -
- {intl.formatMessage(messages.tagDesc, { - count: enabledTagsLimit, - learnMore: ( - - {intl.formatMessage(messages.learnMore)} - - ), - })} + {intl.formatMessage(messages.tagDesc, { + count: enabledTagsLimit, + learnMore: ( + + {intl.formatMessage(messages.learnMore)} + + ), + })} +
+ {getToolbar(tags)} + {settingsStatus === FetchStatus.inProgress ? ( + + ) : ( + <> + {getTable()} +
{getPagination(isDisabled, true)}
+ + )}
- {getToolbar(tags)} - {settingsStatus === FetchStatus.inProgress ? ( - - ) : ( - <> - {getTable()} -
{getPagination(isDisabled, true)}
- - )} ); }; diff --git a/src/store/accountSettings/accountSettingsActions.ts b/src/store/accountSettings/accountSettingsActions.ts index f0afacc48..e6c288123 100644 --- a/src/store/accountSettings/accountSettingsActions.ts +++ b/src/store/accountSettings/accountSettingsActions.ts @@ -1,5 +1,5 @@ +import { addNotification } from '@ausuliv/frontend-components-notifications/redux'; import { AlertVariant } from '@patternfly/react-core'; -import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import type { AccountSettings, AccountSettingsPayload, AccountSettingsType } from 'api/accountSettings'; import { fetchAccountSettings as apiFetchAccountSettings, diff --git a/src/store/costModels/actions.ts b/src/store/costModels/actions.ts index 642a58dab..ddb477697 100644 --- a/src/store/costModels/actions.ts +++ b/src/store/costModels/actions.ts @@ -1,5 +1,5 @@ +import { addNotification } from '@ausuliv/frontend-components-notifications/redux'; import { AlertVariant } from '@patternfly/react-core'; -import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import type { CostModel, CostModelRequest, CostModels } from 'api/costModels'; import { deleteCostModel as apiDeleteCostModel, diff --git a/src/store/export/exportActions.tsx b/src/store/export/exportActions.tsx index 12bead39d..b6c5a0ce8 100644 --- a/src/store/export/exportActions.tsx +++ b/src/store/export/exportActions.tsx @@ -1,5 +1,5 @@ +import { addNotification, removeNotification } from '@ausuliv/frontend-components-notifications/redux'; import { AlertVariant } from '@patternfly/react-core'; -import { addNotification, removeNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import type { Export } from 'api/export/export'; import { runExport } from 'api/export/exportUtils'; import type { ReportPathsType, ReportType } from 'api/reports/report'; diff --git a/src/store/rbac/actions.ts b/src/store/rbac/actions.ts index ca49a5620..8be137236 100644 --- a/src/store/rbac/actions.ts +++ b/src/store/rbac/actions.ts @@ -1,5 +1,5 @@ +import { addNotification } from '@ausuliv/frontend-components-notifications/redux'; import { AlertVariant } from '@patternfly/react-core'; -import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import type { RBAC } from 'api/rbac'; import { getRBAC } from 'api/rbac'; import { intl } from 'components/i18n'; diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts index 299b9991e..c41dc0ed4 100644 --- a/src/store/rootReducer.ts +++ b/src/store/rootReducer.ts @@ -1,4 +1,4 @@ -import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux'; +import { notificationsReducer } from '@ausuliv/frontend-components-notifications/redux'; import { combineReducers } from 'redux'; import { accountSettingsReducer, accountSettingsStateKey } from 'store/accountSettings'; import { awsCostOverviewReducer, awsCostOverviewStateKey } from 'store/breakdown/costOverview/awsCostOverview'; diff --git a/src/store/settings/settingsActions.ts b/src/store/settings/settingsActions.ts index 492883c49..62d99d4c7 100644 --- a/src/store/settings/settingsActions.ts +++ b/src/store/settings/settingsActions.ts @@ -1,5 +1,5 @@ +import { addNotification } from '@ausuliv/frontend-components-notifications/redux'; import { AlertVariant } from '@patternfly/react-core'; -import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux'; import type { Settings, SettingsPayload } from 'api/settings'; import { fetchSettings as apiFetchSettings, SettingsType, updateSettings as apiUpdateSettings } from 'api/settings'; import type { AxiosError } from 'axios'; diff --git a/src/store/store.ts b/src/store/store.ts index a7bdcbf94..e6187ed45 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,4 +1,4 @@ -import { notificationsMiddleware } from '@redhat-cloud-services/frontend-components-notifications/notificationsMiddleware'; +import { notificationsMiddleware } from '@ausuliv/frontend-components-notifications/notificationsMiddleware'; import { configureStore as createStore } from '@reduxjs/toolkit'; import { axiosInstance } from 'api'; diff --git a/src/styles/global.css b/src/styles/global.css index 1eff2a250..abdef9012 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -8,8 +8,8 @@ body { display: flex; } -.pf-v5-l-grid > *, -.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 4f16bad4e..95151f85f 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 01dbc9f07..55c7a49ad 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, }; diff --git a/test/jest.setup.js b/test/jest.setup.js index 4860e2ccf..7b0828bfa 100644 --- a/test/jest.setup.js +++ b/test/jest.setup.js @@ -1 +1 @@ -import '@testing-library/jest-dom/jest-globals'; +import '@testing-library/jest-dom';