kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tests): review panels, blind visibility UX, red_review/blue_review badges

Browse Source
This commit is contained in:
kitos
2026-07-06 12:02:14 +02:00
parent 82033b5037
commit d5e3df00f9
11 changed files with 449 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AddTestToCampaignModal.tsx
+2
View File
@@ -22,7 +22,9 @@ import type { Test, TestState, TestTemplateSummary } from "../types/models";
const stateBadge: Record<TestState, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
frontend/src/components/CampaignTimeline.tsx
+2
View File
@@ -22,7 +22,9 @@ const PHASES = [
const stateColors: Record<string, { bg: string; text: string; border: string }> = {
draft: { bg: "bg-gray-800", text: "text-gray-400", border: "border-gray-600" },
red_executing: { bg: "bg-orange-900/50", text: "text-orange-400", border: "border-orange-500/50" },
red_review: { bg: "bg-amber-900/50", text: "text-amber-400", border: "border-amber-500/50" },
blue_evaluating: { bg: "bg-indigo-900/50", text: "text-indigo-400", border: "border-indigo-500/50" },
blue_review: { bg: "bg-purple-900/50", text: "text-purple-400", border: "border-purple-500/50" },
in_review: { bg: "bg-blue-900/50", text: "text-blue-400", border: "border-blue-500/50" },
validated: { bg: "bg-green-900/50", text: "text-green-400", border: "border-green-500/50" },
rejected: { bg: "bg-red-900/50", text: "text-red-400", border: "border-red-500/50" },
frontend/src/components/test-detail/ReviewModal.tsx
+252
View File
@@ -0,0 +1,252 @@
import { useState } from "react";
import {
CheckCircle,
RotateCcw,
AlertTriangle,
Loader2,
Shield,
ShieldCheck,
FileIcon,
X,
} from "lucide-react";
import type { Test } from "../../types/models";
// ── Props ──────────────────────────────────────────────────────────
type RedDecision = "approve" | "reopen";
type BlueDecision = "approve" | "reopen" | "gap";
interface ReviewModalProps {
side: "red" | "blue";
test: Test;
isSubmitting: boolean;
onSubmitRed?: (decision: RedDecision, notes: string) => void;
onSubmitBlue?: (decision: BlueDecision, notes: string, systemGaps: string) => void;
onClose: () => void;
}
// ── Component ──────────────────────────────────────────────────────
export default function ReviewModal({
side,
test,
isSubmitting,
onSubmitRed,
onSubmitBlue,
onClose,
}: ReviewModalProps) {
const isRed = side === "red";
const [decision, setDecision] = useState<RedDecision | BlueDecision | null>(null);
const [notes, setNotes] = useState("");
const [systemGaps, setSystemGaps] = useState("");
const title = isRed ? "Review Red Team Submission" : "Review Blue Team Submission";
const accent = isRed ? "orange" : "indigo";
const evidences = isRed ? test.red_evidences || [] : test.blue_evidences || [];
const requiresNotes = decision === "reopen" && notes.trim().length === 0;
const requiresGaps = decision === "gap" && systemGaps.trim().length === 0;
const canSubmit = decision !== null && !isSubmitting && !requiresNotes && !requiresGaps;
const handleSubmit = () => {
if (!decision) return;
if (isRed) {
onSubmitRed?.(decision as RedDecision, notes);
} else {
onSubmitBlue?.(decision as BlueDecision, notes, systemGaps);
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="w-full max-w-lg rounded-xl border border-gray-800 bg-gray-900 shadow-xl">
{/* Header */}
<div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
<div className="flex items-center gap-2">
{isRed ? (
<Shield className={`h-5 w-5 text-${accent}-400`} />
) : (
<ShieldCheck className={`h-5 w-5 text-${accent}-400`} />
)}
<h3 className="text-lg font-semibold text-white">{title}</h3>
</div>
<button
onClick={onClose}
className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-white"
>
<X className="h-5 w-5" />
</button>
</div>
{/* Body */}
<div className="space-y-5 px-6 py-5">
{/* Evidence summary */}
<div>
<h4 className="mb-2 text-sm font-medium text-gray-300">
{isRed ? "Red" : "Blue"} Team Evidence ({evidences.length})
</h4>
{evidences.length > 0 ? (
<div className="max-h-32 space-y-1 overflow-y-auto rounded-lg border border-gray-700 bg-gray-800/50 p-2">
{evidences.map((ev) => (
<div key={ev.id} className="flex items-center gap-2 text-xs text-gray-400">
<FileIcon className="h-3.5 w-3.5 text-gray-500" />
<span className="truncate">{ev.file_name}</span>
</div>
))}
</div>
) : (
<p className="text-xs text-gray-500">No evidence files uploaded.</p>
)}
</div>
{/* Decision */}
<div>
<h4 className="mb-2 text-sm font-medium text-gray-300">Decision</h4>
<div className="flex gap-3">
<button
onClick={() => setDecision("approve")}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
decision === "approve"
? "border-green-500 bg-green-500/10 text-green-400"
: "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
}`}
>
<CheckCircle className="h-4 w-4" />
Approve
</button>
<button
onClick={() => setDecision("reopen")}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
decision === "reopen"
? "border-amber-500 bg-amber-500/10 text-amber-400"
: "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
}`}
>
<RotateCcw className="h-4 w-4" />
Reopen
</button>
{!isRed && (
<button
onClick={() => setDecision("gap")}
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
decision === "gap"
? "border-purple-500 bg-purple-500/10 text-purple-400"
: "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
}`}
>
<AlertTriangle className="h-4 w-4" />
System Gap
</button>
)}
</div>
{decision === "gap" && (
<p className="mt-2 text-xs text-gray-500">
Use this when the operator did everything right but Blue Team is missing a
capability (tooling, visibility) needed to detect/block this technique. The test
still proceeds to cross-validation.
</p>
)}
</div>
{/* Notes (reopen) */}
{decision === "reopen" && (
<div>
<label className="mb-1.5 block text-sm font-medium text-gray-300">
Notes <span className="text-red-400">(required)</span>
</label>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
rows={3}
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-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
placeholder="Explain what needs to be redone..."
/>
{requiresNotes && (
<p className="mt-1 text-xs text-red-400">Notes are required when reopening.</p>
)}
</div>
)}
{/* System gaps (blue gap only) */}
{decision === "gap" && (
<div>
<label className="mb-1.5 block text-sm font-medium text-gray-300">
System Gaps <span className="text-red-400">(required)</span>
</label>
<textarea
value={systemGaps}
onChange={(e) => setSystemGaps(e.target.value)}
rows={3}
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-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
placeholder="What's missing to properly detect/block this technique?"
/>
{requiresGaps && (
<p className="mt-1 text-xs text-red-400">
Describe the gap before flagging it.
</p>
)}
<label className="mb-1.5 mt-3 block text-sm font-medium text-gray-300">
Notes (optional)
</label>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
rows={2}
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-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
placeholder="Optional notes..."
/>
</div>
)}
{/* Notes (approve, optional) */}
{decision === "approve" && (
<div>
<label className="mb-1.5 block text-sm font-medium text-gray-300">
Notes (optional)
</label>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
rows={2}
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-green-500 focus:outline-none focus:ring-1 focus:ring-green-500"
placeholder="Optional notes..."
/>
</div>
)}
</div>
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-gray-800 px-6 py-4">
<button
onClick={onClose}
disabled={isSubmitting}
className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800 disabled:opacity-50"
>
Cancel
</button>
<button
onClick={handleSubmit}
disabled={!canSubmit}
className={`flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 ${
decision === "reopen"
? "bg-amber-600 hover:bg-amber-500"
: decision === "gap"
? "bg-purple-600 hover:bg-purple-500"
: "bg-green-600 hover:bg-green-500"
}`}
>
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
{decision === "approve"
? "Confirm Approval"
: decision === "reopen"
? "Confirm Reopen"
: decision === "gap"
? "Confirm System Gap"
: "Select a decision"}
</button>
</div>
</div>
</div>
);
}
frontend/src/components/test-detail/TeamTabs.tsx
+43 -4
View File
@@ -148,6 +148,13 @@ export default function TeamTabs({
((role === "blue_lead" || role === "admin") ||
(role === "blue_tech" && !!test.blue_work_started_at));
// Blind visibility: neither side sees the other's data until both reviews
// pass (matches the backend's field-masking on GET /tests/{id}).
const BLIND_STATES = ["draft", "red_executing", "red_review", "blue_evaluating", "blue_review"];
const isBlind = BLIND_STATES.includes(test.state) && role !== "admin" && role !== "viewer";
const hideBlueFromMe = isBlind && (role === "red_tech" || role === "red_lead");
const hideRedFromMe = isBlind && (role === "blue_tech" || role === "blue_lead");
// Containment fields only visible when attack was detected (draft or saved value)
const isDetected = canEditBlue
? blueDraft.detection_result === "detected" || blueDraft.detection_result === "partially_detected"
@@ -168,7 +175,19 @@ export default function TeamTabs({
// ── Red Team Tab ─────────────────────────────────────────────────
const renderRedTab = () => (
const renderRedTab = () => {
if (hideRedFromMe) {
return (
<div className="py-12 text-center">
<Shield className="mx-auto h-10 w-10 text-gray-600" />
<p className="mt-2 text-sm text-gray-400">
Red Team work is hidden until both teams' reviews are complete — this keeps
detection testing blind.
</p>
</div>
);
}
return (
<div className="space-y-6">
{/* Locked hint for red_tech in draft state */}
{redLockedHint && (
@@ -343,11 +362,24 @@ export default function TeamTabs({
</div>
)}
</div>
);
);
};
// ── Blue Team Tab ────────────────────────────────────────────────
const renderBlueTab = () => (
const renderBlueTab = () => {
if (hideBlueFromMe) {
return (
<div className="py-12 text-center">
<ShieldCheck className="mx-auto h-10 w-10 text-gray-600" />
<p className="mt-2 text-sm text-gray-400">
Blue Team work is hidden until both teams' reviews are complete — this keeps
detection testing blind.
</p>
</div>
);
}
return (
<div className="space-y-6">
{/* Locked hint for blue_tech before Start Evaluation */}
{blueLockedHint && (
@@ -610,7 +642,8 @@ export default function TeamTabs({
</div>
)}
</div>
);
);
};
// ── Summary Tab ──────────────────────────────────────────────────
@@ -713,6 +746,12 @@ export default function TeamTabs({
</dd>
</div>
)}
{test.system_gaps && (
<div>
<dt className="text-xs font-medium uppercase text-gray-500">System Gaps Flagged</dt>
<dd className="mt-0.5 text-sm text-purple-300">{test.system_gaps}</dd>
</div>
)}
</dl>
</div>
</div>
frontend/src/components/test-detail/TestDetailHeader.tsx
+55 -5
View File
@@ -26,7 +26,9 @@ import LiveTimer from "./LiveTimer";
const PROGRESS_STEPS: { key: TestState; label: string }[] = [
{ key: "draft", label: "Draft" },
{ key: "red_executing", label: "Red Exec" },
{ key: "red_review", label: "Red Review" },
{ key: "blue_evaluating", label: "Blue Eval" },
{ key: "blue_review", label: "Blue Review" },
{ key: "in_review", label: "Review" },
{ key: "validated", label: "Validated" },
];
@@ -34,11 +36,13 @@ const PROGRESS_STEPS: { key: TestState; label: string }[] = [
const STATE_INDEX: Record<TestState, number> = {
draft: 0,
red_executing: 1,
blue_evaluating: 2,
in_review: 3,
validated: 4,
red_review: 2,
blue_evaluating: 3,
blue_review: 4,
in_review: 5,
validated: 6,
rejected: -1,
disputed: 3, // same step as in_review (still in validation phase)
disputed: 5, // same step as in_review (still in validation phase)
};
// ── Badge colors ───────────────────────────────────────────────────
@@ -46,13 +50,23 @@ const STATE_INDEX: Record<TestState, number> = {
const STATE_BADGE: Record<TestState, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
disputed: "bg-amber-900/50 text-amber-400 border-amber-500/30",
};
/** "Queued Blue Team" is a display-only label for blue_evaluating + unassigned. */
function getStateLabel(test: Test): string {
if (test.state === "blue_evaluating" && !test.blue_work_started_at) {
return "Queued Blue Team";
}
return test.state.replace(/_/g, " ");
}
// ── Props ──────────────────────────────────────────────────────────
interface TestDetailHeaderProps {
@@ -64,6 +78,7 @@ interface TestDetailHeaderProps {
onSubmitBlue: () => void;
onStartBlueWork: () => void;
onOpenValidateModal: (side: "red" | "blue") => void;
onOpenReviewModal: (side: "red" | "blue") => void;
onReopen: () => void;
onPauseTimer: () => void;
onResumeTimer: () => void;
@@ -84,6 +99,7 @@ export default function TestDetailHeader({
onSubmitBlue,
onStartBlueWork,
onOpenValidateModal,
onOpenReviewModal,
onReopen,
onPauseTimer,
onResumeTimer,
@@ -190,6 +206,40 @@ export default function TestDetailHeader({
);
}
// Red Lead assigned to review this submission -> Review Red Submission
if (
test.state === "red_review" &&
(role === "admin" || (role === "red_lead" && test.red_reviewer_assignee === user?.id))
) {
buttons.push(
<button
key="review-red"
onClick={() => onOpenReviewModal("red")}
className="flex items-center gap-1.5 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white hover:bg-amber-500 transition-colors"
>
<Shield className="h-4 w-4" />
Review Red Submission
</button>,
);
}
// Blue Lead assigned to review this submission -> Review Blue Submission
if (
test.state === "blue_review" &&
(role === "admin" || (role === "blue_lead" && test.blue_reviewer_assignee === user?.id))
) {
buttons.push(
<button
key="review-blue"
onClick={() => onOpenReviewModal("blue")}
className="flex items-center gap-1.5 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-500 transition-colors"
>
<ShieldCheck className="h-4 w-4" />
Review Blue Submission
</button>,
);
}
// Blue Team in blue_evaluating:
// - if not picked up yet: show "Start Evaluation" button
// - if already picked up: show "Submit for Review" button
@@ -472,7 +522,7 @@ export default function TestDetailHeader({
STATE_BADGE[test.state]
}`}
>
{test.state.replace(/_/g, " ")}
{getStateLabel(test)}
</span>
</div>
<p className="mt-1 text-sm text-gray-400">
frontend/src/pages/CampaignDetailPage.tsx
+2
View File
@@ -59,7 +59,9 @@ const typeLabels: Record<string, string> = {
const testStateColors: Record<string, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
frontend/src/pages/DashboardPage.tsx
+4
View File
@@ -50,7 +50,9 @@ import type { TestState } from "../types/models";
const testStateBadgeColors: Record<string, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -60,7 +62,9 @@ const testStateBadgeColors: Record<string, string> = {
const testStateLabels: Record<string, string> = {
draft: "Draft",
red_executing: "Red Executing",
red_review: "Red Review",
blue_evaluating: "Blue Evaluating",
blue_review: "Blue Review",
in_review: "In Review",
validated: "Validated",
rejected: "Rejected",
frontend/src/pages/ReportsPage.tsx
+4
View File
@@ -213,7 +213,9 @@ export default function ReportsPage() {
<option value="">All states</option>
<option value="draft">Draft</option>
<option value="red_executing">Red Executing</option>
<option value="red_review">Red Review</option>
<option value="blue_evaluating">Blue Evaluating</option>
<option value="blue_review">Blue Review</option>
<option value="in_review">In Review</option>
<option value="validated">Validated</option>
<option value="rejected">Rejected</option>
@@ -452,7 +454,9 @@ const statusColors: Record<string, string> = {
not_evaluated: "bg-gray-500/10 text-gray-400 border-gray-500/30",
draft: "bg-gray-500/10 text-gray-400 border-gray-500/30",
red_executing: "bg-orange-500/10 text-orange-400 border-orange-500/30",
red_review: "bg-amber-500/10 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-500/10 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-500/10 text-purple-400 border-purple-500/30",
in_review: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
rejected: "bg-red-500/10 text-red-400 border-red-500/30",
};
frontend/src/pages/TechniqueDetailPage.tsx
+5 -1
View File
@@ -42,7 +42,9 @@ const statusBadgeColors: Record<TechniqueStatus, string> = {
const testStateBadgeColors: Record<TestState, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -493,7 +495,7 @@ export default function TechniqueDetailPage() {
// Any test currently in a non-terminal state
const ACTIVE_STATES: TestState[] = [
"draft", "red_executing", "blue_evaluating", "in_review",
"draft", "red_executing", "red_review", "blue_evaluating", "blue_review", "in_review",
];
const activeTest = allTests.find(
(t: { state: TestState }) => ACTIVE_STATES.includes(t.state)
@@ -520,7 +522,9 @@ export default function TechniqueDetailPage() {
const ACTIVE_LABEL: Partial<Record<TestState, string>> = {
draft: "Draft",
red_executing: "Executing",
red_review: "Red Review",
blue_evaluating: "Evaluating",
blue_review: "Blue Review",
in_review: "In Review",
};
frontend/src/pages/TestDetailPage.tsx
+63
View File
@@ -14,6 +14,8 @@ import {
startBlueWork,
validateAsRedLead,
validateAsBlueLead,
reviewAsRedLead,
reviewAsBlueLead,
reopenTest,
pauseTimer,
resumeTimer,
@@ -29,6 +31,7 @@ import type { TestResult, ContainmentResult, TeamSide, TestTimelineEntry } from
import TestDetailHeader from "../components/test-detail/TestDetailHeader";
import TeamTabs from "../components/test-detail/TeamTabs";
import ValidationModal from "../components/test-detail/ValidationModal";
import ReviewModal from "../components/test-detail/ReviewModal";
import ConfirmDialog from "../components/ConfirmDialog";
import JiraLinkPanel from "../components/JiraLinkPanel";
import TestPhaseTimeline from "../components/TestPhaseTimeline";
@@ -56,6 +59,11 @@ export default function TestDetailPage() {
side: "red" | "blue";
}>({ open: false, side: "red" });
const [reviewModal, setReviewModal] = useState<{
open: boolean;
side: "red" | "blue";
}>({ open: false, side: "red" });
const [confirmReopen, setConfirmReopen] = useState(false);
const [holdModal, setHoldModal] = useState(false);
const [holdReason, setHoldReason] = useState("");
@@ -254,6 +262,28 @@ export default function TestDetailPage() {
onError: (err: unknown) => showToast(extractError(err), "error"),
});
const reviewRedMutation = useMutation({
mutationFn: (payload: { decision: "approve" | "reopen"; notes?: string }) =>
reviewAsRedLead(testId!, payload),
onSuccess: () => {
invalidateAll();
setReviewModal({ open: false, side: "red" });
showToast("Red review submitted", "success");
},
onError: (err: unknown) => showToast(extractError(err), "error"),
});
const reviewBlueMutation = useMutation({
mutationFn: (payload: { decision: "approve" | "reopen" | "gap"; notes?: string; system_gaps?: string }) =>
reviewAsBlueLead(testId!, payload),
onSuccess: () => {
invalidateAll();
setReviewModal({ open: false, side: "blue" });
showToast("Blue review submitted", "success");
},
onError: (err: unknown) => showToast(extractError(err), "error"),
});
const reopenMutation = useMutation({
mutationFn: () => reopenTest(testId!),
onSuccess: () => {
@@ -360,6 +390,22 @@ export default function TestDetailPage() {
}
};
const handleReviewRedSubmit = (decision: "approve" | "reopen", notes: string) => {
reviewRedMutation.mutate({ decision, notes: notes || undefined });
};
const handleReviewBlueSubmit = (
decision: "approve" | "reopen" | "gap",
notes: string,
systemGaps: string,
) => {
reviewBlueMutation.mutate({
decision,
notes: notes || undefined,
system_gaps: decision === "gap" ? systemGaps : undefined,
});
};
const isTransitioning =
startExecMutation.isPending ||
submitRedMutation.isPending ||
@@ -439,6 +485,7 @@ export default function TestDetailPage() {
onSubmitBlue={() => submitBlueMutation.mutate()}
onStartBlueWork={() => startBlueWorkMutation.mutate()}
onOpenValidateModal={(side) => setValidationModal({ open: true, side })}
onOpenReviewModal={(side) => setReviewModal({ open: true, side })}
onReopen={() => setConfirmReopen(true)}
onPauseTimer={() => pauseTimerMutation.mutate()}
onResumeTimer={() => resumeTimerMutation.mutate()}
@@ -717,6 +764,22 @@ export default function TestDetailPage() {
/>
)}
{/* Review Modal (red_review / blue_review lead gate) */}
{reviewModal.open && (
<ReviewModal
side={reviewModal.side}
test={test}
isSubmitting={
reviewModal.side === "red"
? reviewRedMutation.isPending
: reviewBlueMutation.isPending
}
onSubmitRed={reviewModal.side === "red" ? handleReviewRedSubmit : undefined}
onSubmitBlue={reviewModal.side === "blue" ? handleReviewBlueSubmit : undefined}
onClose={() => setReviewModal({ open: false, side: "red" })}
/>
)}
{/* Save as Template Modal */}
{showTemplateModal && (
<SaveAsTemplateModal
frontend/src/pages/TestsPage.tsx
+17 -1
View File
@@ -29,7 +29,9 @@ import { useAuth } from "../context/AuthContext";
const testStateBadgeColors: Record<TestState, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
red_executing: "bg-orange-900/50 text-orange-400 border-orange-500/30",
red_review: "bg-amber-900/50 text-amber-400 border-amber-500/30",
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-500/30",
blue_review: "bg-purple-900/50 text-purple-400 border-purple-500/30",
in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
validated: "bg-green-900/50 text-green-400 border-green-500/30",
rejected: "bg-red-900/50 text-red-400 border-red-500/30",
@@ -39,7 +41,9 @@ const testStateBadgeColors: Record<TestState, string> = {
const testStateLabels: Record<TestState, string> = {
draft: "Draft",
red_executing: "Red Executing",
red_review: "Red Review",
blue_evaluating: "Blue Evaluating",
blue_review: "Blue Review",
in_review: "In Review",
validated: "Validated",
rejected: "Rejected",
@@ -49,7 +53,9 @@ const testStateLabels: Record<TestState, string> = {
const ALL_STATES: TestState[] = [
"draft",
"red_executing",
"red_review",
"blue_evaluating",
"blue_review",
"in_review",
"validated",
"rejected",
@@ -63,8 +69,12 @@ function currentTeamForState(state: TestState): string {
case "draft":
case "red_executing":
return "Red Team";
case "red_review":
return "Red Lead";
case "blue_evaluating":
return "Blue Team";
case "blue_review":
return "Blue Lead";
case "in_review":
return "Managers";
case "validated":
@@ -429,7 +439,9 @@ export default function TestsPage() {
const icons: Record<TestState, React.ReactNode> = {
draft: <Clock className="h-5 w-5 text-gray-400" />,
red_executing: <Play className="h-5 w-5 text-orange-400" />,
red_review: <Shield className="h-5 w-5 text-amber-400" />,
blue_evaluating: <Shield className="h-5 w-5 text-indigo-400" />,
blue_review: <Shield className="h-5 w-5 text-purple-400" />,
in_review: <Eye className="h-5 w-5 text-blue-400" />,
validated: <CheckCircle className="h-5 w-5 text-green-400" />,
rejected: <XCircle className="h-5 w-5 text-red-400" />,
@@ -438,7 +450,9 @@ export default function TestsPage() {
const colorMap: Record<TestState, string> = {
draft: "text-gray-400",
red_executing: "text-orange-400",
red_review: "text-amber-400",
blue_evaluating: "text-indigo-400",
blue_review: "text-purple-400",
in_review: "text-blue-400",
validated: "text-green-400",
rejected: "text-red-400",
@@ -708,7 +722,9 @@ function TestTable({
testStateBadgeColors[test.state]
}`}
>
{testStateLabels[test.state]}
{test.state === "blue_evaluating" && !test.blue_work_started_at
? "Queued Blue Team"
: testStateLabels[test.state]}
</span>
</td>
<td className="py-3 px-4 text-gray-400 text-xs">