diff --git a/client/public/favicon.ico b/client/public/favicon.ico index 2f05c5f..e9d3063 100644 Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ diff --git a/client/src/App.tsx b/client/src/App.tsx index 67f0355..dd79a19 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -5,6 +5,7 @@ import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier, } from '@refinedev/react-router-v6' +import { useEffect } from 'react' import { BrowserRouter, Navigate, @@ -24,10 +25,58 @@ import { ActionList, ActionShow } from './pages/actions' import { FlowShow } from './pages/flow' import { dataProvider as launchrDataProvider } from './rest-data-provider' import { ThemeProvider } from './ThemeProvider' +import { svgToBase64 } from './utils/helpers' const apiUrl = import.meta.env.VITE_API_URL +const fetchData = async () => { + const response = await fetch(`${apiUrl}/customisation`, { + method: 'GET', + }) + const data = await response.json() + if (data?.plasmactl_web_ui_platform_favicon) { + const base64Favicon = svgToBase64(data.plasmactl_web_ui_platform_favicon) + sessionStorage.setItem('plasmactl_web_ui_platform_favicon', base64Favicon) + setFavicon(base64Favicon) + + sessionStorage.setItem( + 'plasmactl_web_ui_platform_logo', + data?.plasmactl_web_ui_platform_logo + ) + } + if (data?.plasmactl_web_ui_platform_logo) { + const base64Logo = svgToBase64(data.plasmactl_web_ui_platform_logo) + sessionStorage.setItem('plasmactl_web_ui_platform_logo', base64Logo) + } + + if (data?.plasmactl_web_ui_platform_name) { + sessionStorage.setItem( + 'plasmactl_web_ui_platform_name', + data?.plasmactl_web_ui_platform_name + ) + } +} + +const setFavicon = (faviconUrl: string) => { + const link: HTMLLinkElement = + (document.querySelector("link[rel*='icon']") as HTMLLinkElement) || + (document.createElement('link') as HTMLLinkElement) + link.type = 'image/svg+xml' + link.rel = 'icon' + link.href = faviconUrl + document.getElementsByTagName('head')[0].append(link) +} + export function App() { + useEffect(() => { + const favicon = sessionStorage.getItem('plasmactl_web_ui_platform_favicon') + if (favicon) { + setFavicon(favicon) + } else { + fetchData() + } + }, []) + return ( diff --git a/client/src/components/layout/Title.tsx b/client/src/components/layout/Title.tsx index 45813fa..895a828 100644 --- a/client/src/components/layout/Title.tsx +++ b/client/src/components/layout/Title.tsx @@ -32,7 +32,12 @@ export const ThemedTitleV2: FC = ({ ...wrapperStyles, }} > - {t('Logo')} + {t('Logo')} = ({ fontSize="15px" textOverflow="ellipsis" overflow="hidden" + sx={{ textTransform: 'uppercase' }} > - {text} + {sessionStorage.getItem('plasmactl_web_ui_platform_name') || text} ) diff --git a/client/src/utils/helpers.tsx b/client/src/utils/helpers.tsx index 165bc37..29e1129 100644 --- a/client/src/utils/helpers.tsx +++ b/client/src/utils/helpers.tsx @@ -46,3 +46,12 @@ export const extractDateTimeFromId = (id: string) => { return formattedDate } + +export const svgToBase64 = (svg: string) => { + const base64 = btoa( + encodeURIComponent(svg).replaceAll(/%([\dA-F]{2})/g, (_, p1) => + String.fromCodePoint(Number.parseInt(p1, 16)) + ) + ) + return `data:image/svg+xml;base64,${base64}` +} diff --git a/client/src/utils/react-flow-builder.tsx b/client/src/utils/react-flow-builder.tsx index 1ca7bb3..45ac1b5 100644 --- a/client/src/utils/react-flow-builder.tsx +++ b/client/src/utils/react-flow-builder.tsx @@ -471,7 +471,11 @@ export const getNodesAndEdges = ( const nodes: IFolder = { id: 'start', - data: { label: 'Platform name' }, + data: { + label: + sessionStorage.getItem('plasmactl_web_ui_platform_name') || + 'Platform name', + }, type: 'node-start', folders: {}, actions: {},