From efb21e4cd4574380e5d4045262153339e3383060 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Tue, 9 Jul 2024 11:27:35 -0400 Subject: [PATCH] fix(ui): update config at runtime to apply branding Signed-off-by: Yi Cai --- packages/app/public/index.html | 5 +-- .../app/src/components/AppBase/AppBase.tsx | 2 ++ .../app/src/components/Root/ConfigUpdater.tsx | 35 +++++++++++++++++++ 3 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 packages/app/src/components/Root/ConfigUpdater.tsx diff --git a/packages/app/public/index.html b/packages/app/public/index.html index e91310924..51f65c969 100644 --- a/packages/app/public/index.html +++ b/packages/app/public/index.html @@ -35,10 +35,7 @@ href="<%= publicPath %>/safari-pinned-tab.svg" color="#5bbad5" /> - + <%= config.getOptionalString('app.title') ?? 'Backstage' %> diff --git a/packages/app/src/components/AppBase/AppBase.tsx b/packages/app/src/components/AppBase/AppBase.tsx index c67647175..061a12fca 100644 --- 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 = () => { + {dynamicRoutes.filter(({ path }) => path === '/').length === 0 && ( diff --git a/packages/app/src/components/Root/ConfigUpdater.tsx b/packages/app/src/components/Root/ConfigUpdater.tsx new file mode 100644 index 000000000..27e49fcd7 --- /dev/null +++ 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;