From f37158c22d32dc125f0341339f9dc566e08ac6f9 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 1 Jun 2023 10:52:37 -0400 Subject: [PATCH] Pf-v5 package updates --- fec.config.js | 2 + package.json | 17 +-- src/appEntry.tsx | 2 +- .../drawers/commonDrawer/commonDrawer.scss | 2 +- .../drawers/commonDrawer/commonDrawer.tsx | 4 +- .../drawers/exports/exportActions.tsx | 4 +- .../drawers/exports/exportsContent.tsx | 2 +- .../drawers/exports/exportsLink.tsx | 2 +- .../drawers/exports/exportsTable.tsx | 24 ++-- .../drawers/optimzations/optimizations.scss | 10 +- .../optimzations/optimizationsContent.tsx | 12 +- .../optimzations/optimizationsLink.tsx | 6 +- .../inactiveSources/inactiveSources.scss | 8 +- .../charts/chartTheme/theme-utils.ts | 2 +- .../historicalCostChart.test.tsx.snap | 108 +++++++++--------- .../historicalTrendChart.test.tsx.snap | 86 +++++++------- .../historicalUsageChart.test.tsx.snap | 98 ++++++++-------- .../__snapshots__/trendChart.test.tsx.snap | 36 +++--- .../__snapshots__/usageChart.test.tsx.snap | 52 ++++----- .../costDistribution/costDistribution.scss | 4 +- .../costDistribution/costDistribution.tsx | 11 +- src/routes/components/costType/costType.scss | 4 +- src/routes/components/costType/costType.tsx | 11 +- src/routes/components/currency/currency.scss | 2 +- src/routes/components/currency/currency.tsx | 11 +- .../components/dataTable/dataTable.scss | 12 +- src/routes/components/dataTable/dataTable.tsx | 36 ++++-- .../components/dataTable/selectableTable.tsx | 39 +++++-- .../components/dataToolbar/basicToolbar.tsx | 4 +- .../dataToolbar/costCategoryValue.tsx | 58 +++++----- .../components/dataToolbar/dataKebab.tsx | 2 +- .../components/dataToolbar/dataToolbar.scss | 6 +- .../components/dataToolbar/dataToolbar.tsx | 12 +- .../components/dataToolbar/tagValue.tsx | 58 +++++----- .../components/dataToolbar/utils/actions.tsx | 4 +- .../dataToolbar/utils/bulkSelect.tsx | 4 +- .../components/dataToolbar/utils/category.tsx | 92 +++++++-------- .../dataToolbar/utils/costCategory.tsx | 10 +- .../components/dataToolbar/utils/exclude.tsx | 11 +- .../dataToolbar/utils/orgUntits.tsx | 10 +- .../components/dataToolbar/utils/tags.tsx | 10 +- .../components/dataToolbar/workloadType.tsx | 7 +- src/routes/components/export/exportModal.tsx | 24 ++-- src/routes/components/groupBy/groupBy.tsx | 11 +- src/routes/components/groupBy/groupByOrg.tsx | 10 +- .../components/groupBy/groupBySelect.tsx | 12 +- .../optimizations/optimizationsTable.tsx | 2 +- .../components/page/noData/noDataState.tsx | 27 +++-- .../noOptimizations/noOptimizationsState.tsx | 14 +-- .../page/noProviders/noProvidersState.tsx | 31 ++--- .../perspective/perspectiveSelect.tsx | 11 +- .../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/resourceInput.tsx | 14 +-- .../emptyFilterState/emptyFilterState.tsx | 6 +- .../emptyValueState/emptyValueState.scss | 2 +- .../state/errorState/errorState.tsx | 10 +- .../state/loadingState/loadingState.tsx | 8 +- .../__snapshots__/rateTable.test.tsx.snap | 36 ++++-- .../__snapshots__/warningIcon.test.tsx.snap | 5 +- .../costModels/components/errorState.tsx | 17 +-- .../components/inputs/rateInput.tsx | 43 ++++--- .../costModels/components/inputs/selector.tsx | 20 ++-- .../components/inputs/simpleInput.tsx | 23 ++-- .../components/paginationToolbarTemplate.tsx | 13 +-- .../components/priceListToolbar.tsx | 2 +- .../components/rateForm/rateForm.tsx | 10 +- .../components/rateForm/taggingRatesForm.tsx | 6 +- .../costModels/components/rateTable.tsx | 15 +-- .../components/toolbar/checkboxSelector.tsx | 2 +- .../components/toolbar/primarySelector.tsx | 2 +- .../__snapshots__/dialog.test.tsx.snap | 9 +- .../costModels/costModel/addSourceStep.tsx | 18 +-- .../costModel/assignSourcesModalToolbar.tsx | 39 ++++--- .../costModels/costModel/costModelInfo.tsx | 12 +- .../costModels/costModel/distribution.tsx | 72 ++++++------ src/routes/costModels/costModel/header.tsx | 6 +- src/routes/costModels/costModel/markup.tsx | 72 ++++++------ .../costModels/costModel/priceListTable.tsx | 16 +-- .../costModels/costModel/sourcesTable.tsx | 15 ++- .../costModels/costModel/sourcesToolbar.tsx | 31 ++--- src/routes/costModels/costModel/table.tsx | 18 ++- .../costModels/costModel/updateCostModel.tsx | 4 +- .../costModel/updateDistributionDialog.tsx | 6 +- .../costModel/updateMarkupDialog.tsx | 45 ++++---- .../costModelWizard/assignSourcesToolbar.tsx | 33 +++--- .../costModels/costModelWizard/context.ts | 8 +- .../costModelWizard/costModelWizard.tsx | 35 +++--- .../costModelWizard/generalInformation.tsx | 41 +++---- .../costModels/costModelWizard/markup.tsx | 41 ++++--- .../costModelWizard/priceListTable.tsx | 22 ++-- .../costModels/costModelWizard/review.tsx | 25 ++-- .../costModels/costModelWizard/table.tsx | 12 +- .../costModelsDetails/bottomPagination.tsx | 2 +- .../costModelsDetails/emptyStateBase.tsx | 9 +- .../costModels/costModelsDetails/table.tsx | 15 ++- .../costModelsDetails/utils/filters.tsx | 48 ++++---- .../costModelsDetails/utils/table.tsx | 2 +- .../costModelsDetails/utils/toolbar.tsx | 7 +- src/routes/details/awsDetails/awsDetails.tsx | 2 +- .../details/azureDetails/azureDetails.tsx | 2 +- .../details/components/actions/actions.tsx | 4 +- .../components/breakdown/breakdownHeader.scss | 8 +- .../components/breakdown/breakdownHeader.tsx | 6 +- .../components/cluster/clusterModal.scss | 6 +- .../columnManagementModal.tsx | 2 +- .../components/summary/summaryModal.scss | 6 +- src/routes/details/gcpDetails/gcpDetails.tsx | 2 +- src/routes/details/ibmDetails/ibmDetails.tsx | 2 +- src/routes/details/ociDetails/ociDetails.tsx | 2 +- .../ocpBreakdown/optimizationsBreakdown.tsx | 2 +- src/routes/details/ocpDetails/ocpDetails.tsx | 2 +- .../details/rhelDetails/rhelDetails.tsx | 2 +- src/routes/explorer/explorer.tsx | 2 +- src/routes/explorer/explorerDateRange.tsx | 10 +- src/routes/explorer/explorerFilter.scss | 2 +- src/routes/explorer/explorerTable.scss | 8 +- src/routes/explorer/explorerTable.tsx | 27 +++-- src/routes/optimizations/optimizations.tsx | 2 +- .../overview/components/chartComparison.tsx | 10 +- .../optimizationsSummary.scss | 4 +- src/routes/overview/overview.scss | 4 +- .../settings/costCategory/costCategory.tsx | 2 +- .../__snapshots__/rateTable.test.tsx.snap | 36 ++++-- .../__snapshots__/warningIcon.test.tsx.snap | 5 +- .../costModels/components/errorState.tsx | 17 +-- .../components/inputs/rateInput.tsx | 43 ++++--- .../costModels/components/inputs/selector.tsx | 20 ++-- .../components/inputs/simpleInput.tsx | 22 ++-- .../components/paginationToolbarTemplate.tsx | 13 +-- .../components/priceListToolbar.tsx | 2 +- .../components/rateForm/rateForm.tsx | 10 +- .../components/rateForm/taggingRatesForm.tsx | 6 +- .../costModels/components/rateTable.tsx | 15 +-- .../components/toolbar/checkboxSelector.tsx | 2 +- .../components/toolbar/primarySelector.tsx | 2 +- .../__snapshots__/dialog.test.tsx.snap | 9 +- .../costModels/costModel/addSourceStep.tsx | 18 +-- .../costModel/assignSourcesModalToolbar.tsx | 33 +++--- .../costModels/costModel/costModelInfo.tsx | 12 +- .../costModels/costModel/distribution.tsx | 72 ++++++------ .../settings/costModels/costModel/header.tsx | 6 +- .../settings/costModels/costModel/markup.tsx | 72 ++++++------ .../costModels/costModel/priceListTable.tsx | 16 +-- .../costModels/costModel/sourcesTable.tsx | 15 ++- .../costModels/costModel/sourcesToolbar.tsx | 31 ++--- .../settings/costModels/costModel/table.tsx | 18 ++- .../costModels/costModel/updateCostModel.tsx | 4 +- .../costModel/updateDistributionDialog.tsx | 6 +- .../costModel/updateMarkupDialog.tsx | 45 ++++---- .../costModelWizard/assignSourcesToolbar.tsx | 33 +++--- .../costModels/costModelWizard/context.ts | 8 +- .../costModelWizard/costModelWizard.tsx | 35 +++--- .../costModelWizard/generalInformation.tsx | 41 +++---- .../costModels/costModelWizard/markup.tsx | 41 ++++--- .../costModelWizard/priceListTable.tsx | 22 ++-- .../costModels/costModelWizard/review.tsx | 25 ++-- .../costModels/costModelWizard/table.tsx | 12 +- .../costModelsDetails/bottomPagination.tsx | 2 +- .../costModelsDetails/emptyStateBase.tsx | 9 +- .../costModels/costModelsDetails/table.tsx | 15 ++- .../costModelsDetails/utils/filters.tsx | 48 ++++---- .../costModelsDetails/utils/table.tsx | 2 +- .../costModelsDetails/utils/toolbar.tsx | 7 +- .../platformProjects/platformProjects.tsx | 2 +- src/routes/settings/settings.scss | 4 +- src/routes/settings/tagDetails/tagDetails.tsx | 2 +- src/styles/global.css | 4 +- src/styles/revert.css | 12 +- 178 files changed, 1596 insertions(+), 1423 deletions(-) diff --git a/fec.config.js b/fec.config.js index dd95b1d9cd..38b95f4a9c 100644 --- a/fec.config.js +++ b/fec.config.js @@ -37,6 +37,8 @@ module.exports = { interceptChromeConfig: false, // Change to false after your app is registered in configuration files proxyVerbose: true, sassPrefix: `.${moduleName}`, + // sassPrefix: 'body', // For PF v5 testing only + // bundlePfModules: true, // For PF v5 testing only stats, standalone: process.env.LOCAL_API_PORT ? true : false, useCache: true, diff --git a/package.json b/package.json index 6b6953ad8a..1dcbec8938 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,10 @@ "check:milestone": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/'", "check:milestone:update": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/' -u", "clean": "rimraf dist .cache", + "codemods": "npx @patternfly/pf-codemods@latest src", "deploy": "npm-run-all build lint test", "install:pkgs": "npm install", + "install:pkgs:force": "npm install --force", "lint": "npm-run-all lint:*", "lint:ts": "eslint src", "lint:ts:fix": "eslint src --fix", @@ -45,13 +47,12 @@ "verify": "npm-run-all build lint test" }, "dependencies": { - "@patternfly/patternfly": "4.224.2", - "@patternfly/react-charts": "6.94.19", - "@patternfly/react-core": "4.276.8", - "@patternfly/react-icons": "4.93.6", - "@patternfly/react-styles": "4.92.6", - "@patternfly/react-table": "4.113.0", - "@patternfly/react-tokens": "4.94.6", + "@patternfly/patternfly": "5.0.0-prerelease.6", + "@patternfly/react-charts": "7.0.0-prerelease.2", + "@patternfly/react-core": "5.0.0-prerelease.8", + "@patternfly/react-icons": "5.0.0-prerelease.3", + "@patternfly/react-table": "5.0.0-prerelease.8", + "@patternfly/react-tokens": "5.0.0-prerelease.2", "@redhat-cloud-services/frontend-components": "^3.10.0", "@redhat-cloud-services/frontend-components-notifications": "^3.2.14", "@redhat-cloud-services/frontend-components-translations": "^3.2.6", @@ -73,7 +74,7 @@ "redux-thunk": "^2.4.2", "typesafe-actions": "^5.1.0", "unleash-proxy-client": "^2.5.0", - "victory-core": "36.6.7", + "victory-core": "36.6.10", "xstate": "^4.37.2" }, "devDependencies": { diff --git a/src/appEntry.tsx b/src/appEntry.tsx index ecb1d2bf78..32a639b401 100644 --- a/src/appEntry.tsx +++ b/src/appEntry.tsx @@ -12,7 +12,7 @@ import App from './app'; import { configureStore } from './store'; // Todo: Uncomment for use with non-shared PatternFly packages -// require.resolve('@patternfly/patternfly/patternfly.css'); +require.resolve('@patternfly/patternfly/patternfly.css'); require.resolve('@patternfly/patternfly/patternfly-addons.css'); import './styles/global.css'; diff --git a/src/components/drawers/commonDrawer/commonDrawer.scss b/src/components/drawers/commonDrawer/commonDrawer.scss index 9c7ecdcbaf..465c7d210b 100644 --- a/src/components/drawers/commonDrawer/commonDrawer.scss +++ b/src/components/drawers/commonDrawer/commonDrawer.scss @@ -1,5 +1,5 @@ .drawerOverride { - .pf-c-drawer__content { + .pf-v5-c-drawer__content { background-color: unset; } } diff --git a/src/components/drawers/commonDrawer/commonDrawer.tsx b/src/components/drawers/commonDrawer/commonDrawer.tsx index 528819eca2..21922e66f2 100644 --- a/src/components/drawers/commonDrawer/commonDrawer.tsx +++ b/src/components/drawers/commonDrawer/commonDrawer.tsx @@ -57,7 +57,9 @@ class CommonDrawerBase extends React.Component { return ( - {children} + + {children} + ); diff --git a/src/components/drawers/exports/exportActions.tsx b/src/components/drawers/exports/exportActions.tsx index 308771e97d..03e80819bb 100644 --- a/src/components/drawers/exports/exportActions.tsx +++ b/src/components/drawers/exports/exportActions.tsx @@ -1,4 +1,4 @@ -import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -61,7 +61,7 @@ class ExportsActionsBase extends React.Component } + toggle={ this.handleOnToggle(isOpen)} />} isOpen={isDropdownOpen} isPlain position="right" diff --git a/src/components/drawers/exports/exportsContent.tsx b/src/components/drawers/exports/exportsContent.tsx index e6ea9c8257..9df5e1bec6 100644 --- a/src/components/drawers/exports/exportsContent.tsx +++ b/src/components/drawers/exports/exportsContent.tsx @@ -82,7 +82,7 @@ class ExportsContentBase 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.tsx b/src/components/drawers/exports/exportsTable.tsx index aabbba3608..1c879327b1 100644 --- a/src/components/drawers/exports/exportsTable.tsx +++ b/src/components/drawers/exports/exportsTable.tsx @@ -4,19 +4,20 @@ import { ButtonVariant, EmptyState, EmptyStateBody, + EmptyStateFooter, + EmptyStateHeader, EmptyStateIcon, Label, Popover, Spinner, - Title, - TitleSizes, } from '@patternfly/react-core'; import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon'; import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import { OutlinedClockIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import { SyncIcon } from '@patternfly/react-icons/dist/esm/icons/sync-icon'; -import { sortable, SortByDirection, Table, TableBody, TableHeader, TableVariant } from '@patternfly/react-table'; +import { sortable, SortByDirection, TableVariant } from '@patternfly/react-table'; +import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated'; import type { Query } from 'api/queries/query'; import { getQuery } from 'api/queries/query'; import type { Report } from 'api/reports/report'; @@ -169,14 +170,17 @@ class ExportsTableBase extends React.Component - - - {intl.formatMessage(messages.noExportsStateTitle)} - + {intl.formatMessage(messages.noExportsStateTitle)}} + icon={} + headingLevel="h5" + /> {intl.formatMessage(messages.exportsEmptyState)} - + + + ); }; diff --git a/src/components/drawers/optimzations/optimizations.scss b/src/components/drawers/optimzations/optimizations.scss index fea98da1d8..91ae5bbaf6 100644 --- a/src/components/drawers/optimzations/optimizations.scss +++ b/src/components/drawers/optimzations/optimizations.scss @@ -4,13 +4,13 @@ div { display: block; margin-right: 0; - margin-bottom: var(--pf-global--spacer--xs); + margin-bottom: var(--pf-v5-global--spacer--xs); &.iconOverride { &.decrease { - // color: var(--pf-global--success-color--100); + // color: var(--pf-v5-global--success-color--100); } &.increase { - // color: var(--pf-global--danger-color--100); + // color: var(--pf-v5-global--danger-color--100); } .fa-equals { margin-left: 25px; @@ -27,10 +27,10 @@ top: -3px; } .fa-sort-up::before { - // color: var(--pf-global--danger-color--100); + // color: var(--pf-v5-global--danger-color--100); } .fa-sort-down::before { - // color: var(--pf-global--success-color--100); + // color: var(--pf-v5-global--success-color--100); } span { margin-right: -17px !important; diff --git a/src/components/drawers/optimzations/optimizationsContent.tsx b/src/components/drawers/optimzations/optimizationsContent.tsx index 3c1f5059b6..eadbbf8d07 100644 --- a/src/components/drawers/optimzations/optimizationsContent.tsx +++ b/src/components/drawers/optimzations/optimizationsContent.tsx @@ -9,7 +9,7 @@ import { TextListItemVariants, TextListVariants, } from '@patternfly/react-core'; -import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; +import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import type { RecommendationItem, RecommendationReportData } from 'api/ros/recommendations'; import { RosPathsType, RosType } from 'api/ros/ros'; import type { AxiosError } from 'axios'; @@ -223,10 +223,9 @@ class OptimizationsContentBase extends React.Component @@ -251,7 +250,7 @@ class OptimizationsContentBase extends React.Component{this.getChangeValue(memVariation)} - + ); }; @@ -306,10 +305,9 @@ class OptimizationsContentBase extends React.Component @@ -334,7 +332,7 @@ class OptimizationsContentBase extends React.Component{this.getChangeValue(memVariation)} - + ); }; diff --git a/src/components/drawers/optimzations/optimizationsLink.tsx b/src/components/drawers/optimzations/optimizationsLink.tsx index f9dac93876..b2f98d5e72 100644 --- a/src/components/drawers/optimzations/optimizationsLink.tsx +++ b/src/components/drawers/optimzations/optimizationsLink.tsx @@ -111,11 +111,7 @@ class OptimizationsLinkBase extends React.Component ); if (isDisabled) { - return ( - - {buttonComponent} - - ); + return {buttonComponent}; } return buttonComponent; } diff --git a/src/components/inactiveSources/inactiveSources.scss b/src/components/inactiveSources/inactiveSources.scss index 242012ffad..b46cf0a92e 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-global--BackgroundColor--light-100); - padding-left: var(--pf-global--spacer--lg); - padding-right: var(--pf-global--spacer--lg); - padding-top: var(--pf-global--spacer--lg); + 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); } diff --git a/src/routes/components/charts/chartTheme/theme-utils.ts b/src/routes/components/charts/chartTheme/theme-utils.ts index a496be99f2..e8df95739f 100644 --- a/src/routes/components/charts/chartTheme/theme-utils.ts +++ b/src/routes/components/charts/chartTheme/theme-utils.ts @@ -3,6 +3,6 @@ import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts'; import { default as ChartTheme } from './theme-koku'; // Applies theme color and variant to base theme -const getTheme = () => getCustomTheme(ChartThemeColor.default, null, ChartTheme); +const getTheme = () => getCustomTheme(ChartThemeColor.default, ChartTheme); export default getTheme; 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 a8c0d57202..4bc66bb906 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; width: 0px;" >
@@ -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`] = ` @@ -329,17 +329,17 @@ exports[`null previous and current reports are handled 1`] = ` @@ -379,15 +379,15 @@ exports[`null previous and current reports are handled 1`] = ` direction="inherit" dx="0" id="exampleCostChart-legend-ChartLabel-1" - x="162.1875" - y="113.875" + x="70.39999999999999" + y="96.97" > Cost (no data) @@ -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; width: 0px;" >
@@ -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`] = ` @@ -698,17 +698,17 @@ exports[`reports are formatted to datums 1`] = ` @@ -748,15 +748,15 @@ exports[`reports are formatted to datums 1`] = ` direction="inherit" dx="0" id="exampleCostChart-legend-ChartLabel-1" - x="297.61562499999997" - y="113.875" + x="70.39999999999999" + y="96.97" > Cost ({dateRange}){"dateRange":""} 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 484415978d..91c0fbe30f 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; width: 0px;" >
@@ -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`] = ` @@ -293,12 +293,12 @@ exports[`null previous and current reports are handled 1`] = ` @@ -313,10 +313,10 @@ exports[`null previous and current reports are handled 1`] = ` style="fill: #8bc1f7;" /> @@ -343,15 +343,15 @@ exports[`null previous and current reports are handled 1`] = ` direction="inherit" dx="0" id="exampleTrendChart-legend-ChartLabel-1" - x="171.89999999999998" + x="70.39999999999999" y="86.97" > Usage (no data) @@ -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; width: 0px;" >
@@ -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`] = ` @@ -646,12 +646,12 @@ exports[`reports are formatted to datums 1`] = ` @@ -666,10 +666,10 @@ exports[`reports are formatted to datums 1`] = ` style="fill: #8bc1f7;" /> @@ -696,15 +696,15 @@ exports[`reports are formatted to datums 1`] = ` direction="inherit" dx="0" id="exampleTrendChart-legend-ChartLabel-1" - x="297.61562499999997" + x="70.39999999999999" y="86.97" > Cost ({dateRange}){"dateRange":""} 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 697ac94d7a..6f07f85bae 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; width: 0px;" >
@@ -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`] = ` @@ -396,12 +396,12 @@ exports[`reports are formatted to datums 1`] = ` @@ -416,27 +416,27 @@ exports[`reports are formatted to datums 1`] = ` style="fill: #8bc1f7;" /> @@ -506,15 +506,15 @@ exports[`reports are formatted to datums 1`] = ` direction="inherit" dx="0" id="exampleUsageChart-legend-ChartLabel-1" - x="307.32812499999994" + x="70.39999999999999" y="96.97" > Usage ({dateRange}){"dateRange":""} @@ -524,12 +524,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-2" x="30.8" - y="127.875" + y="110.97" > @@ -540,15 +540,15 @@ exports[`reports are formatted to datums 1`] = ` direction="inherit" dx="0" id="exampleUsageChart-legend-ChartLabel-3" - x="307.32812499999994" - y="127.875" + x="70.39999999999999" + y="110.97" > Requests (no data) @@ -558,12 +558,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-4" x="30.8" - y="158.78" + y="124.97" > @@ -574,15 +574,15 @@ exports[`reports are formatted to datums 1`] = ` direction="inherit" dx="0" id="exampleUsageChart-legend-ChartLabel-5" - x="307.32812499999994" - y="158.78" + x="70.39999999999999" + y="124.97" > Limit (no data) 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 a315c8396e..7a5992bc87 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 @@ -19,7 +19,7 @@ exports[`reports are formatted to datums 1`] = ` style="height: 100px; width: 0px;" >
@@ -146,7 +146,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -167,7 +167,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -182,7 +182,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -223,7 +223,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -244,7 +244,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -265,7 +265,7 @@ exports[`reports are formatted to datums 1`] = ` @@ -276,12 +276,12 @@ exports[`reports are formatted to datums 1`] = ` @@ -296,7 +296,7 @@ exports[`reports are formatted to datums 1`] = ` style="fill: #d2d2d2;" /> @@ -327,12 +327,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleTrendChart-legend-ChartLabel-1" x="30.8" - y="131.875" + y="114.97" > 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 ae846c570b..bae2eb6d2c 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; width: 0px;" >
@@ -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`] = ` @@ -323,12 +323,12 @@ exports[`reports are formatted to datums 1`] = ` @@ -343,7 +343,7 @@ exports[`reports are formatted to datums 1`] = ` style="fill: #d2d2d2;" /> @@ -414,12 +414,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-1" x="30.8" - y="106.875" + y="89.97" > @@ -431,12 +431,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-2" x="30.8" - y="137.78" + y="103.97" > @@ -448,12 +448,12 @@ exports[`reports are formatted to datums 1`] = ` dx="0" id="exampleUsageChart-legend-ChartLabel-3" x="30.8" - y="168.68499999999997" + y="117.97" > diff --git a/src/routes/components/costDistribution/costDistribution.scss b/src/routes/components/costDistribution/costDistribution.scss index 8c47570820..9a3ce90478 100644 --- a/src/routes/components/costDistribution/costDistribution.scss +++ b/src/routes/components/costDistribution/costDistribution.scss @@ -2,8 +2,8 @@ // Workaround for https://github.com/patternfly/patternfly-react/issues/6371 .selectOverride { - &.pf-c-select { - .pf-c-select__menu-item-description { + &.pf-v5-c-select { + .pf-v5-c-select__menu-item-description { width: max-content; } } diff --git a/src/routes/components/costDistribution/costDistribution.tsx b/src/routes/components/costDistribution/costDistribution.tsx index 8a8dcbd432..8c9aca6851 100644 --- a/src/routes/components/costDistribution/costDistribution.tsx +++ b/src/routes/components/costDistribution/costDistribution.tsx @@ -1,8 +1,9 @@ import './costDistribution.scss'; import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core'; +import { Title, TitleSizes } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -70,8 +71,8 @@ class CostDistributionBase extends React.Component this.handleSelect(value)} + onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > @@ -96,7 +97,7 @@ class CostDistributionBase extends React.Component { + private handleSelect = (selection: CostDistributionOption) => { const { onSelect } = this.props; setCostDistribution(selection.value); // Set cost distribution in local storage diff --git a/src/routes/components/costType/costType.scss b/src/routes/components/costType/costType.scss index 8c47570820..9a3ce90478 100644 --- a/src/routes/components/costType/costType.scss +++ b/src/routes/components/costType/costType.scss @@ -2,8 +2,8 @@ // Workaround for https://github.com/patternfly/patternfly-react/issues/6371 .selectOverride { - &.pf-c-select { - .pf-c-select__menu-item-description { + &.pf-v5-c-select { + .pf-v5-c-select__menu-item-description { width: max-content; } } diff --git a/src/routes/components/costType/costType.tsx b/src/routes/components/costType/costType.tsx index 0be78621f1..ffd06a4633 100644 --- a/src/routes/components/costType/costType.tsx +++ b/src/routes/components/costType/costType.tsx @@ -1,8 +1,9 @@ import './costType.scss'; import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core'; +import { Title, TitleSizes } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -77,8 +78,8 @@ class CostTypeBase extends React.Component { id="costTypeSelect" isDisabled={isDisabled} isOpen={isSelectOpen} - onSelect={this.handleSelect} - onToggle={this.handleToggle} + onSelect={(_evt, value) => this.handleSelect(value)} + onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > @@ -104,7 +105,7 @@ class CostTypeBase extends React.Component { return options; }; - private handleSelect = (event, selection: CostTypeOption) => { + private handleSelect = (selection: CostTypeOption) => { const { isLocalStorage = true, onSelect } = this.props; // Set cost type in local storage diff --git a/src/routes/components/currency/currency.scss b/src/routes/components/currency/currency.scss index 374ceb421f..eafea7f5d4 100644 --- a/src/routes/components/currency/currency.scss +++ b/src/routes/components/currency/currency.scss @@ -2,7 +2,7 @@ // Workaround for missing "position" property .currencyOverride { - .pf-c-select__menu { + .pf-v5-c-select__menu { right: 0; } } diff --git a/src/routes/components/currency/currency.tsx b/src/routes/components/currency/currency.tsx index 8dc4c93c5f..b858949054 100644 --- a/src/routes/components/currency/currency.tsx +++ b/src/routes/components/currency/currency.tsx @@ -1,8 +1,9 @@ import './currency.scss'; import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core'; +import { Title, TitleSizes } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -80,8 +81,8 @@ class CurrencyBase extends React.Component { id="currencySelect" isDisabled={isDisabled} isOpen={isSelectOpen} - onSelect={this.handleSelect} - onToggle={this.handleToggle} + onSelect={(_evt, value) => this.handleSelect(value)} + onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > @@ -106,7 +107,7 @@ class CurrencyBase extends React.Component { return options; }; - private handleSelect = (event, selection: CurrencyOption) => { + private handleSelect = (selection: CurrencyOption) => { const { isLocalStorage = true, onSelect } = this.props; // Set currency units via local storage diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss index ef5b85fd80..d97c63d360 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-global--spacer--xs); + margin-bottom: var(--pf-v5-global--spacer--xs); &.iconOverride { &.decrease { - color: var(--pf-global--success-color--100); + color: var(--pf-v5-global--success-color--100); } &.increase { - color: var(--pf-global--danger-color--100); + color: var(--pf-v5-global--danger-color--100); } .fa-sort-up { margin-left: 10px; @@ -19,10 +19,10 @@ margin-left: 10px; } .fa-sort-up::before { - color: var(--pf-global--danger-color--100); + color: var(--pf-v5-global--danger-color--100); } .fa-sort-down::before { - color: var(--pf-global--success-color--100); + color: var(--pf-v5-global--success-color--100); } span { margin-right: -17px !important; @@ -32,7 +32,7 @@ } .tableOverride { - &.pf-c-table tbody .pf-c-table__check input { + &.pf-v5-c-table tbody .pf-v5-c-table__check input { margin-top: .40rem; } } diff --git a/src/routes/components/dataTable/dataTable.tsx b/src/routes/components/dataTable/dataTable.tsx index 5e67b4a4dd..d0b187ed1a 100644 --- a/src/routes/components/dataTable/dataTable.tsx +++ b/src/routes/components/dataTable/dataTable.tsx @@ -1,9 +1,25 @@ import './dataTable.scss'; -import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner } from '@patternfly/react-core'; +import { + Bullseye, + EmptyState, + EmptyStateBody, + EmptyStateHeader, + EmptyStateIcon, + 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, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; +import { + SortByDirection, + Table /* data-codemods */, + TableVariant, + Tbody, + Td, + Th, + Thead, + Tr, +} from '@patternfly/react-table'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -48,7 +64,7 @@ class DataTable extends React.Component { } return ( - + } /> {intl.formatMessage(messages.detailsEmptyState)} ); @@ -70,12 +86,12 @@ class DataTable extends React.Component { private getSortParams = (index: number): ThProps['sort'] => { return { sortBy: this.getSortBy(index), - onSort: this.handleOnSort, + onSort: (_evt, i, direction) => this.handleOnSort(i, direction), columnIndex: index, }; }; - private handleOnSelect = (event, isSelected, rowId) => { + private handleOnSelect = (isSelected, rowId) => { const { onSelected, rows } = this.props; let newRows; @@ -97,7 +113,7 @@ class DataTable extends React.Component { }); }; - private handleOnSort = (event, index, direction) => { + private handleOnSort = (index, direction) => { const { columns, onSort } = this.props; if (onSort) { @@ -112,7 +128,7 @@ class DataTable extends React.Component { return ( <> - { key={`cell-${cellIndex}-${rowIndex}`} modifier="nowrap" select={{ - disable: row.selectionDisabled, // Disable select for "no-project" + isDisabled: row.selectionDisabled, // Disable select for "no-project" isSelected: row.selected, - onSelect: (_event, isSelected) => this.handleOnSelect(_event, isSelected, rowIndex), + onSelect: (_evt, isSelected) => this.handleOnSelect(isSelected, rowIndex), rowIndex, }} style={item.style} @@ -176,7 +192,7 @@ class DataTable extends React.Component { )) )} - + {rows.length === 0 &&
{this.getEmptyState()}
} ); diff --git a/src/routes/components/dataTable/selectableTable.tsx b/src/routes/components/dataTable/selectableTable.tsx index 83bb60d615..bb2e2c25ce 100644 --- a/src/routes/components/dataTable/selectableTable.tsx +++ b/src/routes/components/dataTable/selectableTable.tsx @@ -1,7 +1,23 @@ -import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner } from '@patternfly/react-core'; +import { + Bullseye, + EmptyState, + EmptyStateBody, + EmptyStateHeader, + EmptyStateIcon, + 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, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; +import { + SortByDirection, + Table /* data-codemods */, + TableVariant, + Tbody, + Td, + Th, + Thead, + Tr, +} from '@patternfly/react-table'; import messages from 'locales/messages'; import type { ReactNode } from 'react'; import React from 'react'; @@ -18,7 +34,7 @@ interface SelectableTableOwnProps { filterBy: any; isLoading?: boolean; onSort(value: string, isSortAscending: boolean); - onRowClick(event: React.KeyboardEvent | React.MouseEvent, rowIndex: number); + onRowClick(rowIndex: number); orderBy: any; rows?: any[]; } @@ -47,7 +63,7 @@ class SelectableTable extends React.Component { } return ( - + } /> {intl.formatMessage(messages.detailsEmptyState)} ); @@ -74,7 +90,7 @@ class SelectableTable extends React.Component { }; }; - private handleOnSort = (event, index, direction) => { + private handleOnSort = (index, direction) => { const { columns, onSort } = this.props; if (onSort) { @@ -84,7 +100,7 @@ class SelectableTable extends React.Component { } }; - private handleOnRowClick = (event, rowIndex) => { + private handleOnRowClick = (rowIndex: number) => { const { onRowClick, rows } = this.props; rows.map(row => (row.selected = false)); @@ -92,7 +108,7 @@ class SelectableTable extends React.Component { this.setState({ rows }, () => { if (onRowClick) { - onRowClick(event, rowIndex); + onRowClick(rowIndex); } }); }; @@ -102,10 +118,9 @@ class SelectableTable extends React.Component { return ( <> - @@ -138,9 +153,9 @@ class SelectableTable extends React.Component { this.handleOnRowClick(_event, rowIndex)} + onRowClick={_evt => this.handleOnRowClick(rowIndex)} key={`row-${rowIndex}`} > {row.cells.map((item, cellIndex) => @@ -169,7 +184,7 @@ class SelectableTable extends React.Component { )) )} - + {rows.length === 0 &&
{this.getEmptyState()}
} ); diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx index e3e1521a68..ab6f0ca39f 100644 --- a/src/routes/components/dataToolbar/basicToolbar.tsx +++ b/src/routes/components/dataToolbar/basicToolbar.tsx @@ -178,7 +178,7 @@ export class BasicToolbarBase extends React.Component { + private handleOnCategorySelect = (selection: CategoryOption) => { this.setState({ categoryInput: '', currentCategory: selection.value, @@ -318,7 +318,7 @@ export class BasicToolbarBase extends React.Component )} {actions && {actions}} - + {pagination} diff --git a/src/routes/components/dataToolbar/costCategoryValue.tsx b/src/routes/components/dataToolbar/costCategoryValue.tsx index 9b55647024..5b212bca6a 100644 --- a/src/routes/components/dataToolbar/costCategoryValue.tsx +++ b/src/routes/components/dataToolbar/costCategoryValue.tsx @@ -1,13 +1,7 @@ -import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core'; -import { - Button, - ButtonVariant, - InputGroup, - Select, - SelectOption, - SelectVariant, - TextInput, -} from '@patternfly/react-core'; +import type { ToolbarChipGroup } from '@patternfly/react-core'; +import { Button, ButtonVariant, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import type { Query } from 'api/queries/query'; import { getQuery, parseQuery } from 'api/queries/query'; @@ -141,8 +135,8 @@ class CostCategoryValueBase extends React.Component this.onCostCategoryValueToggle(isExpanded)} selections={selections} isOpen={isCostCategoryValueExpanded} placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)} @@ -153,25 +147,29 @@ class CostCategoryValueBase extends React.Component - onCostCategoryValueInput(evt)} - /> - + + this.onCostCategoryValueChange(value)} + value={costCategoryKeyValue} + placeholder={intl.formatMessage(messages.filterByValuePlaceholder)} + onKeyDown={evt => onCostCategoryValueInput(evt)} + /> + + + + ); } diff --git a/src/routes/components/dataToolbar/dataKebab.tsx b/src/routes/components/dataToolbar/dataKebab.tsx index 995f4f7a0f..ca31796c1d 100644 --- a/src/routes/components/dataToolbar/dataKebab.tsx +++ b/src/routes/components/dataToolbar/dataKebab.tsx @@ -1,5 +1,5 @@ import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core'; +import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; import { injectIntl } from 'react-intl'; diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss index 63c426fdbf..7502b8ca36 100644 --- a/src/routes/components/dataToolbar/dataToolbar.scss +++ b/src/routes/components/dataToolbar/dataToolbar.scss @@ -3,15 +3,15 @@ // Workaround for https://github.com/patternfly/patternfly-react/issues/4477 // and https://github.com/patternfly/patternfly-react/issues/6371 .selectOverride { - &.pf-c-select { + &.pf-v5-c-select { min-width: 250px; } } .toolbarOverride { - .pf-c-button.pf-m-control::after { + .pf-v5-c-button.pf-m-control::after { border-left: none; } // Alternative workaround to overriding table sticky style - // --pf-c-toolbar--ZIndex: auto; z-index: 301; + // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301; } diff --git a/src/routes/components/dataToolbar/dataToolbar.tsx b/src/routes/components/dataToolbar/dataToolbar.tsx index 3554a0be5a..e028e141d9 100644 --- a/src/routes/components/dataToolbar/dataToolbar.tsx +++ b/src/routes/components/dataToolbar/dataToolbar.tsx @@ -235,7 +235,7 @@ export class DataToolbarBase extends React.Component { + private handleOnCategorySelect = (selection: CategoryOption) => { this.setState({ categoryInput: '', currentCategory: selection.value, @@ -277,7 +277,7 @@ export class DataToolbarBase extends React.Component { + private handleOnCategoryInput = (event: React.FormEvent, key) => { const { onFilterAdded } = this.props; const { categoryInput, currentCategory, currentExclude, filters: currentFilters } = this.state; @@ -382,7 +382,7 @@ export class DataToolbarBase extends React.Component { + private handleOnCostCategoryKeySelect = selection => { this.setState({ currentCostCategoryKey: selection, isCostCategoryKeySelectExpanded: !this.state.isCostCategoryKeySelectExpanded, @@ -491,7 +491,7 @@ export class DataToolbarBase extends React.Component { + private handleOnExcludeSelect = (selection: ExcludeOption) => { this.setState({ currentExclude: selection.value, isExcludeSelectOpen: !this.state.isExcludeSelectOpen, @@ -582,7 +582,7 @@ export class DataToolbarBase extends React.Component { + private handleOnTagKeySelect = selection => { this.setState({ currentTagKey: selection, isTagKeySelectExpanded: !this.state.isTagKeySelectExpanded, @@ -814,7 +814,7 @@ export class DataToolbarBase extends React.Component )} - + {pagination} diff --git a/src/routes/components/dataToolbar/tagValue.tsx b/src/routes/components/dataToolbar/tagValue.tsx index 484c6a1791..ba3e91f14f 100644 --- a/src/routes/components/dataToolbar/tagValue.tsx +++ b/src/routes/components/dataToolbar/tagValue.tsx @@ -1,13 +1,7 @@ -import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core'; -import { - Button, - ButtonVariant, - InputGroup, - Select, - SelectOption, - SelectVariant, - TextInput, -} from '@patternfly/react-core'; +import type { ToolbarChipGroup } from '@patternfly/react-core'; +import { Button, ButtonVariant, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import type { Query } from 'api/queries/query'; import { getQuery, parseQuery } from 'api/queries/query'; @@ -140,8 +134,8 @@ class TagValueBase extends React.Component { isDisabled={isDisabled} variant={SelectVariant.checkbox} aria-label={intl.formatMessage(messages.filterByTagValueAriaLabel)} - onToggle={this.onTagValueToggle} onSelect={onTagValueSelect} + onToggle={(_evt, isExpanded) => this.onTagValueToggle(isExpanded)} selections={selections} isOpen={isTagValueExpanded} placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)} @@ -152,25 +146,29 @@ class TagValueBase extends React.Component { } return ( - onTagValueInput(evt)} - /> - + + this.onTagValueChange(value)} + value={tagKeyValue} + placeholder={intl.formatMessage(messages.filterByValuePlaceholder)} + onKeyDown={evt => onTagValueInput(evt)} + /> + + + + ); } diff --git a/src/routes/components/dataToolbar/utils/actions.tsx b/src/routes/components/dataToolbar/utils/actions.tsx index 992f57e4e3..6700697447 100644 --- a/src/routes/components/dataToolbar/utils/actions.tsx +++ b/src/routes/components/dataToolbar/utils/actions.tsx @@ -70,7 +70,7 @@ export const getPlatformCosts = ({ label={intl.formatMessage(messages.sumPlatformCosts)} isChecked={isPlatformCostsChecked} isDisabled={isDisabled} - onChange={handlePlatformCostsChanged} + onChange={(_evt, checked) => handlePlatformCostsChanged(checked)} /> ); @@ -101,7 +101,7 @@ export const getKebab = ({ if (showPlatformCosts) { options.push({ label: messages.sumPlatformCosts, - onClick: () => handlePlatformCostsChanged(!isPlatformCostsChecked), + onClick: (_evt, _checked) => handlePlatformCostsChanged(!isPlatformCostsChecked), }); } return ( diff --git a/src/routes/components/dataToolbar/utils/bulkSelect.tsx b/src/routes/components/dataToolbar/utils/bulkSelect.tsx index 0e2e3e89ac..84f1f2680f 100644 --- a/src/routes/components/dataToolbar/utils/bulkSelect.tsx +++ b/src/routes/components/dataToolbar/utils/bulkSelect.tsx @@ -4,7 +4,7 @@ import { DropdownPosition, DropdownToggle, DropdownToggleCheckbox, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/deprecated'; import { intl } from 'components/i18n'; import messages from 'locales/messages'; import React from 'react'; @@ -72,7 +72,7 @@ export const getBulkSelect = ({ }} />, ]} - onToggle={handleOnBulkSelectToggle} + onToggle={(_evt, isOpen) => handleOnBulkSelectToggle(isOpen)} > {numSelected !== 0 && ( {intl.formatMessage(messages.selected, { value: numSelected })} diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx index 79781f02a8..3791df7cf6 100644 --- a/src/routes/components/dataToolbar/utils/category.tsx +++ b/src/routes/components/dataToolbar/utils/category.tsx @@ -1,15 +1,15 @@ -import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core'; +import type { ToolbarChipGroup } from '@patternfly/react-core'; import { Button, ButtonVariant, InputGroup, - Select, - SelectOption, - SelectVariant, + InputGroupItem, TextInput, ToolbarFilter, ToolbarItem, } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import type { ResourceType } from 'api/resources/resource'; @@ -70,47 +70,49 @@ export const getCategoryInput = ({ showToolbarItem={currentCategory === categoryOption.key} > - {categoryOption.key === 'workload_type' ? ( - filter.value) : [] - } - /> - ) : isResourceTypeValid(resourcePathsType, categoryOption.key as ResourceType) ? ( - handleOnCategoryInputSelect(value, categoryOption.key)} - placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: categoryOption.key })} - resourcePathsType={resourcePathsType} - resourceType={categoryOption.key as ResourceType} - /> - ) : ( - <> - + {categoryOption.key === 'workload_type' ? ( + handleOnCategoryInput(evt, categoryOption.key)} - size={intl.formatMessage(messages.filterByPlaceholder, { value: categoryOption.key }).length} + onSelect={handleOnWorkloadTypeSelect} + selections={ + filters[categoryOption.key] ? (filters[categoryOption.key] as Filter[]).map(filter => filter.value) : [] + } /> - - - )} + onSelect={value => handleOnCategoryInputSelect(value, categoryOption.key)} + placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: categoryOption.key })} + resourcePathsType={resourcePathsType} + resourceType={categoryOption.key as ResourceType} + /> + ) : ( + <> + handleOnCategoryInputChange(value)} + value={categoryInput} + placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: categoryOption.key })} + onKeyDown={evt => handleOnCategoryInput(evt, categoryOption.key)} + size={intl.formatMessage(messages.filterByPlaceholder, { value: categoryOption.key }).length} + /> + + + )} + ); @@ -237,7 +239,7 @@ export const getCategorySelect = ({ currentCategory?: string; isDisabled?: boolean; filters?: Filters; - handleOnCategorySelect?: (event, selection: CategoryOption) => void; + handleOnCategorySelect?: (selection: CategoryOption) => void; handleOnCategoryToggle?: (isOpen: boolean) => void; isCategorySelectOpen?: boolean; }) => { @@ -254,8 +256,8 @@ export const getCategorySelect = ({ id="category-select" isDisabled={isDisabled && !hasFilters(filters)} isOpen={isCategorySelectOpen} - onSelect={handleOnCategorySelect} - onToggle={handleOnCategoryToggle} + onSelect={(_evt, value) => handleOnCategorySelect(value)} + onToggle={(_evt, isExpanded) => handleOnCategoryToggle(isExpanded)} selections={selection} toggleIcon={} variant={SelectVariant.single} diff --git a/src/routes/components/dataToolbar/utils/costCategory.tsx b/src/routes/components/dataToolbar/utils/costCategory.tsx index ba172175ca..e821f6f08a 100644 --- a/src/routes/components/dataToolbar/utils/costCategory.tsx +++ b/src/routes/components/dataToolbar/utils/costCategory.tsx @@ -1,5 +1,7 @@ import type { ToolbarChipGroup } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; +import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Resource } from 'api/resources/resource'; import type { ResourcePathsType } from 'api/resources/resource'; import { intl } from 'components/i18n'; @@ -30,7 +32,7 @@ export const getCostCategoryKeySelect = ({ currentCostCategoryKey?: string; filters?: Filters; handleOnCostCategoryKeyClear?: () => void; - handleOnCostCategoryKeySelect?: (event, selection) => void; + handleOnCostCategoryKeySelect?: (selection: SelectOptionObject) => void; handleOnCostCategoryKeyToggle?: (isOpen: boolean) => void; isCostCategoryKeySelectExpanded?: boolean; isDisabled?: boolean; @@ -51,8 +53,8 @@ export const getCostCategoryKeySelect = ({ variant={SelectVariant.typeahead} typeAheadAriaLabel={intl.formatMessage(messages.filterByCostCategoryKeyAriaLabel)} onClear={handleOnCostCategoryKeyClear} - onToggle={handleOnCostCategoryKeyToggle} - onSelect={handleOnCostCategoryKeySelect} + onSelect={(_evt, value) => handleOnCostCategoryKeySelect(value)} + onToggle={(_evt, isExpanded) => handleOnCostCategoryKeyToggle(isExpanded)} isOpen={isCostCategoryKeySelectExpanded} placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)} selections={currentCostCategoryKey} diff --git a/src/routes/components/dataToolbar/utils/exclude.tsx b/src/routes/components/dataToolbar/utils/exclude.tsx index eb08cf1610..cf94922053 100644 --- a/src/routes/components/dataToolbar/utils/exclude.tsx +++ b/src/routes/components/dataToolbar/utils/exclude.tsx @@ -1,5 +1,6 @@ -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, ToolbarItem } from '@patternfly/react-core'; +import { ToolbarItem } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import { intl } from 'components/i18n'; import messages from 'locales/messages'; import React from 'react'; @@ -30,7 +31,7 @@ export const getExcludeSelect = ({ }: { currentExclude?: string; filters?: Filters; - handleOnExcludeSelect: (event: any, selection: ExcludeOption) => void; + handleOnExcludeSelect: (selection: ExcludeOption) => void; handleOnExcludeToggle: (isOpen: boolean) => void; isDisabled?: boolean; isExcludeSelectOpen?: boolean; @@ -44,8 +45,8 @@ export const getExcludeSelect = ({ id="exclude-select" isDisabled={isDisabled && !hasFilters(filters)} isOpen={isExcludeSelectOpen} - onSelect={handleOnExcludeSelect} - onToggle={handleOnExcludeToggle} + onSelect={(_evt, value) => handleOnExcludeSelect(value)} + onToggle={(_evt, isExpanded) => handleOnExcludeToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > diff --git a/src/routes/components/dataToolbar/utils/orgUntits.tsx b/src/routes/components/dataToolbar/utils/orgUntits.tsx index f4d3e739c5..3cb1398f9e 100644 --- a/src/routes/components/dataToolbar/utils/orgUntits.tsx +++ b/src/routes/components/dataToolbar/utils/orgUntits.tsx @@ -1,5 +1,7 @@ -import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, ToolbarFilter } from '@patternfly/react-core'; +import type { ToolbarChipGroup } from '@patternfly/react-core'; +import { ToolbarFilter } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Org } from 'api/orgs/org'; import { intl } from 'components/i18n'; import messages from 'locales/messages'; @@ -30,7 +32,7 @@ export const getOrgUnitSelect = ({ currentCategory?: string; filters?: Filters; handleOnDelete?: (type: any, chip: any) => void; - handleOnOrgUnitSelect?: (event, selection: string) => void; + handleOnOrgUnitSelect?: (event: React.MouseEvent, selection: string) => void; handleOnOrgUnitToggle?: (isOpen: boolean) => void; isDisabled?: boolean; isOrgUnitSelectExpanded?: boolean; @@ -78,8 +80,8 @@ export const getOrgUnitSelect = ({ className="selectOverride" variant={SelectVariant.checkbox} aria-label={intl.formatMessage(messages.filterByOrgUnitAriaLabel)} - onToggle={handleOnOrgUnitToggle} onSelect={handleOnOrgUnitSelect} + onToggle={(_evt, isExpanded) => handleOnOrgUnitToggle(isExpanded)} selections={selections} isOpen={isOrgUnitSelectExpanded} placeholderText={intl.formatMessage(messages.filterByOrgUnitPlaceholder)} diff --git a/src/routes/components/dataToolbar/utils/tags.tsx b/src/routes/components/dataToolbar/utils/tags.tsx index 40eb3ece41..2a0f755001 100644 --- a/src/routes/components/dataToolbar/utils/tags.tsx +++ b/src/routes/components/dataToolbar/utils/tags.tsx @@ -1,5 +1,7 @@ import type { ToolbarChipGroup } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; +import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Tag } from 'api/tags/tag'; import type { TagPathsType } from 'api/tags/tag'; import { intl } from 'components/i18n'; @@ -28,7 +30,7 @@ export const getTagKeySelect = ({ currentTagKey?: string; filters?: Filters; handleOnTagKeyClear?: () => void; - handleOnTagKeySelect?: (event, selection) => void; + handleOnTagKeySelect?: (value: SelectOptionObject) => void; handleOnTagKeyToggle?: (isOpen: boolean) => void; isDisabled?: boolean; isTagKeySelectExpanded?: boolean; @@ -49,8 +51,8 @@ export const getTagKeySelect = ({ variant={SelectVariant.typeahead} typeAheadAriaLabel={intl.formatMessage(messages.filterByTagKeyAriaLabel)} onClear={handleOnTagKeyClear} - onToggle={handleOnTagKeyToggle} - onSelect={handleOnTagKeySelect} + onSelect={(_evt, value) => handleOnTagKeySelect(value)} + onToggle={(_evt, isExpanded) => handleOnTagKeyToggle(isExpanded)} isOpen={isTagKeySelectExpanded} placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)} selections={currentTagKey} diff --git a/src/routes/components/dataToolbar/workloadType.tsx b/src/routes/components/dataToolbar/workloadType.tsx index 8ba61f9777..2d358ef924 100644 --- a/src/routes/components/dataToolbar/workloadType.tsx +++ b/src/routes/components/dataToolbar/workloadType.tsx @@ -1,7 +1,8 @@ import './dataToolbar.scss'; -import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import type { ToolbarChipGroup } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -60,8 +61,8 @@ class WorkloadTypeBase extends React.Component this.onToggle(isExpanded)} selections={selections} isOpen={isWorkloadTypeExpanded} placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)} diff --git a/src/routes/components/export/exportModal.tsx b/src/routes/components/export/exportModal.tsx index 831a5c0271..7e1c5e1dd6 100644 --- a/src/routes/components/export/exportModal.tsx +++ b/src/routes/components/export/exportModal.tsx @@ -7,6 +7,8 @@ import { FormGroup, Grid, GridItem, + HelperText, + HelperTextItem, Modal, Radio, TextInput, @@ -108,19 +110,19 @@ export class ExportModalBase extends React.Component { + private handleMonthChange = event => { this.setState({ timeScope: event.currentTarget.value }); }; - private handleNameChange = (_, event) => { + private handleNameChange = event => { this.setState({ name: event.currentTarget.value }); }; - private handleResolutionChange = (_, event) => { + private handleResolutionChange = event => { this.setState({ resolution: event.currentTarget.value }); }; - private handleTypeChange = (_, event) => { + private handleTypeChange = event => { this.setState({ formatType: event.currentTarget.value }); }; @@ -227,13 +229,7 @@ export class ExportModalBase extends React.Component {isExportsFeatureEnabled && ( - + + {validated === 'error' && ( + + {intl.formatMessage(helpText)} + + )} )} diff --git a/src/routes/components/groupBy/groupBy.tsx b/src/routes/components/groupBy/groupBy.tsx index 77f61d5fdb..91a6fc53fc 100644 --- a/src/routes/components/groupBy/groupBy.tsx +++ b/src/routes/components/groupBy/groupBy.tsx @@ -1,5 +1,6 @@ -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, Title } from '@patternfly/react-core'; +import { Title } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Org, OrgPathsType } from 'api/orgs/org'; import { OrgType } from 'api/orgs/org'; import type { Query } from 'api/queries/query'; @@ -198,8 +199,8 @@ class GroupByBase extends React.Component { id="groupBySelect" isDisabled={isDisabled} isOpen={isGroupByOpen} - onSelect={this.handleGroupBySelected} - onToggle={this.handleGroupByToggle} + onSelect={(_evt, value) => this.handleGroupBySelected(value)} + onToggle={(_evt, isExpanded) => this.handleGroupByToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > @@ -239,7 +240,7 @@ class GroupByBase extends React.Component { }); }; - private handleGroupBySelected = (event, selection: GroupByOption) => { + private handleGroupBySelected = (selection: GroupByOption) => { const { onSelected } = this.props; if (selection.value === orgUnitIdKey || selection.value === awsCategoryKey || selection.value === tagKey) { diff --git a/src/routes/components/groupBy/groupByOrg.tsx b/src/routes/components/groupBy/groupByOrg.tsx index 5906293a50..5e36d8ba2b 100644 --- a/src/routes/components/groupBy/groupByOrg.tsx +++ b/src/routes/components/groupBy/groupByOrg.tsx @@ -1,5 +1,5 @@ -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Org } from 'api/orgs/org'; import type { Query } from 'api/queries/query'; import { parseQuery } from 'api/queries/query'; @@ -120,7 +120,7 @@ class GroupByOrgBase extends React.Component { }); }; - private handleGroupBySelected = (event, selection: GroupByOrgOption) => { + private handleGroupBySelected = (selection: GroupByOrgOption) => { const { onSelected } = this.props; this.setState({ @@ -149,8 +149,8 @@ class GroupByOrgBase extends React.Component { aria-label={intl.formatMessage(messages.filterByOrgUnitAriaLabel)} isDisabled={isDisabled} onClear={this.handleGroupByClear} - onToggle={this.handleGroupByToggle} - onSelect={this.handleGroupBySelected} + onSelect={(_evt, value) => this.handleGroupBySelected(value)} + onToggle={(_evt, isExpanded) => this.handleGroupByToggle(isExpanded)} isOpen={isGroupByOpen} placeholderText={intl.formatMessage(messages.filterByOrgUnitPlaceholder)} selections={selection} diff --git a/src/routes/components/groupBy/groupBySelect.tsx b/src/routes/components/groupBy/groupBySelect.tsx index 0dd1ddee3a..db456ef599 100644 --- a/src/routes/components/groupBy/groupBySelect.tsx +++ b/src/routes/components/groupBy/groupBySelect.tsx @@ -1,4 +1,4 @@ -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import type { Query } from 'api/queries/query'; import { parseQuery } from 'api/queries/query'; import type { Resource } from 'api/resources/resource'; @@ -120,16 +120,16 @@ class GroupBySelectBase extends React.Component { + private handleGroupBySelected = value => { const { onSelected } = this.props; const { prefix } = this.state; this.setState({ - currentItem: selection, + currentItem: value, isGroupByOpen: false, }); if (onSelected) { - onSelected(`${prefix}${selection}`); + onSelected(`${prefix}${value}`); } }; @@ -149,8 +149,8 @@ class GroupBySelectBase extends React.Component this.handleGroupBySelected(value)} + onToggle={(_evt, isExpanded) => this.handleGroupByToggle(isExpanded)} isOpen={isGroupByOpen} placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)} selections={currentItem} diff --git a/src/routes/components/optimizations/optimizationsTable.tsx b/src/routes/components/optimizations/optimizationsTable.tsx index 77bee5669f..783fe53266 100644 --- a/src/routes/components/optimizations/optimizationsTable.tsx +++ b/src/routes/components/optimizations/optimizationsTable.tsx @@ -151,7 +151,7 @@ class OptimizationsTableBase extends React.Component { + private handleOnRowClick = (rowIndex: number) => { const { closeOptimizationsDrawer, isOpen, openOptimizationsDrawer } = this.props; const { currentRow, rows } = this.state; diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx index 10560d6257..6912fff878 100644 --- a/src/routes/components/page/noData/noDataState.tsx +++ b/src/routes/components/page/noData/noDataState.tsx @@ -2,10 +2,10 @@ import { Button, EmptyState, EmptyStateBody, + EmptyStateFooter, + EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, - Title, - TitleSizes, } from '@patternfly/react-core'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import messages from 'locales/messages'; @@ -24,17 +24,20 @@ class NoDataStateBase extends React.Component { const { intl, showReload = true } = this.props; return ( - - - - {intl.formatMessage(messages.noDataStateTitle)} - + + {intl.formatMessage(messages.noDataStateTitle)}} + icon={} + headingLevel="h5" + /> {intl.formatMessage(messages.noDataStateDesc)} - {showReload && ( - - )} + + {showReload && ( + + )} + ); } diff --git a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx index 2cf0d3df80..771c8275f9 100644 --- a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx +++ b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx @@ -1,10 +1,9 @@ import { EmptyState, EmptyStateBody, + EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, - Title, - TitleSizes, } from '@patternfly/react-core'; import messages from 'locales/messages'; import React from 'react'; @@ -23,11 +22,12 @@ class NoOptimizationsStateBase extends React.Component - - - {intl.formatMessage(messages.noOptimizationsTitle)} - + + {intl.formatMessage(messages.noOptimizationsTitle)}} + icon={} + headingLevel="h1" + /> {intl.formatMessage(messages.noOptimizationsDesc)} ); diff --git a/src/routes/components/page/noProviders/noProvidersState.tsx b/src/routes/components/page/noProviders/noProvidersState.tsx index 31faf92eb5..175364ee1f 100644 --- a/src/routes/components/page/noProviders/noProvidersState.tsx +++ b/src/routes/components/page/noProviders/noProvidersState.tsx @@ -3,10 +3,10 @@ import { Button, EmptyState, EmptyStateBody, + EmptyStateFooter, + EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, - Title, - TitleSizes, } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; @@ -82,19 +82,22 @@ class NoProvidersStateBase extends React.Component { icon = CostIcon; } return ( - - - - {intl.formatMessage(titleKey)} - + + {intl.formatMessage(titleKey)}} + icon={} + headingLevel="h1" + /> {intl.formatMessage(descKey)} - {docUrlKey && textKey ? ( -
{this.getDocLink(textKey, docUrlKey)}
- ) : ( - - )} + + {docUrlKey && textKey ? ( +
{this.getDocLink(textKey, docUrlKey)}
+ ) : ( + + )} + ); } diff --git a/src/routes/components/perspective/perspectiveSelect.tsx b/src/routes/components/perspective/perspectiveSelect.tsx index a036b356a0..cb7c069e63 100644 --- a/src/routes/components/perspective/perspectiveSelect.tsx +++ b/src/routes/components/perspective/perspectiveSelect.tsx @@ -1,6 +1,7 @@ import type { MessageDescriptor } from '@formatjs/intl/src/types'; -import type { SelectOptionObject } from '@patternfly/react-core'; -import { Select, SelectOption, SelectVariant, Title } from '@patternfly/react-core'; +import { Title } from '@patternfly/react-core'; +import type { SelectOptionObject } from '@patternfly/react-core/deprecated'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -73,8 +74,8 @@ class PerspectiveSelectBase extends React.Component this.handleSelect(value)} + onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)} selections={selection} variant={SelectVariant.single} > @@ -85,7 +86,7 @@ class PerspectiveSelectBase extends React.Component { + private handleSelect = (selection: PerspectiveOption) => { const { onSelected } = this.props; if (onSelected) { 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 ff9e4a88d0..71e2bd5e47 100644 --- a/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap +++ b/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap @@ -3,35 +3,35 @@ exports[`contains skeleton readers if in progress 1`] = `
diff --git a/src/routes/components/reports/reportSummary/reportSummary.scss b/src/routes/components/reports/reportSummary/reportSummary.scss index 52822992fd..e556562823 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-global--spacer--md); - margin-top: var(--pf-global--spacer--md); + margin-bottom: var(--pf-v5-global--spacer--md); + margin-top: var(--pf-v5-global--spacer--md); } .legendSkeleton { - margin-top: var(--pf-global--spacer--md), + margin-top: var(--pf-v5-global--spacer--md), } .reportSummary { @@ -16,7 +16,7 @@ .subtitle { display: inline-block; - font-size: var(--pf-global--FontSize--xs); - color: var(--pf-global--Color--200); + font-size: var(--pf-v5-global--FontSize--xs); + color: var(--pf-v5-global--Color--200); margin-bottom: 0; } diff --git a/src/routes/components/reports/reportSummary/reportSummaryAlt.scss b/src/routes/components/reports/reportSummary/reportSummaryAlt.scss index 6d6ca62d8a..c73fe7209f 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-global--spacer--md); - margin-top: var(--pf-global--spacer--md); + margin-bottom: var(--pf-v5-global--spacer--md); + margin-top: var(--pf-v5-global--spacer--md); } .cost { flex-grow: 1; min-height: 470px; - margin-tight: var(--pf-global--spacer--md); + margin-tight: var(--pf-v5-global--spacer--md); } .legendSkeleton { - margin-top: var(--pf-global--spacer--md), + margin-top: var(--pf-v5-global--spacer--md), } .reportSummary { @@ -22,11 +22,11 @@ .subtitle { display: inline-block; - font-size: var(--pf-global--FontSize--xs); - color: var(--pf-global--Color--200); + font-size: var(--pf-v5-global--FontSize--xs); + color: var(--pf-v5-global--Color--200); margin-bottom: 0; } .tops { - margin-top: var(--pf-global--spacer--lg), + margin-top: var(--pf-v5-global--spacer--lg), } diff --git a/src/routes/components/reports/reportSummary/reportSummaryCost.scss b/src/routes/components/reports/reportSummary/reportSummaryCost.scss index c9f1e03a97..22b63d7963 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-global--spacer--sm); + margin-bottom: var(--pf-v5-global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss index c9f1e03a97..22b63d7963 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-global--spacer--sm); + margin-bottom: var(--pf-v5-global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss index 0a23f9d307..47363e31f4 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-global--spacer--sm); + margin-nottom: var(--pf-v5-global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryDetails.scss b/src/routes/components/reports/reportSummary/reportSummaryDetails.scss index f7bac986d2..c569b949f7 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-global--spacer--md); + margin-bottom: var(--pf-v5-global--spacer--md); display: flex; align-Items: flex-end; } .text { - padding-bottom: var(--pf-global--spacer--sm); - line-height: var(--pf-global--LineHeight--sm); - font-size: var(--pf-global--FontSize--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); } .units { - padding-left: var(--pf-global--spacer--xs); - padding-bottom: var(--pf-global--spacer--sm); - line-height: var(--pf-global--LineHeight--sm); - font-size: var(--pf-global--FontSize--xs); + 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); white-space: nowrap; } .value { - color: var(--pf-global--Color--100); - margin-right: var(--pf-global--spacer--sm); - font-size: var(--pf-global--FontSize--2xl); + color: var(--pf-v5-global--Color--100); + margin-right: var(--pf-v5-global--spacer--sm); + font-size: var(--pf-v5-global--FontSize--2xl); } .valueAlt { - color: var(--pf-global--Color--100); - margin-right: var(--pf-global--spacer--sm); - font-size: var(--pf-global--FontSize--4xl); + color: var(--pf-v5-global--Color--100); + margin-right: var(--pf-v5-global--spacer--sm); + font-size: var(--pf-v5-global--FontSize--4xl); } .valueContainer { display: inline-block; - margin-bottom: var(--pf-global--spacer--md); + margin-bottom: var(--pf-v5-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 418c0e6c9a..7bcc047b70 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-global--spacer--md); + margin-bottom: var(--pf-v5-global--spacer--md); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryItems.scss b/src/routes/components/reports/reportSummary/reportSummaryItems.scss index 63a966fc8b..b8f585f231 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-global--spacer--md); + margin-top: var(--pf-v5-global--spacer--md); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryTrend.scss index 0a23f9d307..47363e31f4 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-global--spacer--sm); + margin-nottom: var(--pf-v5-global--spacer--sm); } diff --git a/src/routes/components/reports/reportSummary/reportSummaryUsage.scss b/src/routes/components/reports/reportSummary/reportSummaryUsage.scss index c9f1e03a97..22b63d7963 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-global--spacer--sm); + margin-bottom: var(--pf-v5-global--spacer--sm); } diff --git a/src/routes/components/resourceTypeahead/resourceInput.tsx b/src/routes/components/resourceTypeahead/resourceInput.tsx index c8eb7653cd..ed900f46ee 100644 --- a/src/routes/components/resourceTypeahead/resourceInput.tsx +++ b/src/routes/components/resourceTypeahead/resourceInput.tsx @@ -124,17 +124,13 @@ class ResourceInputBase extends React.Component { - const { search } = this.props; - return (
- {search && search.length && ( - - - {this.getMenuItems()} - - - )} + + + {this.getMenuItems()} + +
); }; diff --git a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx index 6da659ebab..c2593d564f 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 { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core'; import { Bullseye } from '@patternfly/react-core'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import type { Query } from 'api/queries/query'; @@ -115,9 +115,7 @@ const EmptyFilterStateBase: React.FC = ({ > {getItem()} - - {intl.formatMessage(title)} - + {intl.formatMessage(title)}} headingLevel="h2" /> {intl.formatMessage(subTitle)}
diff --git a/src/routes/components/state/emptyValueState/emptyValueState.scss b/src/routes/components/state/emptyValueState/emptyValueState.scss index 11de799fab..ada2615611 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-global--FontSize--sm); + font-size: var(--pf-v5-global--FontSize--sm); } diff --git a/src/routes/components/state/errorState/errorState.tsx b/src/routes/components/state/errorState/errorState.tsx index 579bb821eb..9daa76d01a 100644 --- a/src/routes/components/state/errorState/errorState.tsx +++ b/src/routes/components/state/errorState/errorState.tsx @@ -1,10 +1,9 @@ import { EmptyState, EmptyStateBody, + EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, - Title, - TitleSizes, } 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'; @@ -30,11 +29,8 @@ const ErrorStateBase: React.FC = ({ error, icon = ErrorCircleOI } return ( - - - - {title} - + + {title}} icon={} headingLevel="h5" /> {subTitle} ); diff --git a/src/routes/components/state/loadingState/loadingState.tsx b/src/routes/components/state/loadingState/loadingState.tsx index 6e2eb0ca3b..eed2a95d8f 100644 --- a/src/routes/components/state/loadingState/loadingState.tsx +++ b/src/routes/components/state/loadingState/loadingState.tsx @@ -1,4 +1,4 @@ -import { EmptyState, EmptyStateBody, EmptyStateVariant, Spinner, Title, TitleSizes } from '@patternfly/react-core'; +import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateVariant, Spinner } from '@patternfly/react-core'; import { intl as defaultIntl } from 'components/i18n'; import messages from 'locales/messages'; import React from 'react'; @@ -19,11 +19,9 @@ const LoadingStateBase: React.FC = ({ heading = intl.formatMessage(messages.loadingStateTitle), }) => { return ( - + - - {heading} - + {heading}} headingLevel="h5" /> {body} ); diff --git a/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap b/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap index ebca6f9f49..5e1ee79064 100644 --- a/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap +++ b/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap @@ -3,22 +3,26 @@ 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"} , @@ -28,22 +32,26 @@ exports[`rate-table sort by metric & measurement 1`] = ` exports[`rate-table sort by metric & measurement 2`] = ` [ {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"} , @@ -53,22 +61,26 @@ exports[`rate-table sort by metric & measurement 2`] = ` exports[`rate-table sort by metric & measurement 3`] = ` [ {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/costModels/components/__snapshots__/warningIcon.test.tsx.snap b/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap index 4ccacb8959..b0662a0bb9 100644 --- a/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap +++ b/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap @@ -3,10 +3,11 @@ exports[`warning icon 1`] = `
+
); }; diff --git a/src/routes/costModels/components/rateForm/rateForm.tsx b/src/routes/costModels/components/rateForm/rateForm.tsx index 47220e2e78..f8fd9ad2f6 100644 --- a/src/routes/costModels/components/rateForm/rateForm.tsx +++ b/src/routes/costModels/components/rateForm/rateForm.tsx @@ -103,7 +103,7 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn value={description} validated={errors.description ? 'error' : 'default'} helperTextInvalid={errors.description} - onChange={setDescription} + onChange={(_evt, value) => setDescription(value)} /> @@ -115,7 +115,7 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn label={intl.formatMessage(messages.metric)} placeholderText={intl.formatMessage(messages.select)} value={metric} - onChange={setMetric} + onChange={(_evt, value) => setMetric(value)} options={[ ...metricOptions.map(opt => { return { @@ -142,7 +142,7 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn ? measurement : getMeasurementLabel(measurement, metricsHash[metric][measurement].label_measurement_unit) } - onChange={setMeasurement} + onChange={(_evt, value) => setMeasurement(value)} placeholderText="Select..." options={[ ...measurementOptions.map(opt => { @@ -197,7 +197,7 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn currencyUnits={currencyUnits} fieldId="regular-rate" helperTextInvalid={errors.tieredRates} - onChange={setRegular} + onChange={(_evt, value) => setRegular(value)} style={style} validated={errors.tieredRates && regularDirty ? 'error' : 'default'} value={inputValue} @@ -208,7 +208,7 @@ const RateFormBase: React.FC = ({ currencyUnits, intl = defaultIn isRequired style={style} value={tagKey} - onChange={setTagKey} + onChange={(_evt, value) => setTagKey(value)} id="tag-key" label={messages.costModelsFilterTagKey} placeholder={intl.formatMessage(messages.costModelsEnterTagKey)} diff --git a/src/routes/costModels/components/rateForm/taggingRatesForm.tsx b/src/routes/costModels/components/rateForm/taggingRatesForm.tsx index 83fe854870..bf8142ae89 100644 --- a/src/routes/costModels/components/rateForm/taggingRatesForm.tsx +++ b/src/routes/costModels/components/rateForm/taggingRatesForm.tsx @@ -53,7 +53,7 @@ const TaggingRatesFormBase: React.FC = ({ label={messages.costModelsTagRateTableValue} placeholder={intl.formatMessage(messages.costModelsEnterTagValue)} value={tag.tagValue} - onChange={value => updateTag({ tagValue: value }, ix)} + onChange={(_evt, value) => updateTag({ tagValue: value }, ix)} validated={tagValues[ix].isTagValueDirty && errors.tagValueValues[ix] ? 'error' : 'default'} helperTextInvalid={errors.tagValueValues[ix]} /> @@ -63,7 +63,7 @@ const TaggingRatesFormBase: React.FC = ({ currencyUnits={currencyUnits} fieldId={`rate_${ix}`} helperTextInvalid={errors.tagValues[ix]} - onChange={value => updateTag({ value }, ix)} + onChange={(_evt, value) => updateTag({ value }, ix)} style={style} validated={tagValues[ix].isDirty && errors.tagValues[ix] ? 'error' : 'default'} value={tag.inputValue} @@ -77,7 +77,7 @@ const TaggingRatesFormBase: React.FC = ({ validated={errors.tagDescription[ix] ? 'error' : 'default'} placeholder={intl.formatMessage(messages.costModelsEnterTagDesc)} value={tag.description} - onChange={value => updateTag({ description: value }, ix)} + onChange={(_evt, value) => updateTag({ description: value }, ix)} helperTextInvalid={errors.tagDescription[ix]} /> diff --git a/src/routes/costModels/components/rateTable.tsx b/src/routes/costModels/components/rateTable.tsx index f922eb2954..ea488dbbf7 100644 --- a/src/routes/costModels/components/rateTable.tsx +++ b/src/routes/costModels/components/rateTable.tsx @@ -2,7 +2,7 @@ import type { IActions, ThProps } from '@patternfly/react-table'; import { ActionsColumn, ExpandableRowContent, - TableComposable, + Table /* data-codemods */, TableVariant, Tbody, Td, @@ -89,7 +89,7 @@ const RateTableBase: React.FC = ({ direction: activeSortDirection, defaultDirection: 'asc', }, - onSort: (_event, index, direction) => { + onSort: (_evt, index, direction) => { setActiveSortIndex(index); setActiveSortDirection(direction); sortCallback({ index, direction }); @@ -122,10 +122,7 @@ const RateTableBase: React.FC = ({ }); return ( - + {columns.map((col: { title?: string; sortable?: boolean }, i) => ( @@ -170,7 +167,7 @@ const RateTableBase: React.FC = ({ @@ -197,7 +194,7 @@ const RateTableBase: React.FC = ({ ); })} - +
- + {tagColumns.map((tag, tagIndex) => ( @@ -189,7 +186,7 @@ const RateTableBase: React.FC = ({ ))} - +
); }; diff --git a/src/routes/costModels/components/toolbar/checkboxSelector.tsx b/src/routes/costModels/components/toolbar/checkboxSelector.tsx index 4518c2e488..e763600037 100644 --- a/src/routes/costModels/components/toolbar/checkboxSelector.tsx +++ b/src/routes/costModels/components/toolbar/checkboxSelector.tsx @@ -1,4 +1,4 @@ -import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; +import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; import React from 'react'; import { WithStateMachine } from 'routes/costModels/components/hoc/withStateMachine'; import { selectMachineState } from 'routes/costModels/components/logic/selectStateMachine'; diff --git a/src/routes/costModels/components/toolbar/primarySelector.tsx b/src/routes/costModels/components/toolbar/primarySelector.tsx index a9485bfb0b..a383fcb483 100644 --- a/src/routes/costModels/components/toolbar/primarySelector.tsx +++ b/src/routes/costModels/components/toolbar/primarySelector.tsx @@ -1,4 +1,4 @@ -import { Select, SelectOption } from '@patternfly/react-core'; +import { Select, SelectOption } from '@patternfly/react-core/deprecated'; import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import React from 'react'; import { WithStateMachine } from 'routes/costModels/components/hoc/withStateMachine'; diff --git a/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap b/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap index 8b19b8da9d..2db1195f93 100644 --- a/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap +++ b/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap @@ -2,17 +2,18 @@ exports[`dialog title renders correctly with icon and title text 1`] = `

- - - {intl.formatMessage(messages.costModelsSourceEmptyStateDesc)} - + {intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}} + icon={} + headingLevel="h2" + /> {intl.formatMessage(messages.costModelsSourceEmptyStateTitle)}
diff --git a/src/routes/costModels/costModel/updateCostModel.tsx b/src/routes/costModels/costModel/updateCostModel.tsx index 4f9bfef1b4..8aa4a07078 100644 --- a/src/routes/costModels/costModel/updateCostModel.tsx +++ b/src/routes/costModels/costModel/updateCostModel.tsx @@ -93,7 +93,7 @@ class UpdateCostModelBase extends React.Component this.setState({ name: value })} + onChange={(_evt, value) => this.setState({ name: value })} /> @@ -102,7 +102,7 @@ class UpdateCostModelBase extends React.Component this.setState({ description: value })} + onChange={(_evt, value) => this.setState({ description: value })} /> diff --git a/src/routes/costModels/costModel/updateDistributionDialog.tsx b/src/routes/costModels/costModel/updateDistributionDialog.tsx index fd16b7b882..0265a36733 100644 --- a/src/routes/costModels/costModel/updateDistributionDialog.tsx +++ b/src/routes/costModels/costModel/updateDistributionDialog.tsx @@ -61,17 +61,17 @@ class UpdateDistributionDialogBase extends React.Component< }; } - private handleDistributionChange = (_, event) => { + private handleDistributionChange = event => { const { value } = event.currentTarget; this.setState({ distribution: value }); }; - private handleDistributePlatformUnallocatedChange = (_, event) => { + private handleDistributePlatformUnallocatedChange = event => { const { value } = event.currentTarget; this.setState({ distributePlatformUnallocated: value === 'true' }); }; - private handleDistributeWorkerUnallocatedChange = (_, event) => { + private handleDistributeWorkerUnallocatedChange = event => { const { value } = event.currentTarget; this.setState({ distributeWorkerUnallocated: value === 'true' }); }; diff --git a/src/routes/costModels/costModel/updateMarkupDialog.tsx b/src/routes/costModels/costModel/updateMarkupDialog.tsx index 5dc5eae619..29388a79c4 100644 --- a/src/routes/costModels/costModel/updateMarkupDialog.tsx +++ b/src/routes/costModels/costModel/updateMarkupDialog.tsx @@ -5,7 +5,10 @@ import { FlexItem, Form, FormGroup, + HelperText, + HelperTextItem, InputGroup, + InputGroupItem, InputGroupText, List, ListItem, @@ -66,12 +69,12 @@ class UpdateMarkupDialogBase extends React.Component { + private handleSignChange = event => { const { value } = event.currentTarget; this.setState({ isDiscount: value === 'true' }); }; - private handleMarkupDiscountChange = (_, event) => { + private handleMarkupDiscountChange = event => { const { value } = event.currentTarget; this.setState({ markup: value }); @@ -187,34 +190,36 @@ class UpdateMarkupDialogBase extends React.Component
- + {isDiscount ? intl.formatMessage(messages.discountMinus) : intl.formatMessage(messages.markupPlus)} - + + + {intl.formatMessage(messages.percentSymbol)} + {validated === 'error' && ( + + {intl.formatMessage(helpText)} + + )}
diff --git a/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx b/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx index c0ab3f66fb..3d49c49407 100644 --- a/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx +++ b/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx @@ -1,6 +1,7 @@ import type { PaginationProps } from '@patternfly/react-core'; import { InputGroup, + InputGroupItem, InputGroupText, Pagination, TextInput, @@ -20,26 +21,28 @@ import { injectIntl } from 'react-intl'; interface FilterInputProps { id: string; value: string; - onChange: (value: string, event: React.FormEvent) => void; - onSearch: (evt: React.KeyboardEvent) => void; + onChange: (value: string) => void; + onSearch: (event: React.KeyboardEvent) => void; placeholder?: string; } const FilterInput: React.FC = ({ id, placeholder = '', value, onChange, onSearch }) => { return ( - ) => { - if (evt.key !== 'Enter' || value === '') { - return; - } - onSearch(evt); - }} - /> + + onChange(val)} + onKeyPress={(evt: React.KeyboardEvent) => { + if (evt.key !== 'Enter' || value === '') { + return; + } + onSearch(evt); + }} + /> + @@ -85,7 +88,7 @@ export const AssignSourcesToolbarBase: React.FC = onSetPage={paginationProps.onSetPage} onPerPageSelect={paginationProps.onPerPageSelect} titles={{ - paginationTitle: intl.formatMessage(messages.paginationTitle, { + paginationAriaLabel: intl.formatMessage(messages.paginationTitle, { title: intl.formatMessage(messages.costModelsAssignSourcesParen), placement: 'bottom', }), diff --git a/src/routes/costModels/costModelWizard/context.ts b/src/routes/costModels/costModelWizard/context.ts index 603780bc13..7e49f7583c 100644 --- a/src/routes/costModels/costModelWizard/context.ts +++ b/src/routes/costModels/costModelWizard/context.ts @@ -35,8 +35,8 @@ export const defaultCostModelContext = { onCurrencyChange: (value: string) => null, onDescChange: (value: string) => null, onFilterChange: (value: string) => null, - onPageChange: (_evt, value: number) => null, - onPerPageChange: (_evt, value: number) => null, + onPageChange: (value: number) => null, + onPerPageChange: (value: number) => null, onTypeChange: (value: string) => null, onNameChange: (value: string) => null, onSourceSelect: (...args: any[]) => null, @@ -45,8 +45,8 @@ export const defaultCostModelContext = { priceListPagination: { page: 1, perPage: 4, - onPerPageSet: (_evt, perPage: number) => null, - onPageSet: (_evt, page: number) => null, + onPerPageSet: (perPage: number) => null, + onPageSet: (page: number) => null, }, query: {}, step: 1, diff --git a/src/routes/costModels/costModelWizard/costModelWizard.tsx b/src/routes/costModels/costModelWizard/costModelWizard.tsx index 1c7292f2d8..757f0477cf 100644 --- a/src/routes/costModels/costModelWizard/costModelWizard.tsx +++ b/src/routes/costModels/costModelWizard/costModelWizard.tsx @@ -1,6 +1,7 @@ -import type { WizardStepFunctionType } from '@patternfly/react-core'; -import { Title, TitleSizes, Wizard } from '@patternfly/react-core'; +import { Title, TitleSizes } from '@patternfly/react-core'; import { Button, Modal } from '@patternfly/react-core'; +import type { WizardStepFunctionType } from '@patternfly/react-core/deprecated'; +import { Wizard } from '@patternfly/react-core/deprecated'; import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import { addCostModel } from 'api/costModels'; import type { MetricHash } from 'api/metrics'; @@ -413,23 +414,23 @@ class CostModelWizardBase extends React.Component { + handleDistributionChange: event => { const { value } = event.currentTarget; this.setState({ distribution: value }); }, - handleDistributePlatformUnallocatedChange: (_, event) => { + handleDistributePlatformUnallocatedChange: event => { const { value } = event.currentTarget; this.setState({ distributePlatformUnallocated: value === 'true' }); }, - handleDistributeWorkerUnallocatedChange: (_, event) => { + handleDistributeWorkerUnallocatedChange: event => { const { value } = event.currentTarget; this.setState({ distributeWorkerUnallocated: value === 'true' }); }, - handleMarkupDiscountChange: (_, event) => { + handleMarkupDiscountChange: event => { const { value } = event.currentTarget; this.setState({ markup: value }); }, - handleSignChange: (_, event) => { + handleSignChange: event => { const { value } = event.currentTarget; this.setState({ isDiscount: value === 'true' }); }, @@ -437,14 +438,14 @@ class CostModelWizardBase extends React.Component this.setState({ ...this.defaultState }, this.props.closeWizard), - onCurrencyChange: value => + onCurrencyChange: (value: string) => this.setState({ currencyUnits: value, tiers: updateTiersCurrency(this.state.tiers, value) }), - onDescChange: value => this.setState({ description: value }), - onFilterChange: value => this.setState({ filterName: value }), - onNameChange: value => this.setState({ name: value, dirtyName: true }), - onPageChange: (_evt, page) => this.setState({ page }), - onPerPageChange: (_evt, perPage) => this.setState({ page: 1, perPage }), - onSourceSelect: (rowId, isSelected) => { + onDescChange: (value: string) => this.setState({ description: value }), + onFilterChange: (value: string) => this.setState({ filterName: value }), + onNameChange: (value: string) => this.setState({ name: value, dirtyName: true }), + onPageChange: (page: number) => this.setState({ page }), + onPerPageChange: (perPage: number) => this.setState({ page: 1, perPage }), + onSourceSelect: (rowId: number, isSelected: boolean) => { if (rowId === -1) { const pageSelections = this.state.sources.map(s => ({ [s.uuid]: { selected: isSelected, meta: s }, @@ -464,19 +465,19 @@ class CostModelWizardBase extends React.Component this.setState({ type: value, dataFetched: false, loading: false }), + onTypeChange: (value: string) => this.setState({ type: value, dataFetched: false, loading: false }), page: this.state.page, priceListPagination: { page: this.state.priceListPagination.page, perPage: this.state.priceListPagination.perPage, - onPageSet: (_evt, page) => + onPageSet: (page: number) => this.setState({ priceListPagination: { ...this.state.priceListPagination, page, }, }), - onPerPageSet: (_evt, perPage) => + onPerPageSet: (perPage: number) => this.setState({ priceListPagination: { page: 1, diff --git a/src/routes/costModels/costModelWizard/generalInformation.tsx b/src/routes/costModels/costModelWizard/generalInformation.tsx index ea3aff6c56..8a54eede28 100644 --- a/src/routes/costModels/costModelWizard/generalInformation.tsx +++ b/src/routes/costModels/costModelWizard/generalInformation.tsx @@ -1,6 +1,7 @@ import { FormGroup, - SelectDirection, + HelperText, + HelperTextItem, Stack, StackItem, TextArea, @@ -8,6 +9,7 @@ import { Title, TitleSizes, } from '@patternfly/react-core'; +import { SelectDirection } from '@patternfly/react-core/deprecated'; import messages from 'locales/messages'; import React from 'react'; import type { WrappedComponentProps } from 'react-intl'; @@ -89,13 +91,7 @@ class GeneralInformation extends React.Component {
- + { id="name" name="name" value={name} - onChange={onNameChange} + onChange={(_evt, value) => onNameChange(value)} /> + {dirtyName && nameErrors(name) && ( + + {intl.formatMessage(nameErrors(name))} + + )} - +