feat(frontend): sprint 5 — templates CRUD pages + nav + picker modal + dropdown
- types.ts: SimulationTemplate, SimulationTemplateCreateInput, SimulationTemplatePatchInput, extend SimulationCreateInput with template_id - api/templates.ts: listTemplates, getTemplate, createTemplate, updateTemplate, deleteTemplate - hooks/useTemplates.ts: useTemplates, useTemplate, useCreateTemplate, useUpdateTemplate, useDeleteTemplate (TanStack Query, invalidates ["templates"]) - TemplatesListPage: /admin/templates — table (name, MITRE count, created by, updated), New/Edit/Delete actions, loading/error/empty states - TemplateFormPage: /admin/templates/new + /admin/templates/:id/edit — controlled form with inline MITRE field (picker + matrix modal), ConfirmDialog for delete - TemplatePickerModal: reusable modal listing templates with empty state (AC-27.6) - SimulationList: replace "New simulation" link with split-button dropdown (Blank → /simulations/new | From template… → TemplatePickerModal + POST template_id) - Layout: "Templates" nav link (admin | redteam, before "Users") - App.tsx: /admin/templates routes gated roles=["admin","redteam"] - 26 new Vitest tests (118 total, 92 original preserved) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
268
frontend/src/pages/TemplateFormPage.tsx
Normal file
268
frontend/src/pages/TemplateFormPage.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Save, Grid2x2 } from 'lucide-react';
|
||||
import { extractApiError } from '@/api/client';
|
||||
import type { MitreTechnique, MitreTacticRef } from '@/api/types';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { useCreateTemplate, useDeleteTemplate, useTemplate, useUpdateTemplate } from '@/hooks/useTemplates';
|
||||
import { FormField, TextArea, TextInput } from '@/components/FormField';
|
||||
import { LoadingState } from '@/components/LoadingState';
|
||||
import { ErrorState } from '@/components/ErrorState';
|
||||
import { ConfirmDialog } from '@/components/ConfirmDialog';
|
||||
import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag';
|
||||
import { MitreTechniquePicker } from '@/components/MitreTechniquePicker';
|
||||
import { MitreMatrixModal } from '@/components/MitreMatrixModal';
|
||||
import type { MatrixSelection } from '@/components/MitreMatrixModal';
|
||||
|
||||
interface FormState {
|
||||
name: string;
|
||||
description: string;
|
||||
commands: string;
|
||||
prerequisites: string;
|
||||
}
|
||||
|
||||
const EMPTY: FormState = { name: '', description: '', commands: '', prerequisites: '' };
|
||||
|
||||
export function TemplateFormPage(): JSX.Element {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const templateId = id ? Number(id) : undefined;
|
||||
const isNew = !templateId;
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { push } = useToast();
|
||||
|
||||
const existing = useTemplate(templateId);
|
||||
const createMutation = useCreateTemplate();
|
||||
const updateMutation = useUpdateTemplate(templateId ?? 0);
|
||||
const deleteMutation = useDeleteTemplate();
|
||||
|
||||
const [form, setForm] = useState<FormState>(EMPTY);
|
||||
const [techniques, setTechniques] = useState<MitreTechnique[]>([]);
|
||||
const [tactics, setTactics] = useState<MitreTacticRef[]>([]);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [showMatrix, setShowMatrix] = useState(false);
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (existing.data) {
|
||||
const t = existing.data;
|
||||
setForm({
|
||||
name: t.name,
|
||||
description: t.description ?? '',
|
||||
commands: t.commands ?? '',
|
||||
prerequisites: t.prerequisites ?? '',
|
||||
});
|
||||
setTechniques(t.techniques);
|
||||
setTactics(t.tactics);
|
||||
}
|
||||
}, [existing.data]);
|
||||
|
||||
const isPending = createMutation.isPending || updateMutation.isPending;
|
||||
|
||||
const onSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setFormError(null);
|
||||
if (!form.name.trim()) {
|
||||
setFormError('Name is required');
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
description: form.description.trim() || null,
|
||||
commands: form.commands.trim() || null,
|
||||
prerequisites: form.prerequisites.trim() || null,
|
||||
technique_ids: techniques.map((t) => t.id),
|
||||
tactic_ids: tactics.map((t) => t.id),
|
||||
};
|
||||
try {
|
||||
if (isNew) {
|
||||
const created = await createMutation.mutateAsync(payload);
|
||||
push('Template created', 'success');
|
||||
navigate(`/admin/templates/${created.id}/edit`, { replace: true });
|
||||
} else {
|
||||
await updateMutation.mutateAsync(payload);
|
||||
push('Template saved', 'success');
|
||||
}
|
||||
} catch (err) {
|
||||
setFormError(extractApiError(err, 'Could not save template'));
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = async () => {
|
||||
if (!templateId) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(templateId);
|
||||
push('Template deleted', 'success');
|
||||
navigate('/admin/templates', { replace: true });
|
||||
} catch (err) {
|
||||
push(extractApiError(err, 'Could not delete template'), 'error');
|
||||
}
|
||||
setShowDeleteConfirm(false);
|
||||
};
|
||||
|
||||
const handleMatrixApply = ({ techniques: newTech, tactics: newTac }: MatrixSelection) => {
|
||||
setShowMatrix(false);
|
||||
setTechniques(newTech);
|
||||
setTactics(newTac);
|
||||
};
|
||||
|
||||
const handlePickerSelect = (technique: MitreTechnique) => {
|
||||
if (techniques.some((t) => t.id === technique.id)) return;
|
||||
setTechniques((prev) => [...prev, technique]);
|
||||
setShowPicker(false);
|
||||
};
|
||||
|
||||
if (!isNew && existing.isLoading) return <LoadingState label="Loading template…" />;
|
||||
if (!isNew && existing.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
message={extractApiError(existing.error, 'Could not load template')}
|
||||
onRetry={() => existing.refetch()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-xl">
|
||||
<header className="flex items-start justify-between gap-md">
|
||||
<div className="flex flex-col gap-sm">
|
||||
<Link to="/admin/templates" className="btn-text-link text-[14px]">
|
||||
← Back to templates
|
||||
</Link>
|
||||
<h1 className="text-[44px] font-medium leading-none">
|
||||
{isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
|
||||
</h1>
|
||||
</div>
|
||||
{!isNew ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-text-link text-bloom-deep"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<form onSubmit={onSubmit} className="card-product flex flex-col gap-lg max-w-2xl">
|
||||
<FormField label="Name" htmlFor="tpl-name" required error={formError}>
|
||||
<TextInput
|
||||
id="tpl-name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
disabled={isPending}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Description" htmlFor="tpl-desc">
|
||||
<TextArea
|
||||
id="tpl-desc"
|
||||
value={form.description}
|
||||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||||
disabled={isPending}
|
||||
placeholder="What does this simulation cover?"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Commands" htmlFor="tpl-commands" hint="One command per line">
|
||||
<TextArea
|
||||
id="tpl-commands"
|
||||
value={form.commands}
|
||||
onChange={(e) => setForm({ ...form, commands: e.target.value })}
|
||||
disabled={isPending}
|
||||
placeholder="e.g. mimikatz.exe sekurlsa::logonpasswords"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Prerequisites" htmlFor="tpl-prereqs">
|
||||
<TextArea
|
||||
id="tpl-prereqs"
|
||||
value={form.prerequisites}
|
||||
onChange={(e) => setForm({ ...form, prerequisites: e.target.value })}
|
||||
disabled={isPending}
|
||||
placeholder="e.g. Local admin access required"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="flex flex-col gap-sm">
|
||||
<span className="text-[14px] font-medium text-ink">MITRE Techniques & Tactics</span>
|
||||
|
||||
{techniques.length === 0 && tactics.length === 0 ? (
|
||||
<p className="text-[13px] text-graphite">No techniques selected</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-xs" data-testid="techniques-tag-list">
|
||||
{tactics.map((t) => (
|
||||
<MitreTacticTag
|
||||
key={t.id}
|
||||
tactic={t}
|
||||
onRemove={() => setTactics((prev) => prev.filter((x) => x.id !== t.id))}
|
||||
/>
|
||||
))}
|
||||
{techniques.map((t) => (
|
||||
<MitreTechniqueTag
|
||||
key={t.id}
|
||||
technique={t}
|
||||
onRemove={() => setTechniques((prev) => prev.filter((x) => x.id !== t.id))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-xs max-w-sm">
|
||||
<div className="flex-1">
|
||||
{showPicker ? (
|
||||
<MitreTechniquePicker onSelect={handlePickerSelect} />
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="text-input h-9 text-[13px] text-graphite text-left cursor-text w-full"
|
||||
onClick={() => setShowPicker(true)}
|
||||
>
|
||||
Search technique (e.g. T1059)…
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open MITRE matrix"
|
||||
onClick={() => { setShowPicker(false); setShowMatrix(true); }}
|
||||
className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-md border border-steel text-graphite hover:text-ink hover:border-ink transition-colors"
|
||||
>
|
||||
<Grid2x2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-md pt-xs border-t border-hairline">
|
||||
<button type="submit" className="btn-primary" disabled={isPending}>
|
||||
<Save size={14} aria-hidden /> {isPending ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
<Link to="/admin/templates" className="btn-outline-ink">
|
||||
Cancel
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<MitreMatrixModal
|
||||
isOpen={showMatrix}
|
||||
initialTechniques={techniques}
|
||||
initialTactics={tactics}
|
||||
onApply={handleMatrixApply}
|
||||
onCancel={() => setShowMatrix(false)}
|
||||
/>
|
||||
|
||||
{showDeleteConfirm ? (
|
||||
<ConfirmDialog
|
||||
title="Delete template"
|
||||
description={`Delete "${existing.data?.name ?? 'this template'}"? This cannot be undone. Simulations already created from it are unaffected.`}
|
||||
confirmLabel="Delete"
|
||||
onConfirm={onDelete}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
destructive
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
121
frontend/src/pages/TemplatesListPage.tsx
Normal file
121
frontend/src/pages/TemplatesListPage.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { extractApiError } from '@/api/client';
|
||||
import type { SimulationTemplate } from '@/api/types';
|
||||
import { useDeleteTemplate, useTemplates } from '@/hooks/useTemplates';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { LoadingState } from '@/components/LoadingState';
|
||||
import { ErrorState } from '@/components/ErrorState';
|
||||
import { EmptyState } from '@/components/EmptyState';
|
||||
|
||||
function mitreCount(t: SimulationTemplate): number {
|
||||
return t.techniques.length + t.tactics.length;
|
||||
}
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
if (!value) return '—';
|
||||
return value.slice(0, 10);
|
||||
}
|
||||
|
||||
export function TemplatesListPage(): JSX.Element {
|
||||
const { data, isLoading, isError, error, refetch } = useTemplates();
|
||||
const deleteMutation = useDeleteTemplate();
|
||||
const { push } = useToast();
|
||||
|
||||
const onDelete = async (t: SimulationTemplate) => {
|
||||
if (!window.confirm(`Delete template "${t.name}"? This cannot be undone.`)) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(t.id);
|
||||
push('Template deleted', 'success');
|
||||
} catch (err) {
|
||||
push(extractApiError(err, 'Could not delete template'), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-xl">
|
||||
<header className="flex items-end justify-between gap-md">
|
||||
<div>
|
||||
<h1 className="text-[44px] font-medium leading-none">Templates</h1>
|
||||
<p className="text-charcoal text-[16px] mt-sm">
|
||||
Reusable simulation blueprints for red team operations.
|
||||
</p>
|
||||
</div>
|
||||
<Link to="/admin/templates/new" className="btn-primary">
|
||||
<Plus size={14} aria-hidden /> New
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
{isLoading ? <LoadingState label="Loading templates…" /> : null}
|
||||
|
||||
{isError ? (
|
||||
<ErrorState
|
||||
message={extractApiError(error, 'Could not load templates')}
|
||||
onRetry={() => refetch()}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isLoading && !isError && data && data.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No templates yet"
|
||||
description="Create your first template to speed up simulation setup."
|
||||
action={
|
||||
<Link to="/admin/templates/new" className="btn-primary">
|
||||
<Plus size={14} aria-hidden /> New template
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isLoading && !isError && data && data.length > 0 ? (
|
||||
<div className="card-product overflow-hidden p-0">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-cloud border-b border-hairline">
|
||||
<tr className="text-[12px] uppercase tracking-[0.5px] text-graphite">
|
||||
<th className="px-xl py-md">Name</th>
|
||||
<th className="px-xl py-md">MITRE</th>
|
||||
<th className="px-xl py-md">Created by</th>
|
||||
<th className="px-xl py-md">Updated</th>
|
||||
<th className="px-xl py-md text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((t) => (
|
||||
<tr key={t.id} className="border-b border-hairline last:border-0">
|
||||
<td className="px-xl py-md">
|
||||
<Link
|
||||
to={`/admin/templates/${t.id}/edit`}
|
||||
className="text-ink font-medium hover:underline"
|
||||
>
|
||||
{t.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-xl py-md text-charcoal text-[14px]">
|
||||
{mitreCount(t) === 0 ? '—' : mitreCount(t)}
|
||||
</td>
|
||||
<td className="px-xl py-md text-charcoal">{t.created_by.username}</td>
|
||||
<td className="px-xl py-md text-charcoal">{formatDate(t.updated_at)}</td>
|
||||
<td className="px-xl py-md text-right">
|
||||
<div className="inline-flex gap-sm">
|
||||
<Link to={`/admin/templates/${t.id}/edit`} className="btn-text-link">
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-text-link text-bloom-deep"
|
||||
onClick={() => onDelete(t)}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user