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
This commit is contained in:
582
frontend/src/components/test-detail/TeamTabs.tsx
Normal file
582
frontend/src/components/test-detail/TeamTabs.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
329
frontend/src/components/test-detail/TestDetailHeader.tsx
Normal file
329
frontend/src/components/test-detail/TestDetailHeader.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import {
|
||||
FlaskConical,
|
||||
Play,
|
||||
Send,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
RotateCcw,
|
||||
Loader2,
|
||||
Shield,
|
||||
ShieldCheck,
|
||||
} from "lucide-react";
|
||||
import type { Test, TestState, User } from "../../types/models";
|
||||
|
||||
// ── Progress steps ─────────────────────────────────────────────────
|
||||
|
||||
const PROGRESS_STEPS: { key: TestState; label: string }[] = [
|
||||
{ key: "draft", label: "Draft" },
|
||||
{ key: "red_executing", label: "Red Exec" },
|
||||
{ key: "blue_evaluating", label: "Blue Eval" },
|
||||
{ key: "in_review", label: "Review" },
|
||||
{ key: "validated", label: "Validated" },
|
||||
];
|
||||
|
||||
const STATE_INDEX: Record<TestState, number> = {
|
||||
draft: 0,
|
||||
red_executing: 1,
|
||||
blue_evaluating: 2,
|
||||
in_review: 3,
|
||||
validated: 4,
|
||||
rejected: -1,
|
||||
};
|
||||
|
||||
// ── Badge colors ───────────────────────────────────────────────────
|
||||
|
||||
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",
|
||||
blue_evaluating: "bg-indigo-900/50 text-indigo-400 border-indigo-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",
|
||||
};
|
||||
|
||||
// ── Props ──────────────────────────────────────────────────────────
|
||||
|
||||
interface TestDetailHeaderProps {
|
||||
test: Test;
|
||||
user: User | null;
|
||||
isTransitioning: boolean;
|
||||
onStartExecution: () => void;
|
||||
onSubmitRed: () => void;
|
||||
onSubmitBlue: () => void;
|
||||
onOpenValidateModal: (side: "red" | "blue") => void;
|
||||
onReopen: () => void;
|
||||
}
|
||||
|
||||
// ── Component ──────────────────────────────────────────────────────
|
||||
|
||||
export default function TestDetailHeader({
|
||||
test,
|
||||
user,
|
||||
isTransitioning,
|
||||
onStartExecution,
|
||||
onSubmitRed,
|
||||
onSubmitBlue,
|
||||
onOpenValidateModal,
|
||||
onReopen,
|
||||
}: TestDetailHeaderProps) {
|
||||
const role = user?.role ?? "";
|
||||
const currentIdx = STATE_INDEX[test.state];
|
||||
|
||||
const formatDate = (d: string | null) => {
|
||||
if (!d) return null;
|
||||
return new Date(d).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
// ── Contextual action buttons ────────────────────────────────────
|
||||
|
||||
const renderActions = () => {
|
||||
const buttons: React.ReactNode[] = [];
|
||||
|
||||
// Red Tech in draft -> Start Execution
|
||||
if (
|
||||
test.state === "draft" &&
|
||||
(role === "red_tech" || role === "admin")
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="start"
|
||||
onClick={onStartExecution}
|
||||
disabled={isTransitioning}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
|
||||
Start Execution
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
// Red Tech in red_executing -> Submit to Blue Team
|
||||
if (
|
||||
test.state === "red_executing" &&
|
||||
(role === "red_tech" || role === "admin")
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="submit-red"
|
||||
onClick={onSubmitRed}
|
||||
disabled={isTransitioning}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||||
Submit to Blue Team
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
// Blue Tech in blue_evaluating -> Submit for Review
|
||||
if (
|
||||
test.state === "blue_evaluating" &&
|
||||
(role === "blue_tech" || role === "admin")
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="submit-blue"
|
||||
onClick={onSubmitBlue}
|
||||
disabled={isTransitioning}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||||
Submit for Review
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
// Red Lead in in_review -> Validate Red
|
||||
if (
|
||||
test.state === "in_review" &&
|
||||
(role === "red_lead" || role === "admin") &&
|
||||
!test.red_validation_status
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="validate-red"
|
||||
onClick={() => onOpenValidateModal("red")}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white hover:bg-orange-500 transition-colors"
|
||||
>
|
||||
<Shield className="h-4 w-4" />
|
||||
Validate Red Side
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
// Blue Lead in in_review -> Validate Blue
|
||||
if (
|
||||
test.state === "in_review" &&
|
||||
(role === "blue_lead" || role === "admin") &&
|
||||
!test.blue_validation_status
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="validate-blue"
|
||||
onClick={() => onOpenValidateModal("blue")}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
|
||||
>
|
||||
<Shield className="h-4 w-4" />
|
||||
Validate Blue Side
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
// Leads/admin on rejected -> Reopen
|
||||
if (
|
||||
test.state === "rejected" &&
|
||||
(role === "red_lead" || role === "blue_lead" || role === "admin")
|
||||
) {
|
||||
buttons.push(
|
||||
<button
|
||||
key="reopen"
|
||||
onClick={onReopen}
|
||||
disabled={isTransitioning}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-900/20 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-900/40 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isTransitioning ? <Loader2 className="h-4 w-4 animate-spin" /> : <RotateCcw className="h-4 w-4" />}
|
||||
Reopen Test
|
||||
</button>,
|
||||
);
|
||||
}
|
||||
|
||||
return buttons.length > 0 ? (
|
||||
<div className="flex flex-wrap items-center gap-2">{buttons}</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
// ── Dual validation indicators ───────────────────────────────────
|
||||
|
||||
const renderValidationIndicators = () => {
|
||||
if (test.state !== "in_review" && test.state !== "validated" && test.state !== "rejected") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const redStatus = test.red_validation_status;
|
||||
const blueStatus = test.blue_validation_status;
|
||||
|
||||
const indicator = (label: string, status: string | null) => {
|
||||
if (status === "approved")
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" /> {label}: Approved
|
||||
</span>
|
||||
);
|
||||
if (status === "rejected")
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-red-400">
|
||||
<XCircle className="h-3.5 w-3.5" /> {label}: Rejected
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<ShieldCheck className="h-3.5 w-3.5" /> {label}: Pending
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
{indicator("Red Lead", redStatus)}
|
||||
{indicator("Blue Lead", blueStatus)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ── Render ───────────────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6 space-y-4">
|
||||
{/* Top row: name + badge + actions */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-lg bg-cyan-500/10 p-3">
|
||||
<FlaskConical className="h-8 w-8 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-white">{test.name}</h1>
|
||||
<span
|
||||
className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${
|
||||
STATE_BADGE[test.state]
|
||||
}`}
|
||||
>
|
||||
{test.state.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-gray-400">
|
||||
Created {formatDate(test.created_at)}
|
||||
</p>
|
||||
{renderValidationIndicators()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{renderActions()}
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{test.state !== "rejected" && (
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{PROGRESS_STEPS.map((step, idx) => {
|
||||
const isCompleted = idx < currentIdx;
|
||||
const isCurrent = idx === currentIdx;
|
||||
|
||||
return (
|
||||
<div key={step.key} className="flex flex-1 flex-col items-center gap-1">
|
||||
<div className="flex w-full items-center">
|
||||
{/* Connector left */}
|
||||
{idx > 0 && (
|
||||
<div
|
||||
className={`h-0.5 flex-1 ${
|
||||
isCompleted || isCurrent ? "bg-cyan-500" : "bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
{/* Dot */}
|
||||
<div
|
||||
className={`h-3 w-3 shrink-0 rounded-full border-2 ${
|
||||
isCompleted
|
||||
? "border-cyan-500 bg-cyan-500"
|
||||
: isCurrent
|
||||
? "border-cyan-500 bg-gray-900"
|
||||
: "border-gray-600 bg-gray-900"
|
||||
}`}
|
||||
/>
|
||||
{/* Connector right */}
|
||||
{idx < PROGRESS_STEPS.length - 1 && (
|
||||
<div
|
||||
className={`h-0.5 flex-1 ${
|
||||
isCompleted ? "bg-cyan-500" : "bg-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`text-[10px] font-medium ${
|
||||
isCurrent ? "text-cyan-400" : isCompleted ? "text-gray-400" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{step.label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rejected banner */}
|
||||
{test.state === "rejected" && (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-900/20 p-3 text-sm text-red-400">
|
||||
This test was rejected and needs to be reopened to restart the workflow.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
196
frontend/src/components/test-detail/ValidationModal.tsx
Normal file
196
frontend/src/components/test-detail/ValidationModal.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Loader2,
|
||||
Shield,
|
||||
ShieldCheck,
|
||||
FileIcon,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { Test } from "../../types/models";
|
||||
|
||||
// ── Props ──────────────────────────────────────────────────────────
|
||||
|
||||
interface ValidationModalProps {
|
||||
side: "red" | "blue";
|
||||
test: Test;
|
||||
isSubmitting: boolean;
|
||||
onSubmit: (status: "approved" | "rejected", notes: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// ── Component ──────────────────────────────────────────────────────
|
||||
|
||||
export default function ValidationModal({
|
||||
side,
|
||||
test,
|
||||
isSubmitting,
|
||||
onSubmit,
|
||||
onClose,
|
||||
}: ValidationModalProps) {
|
||||
const [decision, setDecision] = useState<"approved" | "rejected" | null>(null);
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
const isRed = side === "red";
|
||||
const title = isRed ? "Validate as Red Lead" : "Validate as Blue Lead";
|
||||
const accent = isRed ? "orange" : "indigo";
|
||||
|
||||
// Evidence from the corresponding team
|
||||
const evidences = isRed ? test.red_evidences || [] : test.blue_evidences || [];
|
||||
|
||||
// Status of the other side's validation
|
||||
const otherStatus = isRed
|
||||
? test.blue_validation_status
|
||||
: test.red_validation_status;
|
||||
const otherLabel = isRed ? "Blue Lead" : "Red Lead";
|
||||
|
||||
// Can submit?
|
||||
const canSubmit =
|
||||
decision !== null &&
|
||||
!isSubmitting &&
|
||||
(decision === "approved" || notes.trim().length > 0);
|
||||
|
||||
// ── Render ───────────────────────────────────────────────────────
|
||||
|
||||
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>
|
||||
|
||||
{/* Other side status */}
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 p-3">
|
||||
<span className="text-xs font-medium text-gray-500">{otherLabel} status: </span>
|
||||
{otherStatus === "approved" ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-green-400">
|
||||
<CheckCircle className="h-3.5 w-3.5" /> Approved
|
||||
</span>
|
||||
) : otherStatus === "rejected" ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-red-400">
|
||||
<XCircle className="h-3.5 w-3.5" /> Rejected
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-gray-400">Pending</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Decision */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium text-gray-300">Decision</h4>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setDecision("approved")}
|
||||
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
|
||||
decision === "approved"
|
||||
? "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("rejected")}
|
||||
className={`flex flex-1 items-center justify-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
|
||||
decision === "rejected"
|
||||
? "border-red-500 bg-red-500/10 text-red-400"
|
||||
: "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
|
||||
}`}
|
||||
>
|
||||
<XCircle className="h-4 w-4" />
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-gray-300">
|
||||
Notes{decision === "rejected" && <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-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500"
|
||||
placeholder={
|
||||
decision === "rejected"
|
||||
? "Explain why this is being rejected..."
|
||||
: "Optional notes..."
|
||||
}
|
||||
/>
|
||||
{decision === "rejected" && notes.trim().length === 0 && (
|
||||
<p className="mt-1 text-xs text-red-400">
|
||||
Notes are required when rejecting.
|
||||
</p>
|
||||
)}
|
||||
</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={() => decision && onSubmit(decision, notes)}
|
||||
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 === "rejected"
|
||||
? "bg-red-600 hover:bg-red-500"
|
||||
: "bg-green-600 hover:bg-green-500"
|
||||
}`}
|
||||
>
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{decision === "approved"
|
||||
? "Confirm Approval"
|
||||
: decision === "rejected"
|
||||
? "Confirm Rejection"
|
||||
: "Select a decision"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user