Improvements to app shell components

apps/i15-1/package.json

@@ -15,7 +15,7 @@
     "@atlas/blueapi-query": "workspace:*",
     "@atlas/pvws-config": "workspace:*",
     "@diamondlightsource/cs-web-lib": "0.9.5",
-    "@diamondlightsource/sci-react-ui": "^0.4.0",
+    "@diamondlightsource/sci-react-ui": "file:../../diamondlightsource-sci-react-ui-0.4.1.tgz",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "<7.0.0",
     "@tanstack/react-query": "^5.90.21",

apps/i15-1/src/main.tsx

@@ -1,4 +1,4 @@
-import { DiamondTheme } from "@diamondlightsource/sci-react-ui";
+import { DiamondDSTheme } from "@diamondlightsource/sci-react-ui";
 import { RouterProvider } from "react-router-dom";
 import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
@@ -20,7 +20,7 @@ const api = createApi("/api");
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
     <StrictMode>
-      <AppProviders api={api} theme={DiamondTheme}>
+      <AppProviders api={api} theme={DiamondDSTheme}>
         <RouterProvider router={router} />
       </AppProviders>
     </StrictMode>,

packages/app-shell/src/Layout.tsx

@@ -1,18 +1,34 @@
+import { Toolbar } from "@mui/material";
 import Box from "@mui/material/Box";
-import { Outlet } from "react-router-dom";
-import { SideNav } from "./SideNav";
+import { NavLink, Outlet } from "react-router-dom";
+import { routePath, type RouterProps } from "./Router";
+import { SidebarNav, type Navigation } from "./SidebarNav";
 import { TopBar } from "./TopBar";
-import type { RouterProps } from "./Router";
 import { usePersistentDrawerState } from "./usePersistentDrawerState";
-import { Toolbar } from "@mui/material";
+
+export function toNavItemGroups(routerProps: RouterProps): Navigation {
+  return routerProps.navigation.map((group) => ({
+    name: group.name,
+    navItems: group.sections.map((section) => ({
+      label: section.name,
+      icon: section.icon,
+      linkProps: {
+        to: routePath(section),
+        component: NavLink,
+      },
+    })),
+  }));
+}
 
 export function Layout(props: RouterProps) {
   const { open, setOpen } = usePersistentDrawerState();
 
+  const navigation = toNavItemGroups(props);
+
   return (
     <Box sx={{ display: "flex" }}>
       <TopBar title={props.title} open={open} setOpen={setOpen} />
-      <SideNav navigation={props.navigation} open={open} />
+      <SidebarNav navigation={navigation} open={open} />
       <Box component="main" sx={{ flexGrow: 1 }}>
         {/* The Toolbar acts as a spacer,
             same size as the toolbar used inside the TopBar's AppBar*/}

packages/app-shell/src/Router.tsx

@@ -55,7 +55,7 @@ export function sanitisePath(name: string) {
   return name.toLowerCase().replace(/\s/g, "_");
 }
 
-function routePath(route: LabelledRoute) {
+export function routePath(route: LabelledRoute) {
   return route.path ?? sanitisePath(route.name);
 }
 

packages/app-shell/src/SideNav.test.tsx → packages/app-shell/src/SidebarNav.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, userEvent } from "@atlas/vitest-conf";
-import { SideNav } from "./SideNav";
-import type { Section, SectionGroup } from "./Router";
+import { SidebarNav } from "./SidebarNav";
+import type { SectionGroup } from "./Router";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
-describe("SideNav", () => {
+describe("SidebarNav", () => {
   const groups: SectionGroup[] = [
     {
       sections: [
@@ -24,13 +24,22 @@ describe("SideNav", () => {
         },
       ],
     },
+    {
+      sections: [
+        {
+          name: "Log",
+          icon: <div data-testid="navicon4" />,
+          pages: [],
+        },
+      ],
+    },
   ];
 
   function renderSidenav(open: boolean) {
     const router = createMemoryRouter([
       {
         path: "/",
-        element: <SideNav navigation={groups} open={open} />,
+        element: <SidebarNav navigation={groups} open={open} />,
       },
     ]);
     render(<RouterProvider router={router} />);
@@ -47,7 +56,7 @@ describe("SideNav", () => {
       const label = screen.getByText(route.name);
       expect(label).toBeVisible();
     });
-    ["navicon1", "navicon2", "navicon3"].forEach((id) =>
+    ["navicon1", "navicon2", "navicon3", "navicon4"].forEach((id) =>
       expect(screen.getByTestId(id)).toBeVisible(),
     );
   });
@@ -62,7 +71,7 @@ describe("SideNav", () => {
       expect(label).toBeInTheDocument(); // label exists but
       expect(label).not.toBeVisible(); // not visible
     });
-    ["navicon1", "navicon2", "navicon3"].forEach((id) =>
+    ["navicon1", "navicon2", "navicon3", "navicon4"].forEach((id) =>
       expect(screen.getByTestId(id)).toBeVisible(),
     );
   });
@@ -91,4 +100,10 @@ describe("SideNav", () => {
     });
     expect(tooltip).not.toBeInTheDocument();
   });
+
+  it("creates divider between nav sections", () => {
+    renderSidenav(true);
+    const divider = screen.queryByRole("separator");
+    expect(divider).toBeInTheDocument();
+  });
 });