Merge pull request #79 from launchrctl/improvements

Frontend improvements.
launchrctl · Sep 11, 2024 · 5c3dfbb · 5c3dfbb
2 parents baf6b60 + 52b5bc6
commit 5c3dfbb
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 7 deletions.
diff --git a/client/index.html b/client/index.html
@@ -8,7 +8,7 @@
     <!-- @todo use launchr app name-->
     <meta
       name="description"
-      content="refine | Build your React-based CRUD applications, without constraints."
+      content="Platform | actions web ui"
     />
     <meta
       data-rh="true"
@@ -22,7 +22,7 @@
     />
     <!-- @todo use launchr app name-->
     <title>
-      refine - Build your React-based CRUD applications, without constraints.
+      Platform
     </title>
   </head>
   <body>

diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git 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,
@@ -25,10 +26,19 @@ import { FlowShow } from './pages/flow'
 import { dataProvider as launchrDataProvider } from './rest-data-provider'
 import { ThemeProvider } from './ThemeProvider'
 import { getApiUrl } from './utils/app-urls-resolver'
+import { getCustomisation, setCustomisation } from './utils/page-customisation'
 
 const apiUrl = getApiUrl()
 
+const customTitleHandler = () => {
+  return getCustomisation()?.plasmactl_web_ui_platform_page_name ?? 'Platform'
+}
+
 export function App() {
+  useEffect(() => {
+    setCustomisation()
+  }, [])
+
   return (
     <AppProvider>
       <ActionProvider>
@@ -82,10 +92,9 @@ export function App() {
                     <Route path="*" element={<ErrorComponent />} />
                   </Route>
                 </Routes>
-
                 <RefineKbar />
                 <UnsavedChangesNotifier />
-                <DocumentTitleHandler />
+                <DocumentTitleHandler handler={customTitleHandler} />
               </Refine>
             </ThemeProvider>
           </RefineKbarProvider>

diff --git a/client/src/components/layout/Title.tsx b/client/src/components/layout/Title.tsx
@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next'
 
 import Logo from '/images/logo.svg'
 
+import { getCustomisation } from '../../utils/page-customisation'
+
 const defaultText = import.meta.env.VITE_APP_NAME
 
 export const ThemedTitleV2: FC<RefineLayoutThemedTitleProps> = ({
@@ -20,6 +22,9 @@ export const ThemedTitleV2: FC<RefineLayoutThemedTitleProps> = ({
 
   const ActiveLink = routerType === 'legacy' ? LegacyLink : Link
 
+  const logoUrl = getCustomisation()?.plasmactl_web_ui_platform_logo ?? Logo
+  const logoText = getCustomisation()?.plasmactl_web_ui_platform_header_name ?? text
+
   return (
     <MuiLink
       to="/"
@@ -32,16 +37,17 @@ export const ThemedTitleV2: FC<RefineLayoutThemedTitleProps> = ({
         ...wrapperStyles,
       }}
     >
-      <img src={Logo} width="24" height="24" alt={t('Logo')} />
+      <img src={logoUrl} width="24" height="24" alt={t('Logo')} />
       <Typography
         variant="h5"
         fontWeight={700}
         color="text.primary"
         fontSize="15px"
         textOverflow="ellipsis"
         overflow="hidden"
+        sx={{ textTransform: 'uppercase' }}
       >
-        {text}
+        {logoText}
       </Typography>
     </MuiLink>
   )

diff --git a/client/src/utils/helpers.tsx b/client/src/utils/helpers.tsx
@@ -62,3 +62,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/page-customisation.ts b/client/src/utils/page-customisation.ts
@@ -0,0 +1,50 @@
+import { getApiUrl } from './app-urls-resolver'
+import { svgToBase64 } from './helpers'
+
+const apiUrl = getApiUrl()
+
+export const setCustomisation = async () => {
+  if (!localStorage.getItem('plasmactl_web_ui_customisation')) {
+    const response = await fetch(`${apiUrl}/customisation`, {
+      method: 'GET',
+    })
+    const data = await response.json()
+    localStorage.setItem('plasmactl_web_ui_customisation', JSON.stringify(data))
+  }
+
+  setFavicon()
+}
+
+export const getCustomisation = () => {
+  const customisation = localStorage.getItem('plasmactl_web_ui_customisation')
+  if (customisation) {
+    const parsed = JSON.parse(customisation)
+    if (parsed) {
+      if (parsed.plasmactl_web_ui_platform_favicon) {
+        parsed.plasmactl_web_ui_platform_favicon = svgToBase64(
+          parsed.plasmactl_web_ui_platform_favicon
+        )
+      }
+      if (parsed.plasmactl_web_ui_platform_logo) {
+        parsed.plasmactl_web_ui_platform_logo = svgToBase64(
+          parsed.plasmactl_web_ui_platform_logo
+        )
+      }
+      return parsed
+    }
+  }
+  return {}
+}
+
+export const setFavicon = () => {
+  const favicon = getCustomisation()?.plasmactl_web_ui_platform_favicon
+  if (favicon) {
+    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 = favicon
+    document.getElementsByTagName('head')[0]?.append(link)
+  }
+}
diff --git a/client/src/utils/react-flow-builder.tsx b/client/src/utils/react-flow-builder.tsx
@@ -5,6 +5,7 @@ import { GetListResponse } from '@refinedev/core'
 
 import { IFlowNodeType } from '../types'
 import { sentenceCase } from '../utils/helpers'
+import { getCustomisation } from '../utils/page-customisation'
 
 // Coefficient less than 0.51 behaves unpredictably.
 // Use coefficient between 0.51 till endless
@@ -469,9 +470,14 @@ export const getNodesAndEdges = (
     return []
   }
 
+  const nameText =
+    getCustomisation()?.plasmactl_web_ui_platform_name ?? 'Platform'
+
   const nodes: IFolder = {
     id: 'start',
-    data: { label: 'Platform name' },
+    data: {
+      label: nameText,
+    },
     type: 'node-start',
     folders: {},
     actions: {},