d679ff34d8
User feedback: only the date+time matters. No override toggle, no
"overridden" badge, no UTC/local-time conversion. What you type is what
gets stored is what you see.
- Removed the `override` state, the checkbox label, the conditional show
of the input, and the "auto-stamped at" hint.
- Single always-on datetime-local input under the "Executed at" label,
disabled only while the test is `pending` (backend rejects timestamp
writes until the state machine reaches executed/reviewed_by_blue).
- `isoToInputValue` and `inputValueToIso` now strip/append the time
segment verbatim — `iso.slice(0, 16)` and `${local}:00Z`. No more
round-trip through `new Date(...).toISOString()` that pulled values
through the browser's local TZ.
- Any edit of the input is implicitly an override at submit time
(`executed_at_overridden = true` if non-empty). The flag is purely
internal bookkeeping — never surfaced in the UI per user request.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
787 lines
27 KiB
TypeScript
787 lines
27 KiB
TypeScript
/**
|
|
* Per-test execution page (M7).
|
|
*
|
|
* Two zones, mirror of the spec §M7:
|
|
* - Red zone (red border) — command, output, markdown comment, mark-executed.
|
|
* - Blue zone (cyan border) — detection level, markdown comment, evidence dropzone.
|
|
*
|
|
* State transitions are driven from a small button row in the header. The
|
|
* "modified by X Ns ago" indicator polls `/missions/{id}/activity?since=…`
|
|
* every 15s while the page is mounted (and the document is visible).
|
|
*
|
|
* Field-level permissions:
|
|
* - Admins always see and write everything.
|
|
* - `mission.write_red_fields` enables the red-side form.
|
|
* - `mission.write_blue_fields` enables the blue-side form + uploads.
|
|
* The server is the ultimate arbiter (PUT/POST will 403 if a side is forbidden);
|
|
* the UI just disables inputs the user cannot write to reduce confusion.
|
|
*/
|
|
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { Link, useNavigate, useParams } from 'react-router-dom';
|
|
|
|
import { MarkdownField } from '@/components/MarkdownField';
|
|
import { Alert } from '@/components/ui/Alert';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { SectionHeader } from '@/components/ui/SectionHeader';
|
|
import { Tag } from '@/components/ui/Tag';
|
|
import { TextField } from '@/components/ui/TextField';
|
|
import {
|
|
ApiError,
|
|
apiDelete,
|
|
apiFetch,
|
|
apiGet,
|
|
apiPost,
|
|
apiPut,
|
|
} from '@/lib/api';
|
|
import { useAuth } from '@/lib/auth';
|
|
import {
|
|
EVIDENCE_ALLOWED_EXTENSIONS,
|
|
EVIDENCE_MAX_BYTES,
|
|
MISSION_TEST_STATE_ACCENT,
|
|
MISSION_TEST_STATE_LABEL,
|
|
VALID_TEST_TRANSITIONS,
|
|
missionKeys,
|
|
missionTestKeys,
|
|
type ActivityResponse,
|
|
type DetectionLevel,
|
|
type DetectionLevelList,
|
|
type MissionTestDetail,
|
|
type MissionTestEvidence,
|
|
type TestTransitionPayload,
|
|
type UpdateMissionTestPayload,
|
|
} from '@/lib/missions';
|
|
|
|
const POLL_INTERVAL_MS = 15_000;
|
|
|
|
function formatBytes(n: number): string {
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
|
return `${(n / (1024 * 1024)).toFixed(2)} MB`;
|
|
}
|
|
|
|
function formatRelative(iso: string | null | undefined): string {
|
|
if (!iso) return 'never';
|
|
const then = new Date(iso).getTime();
|
|
const now = Date.now();
|
|
const seconds = Math.max(0, Math.floor((now - then) / 1000));
|
|
if (seconds < 60) return `${seconds}s ago`;
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
const days = Math.floor(hours / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
/**
|
|
* Datetime helpers — zero timezone interpretation. The user types a
|
|
* wall-clock value, the server stores it verbatim, and we display it back
|
|
* unchanged. We never go through `new Date(...).toISOString()` because that
|
|
* would shift the value by the browser's local offset on every render.
|
|
*/
|
|
function isoToInputValue(iso: string | null | undefined): string {
|
|
// `2026-05-15T10:30:00+00:00` → `2026-05-15T10:30`.
|
|
if (!iso) return '';
|
|
return iso.slice(0, 16);
|
|
}
|
|
|
|
function inputValueToIso(local: string): string | null {
|
|
// `2026-05-15T10:30` → `2026-05-15T10:30:00Z`. The `Z` makes the ISO
|
|
// unambiguous for the backend without applying any local-time shift.
|
|
if (!local) return null;
|
|
return `${local}:00Z`;
|
|
}
|
|
|
|
function useMissionTest(missionId: string, testId: string) {
|
|
return useQuery({
|
|
queryKey: missionTestKeys.detail(missionId, testId),
|
|
queryFn: () =>
|
|
apiGet<MissionTestDetail>(`/missions/${missionId}/tests/${testId}`),
|
|
enabled: !!missionId && !!testId,
|
|
});
|
|
}
|
|
|
|
function useDetectionLevels(enabled: boolean) {
|
|
return useQuery({
|
|
queryKey: missionTestKeys.detectionLevels(),
|
|
queryFn: () => apiGet<DetectionLevelList>('/detection-levels'),
|
|
enabled,
|
|
staleTime: 60_000,
|
|
});
|
|
}
|
|
|
|
// --------------------------------------------------------------------------- //
|
|
// Activity indicator //
|
|
// --------------------------------------------------------------------------- //
|
|
|
|
function useActivityWatcher(
|
|
missionId: string,
|
|
testId: string,
|
|
onTouched: () => void,
|
|
) {
|
|
const lastServerTimeRef = useRef<string | null>(null);
|
|
const onTouchedRef = useRef(onTouched);
|
|
onTouchedRef.current = onTouched;
|
|
|
|
useEffect(() => {
|
|
if (!missionId) return;
|
|
let cancelled = false;
|
|
|
|
async function poll() {
|
|
try {
|
|
const since = lastServerTimeRef.current;
|
|
const url =
|
|
`/missions/${missionId}/activity` +
|
|
(since ? `?since=${encodeURIComponent(since)}` : '');
|
|
const res = await apiGet<ActivityResponse>(url);
|
|
if (cancelled) return;
|
|
lastServerTimeRef.current = res.server_time;
|
|
// We only care about activity on the same test (the badge is local).
|
|
if (res.items.some((it) => it.test_id === testId)) {
|
|
onTouchedRef.current();
|
|
}
|
|
} catch {
|
|
// Network blips are non-fatal — the badge just doesn't refresh.
|
|
}
|
|
}
|
|
|
|
// Prime the timestamp without firing onTouched.
|
|
void poll();
|
|
const handle = window.setInterval(() => {
|
|
if (document.visibilityState === 'visible') void poll();
|
|
}, POLL_INTERVAL_MS);
|
|
return () => {
|
|
cancelled = true;
|
|
window.clearInterval(handle);
|
|
};
|
|
}, [missionId, testId]);
|
|
}
|
|
|
|
// --------------------------------------------------------------------------- //
|
|
// Red zone //
|
|
// --------------------------------------------------------------------------- //
|
|
|
|
interface RedZoneProps {
|
|
test: MissionTestDetail;
|
|
missionId: string;
|
|
canWriteRed: boolean;
|
|
}
|
|
|
|
function RedZone({ test, missionId, canWriteRed }: RedZoneProps) {
|
|
const qc = useQueryClient();
|
|
const [command, setCommand] = useState(test.red_command ?? '');
|
|
const [output, setOutput] = useState(test.red_output ?? '');
|
|
const [comment, setComment] = useState(test.red_comment_md ?? '');
|
|
// `executedAtInput` is the raw `YYYY-MM-DDTHH:MM` string the datetime-local
|
|
// input speaks — stored verbatim, displayed verbatim, no TZ shift on either
|
|
// side. Conversion only happens at submit (append `:00Z`).
|
|
const [executedAtInput, setExecutedAtInput] = useState(
|
|
isoToInputValue(test.executed_at),
|
|
);
|
|
const executedAtServer = isoToInputValue(test.executed_at);
|
|
const dirty =
|
|
command !== (test.red_command ?? '') ||
|
|
output !== (test.red_output ?? '') ||
|
|
comment !== (test.red_comment_md ?? '') ||
|
|
executedAtInput !== executedAtServer;
|
|
|
|
// Sync local state only when the *identity* of the test changes (route
|
|
// change). Polling refetches return a new object reference for the same
|
|
// test_id; resetting on those would wipe whatever the user is mid-typing.
|
|
useEffect(() => {
|
|
setCommand(test.red_command ?? '');
|
|
setOutput(test.red_output ?? '');
|
|
setComment(test.red_comment_md ?? '');
|
|
setExecutedAtInput(isoToInputValue(test.executed_at));
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [test.id]);
|
|
|
|
const save = useMutation({
|
|
mutationFn: (body: UpdateMissionTestPayload) =>
|
|
apiPut<MissionTestDetail>(
|
|
`/missions/${missionId}/tests/${test.id}`,
|
|
body,
|
|
),
|
|
onSuccess: (next) => {
|
|
qc.setQueryData(missionTestKeys.detail(missionId, test.id), next);
|
|
qc.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
|
|
},
|
|
});
|
|
|
|
function submit() {
|
|
const body: UpdateMissionTestPayload = {
|
|
red_command: command.trim() || null,
|
|
red_output: output.length === 0 ? null : output,
|
|
red_comment_md: comment.trim() || null,
|
|
};
|
|
// Any change to the executed_at field is implicitly a manual override —
|
|
// the operator wouldn't have touched it otherwise. The override flag is
|
|
// a backend-side bookkeeping detail and never surfaced in the UI.
|
|
if (executedAtInput !== executedAtServer) {
|
|
body.executed_at = inputValueToIso(executedAtInput);
|
|
body.executed_at_overridden = executedAtInput !== '';
|
|
}
|
|
save.mutate(body);
|
|
}
|
|
|
|
const apiErr = save.error instanceof ApiError ? save.error : null;
|
|
const canEditExecutedAt =
|
|
canWriteRed && (test.state === 'executed' || test.state === 'reviewed_by_blue');
|
|
|
|
return (
|
|
<Card accent="red" className="flex flex-col gap-3" data-testid="red-zone">
|
|
<SectionHeader prefix="Red" highlight="Execution" accent="red" />
|
|
{apiErr && <Alert accent="red">{apiErr.message}</Alert>}
|
|
|
|
{/* The execution timestamp anchors the blue team's log correlation,
|
|
so it leads the form (cf. user feedback 2026-05-15). What the user
|
|
types is what gets stored — no timezone interpretation. */}
|
|
<div data-testid="red-executed-block">
|
|
<label className="block font-mono text-3xs font-semibold uppercase tracking-wider2 text-text-dim">
|
|
Executed at
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={executedAtInput}
|
|
onChange={(e) => setExecutedAtInput(e.target.value)}
|
|
disabled={!canEditExecutedAt}
|
|
className="mt-1 w-full rounded-md border border-border bg-bg-card px-3 py-2 font-mono text-xs text-text-bright"
|
|
data-testid="red-executed-at"
|
|
/>
|
|
</div>
|
|
|
|
<TextField
|
|
label="Command"
|
|
value={command}
|
|
onChange={(e) => setCommand(e.target.value)}
|
|
disabled={!canWriteRed}
|
|
className="font-mono"
|
|
data-testid="red-command"
|
|
placeholder="powershell -enc ..."
|
|
/>
|
|
<label className="flex flex-col gap-1">
|
|
<span className="font-mono text-2xs uppercase tracking-wider2 text-text-dim">
|
|
Output
|
|
</span>
|
|
<textarea
|
|
value={output}
|
|
onChange={(e) => setOutput(e.target.value)}
|
|
disabled={!canWriteRed}
|
|
rows={8}
|
|
className="w-full rounded-md border border-border bg-bg-card p-3 font-mono text-xs text-text"
|
|
data-testid="red-output"
|
|
placeholder="stdout / stderr capture"
|
|
/>
|
|
</label>
|
|
<MarkdownField
|
|
label="Comment"
|
|
value={comment}
|
|
onChange={setComment}
|
|
disabled={!canWriteRed}
|
|
data-testid="red-comment"
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
accent="red"
|
|
onClick={submit}
|
|
disabled={!canWriteRed || !dirty || save.isPending}
|
|
data-testid="red-save"
|
|
>
|
|
{save.isPending ? 'Saving…' : 'Save red fields'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// --------------------------------------------------------------------------- //
|
|
// Blue zone //
|
|
// --------------------------------------------------------------------------- //
|
|
|
|
interface BlueZoneProps {
|
|
test: MissionTestDetail;
|
|
missionId: string;
|
|
canWriteBlue: boolean;
|
|
detectionLevels: DetectionLevel[];
|
|
}
|
|
|
|
function BlueZone({ test, missionId, canWriteBlue, detectionLevels }: BlueZoneProps) {
|
|
const qc = useQueryClient();
|
|
const [comment, setComment] = useState(test.blue_comment_md ?? '');
|
|
const [levelId, setLevelId] = useState(test.detection_level_id ?? '');
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [dropError, setDropError] = useState<string | null>(null);
|
|
|
|
const dirty =
|
|
comment !== (test.blue_comment_md ?? '') ||
|
|
levelId !== (test.detection_level_id ?? '');
|
|
|
|
// Sync from server only on test-identity change (route nav), not on every
|
|
// polling refetch — see RedZone for the rationale.
|
|
useEffect(() => {
|
|
setComment(test.blue_comment_md ?? '');
|
|
setLevelId(test.detection_level_id ?? '');
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [test.id]);
|
|
|
|
const save = useMutation({
|
|
mutationFn: (body: UpdateMissionTestPayload) =>
|
|
apiPut<MissionTestDetail>(
|
|
`/missions/${missionId}/tests/${test.id}`,
|
|
body,
|
|
),
|
|
onSuccess: (next) => {
|
|
qc.setQueryData(missionTestKeys.detail(missionId, test.id), next);
|
|
qc.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
|
|
},
|
|
});
|
|
|
|
const upload = useMutation({
|
|
mutationFn: async (file: File) => {
|
|
const fd = new FormData();
|
|
fd.append('file', file);
|
|
const res = await apiFetch(
|
|
`/missions/${missionId}/tests/${test.id}/evidence`,
|
|
{ method: 'POST', body: fd },
|
|
);
|
|
if (!res.ok) {
|
|
const body = await res
|
|
.json()
|
|
.catch(() => ({ error: 'upload_failed' as const }));
|
|
throw new ApiError(res.status, body);
|
|
}
|
|
return (await res.json()) as MissionTestEvidence;
|
|
},
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({
|
|
queryKey: missionTestKeys.detail(missionId, test.id),
|
|
});
|
|
qc.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
|
|
},
|
|
});
|
|
|
|
const remove = useMutation({
|
|
mutationFn: (evidenceId: string) =>
|
|
apiDelete<{ ok: boolean }>(`/evidence/${evidenceId}`),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({
|
|
queryKey: missionTestKeys.detail(missionId, test.id),
|
|
});
|
|
qc.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
|
|
},
|
|
});
|
|
|
|
function submit() {
|
|
save.mutate({
|
|
blue_comment_md: comment.trim() || null,
|
|
detection_level_id: levelId || null,
|
|
});
|
|
}
|
|
|
|
function handleFiles(files: FileList | null) {
|
|
if (!files || files.length === 0) return;
|
|
setDropError(null);
|
|
// Per spec §M7, max 25 MB + ext whitelist are server-enforced; the client
|
|
// checks too so a drag-and-drop of a `.exe` doesn't waste a roundtrip
|
|
// and the operator gets immediate feedback.
|
|
for (const f of Array.from(files)) {
|
|
const dotIdx = f.name.lastIndexOf('.');
|
|
const ext = dotIdx >= 0 ? f.name.slice(dotIdx).toLowerCase() : '';
|
|
if (!ext || !(EVIDENCE_ALLOWED_EXTENSIONS as readonly string[]).includes(ext)) {
|
|
setDropError(
|
|
`"${f.name}" has an unsupported extension. Accepted: ${EVIDENCE_ALLOWED_EXTENSIONS.join(', ')}.`,
|
|
);
|
|
continue;
|
|
}
|
|
if (f.size > EVIDENCE_MAX_BYTES) {
|
|
setDropError(`"${f.name}" exceeds the 25 MB limit.`);
|
|
continue;
|
|
}
|
|
upload.mutate(f);
|
|
}
|
|
}
|
|
|
|
const apiErr =
|
|
save.error instanceof ApiError
|
|
? save.error
|
|
: upload.error instanceof ApiError
|
|
? upload.error
|
|
: remove.error instanceof ApiError
|
|
? remove.error
|
|
: null;
|
|
|
|
return (
|
|
<Card accent="cyan" className="flex flex-col gap-3" data-testid="blue-zone">
|
|
<SectionHeader prefix="Blue" highlight="Detection" accent="cyan" />
|
|
{apiErr && (
|
|
<Alert accent="red">
|
|
{apiErr.message}
|
|
{typeof apiErr.payload === 'object' &&
|
|
apiErr.payload &&
|
|
'message' in (apiErr.payload as Record<string, unknown>)
|
|
? ` — ${(apiErr.payload as { message?: string }).message}`
|
|
: ''}
|
|
</Alert>
|
|
)}
|
|
<label className="flex flex-col gap-1">
|
|
<span className="font-mono text-2xs uppercase tracking-wider2 text-text-dim">
|
|
Detection level
|
|
</span>
|
|
<select
|
|
value={levelId}
|
|
onChange={(e) => setLevelId(e.target.value)}
|
|
disabled={!canWriteBlue}
|
|
className="rounded-md border border-border bg-bg-card px-2 py-2 font-mono text-xs text-text"
|
|
data-testid="blue-detection-level"
|
|
>
|
|
<option value="">— none —</option>
|
|
{detectionLevels.map((lvl) => (
|
|
<option key={lvl.id} value={lvl.id}>
|
|
{lvl.label_en} ({lvl.key})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<MarkdownField
|
|
label="Comment"
|
|
value={comment}
|
|
onChange={setComment}
|
|
disabled={!canWriteBlue}
|
|
data-testid="blue-comment"
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
accent="cyan"
|
|
onClick={submit}
|
|
disabled={!canWriteBlue || !dirty || save.isPending}
|
|
data-testid="blue-save"
|
|
>
|
|
{save.isPending ? 'Saving…' : 'Save blue fields'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-mono text-2xs uppercase tracking-wider2 text-text-dim">
|
|
Evidence
|
|
</p>
|
|
<div
|
|
className={`rounded-md border-2 border-dashed p-4 text-center ${
|
|
canWriteBlue ? 'border-cyan/60' : 'border-border'
|
|
}`}
|
|
onDragOver={(e) => {
|
|
if (!canWriteBlue) return;
|
|
e.preventDefault();
|
|
}}
|
|
onDrop={(e) => {
|
|
if (!canWriteBlue) return;
|
|
e.preventDefault();
|
|
handleFiles(e.dataTransfer.files);
|
|
}}
|
|
data-testid="evidence-dropzone"
|
|
>
|
|
<p className="font-mono text-2xs text-text-dim">
|
|
{canWriteBlue
|
|
? 'Drag files here or click to pick'
|
|
: 'Read-only — no upload permission'}
|
|
</p>
|
|
{canWriteBlue && (
|
|
<p
|
|
className="mt-1 font-mono text-3xs uppercase tracking-wider2 text-text-dim"
|
|
data-testid="evidence-allowed-formats"
|
|
>
|
|
Accepted: {EVIDENCE_ALLOWED_EXTENSIONS.join(' · ')} ·{' '}
|
|
max 25 MB / file
|
|
</p>
|
|
)}
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple
|
|
// `accept` is the native filter the OS file-picker honours. It
|
|
// accepts a comma-separated list of extensions or MIME types.
|
|
// Servers re-check both, so this is a UX nicety, not a security
|
|
// boundary.
|
|
accept={EVIDENCE_ALLOWED_EXTENSIONS.join(',')}
|
|
className="hidden"
|
|
onChange={(e) => handleFiles(e.target.files)}
|
|
data-testid="evidence-file-input"
|
|
/>
|
|
{canWriteBlue && (
|
|
<Button
|
|
variant="ghost"
|
|
accent="cyan"
|
|
className="mt-2"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={upload.isPending}
|
|
data-testid="evidence-pick"
|
|
>
|
|
{upload.isPending ? 'Uploading…' : 'Pick files'}
|
|
</Button>
|
|
)}
|
|
{dropError && (
|
|
<p className="mt-2 font-mono text-2xs text-red">{dropError}</p>
|
|
)}
|
|
</div>
|
|
|
|
{test.evidence.length === 0 ? (
|
|
<p className="font-mono text-2xs text-text-dim">No evidence yet.</p>
|
|
) : (
|
|
<table className="w-full font-mono text-2xs">
|
|
<thead>
|
|
<tr className="text-text-dim uppercase tracking-wider2">
|
|
<th className="text-left py-1">File</th>
|
|
<th className="text-left py-1">Size</th>
|
|
<th className="text-left py-1">By</th>
|
|
<th className="text-left py-1">SHA256</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody data-testid="evidence-list">
|
|
{test.evidence.map((ev) => (
|
|
<tr
|
|
key={ev.id}
|
|
className="border-t border-border/40"
|
|
data-testid={`evidence-row-${ev.id}`}
|
|
>
|
|
<td className="py-1 text-text-bright">{ev.original_filename}</td>
|
|
<td className="py-1">{formatBytes(ev.size_bytes)}</td>
|
|
<td className="py-1 text-text">
|
|
{ev.uploaded_by_email ?? '<deleted>'}
|
|
</td>
|
|
<td className="py-1">
|
|
<code className="text-text-dim">{ev.sha256.slice(0, 12)}…</code>
|
|
</td>
|
|
<td className="py-1 text-right">
|
|
<a
|
|
href={`/api/v1/evidence/${ev.id}?download=true`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-cyan font-mono text-2xs"
|
|
data-testid={`evidence-download-${ev.id}`}
|
|
>
|
|
download
|
|
</a>
|
|
{canWriteBlue && (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (
|
|
window.confirm(
|
|
`Soft-delete evidence "${ev.original_filename}"?`,
|
|
)
|
|
) {
|
|
remove.mutate(ev.id);
|
|
}
|
|
}}
|
|
className="ml-2 text-rose font-mono text-2xs"
|
|
data-testid={`evidence-delete-${ev.id}`}
|
|
disabled={remove.isPending}
|
|
>
|
|
delete
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// --------------------------------------------------------------------------- //
|
|
// Top-level page //
|
|
// --------------------------------------------------------------------------- //
|
|
|
|
export function MissionTestPage() {
|
|
const params = useParams<{ id: string; testId: string }>();
|
|
const missionId = params.id ?? '';
|
|
const testId = params.testId ?? '';
|
|
const navigate = useNavigate();
|
|
const { state } = useAuth();
|
|
const qc = useQueryClient();
|
|
|
|
const detail = useMissionTest(missionId, testId);
|
|
const levels = useDetectionLevels(
|
|
!!state.user &&
|
|
(state.user.is_admin ||
|
|
state.user.permissions.includes('detection_level.read')),
|
|
);
|
|
|
|
const onActivityTouched = useCallback(() => {
|
|
qc.invalidateQueries({
|
|
queryKey: missionTestKeys.detail(missionId, testId),
|
|
});
|
|
}, [qc, missionId, testId]);
|
|
|
|
useActivityWatcher(missionId, testId, onActivityTouched);
|
|
|
|
const transition = useMutation({
|
|
mutationFn: (body: TestTransitionPayload) =>
|
|
apiPost<MissionTestDetail>(
|
|
`/missions/${missionId}/tests/${testId}/transition`,
|
|
body,
|
|
),
|
|
onSuccess: (next) => {
|
|
qc.setQueryData(missionTestKeys.detail(missionId, testId), next);
|
|
qc.invalidateQueries({ queryKey: missionKeys.detail(missionId) });
|
|
},
|
|
});
|
|
|
|
const test = detail.data;
|
|
|
|
const perms = useMemo(() => {
|
|
const isAdmin = !!state.user?.is_admin;
|
|
const codes = state.user?.permissions ?? [];
|
|
return {
|
|
isAdmin,
|
|
canWriteRed: isAdmin || codes.includes('mission.write_red_fields'),
|
|
canWriteBlue: isAdmin || codes.includes('mission.write_blue_fields'),
|
|
};
|
|
}, [state.user]);
|
|
|
|
if (!missionId || !testId) {
|
|
return (
|
|
<Alert accent="red">Missing mission or test id in URL.</Alert>
|
|
);
|
|
}
|
|
if (detail.isLoading) {
|
|
return <p className="font-mono text-xs text-text-dim">Loading…</p>;
|
|
}
|
|
if (detail.error instanceof ApiError && detail.error.status === 404) {
|
|
return (
|
|
<Alert accent="rose">
|
|
Mission test not found, or you are not a member of this mission.
|
|
</Alert>
|
|
);
|
|
}
|
|
if (!test) {
|
|
return <Alert accent="red">Failed to load mission test.</Alert>;
|
|
}
|
|
|
|
const allowedTransitions = VALID_TEST_TRANSITIONS[test.state] ?? [];
|
|
const transitionErr =
|
|
transition.error instanceof ApiError ? transition.error : null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4" data-testid="mission-test-page">
|
|
<div className="flex flex-wrap items-baseline justify-between gap-2">
|
|
<div>
|
|
<Link
|
|
to={`/missions/${missionId}`}
|
|
className="font-mono text-2xs uppercase tracking-wider2 text-text-dim hover:text-text-bright"
|
|
data-testid="back-to-mission"
|
|
>
|
|
← Back to mission
|
|
</Link>
|
|
<h1 className="mt-1 font-mono text-xl font-bold text-text-bright">
|
|
{test.snapshot_name}
|
|
</h1>
|
|
<p className="font-mono text-2xs text-text-dim">
|
|
Last touched{' '}
|
|
<span data-testid="last-actor-rel">{formatRelative(test.updated_at)}</span>
|
|
{test.last_actor_email
|
|
? ` by ${test.last_actor_display_name ?? test.last_actor_email}`
|
|
: ''}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span data-testid="state-pill">
|
|
<Tag accent={MISSION_TEST_STATE_ACCENT[test.state]}>
|
|
{MISSION_TEST_STATE_LABEL[test.state]}
|
|
</Tag>
|
|
</span>
|
|
{allowedTransitions.map((target) => (
|
|
<Button
|
|
key={target}
|
|
accent={MISSION_TEST_STATE_ACCENT[target]}
|
|
variant="ghost"
|
|
onClick={() => transition.mutate({ target_state: target })}
|
|
disabled={transition.isPending}
|
|
data-testid={`transition-${target}`}
|
|
>
|
|
→ {MISSION_TEST_STATE_LABEL[target]}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{transitionErr && (
|
|
<Alert accent="red">
|
|
{transitionErr.payload &&
|
|
typeof transitionErr.payload === 'object' &&
|
|
'message' in (transitionErr.payload as Record<string, unknown>)
|
|
? `${transitionErr.message} — ${(transitionErr.payload as { message?: string }).message}`
|
|
: transitionErr.message}
|
|
</Alert>
|
|
)}
|
|
|
|
<Card className="flex flex-col gap-2">
|
|
<div className="flex flex-wrap gap-2">
|
|
{test.mitre_tags.map((tag) => (
|
|
<Tag accent="cyan" key={`${tag.kind}-${tag.external_id}`}>
|
|
{tag.external_id} — {tag.name}
|
|
</Tag>
|
|
))}
|
|
<Tag accent="teal">OPSEC: {test.snapshot_opsec_level}</Tag>
|
|
</div>
|
|
{test.snapshot_objective && (
|
|
<p className="font-mono text-xs text-text">
|
|
<span className="text-text-dim">Objective: </span>
|
|
{test.snapshot_objective}
|
|
</p>
|
|
)}
|
|
{test.snapshot_procedure_md && (
|
|
<details className="font-mono text-2xs text-text-dim" data-testid="procedure">
|
|
<summary className="cursor-pointer text-text">Procedure</summary>
|
|
<pre className="mt-1 whitespace-pre-wrap text-text">
|
|
{test.snapshot_procedure_md}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
{test.snapshot_expected_red_md && (
|
|
<details className="font-mono text-2xs text-text-dim">
|
|
<summary className="cursor-pointer text-text">Expected (red)</summary>
|
|
<pre className="mt-1 whitespace-pre-wrap text-text">
|
|
{test.snapshot_expected_red_md}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
{test.snapshot_expected_blue_md && (
|
|
<details className="font-mono text-2xs text-text-dim">
|
|
<summary className="cursor-pointer text-text">Expected (blue)</summary>
|
|
<pre className="mt-1 whitespace-pre-wrap text-text">
|
|
{test.snapshot_expected_blue_md}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
<RedZone test={test} missionId={missionId} canWriteRed={perms.canWriteRed} />
|
|
<BlueZone
|
|
test={test}
|
|
missionId={missionId}
|
|
canWriteBlue={perms.canWriteBlue}
|
|
detectionLevels={levels.data?.items ?? []}
|
|
/>
|
|
</div>
|
|
|
|
{/* Navigation hint when state moves to archived parent — out of M7 scope, but
|
|
we still let the page render. */}
|
|
{detail.error instanceof ApiError &&
|
|
detail.error.status >= 400 &&
|
|
detail.error.status < 500 && (
|
|
<Button accent="cyan" onClick={() => navigate(`/missions/${missionId}`)}>
|
|
Back to mission
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|