From 62da05a566bed99d255196dd76890de5b4023d29 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Mon, 23 Sep 2024 10:51:20 -0400 Subject: [PATCH] PatternFly v6 milestone --- package-lock.json | 997 ++++++++++++++---- package.json | 21 +- src/app.tsx | 4 +- src/appEntry.tsx | 4 +- .../drawers/commonDrawer/commonDrawer.tsx | 2 +- .../drawers/exports/exports.styles.ts | 28 +- .../drawers/exports/exportsLink.tsx | 2 +- .../drawers/exports/exportsTable.styles.ts | 20 +- .../drawers/exports/exportsTable.tsx | 18 +- .../drawers/exports/exportsToolbar.tsx | 4 +- .../inactiveSources/inactiveSources.scss | 8 +- .../charts/chartTheme/theme-utils.ts | 2 +- .../components/charts/common/chartUtils.ts | 2 +- .../components/charts/costChart/costChart.tsx | 2 +- .../costExplorerChart.styles.ts | 8 +- .../costExplorerChart/costExplorerChart.tsx | 2 +- .../charts/dailyCostChart/dailyCostChart.tsx | 2 +- .../dailyTrendChart/dailyTrendChart.tsx | 2 +- .../historicalCostChart.test.tsx.snap | 100 +- .../historicalCostChart.styles.ts | 8 +- .../historicalCostChart.tsx | 2 +- .../historicalTrendChart.test.tsx.snap | 96 +- .../historicalTrendChart.styles.ts | 8 +- .../historicalTrendChart.tsx | 2 +- .../historicalUsageChart.test.tsx.snap | 94 +- .../historicalUsageChart.styles.ts | 8 +- .../historicalUsageChart.tsx | 2 +- .../__snapshots__/trendChart.test.tsx.snap | 46 +- .../charts/trendChart/trendChart.tsx | 2 +- .../__snapshots__/usageChart.test.tsx.snap | 70 +- .../charts/usageChart/usageChart.styles.ts | 4 +- .../charts/usageChart/usageChart.tsx | 2 +- .../components/cluster/cluster.styles.ts | 8 +- .../cluster/modal/clusterModal.scss | 6 +- .../cluster/modal/clusterModal.styles.ts | 4 +- .../components/cluster/modal/clusterModal.tsx | 24 +- .../costDistribution.styles.ts | 4 +- .../components/costType/costType.styles.ts | 4 +- .../components/currency/currency.styles.ts | 4 +- .../components/dataTable/dataTable.scss | 14 +- .../components/dataTable/dataTable.styles.ts | 24 +- src/routes/components/dataTable/dataTable.tsx | 12 +- .../components/dataTable/expandableTable.tsx | 12 +- .../components/dataTable/selectableTable.tsx | 12 +- .../components/dataToolbar/basicToolbar.tsx | 15 +- .../components/dataToolbar/dataToolbar.scss | 10 +- .../dataToolbar/dataToolbar.styles.ts | 12 +- .../components/dataToolbar/dataToolbar.tsx | 29 +- .../components/dataToolbar/utils/actions.tsx | 9 +- .../dataToolbar/utils/bulkSelect.tsx | 24 +- .../components/dataToolbar/utils/category.tsx | 12 +- .../components/dataToolbar/utils/common.ts | 8 +- .../dataToolbar/utils/costCategory.tsx | 10 +- .../components/dataToolbar/utils/custom.tsx | 4 +- .../dataToolbar/utils/orgUntits.tsx | 8 +- .../components/dataToolbar/utils/tags.tsx | 14 +- .../components/dateRange/dateRange.scss | 2 +- .../dropdownWrapper/dropdown.styles.ts | 4 +- .../dropdownWrapper/dropdownWrapper.scss | 4 +- .../components/export/exportModal.styles.ts | 16 +- src/routes/components/export/exportModal.tsx | 235 +++-- .../components/groupBy/groupBy.styles.ts | 4 +- .../components/page/loading/loading.tsx | 2 +- .../page/maintenance/maintenance.tsx | 2 +- .../page/maintenance/maintenanceState.tsx | 1 + .../components/page/noData/noData.styles.ts | 6 +- src/routes/components/page/noData/noData.tsx | 2 +- .../components/page/noData/noDataState.tsx | 15 +- .../page/noInstances/noInstances.styles.ts | 14 +- .../page/noInstances/noInstances.tsx | 2 +- .../page/noInstances/noInstancesState.tsx | 23 +- .../page/noProviders/noProviders.styles.ts | 37 +- .../page/noProviders/noProviders.tsx | 2 +- .../noProvidersOld/noProvidersState.styles.ts | 8 +- .../page/noProvidersOld/noProvidersState.tsx | 15 +- .../noVirtualization.styles.ts | 14 +- .../noVirtualizationState.tsx | 22 +- .../page/notAuthorized/notAuthorized.tsx | 2 +- .../page/notAuthorized/notAuthorizedState.tsx | 9 +- .../page/notAvailable/notAvailable.tsx | 2 +- .../components/page/notFound/notFound.tsx | 6 +- .../perspective/perspective.styles.ts | 4 +- .../reportSummaryItems.test.tsx.snap | 24 +- .../reports/reportSummary/reportSummary.scss | 10 +- .../reportSummary/reportSummaryAlt.scss | 14 +- .../reportSummary/reportSummaryCost.scss | 2 +- .../reportSummary/reportSummaryDailyCost.scss | 2 +- .../reportSummaryDailyTrend.scss | 2 +- .../reportSummary/reportSummaryDetails.scss | 30 +- .../reportSummary/reportSummaryItem.scss | 2 +- .../reportSummary/reportSummaryItems.scss | 2 +- .../reportSummary/reportSummaryTrend.scss | 2 +- .../reportSummary/reportSummaryUsage.scss | 2 +- .../resourceTypeahead/resourceFetch.tsx | 4 +- .../resourceTypeahead/resourceInput.tsx | 9 +- .../components/selectWrapper/select.styles.ts | 4 +- .../selectWrapper/selectTypeaheadWrapper.tsx | 5 +- .../selectWrapper/selectWrapper.scss | 4 +- .../emptyFilterState/emptyFilterState.tsx | 11 +- .../emptyValueState/emptyValueState.scss | 2 +- .../state/errorState/errorState.tsx | 17 +- .../state/loadingState/loadingState.tsx | 5 +- .../instances/instances.styles.ts | 8 +- .../awsBreakdown/instances/instances.tsx | 32 +- .../instances/instancesToolbar.tsx | 6 +- .../details/awsDetails/awsDetails.styles.ts | 31 +- src/routes/details/awsDetails/awsDetails.tsx | 70 +- .../awsDetails/detailsHeader.styles.ts | 21 +- .../details/awsDetails/detailsHeader.tsx | 2 +- .../details/awsDetails/detailsToolbar.tsx | 6 +- .../azureDetails/azureDetails.styles.ts | 30 +- .../details/azureDetails/azureDetails.tsx | 66 +- .../azureDetails/detailsHeader.styles.ts | 21 +- .../details/azureDetails/detailsHeader.tsx | 2 +- .../details/azureDetails/detailsToolbar.tsx | 6 +- .../components/breakdown/breakdown.styles.ts | 8 +- .../components/breakdown/breakdownBase.tsx | 80 +- .../components/breakdown/breakdownHeader.scss | 8 +- .../breakdown/breakdownHeader.styles.ts | 46 +- .../components/breakdown/breakdownHeader.tsx | 35 +- .../columnManagementModal.tsx | 103 +- .../components/costChart/costChart.styles.ts | 12 +- .../components/costChart/costChart.tsx | 2 +- .../costOverview/costOverviewBase.tsx | 8 +- .../historicalData/historicalChart.styles.ts | 26 +- .../overheadCostChart.styles.ts | 12 +- .../overheadCostChart/overheadCostChart.tsx | 2 +- .../providerStatus/components/cloudData.tsx | 8 +- .../providerStatus/components/clusterData.tsx | 8 +- .../components/component.styles.ts | 26 +- .../components/finalization.tsx | 8 +- .../providerStatus/providerBreakdownModal.tsx | 3 +- .../providerStatus/providerDetailsModal.tsx | 3 +- .../providerStatus/providerStatus.styles.ts | 14 +- .../pvcChart/modal/pvcContent.styles.ts | 10 +- .../components/pvcChart/modal/pvcModal.tsx | 9 +- .../components/pvcChart/modal/pvcToolbar.tsx | 6 +- .../details/components/pvcChart/pvc.scss | 2 +- .../components/pvcChart/pvcChart.styles.ts | 24 +- .../details/components/pvcChart/pvcChart.tsx | 48 +- .../summary/modal/summaryModal.styles.ts | 4 +- .../components/summary/modal/summaryModal.tsx | 33 +- .../components/summary/summaryCard.styles.ts | 4 +- .../components/tag/modal/tagContent.styles.ts | 8 +- .../components/tag/modal/tagModal.styles.ts | 4 +- .../details/components/tag/modal/tagModal.tsx | 24 +- .../details/components/tag/tag.styles.ts | 10 +- .../usageChart/usageChart.styles.ts | 14 +- .../components/usageChart/usageChart.tsx | 2 +- .../gcpDetails/detailsHeader.styles.ts | 21 +- .../details/gcpDetails/detailsHeader.tsx | 2 +- .../details/gcpDetails/detailsToolbar.tsx | 6 +- .../details/gcpDetails/gcpDetails.styles.ts | 30 +- src/routes/details/gcpDetails/gcpDetails.tsx | 66 +- .../ibmDetails/detailsHeader.styles.ts | 21 +- .../details/ibmDetails/detailsHeader.tsx | 2 +- .../details/ibmDetails/detailsToolbar.tsx | 6 +- .../details/ibmDetails/ibmDetails.styles.ts | 31 +- src/routes/details/ibmDetails/ibmDetails.tsx | 66 +- .../ociDetails/detailsHeader.styles.ts | 21 +- .../details/ociDetails/detailsHeader.tsx | 2 +- .../details/ociDetails/detailsToolbar.tsx | 6 +- .../details/ociDetails/ociDetails.styles.ts | 30 +- src/routes/details/ociDetails/ociDetails.tsx | 66 +- .../clusterInfo/clusterInfo.styles.ts | 16 +- .../clusterInfo/clusterInfoContent.scss | 4 +- .../clusterInfo/clusterInfoContent.tsx | 40 +- .../clusterInfo/clusterInfoModal.tsx | 3 +- .../components/cloudIntegration.tsx | 16 +- .../details/ocpBreakdown/optimizations.tsx | 37 +- .../virtualization/virtualization.styles.ts | 8 +- .../virtualization/virtualizationToolbar.tsx | 6 +- .../ocpDetails/detailsHeader.styles.ts | 25 +- .../details/ocpDetails/detailsHeader.tsx | 2 +- .../details/ocpDetails/detailsToolbar.tsx | 6 +- .../details/ocpDetails/ocpDetails.styles.ts | 30 +- src/routes/details/ocpDetails/ocpDetails.tsx | 72 +- .../rhelDetails/detailsHeader.styles.ts | 25 +- .../details/rhelDetails/detailsHeader.tsx | 2 +- .../details/rhelDetails/detailsToolbar.tsx | 6 +- .../details/rhelDetails/rhelDetails.styles.ts | 30 +- .../details/rhelDetails/rhelDetails.tsx | 68 +- src/routes/explorer/explorer.styles.ts | 44 +- src/routes/explorer/explorer.tsx | 227 ++-- src/routes/explorer/explorerChart.styles.ts | 32 +- src/routes/explorer/explorerChart.tsx | 44 +- .../explorer/explorerDatePicker.styles.ts | 6 +- src/routes/explorer/explorerFilter.scss | 7 - src/routes/explorer/explorerFilter.styles.ts | 6 +- src/routes/explorer/explorerFilter.tsx | 9 +- src/routes/explorer/explorerHeader.styles.ts | 33 +- src/routes/explorer/explorerHeader.tsx | 2 +- src/routes/explorer/explorerTable.scss | 10 +- src/routes/explorer/explorerTable.styles.ts | 20 +- src/routes/explorer/explorerTable.tsx | 14 +- .../optimizationsBreakdown.styles.ts | 7 - .../optimizationsBreakdown.tsx | 6 +- .../optimizationsDetails.styles.ts | 7 - .../optimizationsDetails.tsx | 28 +- .../awsOcpDashboardWidget.styles.ts | 8 +- .../components/dashboardWidget.styles.ts | 12 +- src/routes/overview/overview.scss | 4 +- src/routes/overview/overview.styles.ts | 27 +- src/routes/overview/overview.tsx | 136 +-- .../calculations/calculations.styles.ts | 29 +- .../settings/calculations/calculations.tsx | 16 +- .../costCategory/costCategory.styles.ts | 20 +- .../settings/costCategory/costCategory.tsx | 32 +- .../__snapshots__/rateTable.test.tsx.snap | 8 +- .../__snapshots__/warningIcon.test.tsx.snap | 2 +- .../components/addPriceList.test.tsx | 12 +- .../costModels/components/addPriceList.tsx | 13 +- .../costModels/components/errorState.tsx | 10 +- .../components/inputs/rateInput.styles.ts | 4 +- .../components/paginationToolbarTemplate.tsx | 2 + .../components/priceListToolbar.styles.ts | 4 +- .../components/priceListToolbar.tsx | 5 +- .../components/rateForm/rateForm.tsx | 4 +- .../components/rateForm/taggingRatesForm.tsx | 5 +- .../__snapshots__/dialog.test.tsx.snap | 2 +- .../costModels/costModel/addRateModal.tsx | 39 +- .../costModels/costModel/addSourceStep.tsx | 2 + .../costModels/costModel/addSourceWizard.tsx | 112 +- .../costModel/assignSourcesModalToolbar.tsx | 4 +- .../costModels/costModel/costCalc.styles.ts | 10 +- .../costModel/costModelInfo.styles.ts | 34 +- .../costModels/costModel/costModelInfo.tsx | 79 +- .../costModel/costModelsDetails.styles.ts | 57 +- .../settings/costModels/costModel/dialog.tsx | 15 +- .../settings/costModels/costModel/header.tsx | 27 +- .../costModels/costModel/priceListTable.tsx | 80 +- .../costModels/costModel/sourcesTable.tsx | 5 +- .../costModels/costModel/sourcesToolbar.tsx | 6 +- .../costModels/costModel/table.styles.ts | 5 +- .../settings/costModels/costModel/table.tsx | 20 +- .../costModels/costModel/updateCostModel.tsx | 98 +- .../costModel/updateDistributionDialog.tsx | 182 ++-- .../costModel/updateMarkupDialog.tsx | 208 ++-- .../costModel/updateRateModel.test.tsx | 36 +- .../costModels/costModel/updateRateModel.tsx | 53 +- .../costModelWizard/assignSourcesToolbar.tsx | 4 +- .../costModelWizard/costModelWizard.tsx | 35 +- .../costModelWizard/distribution.tsx | 24 +- .../costModels/costModelWizard/markup.tsx | 17 +- .../costModelWizard/priceListTable.tsx | 22 +- .../costModels/costModelWizard/review.tsx | 107 +- .../costModels/costModelWizard/table.tsx | 16 +- .../costModelsDetails/bottomPagination.tsx | 43 +- .../costModelsDetails.styles.ts | 12 +- .../costModelsDetails/costModelsDetails.tsx | 24 +- .../costModelsDetails/dialog.test.tsx | 8 +- .../costModels/costModelsDetails/dialog.tsx | 38 +- .../costModelsDetails/emptyStateBase.tsx | 5 +- .../costModels/costModelsDetails/table.tsx | 5 +- .../costModelsDetails/utils/dialog.tsx | 27 +- .../costModelsDetails/utils/filters.tsx | 21 +- .../platformProjects/platformProjects.scss | 2 +- .../platformProjects.styles.ts | 20 +- .../platformProjects/platformProjects.tsx | 32 +- src/routes/settings/settings.styles.ts | 13 +- src/routes/settings/settings.tsx | 36 +- .../settings/tagLabels/tagLabels.styles.ts | 10 - .../childTagMapping/childTagMapping.styles.ts | 4 +- .../childTagMapping/childTagMapping.tsx | 3 +- .../childTags/childTagsTable.styles.ts | 12 +- .../deleteTagMapping/deleteTagMapping.scss | 4 +- .../deleteTagMapping/deleteTagMapping.tsx | 3 +- .../deleteTagMappingAction.tsx | 5 +- .../parentTagMapping.styles.ts | 18 +- .../parentTagMapping/parentTagMapping.tsx | 5 +- .../parentTagMappingEmptyState.tsx | 22 +- .../parentTagMappingReview.tsx | 52 +- .../parentTags/parentTagsTable.styles.ts | 12 +- .../tagLabels/tagMapping/tagMapping.styles.ts | 29 +- .../tagLabels/tagMapping/tagMapping.tsx | 28 +- .../tagMapping/tagMappingEmptyState.tsx | 15 +- .../settings/tagLabels/tags/tags.styles.ts | 17 +- src/routes/settings/tagLabels/tags/tags.tsx | 36 +- .../accountSettings/accountSettingsActions.ts | 2 +- src/store/costModels/actions.ts | 2 +- src/store/export/exportActions.tsx | 2 +- src/store/rbac/actions.ts | 2 +- src/store/rootReducer.ts | 2 +- src/store/settings/settingsActions.ts | 2 +- src/store/store.ts | 2 +- src/styles/global.css | 4 +- src/styles/revert.css | 12 +- src/styles/theme.ts | 31 +- test/jest.setup.js | 2 +- 289 files changed, 3525 insertions(+), 3401 deletions(-) delete mode 100644 src/routes/explorer/explorerFilter.scss delete mode 100644 src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts delete mode 100644 src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts delete mode 100644 src/routes/settings/tagLabels/tagLabels.styles.ts diff --git a/package-lock.json b/package-lock.json index fbd7671bd..843312958 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,15 @@ "hasInstallScript": true, "license": "GNU AGPLv3", "dependencies": { - "@patternfly/patternfly": "5.4.2", - "@patternfly/react-charts": "7.4.8", - "@patternfly/react-component-groups": "5.5.5", - "@patternfly/react-core": "5.4.12", - "@patternfly/react-icons": "5.4.2", - "@patternfly/react-table": "5.4.13", - "@patternfly/react-tokens": "5.4.1", + "@ausuliv/frontend-components": "^4.2.12", + "@ausuliv/frontend-components-notifications": "^4.1.6", + "@patternfly/patternfly": "6.1.0", + "@patternfly/react-charts": "8.1.0", + "@patternfly/react-component-groups": "6.1.0", + "@patternfly/react-core": "6.1.0", + "@patternfly/react-icons": "6.1.0", + "@patternfly/react-table": "6.1.0", + "@patternfly/react-tokens": "6.1.0", "@redhat-cloud-services/frontend-components": "^5.1.2", "@redhat-cloud-services/frontend-components-notifications": "^4.1.9", "@redhat-cloud-services/frontend-components-translations": "^3.2.14", @@ -116,6 +118,126 @@ "node": ">=6.0.0" } }, + "node_modules/@ausuliv/frontend-components": { + "version": "4.2.12", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components/-/frontend-components-4.2.12.tgz", + "integrity": "sha512-f8FkVMPy/1uD/pEZyc6NA9BWGzlWO31c3pBFVubPuHeb8AmdA9CdVWDyY5cFx07WgbrEPtXlzHNWyTkMycT85g==", + "license": "Apache-2.0", + "dependencies": { + "@ausuliv/frontend-components-utilities": "^4.0.10", + "@patternfly/react-component-groups": "6.0.0-prerelease.4", + "@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-prerelease.21", + "@patternfly/react-icons": "6.0.0-prerelease.7", + "@patternfly/react-table": "6.0.0-prerelease.22", + "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.6", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components-notifications/-/frontend-components-notifications-4.1.6.tgz", + "integrity": "sha512-z2QFI2olDv7ypHhvzs8rFGv7HGhYgfu9Fd8Vjk312yzsUxXGiaDdSVdzwKxvKH9IVgBVeR3MZSyNFPvVTlzKKg==", + "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-prerelease.21", + "@patternfly/react-icons": "6.0.0-prerelease.7", + "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.14", + "resolved": "https://registry.npmjs.org/@ausuliv/frontend-components-utilities/-/frontend-components-utilities-4.0.14.tgz", + "integrity": "sha512-VTv1tnnY1DcxZZR9XsVgXzM6OEqubsxb5GBV6JpH6UJPZ97cRrijLvNm49FyinUP3ZdUEJkiEC7RZSeDqWHktQ==", + "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-prerelease.21", + "@patternfly/react-table": "6.0.0-prerelease.22", + "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-prerelease.4", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.0.0-prerelease.4.tgz", + "integrity": "sha512-0NDPUaIaX5AqaLWo1QrTqiLI7LMkBr5qgC9ZP9nacWGtNhBhIc4pJfcAjvyr/jb8AtJQdDEMnTAUSZkj7aMmZw==", + "license": "MIT", + "dependencies": { + "@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" + }, + "peerDependencies": { + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, "node_modules/@babel/code-frame": { "version": "7.26.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", @@ -132,9 +254,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz", - "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.5.tgz", + "integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==", "dev": true, "license": "MIT", "engines": { @@ -183,14 +305,14 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz", - "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz", + "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/parser": "^7.26.3", - "@babel/types": "^7.26.3", + "@babel/parser": "^7.26.5", + "@babel/types": "^7.26.5", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -200,13 +322,13 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz", - "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz", + "integrity": "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.25.9", + "@babel/compat-data": "^7.26.5", "@babel/helper-validator-option": "^7.25.9", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", @@ -259,9 +381,9 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz", - "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz", + "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==", "dev": true, "license": "MIT", "engines": { @@ -313,13 +435,13 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz", - "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz", + "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.26.3" + "@babel/types": "^7.26.5" }, "bin": { "parser": "bin/babel-parser.js" @@ -595,17 +717,17 @@ } }, "node_modules/@babel/traverse": { - "version": "7.26.4", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz", - "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.5.tgz", + "integrity": "sha512-rkOSPOw+AXbgtwUga3U4u8RpoK9FEFWBNAlTpcnkLFjL5CT+oyHNuUUC/xx6XefEJ16r38r8Bc/lfp6rYuHeJQ==", "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.26.2", - "@babel/generator": "^7.26.3", - "@babel/parser": "^7.26.3", + "@babel/generator": "^7.26.5", + "@babel/parser": "^7.26.5", "@babel/template": "^7.25.9", - "@babel/types": "^7.26.3", + "@babel/types": "^7.26.5", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -624,9 +746,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz", - "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz", + "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==", "dev": true, "license": "MIT", "dependencies": { @@ -718,6 +840,7 @@ "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.2.5.tgz", "integrity": "sha512-5iuG/StT+7OfvhoBHPlmxkPA9om6aDUFgmD4+mWKAGsYt4vCe8rypneG03AuseyRHBmcCLXQtIH5S26tIoggLg==", "dev": true, + "license": "Apache-2.0", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, @@ -800,6 +923,7 @@ "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.18.0.tgz", "integrity": "sha512-fK6L7rxcq6/z+AaQMtiFTkvbHkBLNlwyRxHpKawP0x3u9+NC6MQTnFW+AdpwC6gfHTW0051cokQgtTN2FqlxQA==", "dev": true, + "license": "MIT", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } @@ -2176,54 +2300,107 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.4.2.tgz", - "integrity": "sha512-+BaokNR8/AmTYMESxby9UtQXPGACg449BXQd0KejAvW/uGxlgO6mY1X1205DeBEHoK3e/vXkYXjvZPpv/tcxSA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.1.0.tgz", + "integrity": "sha512-w+QazL8NHKkg5j01eotblsswKxQQSYB0CN3yBXQL9ScpHdp/fK8M6TqWbKZNRpf+NqhMxcH/om8eR0N/fDCJqw==", "license": "MIT" }, "node_modules/@patternfly/react-charts": { - "version": "7.4.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.4.8.tgz", - "integrity": "sha512-Rv2ajbb7kmwcrZIolcaH8RzIMx3+6ldtJlKQoChmNggXGgKFtg3/QBlc9Qj+14LW0LSQ12ZprmRvHZ/Viyq+Qw==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-8.1.0.tgz", + "integrity": "sha512-nywK5d4WLCOyw3pcSlMHcGQezyHClwzsLEegO58QMh0GvsM2DvEsylpsJdQZIE3ApMd+RVu97XZD21EQKxpIiA==", "license": "MIT", "dependencies": { - "@patternfly/react-styles": "^5.4.1", - "@patternfly/react-tokens": "^5.4.1", + "@patternfly/react-styles": "^6.1.0", + "@patternfly/react-tokens": "^6.1.0", "hoist-non-react-statics": "^3.3.2", "lodash": "^4.17.21", - "tslib": "^2.7.0", - "victory-area": "^37.3.4", - "victory-axis": "^37.3.4", - "victory-bar": "^37.3.4", - "victory-box-plot": "^37.3.4", - "victory-chart": "^37.3.4", - "victory-core": "^37.3.4", - "victory-create-container": "^37.3.4", - "victory-cursor-container": "^37.3.4", - "victory-group": "^37.3.4", - "victory-legend": "^37.3.4", - "victory-line": "^37.3.4", - "victory-pie": "^37.3.4", - "victory-scatter": "^37.3.4", - "victory-stack": "^37.3.4", - "victory-tooltip": "^37.3.4", - "victory-voronoi-container": "^37.3.4", - "victory-zoom-container": "^37.3.4" + "tslib": "^2.8.1" }, "peerDependencies": { "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react-dom": "^17 || ^18", + "victory-area": "^37.3.3", + "victory-axis": "^37.3.2", + "victory-bar": "^37.3.2", + "victory-box-plot": "^37.3.2", + "victory-chart": "^37.3.3", + "victory-core": "^37.3.2", + "victory-create-container": "^37.3.2", + "victory-cursor-container": "^37.3.2", + "victory-group": "^37.3.2", + "victory-legend": "^37.3.2", + "victory-line": "^37.3.2", + "victory-pie": "^37.3.2", + "victory-scatter": "^37.3.2", + "victory-stack": "^37.3.2", + "victory-tooltip": "^37.3.2", + "victory-voronoi-container": "^37.3.2", + "victory-zoom-container": "^37.3.2" + }, + "peerDependenciesMeta": { + "victory-area": { + "optional": true + }, + "victory-axis": { + "optional": true + }, + "victory-bar": { + "optional": true + }, + "victory-box-plot": { + "optional": true + }, + "victory-chart": { + "optional": true + }, + "victory-core": { + "optional": true + }, + "victory-create-container": { + "optional": true + }, + "victory-cursor-container": { + "optional": true + }, + "victory-group": { + "optional": true + }, + "victory-legend": { + "optional": true + }, + "victory-line": { + "optional": true + }, + "victory-pie": { + "optional": true + }, + "victory-scatter": { + "optional": true + }, + "victory-stack": { + "optional": true + }, + "victory-tooltip": { + "optional": true + }, + "victory-voronoi-container": { + "optional": true + }, + "victory-zoom-container": { + "optional": true + } } }, "node_modules/@patternfly/react-component-groups": { - "version": "5.5.5", - "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.5.5.tgz", - "integrity": "sha512-Cgp1XxyBWnEDKAQsP+B7A4wlz6Bcp0bjwSMamdOiCR4GALtpBXXGrv6daAomoVCkL9l3zibcAfm/o9d9XBE9Ag==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.1.0.tgz", + "integrity": "sha512-8RkQv9wQk+D+nUMFtl4uk0ddMvxZ/+jFwnnXe2fw/BulouDVbpKRI24C1S8i1OQHr3++CbocBmmWRV0iw9Kvlw==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.4.1", - "@patternfly/react-icons": "^5.4.0", - "@patternfly/react-table": "^5.4.1", + "@patternfly/react-core": "^6.0.0", + "@patternfly/react-icons": "^6.0.0", + "@patternfly/react-table": "^6.0.0", "clsx": "^2.1.1", "react-jss": "^10.10.0" }, @@ -2233,17 +2410,17 @@ } }, "node_modules/@patternfly/react-core": { - "version": "5.4.12", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.4.12.tgz", - "integrity": "sha512-RI1xS1JGJdE/FvpkMzawaE21oeTc/e+WbxvFXqZfLhTz60P8RzVG1nYWXDL747Onkz3SYtY79PhQ8nsLeO5sJQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.1.0.tgz", + "integrity": "sha512-zj0lJPZxQanXKD8ae2kYnweT0kpp1CzpHYAkaBjTrw2k6ZMfr/UPlp0/ugCjWEokBqh79RUADLkKJJPce/yoSQ==", "license": "MIT", "dependencies": { - "@patternfly/react-icons": "^5.4.2", - "@patternfly/react-styles": "^5.4.1", - "@patternfly/react-tokens": "^5.4.1", + "@patternfly/react-icons": "^6.1.0", + "@patternfly/react-styles": "^6.1.0", + "@patternfly/react-tokens": "^6.1.0", "focus-trap": "7.6.2", - "react-dropzone": "^14.2.3", - "tslib": "^2.7.0" + "react-dropzone": "^14.3.5", + "tslib": "^2.8.1" }, "peerDependencies": { "react": "^17 || ^18", @@ -2251,9 +2428,9 @@ } }, "node_modules/@patternfly/react-icons": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.4.2.tgz", - "integrity": "sha512-CMQ5oHYzW6TPVTs2jpNJmP2vGCAKR/YeTPwHGO9dLkAUej1IcIxtCCWK2Fdo2UJsnBjuZihasyw2b6ehvbUm9Q==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.1.0.tgz", + "integrity": "sha512-V1w/j19YmOgvh72IRRf1p07k+u4M5+9P+o/IxunlF0fWzLDX4Hf+utBI11A8cRfUzpQN7eLw/vZIS3BLM8Ge3Q==", "license": "MIT", "peerDependencies": { "react": "^17 || ^18", @@ -2261,23 +2438,23 @@ } }, "node_modules/@patternfly/react-styles": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.4.1.tgz", - "integrity": "sha512-XA8PXksD8uiA3RTwxdUwJXOCf+V6sVd+2HKapWAdRLvtSV+Sdk7NgCvalb4IAQncsddLopjPQD8gAHA298+N8w==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.1.0.tgz", + "integrity": "sha512-JQ3zIl5SFiSB0YWVYibcUwgZdsp6Wn8hkfZ7KhtCjHFccSDdJexPOXVV1O9f2h4PfxTlY3YntZ81ZsguBx/Q7A==", "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "5.4.13", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.4.13.tgz", - "integrity": "sha512-cYw+pgpZXKGg3dZxudteUURqmj5O0ec7aNE80NLqFTcnI0MAOnfrFzCNApXJErn+MjD0VolMcC+H48eaRkT8TA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.1.0.tgz", + "integrity": "sha512-eC8mKkvFR0btfv6yEOvE+J4gBXU8ZGe9i2RSezBM+MJaXEQt/CKRjV+SAB5EeE3PyBYKG8yYDdsOoNmaPxxvSA==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^5.4.12", - "@patternfly/react-icons": "^5.4.2", - "@patternfly/react-styles": "^5.4.1", - "@patternfly/react-tokens": "^5.4.1", + "@patternfly/react-core": "^6.1.0", + "@patternfly/react-icons": "^6.1.0", + "@patternfly/react-styles": "^6.1.0", + "@patternfly/react-tokens": "^6.1.0", "lodash": "^4.17.21", - "tslib": "^2.7.0" + "tslib": "^2.8.1" }, "peerDependencies": { "react": "^17 || ^18", @@ -2285,9 +2462,9 @@ } }, "node_modules/@patternfly/react-tokens": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.4.1.tgz", - "integrity": "sha512-eygdHE7Krta1mijAv/E8RHiKIgysD0eeNTo8EXUYC8/M4e5K6sqpr2p6rQBF8QiRMN8FnbXvZT3K2OQ28pYt9Q==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.1.0.tgz", + "integrity": "sha512-t1UcHbOa4txczTR5UlnG4XcAAdnDSfSlCaOddw/HTqRF59pn2ks2JUu9sfnFRZ8SiAAxKRiYdX5bT7Mf4R24+w==", "license": "MIT" }, "node_modules/@pkgjs/parseargs": { @@ -2530,6 +2707,113 @@ "tslib": "^2.6.2" } }, + "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/@redhat-cloud-services/types": { + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-1.0.19.tgz", + "integrity": "sha512-rRAIqLdtqZsBjY//kXfCY8VHEvw1LQxjdLaMRyr1qyGXZZTopl5itFcyOIJkQfeLuBYVibork1pYUI6Czxy3EQ==", + "license": "Apache-2.0" + }, + "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/@sentry/browser": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.120.3.tgz", + "integrity": "sha512-i9vGcK9N8zZ/JQo1TCEfHHYZ2miidOvgOABRUc9zQKhYdcYQB2/LU1kqlj77Pxdxf4wOa9137d6rPrSn9iiBxg==", + "license": "MIT", + "dependencies": { + "@sentry-internal/feedback": "7.120.3", + "@sentry-internal/replay-canvas": "7.120.3", + "@sentry-internal/tracing": "7.120.3", + "@sentry/core": "7.120.3", + "@sentry/integrations": "7.120.3", + "@sentry/replay": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@redhat-cloud-services/frontend-components/node_modules/@patternfly/react-component-groups": { + "version": "5.5.8", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-5.5.8.tgz", + "integrity": "sha512-v31FyvzewWiLVMOR8S4GgD1S+ZWqBPEawPkJG6Ja4BpF5dFJeke6lUovdEPTs4NQEUtBytF6Tsww38XGL6NaaA==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^5.4.1", + "@patternfly/react-icons": "^5.4.0", + "@patternfly/react-table": "^5.4.1", + "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.19", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-1.0.19.tgz", + "integrity": "sha512-rRAIqLdtqZsBjY//kXfCY8VHEvw1LQxjdLaMRyr1qyGXZZTopl5itFcyOIJkQfeLuBYVibork1pYUI6Czxy3EQ==", + "license": "Apache-2.0" + }, + "node_modules/@redhat-cloud-services/frontend-components/node_modules/@scalprum/core": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@scalprum/core/-/core-0.8.1.tgz", + "integrity": "sha512-bRbquESsjUvgu3QHA9aDIK5uTu7XoXjzqoxAmDmytnedzg8LFk/iNKs/bx4lSP2rufxx8iFkdVVvN3sM1W6a4A==", + "license": "Apache-2.0", + "dependencies": { + "@openshift/dynamic-plugin-sdk": "^5.0.1", + "tslib": "^2.6.2" + } + }, + "node_modules/@redhat-cloud-services/frontend-components/node_modules/@scalprum/react-core": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@scalprum/react-core/-/react-core-0.9.3.tgz", + "integrity": "sha512-AnBoFLZl+qYB9XnAJBHYZJTHHRFWCW6iYAojGkiqtD4luyiEMmd6SaCv2s8xs/b6l/KKkG2FU272sIYqb/FkAQ==", + "license": "Apache-2.0", + "dependencies": { + "@openshift/dynamic-plugin-sdk": "^5.0.1", + "@scalprum/core": "^0.8.1", + "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/@redhat-cloud-services/javascript-clients-shared": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/@redhat-cloud-services/javascript-clients-shared/-/javascript-clients-shared-1.2.7.tgz", @@ -2613,9 +2897,9 @@ } }, "node_modules/@redhat-cloud-services/types": { - "version": "1.0.19", - "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-1.0.19.tgz", - "integrity": "sha512-rRAIqLdtqZsBjY//kXfCY8VHEvw1LQxjdLaMRyr1qyGXZZTopl5itFcyOIJkQfeLuBYVibork1pYUI6Czxy3EQ==", + "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": { @@ -2643,18 +2927,18 @@ } }, "node_modules/@remix-run/router": { - "version": "1.21.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", - "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz", + "integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg==", "license": "MIT", "engines": { "node": ">=14.0.0" } }, "node_modules/@scalprum/core": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@scalprum/core/-/core-0.8.1.tgz", - "integrity": "sha512-bRbquESsjUvgu3QHA9aDIK5uTu7XoXjzqoxAmDmytnedzg8LFk/iNKs/bx4lSP2rufxx8iFkdVVvN3sM1W6a4A==", + "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", @@ -2662,13 +2946,13 @@ } }, "node_modules/@scalprum/react-core": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/@scalprum/react-core/-/react-core-0.9.3.tgz", - "integrity": "sha512-AnBoFLZl+qYB9XnAJBHYZJTHHRFWCW6iYAojGkiqtD4luyiEMmd6SaCv2s8xs/b6l/KKkG2FU272sIYqb/FkAQ==", + "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.8.1", + "@scalprum/core": "^0.7.0", "lodash": "^4.17.0" }, "peerDependencies": { @@ -2677,131 +2961,359 @@ } }, "node_modules/@sentry-internal/feedback": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.120.2.tgz", - "integrity": "sha512-AAKW/Qii2qFA/jIZc9HK/CgQLfJ/9zBCqC9FF3bUTnAxzZAbJHO1TLnHqDl5k5wYtt449NrpObHORpopSk7TBg==", + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.120.3.tgz", + "integrity": "sha512-ewJJIQ0mbsOX6jfiVFvqMjokxNtgP3dNwUv+4nenN+iJJPQsM6a0ocro3iscxwVdbkjw5hY3BUV2ICI5Q0UWoA==", "license": "MIT", "dependencies": { - "@sentry/core": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry/core": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" }, "engines": { "node": ">=12" } }, + "node_modules/@sentry-internal/feedback/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry-internal/feedback/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry-internal/feedback/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@sentry-internal/replay-canvas": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.120.2.tgz", - "integrity": "sha512-2Xm9rJxUA5/CCUYRHNH4VxG13eQpXvM05/cHQKn+pmjaPq/+3fbOHrZZM84gF1FSHjeN8Kg1igoMSekU2kavOQ==", + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.120.3.tgz", + "integrity": "sha512-s5xy+bVL1eDZchM6gmaOiXvTqpAsUfO7122DxVdEDMtwVq3e22bS2aiGa8CUgOiJkulZ+09q73nufM77kOmT/A==", "license": "MIT", "dependencies": { - "@sentry/core": "7.120.2", - "@sentry/replay": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry/core": "7.120.3", + "@sentry/replay": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" }, "engines": { "node": ">=12" } }, + "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@sentry-internal/tracing": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.120.2.tgz", - "integrity": "sha512-eo2F8cP6X+vr54Mp6vu+NoQEDz0M5O24Tz8jPY0T1CpiWdwCmHb7Sln+oLXeQ3/LlWdVQihBfKDBZfBdUfsBTg==", + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.120.3.tgz", + "integrity": "sha512-Ausx+Jw1pAMbIBHStoQ6ZqDZR60PsCByvHdw/jdH9AqPrNE9xlBSf9EwcycvmrzwyKspSLaB52grlje2cRIUMg==", "license": "MIT", "dependencies": { - "@sentry/core": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry/core": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" }, "engines": { "node": ">=8" } }, - "node_modules/@sentry/browser": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.120.2.tgz", - "integrity": "sha512-o5ll2Yv5MfnblbWxTvMlKK3RVXIbeJ+SPC+uw12b4j/pkrQg+/y7dyTLBXh6t0EgokSOsRUyYosQwSvxG/xs/Q==", + "node_modules/@sentry-internal/tracing/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", "license": "MIT", "dependencies": { - "@sentry-internal/feedback": "7.120.2", - "@sentry-internal/replay-canvas": "7.120.2", - "@sentry-internal/tracing": "7.120.2", - "@sentry/core": "7.120.2", - "@sentry/integrations": "7.120.2", - "@sentry/replay": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" }, "engines": { "node": ">=8" } }, - "node_modules/@sentry/core": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.2.tgz", - "integrity": "sha512-eurLBFQJC7WWWYoEna25Z9I/GJjqAmH339tv52XP8sqXV7B5hRcHDcfrsT/UGHpU316M24p3lWhj0eimtCZ0SQ==", + "node_modules/@sentry-internal/tracing/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry-internal/tracing/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", "license": "MIT", "dependencies": { - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry/types": "7.120.3" }, "engines": { "node": ">=8" } }, + "node_modules/@sentry/browser": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.30.0.tgz", + "integrity": "sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==", + "license": "BSD-3-Clause", + "dependencies": { + "@sentry/core": "5.30.0", + "@sentry/types": "5.30.0", + "@sentry/utils": "5.30.0", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/browser/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, + "node_modules/@sentry/core": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.30.0.tgz", + "integrity": "sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==", + "license": "BSD-3-Clause", + "dependencies": { + "@sentry/hub": "5.30.0", + "@sentry/minimal": "5.30.0", + "@sentry/types": "5.30.0", + "@sentry/utils": "5.30.0", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/core/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, + "node_modules/@sentry/hub": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.30.0.tgz", + "integrity": "sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@sentry/types": "5.30.0", + "@sentry/utils": "5.30.0", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/hub/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, "node_modules/@sentry/integrations": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.120.2.tgz", - "integrity": "sha512-bMvL2fD3TGLM5YAUoQ2Qz6bYeVU8f7YRFNSjKNxK4EbvFgAU9j1FD6EKg0V0RNOJYnJjGIZYMmcWTXBbVTJL6w==", + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.120.3.tgz", + "integrity": "sha512-6i/lYp0BubHPDTg91/uxHvNui427df9r17SsIEXa2eKDwQ9gW2qRx5IWgvnxs2GV/GfSbwcx4swUB3RfEWrXrQ==", "license": "MIT", "dependencies": { - "@sentry/core": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2", + "@sentry/core": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3", "localforage": "^1.8.1" }, "engines": { "node": ">=8" } }, + "node_modules/@sentry/integrations/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry/integrations/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry/integrations/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry/minimal": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.30.0.tgz", + "integrity": "sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==", + "license": "BSD-3-Clause", + "dependencies": { + "@sentry/hub": "5.30.0", + "@sentry/types": "5.30.0", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/minimal/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, "node_modules/@sentry/replay": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.120.2.tgz", - "integrity": "sha512-UAw0anHwXeej0Rfx+7qZVbRb3rj3mQ0DuHqdpPTSd9WpfRGOvCfthMIKD7rfHX7GjMnPMgdmsaU8K3lpe60h+w==", + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.120.3.tgz", + "integrity": "sha512-CjVq1fP6bpDiX8VQxudD5MPWwatfXk8EJ2jQhJTcWu/4bCSOQmHxnnmBM+GVn5acKUBCodWHBN+IUZgnJheZSg==", "license": "MIT", "dependencies": { - "@sentry-internal/tracing": "7.120.2", - "@sentry/core": "7.120.2", - "@sentry/types": "7.120.2", - "@sentry/utils": "7.120.2" + "@sentry-internal/tracing": "7.120.3", + "@sentry/core": "7.120.3", + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" }, "engines": { "node": ">=12" } }, - "node_modules/@sentry/types": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.2.tgz", - "integrity": "sha512-FWVoiblHQJ892GaOqdXx/5/n5XDLF28z81vJ0lCY49PMh8waz8LJ0b9RSmt9tasSDl0OQ7eUlPl1xu1jTrv1NA==", + "node_modules/@sentry/replay/node_modules/@sentry/core": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.120.3.tgz", + "integrity": "sha512-vyy11fCGpkGK3qI5DSXOjgIboBZTriw0YDx/0KyX5CjIjDDNgp5AGgpgFkfZyiYiaU2Ww3iFuKo4wHmBusz1uA==", + "license": "MIT", + "dependencies": { + "@sentry/types": "7.120.3", + "@sentry/utils": "7.120.3" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@sentry/replay/node_modules/@sentry/types": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.120.3.tgz", + "integrity": "sha512-C4z+3kGWNFJ303FC+FxAd4KkHvxpNFYAFN8iMIgBwJdpIl25KZ8Q/VdGn0MLLUEHNLvjob0+wvwlcRBBNLXOow==", "license": "MIT", "engines": { "node": ">=8" } }, - "node_modules/@sentry/utils": { - "version": "7.120.2", - "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.2.tgz", - "integrity": "sha512-jgnQlw11mRfQrQRAXbq4zEd+tbYwHel5eqeS/oU6EImXRjmHNtS79nB8MHvJeQu1FMCpFs1Ymrrs5FICwS6VeQ==", + "node_modules/@sentry/replay/node_modules/@sentry/utils": { + "version": "7.120.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.120.3.tgz", + "integrity": "sha512-UDAOQJtJDxZHQ5Nm1olycBIsz2wdGX8SdzyGVHmD8EOQYAeDZQyIlQYohDe9nazdIOQLZCIc3fU0G9gqVLkaGQ==", "license": "MIT", "dependencies": { - "@sentry/types": "7.120.2" + "@sentry/types": "7.120.3" }, "engines": { "node": ">=8" } }, + "node_modules/@sentry/types": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz", + "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/utils": { + "version": "5.30.0", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz", + "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==", + "license": "BSD-3-Clause", + "dependencies": { + "@sentry/types": "5.30.0", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/utils/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -3432,9 +3944,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.4.tgz", - "integrity": "sha512-5kz9ScmzBdzTgB/3susoCgfqNDzBjvLL4taparufgSvlwjdLy6UyUy9T/tCpYd2GIdIilCatC4iSQS0QSYHt0w==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.5.tgz", + "integrity": "sha512-GLZPrd9ckqEBFMcVM/qRFAP0Hg3qiVEojgEFsx/N/zKXsBzbGF6z5FBDpZ0+Xhp1xr+qRZYjfGr1cWHB9oFHSA==", "dev": true, "license": "MIT", "dependencies": { @@ -3649,9 +4161,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.10.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz", - "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==", + "version": "22.10.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz", + "integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==", "dev": true, "license": "MIT", "dependencies": { @@ -3669,9 +4181,9 @@ } }, "node_modules/@types/picomatch": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-3.0.1.tgz", - "integrity": "sha512-1MRgzpzY0hOp9pW/kLRxeQhUWwil6gnrUYd3oEpeYBqp/FexhaCPv3F8LsYr47gtUU45fO2cm1dbwkSrHEo8Uw==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-3.0.2.tgz", + "integrity": "sha512-n0i8TD3UDB7paoMMxA3Y65vUncFJXjcUf7lQY7YyKGl6031FNjfsLs6pdLFCy2GNFxItPJG8GvvpbZc2skH7WA==", "dev": true, "license": "MIT" }, @@ -5414,9 +5926,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001690", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", - "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", + "version": "1.0.30001692", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz", + "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==", "dev": true, "funding": [ { @@ -6977,9 +7489,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.79", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.79.tgz", - "integrity": "sha512-nYOxJNxQ9Om4EC88BE4pPoNI8xwSFf8pU/BAeOl4Hh/b/i6V4biTAzwV7pXi3ARKeoYO5JZKMIXTryXSVer5RA==", + "version": "1.5.83", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.83.tgz", + "integrity": "sha512-LcUDPqSt+V0QmI47XLzZrz5OqILSMGsPFkDYus22rIbgorSvBYEFqq854ltTmUdHkY92FSdAAvsh4jWEULMdfQ==", "dev": true, "license": "ISC" }, @@ -6996,6 +7508,13 @@ "url": "https://github.com/sindresorhus/emittery?sponsor=1" } }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, "node_modules/emojis-list": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", @@ -7195,9 +7714,9 @@ "license": "MIT" }, "node_modules/es-object-atoms": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", - "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", "license": "MIT", "dependencies": { "es-errors": "^1.3.0" @@ -7496,6 +8015,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz", "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==", "dev": true, + "license": "MIT", "dependencies": { "array-includes": "^3.1.8", "array.prototype.findlast": "^1.2.5", @@ -9101,9 +9621,9 @@ } }, "node_modules/http-parser-js": { - "version": "0.5.8", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz", - "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==", + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.9.tgz", + "integrity": "sha512-n1XsPy3rXVxlqxVioEWdC+0+M+SQw0DpJynwtOPo1X+ZlvdzTLtDBIJJlDQTnwZIFJrZSzSGmIOUdP8tu+SgLw==", "dev": true, "license": "MIT" }, @@ -13088,6 +13608,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/p-all": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-all/-/p-all-5.0.0.tgz", + "integrity": "sha512-pofqu/1FhCVa+78xNAptCGc9V45exFz2pvBRyIvgXkNM0Rh18Py7j8pQuSjA+zpabI46v9hRjNWmL9EAFcEbpw==", + "license": "MIT", + "dependencies": { + "p-map": "^6.0.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-all/node_modules/p-map": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-6.0.0.tgz", + "integrity": "sha512-T8BatKGY+k5rU+Q/GTYgrEf2r4xRMevAN5mtXc2aPc4rS1j3s+vWTaO2Wag94neXuCAUAs8cxBL9EeB5EA6diw==", + "license": "MIT", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -13575,9 +14122,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz", + "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==", "funding": [ { "type": "opencollective", @@ -13594,7 +14141,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -14114,12 +14661,12 @@ } }, "node_modules/react-router": { - "version": "6.28.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz", - "integrity": "sha512-2omQTA3rkMljmrvvo6WtewGdVh45SpL9hGiCI9uUrwGGfNFDIvGK4gYJsKlJoNVi6AQZcopSCballL+QGOm7fA==", + "version": "6.28.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz", + "integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0" + "@remix-run/router": "1.21.1" }, "engines": { "node": ">=14.0.0" @@ -14129,13 +14676,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.28.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.1.tgz", - "integrity": "sha512-YraE27C/RdjcZwl5UCqF/ffXnZDxpJdk9Q6jw38SZHjXs7NNdpViq2l2c7fO7+4uWaEfcwfGCv3RSg4e1By/fQ==", + "version": "6.28.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz", + "integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==", "license": "MIT", "dependencies": { - "@remix-run/router": "1.21.0", - "react-router": "6.28.1" + "@remix-run/router": "1.21.1", + "react-router": "6.28.2" }, "engines": { "node": ">=14.0.0" @@ -14540,9 +15087,9 @@ } }, "node_modules/rimraf/node_modules/glob": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.0.tgz", - "integrity": "sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz", + "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==", "dev": true, "license": "ISC", "dependencies": { @@ -14839,9 +15386,9 @@ } }, "node_modules/sass": { - "version": "1.83.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz", - "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==", + "version": "1.83.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz", + "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==", "dev": true, "license": "MIT", "dependencies": { @@ -14917,13 +15464,13 @@ } }, "node_modules/sass/node_modules/readdirp": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", - "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.1.tgz", + "integrity": "sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==", "dev": true, "license": "MIT", "engines": { - "node": ">= 14.16.0" + "node": ">= 14.18.0" }, "funding": { "type": "individual", @@ -15564,9 +16111,9 @@ } }, "node_modules/spdx-license-ids": { - "version": "3.0.20", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.20.tgz", - "integrity": "sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==", + "version": "3.0.21", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz", + "integrity": "sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==", "dev": true, "license": "CC0-1.0" }, @@ -15715,20 +16262,6 @@ "node": ">=8" } }, - "node_modules/string-width-cjs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, - "license": "MIT" - }, - "node_modules/string-width/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true, - "license": "MIT" - }, "node_modules/string.prototype.matchall": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz", @@ -16383,9 +16916,9 @@ } }, "node_modules/ts-loader": { - "version": "9.5.1", - "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz", - "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==", + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.2.tgz", + "integrity": "sha512-Qo4piXvOTWcMGIgRiuFa6nHNm+54HbYaZCKqc9eeZCLRy3XqafQgwX2F7mofrbJG3g7EEb+lkiR+z2Lic2s3Zw==", "dev": true, "license": "MIT", "dependencies": { @@ -17657,9 +18190,9 @@ } }, "node_modules/webpack-dev-middleware/node_modules/memfs": { - "version": "4.15.3", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.15.3.tgz", - "integrity": "sha512-vR/g1SgqvKJgAyYla+06G4p/EOcEmwhYuVb1yc1ixcKf8o/sh7Zngv63957ZSNd1xrZJoinmNyDf2LzuP8WJXw==", + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.0.tgz", + "integrity": "sha512-4eirfZ7thblFmqFjywlTmuWVSvccHAJbn1r8qQLzmTO11qcqpohOjmY2mFce6x7x7WtskzRqApPD0hv+Oa74jg==", "dev": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index bd3d6b2a4..8f3b3fd08 100644 --- a/package.json +++ b/package.json @@ -52,13 +52,15 @@ "verify": "npm-run-all build lint test" }, "dependencies": { - "@patternfly/patternfly": "5.4.2", - "@patternfly/react-charts": "7.4.8", - "@patternfly/react-component-groups": "5.5.5", - "@patternfly/react-core": "5.4.12", - "@patternfly/react-icons": "5.4.2", - "@patternfly/react-table": "5.4.13", - "@patternfly/react-tokens": "5.4.1", + "@patternfly/patternfly": "6.1.0", + "@patternfly/react-charts": "8.1.0", + "@patternfly/react-component-groups": "6.1.0", + "@patternfly/react-core": "6.1.0", + "@patternfly/react-icons": "6.1.0", + "@patternfly/react-table": "6.1.0", + "@patternfly/react-tokens": "6.1.0", + "@ausuliv/frontend-components": "^4.2.12", + "@ausuliv/frontend-components-notifications": "^4.1.6", "@redhat-cloud-services/frontend-components": "^5.1.2", "@redhat-cloud-services/frontend-components-notifications": "^4.1.9", "@redhat-cloud-services/frontend-components-translations": "^3.2.14", @@ -133,8 +135,9 @@ "typescript": "^5.7.3" }, "overrides": { - "@patternfly/react-core": "5.4.12", - "@patternfly/react-icons": "5.4.2", + "@patternfly/react-core": "6.1.0", + "@patternfly/react-icons": "6.1.0", + "@patternfly/react-table": "6.1.0", "@typescript-eslint/eslint-plugin": "^8.20.0", "eslint": "^9.18.0", "react-intl": "^7.1.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..3a13a5c7e 100644 --- a/src/appEntry.tsx +++ b/src/appEntry.tsx @@ -1,10 +1,10 @@ /* eslint-disable no-console */ // Todo: Uncomment for use with non-shared PatternFly packages -// import '@patternfly/patternfly/patternfly.css'; +import '@patternfly/patternfly/patternfly.css'; 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 562058054..9be1ae465 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`] = ` @@ -336,39 +336,39 @@ exports[`null previous and current reports are handled 1`] = ` vector-effect="non-scaling-stroke" width="79.2" x="0" - y="67" + y="142" /> @@ -380,12 +380,12 @@ exports[`null previous and current reports are handled 1`] = ` dx="0" id="exampleCostChart-legend-ChartLabel-1" x="70.39999999999999" - y="85.97" + y="160.97" > @@ -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`] = ` @@ -705,39 +705,39 @@ exports[`reports are formatted to datums 1`] = ` vector-effect="non-scaling-stroke" width="79.2" x="0" - y="67" + y="142" /> @@ -749,12 +749,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleCostChart-legend-ChartLabel-1" x="70.39999999999999" - y="85.97" + y="160.97" > 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 00c076213..c2c9a49e9 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`] = ` @@ -300,39 +300,39 @@ exports[`null previous and current reports are handled 1`] = ` vector-effect="non-scaling-stroke" width="79.2" x="0" - y="57" + y="132" /> @@ -344,12 +344,12 @@ exports[`null previous and current reports are handled 1`] = ` dx="0" id="exampleTrendChart-legend-ChartLabel-1" x="70.39999999999999" - y="75.97" + y="150.97" > @@ -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`] = ` @@ -674,39 +674,39 @@ exports[`reports are formatted to datums 1`] = ` vector-effect="non-scaling-stroke" width="79.2" x="0" - y="57" + y="132" /> @@ -718,12 +718,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleTrendChart-legend-ChartLabel-1" x="70.39999999999999" - y="75.97" + y="150.97" > 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 2184def89..e4d13fbed 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`] = ` @@ -403,99 +403,99 @@ exports[`reports are formatted to datums 1`] = ` vector-effect="non-scaling-stroke" width="237.6" x="0" - y="52" + y="132" /> @@ -507,12 +507,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-1" x="70.39999999999999" - y="70.97" + y="150.97" > @@ -524,12 +524,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-2" x="110" - y="70.97" + y="150.97" > @@ -541,12 +541,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-3" x="149.60000000000002" - y="70.97" + y="150.97" > @@ -558,12 +558,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-4" x="189.20000000000002" - y="70.97" + y="150.97" > @@ -575,12 +575,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-5" x="228.8" - y="70.97" + y="150.97" > 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 26dc9bd38..e5f552ccf 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`] = ` @@ -282,39 +282,39 @@ exports[`reports are formatted to datums 1`] = ` vector-effect="non-scaling-stroke" width="79.2" x="0" - y="82" + y="132" /> @@ -326,12 +326,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleTrendChart-legend-ChartLabel-1" x="70.39999999999999" - y="100.97" + y="150.97" > 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 9d76f5824..d9efa1255 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`] = ` @@ -330,79 +330,79 @@ exports[`reports are formatted to datums 1`] = ` vector-effect="non-scaling-stroke" width="158.4" x="0" - y="57" + y="132" /> @@ -414,12 +414,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-1" x="70.39999999999999" - y="75.97" + y="150.97" > @@ -431,12 +431,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-2" x="110" - y="75.97" + y="150.97" > @@ -448,12 +448,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-3" x="149.60000000000002" - y="75.97" + y="150.97" > 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..de858a267 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_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 t_global_text_color_subtle from '@patternfly/react-tokens/dist/js/t_global_text_color_subtle'; 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_text_color_subtle.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 82c76eefd..cdd495755 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'; @@ -62,8 +55,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..19d873018 100644 --- a/src/routes/components/dataToolbar/basicToolbar.tsx +++ b/src/routes/components/dataToolbar/basicToolbar.tsx @@ -1,5 +1,3 @@ -import './dataToolbar.scss'; - import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core'; import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import type { Query } from 'api/queries/query'; @@ -14,7 +12,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 +332,10 @@ export class BasicToolbarBase extends React.Component - +
+ - {showBulkSelect && {this.getBulkSelectComponent()}} + {showBulkSelect && {this.getBulkSelectComponent()}} {showFilter && ( }> @@ -353,7 +346,7 @@ export class BasicToolbarBase extends React.Component )} {actions && {actions}} - + {pagination} diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss index e6d8b1bf2..2c3528ffe 100644 --- a/src/routes/components/dataToolbar/dataToolbar.scss +++ b/src/routes/components/dataToolbar/dataToolbar.scss @@ -3,15 +3,7 @@ // 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 { - border-left: none; - } - // Alternative workaround to overriding table sticky style - // --pf-v5-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 548794036..8d6b8b2d3 100644 --- a/src/routes/components/dataToolbar/dataToolbar.tsx +++ b/src/routes/components/dataToolbar/dataToolbar.tsx @@ -1,5 +1,3 @@ -import './dataToolbar.scss'; - import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core'; import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import type { Org } from 'api/orgs/org'; @@ -18,7 +16,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 { @@ -758,14 +755,10 @@ export class DataToolbarBase extends React.Component - +
+ - {showBulkSelect && {this.getBulkSelectComponent()}} + {showBulkSelect && {this.getBulkSelectComponent()}} {showFilter && ( }> @@ -784,12 +777,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) && ( @@ -797,7 +792,7 @@ export class DataToolbarBase extends React.Component )} - + {pagination} 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 f4fa420e0..61a6ffbd6 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 { SearchInput, ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import type { ResourcePathsType, ResourceType } from 'api/resources/resource'; @@ -49,8 +49,8 @@ export const getCategoryInput = ({ return ( @@ -80,7 +80,7 @@ export const getCategoryInput = ({ ); }; -export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => { +export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => { return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }]; }; @@ -171,7 +171,7 @@ export const getCategorySelect = ({ isDisabled, onCategorySelect, }: { - categoryOptions?: ToolbarChipGroup[]; // Options for category menu + categoryOptions?: ToolbarLabelGroup[]; // Options for category menu currentCategory?: string; filters?: Filters; isDisabled?: boolean; @@ -199,7 +199,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 2f17e94ed..3c4e44d27 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'; @@ -69,7 +69,7 @@ export const getTagKeyOptions = ( tagReport: Tag, filters: Filters, isSelectWrapperOption = false -): ToolbarChipGroup[] | SelectWrapperOption[] => { +): ToolbarLabelGroup[] | SelectWrapperOption[] => { const options = []; const reportOptions = getTagKeyOptionsFromReport(tagReport, isSelectWrapperOption); const filterOptions = getTagKeyOptionsFromFilters(filters, isSelectWrapperOption); @@ -98,7 +98,7 @@ export const getTagKeyOptions = ( const getTagKeyOptionsFromFilters = ( filter: Filters, isSelectWrapperOption = false -): ToolbarChipGroup[] | SelectWrapperOption[] => { +): ToolbarLabelGroup[] | SelectWrapperOption[] => { const options = []; if (!filter?.tag) { @@ -124,7 +124,7 @@ const getTagKeyOptionsFromFilters = ( const getTagKeyOptionsFromReport = ( tagReport: Tag, isSelectWrapperOption = false -): ToolbarChipGroup[] | SelectWrapperOption[] => { +): ToolbarLabelGroup[] | SelectWrapperOption[] => { let data = []; let options = []; @@ -198,7 +198,7 @@ export const getTagValueSelect = ({ onTagValueInputChange?: (value: string) => void; startDate?: string; tagKeyValueInput?: string; - tagKeyOption?: ToolbarChipGroup; + tagKeyOption?: ToolbarLabelGroup; tagPathsType?: TagPathsType; timeScopeValue?: number; }) => { @@ -211,8 +211,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.styles.ts b/src/routes/components/page/noData/noData.styles.ts index 1cb3c59b6..867e45bf3 100644 --- a/src/routes/components/page/noData/noData.styles.ts +++ b/src/routes/components/page/noData/noData.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 = { details: { - marginBottom: global_spacer_xl.value, - marginTop: global_spacer_xl.value, + marginBottom: t_global_spacer_xl.value, + marginTop: t_global_spacer_xl.value, }, } as { [className: string]: React.CSSProperties }; 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 5efd0c998..e0b04b64c 100644 --- a/src/routes/components/page/noData/noDataState.tsx +++ b/src/routes/components/page/noData/noDataState.tsx @@ -4,8 +4,6 @@ import { EmptyState, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; @@ -28,12 +26,13 @@ class NoDataStateBase extends React.Component { const { detailsComponent, intl, showReload = true } = this.props; return ( - - } - headingLevel="h5" - /> + {intl.formatMessage(messages.noDataStateDesc, { status: detailsComponent ? {detailsComponent} : '', diff --git a/src/routes/components/page/noInstances/noInstances.styles.ts b/src/routes/components/page/noInstances/noInstances.styles.ts index 3990a0f51..d8f88a8f2 100644 --- a/src/routes/components/page/noInstances/noInstances.styles.ts +++ b/src/routes/components/page/noInstances/noInstances.styles.ts @@ -1,6 +1,6 @@ -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'; export const styles = { clipboardContainer: { @@ -10,15 +10,15 @@ export const styles = { display: 'block', }, tagKey: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, tagKeyLabel: { - marginRight: global_spacer_sm.var, + marginRight: t_global_spacer_sm.var, }, tagValue: { - marginTop: global_spacer_xs.var, + marginTop: t_global_spacer_xs.var, }, tagValueLabel: { - marginRight: global_spacer_sm.var, + marginRight: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; 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 0e5d8bdde..b7f9529c3 100644 --- a/src/routes/components/page/noInstances/noInstancesState.tsx +++ b/src/routes/components/page/noInstances/noInstancesState.tsx @@ -1,12 +1,4 @@ -import { - ClipboardCopy, - EmptyState, - EmptyStateBody, - EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { ClipboardCopy, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant } from '@patternfly/react-core'; import { TagIcon } from '@patternfly/react-icons/dist/esm/icons/tag-icon'; import messages from 'locales/messages'; import React from 'react'; @@ -26,12 +18,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.styles.ts b/src/routes/components/page/noProviders/noProviders.styles.ts index 8bf0638d2..941cf9a5c 100644 --- a/src/routes/components/page/noProviders/noProviders.styles.ts +++ b/src/routes/components/page/noProviders/noProviders.styles.ts @@ -1,8 +1,8 @@ import { chart_color_blue_300 } from '@patternfly/react-tokens/dist/js/chart_color_blue_300'; -import { global_palette_blue_50 } from '@patternfly/react-tokens/dist/js/global_palette_blue_50'; -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_color_nonstatus_blue_default } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_default'; +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,7 +10,7 @@ export const styles = { minHeight: '240px', }, cardBodyItem: { - marginTop: global_spacer_md.var, + marginTop: t_global_spacer_md.var, }, cardTitle: { display: 'flex', @@ -18,45 +18,48 @@ export const styles = { }, cardTitleIcon: { color: chart_color_blue_300.var, - marginRight: global_spacer_sm.var, + marginRight: t_global_spacer_sm.var, }, divider: { - marginLeft: global_spacer_lg.var, - marginRight: global_spacer_lg.var, + marginLeft: t_global_spacer_lg.var, + marginRight: t_global_spacer_lg.var, }, getStarted: { - marginBottom: global_spacer_md.var, + marginBottom: t_global_spacer_md.var, + }, + getStartedContainer: { + paddingTop: 0, }, header: { display: 'flex', }, headerDesc: { - marginTop: global_spacer_md.var, + marginTop: t_global_spacer_md.var, }, headerLink: { marginLeft: '-16px', - marginTop: global_spacer_sm.var, + marginTop: t_global_spacer_sm.var, }, recommended: { - marginTop: global_spacer_md.var, + marginTop: t_global_spacer_md.var, }, recommendedCol1: { paddingTop: '15px', }, recommendedCol2: { - paddingTop: '10px', + paddingTop: '14px', }, recommendedCol3: { textAlign: 'right', marginRight: '-20px', }, resources: { - marginLeft: '-15px', - marginTop: global_spacer_sm.var, + marginLeft: '-5px', + marginTop: t_global_spacer_sm.var, }, troubleshooting: { - backgroundColor: global_palette_blue_50.var, - marginTop: global_spacer_lg.var, + backgroundColor: t_global_color_nonstatus_blue_default.var, + marginTop: t_global_spacer_lg.var, }, troubleshootingDesc: { display: 'flex', diff --git a/src/routes/components/page/noProviders/noProviders.tsx b/src/routes/components/page/noProviders/noProviders.tsx index 556bc6206..4f0bbb5b8 100644 --- a/src/routes/components/page/noProviders/noProviders.tsx +++ b/src/routes/components/page/noProviders/noProviders.tsx @@ -279,7 +279,7 @@ const NoProviders = () => { {getHeaderTitle()}
- + diff --git a/src/routes/components/page/noProvidersOld/noProvidersState.styles.ts b/src/routes/components/page/noProvidersOld/noProvidersState.styles.ts index 345d2ca84..3ad97fb65 100644 --- a/src/routes/components/page/noProvidersOld/noProvidersState.styles.ts +++ b/src/routes/components/page/noProvidersOld/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/noProvidersOld/noProvidersState.tsx b/src/routes/components/page/noProvidersOld/noProvidersState.tsx index 11ed24d09..5d6667352 100644 --- a/src/routes/components/page/noProvidersOld/noProvidersState.tsx +++ b/src/routes/components/page/noProvidersOld/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<NoProvidersStateProps, any> { icon = CostIcon; } return ( - <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font"> - <EmptyStateHeader - titleText={intl.formatMessage(titleKey)} - icon={<EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />} - headingLevel="h1" - /> + <EmptyState + headingLevel="h1" + icon={icon ? icon : PlusCircleIcon} + titleText={intl.formatMessage(titleKey)} + variant={EmptyStateVariant.lg} + className="pf-m-redhat-font" + > <EmptyStateBody> {intl.formatMessage(descKey)} {detailsComponent && <Bullseye style={styles.details}>{detailsComponent}</Bullseye>} diff --git a/src/routes/components/page/noVirtualization/noVirtualization.styles.ts b/src/routes/components/page/noVirtualization/noVirtualization.styles.ts index 3990a0f51..d8f88a8f2 100644 --- a/src/routes/components/page/noVirtualization/noVirtualization.styles.ts +++ b/src/routes/components/page/noVirtualization/noVirtualization.styles.ts @@ -1,6 +1,6 @@ -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'; export const styles = { clipboardContainer: { @@ -10,15 +10,15 @@ export const styles = { display: 'block', }, tagKey: { - marginTop: global_spacer_lg.var, + marginTop: t_global_spacer_lg.var, }, tagKeyLabel: { - marginRight: global_spacer_sm.var, + marginRight: t_global_spacer_sm.var, }, tagValue: { - marginTop: global_spacer_xs.var, + marginTop: t_global_spacer_xs.var, }, tagValueLabel: { - marginRight: global_spacer_sm.var, + marginRight: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/components/page/noVirtualization/noVirtualizationState.tsx b/src/routes/components/page/noVirtualization/noVirtualizationState.tsx index 719817e0c..714f382da 100644 --- a/src/routes/components/page/noVirtualization/noVirtualizationState.tsx +++ b/src/routes/components/page/noVirtualization/noVirtualizationState.tsx @@ -1,11 +1,4 @@ -import { - EmptyState, - EmptyStateBody, - EmptyStateFooter, - EmptyStateHeader, - EmptyStateIcon, - EmptyStateVariant, -} from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant } from '@patternfly/react-core'; import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import messages from 'locales/messages'; import React from 'react'; @@ -24,12 +17,13 @@ class NoVirtualizationStateBase extends React.Component<NoVirtualizationStatePro // Todo: Update URL when virtualization docs are available return ( - <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font"> - <EmptyStateHeader - titleText={intl.formatMessage(messages.noVirtualizationStateTitle)} - icon={<EmptyStateIcon icon={CubesIcon} />} - headingLevel="h5" - /> + <EmptyState + headingLevel="h5" + icon={CubesIcon} + titleText={intl.formatMessage(messages.noVirtualizationStateTitle)} + variant={EmptyStateVariant.lg} + className="pf-m-redhat-font" + > <EmptyStateBody>{intl.formatMessage(messages.noVirtualizationStateDesc)}</EmptyStateBody> <EmptyStateFooter> <a href={intl.formatMessage(messages.docsCostManagement)} rel="noreferrer" target="_blank"> 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) => { <PageHeaderTitle title={title} /> </PageHeader> )} - <PageSection> + <PageSection hasBodyWrapper={false}> <NotAuthorizedState pathname={pathname} /> </PageSection> </> 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<NotAuthorizedStateProps, an msg = messages.costManagement; break; } - return <UnAuthorized serviceName={intl.formatMessage(msg)} />; + return ( + <> + Test + <UnauthorizedAccess serviceName={intl.formatMessage(msg)} /> + </> + ); } } 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) => { <PageHeaderTitle title={title} /> </PageHeader> )} - <PageSection> + <PageSection hasBodyWrapper={false}> <Unavailable /> </PageSection> </> 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 ( - <PageSection> - <InvalidObject /> + <PageSection hasBodyWrapper={false}> + <MissingPage titleText={undefined} /> </PageSection> ); }; 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`] = ` <div> <div - class="pf-v5-c-skeleton" - style="--pf-v5-c-skeleton--Width: 66%;" + class="pf-v6-c-skeleton" + style="--pf-v6-c-skeleton--Width: 66%;" > <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" /> </div> <div - class="pf-v5-c-skeleton skeleton" - style="--pf-v5-c-skeleton--Width: 66%;" + class="pf-v6-c-skeleton skeleton" + style="--pf-v6-c-skeleton--Width: 66%;" > <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" /> </div> <div - class="pf-v5-c-skeleton skeleton" - style="--pf-v5-c-skeleton--Width: 66%;" + class="pf-v6-c-skeleton skeleton" + style="--pf-v6-c-skeleton--Width: 66%;" > <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" /> </div> <div - class="pf-v5-c-skeleton skeleton" - style="--pf-v5-c-skeleton--Width: 66%;" + class="pf-v6-c-skeleton skeleton" + style="--pf-v6-c-skeleton--Width: 66%;" > <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" /> </div> </div> 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<ResourceFetchProps> = ({ }) => { 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<ResourceInputProps> = ({ {search && search.length && ( <TextInputGroupUtilities> <Button + icon={<TimesIcon />} variant="plain" onClick={handleOnClear} aria-label={intl.formatMessage(messages.typeaheadAriaClear)} - > - <TimesIcon /> - </Button> + ></Button> </TextInputGroupUtilities> )} </TextInputGroup> 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<SelectTypeaheadWrapperProps> = ({ <TextInputGroupUtilities> {!!inputValue && ( <Button + icon={<TimesIcon aria-hidden />} variant="plain" onClick={handleOnClear} aria-label={intl.formatMessage(messages.selectClearAriaLabel)} - > - <TimesIcon aria-hidden /> - </Button> + ></Button> )} </TextInputGroupUtilities> </TextInputGroup> 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<EmptyFilterStateProps> = ({ } else if (showEmptyState2) { return <ItemScroll />; } else { - return <EmptyStateIcon icon={icon} />; + return null; } }; + const item = getItem(); + return ( <div style={{ @@ -123,9 +125,8 @@ const EmptyFilterStateBase: React.FC<EmptyFilterStateProps> = ({ ...(showMargin ? styles.containerMargin : {}), }} > - <EmptyState> - {getItem()} - <EmptyStateHeader titleText={intl.formatMessage(title)} headingLevel="h2" /> + <EmptyState headingLevel="h2" icon={!item ? icon : undefined} titleText={intl.formatMessage(title)}> + {item} <EmptyStateBody>{intl.formatMessage(subTitle)}</EmptyStateBody> </EmptyState> </div> 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<ErrorStateProps> = ({ error, icon = ErrorCircleOI } return ( - <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font"> - <EmptyStateHeader titleText={title} icon={<EmptyStateIcon icon={icon} />} headingLevel="h5" /> + <EmptyState + headingLevel="h5" + icon={icon} + titleText={title} + variant={EmptyStateVariant.lg} + className="pf-m-redhat-font" + > <EmptyStateBody>{subTitle}</EmptyStateBody> </EmptyState> ); 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<LoadingStateProps> = ({ heading = intl.formatMessage(messages.loadingStateTitle), }) => { return ( - <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font"> + <EmptyState headingLevel="h5" titleText={heading} variant={EmptyStateVariant.lg} className="pf-m-redhat-font"> <Spinner size="lg" /> - <EmptyStateHeader titleText={heading} headingLevel="h5" /> <EmptyStateBody>{body}</EmptyStateBody> </EmptyState> ); diff --git a/src/routes/details/awsBreakdown/instances/instances.styles.ts b/src/routes/details/awsBreakdown/instances/instances.styles.ts index 9d3b34236..80e913e12 100644 --- a/src/routes/details/awsBreakdown/instances/instances.styles.ts +++ b/src/routes/details/awsBreakdown/instances/instances.styles.ts @@ -1,11 +1,7 @@ -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'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; export const styles = { pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + 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 9bbe49f87..799351607 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,9 +12,9 @@ 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 type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -327,19 +327,21 @@ const Instances: React.FC<InstancesProps> = ({ costType, currency }) => { const computedItems = getComputedItems(); return ( - <> - {getExportModal(computedItems)} - {getColumnManagementModal()} - {getToolbar(computedItems)} - {reportFetchStatus === FetchStatus.inProgress ? ( - <Loading /> - ) : ( - <> - {getTable()} - <div style={styles.pagination}>{getPagination(isDisabled, true)}</div> - </> - )} - </> + <Card> + <CardBody> + {getExportModal(computedItems)} + {getColumnManagementModal()} + {getToolbar(computedItems)} + {reportFetchStatus === FetchStatus.inProgress ? ( + <LoadingState /> + ) : ( + <> + {getTable()} + <div style={styles.pagination}>{getPagination(isDisabled, true)}</div> + </> + )} + </CardBody> + </Card> ); }; diff --git a/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx b/src/routes/details/awsBreakdown/instances/instancesToolbar.tsx index 1fcb0ec15..99b3363f5 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'; @@ -51,7 +51,7 @@ interface InstancesToolbarDispatchProps { } interface InstancesToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type InstancesToolbarProps = InstancesToolbarOwnProps & @@ -95,7 +95,7 @@ export class InstancesToolbarBase extends React.Component<InstancesToolbarProps, } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { hideAccount, hideRegion, hideTag, 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 73e0dfc9b..ec6f6bc30 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'; @@ -21,6 +21,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -433,47 +434,50 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> { } return ( - <div style={styles.awsDetails}> - <DetailsHeader - costType={costType} - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - onGroupBySelect={this.handleOnGroupBySelect} - query={query} - report={report} - timeScopeValue={timeScopeValue} - /> - <div style={styles.content}> - <div style={styles.toolbarContainer}> + <> + <PageSection style={styles.headerContainer}> + <DetailsHeader + costType={costType} + currency={currency} + groupBy={groupById} + isCurrentMonthData={isCurrentMonthData} + isPreviousMonthData={isPreviousMonthData} + onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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/awsDetails/detailsHeader.styles.ts b/src/routes/details/awsDetails/detailsHeader.styles.ts index b4c026fd7..c12f9ccd7 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,21 +14,17 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 39cd67a75..940aa3f45 100644 --- a/src/routes/details/awsDetails/detailsHeader.tsx +++ b/src/routes/details/awsDetails/detailsHeader.tsx @@ -130,7 +130,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/awsDetails/detailsToolbar.tsx b/src/routes/details/awsDetails/detailsToolbar.tsx index 49050d125..60f346c4d 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 & @@ -111,7 +111,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 18cea4aab..304bfa07b 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'; @@ -19,6 +19,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -392,45 +393,48 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState> } return ( - <div style={styles.azureDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 b4c026fd7..c12f9ccd7 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,21 +14,17 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 18dc975b3..532d2db88 100644 --- a/src/routes/details/azureDetails/detailsHeader.tsx +++ b/src/routes/details/azureDetails/detailsHeader.tsx @@ -114,7 +114,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 a36cce347..e2a542286 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 & @@ -89,7 +89,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 cde9607dd..76e3b5d3d 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'; @@ -197,17 +197,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} + /> )} </> } @@ -365,35 +361,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..2994040e6 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_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 t_global_text_color_subtle from '@patternfly/react-tokens/dist/js/t_global_text_color_subtle'; 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_text_color_subtle.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 bb8be8b29..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 className="pf-v5-c-tabs"> + <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/providerStatus/components/cloudData.tsx b/src/routes/details/components/providerStatus/components/cloudData.tsx index 74038c371..d6b919b72 100644 --- a/src/routes/details/components/providerStatus/components/cloudData.tsx +++ b/src/routes/details/components/providerStatus/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'; @@ -29,9 +29,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 dec23d925..2cb21328b 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 f2ec0d00e..57f72a441 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 f30fb94e4..fbba600da 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 b4c026fd7..c12f9ccd7 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,21 +14,17 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 9d3b93b92..486ad9e30 100644 --- a/src/routes/details/gcpDetails/detailsHeader.tsx +++ b/src/routes/details/gcpDetails/detailsHeader.tsx @@ -115,7 +115,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 d5556268a..01ba71fa8 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 & @@ -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/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 f9c51d479..f3dec486e 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'; @@ -19,6 +19,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -391,45 +392,48 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> { } return ( - <div style={styles.gcpDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 b4c026fd7..c12f9ccd7 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,21 +14,17 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 e06c0908a..263692d13 100644 --- a/src/routes/details/ibmDetails/detailsHeader.tsx +++ b/src/routes/details/ibmDetails/detailsHeader.tsx @@ -115,7 +115,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 ea38f3c59..c77edcf5c 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 & @@ -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/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 4ab5ebd1e..0d064c42c 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'; @@ -19,6 +19,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedIbmReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -393,45 +394,48 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> { } return ( - <div style={styles.ibmDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 b4c026fd7..c12f9ccd7 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,21 +14,17 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 ab03edd03..e646209f9 100644 --- a/src/routes/details/ociDetails/detailsHeader.tsx +++ b/src/routes/details/ociDetails/detailsHeader.tsx @@ -114,7 +114,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 b2c1e742d..85e43353f 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 & @@ -89,7 +89,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 5c4a5af00..1f0df07e4 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'; @@ -19,6 +19,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; import { NotAvailable } from 'routes/components/page/notAvailable'; +import { LoadingState } from 'routes/components/state/loadingState'; import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOciReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -392,45 +393,48 @@ class OciDetails extends React.Component<OciDetailsProps, OciDetailsState> { } return ( - <div style={styles.ociDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 ac84dcbbf..70b32d8d9 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 e785bbe5e..ef1c1d893 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/ocpBreakdown/virtualization/virtualization.styles.ts b/src/routes/details/ocpBreakdown/virtualization/virtualization.styles.ts index 9d3b34236..80e913e12 100644 --- a/src/routes/details/ocpBreakdown/virtualization/virtualization.styles.ts +++ b/src/routes/details/ocpBreakdown/virtualization/virtualization.styles.ts @@ -1,11 +1,7 @@ -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'; +import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm'; export const styles = { pagination: { - backgroundColor: global_BackgroundColor_light_100.value, - paddingBottom: global_spacer_md.value, - paddingTop: global_spacer_md.value, + marginTop: t_global_spacer_sm.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/ocpBreakdown/virtualization/virtualizationToolbar.tsx b/src/routes/details/ocpBreakdown/virtualization/virtualizationToolbar.tsx index 4efa1d6ae..bdc42fcae 100644 --- a/src/routes/details/ocpBreakdown/virtualization/virtualizationToolbar.tsx +++ b/src/routes/details/ocpBreakdown/virtualization/virtualizationToolbar.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 VirtualizationToolbarDispatchProps { } interface VirtualizationToolbarState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; } type VirtualizationToolbarProps = VirtualizationToolbarOwnProps & @@ -96,7 +96,7 @@ export class VirtualizationToolbarBase extends React.Component<VirtualizationToo } } - private getCategoryOptions = (): ToolbarChipGroup[] => { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { hideCluster, hideNode, hideProject, hideTag, intl, tagReport } = this.props; const options: { name: string; key: string; resourceKey?: string }[] = [ diff --git a/src/routes/details/ocpDetails/detailsHeader.styles.ts b/src/routes/details/ocpDetails/detailsHeader.styles.ts index 1f2fb619b..d40500ce1 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,15 +26,15 @@ export const styles = { verticalAlign: 'middle', }, infoIcon: { - fontSize: global_FontSize_md.value, + fontSize: t_global_font_size_md.value, }, infoTitle: { fontWeight: 'bold', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 14d7e2be7..d28e630f5 100644 --- a/src/routes/details/ocpDetails/detailsHeader.tsx +++ b/src/routes/details/ocpDetails/detailsHeader.tsx @@ -144,7 +144,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 907761ec9..e4de71732 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 55ff2ac27..4ffe5d5e2 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'; @@ -21,6 +21,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; 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 { ProviderStatus } from 'routes/details/components/providerStatus'; @@ -467,48 +468,51 @@ class OcpDetails extends React.Component<OcpDetailsProps, OcpDetailsState> { } return ( - <div style={styles.ocpDetails}> - <DetailsHeader - costDistribution={costDistribution} - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 c377c80b1..4156feba3 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,30 +15,26 @@ 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', }, status: { - marginBottom: global_spacer_sm.var, + marginBottom: t_global_spacer_sm.var, }, 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 19c71edae..57fdd390d 100644 --- a/src/routes/details/rhelDetails/detailsHeader.tsx +++ b/src/routes/details/rhelDetails/detailsHeader.tsx @@ -138,7 +138,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 001d795b2..67293ec5a 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 efbb02d82..b0efb3592 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'; @@ -20,6 +20,7 @@ import { NoData } from 'routes/components/page/noData'; import { NoProviders } from 'routes/components/page/noProviders'; import { NoProvidersOld } from 'routes/components/page/noProvidersOld'; 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 { ProviderStatus } from 'routes/details/components/providerStatus'; @@ -447,46 +448,49 @@ class RhelDetails extends React.Component<RhelDetailsProps, RhelDetailsState> { } return ( - <div style={styles.ocpDetails}> - <DetailsHeader - currency={currency} - groupBy={groupById} - isCurrentMonthData={isCurrentMonthData} - isPreviousMonthData={isPreviousMonthData} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 5e42c1a4a..c0e74af1e 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 { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedExplorerReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; @@ -565,111 +575,120 @@ 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} - isDataAvailable={isDataAvailable} - isPreviousMonthData={isPreviousMonthData} - onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} - onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} - onCurrencySelect={() => handleOnCurrencySelect(query, router)} - onDateRangeSelect={this.handleOnDateRangeSelect} - 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} + isPreviousMonthData={isPreviousMonthData} + onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)} + onCostTypeSelect={() => handleOnCostTypeSelect(query, router)} + onCurrencySelect={() => handleOnCurrencySelect(query, router)} + onDateRangeSelect={this.handleOnDateRangeSelect} + 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 deleted file mode 100644 index 70ce63a22..000000000 --- a/src/routes/explorer/explorerFilter.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import url("~@patternfly/patternfly/base/patternfly-variables.css"); - -.explorerToolbarOverride { - .pf-v5-c-toolbar__content { - padding-left: 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 1701827e3..bab691fcc 100644 --- a/src/routes/explorer/explorerFilter.tsx +++ b/src/routes/explorer/explorerFilter.tsx @@ -1,6 +1,4 @@ -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'; @@ -81,7 +79,7 @@ interface ExplorerFilterDispatchProps { } interface ExplorerFilterState { - categoryOptions?: ToolbarChipGroup[]; + categoryOptions?: ToolbarLabelGroup[]; showDatePicker?: boolean; } @@ -126,7 +124,7 @@ export class ExplorerFilterBase extends React.Component { + private getCategoryOptions = (): ToolbarLabelGroup[] => { const { orgReport, perspective, intl, isOcpCloudGroupBysToggleEnabled, resourceReport, tagReport } = this.props; const options = []; @@ -265,7 +263,6 @@ export class ExplorerFilterBase 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..2344c65bd 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_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 t_global_text_color_subtle from '@patternfly/react-tokens/dist/js/t_global_text_color_subtle'; 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_text_color_subtle.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/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts deleted file mode 100644 index 9c04e466e..000000000 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type React from 'react'; - -export const styles = { - container: { - minHeight: '100vh', - }, -} 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 9c04e466e..000000000 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.styles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type React from 'react'; - -export const styles = { - container: { - minHeight: '100vh', - }, -} 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 9f9a3690c..2ef204326 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 6d7baac3c..bded965ff 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 2d6be3396..c3a45ef19 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 7ca9a3df9..d3bce4db6 100644 --- a/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx +++ b/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx @@ -56,8 +56,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 8380f6d84..0c6a80bee 100644 --- a/src/routes/settings/costModels/costModel/sourcesToolbar.tsx +++ b/src/routes/settings/costModels/costModel/sourcesToolbar.tsx @@ -56,10 +56,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 9cd24b7e0..d93af2d8e 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 a4d3c192a..738d44d19 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 9d21e7616..b068b96e4 100644 --- a/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx +++ b/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx @@ -56,8 +56,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 824a4580f..07ae44ee8 100644 --- a/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx +++ b/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx @@ -132,7 +132,12 @@ const DescriptionFilterBase: React.FC = ({ /> ) : null; return ( - + {children} ); @@ -207,7 +212,12 @@ const NameFilterBase: React.FC = ({ /> ) : null; return ( - + {children} ); @@ -299,7 +309,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.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 10588c9cc..16bd806e3 100644 --- a/src/routes/settings/settings.tsx +++ b/src/routes/settings/settings.tsx @@ -1,4 +1,4 @@ -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'; @@ -9,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'; @@ -197,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/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';