From e10c7e1b859a625aea23e314a3749dfca318d3e8 Mon Sep 17 00:00:00 2001
From: Christopher Chiche <christopher.chiche@orbitalize.com>
Date: Mon, 11 Sep 2023 16:54:53 +0200
Subject: [PATCH] Cleanup root page

---
 reports/src/capability/CapabilityTable.tsx    | 30 ++++++++++++-------
 .../src/capability/ChildCapabilityTable.tsx   |  2 +-
 reports/src/capability/reportNavigation.tsx   | 10 +++++--
 reports/src/capability/useReport.tsx          | 12 +++-----
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index 999d61a..8f286ec 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 { Fragment, ReactNode } from "react";
+import { ReactNode } from "react";
 import { Report } from "./capabilityTypes";
 import { CapabilityTableHeader } from "./CapabilityTableHeader";
 import { RequirementTable } from "./RequirementTable";
@@ -10,6 +10,7 @@ import { ChildCapabilityTable } from "./ChildCapabilityTable";
 type CapabilityTableProps = {
   capability: Capability;
   report: Report;
+  empty?: boolean;
 };
 
 type CrumbHandle = { crumb: () => ReactNode };
@@ -35,6 +36,7 @@ function CapabilityBreadcrumbs({ capability }: { capability: Capability }) {
 export const CapabilityTable = ({
   capability,
   report,
+  empty,
 }: CapabilityTableProps) => {
   if (!capability) {
     return <span>Capability not found</span>;
@@ -54,15 +56,23 @@ export const CapabilityTable = ({
           paddingTop: 10,
         }}
       >
-        <CapabilityBreadcrumbs capability={capability} />
-        <Typography variant="h3" gutterBottom sx={{ marginTop: 1 }}>
-          Requirements
-        </Typography>
-        <RequirementTable capability={capability} />
-        <Typography variant="h3" gutterBottom sx={{ marginTop: 1 }}>
-          Child capabilities
-        </Typography>
-        <ChildCapabilityTable capability={capability} />
+        {empty ? (
+          <Typography variant="overline">
+            Select a participant in the top bar
+          </Typography>
+        ) : (
+          <>
+            <CapabilityBreadcrumbs capability={capability} />
+            <Typography variant="h3" gutterBottom sx={{ marginTop: 1 }}>
+              Requirements
+            </Typography>
+            <RequirementTable capability={capability} />
+            <Typography variant="h3" gutterBottom sx={{ marginTop: 1 }}>
+              Child capabilities
+            </Typography>
+            <ChildCapabilityTable capability={capability} />
+          </>
+        )}
       </Box>
     </>
   );
diff --git a/reports/src/capability/ChildCapabilityTable.tsx b/reports/src/capability/ChildCapabilityTable.tsx
index 86c1ce9..e16179a 100644
--- a/reports/src/capability/ChildCapabilityTable.tsx
+++ b/reports/src/capability/ChildCapabilityTable.tsx
@@ -25,7 +25,7 @@ export const ChildCapabilityRow = ({
     <TableRow>
       <TableCell>
         <Link to={path} component={RouterLink}>
-          {capability.name} ({capability.participant_id})
+          {capability.name}
         </Link>
       </TableCell>
       <TableCell>
diff --git a/reports/src/capability/reportNavigation.tsx b/reports/src/capability/reportNavigation.tsx
index 878d1df..0a0e1db 100644
--- a/reports/src/capability/reportNavigation.tsx
+++ b/reports/src/capability/reportNavigation.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@mui/material";
+import { Link, Typography } from "@mui/material";
 import { Link as RouterLink, RouteObject } from "react-router-dom";
 import { Capability } from "./capabilityTypes";
 import { CapabilityTable } from "./CapabilityTable";
@@ -47,7 +47,13 @@ export const getNavFromCapability = (
       children: [
         {
           index: true,
-          element: <CapabilityTable capability={capability} report={report} />,
+          element: (
+            <CapabilityTable
+              capability={capability}
+              report={report}
+              empty={path === "/"}
+            />
+          ),
         },
         ...children,
       ],
diff --git a/reports/src/capability/useReport.tsx b/reports/src/capability/useReport.tsx
index 7ed3c07..c8a28f0 100644
--- a/reports/src/capability/useReport.tsx
+++ b/reports/src/capability/useReport.tsx
@@ -2,7 +2,8 @@ import { useState, useEffect, useMemo } from "react";
 import { ReportsReportTestRunReport } from "../types/TestRunReport";
 import { RouteObject } from "react-router-dom";
 import { parseReport } from "./reportParser";
-import { getNavFromCapability } from "./reportNavigation";
+import { getNavFromCapability, getNavFromReport } from "./reportNavigation";
+import { parse } from "jsonpath";
 
 const reportUrl = "/report_uspace.json";
 
@@ -20,20 +21,15 @@ type UseReportReturn = {
 export const useReport = ({
   report: _report,
 }: UseReportProps): UseReportReturn => {
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>();
   const [report, setReport] = useState<ReportsReportTestRunReport | undefined>(
     _report
   );
 
   useEffect(() => {
-    if (_report) {
-      setReport(_report as ReportsReportTestRunReport);
-      setLoading(false);
-      return;
-    }
-
     const fetchReport = async () => {
+      setLoading(true);
       try {
         const res = await fetch(reportUrl);
         if (res.status === 404) {