[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.3.1",
-    "@patternfly/quickstarts": "^5.3.0",
-    "@patternfly/react-catalog-view-extension": "^5.0.0",
-    "@patternfly/react-charts": "^7.3.1",
-    "@patternfly/react-code-editor": "^5.3.3",
-    "@patternfly/react-core": "^5.3.3",
-    "@patternfly/react-drag-drop": "^5.3.3",
-    "@patternfly/react-icons": "^5.3.2",
-    "@patternfly/react-log-viewer": "^5.2.0",
-    "@patternfly/react-styles": "^5.3.1",
-    "@patternfly/react-table": "^5.3.3",
-    "@patternfly/react-templates": "^1.0.4",
-    "@patternfly/react-tokens": "^5.3.1",
-    "@patternfly/react-topology": "^5.4.0-prerelease.10",
-    "@patternfly/react-virtualized-extension": "^5.1.0",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/quickstarts": "6.0.0-alpha.5",
+    "@patternfly/react-catalog-view-extension": "6.0.0-alpha.7",
+    "@patternfly/react-charts": "8.0.0-alpha.37",
+    "@patternfly/react-code-editor": "6.0.0-alpha.100",
+    "@patternfly/react-core": "6.0.0-alpha.100",
+    "@patternfly/react-drag-drop": "6.0.0-alpha.82",
+    "@patternfly/react-icons": "6.0.0-alpha.35",
+    "@patternfly/react-log-viewer": "6.0.0-alpha.5",
+    "@patternfly/react-styles": "6.0.0-alpha.34",
+    "@patternfly/react-table": "6.0.0-alpha.101",
+    "@patternfly/react-templates": "6.0.0-alpha.50",
+    "@patternfly/react-tokens": "6.0.0-alpha.34",
+    "@patternfly/react-topology": "6.0.0-alpha.3",
+    "@patternfly/react-virtualized-extension": "6.0.0-alpha.3",
     "@segment/analytics-next": "^1.72.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",
@@ -196,11 +196,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-alpha.100",
+      "@patternfly/react-icons": "6.0.0-alpha.35",
+      "@patternfly/react-styles": "6.0.0-alpha.34",
+      "@patternfly/react-table": "6.0.0-alpha.101",
+      "@patternfly/react-virtualized-extension": "6.0.0-alpha.3"
     },
     "@patternfly/react-topology": {
       "react": "^18.2.0"
     },
+    "@patternfly/quickstarts": {
+      "@patternfly/react-core": "6.0.0-alpha.100"
+    },
     "ws": "^8.17.1"
   }
 }

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

@@ -11,13 +11,13 @@ body,
 
 .odh-dashboard {
   &__page-content {
-    border: 1px solid var(--pf-v5-global--BorderColor--100);
+    border: 1px solid var(--pf-v6-global--BorderColor--100);
     display: flex;
     flex: 1;
-    margin: var(--pf-v5-global--spacer--md);
+    margin: var(--pf-t--global--spacer--md);
   }
 
-  .pf-v5-c-app-launcher__group-title {
+  .pf-v6-c-app-launcher__group-title {
     font-size: 13px;
   }
 
@@ -29,7 +29,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,35 +38,35 @@ 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;
     }
   }
 }
 
-// specificity targeting form elements to override --pf-v5-global--FontSize--md
-.pf-v5-c-page,
-.pf-v5-c-modal-box {
-  .pf-v5-c-app-launcher,
-  .pf-v5-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-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);
+// specificity targeting form elements to override --pf-v6-global--FontSize--md
+.pf-v6-c-page,
+.pf-v6-c-modal-box {
+  .pf-v6-c-app-launcher,
+  .pf-v6-c-button,
+  .pf-v6-c-dropdown,
+  .pf-v6-c-dropdown__menu-item,
+  .pf-v6-c-dropdown__toggle,
+  .pf-v6-c-menu-toggle,
+  .pf-v6-c-menu__item,
+  .pf-v6-c-select,
+  .pf-v6-c-select__menu-item,
+  .pf-v6-c-select__toggle,
+  .pf-v6-c-text-input-group,
+  .pf-v6-c-form-control {
+    font-size: var(--pf-v6-global--FontSize--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;
 }
 

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,7 @@ const App: React.FC = () => {
           <Page
             className="odh-dashboard"
             isManagedSidebar
-            header={
+            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)}
@@ -84,7 +83,7 @@ const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }
             ))}
           </NotificationDrawerList>
         ) : (
-          <EmptyState variant={EmptyStateVariant.sm}>
+          <EmptyState titleText="" variant={EmptyStateVariant.sm}>
             <EmptyStateBody>There are no notifications at this time.</EmptyStateBody>
           </EmptyState>
         )}

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{' '}

frontend/src/app/Header.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import {
   Brand,
   Masthead,
-  MastheadBrand,
+  MastheadLogo,
   MastheadContent,
   MastheadMain,
   MastheadToggle,
+  MastheadBrand,
   PageToggleButton,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
@@ -34,12 +35,14 @@ const Header: React.FC<HeaderProps> = ({ onNotificationsClick }) => {
         </MastheadToggle>
       )}
       <MastheadMain>
-        <MastheadBrand component={MastheadBranchComponent}>
-          <Brand
-            className="odh-dashboard__brand"
-            src={`${window.location.origin}/images/${ODH_LOGO}`}
-            alt={`${ODH_PRODUCT_NAME} Logo`}
-          />
+        <MastheadBrand data-codemods>
+          <MastheadLogo data-codemods component={MastheadBranchComponent}>
+            <Brand
+              className="odh-dashboard__brand"
+              src={`${window.location.origin}/images/${ODH_LOGO}`}
+              alt={`${ODH_PRODUCT_NAME} Logo`}
+            />
+          </MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

frontend/src/app/HeaderTools.tsx

@@ -134,7 +134,7 @@ const HeaderTools: React.FC<HeaderToolsProps> = ({ onNotificationsClick }) => {
   return (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup variant="icon-button-group" align={{ default: 'alignRight' }}>
+        <ToolbarGroup variant="action-group-plain" align={{ default: 'alignEnd' }}>
           {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? (
             <ToolbarItem data-testid="application-launcher">
               <AppLauncher />

frontend/src/app/NavSidebar.tsx

@@ -60,9 +60,9 @@ const NavSidebar: React.FC = () => {
   const userNavData = useBuildNavData();
 
   return (
-    <PageSidebar theme="dark">
+    <PageSidebar>
       <PageSidebarBody>
-        <Nav theme="dark" aria-label="Nav">
+        <Nav aria-label="Nav">
           <NavList>
             {userNavData.map((item) =>
               isNavDataGroup(item) ? (