PatternFly v6 milestone

package.json

@@ -49,13 +49,14 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.4.2",
-    "@patternfly/react-charts": "7.4.8",
-    "@patternfly/react-component-groups": "5.5.5",
-    "@patternfly/react-core": "5.4.12",
-    "@patternfly/react-icons": "5.4.2",
-    "@patternfly/react-table": "5.4.13",
-    "@patternfly/react-tokens": "5.4.1",
+    "@patternfly/patternfly": "6.1.0",
+    "@patternfly/react-charts": "8.1.0",
+    "@patternfly/react-component-groups": "6.1.0",
+    "@patternfly/react-core": "6.1.0",
+    "@patternfly/react-icons": "6.1.0",
+    "@patternfly/react-table": "6.1.0",
+    "@patternfly/react-tokens": "6.1.0",
+    "@ausuliv/frontend-components-notifications": "^4.1.6",
     "@redhat-cloud-services/frontend-components": "^5.0.3",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.3",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.11",
@@ -131,6 +132,9 @@
     "typescript": "^5.7.2"
   },
   "overrides": {
+    "@patternfly/react-core": "6.1.0",
+    "@patternfly/react-icons": "6.1.0",
+    "@patternfly/react-table": "6.1.0",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "eslint": "^9.17.0",
     "react-intl": "^7.1.0",

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/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/theme/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-mfe';
 

src/routes/components/dataTable/dataTable.scss

@@ -4,13 +4,13 @@
   div {
     display: block;
     margin-right: 0;
-    margin-bottom: var(--pf-v5-global--spacer--xs);
+    margin-bottom: var(--pf-t--global--spacer--xs);
     &.iconOverride {
       &.decrease {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-t--global--color--status--success--default);
       }
       &.increase {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-t--global--color--status--danger--default);
       }
       .fa-sort-up {
         margin-left: 10px;
@@ -19,10 +19,10 @@
         margin-left: 10px;
       }
       .fa-sort-up::before {
-        color: var(--pf-v5-global--danger-color--100);
+        color: var(--pf-t--global--color--status--danger--default);
       }
       .fa-sort-down::before {
-        color: var(--pf-v5-global--success-color--100);
+        color: var(--pf-t--global--color--status--success--default);
       }
       span {
         margin-right: -17px !important;
@@ -32,7 +32,7 @@
 }
 
 .tableOverride {
-  &.pf-v5-c-table tbody .pf-v5-c-table__check input {
+  &.pf-v6-c-table tbody .pf-v6-c-table__check input {
     margin-top: .40rem;
   }
 }

src/routes/components/dataTable/dataTable.styles.ts

@@ -1,9 +1,9 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_disabled_color_100 from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
-import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
-import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl';
-import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
-import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs';
+import t_global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/t_global_background_color_100';
+import t_global_color_disabled_100 from '@patternfly/react-tokens/dist/js/t_global_color_disabled_100';
+import t_global_font_size_xs from '@patternfly/react-tokens/dist/js/t_global_font_size_xs';
+import t_global_spacer_3xl from '@patternfly/react-tokens/dist/js/t_global_spacer_3xl';
+import t_global_spacer_sm from '@patternfly/react-tokens/dist/js/t_global_spacer_sm';
+import t_global_spacer_xs from '@patternfly/react-tokens/dist/js/t_global_spacer_xs';
 import type React from 'react';
 
 export const styles = {
@@ -17,22 +17,22 @@ export const styles = {
     minWidth: '50px',
   },
   emptyState: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: t_global_BackgroundColor_light_100.value,
     display: 'flex',
     justifyContent: 'center',
-    paddingTop: global_spacer_3xl.value,
+    paddingTop: t_global_spacer_3xl.value,
     height: '35vh',
     width: '100%',
   },
   infoArrow: {
     position: 'relative',
   },
   infoArrowDesc: {
-    bottom: global_spacer_xs.value,
+    bottom: t_global_spacer_xs.value,
   },
   infoDescription: {
-    color: global_disabled_color_100.value,
-    fontSize: global_FontSize_xs.value,
+    color: t_global_color_disabled_100.value,
+    fontSize: t_global_font_size_xs.value,
   },
   lastItem: {
     textAlign: 'right',
@@ -50,6 +50,6 @@ export const styles = {
     width: '1%',
   },
   warningIcon: {
-    paddingLeft: global_spacer_sm.var,
+    paddingLeft: t_global_spacer_sm.var,
   },
 } as { [className: string]: React.CSSProperties };

src/routes/components/dataTable/dataTable.tsx

@@ -1,13 +1,6 @@
 import './dataTable.scss';
 
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
 import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -58,8 +51,7 @@ class DataTable extends React.Component<DataTableProps, any> {
     return emptyState ? (
       emptyState
     ) : (
-      <EmptyState>
-        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
+      <EmptyState icon={CalculatorIcon} titleText="">
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );

src/routes/components/dataTable/selectableTable.tsx

@@ -1,11 +1,4 @@
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
 import { SortByDirection, Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
@@ -53,8 +46,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
       return emptyState;
     }
     return (
-      <EmptyState>
-        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
+      <EmptyState icon={CalculatorIcon} titleText="">
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );

src/routes/components/dataToolbar/basicToolbar.tsx

@@ -14,7 +14,6 @@ import { isEqual } from 'routes/utils/equal';
 import type { Filter } from 'routes/utils/filter';
 import { createMapStateToProps } from 'store/common';
 
-import { styles } from './dataToolbar.styles';
 import {
   getCategoryInput,
   getCategorySelect,
@@ -278,7 +277,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
 
     // Todo: clearAllFilters workaround https://github.com/patternfly/patternfly-react/issues/4222
     return (
-      <div style={style ? style : styles.toolbarContainer}>
+      <div style={style}>
         <Toolbar
           className="toolbarOverride"
           clearAllFilters={this.handleOnDelete as any}
@@ -295,7 +294,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
               </ToolbarToggleGroup>
             )}{' '}
             {actions && <ToolbarGroup>{actions}</ToolbarGroup>}
-            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignEnd' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

src/routes/components/dataToolbar/dataToolbar.scss

@@ -3,15 +3,15 @@
 // Workaround for https://github.com/patternfly/patternfly-react/issues/4477
 // and https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  .pf-v5-c-menu-toggle {
+  .pf-v6-c-menu-toggle {
     min-width: 250px;
   }
 }
 
 .toolbarOverride {
-  .pf-v5-c-button.pf-m-control::after {
+  .pf-v6-c-button.pf-m-control::after {
     border-left: none;
   }
   // Alternative workaround to overriding table sticky style
-  // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301;
+  // --pf-v6-c-toolbar--ZIndex: auto; z-index: 301;
 }

src/routes/components/dataToolbar/utils/category.tsx

@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import { SearchInput, ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import type { ResourcePathsType, ResourceType } from 'api/resources/resource';
@@ -49,8 +49,8 @@ export const getCategoryInput = ({
   return (
     <ToolbarFilter
       categoryName={categoryOption}
-      chips={getChips(filters[categoryOption.key] as Filter[])}
-      deleteChip={onDelete}
+      labels={getChips(filters[categoryOption.key] as Filter[])}
+      deleteLabel={onDelete}
       key={categoryOption.key}
       showToolbarItem={currentCategory === categoryOption.key}
     >
@@ -79,7 +79,7 @@ export const getCategoryInput = ({
   );
 };
 
-export const getDefaultCategoryOptions = (): ToolbarChipGroup[] => {
+export const getDefaultCategoryOptions = (): ToolbarLabelGroup[] => {
   return [{ name: intl.formatMessage(messages.names, { count: 1 }), key: 'name' }];
 };
 
@@ -170,7 +170,7 @@ export const getCategorySelect = ({
   isDisabled,
   onCategorySelect,
 }: {
-  categoryOptions?: ToolbarChipGroup[]; // Options for category menu
+  categoryOptions?: ToolbarLabelGroup[]; // Options for category menu
   currentCategory?: string;
   filters?: Filters;
   isDisabled?: boolean;
@@ -197,7 +197,7 @@ export const getCategorySelect = ({
   );
 };
 
-export const getCategorySelectOptions = (categoryOptions: ToolbarChipGroup[]): SelectWrapperOption[] => {
+export const getCategorySelectOptions = (categoryOptions: ToolbarLabelGroup[]): SelectWrapperOption[] => {
   const options: SelectWrapperOption[] = [];
 
   categoryOptions.map(option => {

src/routes/components/dataToolbar/utils/common.ts

@@ -1,4 +1,4 @@
-import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarLabelGroup } from '@patternfly/react-core';
 import type { Query } from 'api/queries/query';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -10,11 +10,11 @@ export interface Filters {
   [key: string]: Filter[] | { [key: string]: Filter[] };
 }
 
-export interface ToolbarChipGroupExt extends ToolbarChipGroup {
+export interface ToolbarChipGroupExt extends ToolbarLabelGroup {
   ariaLabelKey?: string;
   placeholderKey?: string;
   selectClassName?: string; // A selector from routes/components/dataToolbar/dataToolbar.scss
-  selectOptions?: ToolbarChipGroup[];
+  selectOptions?: ToolbarLabelGroup[];
 }
 
 export const defaultFilters = {
@@ -90,7 +90,7 @@ export const getChips = (filters: Filter[]): string[] => {
   return chips;
 };
 
-export const getDefaultCategory = (categoryOptions: ToolbarChipGroup[], groupBy: string, query: Query) => {
+export const getDefaultCategory = (categoryOptions: ToolbarLabelGroup[], groupBy: string, query: Query) => {
   if (!categoryOptions) {
     return 'name';
   }

src/routes/components/dataToolbar/utils/custom.tsx

@@ -39,8 +39,8 @@ export const getCustomSelect = ({
   return (
     <ToolbarFilter
       categoryName={categoryName}
-      chips={getChips(filters[categoryOption.key] as Filter[])}
-      deleteChip={onDelete}
+      labels={getChips(filters[categoryOption.key] as Filter[])}
+      deleteLabel={onDelete}
       key={`custom-select-${categoryOption.key}`}
       showToolbarItem={currentCategory === categoryOption.key}
     >

src/routes/components/page/loading/loading.tsx

@@ -19,7 +19,7 @@ const Loading = ({ body, heading, title }: LoadingProps) => {
           <PageHeaderTitle title={title} />
         </PageHeader>
       )}
-      <PageSection>
+      <PageSection hasBodyWrapper={false}>
         <LoadingState body={body} heading={heading} />
       </PageSection>
     </>

src/routes/components/page/noOptimizations/noOptimizations.tsx

@@ -18,7 +18,7 @@ const NoOptimizations = ({ title }: NoOptimizationsProps) => {
           <PageHeaderTitle title={title} />
         </PageHeader>
       )}
-      <PageSection>
+      <PageSection hasBodyWrapper={false}>
         <NoOptimizationsState />
       </PageSection>
     </>

src/routes/components/page/noOptimizations/noOptimizationsState.tsx

@@ -1,10 +1,4 @@
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  EmptyStateVariant,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -22,12 +16,13 @@ class NoOptimizationsStateBase extends React.Component<NoOptimizationsStateProps
     const { intl } = this.props;
 
     return (
-      <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
-        <EmptyStateHeader
-          titleText={intl.formatMessage(messages.noOptimizationsTitle)}
-          icon={<EmptyStateIcon icon={OptimizationIcon as any} />}
-          headingLevel="h1"
-        />
+      <EmptyState
+        headingLevel="h1"
+        icon={OptimizationIcon as any}
+        titleText={intl.formatMessage(messages.noOptimizationsTitle)}
+        variant={EmptyStateVariant.lg}
+        className="pf-m-redhat-font"
+      >
         <EmptyStateBody>{intl.formatMessage(messages.noOptimizationsDesc)}</EmptyStateBody>
       </EmptyState>
     );