PatternFly v5 package update

https://issues.redhat.com/browse/COST-3931
project-koku · Sep 18, 2023 · b104af1 · b104af1
1 parent 7de9e8e
commit b104af1
Show file tree

Hide file tree

Showing 141 changed files with 1,930 additions and 1,317 deletions.
diff --git a/.archive/routes/components/dataToolbar/workloadType.tsx b/.archive/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<WorkloadTypeProps, WorkloadTypeSt
         isDisabled={isDisabled}
         variant={SelectVariant.checkbox}
         aria-label={intl.formatMessage(messages.filterByWorkloadTypeAriaLabel)}
-        onToggle={this.onToggle}
         onSelect={onSelect}
+        onToggle={(_evt, isExpanded) => this.onToggle(isExpanded)}
         selections={selections}
         isOpen={isWorkloadTypeExpanded}
         placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)}

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -136,6 +136,8 @@
         "react/prop-types": 0,
         "simple-import-sort/imports": "error",
         "spaced-comment": "error",
+        "rulesdir/disallow-pf-migrated-components": "off",
+        "rulesdir/forbid-pf-relative-imports": "off",
         "testing-library/await-async-queries": "error",
         "testing-library/no-await-sync-queries": "error",
         "testing-library/no-debugging-utils": "warn",

diff --git 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,
@@ -61,9 +63,9 @@ module.exports = {
       './RootApp': path.resolve(__dirname, './src/appEntry.tsx'),
     },
     shared: [
-      { 'react-redux': { requiredVersion: dependencies['react-redux'] } },
-      { 'react-router-dom': { import: false, requiredVersion: '*', singleton: true } },
-      { '@unleash/proxy-client-react': { requiredVersion: '*', singleton: true } },
+      { 'react-redux': { version: dependencies['react-redux'] } },
+      { 'react-router-dom': { version: dependencies['react-router-dom'], import: false, singleton: true } },
+      { '@unleash/proxy-client-react': { version: dependencies['@unleash/proxy-client-react'], singleton: true } },
     ],
   },
   /**

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,13 +19,15 @@
     "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",
     "patch:hosts": "fec patch-etc-hosts",
-    "postinstall": "rm -rf .cache",
+    "postinstall": "ts-patch install && rm -rf .cache",
     "start": "HMR=true fec dev",
     "start:csc": "CLOUD_SERVICES_CONFIG_PORT=8889 npm start",
     "start:ephemeral": "EPHEMERAL_PORT=8000 npm start",
@@ -45,17 +47,16 @@
     "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",
-    "@redhat-cloud-services/frontend-components": "^3.11.5",
-    "@redhat-cloud-services/frontend-components-notifications": "^3.2.16",
+    "@patternfly/patternfly": "5.0.4",
+    "@patternfly/react-charts": "7.0.1",
+    "@patternfly/react-core": "5.0.1",
+    "@patternfly/react-icons": "5.0.1",
+    "@patternfly/react-table": "5.0.1",
+    "@patternfly/react-tokens": "5.0.1",
+    "@redhat-cloud-services/frontend-components": "^4.0.8",
+    "@redhat-cloud-services/frontend-components-notifications": "^4.0.2",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.7",
-    "@redhat-cloud-services/frontend-components-utilities": "^3.7.6",
+    "@redhat-cloud-services/frontend-components-utilities": "^4.0.2",
     "@redhat-cloud-services/rbac-client": "^1.2.8",
     "@unleash/proxy-client-react": "^3.6.0",
     "axios": "^1.5.0",
@@ -78,8 +79,9 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^6.2.0",
-    "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
-    "@redhat-cloud-services/frontend-components-config": "^5.1.1",
+    "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.2",
+    "@redhat-cloud-services/frontend-components-config": "^6.0.5",
+    "@redhat-cloud-services/tsc-transform-imports": "^1.0.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.5",

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

diff --git a/src/components/drawers/exports/exportsContent.tsx b/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',
           }),

diff --git a/src/components/drawers/exports/exportsLink.tsx b/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>
       );

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

diff --git 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
@@ -13,7 +13,7 @@ import {
   TextListVariants,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table, 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';
@@ -265,10 +265,9 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
     const memVariationUnits = hasVariationLimitsMemory ? term.variation.limits.memory.format : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -313,7 +312,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation, memVariationUnits)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -377,10 +376,9 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
     const memVariationUnits = hasVariationRequestsMemory ? term.variation.requests.memory.format : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -425,7 +423,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation, memVariationUnits)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 

diff --git a/src/components/drawers/optimzations/optimizationsLink.tsx b/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;
   }

diff --git 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
@@ -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;