From b2096fd3458a630fe46cd210f572f38ff1a06eae Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Mon, 11 Sep 2023 16:31:36 +0200
Subject: [PATCH] Cleanup tables

---
 reports/src/ThemeContext.tsx                  | 30 +++++------
 reports/src/capability/CapabilityTable.tsx    | 14 +++--
 .../src/capability/CapabilityTableHeader.tsx  | 37 ++-----------
 .../src/capability/ChildCapabilityTable.tsx   | 50 +++++++++++------
 reports/src/capability/RequirementTable.tsx   | 53 +++++++++++--------
 reports/src/capability/reportNavigation.tsx   |  4 +-
 6 files changed, 93 insertions(+), 95 deletions(-)

diff --git a/reports/src/ThemeContext.tsx b/reports/src/ThemeContext.tsx
index 0a9f1bb..ac16ba7 100644
--- a/reports/src/ThemeContext.tsx
+++ b/reports/src/ThemeContext.tsx
@@ -71,21 +71,21 @@ export const CustomThemeProvider = ({
             ? theme.palette.grey[100]
             : theme.palette.grey[900],
       },
-      table: {
-        borderCollapse: "collapse",
-        border: `1px solid ${borderColor}`,
-      },
-      th: {
-        border: `1px solid ${borderColor}`,
-        backgroundColor:
-          theme.palette.mode === "light"
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-      },
-      td: {
-        border: `1px solid ${borderColor}`,
-        padding: 8,
-      },
+      // table: {
+      //   borderCollapse: "collapse",
+      //   border: `1px solid ${borderColor}`,
+      // },
+      // th: {
+      //   border: `1px solid ${borderColor}`,
+      //   backgroundColor:
+      //     theme.palette.mode === "light"
+      //       ? theme.palette.grey[300]
+      //       : theme.palette.grey[800],
+      // },
+      // td: {
+      //   border: `1px solid ${borderColor}`,
+      //   padding: 8,
+      // },
     };
   };
 
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index 9a36b8a..999d61a 100644
--- a/reports/src/capability/CapabilityTable.tsx
+++ b/reports/src/capability/CapabilityTable.tsx
@@ -1,7 +1,7 @@
 import { Box, Breadcrumbs, Typography } from "@mui/material";
 import { Capability } from "./capabilityTypes";
 import { useMatches } from "react-router-dom";
-import { ReactNode } from "react";
+import { Fragment, ReactNode } from "react";
 import { Report } from "./capabilityTypes";
 import { CapabilityTableHeader } from "./CapabilityTableHeader";
 import { RequirementTable } from "./RequirementTable";
@@ -14,17 +14,21 @@ type CapabilityTableProps = {
 
 type CrumbHandle = { crumb: () => ReactNode };
 
-function CapabilityBreadcrumbs() {
+function CapabilityBreadcrumbs({ capability }: { capability: Capability }) {
   const matches = useMatches();
-  const crumbs = matches
+  const parentCrumbs = matches
     // first get rid of any matches that don't have handle and crumb
     .filter((match) =>
       Boolean((match.handle as CrumbHandle | undefined)?.crumb)
     )
     .slice(0, -1) // Skip last crumb
-    .map((match) => (match.handle as CrumbHandle).crumb())
+    .map((match, i) => (match.handle as CrumbHandle).crumb(i))
     .reverse();
 
+  const here = <Typography key={-1}>{capability.name}</Typography>;
+  const crumbs = [here, ...parentCrumbs];
+  console.log(crumbs);
+
   return <Breadcrumbs separator="<=">{crumbs}</Breadcrumbs>;
 }
 
@@ -50,7 +54,7 @@ export const CapabilityTable = ({
           paddingTop: 10,
         }}
       >
-        <CapabilityBreadcrumbs />
+        <CapabilityBreadcrumbs capability={capability} />
         <Typography variant="h3" gutterBottom sx={{ marginTop: 1 }}>
           Requirements
         </Typography>
diff --git a/reports/src/capability/CapabilityTableHeader.tsx b/reports/src/capability/CapabilityTableHeader.tsx
index ca5f3b2..5c0268e 100644
--- a/reports/src/capability/CapabilityTableHeader.tsx
+++ b/reports/src/capability/CapabilityTableHeader.tsx
@@ -35,50 +35,19 @@ export const CapabilityTableHeader = ({
     navigate(`/${id}`);
   };
   return (
-    <AppBar position="fixed" enableColorOnDark>
+    <AppBar position="fixed" enableColorOnDark color="default">
       <Toolbar>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
           {report.name} - {capability.name}
         </Typography>
-        <FormControl
-          size="small"
-          sx={(theme) => ({
-            color: theme.palette.primary.contrastText,
-            bgColor: theme.palette.primary.main,
-          })}
-        >
-          <InputLabel
-            id="ussp-select-label"
-            sx={(theme) => ({
-              color: theme.palette.primary.contrastText,
-              "&.Mui-focused": {
-                color: theme.palette.primary.contrastText,
-              },
-            })}
-          >
-            USSP
-          </InputLabel>
+        <FormControl size="small">
+          <InputLabel id="ussp-select-label">USSP</InputLabel>
 
           <Select
             label="USSP"
             value={ussp}
             onChange={handleUsspSelect}
             labelId="ussp-select-label"
-            sx={(theme) => ({
-              color: theme.palette.primary.contrastText,
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme.palette.primary.contrastText,
-              },
-              "&:hover .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme.palette.primary.contrastText,
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme.palette.primary.contrastText,
-              },
-              "& .MuiSvgIcon-root": {
-                color: theme.palette.primary.contrastText,
-              },
-            })}
           >
             {report.participants?.map((p, i) => (
               <MenuItem value={i} key={i}>
diff --git a/reports/src/capability/ChildCapabilityTable.tsx b/reports/src/capability/ChildCapabilityTable.tsx
index 0c629be..86c1ce9 100644
--- a/reports/src/capability/ChildCapabilityTable.tsx
+++ b/reports/src/capability/ChildCapabilityTable.tsx
@@ -1,6 +1,18 @@
-import { Chip, Link } from "@mui/material";
+import {
+  Chip,
+  Link,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
 import { Link as RouterLink } from "react-router-dom";
 import { Capability } from "./capabilityTypes";
+
 export const ChildCapabilityRow = ({
   capability,
   path,
@@ -10,19 +22,19 @@ export const ChildCapabilityRow = ({
 }) => {
   const pass = capability.result === "pass";
   return (
-    <tr>
-      <td>
+    <TableRow>
+      <TableCell>
         <Link to={path} component={RouterLink}>
           {capability.name} ({capability.participant_id})
         </Link>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <Chip
           label={pass ? "PASS" : "FAIL"}
           color={pass ? "success" : "error"}
         />
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
 
@@ -35,15 +47,21 @@ export const ChildCapabilityTable = ({
     <ChildCapabilityRow capability={c} path={i.toString()} />
   ));
 
+  if (!childCapabilities.length) {
+    return <Typography variant="overline">No child capabilities</Typography>;
+  }
+
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Child Capability</th>
-          <th>Result</th>
-        </tr>
-      </thead>
-      <tbody>{childCapabilities}</tbody>
-    </table>
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table" size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Child Capability</TableCell>
+            <TableCell>Result</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>{childCapabilities}</TableBody>
+      </Table>
+    </TableContainer>
   );
 };
diff --git a/reports/src/capability/RequirementTable.tsx b/reports/src/capability/RequirementTable.tsx
index 3983398..8af7900 100644
--- a/reports/src/capability/RequirementTable.tsx
+++ b/reports/src/capability/RequirementTable.tsx
@@ -9,6 +9,13 @@ import {
   DialogContent,
   Typography,
   Link,
+  TableContainer,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
@@ -68,13 +75,11 @@ const CheckAggregateRow = ({ checks }: { checks: Check[] }) => {
     </>
   );
   return (
-    <tr>
-      <td style={{ padding: 0 }}>
-        <Accordion square disableGutters>
+    <TableRow>
+      <TableCell style={{ padding: 0 }}>
+        <Accordion square disableGutters sx={{ boxShadow: "none" }}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
-            aria-controls="panel1a-content"
-            id="panel1a-header"
             sx={{
               "& .MuiAccordionSummary-content": {
                 display: "flex",
@@ -93,8 +98,8 @@ const CheckAggregateRow = ({ checks }: { checks: Check[] }) => {
             </Box>
           </AccordionDetails>
         </Accordion>
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
 
@@ -130,10 +135,10 @@ const checkAggregatedRows = (requirement: Requirement) => {
 const requirementRow = (requirement: Requirement) => {
   const checks = checkAggregatedRows(requirement);
   const requirementHeader = (
-    <tr>
-      <td rowSpan={checks.length + 1}>{requirement.name}</td>
-      {!checks.length && <td>Not tested</td>}
-    </tr>
+    <TableRow>
+      <TableCell rowSpan={checks.length + 1}>{requirement.name}</TableCell>
+      {!checks.length && <TableCell>Not tested</TableCell>}
+    </TableRow>
   );
 
   if (checks.length) {
@@ -153,18 +158,20 @@ export const RequirementTable = ({
     .flatMap((r) => requirementRow(r))
     .flat();
 
+  if (!requirements.length) {
+    return <Typography variant="overline">No requirements</Typography>;
+  }
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Requirement</th>
-          <th>Test Check</th>
-        </tr>
-      </thead>
-      <tbody>
-        {/* <CapabilityRows capability={capability} /> */}
-        {requirements}
-      </tbody>
-    </table>
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table" size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Requirement</TableCell>
+            <TableCell>Test Check</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>{requirements}</TableBody>
+      </Table>
+    </TableContainer>
   );
 };
diff --git a/reports/src/capability/reportNavigation.tsx b/reports/src/capability/reportNavigation.tsx
index 3f9c178..878d1df 100644
--- a/reports/src/capability/reportNavigation.tsx
+++ b/reports/src/capability/reportNavigation.tsx
@@ -38,8 +38,8 @@ export const getNavFromCapability = (
     {
       path: path,
       handle: {
-        crumb: () => (
-          <Link to={fullPath} component={RouterLink}>
+        crumb: (index?: number | string) => (
+          <Link key={index} to={fullPath} component={RouterLink}>
             {capability.name}
           </Link>
         ),