feat: ease component customization with props

Loxeris · Jun 4, 2024 · 5cc1e66 · 5cc1e66
1 parent d441080
commit 5cc1e66
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 64 deletions.
diff --git a/packages/diracx-web-components/src/components/applications/JobMonitor.tsx b/packages/diracx-web-components/src/components/applications/JobMonitor.tsx
@@ -5,12 +5,17 @@ import ApplicationHeader from "@/components/ui/ApplicationHeader";
 
 /**
  * Build the Job Monitor application
+ * @param headerSize - The size of the header, optional
  * @returns Job Monitor content
  */
-export default function JobMonitor() {
+export default function JobMonitor({
+  headerSize,
+}: {
+  headerSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}) {
   return (
     <div>
-      <ApplicationHeader type="Job Monitor" />
+      <ApplicationHeader type="Job Monitor" size={headerSize} />
       <JobDataTable />
     </div>
   );

diff --git a/packages/diracx-web-components/src/components/applications/LoginForm.tsx b/packages/diracx-web-components/src/components/applications/LoginForm.tsx
@@ -24,9 +24,14 @@ import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 
 /**
  * Login form
+ * @param logoURL the URL of the logo, optional
  * @returns a form
  */
-export function LoginForm() {
+export function LoginForm({
+  logoURL = "/DIRAC-logo-minimal.png",
+}: {
+  logoURL?: string;
+}) {
   const theme = useMUITheme();
   const router = useRouter();
   const { data, error, isLoading } = useMetadata();
@@ -139,12 +144,7 @@ export function LoginForm() {
               paddingBottom: "10%",
             }}
           >
-            <Image
-              src="/DIRAC-logo-minimal.png"
-              alt="DIRAC logo"
-              width={150}
-              height={150}
-            />
+            <Image src={logoURL} alt="DIRAC logo" width={150} height={150} />
           </Box>
           {singleVO ? (
             <Typography

diff --git a/packages/diracx-web-components/src/components/applications/UserDashboard.tsx b/packages/diracx-web-components/src/components/applications/UserDashboard.tsx
@@ -6,9 +6,14 @@ import ApplicationHeader from "@/components/ui/ApplicationHeader";
 
 /**
  * Build the User Dashboard page
+ * @param headerSize - The size of the header, optional
  * @returns User Dashboard content
  */
-export default function UserDashboard() {
+export default function UserDashboard({
+  headerSize,
+}: {
+  headerSize?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}) {
   const { configuration } = useOIDCContext();
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
@@ -18,7 +23,7 @@ export default function UserDashboard() {
 
   return (
     <div>
-      <ApplicationHeader type="Dashboard" />
+      <ApplicationHeader type="Dashboard" size={headerSize} />
       <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
 
       <p>To start with, select an application in the side bar</p>

diff --git a/packages/diracx-web-components/src/components/layout/Dashboard.tsx b/packages/diracx-web-components/src/components/layout/Dashboard.tsx
@@ -15,13 +15,15 @@ import { useMUITheme } from "@/hooks/theme";
 
 interface DashboardProps {
   children: React.ReactNode;
+  drawerWidth?: number;
+  logoURL?: string;
 }
 
 /**
  * Build a side bar on the left containing the available sections as well as a top bar.
  * The side bar is expected to collapse if displayed on a small screen
  *
- * @param props - children
+ * @param props - children, drawerWidth, logoURL
  * @return an dashboard layout
  */
 export default function Dashboard(props: DashboardProps) {
@@ -33,7 +35,7 @@ export default function Dashboard(props: DashboardProps) {
   };
 
   /** Drawer width */
-  const drawerWidth = 240;
+  const drawerWidth = props.drawerWidth || 240;
 
   return (
     <Box sx={{ display: "flex" }}>
@@ -87,12 +89,14 @@ export default function Dashboard(props: DashboardProps) {
             mobileOpen={mobileOpen}
             width={drawerWidth}
             handleDrawerToggle={handleDrawerToggle}
+            logoURL={props.logoURL}
           />
           <DashboardDrawer
             variant="permanent"
             mobileOpen={mobileOpen}
             width={drawerWidth}
             handleDrawerToggle={handleDrawerToggle}
+            logoURL={props.logoURL}
           />
         </Box>
         <Box

diff --git a/packages/diracx-web-components/src/components/ui/ApplicationDialog.tsx b/packages/diracx-web-components/src/components/ui/ApplicationDialog.tsx
@@ -10,7 +10,7 @@ import {
   IconButton,
 } from "@mui/material";
 import { Close } from "@mui/icons-material";
-import { applicationList } from "../applications/ApplicationList";
+import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
 
 /**
  * Renders a dialog component for creating a new application.
@@ -31,6 +31,7 @@ export default function AppDialog({
   handleCreateApp: (name: string, icon: ComponentType) => void;
 }) {
   const [appType, setAppType] = React.useState("");
+  const applicationList = React.useContext(ApplicationsContext)[2];
   return (
     <Dialog
       open={appDialogOpen}

diff --git a/packages/diracx-web-components/src/components/ui/ApplicationHeader.tsx b/packages/diracx-web-components/src/components/ui/ApplicationHeader.tsx
@@ -5,24 +5,31 @@ import { useApplicationTitle } from "@/hooks/application";
 /**
  * Application Header component with the application title and type
  * @param type the type of the application
+ * @param size the size of the header, default is h4
  * @returns the application header
  */
-export default function ApplicationHeader({ type }: { type: string }) {
+export default function ApplicationHeader({
+  type,
+  size = "h4",
+}: {
+  type: string;
+  size?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}) {
   const appTitle = useApplicationTitle();
   return (
     <header>
       <Stack spacing={2} direction={"row"} alignItems={"end"}>
         {appTitle && (
           <Typography
             color="text.primary"
-            variant={"h4"}
+            variant={size}
             fontWeight={"bold"}
             width={"fit-content"}
           >
             {appTitle}
           </Typography>
         )}
-        <Typography color="text.secondary" variant={"h4"} width={"fit-content"}>
+        <Typography color="text.secondary" variant={size} width={"fit-content"}>
           {type}
         </Typography>
       </Stack>

diff --git a/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx b/packages/diracx-web-components/src/components/ui/DashboardDrawer.tsx
@@ -34,6 +34,7 @@ interface DashboardDrawerProps {
   mobileOpen: boolean;
   width: number;
   handleDrawerToggle: ReactEventHandler;
+  logoURL?: string;
 }
 
 /**
@@ -69,6 +70,8 @@ export default function DashboardDrawer(props: DashboardDrawerProps) {
   // Each section has an associated icon and path.
   const [userSections, setSections] = useContext(ApplicationsContext);
 
+  const logoURL = props.logoURL || "/DIRAC-logo.png";
+
   const theme = useMUITheme();
 
   useEffect(() => {
@@ -369,12 +372,7 @@ export default function DashboardDrawer(props: DashboardDrawerProps) {
               backgroundColor: theme.palette.background.default,
             }}
           >
-            <Image
-              src="/DIRAC-logo.png"
-              alt="DIRAC logo"
-              width={150}
-              height={45}
-            />
+            <Image src={logoURL} alt="DIRAC logo" width={150} height={45} />
           </Toolbar>
           {/* Map over user sections and render them as list items in the drawer. */}
           <List>

diff --git a/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx b/packages/diracx-web-components/src/contexts/ApplicationsProvider.tsx
@@ -1,22 +1,38 @@
-import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
 import React, { createContext, useEffect, useState } from "react";
+import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
 import JSONCrush from "jsoncrush";
 import { useOidc } from "@axa-fr/react-oidc";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 import { applicationList } from "@/components/applications/ApplicationList";
 import { UserSection } from "@/types/UserSection";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
+import ApplicationConfig from "@/types/ApplicationConfig";
 
 // Create a context for the userSections state
 export const ApplicationsContext = createContext<
-  [UserSection[], React.Dispatch<React.SetStateAction<UserSection[]>>]
->([[], () => {}]);
+  [
+    UserSection[],
+    React.Dispatch<React.SetStateAction<UserSection[]>>,
+    ApplicationConfig[],
+  ]
+>([[], () => {}, []]);
 
-// Create the ApplicationsProvider component
+/**
+ * Provides the applications context to its children components.
+ *
+ * @param children - The child components to be wrapped by the provider.
+ * @param appList - The list of application configurations.
+ * @param defaultSections - The default user sections.
+ * @returns The applications provider.
+ */
 export const ApplicationsProvider = ({
   children,
+  appList = applicationList,
+  defaultSections,
 }: {
   children: React.ReactNode;
+  appList?: ApplicationConfig[];
+  defaultSections?: UserSection[];
 }) => {
   const [userSections, setSections] = useState<UserSection[]>([]);
 
@@ -36,9 +52,8 @@ export const ApplicationsProvider = ({
             section.items = section.items.map((item: any) => {
               return {
                 ...item,
-                //get icon from ApplicationList
-                icon: applicationList.find((app) => app.name === item.type)
-                  ?.icon,
+                //get icon from appList
+                icon: appList.find((app) => app.name === item.type)?.icon,
               };
             });
             return section;
@@ -49,40 +64,42 @@ export const ApplicationsProvider = ({
         console.error("Error parsing user sections : ", uncrushed, e);
       }
     } else {
-      setSections([
-        {
-          title: "Dashboard",
-          extended: true,
-          items: [
-            {
-              title: "Dashboard",
-              type: "Dashboard",
-              id: "Dashboard0",
-              icon: Dashboard,
-            },
-            {
-              title: "Job Monitor",
-              type: "Job Monitor",
-              id: "JobMonitor0",
-              icon: Monitor,
-            },
-          ],
-        },
-        {
-          title: "Other",
-          extended: false,
-          items: [
-            {
-              title: "File Catalog",
-              type: "File Catalog",
-              id: "FileCatatlog0",
-              icon: FolderCopy,
-            },
-          ],
-        },
-      ]);
+      setSections(
+        defaultSections || [
+          {
+            title: "Dashboard",
+            extended: true,
+            items: [
+              {
+                title: "Dashboard",
+                type: "Dashboard",
+                id: "Dashboard0",
+                icon: Dashboard,
+              },
+              {
+                title: "Job Monitor",
+                type: "Job Monitor",
+                id: "JobMonitor0",
+                icon: Monitor,
+              },
+            ],
+          },
+          {
+            title: "Other",
+            extended: false,
+            items: [
+              {
+                title: "File Catalog",
+                type: "File Catalog",
+                id: "FileCatalog0",
+                icon: FolderCopy,
+              },
+            ],
+          },
+        ],
+      );
     }
-  }, [getParam]);
+  }, [getParam, appList, defaultSections]);
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -104,7 +121,7 @@ export const ApplicationsProvider = ({
   }, [isAuthenticated, setParam, userSections]);
 
   return (
-    <ApplicationsContext.Provider value={[userSections, setSections]}>
+    <ApplicationsContext.Provider value={[userSections, setSections, appList]}>
       {children}
     </ApplicationsContext.Provider>
   );