PatternFly v5 package updates

https://issues.redhat.com/browse/COST-3931

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,

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.8",
+    "@patternfly/react-charts": "7.0.0-prerelease.5",
+    "@patternfly/react-core": "5.0.0-prerelease.11",
+    "@patternfly/react-icons": "5.0.0-prerelease.6",
+    "@patternfly/react-table": "5.0.0-prerelease.11",
+    "@patternfly/react-tokens": "5.0.0-prerelease.4",
     "@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",
@@ -116,6 +117,9 @@
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "overrides": {
+    "@patternfly/react-core": "5.0.0-prerelease.11",
+    "@patternfly/react-icons": "5.0.0-prerelease.6",
+    "@patternfly/react-table": "5.0.0-prerelease.11",
     "eslint": "^8.42.0",
     "react-intl": "^6.4.4"
   },

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';

src/components/drawers/commonDrawer/commonDrawer.scss

@@ -1,5 +1,5 @@
 .drawerOverride {
-  .pf-c-drawer__content {
+  .pf-v5-c-drawer__content {
     background-color: unset;
   }
 }

src/components/drawers/commonDrawer/commonDrawer.tsx

@@ -57,7 +57,9 @@ class CommonDrawerBase extends React.Component<CommonDrawerProps> {
     return (
       <Drawer className="drawerOverride" isExpanded={isExpanded} onExpand={this.handleExpand}>
         <DrawerContent panelContent={this.getPanelContent()}>
-          <DrawerContentBody className="pf-u-display-flex pf-u-flex-direction-column">{children}</DrawerContentBody>
+          <DrawerContentBody className="pf-v5-u-display-flex pf-v5-u-flex-direction-column">
+            {children}
+          </DrawerContentBody>
         </DrawerContent>
       </Drawer>
     );

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<ExportsActionsProps, ExportsAct
       <>
         <Dropdown
           onSelect={this.handleOnSelect}
-          toggle={<KebabToggle onToggle={this.handleOnToggle} />}
+          toggle={<KebabToggle onToggle={(_evt, isOpen) => this.handleOnToggle(isOpen)} />}
           isOpen={isDropdownOpen}
           isPlain
           position="right"

src/components/drawers/exports/exportsContent.tsx

@@ -82,7 +82,7 @@ class ExportsContentBase extends React.Component<ExportsContentProps, ExportsCon
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.exportsTitle),
             placement: isBottom ? 'bottom' : 'top',
           }),

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-c-alert__action-group">
+        <div className="pf-v5-c-alert__action-group">
           <AlertActionLink onClick={this.handleToggle}>{intl.formatMessage(messages.exportsTitle)}</AlertActionLink>
         </div>
       );

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<ExportsTableProps, ExportsTableSt
 
     return (
       <EmptyState>
-        <EmptyStateIcon icon={PlusCircleIcon} />
-        <Title headingLevel="h5" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.noExportsStateTitle)}
-        </Title>
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
+          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          headingLevel="h5"
+        />
         <EmptyStateBody>{intl.formatMessage(messages.exportsEmptyState)}</EmptyStateBody>
-        <Button variant="primary" onClick={onClose}>
-          {intl.formatMessage(messages.close)}
-        </Button>
+        <EmptyStateFooter>
+          <Button variant="primary" onClick={onClose}>
+            {intl.formatMessage(messages.close)}
+          </Button>
+        </EmptyStateFooter>
       </EmptyState>
     );
   };

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;

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<OptimizationsContentProps
     const memVariation = hasVariationLimitsMemory ? term.variation.limits.memory.amount : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -251,7 +250,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -306,10 +305,9 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
     const memVariation = hasVariationRequestsMemory ? term.variation.requests.memory.amount : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -334,7 +332,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 

src/components/drawers/optimzations/optimizationsLink.tsx

@@ -111,11 +111,7 @@ class OptimizationsLinkBase extends React.Component<OptimizationsLinkProps, any>
       </Button>
     );
     if (isDisabled) {
-      return (
-        <Tooltip content={intl.formatMessage(messages.optimizationsViewAllDisabled)} removeFindDomNode>
-          {buttonComponent}
-        </Tooltip>
-      );
+      return <Tooltip content={intl.formatMessage(messages.optimizationsViewAllDisabled)}>{buttonComponent}</Tooltip>;
     }
     return buttonComponent;
   }

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);
 }

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;