[WIP] Spike Effort: Update version of Patternfly to v6

frontend/package.json

@@ -55,21 +55,21 @@
     "@monaco-editor/react": "^4.6.0",
     "@openshift/dynamic-plugin-sdk": "^4.0.0",
     "@openshift/dynamic-plugin-sdk-utils": "^4.0.1",
-    "@patternfly/patternfly": "^5.4.0",
-    "@patternfly/quickstarts": "^5.3.0",
-    "@patternfly/react-catalog-view-extension": "^5.0.0",
-    "@patternfly/react-charts": "^7.4.0",
-    "@patternfly/react-code-editor": "^5.4.0",
-    "@patternfly/react-core": "^5.4.1",
-    "@patternfly/react-drag-drop": "^5.4.0",
-    "@patternfly/react-icons": "^5.4.0",
-    "@patternfly/react-log-viewer": "^5.3.0",
-    "@patternfly/react-styles": "^5.4.0",
-    "@patternfly/react-table": "^5.4.0",
-    "@patternfly/react-templates": "^1.1.0",
-    "@patternfly/react-tokens": "^5.4.0",
-    "@patternfly/react-topology": "^5.4.0",
-    "@patternfly/react-virtualized-extension": "^5.1.0",
+    "@patternfly/patternfly": "6.0.0-prerelease.15",
+    "@patternfly/quickstarts": "6.0.0-prerelease.2",
+    "@patternfly/react-catalog-view-extension": "6.0.0-prerelease.1",
+    "@patternfly/react-charts": "8.0.0-prerelease.14",
+    "@patternfly/react-code-editor": "6.0.0-prerelease.21",
+    "@patternfly/react-core": "6.0.0-prerelease.21",
+    "@patternfly/react-drag-drop": "6.0.0-prerelease.21",
+    "@patternfly/react-icons": "6.0.0-prerelease.7",
+    "@patternfly/react-log-viewer": "6.0.0-prerelease.1",
+    "@patternfly/react-styles": "6.0.0-prerelease.6",
+    "@patternfly/react-table": "6.0.0-prerelease.22",
+    "@patternfly/react-templates": "6.0.0-prerelease.21",
+    "@patternfly/react-tokens": "6.0.0-prerelease.7",
+    "@patternfly/react-topology": "6.0.0-prerelease.2",
+    "@patternfly/react-virtualized-extension": "6.0.0-prerelease.3",
     "@segment/analytics-next": "^1.72.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",
@@ -140,7 +140,7 @@
     "tslib": "^2.5.0",
     "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
-    "victory-core": "^36.8.3",
+    "victory-core": "^37.1.1",
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
@@ -198,11 +198,19 @@
       "react-redux": "^8.0.4",
       "react-router": "^6.4.1",
       "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+      "react-dom": "^18.2.0",
+      "@patternfly/react-core": "6.0.0-prerelease.21",
+      "@patternfly/react-icons": "6.0.0-prerelease.7",
+      "@patternfly/react-styles": "6.0.0-prerelease.6",
+      "@patternfly/react-table": "6.0.0-prerelease.22",
+      "@patternfly/react-virtualized-extension": "6.0.0-prerelease.3"
     },
     "@patternfly/react-topology": {
       "react": "^18.2.0"
     },
+    "@patternfly/quickstarts": {
+      "@patternfly/react-core": "6.0.0-prerelease.21"
+    },
     "ws": "^8.17.1"
   }
 }

frontend/src/__mocks__/mockByon.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 
 import { RecursivePartial } from '~/typeHelpers';
 import { BYONImage } from '~/types';

frontend/src/__mocks__/mockImageStreamK8sResource.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 import { ImageStreamKind } from '~/k8sTypes';
 import { RecursivePartial } from '~/typeHelpers';
 

frontend/src/__mocks__/mockNotebookK8sResource.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 import { KnownLabels, NotebookKind } from '~/k8sTypes';
 import { DEFAULT_NOTEBOOK_SIZES } from '~/pages/projects/screens/spawner/const';
 import { ContainerResources, TolerationEffect, TolerationOperator, VolumeMount } from '~/types';

frontend/src/__mocks__/mockNotebookState.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash-es';
+import * as _ from 'lodash-es';
 import { NotebookKind } from '~/k8sTypes';
 import { NotebookState, NotebookRefresh } from '~/pages/projects/notebook/types';
 

frontend/src/__tests__/cypress/cypress/pages/components/DashboardCodeEditor.ts

@@ -6,6 +6,6 @@ export class DashboardCodeEditor extends Contextual<HTMLElement> {
   }
 
   findUpload(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.find().find('.pf-v5-c-code-editor__main input[type="file"]');
+    return this.find().find('.pf-v6-c-code-editor__main input[type="file"]');
   }
 }

frontend/src/app/AboutDialog.scss

@@ -3,7 +3,7 @@
 // Override to use the full width of the dialog rather than wrapping early
 .odh-about-dialog {
   height: fit-content;
-  .pf-v5-c-about-modal-box__content {
+  .pf-v6-c-about-modal-box__content {
     grid-column-end: -1;
   }
 }

frontend/src/app/AboutDialog.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  AboutModal,
-  Alert,
-  Bullseye,
-  Spinner,
-  TextContent,
-  TextList,
-  TextListItem,
-} from '@patternfly/react-core';
+import { AboutModal, Alert, Bullseye, Spinner, Content } from '@patternfly/react-core';
 import { ODH_LOGO, ODH_PRODUCT_NAME } from '~/utilities/const';
 import { useUser, useClusterInfo } from '~/redux/selectors';
 import { useAppContext } from '~/app/AppContext';
@@ -46,58 +38,58 @@ const AboutDialog: React.FC<AboutDialogProps> = ({ onClose }) => {
       aria-label={ODH_PRODUCT_NAME}
       data-testid="odh-about-dialog"
     >
-      <TextContent style={{ paddingBottom: 48 }}>
+      <Content style={{ paddingBottom: 48 }}>
         <h4>About</h4>
         <p data-testid="about-text">{isRHOAI ? RhoaiAboutText : OdhAboutText}</p>
-      </TextContent>
-      <TextContent>
+      </Content>
+      <Content>
         <div style={{ position: 'relative' }}>
           {loading ? (
             <Bullseye style={{ position: 'absolute', width: '100%' }}>
               <Spinner size="xl" />
             </Bullseye>
           ) : null}
-          <TextList component="dl" style={{ visibility: loading ? 'hidden' : 'visible' }}>
-            <TextListItem component="dt" data-testid="about-product-name">
+          <Content component="dl" style={{ visibility: loading ? 'hidden' : 'visible' }}>
+            <Content component="dt" data-testid="about-product-name">
               {dsciStatus?.release?.name ||
                 (isRHOAI ? RhoaiDefaultReleaseName : OdhDefaultReleaseName)}{' '}
               version
-            </TextListItem>
-            <TextListItem component="dd" data-testid="about-version">
+            </Content>
+            <Content component="dd" data-testid="about-version">
               {dsciStatus?.release?.version || 'Unknown'}
-            </TextListItem>
-            <TextListItem component="dt">Channel</TextListItem>
-            <TextListItem component="dd" data-testid="about-channel">
+            </Content>
+            <Content component="dt">Channel</Content>
+            <Content component="dd" data-testid="about-channel">
               {subStatus?.channel || 'Unknown'}
-            </TextListItem>
-            <TextListItem component="dt">API server</TextListItem>
-            <TextListItem component="dd" data-testid="about-server-url">
+            </Content>
+            <Content component="dt">API server</Content>
+            <Content component="dd" data-testid="about-server-url">
               {serverURL}
-            </TextListItem>
-            <TextListItem component="dt">User type</TextListItem>
-            <TextListItem component="dd" data-testid="about-access-level">
+            </Content>
+            <Content component="dt">User type</Content>
+            <Content component="dd" data-testid="about-access-level">
               {isAdmin ? 'Administrator' : 'Non-administrator'}
-            </TextListItem>
-            <TextListItem component="dt">Last updated</TextListItem>
-            <TextListItem component="dd" data-testid="about-last-update">
+            </Content>
+            <Content component="dt">Last updated</Content>
+            <Content component="dd" data-testid="about-last-update">
               {subStatus?.lastUpdated
                 ? new Date(subStatus.lastUpdated).toLocaleString(undefined, {
                     dateStyle: 'long',
                   })
                 : 'Unknown'}
-            </TextListItem>
-          </TextList>
+            </Content>
+          </Content>
         </div>
         {error ? (
           <Alert
-            style={{ marginTop: 'var(--pf-v5-global--spacer--lg)' }}
+            style={{ marginTop: 'var(--pf-t--global--spacer--lg)' }}
             variant="danger"
             title="Problem loading product information"
           >
             {error.message}
           </Alert>
         ) : null}
-      </TextContent>
+      </Content>
     </AboutModal>
   );
 };

frontend/src/app/App.scss

@@ -7,18 +7,15 @@ body,
 #dashboard-page-main {
   // Establish positioning relative to the top left of the main container.
   position: relative;
+  overflow-y: auto;
 }
 
 .odh-dashboard {
   &__page-content {
-    border: 1px solid var(--pf-v5-global--BorderColor--100);
+    border: 1px solid var(--pf-t--global--border--color--default);
     display: flex;
     flex: 1;
-    margin: var(--pf-v5-global--spacer--md);
-  }
-
-  .pf-v5-c-app-launcher__group-title {
-    font-size: 13px;
+    margin: var(--pf-t--global--spacer--md);
   }
 
   &__brand {
@@ -29,7 +26,7 @@ body,
   // This requires decreasing the width and the size of the toggle as well
   td,
   li {
-    .pf-v5-c-switch__toggle {
+    .pf-v6-c-switch__toggle {
       height: 18px;
       margin-top: -1px;
       &:before {
@@ -38,49 +35,50 @@ body,
         inset-block-start: 4px;
       }
     }
-    .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
+    .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
       inset-inline-start: 12px;
     }
   }
 }
 
 .odh-u-spin {
-  animation: pf-v5-c-spinner-animation-rotate 3s linear infinite;
+  animation: pf-v6-c-spinner-animation-rotate 3s linear infinite;
 }
 
-// specificity targeting form elements to override --pf-v5-global--FontSize--md
-.pf-v5-c-page,
-.pf-v5-c-modal-box {
+// specificity targeting form elements to override --pf-v6-global--FontSize--md
+// All classes reverted to pf-v5 prefix don't exist in v6 and could probably be removed since menu-toggle and menu__item are being targeted
+.pf-v6-c-page,
+.pf-v6-c-modal-box {
   .pf-v5-c-app-launcher,
-  .pf-v5-c-button,
+  .pf-v6-c-button,
   .pf-v5-c-dropdown,
   .pf-v5-c-dropdown__menu-item,
   .pf-v5-c-dropdown__toggle,
-  .pf-v5-c-menu-toggle,
-  .pf-v5-c-menu__item,
+  .pf-v6-c-menu-toggle,
+  .pf-v6-c-menu__item,
   .pf-v5-c-select,
   .pf-v5-c-select__menu-item,
   .pf-v5-c-select__toggle,
-  .pf-v5-c-text-input-group,
-  .pf-v5-c-form-control {
-    font-size: var(--pf-v5-global--FontSize--sm);
+  .pf-v6-c-text-input-group,
+  .pf-v6-c-form-control {
+    font-size: var(--pf-t--global--font--size--body--sm);
     height: auto;
   }
 }
 
 // TODO: Remove when PF bug is fixed. See https://github.com/patternfly/patternfly-react/issues/9769
 // Override to prevent drawer body content from taking over scroll container
-.pf-v5-c-drawer__body {
+.pf-v6-c-drawer__body {
   min-height: 0;
 }
 
-.pf-v5-c-truncate {
+.pf-v6-c-truncate {
   --pf-v5-c-truncate--MinWidth: 0;
   --pf-v5-c-truncate__start--MinWidth: 0;
 }
 
 // FIXME https://github.com/patternfly/patternfly/issues/7104
-.pf-v5-c-label-group {
+.pf-v6-c-label-group {
   max-width: 100%;
 
   &__main,

frontend/src/app/App.tsx

@@ -71,7 +71,7 @@ const App: React.FC = () => {
     // There was an error fetching critical data
     return (
       <Page>
-        <PageSection>
+        <PageSection hasBodyWrapper={false}>
           <Stack hasGutter>
             <StackItem>
               <Alert variant="danger" isInline title="General loading error">
@@ -110,7 +110,8 @@ const App: React.FC = () => {
           <Page
             className="odh-dashboard"
             isManagedSidebar
-            header={
+            isContentFilled
+            masthead={
               <Header onNotificationsClick={() => setNotificationsOpen(!notificationsOpen)} />
             }
             sidebar={isAllowed ? <NavSidebar /> : undefined}

frontend/src/app/AppLauncher.scss

@@ -1,6 +1,6 @@
 // giving a fixed width and height of the icon for app launcher
 .odh-app-launcher__dropdown-item {
-  .pf-v5-c-menu__item-icon {
+  .pf-v6-c-menu__item-icon {
     width: 1.5rem;
     height: 1.5rem;
   }

frontend/src/app/AppNotificationDrawer.tsx

@@ -68,12 +68,11 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
                   title={notification.title}
                 >
                   <Button
+                    icon={<TimesIcon aria-hidden="true" />}
                     variant={ButtonVariant.plain}
                     aria-label="remove notification"
                     onClick={() => onRemoveNotification(notification)}
-                  >
-                    <TimesIcon aria-hidden="true" />
-                  </Button>
+                  />
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody
                   timestamp={calculateRelativeTime(notification.timestamp, currentTime)}

frontend/src/app/DevFeatureFlagsBanner.tsx

@@ -4,11 +4,11 @@ import {
   Checkbox,
   Grid,
   GridItem,
-  Modal,
   Split,
   SplitItem,
   Tooltip,
 } from '@patternfly/react-core';
+import { Modal } from '@patternfly/react-core/deprecated';
 import { CloseIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { allFeatureFlags } from '~/concepts/areas/const';
@@ -62,7 +62,7 @@ const DevFeatureFlagsBanner: React.FC<Props> = ({
   );
   return (
     <>
-      <Banner variant="blue">
+      <Banner color="blue">
         <Split>
           <SplitItem isFilled>
             Feature flags are{' '}