From a58a9a89d620178c9419c3c1c932b93db9c638f7 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Fri, 26 May 2023 12:57:25 +0200
Subject: [PATCH] Add href to brand of Masthead (#20597)

---
 js/apps/account-ui/src/root/Root.tsx       |  6 ++++--
 js/libs/keycloak-masthead/src/Masthead.tsx | 12 ++++--------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/js/apps/account-ui/src/root/Root.tsx b/js/apps/account-ui/src/root/Root.tsx
index f0dd578155..0d0de15a49 100644
--- a/js/apps/account-ui/src/root/Root.tsx
+++ b/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,
diff --git a/js/libs/keycloak-masthead/src/Masthead.tsx b/js/libs/keycloak-masthead/src/Masthead.tsx
index 980f36ff43..40f639d30c 100644
--- a/js/libs/keycloak-masthead/src/Masthead.tsx
+++ b/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={
-        <div onClick={onBrandLogoClick}>
-          <Brand {...brandProps} />
-        </div>
-      }
-      logoComponent="div"
+      logo={<Brand {...brandProps} />}
+      logoProps={{ href: brandHref }}
       headerTools={
         <PageHeaderTools>
           <PageHeaderToolsGroup>