knacky/mimic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(frontend): add BackLink helper + dedup 3 hand-rolled instances

Browse Source 
BackLink: ArrowLeft (14px) + caption-md text-graphite hover:text-primary,
instant. Replaces inline Link patterns in EngagementDetailPage (already
committed), SimulationFormPage, and TemplateFormPage. Also migrates
SimulationFormPage Done/SOC banners to AlertBanner.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-21 22:11:17 +02:00
parent 59eaa342a9
commit 9a8c5f52ab
3 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/pages/SimulationFormPage.tsx
View File

@@ -22,6 +22,8 @@ import { MitreTechniquesField } from '@/components/MitreTechniquesField';
import { ExecuteViaC2Modal } from '@/components/ExecuteViaC2Modal';
import { ImportC2HistoryModal } from '@/components/ImportC2HistoryModal';
import { C2TasksPanel } from '@/components/C2TasksPanel';
import { AlertBanner } from '@/components/AlertBanner';
import { BackLink } from '@/components/BackLink';
interface RedteamFormState {
name: string;
@@ -238,9 +240,7 @@ export function SimulationFormPage(): JSX.Element {
return (
<div className="flex flex-col gap-xl max-w-2xl">
<header>
<Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
← Back to engagement
</Link>
<BackLink to={`/engagements/${engagementId}`}>Back to engagement</BackLink>
<h1 className="text-[32px] font-medium leading-none mt-sm">New simulation</h1>
</header>
@@ -279,9 +279,7 @@ export function SimulationFormPage(): 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">
<Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
← Back to engagement
</Link>
<BackLink to={`/engagements/${engagementId}`}>Back to engagement</BackLink>
<h1 className="text-[32px] font-medium leading-none">{rt.name || simulation?.name}</h1>
{status ? (
<div className="flex items-center gap-md">
@@ -298,22 +296,17 @@ export function SimulationFormPage(): JSX.Element {
{/* Done banner */}
{isDone && (
<div
role="status"
className="rounded-none px-xl py-md bg-cloud border border-hairline text-[14px] text-charcoal"
>
<AlertBanner variant="success">
This simulation is <strong>done</strong> and read-only. Use Reopen to make changes.
</div>
</AlertBanner>
)}
{/* SOC banner */}
{socBlocked && (
<div
role="alert"
data-testid="soc-blocked-banner"
className="rounded-none px-xl py-md bg-fog border border-hairline text-[14px] text-charcoal"
>
Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
<div data-testid="soc-blocked-banner">
<AlertBanner variant="warn">
Simulation not yet ready for review — the red team must mark it as &quot;Review required&quot; before you can fill in the SOC section.
</AlertBanner>
</div>
)}

5
frontend/src/pages/TemplateFormPage.tsx
View File

@@ -9,6 +9,7 @@ import { FormField, TextArea, TextInput } from '@/components/FormField';
import { LoadingState } from '@/components/LoadingState';
import { ErrorState } from '@/components/ErrorState';
import { ConfirmDialog } from '@/components/ConfirmDialog';
import { BackLink } from '@/components/BackLink';
import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag';
import { MitreTechniquePicker } from '@/components/MitreTechniquePicker';
import { MitreMatrixModal } from '@/components/MitreMatrixModal';
@@ -127,9 +128,7 @@ 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">
<Link to="/admin/templates" className="btn-text-link text-[14px]">
← Back to templates
</Link>
<BackLink to="/admin/templates">Back to templates</BackLink>
<h1 className="text-[32px] font-medium leading-none">
{isNew ? 'New template' : (existing.data?.name ?? 'Edit template')}
</h1>