diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
index 950d072..00c6f64 100644
--- a/reports/src/capability/CapabilityTable.tsx
+++ b/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 Capability not found;
}
@@ -56,9 +66,22 @@ export const CapabilityTable = ({
}}
>
{participantMissing ? (
-
- Select a participant in the top bar
-
+ <>
+
+ {report.participants?.length ? "Participants" : "Participant"}
+
+
+
+ {report.participants?.map((p, i) => (
+
+ navigate(`/${i}`)}>
+
+
+
+ ))}
+
+
+ >
) : (
<>
diff --git a/reports/src/capability/CapabilityTableHeader.tsx b/reports/src/capability/CapabilityTableHeader.tsx
index 0428280..6489c44 100644
--- a/reports/src/capability/CapabilityTableHeader.tsx
+++ b/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) => {
- const id = event.target.value;
- navigate(`/${id}`);
- };
return (
{report.name} - {capability.name}
-
- USSP
-
-
-
-
- {colorMode === "dark" ? : }
-
+
+
+
+ {colorMode === "dark" ? : }
+
+
);
diff --git a/reports/src/capability/ParticipantSelector.tsx b/reports/src/capability/ParticipantSelector.tsx
new file mode 100644
index 0000000..b07493c
--- /dev/null
+++ b/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) => {
+ const id = event.target.value;
+ navigate(`/${id}`);
+ };
+ if (hideIfNoParticipant && Number.isNaN(ussp)) {
+ return null;
+ }
+ return (
+
+ USSP
+
+
+ );
+};
diff --git a/reports/src/capability/RequirementTable.tsx b/reports/src/capability/RequirementTable.tsx
index dc98292..2410e38 100644
--- a/reports/src/capability/RequirementTable.tsx
+++ b/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 {