Update from PF4 -> PF5

ui/package.json

@@ -22,9 +22,9 @@
     "gen:src": "./scripts/generate-client.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-core": "^4.276.8",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/patternfly": "^5.4.2",
+    "@patternfly/react-core": "^5.4.8",
+    "@patternfly/react-icons": "^5.4.2",
     "axios": "^0.21.4",
     "formik": "^2.4.2",
     "history": "^5.0.1",

ui/src/components/AppHeaderLayout.tsx

@@ -17,11 +17,13 @@ export default function AppHeaderLayout({ logo, main, ending }: Props): ReactEle
   return (
     <Masthead>
       <MastheadMain>
-        <MastheadBrand className="pf-u-mr-xl">{logo}</MastheadBrand>
+        <MastheadBrand component="a" className="pf-v5-u-mr-xl">
+          {logo}
+        </MastheadBrand>
         <ToolbarItem variant="separator" />
         {main}
       </MastheadMain>
-      <MastheadContent className="pf-u-flex-direction-row-reverse">
+      <MastheadContent className="pf-v5-u-flex-direction-row-reverse">
         <div>{ending}</div>
       </MastheadContent>
     </Masthead>

ui/src/components/Countdown.tsx

@@ -25,15 +25,15 @@ function ModifiableTimeUnit({
   onChange = (): void => {},
 }: ModifiableTimeUnitProps): ReactElement {
   return (
-    <span className="pf-u-display-inline-flex pf-u-flex-direction-column pf-u-align-items-center">
+    <span className="pf-v5-u-display-inline-flex pf-v5-u-flex-direction-column pf-v5-u-align-items-center">
       <span>
         {`${value}`.padStart(2, '0')}
         {notation}
       </span>
-      <span className="pf-u-display-inline-flex">
+      <span className="pf-v5-u-display-inline-flex">
         <Button
           variant="plain"
-          className="pf-u-mr-sm pf-u-p-0"
+          className="pf-v5-u-mr-sm pf-v5-u-p-0"
           aria-label="Increment"
           onClick={(): void => {
             onChange(notation, 'inc');
@@ -43,7 +43,7 @@ function ModifiableTimeUnit({
         </Button>
         <Button
           variant="plain"
-          className="pf-u-p-0"
+          className="pf-v5-u-p-0"
           aria-label="Decrement"
           onClick={(): void => {
             onChange(notation, 'dec');

ui/src/components/FullPageError.tsx

@@ -11,9 +11,9 @@ export default function FullPageError({
   IconComponent = AlertCircle,
 }: Props): ReactElement {
   return (
-    <div className="pf-u-display-flex pf-u-align-items-center pf-u-justify-content-center pf-u-h-100">
-      <IconComponent className="pf-u-mr-md" size={64} />
-      <span className="pf-u-font-size-4xl">{message}</span>
+    <div className="pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-center pf-v5-u-h-100">
+      <IconComponent className="pf-v5-u-mr-md" size={64} />
+      <span className="pf-v5-u-font-size-4xl">{message}</span>
     </div>
   );
 }

ui/src/components/FullPageSpinner.tsx

@@ -3,9 +3,9 @@ import { RingLoader } from 'react-spinners';
 
 export default function FullPageSpinner(): ReactElement {
   return (
-    <div className="pf-u-display-flex pf-u-flex-direction-column pf-u-align-items-center pf-u-justify-content-center pf-u-h-100">
+    <div className="pf-v5-u-display-flex pf-v5-u-flex-direction-column pf-v5-u-align-items-center pf-v5-u-justify-content-center pf-v5-u-h-100">
       <RingLoader loading size={128} color="currentColor" />
-      <span className="pf-u-font-size-4xl">Loading...</span>
+      <span className="pf-v5-u-font-size-4xl">Loading...</span>
     </div>
   );
 }

ui/src/components/forms/FileUploadFormField.tsx

@@ -1,6 +1,16 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { useField } from 'formik';
-import { FormGroup, Popover, FileUpload, ValidatedOptions } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Popover,
+  FileUpload,
+  ValidatedOptions,
+  Icon,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  DropEvent,
+} from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 type Props = {
@@ -22,10 +32,7 @@ export default function FileUploadFormField({
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (event: DropEvent, file: File) => {
     setFilename(file.name);
   };
 
@@ -59,15 +66,15 @@ export default function FileUploadFormField({
               aria-label={`Help for ${name}`}
               onClick={(e) => e.preventDefault()}
               aria-describedby={id}
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon>
+                <HelpIcon />
+              </Icon>
             </button>
           </Popover>
         ) : undefined
       }
-      validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
-      helperTextInvalid={meta.error}
     >
       <FileUpload
         id={id}
@@ -77,16 +84,23 @@ export default function FileUploadFormField({
         type="text"
         hideDefaultPreview
         onFileInputChange={handleFileInputChange}
-        onDataChange={handleTextOrDataChange}
-        onTextChange={handleTextOrDataChange}
-        onReadStarted={handleFileReadStarted}
-        onReadFinished={handleFileReadFinished}
+        onDataChange={(_event, value: string) => handleTextOrDataChange(value)}
+        onTextChange={(_event, value: string) => handleTextOrDataChange(value)}
+        onReadStarted={(_event, _fileHandle: File) => handleFileReadStarted(_fileHandle)}
+        onReadFinished={(_event, _fileHandle: File) => handleFileReadFinished(_fileHandle)}
         onClearClick={handleClear}
         isLoading={isLoading}
         browseButtonText="Upload"
         aria-describedby={`${id}-helper`}
         validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
       />
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem variant={meta.error ? ValidatedOptions.error : ValidatedOptions.default}>
+            {meta.error}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 }

ui/src/components/forms/NumberFormField.tsx

@@ -1,6 +1,13 @@
 import React, { ReactElement } from 'react';
 import { useField } from 'formik';
-import { FormGroup, NumberInput, ValidatedOptions } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  NumberInput,
+  ValidatedOptions,
+} from '@patternfly/react-core';
 
 type Props = {
   name: string;
@@ -39,14 +46,7 @@ export default function NumberFormField({
   };
 
   return (
-    <FormGroup
-      label={label}
-      fieldId={id}
-      isRequired={required}
-      validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
-      helperTextInvalid={meta.error}
-      className="capitalize"
-    >
+    <FormGroup label={label} fieldId={id} isRequired={required} className="capitalize">
       <NumberInput
         id={id}
         name={name}
@@ -60,6 +60,13 @@ export default function NumberFormField({
         isDisabled={disabled}
         validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
       />
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem variant={meta.error ? ValidatedOptions.error : ValidatedOptions.default}>
+            {meta.error}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 }

ui/src/components/forms/TextFormField.tsx

@@ -1,6 +1,15 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { useField } from 'formik';
-import { FormGroup, Popover, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Icon,
+  Popover,
+  TextInput,
+  ValidatedOptions,
+} from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 type Props = {
@@ -41,20 +50,20 @@ export default function TextFormField({
               aria-label={`Help for ${name}`}
               onClick={(e) => e.preventDefault()}
               aria-describedby={id}
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon>
+                <HelpIcon />
+              </Icon>
             </button>
           </Popover>
         ) : undefined
       }
-      validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
-      helperTextInvalid={meta.error}
     >
       <TextInput
         id={id}
         name={name}
-        onChange={onChange}
+        onChange={(event, _value: string) => onChange(_value, event)}
         type="text"
         value={field.value} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
         placeholder={placeholder}
@@ -63,6 +72,13 @@ export default function TextFormField({
         aria-describedby={`${id}-helper`}
         validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
       />
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem variant={meta.error ? ValidatedOptions.error : ValidatedOptions.default}>
+            {meta.error}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 }

ui/src/containers/AppHeader/ProductLogoTile.tsx

@@ -14,7 +14,7 @@ export default function ProductLogoTile(): ReactElement {
         </Link>
       </FlexItem>
       <FlexItem>
-        <span className="pf-u-font-family-redhatVF-heading-sans-serif pf-u-font-size-lg">
+        <span className="pf-v5-u-font-family-redhatVF-heading-sans-serif pf-v5-u-font-size-lg">
           Infra
         </span>
         <Version />

ui/src/containers/AppHeader/Version.tsx

@@ -27,7 +27,7 @@ export default function Version(): ReactElement {
   if (loading)
     return (
       <VersionContent
-        icon={<Spinner isSVG size="md" aria-label="Loading version information" />}
+        icon={<Spinner  size="md" aria-label="Loading version information" />}
         text="Loading..."
       />
     );

ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx

@@ -43,7 +43,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
         header={`Are you sure you want to delete ${cluster.ID}?`}
         buttons={buttons}
       >
-        <span className="pf-u-danger-color-100 pf-u-font-size-2xl">
+        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">
           This action cannot be undone.
         </span>
       </Modal>
@@ -64,7 +64,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
     const message = `Cannot delete cluster. Server error occurred: "${error.message}".`;
     return (
       <InformationalModal header={`Failed to delete ${cluster.ID}!`} onAcknowledged={onCancel}>
-        <span className="pf-u-danger-color-100 pf-u-font-size-2xl">{message}</span>
+        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">{message}</span>
       </InformationalModal>
     );
   }
@@ -73,7 +73,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
   const message = `Cluster ${cluster.ID} is being destroyed now.`;
   return (
     <InformationalModal header={`Successfully deleted ${cluster.ID}!`} onAcknowledged={onDeleted}>
-      <span className="pf-u-success-color-100 pf-u-font-size-2xl">{message}</span>
+      <span className="pf-v5-u-success-color-100 pf-v5-u-font-size-2xl">{message}</span>
     </InformationalModal>
   );
 }

ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx

@@ -15,7 +15,7 @@ type ArtifactsListProps = {
 
 function ArtifactsList({ artifacts }: ArtifactsListProps): ReactElement {
   return (
-    <List className="pf-u-mb-md">
+    <List className="pf-v5-u-mb-md">
       {artifacts
         .sort((a, b) => {
           if (a.Description && !b.Description) {

ui/src/containers/ClusterInfoPage/MutableLifespan.tsx

@@ -26,7 +26,7 @@ export default function MutableLifespan({ cluster }: Props): ReactElement {
         header="Cannot change the cluster lifespan"
         onAcknowledged={(): void => setError(null)}
       >
-        <span className="pf-u-danger-color-100 pf-u-font-size-2xl">{message}</span>
+        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">{message}</span>
       </InformationalModal>
     );
   }