Add href to brand of Masthead (#20597)

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

@@ -6,14 +6,14 @@ import {
 } from "keycloak-masthead";
 import { Suspense, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Outlet } from "react-router-dom";
+import { Outlet, useHref } from "react-router-dom";
 import { AlertProvider } from "ui-shared";
 
+import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
 import { environment } from "../environment";
 import { keycloak } from "../keycloak";
 import { joinPath } from "../utils/joinPath";
 import { PageNav } from "./PageNav";
-import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
 
 import style from "./Root.module.css";
 
@@ -37,6 +37,7 @@ const ReferrerLink = () => {
 
 export const Root = () => {
   const { t } = useTranslation();
+  const indexHref = useHref("/");
 
   const translations = useMemo<Translations>(
     () => ({
@@ -57,6 +58,7 @@ export const Root = () => {
             features={{ hasManageAccount: false }}
             showNavToggle
             brand={{
+              href: indexHref,
               src: joinPath(environment.resourceUrl, "logo.svg"),
               alt: t("logo"),
               className: style.brand,

js/libs/keycloak-masthead/src/Masthead.tsx

@@ -19,7 +19,7 @@ import { loggedInUserName } from "./util";
 import { DefaultAvatar } from "./DefaultAvatar";
 
 type BrandLogo = BrandProps & {
-  onClick?: () => void;
+  href: string;
 };
 
 type KeycloakMastheadProps = PageHeaderProps & {
@@ -37,7 +37,7 @@ type KeycloakMastheadProps = PageHeaderProps & {
 };
 
 const KeycloakMasthead = ({
-  brand: { onClick: onBrandLogoClick, ...brandProps },
+  brand: { href: brandHref, ...brandProps },
   avatar,
   features: {
     hasLogout = true,
@@ -74,12 +74,8 @@ const KeycloakMasthead = ({
   return (
     <PageHeader
       {...rest}
-      logo={
+      logo={<Brand {...brandProps} />}
-        <div onClick={onBrandLogoClick}>
+      logoProps={{ href: brandHref }}
-          <Brand {...brandProps} />
-        </div>
-      }
-      logoComponent="div"
       headerTools={
         <PageHeaderTools>
           <PageHeaderToolsGroup>