Add participant list to landing page (#27)

reports/src/capability/CapabilityTable.tsx

@@ -1,6 +1,15 @@
-import { Box, Breadcrumbs, Typography } from "@mui/material";
+import {
+  Box,
+  Breadcrumbs,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Typography,
+} from "@mui/material";
 import { Capability } from "./capabilityTypes";
-import { useMatches } from "react-router-dom";
+import { useMatches, useNavigate } from "react-router-dom";
 import { ReactNode } from "react";
 import { Report } from "./capabilityTypes";
 import { CapabilityTableHeader } from "./CapabilityTableHeader";
@@ -37,6 +46,7 @@ export const CapabilityTable = ({
   report,
   participantMissing,
 }: CapabilityTableProps) => {
+  const navigate = useNavigate();
   if (!capability) {
     return <span>Capability not found</span>;
   }
@@ -56,9 +66,22 @@ export const CapabilityTable = ({
         }}
       >
         {participantMissing ? (
-          <Typography variant="overline">
-            Select a participant in the top bar
-          </Typography>
+          <>
+            <Typography variant="h3" gutterBottom>
+              {report.participants?.length ? "Participants" : "Participant"}
+            </Typography>
+            <Paper>
+              <List>
+                {report.participants?.map((p, i) => (
+                  <ListItem key={i}>
+                    <ListItemButton onClick={() => navigate(`/${i}`)}>
+                      <ListItemText primary={p} />
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+            </Paper>
+          </>
         ) : (
           <>
             <CapabilityBreadcrumbs capability={capability} />

reports/src/capability/CapabilityTableHeader.tsx

@@ -1,19 +1,9 @@
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  IconButton,
-  SelectChangeEvent,
-} from "@mui/material";
+import { AppBar, Toolbar, Typography, IconButton, Box } from "@mui/material";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import { Capability, Report } from "./capabilityTypes";
 import { useTheme } from "../ThemeContext";
-import { useLocation, useNavigate } from "react-router-dom";
+import { ParticipantSelector } from "./ParticipantSelector";
 
 type CapabilityTableHeaderProps = {
   capability: Capability;
@@ -25,39 +15,18 @@ export const CapabilityTableHeader = ({
   report,
 }: CapabilityTableHeaderProps) => {
   const { colorMode, toggleColorMode } = useTheme();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const ussp = parseInt(location.pathname.split("/")[1]) || 0;
-
-  const handleUsspSelect = (event: SelectChangeEvent<number>) => {
-    const id = event.target.value;
-    navigate(`/${id}`);
-  };
   return (
     <AppBar position="fixed" enableColorOnDark color="default">
       <Toolbar>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
           {report.name} - {capability.name}
         </Typography>
-        <FormControl size="small">
-          <InputLabel id="ussp-select-label">USSP</InputLabel>
-
-          <Select
-            label="USSP"
-            value={ussp}
-            onChange={handleUsspSelect}
-            labelId="ussp-select-label"
-          >
-            {report.participants?.map((p, i) => (
-              <MenuItem value={i} key={i}>
-                {p}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-        <IconButton sx={{ ml: 1 }} onClick={toggleColorMode} color="inherit">
-          {colorMode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
-        </IconButton>
+        <Box>
+          <ParticipantSelector report={report} hideIfNoParticipant />
+          <IconButton sx={{ ml: 1 }} onClick={toggleColorMode} color="inherit">
+            {colorMode === "dark" ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
+        </Box>
       </Toolbar>
     </AppBar>
   );

reports/src/capability/ParticipantSelector.tsx

@@ -0,0 +1,47 @@
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+} from "@mui/material";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Report } from "./capabilityTypes";
+
+export const ParticipantSelector = ({
+  report,
+  hideIfNoParticipant,
+}: {
+  report: Report;
+  hideIfNoParticipant?: boolean;
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const ussp = parseInt(location.pathname.split("/")[1]);
+
+  const handleUsspSelect = (event: SelectChangeEvent<number>) => {
+    const id = event.target.value;
+    navigate(`/${id}`);
+  };
+  if (hideIfNoParticipant && Number.isNaN(ussp)) {
+    return null;
+  }
+  return (
+    <FormControl size="small">
+      <InputLabel id="ussp-select-label">USSP</InputLabel>
+      <Select
+        displayEmpty={true}
+        label="USSP"
+        value={ussp}
+        onChange={handleUsspSelect}
+        labelId="ussp-select-label"
+      >
+        {report.participants?.map((p, i) => (
+          <MenuItem value={i} key={i}>
+            {p}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};

reports/src/capability/RequirementTable.tsx

@@ -102,8 +102,9 @@ const CheckAggregateRow = ({ checks }: { checks: Check[] }) => {
   );
 };
 
-const getCheckId = (check: Check): string => {
+const getCheckId = (check: Check, requirementName: string): string => {
   return [
+    requirementName,
     check.scenario.name,
     check.case.name,
     check.step.name,
@@ -114,7 +115,7 @@ const getCheckId = (check: Check): string => {
 const checkAggregatedRows = (requirement: Requirement) => {
   // Group checks by ID
   const aggregatedChecks = requirement.checks.reduce((acc, check) => {
-    const checkId = getCheckId(check);
+    const checkId = getCheckId(check, requirement.name);
     if (checkId in acc) {
       return { ...acc, [checkId]: [...acc[checkId], check] };
     } else {