Merge pull request #133 from Loxeris/feat_efficient_dashboard

feat: App title in the header and current app selected in the Drawer

src/components/applications/JobMonitor.tsx

@@ -1,22 +1,16 @@
 "use client";
 import * as React from "react";
-import CssBaseline from "@mui/material/CssBaseline";
-import { Box } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { JobDataTable } from "../ui/JobDataTable";
-import Dashboard from "../layout/Dashboard";
-import { useMUITheme } from "@/hooks/theme";
+import ApplicationHeader from "@/components/ui/ApplicationHeader";
 
 /**
  * Build the Job Monitor application
  * @returns Job Monitor content
  */
 export default function JobMonitor() {
-  const theme = useMUITheme();
-
   return (
     <div>
-      <h2>Job Monitor</h2>
+      <ApplicationHeader type="Job Monitor" />
       <JobDataTable />
     </div>
   );

src/components/applications/UserDashboard.tsx

@@ -1,12 +1,8 @@
 "use client";
 import * as React from "react";
-import CssBaseline from "@mui/material/CssBaseline";
-import { Box } from "@mui/material";
-import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
-import Dashboard from "../layout/Dashboard";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
-import { useMUITheme } from "@/hooks/theme";
+import ApplicationHeader from "@/components/ui/ApplicationHeader";
 
 /**
  * Build the User Dashboard page
@@ -22,6 +18,7 @@ export default function UserDashboard() {
 
   return (
     <div>
+      <ApplicationHeader type="Dashboard" />
       <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
 
       <p>To start with, select an application in the side bar</p>

src/components/ui/ApplicationHeader.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Stack, Typography } from "@mui/material";
+import { useApplicationTitle } from "@/hooks/application";
+
+/**
+ * Application Header component with the application title and type
+ * @param type the type of the application
+ * @returns the application header
+ */
+export default function ApplicationHeader({ type }: { type: string }) {
+  const appTitle = useApplicationTitle();
+  return (
+    <header>
+      <Stack spacing={2} direction={"row"} alignItems={"end"}>
+        {appTitle && (
+          <Typography
+            color="text.primary"
+            variant={"h4"}
+            fontWeight={"bold"}
+            width={"fit-content"}
+          >
+            {appTitle}
+          </Typography>
+        )}
+        <Typography color="text.secondary" variant={"h4"} width={"fit-content"}>
+          {type}
+        </Typography>
+      </Stack>
+    </header>
+  );
+}

src/components/ui/DrawerItem.tsx

@@ -23,6 +23,7 @@ import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { ThemeProvider } from "@/contexts/ThemeProvider";
 import { useMUITheme } from "@/hooks/theme";
 import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
+import { useApplicationId } from "@/hooks/application";
 
 /**
  * Represents a drawer item component.
@@ -50,6 +51,8 @@ export default function DrawerItem({
   // Represents the closest edge to the mouse cursor
   const [closestEdge, setClosestEdge]: any = useState<Edge | null>(null);
 
+  const appId = useApplicationId();
+
   useEffect(() => {
     if (!dragRef.current || !handleRef.current) return;
     const element = dragRef.current;
@@ -148,6 +151,7 @@ export default function DrawerItem({
         onClick={() => setParam("appId", id)}
         sx={{ pl: 2, borderRadius: 2, pr: 1 }}
         ref={dragRef}
+        selected={appId === id}
       >
         <ListItemIcon>
           <Icon component={icon} />

src/hooks/application.tsx

@@ -0,0 +1,37 @@
+import { useContext, useMemo } from "react";
+import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
+import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
+
+/**
+ * Custom hook to access the application id from the URL
+ * @returns the application id
+ */
+export function useApplicationId() {
+  const { getParam } = useSearchParamsUtils();
+
+  return useMemo(() => {
+    return getParam("appId");
+  }, [getParam]);
+}
+
+/**
+ * Custom hook to access the application title based on the application id
+ * @returns the application title
+ */
+export function useApplicationTitle() {
+  const [sections] = useContext(ApplicationsContext);
+  const appId = useApplicationId();
+
+  return useMemo(() => {
+    if (!sections || !appId) return null;
+
+    const app = sections.reduce(
+      (acc, section) => {
+        if (acc) return acc;
+        return section.items.find((app) => app.id === appId);
+      },
+      undefined as { title: string } | undefined,
+    );
+    return app?.title;
+  }, [sections, appId]);
+}

src/hooks/theme.tsx

@@ -170,6 +170,18 @@ export const useMUITheme = () => {
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected, &.Mui-selected:hover": {
+            backgroundColor:
+              muiTheme.palette.mode === "light"
+                ? lighten(grey[200], 0.2)
+                : darken(grey[800], 0.2),
+          },
+        },
+      },
+    },
   };
 
   return muiTheme;

test/e2e/jobMonitor.cy.ts

@@ -23,7 +23,7 @@ describe("Job Monitor", () => {
   });
 
   it("should render the drawer", () => {
-    cy.get("h2").contains("Job Monitor").should("be.visible");
+    cy.get("header").contains("Job Monitor").should("be.visible");
   });
 
   it("should handle filter addition", () => {

test/unit-tests/UserDashboard.test.tsx

@@ -15,6 +15,25 @@ jest.mock("@axa-fr/react-oidc", () => ({
   useOidcAccessToken: jest.fn(),
 }));
 
+jest.mock("jsoncrush", () => ({
+  crush: jest.fn().mockImplementation((data) => `crushed-${data}`),
+  uncrush: jest.fn().mockImplementation((data) => data.replace("crushed-", "")),
+}));
+
+const params = new URLSearchParams();
+
+jest.mock("next/navigation", () => {
+  return {
+    usePathname: () => ({
+      pathname: "",
+    }),
+    useRouter: () => ({
+      push: jest.fn(),
+    }),
+    useSearchParams: () => params,
+  };
+});
+
 describe("<UserDashboard />", () => {
   it("renders not authenticated message when accessTokenPayload is not defined", () => {
     (useOidc as jest.Mock).mockReturnValue({ isAuthenticated: false });