From c72144ea6a5c3d7f166fe30b74021db04929b72f Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Fri, 8 Sep 2023 12:30:16 +0200
Subject: [PATCH] Aggregate test rows with same name  (#22)

Implements https://github.com/Orbitalize/reports/issues/17
---
 reports/src/App.css                        |  54 ++++++++
 reports/src/capability/CapabilityTable.tsx | 154 +++++++++++++++------
 2 files changed, 168 insertions(+), 40 deletions(-)

diff --git a/reports/src/App.css b/reports/src/App.css
index b391628..c1dc622 100644
--- a/reports/src/App.css
+++ b/reports/src/App.css
@@ -41,3 +41,57 @@ th {
     background-color: dimgray;
   }
 }
+
+.detailOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  overflow: scroll;
+}
+
+.checkStatusTag {
+  padding: 0.2em;
+  &.pass {
+    background-color: green;
+    color: white;
+    font-weight: 600;
+
+  }
+  &.fail {
+    background-color: red;
+    color: white;
+    font-weight: 600;
+  }
+}
+
+.checkAggregatedStatusTag {
+  display: flex;
+  margin-right: 4px;
+  .tag {
+    padding: 0.2em;
+    &.pass {
+      background-color: green;
+      color: white;
+      font-weight: 600;
+
+    }
+    &.fail {
+      background-color: red;
+      color: white;
+      font-weight: 600;
+    }
+  }
+}
+.checkAggregateHeader {
+  display: flex;
+  margin-bottom: 4px;
+}
+
+.checkStatusGrid {
+  display: flex; 
+  gap: 4px;
+  flex-wrap: wrap;
+}
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index d167b95..5592951 100644
--- a/reports/src/capability/CapabilityTable.tsx
+++ b/reports/src/capability/CapabilityTable.tsx
@@ -1,12 +1,17 @@
 import { Link as RouterLink } from "react-router-dom";
 import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   Breadcrumbs,
-  Button,
-  Link,
+  Chip,
   Dialog,
   DialogContent,
+  Link,
   Typography,
 } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
 import { Capability, Check, Requirement } from "./capabilityTypes";
 import { useEffect, useState } from "react";
 import { useMatches } from "react-router-dom";
@@ -26,54 +31,124 @@ export const CheckLabel = ({
   return docUrl ? <Link href={docUrl}>{name}</Link> : <>{name}</>;
 };
 
-export const CheckRow = ({ check }: { check: Check }) => {
+const getCheckId = (check: Check): string => {
+  return [
+    check.scenario.name,
+    check.case.name,
+    check.step.name,
+    check.name,
+  ].join("-");
+};
+
+const CheckStatusTag = ({ check }: { check: Check }) => {
   const [showDetails, setShowDetails] = useState(false);
+  return (
+    <div>
+      <Chip
+        label={check.result === "pass" ? "PASS" : "FAIL"}
+        color={check.result === "pass" ? "success" : "error"}
+        onClick={() => setShowDetails(true)}
+      />
+      <Dialog
+        fullWidth
+        maxWidth="xl"
+        onClose={() => setShowDetails(false)}
+        open={showDetails}
+      >
+        <DialogContent>
+          <Typography variant="h2" gutterBottom>
+            {check.name} was evaluated in step {check.step.name}
+          </Typography>
+          <Typography>Details:</Typography>
+          <pre>{JSON.stringify(check.details, null, 2)}</pre>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+const AggregatedStatusTag = ({ checks }: { checks: Check[] }) => {
+  const successfulChecks = checks.reduce(
+    (acc, check) => acc + (check.result === "pass" ? 1 : 0),
+    0
+  );
+  const pass = successfulChecks === checks.length;
+  return (
+    <Chip label={pass ? "PASS" : "FAIL"} color={pass ? "success" : "error"} />
+  );
+};
+
+const CheckAggregateRow = ({ checks }: { checks: Check[] }) => {
   const separator = " :: ";
   const checkSource = (
     <>
-      <CheckLabel {...check.scenario} />
+      <CheckLabel {...checks[0].scenario} />
       {separator}
-      <CheckLabel {...check.case} />
+      <CheckLabel {...checks[0].case} />
       {separator}
-      <CheckLabel {...check.step} />
+      <CheckLabel {...checks[0].step} />
       {separator}
-      <CheckLabel name={check.name} />
+      <CheckLabel name={checks[0].name} />
     </>
   );
-
   return (
     <tr>
-      <td>{checkSource}</td>
-      <td className={check.result === "pass" ? "pass" : "fail"}>
-        {check.result === "pass" ? "PASS" : "FAIL"}
-      </td>
-      <td>
-        <Button onClick={() => setShowDetails(true)}>Open</Button>
-        <Dialog
-          fullWidth
-          maxWidth="xl"
-          onClose={() => setShowDetails(false)}
-          open={showDetails}
-        >
-          <DialogContent>
-            <Typography variant="h2" gutterBottom>
-              {check.name} was evaluated in step {check.step.name}
-            </Typography>
-            <Typography>Details:</Typography>
-            <pre>{JSON.stringify(check.details, null, 2)}</pre>
-          </DialogContent>
-        </Dialog>
+      <td style={{ padding: 0 }}>
+        <Accordion square>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            sx={{
+              "& .MuiAccordionSummary-content": {
+                display: "flex",
+                justifyContent: "space-between",
+              },
+            }}
+          >
+            <Typography>{checkSource}</Typography>
+            <AggregatedStatusTag checks={checks} />
+          </AccordionSummary>
+          <AccordionDetails>
+            <div className="checkStatusGrid">
+              {checks.map((c) => (
+                <CheckStatusTag check={c} />
+              ))}
+            </div>
+          </AccordionDetails>
+        </Accordion>
       </td>
     </tr>
   );
 };
 
+const checkAggregatedRows = (requirement: Requirement) => {
+  // Group checks by ID
+  const aggregatedChecks = requirement.checks.reduce((acc, check) => {
+    const checkId = getCheckId(check);
+    if (checkId in acc) {
+      return { ...acc, [checkId]: [...acc[checkId], check] };
+    } else {
+      return { ...acc, [checkId]: [check] };
+    }
+  }, {} as Record<string, Check[]>);
+
+  // For each check, display a checkRow
+  // Aggregate titles by check ID
+  return Object.keys(aggregatedChecks)
+    .map((key) => {
+      const checks = aggregatedChecks[key];
+      return <CheckAggregateRow checks={checks} />;
+    })
+    .flat();
+};
+
 const requirementRow = (requirement: Requirement) => {
-  const checks = requirement.checks.map((c) => <CheckRow check={c} />);
+  const checks = checkAggregatedRows(requirement);
   const requirementHeader = (
     <tr>
       <td rowSpan={checks.length + 1}>{requirement.name}</td>
-      {!checks.length && <td colSpan={3}>Not tested</td>}
+      {!checks.length && <td>Not tested</td>}
     </tr>
   );
 
@@ -91,18 +166,19 @@ export const ChildCapabilityRow = ({
   capability: Capability;
   path: string;
 }) => {
+  const pass = capability.result === "pass";
   return (
     <tr>
-      <td colSpan={2}>
+      <td>
         <Link to={path} component={RouterLink}>
           {capability.name} ({capability.participant_id})
         </Link>
       </td>
-      <td
-        className={capability.result === "pass" ? "pass" : "fail"}
-        colSpan={2}
-      >
-        {capability.result === "pass" ? "PASS" : "FAIL"}
+      <td>
+        <Chip
+          label={pass ? "PASS" : "FAIL"}
+          color={pass ? "success" : "error"}
+        />
       </td>
     </tr>
   );
@@ -111,8 +187,8 @@ export const ChildCapabilityRow = ({
 const ChildCapabilityHeader = () => {
   return (
     <tr>
-      <th colSpan={2}>Child Capability</th>
-      <th colSpan={2}>Result</th>
+      <th>Child Capability</th>
+      <th>Result</th>
     </tr>
   );
 };
@@ -177,8 +253,6 @@ export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
             <th>Capability</th>
             <th>Requirement</th>
             <th>Test Check</th>
-            <th>Result</th>
-            <th>Details</th>
           </tr>
         </thead>
         <tbody>