feat(frontend): i18n template pages (list, form, picker modal)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Save, Grid2x2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { extractApiError } from '@/api/client';
|
||||
import type { MitreTechnique, MitreTacticRef } from '@/api/types';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
@@ -25,6 +26,7 @@ interface FormState {
|
||||
const EMPTY: FormState = { name: '', description: '', commands: '', prerequisites: '' };
|
||||
|
||||
export function TemplateFormPage(): JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const templateId = id ? Number(id) : undefined;
|
||||
const isNew = !templateId;
|
||||
@@ -47,15 +49,15 @@ export function TemplateFormPage(): JSX.Element {
|
||||
|
||||
useEffect(() => {
|
||||
if (existing.data) {
|
||||
const t = existing.data;
|
||||
const tpl = existing.data;
|
||||
setForm({
|
||||
name: t.name,
|
||||
description: t.description ?? '',
|
||||
commands: t.commands ?? '',
|
||||
prerequisites: t.prerequisites ?? '',
|
||||
name: tpl.name,
|
||||
description: tpl.description ?? '',
|
||||
commands: tpl.commands ?? '',
|
||||
prerequisites: tpl.prerequisites ?? '',
|
||||
});
|
||||
setTechniques(t.techniques);
|
||||
setTactics(t.tactics);
|
||||
setTechniques(tpl.techniques);
|
||||
setTactics(tpl.tactics);
|
||||
}
|
||||
}, [existing.data]);
|
||||
|
||||
@@ -65,7 +67,7 @@ export function TemplateFormPage(): JSX.Element {
|
||||
e.preventDefault();
|
||||
setFormError(null);
|
||||
if (!form.name.trim()) {
|
||||
setFormError('Name is required');
|
||||
setFormError(t('template.form.validation.nameRequired'));
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
@@ -73,20 +75,20 @@ export function TemplateFormPage(): JSX.Element {
|
||||
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),
|
||||
technique_ids: techniques.map((tech) => tech.id),
|
||||
tactic_ids: tactics.map((tac) => tac.id),
|
||||
};
|
||||
try {
|
||||
if (isNew) {
|
||||
const created = await createMutation.mutateAsync(payload);
|
||||
push('Template created', 'success');
|
||||
push(t('template.form.toast.created'), 'success');
|
||||
navigate(`/admin/templates/${created.id}/edit`, { replace: true });
|
||||
} else {
|
||||
await updateMutation.mutateAsync(payload);
|
||||
push('Template saved', 'success');
|
||||
push(t('template.form.toast.saved'), 'success');
|
||||
}
|
||||
} catch (err) {
|
||||
setFormError(extractApiError(err, 'Could not save template'));
|
||||
setFormError(extractApiError(err, t('template.form.errorSave')));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -94,10 +96,10 @@ export function TemplateFormPage(): JSX.Element {
|
||||
if (!templateId) return;
|
||||
try {
|
||||
await deleteMutation.mutateAsync(templateId);
|
||||
push('Template deleted', 'success');
|
||||
push(t('template.form.toast.deleted'), 'success');
|
||||
navigate('/admin/templates', { replace: true });
|
||||
} catch (err) {
|
||||
push(extractApiError(err, 'Could not delete template'), 'error');
|
||||
push(extractApiError(err, t('template.form.errorDelete')), 'error');
|
||||
}
|
||||
setShowDeleteConfirm(false);
|
||||
};
|
||||
@@ -109,16 +111,16 @@ export function TemplateFormPage(): JSX.Element {
|
||||
};
|
||||
|
||||
const handlePickerSelect = (technique: MitreTechnique) => {
|
||||
if (techniques.some((t) => t.id === technique.id)) return;
|
||||
if (techniques.some((tech) => tech.id === technique.id)) return;
|
||||
setTechniques((prev) => [...prev, technique]);
|
||||
setShowPicker(false);
|
||||
};
|
||||
|
||||
if (!isNew && existing.isLoading) return <LoadingState label="Loading template…" />;
|
||||
if (!isNew && existing.isLoading) return <LoadingState label={t('template.form.loading')} />;
|
||||
if (!isNew && existing.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
message={extractApiError(existing.error, 'Could not load template')}
|
||||
message={extractApiError(existing.error, t('template.form.errorLoad'))}
|
||||
onRetry={() => existing.refetch()}
|
||||
/>
|
||||
);
|
||||
@@ -128,9 +130,9 @@ export function TemplateFormPage(): JSX.Element {
|
||||
<div className="flex flex-col gap-xl">
|
||||
<header className="flex items-start justify-between gap-md">
|
||||
<div className="flex flex-col gap-sm">
|
||||
<BackLink to="/admin/templates">Back to templates</BackLink>
|
||||
<BackLink to="/admin/templates">{t('engagement.detail.backTo')}</BackLink>
|
||||
<h1 className="text-[32px] font-medium leading-none">
|
||||
{isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
|
||||
{isNew ? t('template.form.title.new') : (existing.data?.name ?? t('template.form.title.edit'))}
|
||||
</h1>
|
||||
</div>
|
||||
{!isNew ? (
|
||||
@@ -140,13 +142,13 @@ export function TemplateFormPage(): JSX.Element {
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Delete
|
||||
{t('template.form.btn.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}>
|
||||
<FormField label={t('template.form.field.name')} htmlFor="tpl-name" required error={formError}>
|
||||
<TextInput
|
||||
id="tpl-name"
|
||||
value={form.name}
|
||||
@@ -155,56 +157,56 @@ export function TemplateFormPage(): JSX.Element {
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Description" htmlFor="tpl-desc">
|
||||
<FormField label={t('template.form.field.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?"
|
||||
placeholder={t('template.form.field.descriptionPlaceholder')}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Commands" htmlFor="tpl-commands" hint="One command per line">
|
||||
<FormField label={t('template.form.field.commands')} htmlFor="tpl-commands" hint={t('template.form.field.commandsHint')}>
|
||||
<TextArea
|
||||
id="tpl-commands"
|
||||
value={form.commands}
|
||||
onChange={(e) => setForm({ ...form, commands: e.target.value })}
|
||||
disabled={isPending}
|
||||
placeholder="e.g. mimikatz.exe sekurlsa::logonpasswords"
|
||||
placeholder={t('template.form.field.commandsPlaceholder')}
|
||||
className="font-mono text-[14px]"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Prerequisites" htmlFor="tpl-prereqs">
|
||||
<FormField label={t('template.form.field.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"
|
||||
placeholder={t('template.form.field.prerequisitesPlaceholder')}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="flex flex-col gap-sm">
|
||||
<span className="text-[14px] font-medium text-ink">MITRE Techniques & Tactics</span>
|
||||
<span className="text-[14px] font-medium text-ink">{t('template.form.field.mitre')}</span>
|
||||
|
||||
{techniques.length === 0 && tactics.length === 0 ? (
|
||||
<p className="text-[13px] text-graphite">No techniques selected</p>
|
||||
<p className="text-[13px] text-graphite">{t('template.form.field.mitreEmpty')}</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-xs" data-testid="techniques-tag-list">
|
||||
{tactics.map((t) => (
|
||||
{tactics.map((tac) => (
|
||||
<MitreTacticTag
|
||||
key={t.id}
|
||||
tactic={t}
|
||||
onRemove={() => setTactics((prev) => prev.filter((x) => x.id !== t.id))}
|
||||
key={tac.id}
|
||||
tactic={tac}
|
||||
onRemove={() => setTactics((prev) => prev.filter((x) => x.id !== tac.id))}
|
||||
/>
|
||||
))}
|
||||
{techniques.map((t) => (
|
||||
{techniques.map((tech) => (
|
||||
<MitreTechniqueTag
|
||||
key={t.id}
|
||||
technique={t}
|
||||
onRemove={() => setTechniques((prev) => prev.filter((x) => x.id !== t.id))}
|
||||
key={tech.id}
|
||||
technique={tech}
|
||||
onRemove={() => setTechniques((prev) => prev.filter((x) => x.id !== tech.id))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -220,13 +222,13 @@ export function TemplateFormPage(): JSX.Element {
|
||||
className="text-input h-9 text-[13px] text-graphite text-left cursor-text w-full"
|
||||
onClick={() => setShowPicker(true)}
|
||||
>
|
||||
Search technique (e.g. T1059)…
|
||||
{t('template.form.field.mitreSearch')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open MITRE matrix"
|
||||
aria-label={t('template.form.field.mitreOpenMatrix')}
|
||||
onClick={() => { setShowPicker(false); setShowMatrix(true); }}
|
||||
className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-none border border-steel text-graphite hover:text-ink hover:border-ink"
|
||||
>
|
||||
@@ -237,10 +239,10 @@ export function TemplateFormPage(): JSX.Element {
|
||||
|
||||
<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'}
|
||||
<Save size={14} aria-hidden /> {isPending ? t('template.form.btn.saving') : t('template.form.btn.save')}
|
||||
</button>
|
||||
<Link to="/admin/templates" className="btn-outline-ink">
|
||||
Cancel
|
||||
{t('template.form.btn.cancel')}
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
@@ -255,9 +257,10 @@ export function TemplateFormPage(): JSX.Element {
|
||||
|
||||
{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"
|
||||
title={t('template.form.deleteConfirm.title')}
|
||||
description={t('template.form.deleteConfirm.desc')}
|
||||
confirmLabel={t('template.form.deleteConfirm.confirm')}
|
||||
cancelLabel={t('template.form.deleteConfirm.cancel')}
|
||||
onConfirm={onDelete}
|
||||
onCancel={() => setShowDeleteConfirm(false)}
|
||||
destructive
|
||||
|
||||
Reference in New Issue
Block a user