fix(ui): update config at runtime to apply branding

Signed-off-by: Yi Cai <yicai@redhat.com>
janus-idp · Jul 11, 2024 · fd34a50 · fd34a50
1 parent 1d2edb1
commit fd34a50
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/packages/app/public/index.html b/packages/app/public/index.html
@@ -35,10 +35,7 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <link
-      rel="icon"
-      href="<%= config.getOptionalString('app.branding.iconLogo') %>"
-    />
+    <link rel="icon" id="dynamic-favicon" href="/favicon.ico" />
     <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
   </head>
   <body>

diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx
@@ -27,6 +27,7 @@ import { entityPage } from '../catalog/EntityPage';
 import { HomePage } from '../home/HomePage';
 import { LearningPaths } from '../learningPaths/LearningPathsPage';
 import { SearchPage } from '../search/SearchPage';
+import ConfigUpdater from '../Root/ConfigUpdater';
 
 const AppBase = () => {
   const {
@@ -73,6 +74,7 @@ const AppBase = () => {
       <AlertDisplay />
       <OAuthRequestDialog />
       <AppRouter>
+        <ConfigUpdater />
         <Root>
           <FlatRoutes>
             {dynamicRoutes.filter(({ path }) => path === '/').length === 0 && (

diff --git a/packages/app/src/components/Root/ConfigUpdater.tsx b/packages/app/src/components/Root/ConfigUpdater.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
+
+const ConfigUpdater: React.FC = () => {
+  const configApi = useApi(configApiRef);
+
+  useEffect(() => {
+    const updateConfig = () => {
+      const logoIconBase64URI = configApi.getOptionalString(
+        'app.branding.iconLogo',
+      );
+
+      if (logoIconBase64URI) {
+        const favicon = document.getElementById(
+          'dynamic-favicon',
+        ) as HTMLLinkElement;
+        if (favicon) {
+          favicon.href = logoIconBase64URI;
+        } else {
+          const newFavicon = document.createElement('link');
+          newFavicon.id = 'dynamic-favicon';
+          newFavicon.rel = 'icon';
+          newFavicon.href = logoIconBase64URI;
+          document.head.appendChild(newFavicon);
+        }
+      }
+    };
+
+    updateConfig();
+  }, [configApi]);
+
+  return null;
+};
+
+export default ConfigUpdater;