feat(phase-20): navigation, error handling, integration tests, and V2 docs (T-132 to T-135)

2026-02-09 14:19:42 +01:00
parent 9ea6ce1326
commit 29eab4ef77
9 changed files with 1401 additions and 244 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import TestsPage from "./pages/TestsPage";
 import TestCreatePage from "./pages/TestCreatePage";
 import TestDetailPage from "./pages/TestDetailPage";
 import TestCatalogPage from "./pages/TestCatalogPage";
+import ReportsPage from "./pages/ReportsPage";
 import SystemPage from "./pages/SystemPage";
 import UsersPage from "./pages/UsersPage";
 import AuditLogPage from "./pages/AuditLogPage";
@@ -35,6 +36,7 @@ export default function App() {
        <Route path="/tests/:testId" element={<TestDetailPage />} />
        <Route path="/test-catalog" element={<TestCatalogPage />} />
        <Route path="/test-catalog/:templateId/use" element={<TestCatalogPage />} />
+        <Route path="/reports" element={<ReportsPage />} />
        <Route
          path="/system"
          element={
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -0,0 +1,78 @@
+import { AlertTriangle, Loader2 } from "lucide-react";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "danger" | "warning" | "default";
+  isLoading?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const variantStyles = {
+  danger: {
+    icon: "text-red-400 bg-red-500/10",
+    button: "bg-red-600 hover:bg-red-500",
+  },
+  warning: {
+    icon: "text-yellow-400 bg-yellow-500/10",
+    button: "bg-yellow-600 hover:bg-yellow-500",
+  },
+  default: {
+    icon: "text-cyan-400 bg-cyan-500/10",
+    button: "bg-cyan-600 hover:bg-cyan-500",
+  },
+};
+
+export default function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  isLoading = false,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  if (!open) return null;
+
+  const styles = variantStyles[variant];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6 shadow-2xl">
+        <div className="flex items-start gap-4">
+          <div className={`rounded-lg p-2 ${styles.icon}`}>
+            <AlertTriangle className="h-6 w-6" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">{title}</h3>
+            <p className="mt-1 text-sm text-gray-400">{message}</p>
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onCancel}
+            disabled={isLoading}
+            className="rounded-lg border border-gray-700 px-4 py-2 text-sm font-medium text-gray-300 transition-colors hover:bg-gray-800 disabled:opacity-50"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={`flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 ${styles.button}`}
+          >
+            {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,34 +1,110 @@
 import { NavLink } from "react-router-dom";
+import { useState } from "react";
 import {
  LayoutDashboard,
  Shield,
  FlaskConical,
  BookOpen,
+  BarChart3,
  Settings,
  Users,
  FileText,
+  ChevronDown,
+  ListChecks,
+  ClipboardList,
 } from "lucide-react";
 import { useAuth } from "../context/AuthContext";

-const baseLinks = [
+interface NavItem {
+  to: string;
+  label: string;
+  icon: React.FC<{ className?: string }>;
+  children?: NavItem[];
+}
+
+const mainLinks: NavItem[] = [
  { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
-  { to: "/techniques", label: "Techniques", icon: Shield },
-  { to: "/tests", label: "Tests", icon: FlaskConical },
-  { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+  { to: "/techniques", label: "ATT&CK Matrix", icon: Shield },
+  {
+    to: "/tests",
+    label: "Tests",
+    icon: FlaskConical,
+    children: [
+      { to: "/tests", label: "All Tests", icon: ListChecks },
+      { to: "/tests?view=pending", label: "My Pending Tasks", icon: ClipboardList },
+      { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
+    ],
+  },
+  { to: "/reports", label: "Reports", icon: BarChart3 },
 ];

-const adminLinks = [
+const adminLinks: NavItem[] = [
  { to: "/users", label: "Users", icon: Users },
  { to: "/audit", label: "Audit Log", icon: FileText },
  { to: "/system", label: "System", icon: Settings },
 ];

+function SidebarLink({ item }: { item: NavItem }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (item.children) {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-gray-200"
+        >
+          <span className="flex items-center gap-3">
+            <item.icon className="h-5 w-5" />
+            {item.label}
+          </span>
+          <ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} />
+        </button>
+        {expanded && (
+          <div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3">
+            {item.children.map((child) => (
+              <NavLink
+                key={child.to + child.label}
+                to={child.to}
+                className={({ isActive }) =>
+                  `flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    isActive
+                      ? "bg-cyan-500/10 text-cyan-400"
+                      : "text-gray-500 hover:bg-gray-800 hover:text-gray-200"
+                  }`
+                }
+              >
+                <child.icon className="h-4 w-4" />
+                {child.label}
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <NavLink
+      to={item.to}
+      className={({ isActive }) =>
+        `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+          isActive
+            ? "bg-cyan-500/10 text-cyan-400"
+            : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+        }`
+      }
+    >
+      <item.icon className="h-5 w-5" />
+      {item.label}
+    </NavLink>
+  );
+}
+
 export default function Sidebar() {
  const { user } = useAuth();
  const isAdmin = user?.role === "admin";

-  const links = isAdmin ? [...baseLinks, ...adminLinks] : baseLinks;
-
  return (
    <aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
      {/* Logo */}
@@ -39,24 +115,24 @@ export default function Sidebar() {
        </span>
      </div>

-      {/* Nav links */}
+      {/* Main nav */}
      <nav className="flex-1 space-y-1 px-3 py-4">
-        {links.map(({ to, label, icon: Icon }) => (
-          <NavLink
-            key={to}
-            to={to}
-            className={({ isActive }) =>
-              `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
-                isActive
-                  ? "bg-cyan-500/10 text-cyan-400"
-                  : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
-              }`
-            }
-          >
-            <Icon className="h-5 w-5" />
-            {label}
-          </NavLink>
+        {mainLinks.map((item) => (
+          <SidebarLink key={item.to + item.label} item={item} />
        ))}
+
+        {/* Admin section */}
+        {isAdmin && (
+          <>
+            <div className="my-3 border-t border-gray-800" />
+            <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest text-gray-600">
+              Administration
+            </p>
+            {adminLinks.map((item) => (
+              <SidebarLink key={item.to} item={item} />
+            ))}
+          </>
+        )}
      </nav>

      {/* Footer */}
--- a/frontend/src/pages/TestDetailPage.tsx
+++ b/frontend/src/pages/TestDetailPage.tsx
@@ -22,6 +22,7 @@ import type { TestResult, TeamSide, TestTimelineEntry } from "../types/models";
 import TestDetailHeader from "../components/test-detail/TestDetailHeader";
 import TeamTabs from "../components/test-detail/TeamTabs";
 import ValidationModal from "../components/test-detail/ValidationModal";
+import ConfirmDialog from "../components/ConfirmDialog";

 // ── Page Component ─────────────────────────────────────────────────

@@ -38,6 +39,8 @@ export default function TestDetailPage() {
    side: "red" | "blue";
  }>({ open: false, side: "red" });

+  const [confirmReopen, setConfirmReopen] = useState(false);
+
  const [redDraft, setRedDraft] = useState({
    procedure_text: "",
    tool_used: "",
@@ -96,7 +99,19 @@ export default function TestDetailPage() {

  const showToast = useCallback((message: string, type: "success" | "error") => {
    setToast({ message, type });
-    setTimeout(() => setToast(null), 3500);
+    setTimeout(() => setToast(null), 5000);
+  }, []);
+
+  /** Extract a user-friendly error message from Axios or generic errors. */
+  const extractError = useCallback((err: unknown): string => {
+    if (err && typeof err === "object" && "response" in err) {
+      const resp = (err as { response?: { data?: { detail?: string | { message?: string } } } }).response;
+      const detail = resp?.data?.detail;
+      if (typeof detail === "string") return detail;
+      if (detail && typeof detail === "object" && "message" in detail) return (detail as { message: string }).message;
+    }
+    if (err instanceof Error) return err.message;
+    return "An unexpected error occurred";
  }, []);

  const invalidateAll = useCallback(() => {
@@ -120,7 +135,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Red Team fields saved", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const saveBlueMutation = useMutation({
@@ -133,7 +148,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Blue Team fields saved", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  // State transitions
@@ -143,7 +158,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Test execution started", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const submitRedMutation = useMutation({
@@ -152,7 +167,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Submitted to Blue Team", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const submitBlueMutation = useMutation({
@@ -161,7 +176,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Submitted for review", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const validateRedLeadMutation = useMutation({
@@ -172,7 +187,7 @@ export default function TestDetailPage() {
      setValidationModal({ open: false, side: "red" });
      showToast("Red Lead validation submitted", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const validateBlueLeadMutation = useMutation({
@@ -183,16 +198,20 @@ export default function TestDetailPage() {
      setValidationModal({ open: false, side: "blue" });
      showToast("Blue Lead validation submitted", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  const reopenMutation = useMutation({
    mutationFn: () => reopenTest(testId!),
    onSuccess: () => {
      invalidateAll();
+      setConfirmReopen(false);
      showToast("Test reopened", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => {
+      setConfirmReopen(false);
+      showToast(extractError(err), "error");
+    },
  });

  // Evidence upload
@@ -203,7 +222,7 @@ export default function TestDetailPage() {
      invalidateAll();
      showToast("Evidence uploaded", "success");
    },
-    onError: (err: Error) => showToast(err.message, "error"),
+    onError: (err: unknown) => showToast(extractError(err), "error"),
  });

  // ── Handlers ───────────────────────────────────────────────────
@@ -322,7 +341,7 @@ export default function TestDetailPage() {
        onSubmitRed={() => submitRedMutation.mutate()}
        onSubmitBlue={() => submitBlueMutation.mutate()}
        onOpenValidateModal={(side) => setValidationModal({ open: true, side })}
-        onReopen={() => reopenMutation.mutate()}
+        onReopen={() => setConfirmReopen(true)}
      />

      {/* Content: Tabs + Sidebar */}
@@ -426,6 +445,18 @@ export default function TestDetailPage() {
        </div>
      </div>

+      {/* Confirm Reopen Dialog */}
+      <ConfirmDialog
+        open={confirmReopen}
+        title="Reopen Test"
+        message="This will move the test back to Draft state and clear all validation decisions. The Red/Blue workflow will need to be restarted. Are you sure?"
+        confirmLabel="Reopen"
+        variant="warning"
+        isLoading={reopenMutation.isPending}
+        onConfirm={() => reopenMutation.mutate()}
+        onCancel={() => setConfirmReopen(false)}
+      />
+
      {/* Validation Modal */}
      {validationModal.open && (
        <ValidationModal