feat: add support for logo in config

Author: rsbh

pkg/server/config.go

@@ -28,6 +28,7 @@ func (cfg Config) grpcAddr() string { return fmt.Sprintf("%s:%d", cfg.Host, cfg.
 type UIConfig struct {
 	Port  int    `yaml:"port" mapstructure:"port"`
 	Title string `yaml:"title" mapstructure:"title"`
+	Logo  string `yaml:"logo" mapstructure:"logo"`
 }
 
 type Config struct {

pkg/server/server.go

@@ -57,6 +57,7 @@ const (
 
 type UIConfigApiResponse struct {
 	Title string `json:"title"`
+	Logo  string `json:"logo"`
 }
 
 func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServerConfig Config) {
@@ -91,6 +92,7 @@ func ServeUI(ctx context.Context, logger log.Logger, uiConfig UIConfig, apiServe
 			w.Header().Set("Content-Type", "application/json")
 			confResp := UIConfigApiResponse{
 				Title: uiConfig.Title,
+				Logo:  uiConfig.Logo,
 			}
 			json.NewEncoder(w).Encode(confResp)
 		})

ui/src/components/page-title/index.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect } from "react";
 import { AppContext } from "~/contexts/App";
+import { defaultConfig } from "~/utils/constants";
 
 interface PageTitleProps {
   title?: string;
@@ -8,7 +9,7 @@ interface PageTitleProps {
 
 export default function PageTitle({ title, appName }: PageTitleProps) {
   const { config } = useContext(AppContext);
-  const titleAppName = appName || config?.title;
+  const titleAppName = appName || config?.title || defaultConfig?.title;
   const fullTitle = title ? `${title} | ${titleAppName}` : titleAppName;
 
   useEffect(() => {

ui/src/containers/login.tsx

@@ -5,6 +5,7 @@ import { Header, MagicLink } from "@raystack/frontier/react";
 import { useContext } from "react";
 import PageTitle from "~/components/page-title";
 import { AppContext } from "~/contexts/App";
+import { defaultConfig } from "~/utils/constants";
 
 export default function Login() {
   const { config } = useContext(AppContext);
@@ -31,13 +32,13 @@ export default function Login() {
               logo={
                 <Image
                   alt="logo"
-                  src="logo.svg"
+                  src={config?.logo || "logo.svg"}
                   width={80}
                   height={80}
                   style={{ borderRadius: "var(--pd-8)" }}
                 />
               }
-              title={`Login to ${config?.title}`}
+              title={`Login to ${config?.title || defaultConfig.title}`}
             />
             <MagicLink open />
           </Flex>

ui/src/contexts/App.tsx

@@ -12,16 +12,13 @@ import {
   V1Beta1Plan,
 } from "@raystack/frontier";
 import { useFrontier } from "@raystack/frontier/react";
+import { Config, defaultConfig } from "~/utils/constants";
 
 // TODO: Setting this to 1000 initially till APIs support filters and sorting.
 const page_size = 1000;
 
 type OrgMap = Record<string, V1Beta1Organization>;
 
-export interface Config {
-  title: string;
-}
-
 interface AppContextValue {
   orgMap: OrgMap;
   isAdmin: boolean;
@@ -34,10 +31,6 @@ interface AppContextValue {
   config: Config;
 }
 
-const defaultConfig: Config = {
-  title: "Frontier Admin",
-};
-
 const AppContextDefaultValue = {
   orgMap: {},
   isAdmin: false,

ui/src/utils/constants.ts

@@ -4,11 +4,19 @@ export const PERMISSIONS = {
   OrganizationNamespace: "app/organization",
 } as const;
 
-
 export const SUBSCRIPTION_STATUSES = [
-  {label: 'Active', value: 'active'},
-  {label: 'Trialing', value: 'trialing'},
-  {label: 'Past due', value: 'past_due'},
-  {label: 'Canceled', value: 'canceled'},
-  {label: 'Ended', value: 'ended'}
-]
+  { label: "Active", value: "active" },
+  { label: "Trialing", value: "trialing" },
+  { label: "Past due", value: "past_due" },
+  { label: "Canceled", value: "canceled" },
+  { label: "Ended", value: "ended" },
+];
+
+export interface Config {
+  title: string;
+  logo?: string;
+}
+
+export const defaultConfig: Config = {
+  title: "Frontier Admin",
+};