✨ Migration to PF V5 (#1078)

The initial driver behind the need for PatternFly Version 5 is for the `datePicker` component which get bug fixes. But we'll need to migration to V5 anyway sooner than later. Some components (Table, Select, Dropdown, Wizard) have a V4 version maintained in @patternfly/react-core/deprecated allowing for a smooth transition which can help us make sure there is no UX changes. Once migrated we can progressively move to the newer components. This PR addresses the 150+ errors initially triggered by porting to pre-release V5.
konveyor · Jul 10, 2023 · f422fb4 · f422fb4
1 parent a8e6de5
commit f422fb4
Show file tree

Hide file tree

Showing 139 changed files with 4,916 additions and 15,261 deletions.
diff --git a/client/package.json b/client/package.json
@@ -19,14 +19,13 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@hookform/resolvers": "^2.8.0",
     "@hot-loader/react-dom": "^17.0.2",
-    "@migtools/lib-ui": "^8.8.0",
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-charts": "^6.67.1",
-    "@patternfly/react-code-editor": "^4.82.115",
-    "@patternfly/react-core": "^4.214.1",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.83.1",
-    "@patternfly/react-tokens": "^4.66.1",
+    "@migtools/lib-ui": "^9.0.1",
+    "@patternfly/patternfly": "5.0.0-prerelease.13",
+    "@patternfly/react-charts": "7.0.0-prerelease.9",
+    "@patternfly/react-code-editor": "5.0.0-prerelease.18",
+    "@patternfly/react-core": "5.0.0-prerelease.18",
+    "@patternfly/react-table": "5.0.0-prerelease.18",
+    "@patternfly/react-tokens": "5.0.0-prerelease.6",
     "@react-keycloak/web": "^3.4.0",
     "@tanstack/react-query": "^4.22.0",
     "@tanstack/react-query-devtools": "^4.22.0",
@@ -40,7 +39,6 @@
     "i18next-http-backend": "^1.0.22",
     "js-yaml": "^4.1.0",
     "keycloak-js": "^18.0.1",
-    "monaco-editor": "^0.39.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.43.1",
@@ -49,7 +47,7 @@
     "react-image-file-resizer": "^0.4.8",
     "react-markdown": "^8.0.7",
     "react-measure": "^2.5.2",
-    "react-monaco-editor": "^0.52.0",
+    "react-monaco-editor": "0.51.0",
     "react-router-dom": "^5.2.0",
     "typesafe-actions": "^5.1.0",
     "web-vitals": "^0.2.4",

diff --git a/client/src/app/app.css b/client/src/app/app.css
@@ -1,63 +1,14 @@
-.pf-c-icon {
-  --pf-c-icon--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-icon--Color: #72767b;
-
-  --pf-c-icon--m-sm--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-icon--m-md--FontSize: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-lg--FontSize: var(--pf-global--icon--FontSize--lg);
-  --pf-c-icon--m-xl--FontSize: var(--pf-global--icon--FontSize--xl);
-  --pf-c-icon--m-2xl--FontSize: var(--pf-global--icon--FontSize--2xl);
-
-  --pf-c-icon--m-info--Color: var(--pf-global--primary-color--100);
-  --pf-c-icon--m-success--Color: var(--pf-global--success-color--100);
-  --pf-c-icon--m-warning--Color: var(--pf-global--warning-color--100);
-  --pf-c-icon--m-danger--Color: var(--pf-global--danger-color--100);
-
-  font-size: var(--pf-c-icon--FontSize);
-  color: var(--pf-c-icon--Color);
-}
-.pf-c-icon .pf-m-sm {
-  font-size: var(--pf-c-icon--m-sm--FontSize);
-}
-
-.pf-c-icon .pf-m-lg {
-  font-size: var(--pf-c-icon--m-lg--FontSize);
-}
-
-.pf-c-icon .pf-m-xl {
-  font-size: var(--pf-c-icon--m-xl--FontSize);
-}
-
-.pf-c-icon .pf-m-default {
-  color: var(--pf-c-icon--Color);
-}
-
-.pf-c-icon.pf-m-info {
-  color: var(--pf-c-icon--m-info--Color);
-}
-
-.pf-c-icon .pf-m-success {
-  color: var(--pf-c-icon--m-success--Color);
-}
-
-.pf-c-icon .pf-m-warning {
-  color: var(--pf-c-icon--m-warning--Color);
-}
-
-.pf-c-icon .pf-m-danger {
-  color: var(--pf-c-icon--m-danger--Color);
-}
-
 /*
   Hacks necessary for the drawer to always use full page height
-  This is because the structure of the HTML for pf-c-page__drawer does not match the HTML demo at https://www.patternfly.org/v4/components/drawer/html-demos/expanded/
+  This is because the structure of the HTML for pf-v5-c-page__drawer does not match the HTML demo at https://www.patternfly.org/v4/components/drawer/html-demos/expanded/
   We could fix that by using the `notificationDrawer` prop of the Page component, but it doesn't support passing the props we need to `DrawerPanelContent`.
   TODO: Open this as a bug in PF, add a prop to allow that, and switch to that structure in order to remove this hack.
 */
-.pf-c-page__drawer {
+/* TODO PF V5 - Obsolete ? */
+.pf-v5-c-page__drawer {
   min-height: 100%;
 }
-.pf-c-drawer__body:last-child {
+.pf-v5-c-drawer__body:last-child {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;

diff --git a/client/src/app/common/CustomRules/useRuleFiles.tsx b/client/src/app/common/CustomRules/useRuleFiles.tsx
@@ -10,6 +10,7 @@ import { UseFormReturn } from "react-hook-form";
 import { XMLValidator } from "fast-xml-parser";
 import XSDSchema from "./windup-jboss-ruleset.xsd";
 import { checkRuleFileType } from "./rules-utils";
+import { DropEvent } from "@patternfly/react-core";
 const xmllint = require("xmllint");
 
 export default function useRuleFiles(
@@ -138,7 +139,7 @@ export default function useRuleFiles(
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
-  const handleFileDrop = (droppedFiles: File[]) => {
+  const handleFileDrop = (event: DropEvent, droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
     const currentFileNames = ruleFiles.map((file) => file.fileName);
     const reUploads = droppedFiles.filter((droppedFile) =>

diff --git a/client/src/app/common/ErrorFallback.tsx b/client/src/app/common/ErrorFallback.tsx
@@ -47,7 +47,7 @@ export const ErrorFallback = ({
 
   return (
     <Bullseye>
-      <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyState variant={EmptyStateVariant.sm}>
         <EmptyStateIcon icon={UserNinjaIcon} />
         <Title headingLevel="h2" size="lg">
           {t("dialog.message.pageError")}

diff --git a/client/src/app/common/KeyDisplayToggle.tsx b/client/src/app/common/KeyDisplayToggle.tsx
@@ -16,7 +16,7 @@ const KeyDisplayToggle: React.FC<IKeyDisplayToggleProps> = ({
   onClick,
 }: IKeyDisplayToggleProps) => (
   <Button variant="link" aria-label={`Show/hide ${keyName}`} onClick={onClick}>
-    <span className="pf-c-icon pf-m-info">
+    <span className="pf-v5-c-icon pf-v5-m-info">
       {isKeyHidden ? <EyeSlashIcon /> : <EyeIcon />}
     </span>
   </Button>

diff --git a/client/src/app/components/target-card.tsx b/client/src/app/components/target-card.tsx
@@ -6,10 +6,6 @@ import {
   EmptyStateVariant,
   Card,
   CardBody,
-  Select,
-  SelectOption,
-  SelectVariant,
-  SelectOptionObject,
   Text,
   DropdownItem,
   Flex,
@@ -18,6 +14,12 @@ import {
   ButtonVariant,
   Label,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+  SelectOptionObject,
+} from "@patternfly/react-core/deprecated";
 import { CubesIcon, GripVerticalIcon } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
@@ -122,7 +124,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
       onClick={handleCardClick}
       isSelectable={!!cardSelected}
       isSelected={isCardSelected}
-      className="pf-l-stack pf-l-stack__item pf-m-fill"
+      className="pf-v5-l-stack pf-v5-l-stack__item pf-v5-m-fill"
     >
       <CardBody>
         <Flex>
@@ -161,7 +163,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
           </FlexItem>
         </Flex>
         <EmptyState
-          variant={EmptyStateVariant.small}
+          variant={EmptyStateVariant.sm}
           className="select-card__component__empty-state"
         >
           <EmptyStateIcon icon={getImage()} />
@@ -174,7 +176,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
               toggleId={`${item.name}-toggle`}
               variant={SelectVariant.single}
               aria-label="Select Input"
-              onToggle={(isExpanded) => setRuleTargetSelectOpen(isExpanded)}
+              onToggle={(_, isExpanded) => setRuleTargetSelectOpen(isExpanded)}
               onSelect={handleRuleTargetSelection}
               selections={selectedRuleTarget}
               isOpen={isRuleTargetSelectOpen}
@@ -189,7 +191,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
               ))}
             </Select>
           ) : null}
-          <Text className={`${spacing.pMd} pf-u-text-align-left`}>
+          <Text className={`${spacing.pMd} pf-v5-u-text-align-left`}>
             {item.description}
           </Text>
         </EmptyState>

diff --git a/client/src/app/layout/AppAboutModal/AppAboutModal.tsx b/client/src/app/layout/AppAboutModal/AppAboutModal.tsx
@@ -103,7 +103,7 @@ export const AppAboutModal: React.FC<AppAboutModalProps> = ({
           </Trans>
         </Text>
       </TextContent>
-      <TextContent className="pf-u-py-xl">
+      <TextContent className="pf-v5-u-py-xl">
         <TextContent>
           <TextList component="dl">
             <TextListItem component="dt">{t("terms.version")}</TextListItem>