feat(phase-14): redesign Test Detail page with Red/Blue tabs and dual validation (T-115, T-116, T-117, T-118)

T-115: TestDetailHeader with progress bar, contextual action buttons, and dual validation indicators T-116: TeamTabs component with Red Team, Blue Team, Summary, and Timeline tabs T-117: Redesigned TestDetailPage integrating new components with react-query mutations, toast notifications, and role/state-based permissions T-118: ValidationModal for dual Red Lead / Blue Lead approval with required notes on rejection
2026-02-09 11:14:44 +01:00
parent d660bceeb4
commit cea470053f
4 changed files with 1434 additions and 232 deletions
@@ -0,0 +1,582 @@
+import { useState } from "react";
+import {
+  Shield,
+  ShieldCheck,
+  FileText,
+  Clock,
+  Upload,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Trash2,
+} from "lucide-react";
+import type {
+  Test,
+  TestResult,
+  TeamSide,
+  Evidence,
+  TestTimelineEntry,
+  User,
+} from "../../types/models";
+import { RED_EDITABLE_STATES, BLUE_EDITABLE_STATES } from "../../types/models";
+import EvidenceUpload from "../EvidenceUpload";
+import EvidenceList from "../EvidenceList";
+
+// ── Tab definitions ────────────────────────────────────────────────
+
+type TabKey = "red" | "blue" | "summary" | "timeline";
+
+const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
+  { key: "red", label: "Red Team", icon: <Shield className="h-4 w-4" /> },
+  { key: "blue", label: "Blue Team", icon: <ShieldCheck className="h-4 w-4" /> },
+  { key: "summary", label: "Summary", icon: <FileText className="h-4 w-4" /> },
+  { key: "timeline", label: "Timeline", icon: <Clock className="h-4 w-4" /> },
+];
+
+const TAB_COLORS: Record<TabKey, string> = {
+  red: "border-orange-500 text-orange-400",
+  blue: "border-indigo-500 text-indigo-400",
+  summary: "border-cyan-500 text-cyan-400",
+  timeline: "border-gray-500 text-gray-400",
+};
+
+// ── Detection result options ───────────────────────────────────────
+
+const DETECTION_RESULTS: { value: TestResult; label: string; color: string }[] = [
+  { value: "detected", label: "Detected", color: "border-green-500 bg-green-500/10 text-green-400" },
+  { value: "not_detected", label: "Not Detected", color: "border-red-500 bg-red-500/10 text-red-400" },
+  {
+    value: "partially_detected",
+    label: "Partially Detected",
+    color: "border-yellow-500 bg-yellow-500/10 text-yellow-400",
+  },
+];
+
+// ── Props ──────────────────────────────────────────────────────────
+
+interface TeamTabsProps {
+  test: Test;
+  user: User | null;
+  timeline: TestTimelineEntry[];
+  isTimelineLoading: boolean;
+
+  // Red Team field handlers
+  onRedFieldChange: (field: string, value: string | boolean) => void;
+  redDraft: {
+    procedure_text: string;
+    tool_used: string;
+    attack_success: boolean;
+    red_summary: string;
+  };
+
+  // Blue Team field handlers
+  onBlueFieldChange: (field: string, value: string) => void;
+  blueDraft: {
+    detection_result: TestResult | "";
+    blue_summary: string;
+  };
+
+  // Evidence
+  onUploadEvidence: (file: File, team: TeamSide) => Promise<void>;
+  isUploading: boolean;
+  onDownloadEvidence: (evidenceId: string) => void;
+  onDeleteEvidence?: (evidenceId: string) => void;
+  isDeletingEvidence?: boolean;
+}
+
+// ── Component ──────────────────────────────────────────────────────
+
+export default function TeamTabs({
+  test,
+  user,
+  timeline,
+  isTimelineLoading,
+  onRedFieldChange,
+  redDraft,
+  onBlueFieldChange,
+  blueDraft,
+  onUploadEvidence,
+  isUploading,
+  onDownloadEvidence,
+  onDeleteEvidence,
+  isDeletingEvidence,
+}: TeamTabsProps) {
+  const [activeTab, setActiveTab] = useState<TabKey>("red");
+  const role = user?.role ?? "";
+
+  const canEditRed =
+    RED_EDITABLE_STATES.includes(test.state) &&
+    (role === "red_tech" || role === "admin");
+
+  const canEditBlue =
+    BLUE_EDITABLE_STATES.includes(test.state) &&
+    (role === "blue_tech" || role === "admin");
+
+  // ── Red Team Tab ─────────────────────────────────────────────────
+
+  const renderRedTab = () => (
+    <div className="space-y-6">
+      {/* Procedure */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Attack Procedure
+        </label>
+        {canEditRed ? (
+          <textarea
+            value={redDraft.procedure_text}
+            onChange={(e) => onRedFieldChange("procedure_text", e.target.value)}
+            rows={6}
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500 font-mono"
+            placeholder="Describe the attack procedure..."
+          />
+        ) : (
+          <pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
+            {test.procedure_text || "No procedure documented."}
+          </pre>
+        )}
+      </div>
+
+      {/* Tool Used */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Tool Used
+        </label>
+        {canEditRed ? (
+          <input
+            value={redDraft.tool_used}
+            onChange={(e) => onRedFieldChange("tool_used", e.target.value)}
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+            placeholder="e.g. Atomic Red Team, Cobalt Strike, ..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.tool_used || "Not specified"}</p>
+        )}
+      </div>
+
+      {/* Attack Success toggle */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Attack Successful?
+        </label>
+        {canEditRed ? (
+          <button
+            onClick={() => onRedFieldChange("attack_success", !redDraft.attack_success)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              redDraft.attack_success ? "bg-green-600" : "bg-gray-600"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                redDraft.attack_success ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </button>
+        ) : (
+          <span className={`text-sm ${test.attack_success ? "text-green-400" : "text-red-400"}`}>
+            {test.attack_success === null ? "Not set" : test.attack_success ? "Yes" : "No"}
+          </span>
+        )}
+      </div>
+
+      {/* Red Summary */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Red Team Summary
+        </label>
+        {canEditRed ? (
+          <textarea
+            value={redDraft.red_summary}
+            onChange={(e) => onRedFieldChange("red_summary", e.target.value)}
+            rows={4}
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
+            placeholder="Summarize the Red Team findings..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.red_summary || "No summary yet."}</p>
+        )}
+      </div>
+
+      {/* Red Evidences */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium text-gray-300">Red Team Evidence</h3>
+        {canEditRed && (
+          <div className="mb-4">
+            <EvidenceUpload
+              onUpload={async (file) => await onUploadEvidence(file, "red")}
+              isUploading={isUploading}
+            />
+          </div>
+        )}
+        <EvidenceList
+          evidences={test.red_evidences || []}
+          onDownload={onDownloadEvidence}
+        />
+      </div>
+
+      {/* Red validation status if applicable */}
+      {test.red_validation_status && (
+        <div
+          className={`rounded-lg border p-3 ${
+            test.red_validation_status === "approved"
+              ? "border-green-500/30 bg-green-900/20"
+              : "border-red-500/30 bg-red-900/20"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            {test.red_validation_status === "approved" ? (
+              <CheckCircle className="h-4 w-4 text-green-400" />
+            ) : (
+              <XCircle className="h-4 w-4 text-red-400" />
+            )}
+            <span
+              className={`text-sm font-medium ${
+                test.red_validation_status === "approved" ? "text-green-400" : "text-red-400"
+              }`}
+            >
+              Red Lead: {test.red_validation_status === "approved" ? "Approved" : "Rejected"}
+            </span>
+          </div>
+          {test.red_validation_notes && (
+            <p className="mt-2 text-sm text-gray-400">{test.red_validation_notes}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Blue Team Tab ────────────────────────────────────────────────
+
+  const renderBlueTab = () => (
+    <div className="space-y-6">
+      {/* Detection Result */}
+      <div>
+        <label className="mb-2 block text-sm font-medium text-gray-300">
+          Detection Result
+        </label>
+        {canEditBlue ? (
+          <div className="flex flex-wrap gap-2">
+            {DETECTION_RESULTS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => onBlueFieldChange("detection_result", opt.value)}
+                className={`rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                  blueDraft.detection_result === opt.value
+                    ? opt.color
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm">
+            {test.detection_result ? (
+              <span
+                className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                  test.detection_result === "detected"
+                    ? "border-green-500/30 bg-green-900/50 text-green-400"
+                    : test.detection_result === "not_detected"
+                      ? "border-red-500/30 bg-red-900/50 text-red-400"
+                      : "border-yellow-500/30 bg-yellow-900/50 text-yellow-400"
+                }`}
+              >
+                {test.detection_result.replace(/_/g, " ")}
+              </span>
+            ) : (
+              <span className="text-gray-500">Not evaluated yet</span>
+            )}
+          </p>
+        )}
+      </div>
+
+      {/* Blue Summary */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-gray-300">
+          Blue Team Summary
+        </label>
+        {canEditBlue ? (
+          <textarea
+            value={blueDraft.blue_summary}
+            onChange={(e) => onBlueFieldChange("blue_summary", e.target.value)}
+            rows={4}
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            placeholder="Summarize the Blue Team analysis..."
+          />
+        ) : (
+          <p className="text-sm text-gray-400">{test.blue_summary || "No summary yet."}</p>
+        )}
+      </div>
+
+      {/* Blue Evidences */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium text-gray-300">Blue Team Evidence</h3>
+        {canEditBlue && (
+          <div className="mb-4">
+            <EvidenceUpload
+              onUpload={async (file) => await onUploadEvidence(file, "blue")}
+              isUploading={isUploading}
+            />
+          </div>
+        )}
+        <EvidenceList
+          evidences={test.blue_evidences || []}
+          onDownload={onDownloadEvidence}
+        />
+      </div>
+
+      {/* Blue validation status if applicable */}
+      {test.blue_validation_status && (
+        <div
+          className={`rounded-lg border p-3 ${
+            test.blue_validation_status === "approved"
+              ? "border-green-500/30 bg-green-900/20"
+              : "border-red-500/30 bg-red-900/20"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            {test.blue_validation_status === "approved" ? (
+              <CheckCircle className="h-4 w-4 text-green-400" />
+            ) : (
+              <XCircle className="h-4 w-4 text-red-400" />
+            )}
+            <span
+              className={`text-sm font-medium ${
+                test.blue_validation_status === "approved" ? "text-green-400" : "text-red-400"
+              }`}
+            >
+              Blue Lead: {test.blue_validation_status === "approved" ? "Approved" : "Rejected"}
+            </span>
+          </div>
+          {test.blue_validation_notes && (
+            <p className="mt-2 text-sm text-gray-400">{test.blue_validation_notes}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Summary Tab ──────────────────────────────────────────────────
+
+  const renderSummaryTab = () => (
+    <div className="space-y-6">
+      {/* Side-by-side comparison */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Red Side */}
+        <div className="rounded-lg border border-orange-500/20 bg-orange-900/10 p-4">
+          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-orange-400">
+            <Shield className="h-4 w-4" /> Red Team (Attack)
+          </h3>
+          <dl className="space-y-3">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Attack Success</dt>
+              <dd className="mt-0.5 text-sm">
+                {test.attack_success === null ? (
+                  <span className="text-gray-500">Not set</span>
+                ) : test.attack_success ? (
+                  <span className="text-green-400">Yes</span>
+                ) : (
+                  <span className="text-red-400">No</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.tool_used || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Summary</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.red_summary || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Evidence Files</dt>
+              <dd className="mt-0.5 text-sm text-gray-400">
+                {(test.red_evidences || []).length} file(s)
+              </dd>
+            </div>
+            {test.red_validation_status && (
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Red Lead Validation</dt>
+                <dd className="mt-0.5 flex items-center gap-1 text-sm">
+                  {test.red_validation_status === "approved" ? (
+                    <><CheckCircle className="h-3.5 w-3.5 text-green-400" /><span className="text-green-400">Approved</span></>
+                  ) : (
+                    <><XCircle className="h-3.5 w-3.5 text-red-400" /><span className="text-red-400">Rejected</span></>
+                  )}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </div>
+
+        {/* Blue Side */}
+        <div className="rounded-lg border border-indigo-500/20 bg-indigo-900/10 p-4">
+          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-indigo-400">
+            <ShieldCheck className="h-4 w-4" /> Blue Team (Detection)
+          </h3>
+          <dl className="space-y-3">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Detection Result</dt>
+              <dd className="mt-0.5 text-sm">
+                {test.detection_result ? (
+                  <span
+                    className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                      test.detection_result === "detected"
+                        ? "border-green-500/30 bg-green-900/50 text-green-400"
+                        : test.detection_result === "not_detected"
+                          ? "border-red-500/30 bg-red-900/50 text-red-400"
+                          : "border-yellow-500/30 bg-yellow-900/50 text-yellow-400"
+                    }`}
+                  >
+                    {test.detection_result.replace(/_/g, " ")}
+                  </span>
+                ) : (
+                  <span className="text-gray-500">Not evaluated</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Summary</dt>
+              <dd className="mt-0.5 text-sm text-gray-300">{test.blue_summary || "N/A"}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Evidence Files</dt>
+              <dd className="mt-0.5 text-sm text-gray-400">
+                {(test.blue_evidences || []).length} file(s)
+              </dd>
+            </div>
+            {test.blue_validation_status && (
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Blue Lead Validation</dt>
+                <dd className="mt-0.5 flex items-center gap-1 text-sm">
+                  {test.blue_validation_status === "approved" ? (
+                    <><CheckCircle className="h-3.5 w-3.5 text-green-400" /><span className="text-green-400">Approved</span></>
+                  ) : (
+                    <><XCircle className="h-3.5 w-3.5 text-red-400" /><span className="text-red-400">Rejected</span></>
+                  )}
+                </dd>
+              </div>
+            )}
+          </dl>
+        </div>
+      </div>
+
+      {/* Final Result */}
+      <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4">
+        <h3 className="mb-2 text-sm font-semibold text-gray-300">Final Result</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-gray-500">State:</span>
+            <span className="text-sm font-medium capitalize text-gray-200">
+              {test.state.replace(/_/g, " ")}
+            </span>
+          </div>
+          {test.detection_result && (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-gray-500">Detection:</span>
+              <span className="text-sm font-medium capitalize text-gray-200">
+                {test.detection_result.replace(/_/g, " ")}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ── Timeline Tab ─────────────────────────────────────────────────
+
+  const renderTimelineTab = () => {
+    if (isTimelineLoading) {
+      return (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-gray-500" />
+        </div>
+      );
+    }
+
+    if (!timeline || timeline.length === 0) {
+      return (
+        <div className="py-12 text-center">
+          <Clock className="mx-auto h-10 w-10 text-gray-600" />
+          <p className="mt-2 text-sm text-gray-400">No timeline events yet</p>
+        </div>
+      );
+    }
+
+    const formatDate = (d: string) =>
+      new Date(d).toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+
+    return (
+      <div className="relative space-y-0">
+        {/* Timeline vertical line */}
+        <div className="absolute left-4 top-2 bottom-2 w-px bg-gray-700" />
+
+        {timeline.map((entry, idx) => (
+          <div key={entry.id || idx} className="relative flex gap-4 py-3">
+            {/* Dot */}
+            <div className="z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-700 bg-gray-800">
+              <Clock className="h-3.5 w-3.5 text-gray-400" />
+            </div>
+            {/* Content */}
+            <div className="flex-1 pt-0.5">
+              <p className="text-sm font-medium text-gray-200">{entry.action}</p>
+              <p className="text-xs text-gray-500">
+                {formatDate(entry.timestamp)}
+                {entry.user_id && ` - User: ${entry.user_id}`}
+              </p>
+              {entry.details && Object.keys(entry.details).length > 0 && (
+                <pre className="mt-1 max-h-24 overflow-auto rounded bg-gray-800 p-2 font-mono text-xs text-gray-400">
+                  {JSON.stringify(entry.details, null, 2)}
+                </pre>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // ── Tab content router ───────────────────────────────────────────
+
+  const TAB_CONTENT: Record<TabKey, () => React.ReactNode> = {
+    red: renderRedTab,
+    blue: renderBlueTab,
+    summary: renderSummaryTab,
+    timeline: renderTimelineTab,
+  };
+
+  // ── Render ───────────────────────────────────────────────────────
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900">
+      {/* Tab bar */}
+      <div className="flex border-b border-gray-800">
+        {TABS.map((tab) => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`flex items-center gap-2 border-b-2 px-5 py-3 text-sm font-medium transition-colors ${
+              activeTab === tab.key
+                ? TAB_COLORS[tab.key]
+                : "border-transparent text-gray-500 hover:text-gray-300"
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="p-6">{TAB_CONTENT[activeTab]()}</div>
+    </div>
+  );
+}