remove use of deprecated components (#28800)

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

js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts

@@ -11,7 +11,7 @@ export default class Masthead extends CommonElements {
   #globalAlerts = "global-alerts";
   #documentationLink = "#link";
   #backToAdminConsoleLink = "referrer-link";
-  #userDrpdwnItem = ".pf-v5-c-dropdown__menu-item";
+  #userDrpdwnItem = ".pf-v5-c-menu__item";
 
   #getAlertsContainer() {
     return cy.findByTestId(this.#globalAlerts);

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -3122,3 +3122,5 @@ parRequestUriLifespanHelp=Number that represents the lifetime of the request URI
 identityBrokeringLink=Identity brokering link
 searchClientRegistration=Search for policy
 importFileHelp=File to import a key
+logo=Logo
+avatarImage=Avatar image

js/apps/admin-ui/src/PageHeader.tsx

@@ -1,19 +1,23 @@
-import { Avatar, Brand } from "@patternfly/react-core";
 import {
+  Avatar,
+  Divider,
   Dropdown,
   DropdownItem,
-  DropdownSeparator,
-  DropdownToggle,
-  KebabToggle,
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-} from "@patternfly/react-core/deprecated";
-import { HelpIcon } from "@patternfly/react-icons";
-import { ReactNode, useState } from "react";
+  DropdownList,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadToggle,
+  MenuToggle,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { BarsIcon, EllipsisVIcon, HelpIcon } from "@patternfly/react-icons";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHref } from "react-router-dom";
 import { useHelp } from "ui-shared";
 
 import { HelpHeader } from "./components/help-enabler/HelpHeader";
@@ -56,12 +60,7 @@ const ServerInfoDropdownItem = () => {
   return (
     <DropdownItem
       key="server info"
-      component={
-        // The type definition in PatternFly is incorrect, so we need to cast here.
-        ((props: any) => (
-          <Link {...props} to={toDashboard({ realm })} />
-        )) as unknown as ReactNode
-      }
+      component={(props) => <Link {...props} to={toDashboard({ realm })} />}
     >
       {t("realmInfo")}
     </DropdownItem>
@@ -86,14 +85,14 @@ const kebabDropdownItems = [
   <ManageAccountDropdownItem key="kebab Manage Account" />,
   <ServerInfoDropdownItem key="kebab Server Info" />,
   <HelpDropdownItem key="kebab Help" />,
-  <DropdownSeparator key="kebab sign out separator" />,
+  <Divider component="li" key="kebab sign out separator" />,
   <SignOutDropdownItem key="kebab Sign out" />,
 ];
 
 const userDropdownItems = [
   <ManageAccountDropdownItem key="Manage Account" />,
   <ServerInfoDropdownItem key="Server info" />,
-  <DropdownSeparator key="sign out separator" />,
+  <Divider component="li" key="sign out separator" />,
   <SignOutDropdownItem key="Sign out" />,
 ];
 
@@ -102,13 +101,23 @@ const KebabDropdown = () => {
 
   return (
     <Dropdown
-      id="user-dropdown-kebab"
       isPlain
-      position="right"
-      toggle={<KebabToggle onToggle={(_event, val) => setDropdownOpen(val)} />}
+      onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
+      toggle={(ref) => (
+        <MenuToggle
+          id="user-dropdown-kebab"
+          ref={ref}
+          variant="plain"
+          onClick={() => setDropdownOpen(!isDropdownOpen)}
+          isExpanded={isDropdownOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
       isOpen={isDropdownOpen}
-      dropdownItems={kebabDropdownItems}
-    />
+    >
+      <DropdownList>{kebabDropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 
@@ -119,82 +128,90 @@ const UserDropdown = () => {
   return (
     <Dropdown
       isPlain
-      position="right"
-      id="user-dropdown"
       isOpen={isDropdownOpen}
-      toggle={
-        <DropdownToggle onToggle={(_event, val) => setDropdownOpen(val)}>
+      onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
+      toggle={(ref) => (
+        <MenuToggle
+          id="user-dropdown"
+          ref={ref}
+          onClick={() => setDropdownOpen(!isDropdownOpen)}
+        >
           {whoAmI.getDisplayName()}
-        </DropdownToggle>
-      }
-      dropdownItems={userDropdownItems}
-    />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>{userDropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 
 export const Header = () => {
+  const { t } = useTranslation();
   const { realm } = useRealm();
 
-  const headerTools = () => {
-    const picture = keycloak.tokenParsed?.picture;
-    return (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: "hidden",
-            md: "visible",
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <HelpHeader />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              md: "hidden",
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <KebabDropdown />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{
-              default: "hidden",
-              md: "visible",
-            }} /** this user dropdown is hidden on mobile sizes */
-          >
-            <UserDropdown />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <Avatar
-          src={picture || environment.resourceUrl + "/img_avatar.svg"}
-          alt="Avatar image"
-        />
-      </PageHeaderTools>
-    );
-  };
-
+  const picture = keycloak.tokenParsed?.picture;
   const logo = environment.logo ? environment.logo : "/logo.svg";
-  const logoUrl = environment.logoUrl
-    ? environment.logoUrl
-    : toDashboard({ realm });
+  const url = useHref(toDashboard({ realm }));
+  const logoUrl = environment.logoUrl ? environment.logoUrl : url;
 
   return (
-    <PageHeader
-      showNavToggle
-      logo={
-        <Link to={logoUrl}>
-          <Brand
-            src={environment.resourceUrl + logo}
-            id="masthead-logo"
-            alt="Logo"
-            className="keycloak__pageheader_brand"
-          />
-        </Link>
-      }
-      logoComponent="div"
-      headerTools={headerTools()}
-    />
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label={t("navigation")}>
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadBrand href={logoUrl}>
+        <img
+          src={environment.resourceUrl + logo}
+          id="masthead-logo"
+          alt={t("logo")}
+          aria-label={t("logo")}
+          className="keycloak__pageheader_brand"
+        />
+      </MastheadBrand>
+      <MastheadContent>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarItem
+              align={{ default: "alignRight" }}
+              visibility={{
+                default: "hidden",
+                md: "visible",
+              }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
+            >
+              <HelpHeader />
+            </ToolbarItem>
+            <ToolbarItem
+              align={{ default: "alignLeft" }}
+              visibility={{
+                md: "hidden",
+              }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
+            >
+              <KebabDropdown />
+            </ToolbarItem>
+            <ToolbarItem
+              visibility={{
+                default: "hidden",
+                md: "visible",
+              }} /** this user dropdown is hidden on mobile sizes */
+            >
+              <UserDropdown />
+            </ToolbarItem>
+            <ToolbarItem
+              variant="overflow-menu"
+              align={{ default: "alignRight" }}
+              className="pf-v5-u-m-0-on-lg"
+            >
+              <Avatar
+                src={picture || environment.resourceUrl + "/img_avatar.svg"}
+                alt={t("avatarImage")}
+                aria-label={t("avatarImage")}
+              />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
   );
 };