Allow changing admin console logo and favicon from theme.properties (#20201)

* Allow changing admin console logo and favicon from theme.properties
Fixes #19968

* Make isRunningAsTheme the last env prop.

js/apps/admin-ui/pom.xml

@@ -115,13 +115,13 @@
                             <token>href="./</token>
                             <value>href="${resourceUrl}/</value>
                         </replacement>
+                        <replacement>
+                            <token><![CDATA[<link rel="icon" type="image/svg+xml" href="${resourceUrl}/favicon.svg" />]]></token>
+                            <value xml:space="preserve"><![CDATA[<link rel="icon" type="${properties.favIconType!"image/svg+xml"}" href="${resourceUrl}${properties.favIcon!"/favicon.svg"}" />]]></value>
+                        </replacement>
                         <replacement>
                             <token><![CDATA[<title>Keycloak Administration UI</title>]]></token>
-                            <value xml:space="preserve">
-<![CDATA[
-    <title>${properties.title!"Keycloak Administration UI"}</title>
-]]>
-</value>
+                            <value xml:space="preserve"><![CDATA[<title>${properties.title!"Keycloak Administration UI"}</title>]]></value>
                         </replacement>
                         <replacement>
                             <token><![CDATA[</body>]]></token>
@@ -136,6 +136,8 @@
       "resourceUrl": "${resourceUrl}",
       "masterRealm": "${masterRealm}",
       "resourceVersion": "${resourceVersion}",
+      "logo": "${properties.logo!""}",
+      "logoUrl": "${properties.logoUrl!""}",
       "isRunningAsTheme": true
     }
   </script>

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

@@ -172,13 +172,18 @@ export const Header = () => {
     );
   };
 
+  const logo = environment.logo ? environment.logo : "/logo.svg";
+  const logoUrl = environment.logoUrl
+    ? environment.logoUrl
+    : toDashboard({ realm });
+
   return (
     <PageHeader
       showNavToggle
       logo={
-        <Link to={toDashboard({ realm })}>
+        <Link to={logoUrl}>
           <Brand
-            src={environment.resourceUrl + "/logo.svg"}
+            src={environment.resourceUrl + logo}
             id="masthead-logo"
             alt="Logo"
             className="keycloak__pageheader_brand"

js/apps/admin-ui/src/dashboard/Dashboard.tsx

@@ -45,11 +45,13 @@ import "./dashboard.css";
 const EmptyDashboard = () => {
   const { t } = useTranslation("dashboard");
   const { realm } = useRealm();
+  const brandImage = environment.logo ? environment.logo : "/icon.svg";
+
   return (
     <PageSection variant="light">
       <EmptyState variant="large">
         <Brand
-          src={environment.resourceUrl + "/icon.svg"}
+          src={environment.resourceUrl + brandImage}
           alt="Keycloak icon"
           className="keycloak__dashboard_icon"
         />

js/apps/admin-ui/src/environment.ts

@@ -15,6 +15,10 @@ export type Environment = {
   resourceVersion: string;
   /** Indicates if the application is running as a Keycloak theme. */
   isRunningAsTheme: boolean;
+  /** Indicates the src for the Brand image */
+  logo: string;
+  /** Indicates the url to be followed when Brand image is clicked */
+  logoUrl: string;
 };
 
 // During development the realm can be passed as a query parameter when redirecting back from Keycloak.
@@ -30,6 +34,8 @@ const defaultEnvironment: Environment = {
   masterRealm: "master",
   resourceVersion: "unknown",
   isRunningAsTheme: false,
+  logo: "/logo.svg",
+  logoUrl: "",
 };
 
 // Merge the default and injected environment variables together.