removed use of deprecated page header (#31467)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/account-ui/src/root/Header.tsx

@@ -49,7 +49,6 @@ export const Header = () => {
       data-testid="page-header"
       keycloak={keycloak}
       features={{ hasManageAccount: false }}
-      showNavToggle
       brand={{
         href: indexHref,
         src: joinPath(environment.resourceUrl, brandImage),

js/libs/ui-shared/src/masthead/Masthead.tsx

@@ -1,17 +1,19 @@
 import {
   Avatar,
   AvatarProps,
-  Brand,
-  BrandProps,
   DropdownItem,
+  Masthead,
+  MastheadBrand,
+  MastheadBrandProps,
+  MastheadContent,
+  MastheadMainProps,
+  MastheadToggle,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
 } from "@patternfly/react-core";
-import {
+import { BarsIcon } from "@patternfly/react-icons";
-  PageHeader,
-  PageHeaderProps,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-} from "@patternfly/react-core/deprecated";
 import { TFunction } from "i18next";
 import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
 import { ReactNode } from "react";
@@ -38,11 +40,9 @@ function loggedInUserName(
   return givenName || familyName || preferredUsername || t("unknownUser");
 }
 
-type BrandLogo = BrandProps & {
+type BrandLogo = MastheadBrandProps;
-  href: string;
-};
 
-type KeycloakMastheadProps = PageHeaderProps & {
+type KeycloakMastheadProps = MastheadMainProps & {
   keycloak: Keycloak;
   brand: BrandLogo;
   avatar?: AvatarProps;
@@ -58,7 +58,7 @@ type KeycloakMastheadProps = PageHeaderProps & {
 
 const KeycloakMasthead = ({
   keycloak,
-  brand: { href: brandHref, ...brandProps },
+  brand: { src, alt, className, ...brandProps },
   avatar,
   features: {
     hasLogout = true,
@@ -92,14 +92,41 @@ const KeycloakMasthead = ({
 
   const picture = keycloak.idTokenParsed?.picture;
   return (
-    <PageHeader
+    <Masthead {...rest}>
-      {...rest}
+      <MastheadToggle>
-      logo={<Brand {...brandProps} />}
+        <PageToggleButton variant="plain" aria-label={t("navigation")}>
-      logoProps={{ href: brandHref }}
+          <BarsIcon />
-      headerTools={
+        </PageToggleButton>
-        <PageHeaderTools>
+      </MastheadToggle>
-          <PageHeaderToolsGroup>
+      <MastheadBrand {...brandProps}>
-            <PageHeaderToolsItem
+        <img src={src} alt={alt} className={className} />
+      </MastheadBrand>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            {toolbarItems?.map((item, index) => (
+              <ToolbarItem key={index} align={{ default: "alignRight" }}>
+                {item}
+              </ToolbarItem>
+            ))}
+            <ToolbarItem
+              visibility={{
+                default: "hidden",
+                md: "visible",
+              }} /** this user dropdown is hidden on mobile sizes */
+            >
+              <KeycloakDropdown
+                data-testid="options"
+                dropDownItems={[...dropdownItems, extraItems]}
+                title={
+                  hasUsername
+                    ? loggedInUserName(keycloak.idTokenParsed, t)
+                    : undefined
+                }
+              />
+            </ToolbarItem>
+            <ToolbarItem
+              align={{ default: "alignLeft" }}
               visibility={{
                 md: "hidden",
               }}
@@ -112,33 +139,22 @@ const KeycloakMasthead = ({
                   extraItems,
                 ]}
               />
-            </PageHeaderToolsItem>
+            </ToolbarItem>
-            <PageHeaderToolsItem>{toolbarItems}</PageHeaderToolsItem>
+            <ToolbarItem
-            <PageHeaderToolsItem
+              variant="overflow-menu"
-              visibility={{
+              align={{ default: "alignRight" }}
-                default: "hidden",
+              className="pf-v5-u-m-0-on-lg"
-                md: "visible",
-              }}
             >
-              <KeycloakDropdown
+              {picture || avatar?.src ? (
-                data-testid="options"
+                <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
-                dropDownItems={[...dropdownItems, extraItems]}
+              ) : (
-                title={
+                <DefaultAvatar {...avatar} />
-                  hasUsername
+              )}
-                    ? loggedInUserName(keycloak.idTokenParsed, t)
+            </ToolbarItem>
-                    : undefined
+          </ToolbarContent>
-                }
+        </Toolbar>
-              />
+      </MastheadContent>
-            </PageHeaderToolsItem>
+    </Masthead>
-          </PageHeaderToolsGroup>
-          {picture || avatar?.src ? (
-            <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
-          ) : (
-            <DefaultAvatar {...avatar} />
-          )}
-        </PageHeaderTools>
-      }
-    />
   );
 };