PatternFly v6

package.json

@@ -52,15 +52,15 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.4.1",
-    "@patternfly/react-charts": "7.4.3",
-    "@patternfly/react-component-groups": "^5.4.0",
-    "@patternfly/react-core": "5.4.1",
-    "@patternfly/react-icons": "5.4.0",
-    "@patternfly/react-table": "5.4.1",
-    "@patternfly/react-tokens": "5.4.0",
+    "@patternfly/patternfly": "6.0.0-prerelease.15",
+    "@patternfly/react-charts": "8.0.0-prerelease.14",
+    "@patternfly/react-component-groups": "6.0.0-prerelease.7",
+    "@patternfly/react-core": "6.0.0-prerelease.21",
+    "@patternfly/react-icons": "6.0.0-prerelease.7",
+    "@patternfly/react-table": "6.0.0-prerelease.22",
+    "@patternfly/react-tokens": "6.0.0-prerelease.7",
     "@redhat-cloud-services/frontend-components": "^4.2.16",
-    "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
+    "@ausuliv/frontend-components-notifications": "^4.1.6",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.8",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.17",
     "@redhat-cloud-services/rbac-client": "^2.2.5",
@@ -79,7 +79,21 @@
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
     "typesafe-actions": "^5.1.0",
-    "victory": "^37.1.2"
+    "victory-area": "^37.1.2",
+    "victory-axis": "^37.1.2",
+    "victory-bar": "^37.1.2",
+    "victory-box-plot": "^37.1.2",
+    "victory-chart": "^37.1.2",
+    "victory-core": "^37.1.2",
+    "victory-create-container": "^37.1.2",
+    "victory-group": "^37.1.2",
+    "victory-legend": "^37.1.2",
+    "victory-line": "^37.1.2",
+    "victory-pie": "^37.1.2",
+    "victory-scatter": "^37.1.2",
+    "victory-stack": "^37.1.2",
+    "victory-tooltip": "^37.1.2",
+    "victory-voronoi-container": "^37.1.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.0",
@@ -91,7 +105,7 @@
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.4",
     "@redhat-cloud-services/frontend-components-config": "^6.3.1",
     "@redhat-cloud-services/tsc-transform-imports": "^1.0.16",
-    "@swc/core": "^1.7.26",
+    "@swc/core": "1.7.26",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -132,6 +146,9 @@
     "typescript": "^5.6.3"
   },
   "overrides": {
+    "@patternfly/react-core": "6.0.0-prerelease.21",
+    "@patternfly/react-icons": "6.0.0-prerelease.7",
+    "@patternfly/react-table": "6.0.0-prerelease.22",
     "@typescript-eslint/eslint-plugin": "^8.9.0",
     "eslint": "^9.12.0",
     "redux": "^5.0.1"

src/app.tsx

@@ -1,8 +1,8 @@
 import './app.scss';
 
+import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal';
+import { notificationsReducer } from '@ausuliv/frontend-components-notifications/redux';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
-import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
-import { notificationsReducer } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
 import React, { useEffect, useLayoutEffect } from 'react';
 import { invalidateSession } from 'utils/sessionStorage';

src/appEntry.tsx

@@ -4,7 +4,7 @@
 import '@patternfly/patternfly/patternfly-addons.css';
 import './styles/global.css';
 
-import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
+import NotificationsPortal from '@ausuliv/frontend-components-notifications/NotificationPortal';
 import IntlProvider from '@redhat-cloud-services/frontend-components-translations/Provider';
 import { getLocale } from 'components/i18n';
 import React from 'react';

src/components/drawers/commonDrawer/commonDrawer.tsx

@@ -50,7 +50,7 @@ class CommonDrawerBase extends React.Component<CommonDrawerProps> {
     // https://github.com/redhat-developer/rhosak-ui/blob/main/packages/ui/src/components/KafkaInstanceDrawer/KafkaInstanceDrawer.tsx#L69-L78
     return (
       <Drawer className="drawerOverride" isExpanded={isExpanded} onExpand={this.handleExpand}>
-        <DrawerContent colorVariant="light-200" panelContent={this.getPanelContent()}>
+        <DrawerContent colorVariant="secondary" panelContent={this.getPanelContent()}>
           {children}
         </DrawerContent>
       </Drawer>

src/components/drawers/exports/exports.styles.ts

@@ -1,30 +1,30 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg';
-import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
-import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
+import t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100';
+import t_global_spacer_lg from '@patternfly/react-tokens/dist/js/t_global_spacer_lg';
+import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md';
+import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm';
 import type React from 'react';
 
 export const styles = {
   content: {
-    paddingBottom: global_spacer_lg.value,
-    paddingTop: global_spacer_lg.value,
+    paddingBottom: t_global_spacer_lg.value,
+    paddingTop: t_global_spacer_lg.value,
   },
   exportsIcon: {
-    marginLeft: global_spacer_md.value,
-    marginRight: global_spacer_sm.value,
+    marginLeft: t_global_spacer_md.value,
+    marginRight: t_global_spacer_sm.value,
   },
   exportsLink: {
     display: 'flex',
     alignItems: 'center',
   },
   pagination: {
-    backgroundColor: global_BackgroundColor_light_100.value,
-    paddingBottom: global_spacer_md.value,
-    paddingTop: global_spacer_md.value,
+    backgroundColor: t_global_background_color_100.value,
+    paddingBottom: t_global_spacer_md.value,
+    paddingTop: t_global_spacer_md.value,
   },
   toolbarContainer: {
-    backgroundColor: global_BackgroundColor_light_100.value,
-    paddingBottom: global_spacer_md.value,
-    paddingTop: global_spacer_md.value,
+    backgroundColor: t_global_background_color_100.value,
+    paddingBottom: t_global_spacer_md.value,
+    paddingTop: t_global_spacer_md.value,
   },
 } as { [className: string]: React.CSSProperties };

src/components/drawers/exports/exportsLink.tsx

@@ -50,7 +50,7 @@ class ExportsLinkBase extends React.Component<ExportsLinkProps, any> {
     // @redhat-cloud-services/frontend-components-notifications does not expose PatternFly's actionLinks prop
     if (isActionLink) {
       return (
-        <div className="pf-v5-c-alert__action-group">
+        <div className="pf-v6-c-alert__action-group">
           <AlertActionLink onClick={this.handleToggle}>{intl.formatMessage(messages.exportsTitle)}</AlertActionLink>
         </div>
       );

src/components/drawers/exports/exportsTable.styles.ts

@@ -1,25 +1,25 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_danger_color_200 from '@patternfly/react-tokens/dist/js/global_danger_color_200';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/js/global_FontSize_sm';
-import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
-import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl';
+import t_global_background_color_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100';
+import t_global_color_status_danger_200 from '@patternfly/react-tokens/dist/js/t_global_color_status_danger_200';
+import t_global_font_size_sm from '@patternfly/react-tokens/dist/js/t_global_font_size_sm';
+import t_global_spacer_md from '@patternfly/react-tokens/dist/js/t_global_spacer_md';
+import t_global_spacer_xl from '@patternfly/react-tokens/dist/js/t_global_spacer_xl';
 import type React from 'react';
 
 export const styles = {
   emptyState: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: t_global_background_color_100.value,
     display: 'flex',
     justifyContent: 'center',
-    paddingTop: global_spacer_xl.value,
+    paddingTop: t_global_spacer_xl.value,
     width: '100%',
   },
   failed: {
-    color: global_danger_color_200.value,
+    color: t_global_color_status_danger_200.value,
   },
   failedButton: {
-    fontSize: global_FontSize_sm.value,
+    fontSize: t_global_font_size_sm.value,
   },
   failedHeader: {
-    marginLeft: global_spacer_md.value,
+    marginLeft: t_global_spacer_md.value,
   },
 } as { [className: string]: React.CSSProperties };

src/components/drawers/exports/exportsTable.tsx

@@ -4,8 +4,6 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
-  EmptyStateHeader,
-  EmptyStateIcon,
   Label,
   Popover,
 } from '@patternfly/react-core';
@@ -140,12 +138,11 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
     }
 
     return (
-      <EmptyState>
-        <EmptyStateHeader
-          titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
-          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
-          headingLevel="h5"
-        />
+      <EmptyState
+        headingLevel="h5"
+        icon={PlusCircleIcon}
+        titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
+      >
         <EmptyStateBody>{intl.formatMessage(messages.exportsEmptyState)}</EmptyStateBody>
         <EmptyStateFooter>
           <Button variant="primary" onClick={onClose}>
@@ -185,13 +182,12 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
                 bodyContent={<div>{intl.formatMessage(messages.exportsFailedDesc)}</div>}
               >
                 <Button
+                  icon={content}
                   className={className}
                   innerRef={componentRef}
                   style={styles.failedButton}
                   variant={ButtonVariant.plain}
-                >
-                  {content}
-                </Button>
+                ></Button>
               </Popover>
             )}
           >

src/components/drawers/exports/exportsToolbar.tsx

@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import messages from 'locales/messages';
 import React from 'react';
@@ -32,7 +32,7 @@ type ExportsToolbarProps = ExportsToolbarOwnProps &
   WrappedComponentProps;
 
 export class ExportsToolbarBase extends React.Component<ExportsToolbarProps, any> {
-  private getCategoryOptions = (): ToolbarChipGroup[] => {
+  private getCategoryOptions = (): ToolbarLabelGroup[] => {
     const { intl } = this.props;
 
     return [{ name: intl.formatMessage(messages.filterByValues, { value: 'name' }), key: 'name' }];

src/components/inactiveSources/inactiveSources.scss

@@ -1,8 +1,8 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .alert {
-  background-color: var(--pf-v5-global--BackgroundColor--light-100);
-  padding-left: var(--pf-v5-global--spacer--lg);
-  padding-right: var(--pf-v5-global--spacer--lg);
-  padding-top: var(--pf-v5-global--spacer--lg);
+  background-color: var(--pf-t--global--background--color--primary--default);
+  padding-left: var(--pf-t--global--spacer--lg);
+  padding-right: var(--pf-t--global--spacer--lg);
+  padding-top: var(--pf-t--global--spacer--lg);
 }

src/routes/components/charts/chartTheme/theme-utils.ts

@@ -1,4 +1,4 @@
-import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';
+import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts/victory';
 
 import { default as ChartTheme } from './theme-koku';
 

src/routes/components/charts/common/chartUtils.ts

@@ -1,4 +1,4 @@
-import { getInteractiveLegendItemStyles } from '@patternfly/react-charts';
+import { getInteractiveLegendItemStyles } from '@patternfly/react-charts/victory';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
 import type { FormatOptions, Formatter } from 'utils/format';

src/routes/components/charts/costChart/costChart.tsx

@@ -8,7 +8,7 @@ import {
   ChartLegendTooltip,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { Title, TitleSizes } from '@patternfly/react-core';
 import { getDate } from 'date-fns';
 import messages from 'locales/messages';

src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts

@@ -1,19 +1,19 @@
 import { chart_color_blue_300 } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
-import { chart_color_cyan_300 } from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
-import { chart_color_gold_300 } from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
 import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300';
 import { chart_color_orange_300 } from '@patternfly/react-tokens/dist/js/chart_color_orange_300';
 import { chart_color_purple_300 } from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
+import { chart_color_teal_300 } from '@patternfly/react-tokens/dist/js/chart_color_teal_300';
+import { chart_color_yellow_300 } from '@patternfly/react-tokens/dist/js/chart_color_yellow_300';
 
 export const chartStyles = {
   // See: https://github.com/project-koku/koku-ui/issues/241
   colorScale: [
     chart_color_blue_300.value,
-    chart_color_gold_300.value,
+    chart_color_yellow_300.value,
     chart_color_green_300.value,
     chart_color_purple_300.value,
     chart_color_orange_300.value,
-    chart_color_cyan_300.value,
+    chart_color_teal_300.value,
   ],
   yAxis: {
     axisLabel: {

src/routes/components/charts/costExplorerChart/costExplorerChart.tsx

@@ -10,7 +10,7 @@ import {
   ChartThemeColor,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';

src/routes/components/charts/dailyCostChart/dailyCostChart.tsx

@@ -10,7 +10,7 @@ import {
   ChartLine,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { Title, TitleSizes } from '@patternfly/react-core';
 import { getDate } from 'date-fns';
 import messages from 'locales/messages';

src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx

@@ -10,7 +10,7 @@ import {
   ChartLine,
   createContainer,
   getInteractiveLegendEvents,
-} from '@patternfly/react-charts';
+} from '@patternfly/react-charts/victory';
 import { Title, TitleSizes } from '@patternfly/react-core';
 import { getDate } from 'date-fns';
 import messages from 'locales/messages';