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

feat(frontend): sprint 4 — dark mode + matrix overhaul + tactic selection + done read-only + UI polish

Browse Source 
US-17: fix duplicate "Create engagement" button, icon conventions (Save/RotateCcw/Grid2x2), UsersAdminPage form baseline alignment
US-18: done status fully read-only + Reopen button (done → review_required) for all roles
US-19: invalidate engagement queries on simulation PATCH/transition for auto-status propagation
US-20: MitreMatrixModal rewritten — CSS grid 12-column layout, no horizontal scroll, attack.mitre.org compact look
US-21: tactic header clickable in matrix, tactic chips (MitreTacticTag) in field, single atomic PATCH with technique_ids + tactic_ids
US-22: MitreTechniquesField chips-only area + inline search input + matrix icon button; chips show ID-only (name in title=)
US-23: useTheme hook — 3-state light/dark/system, CSS variables, Tailwind darkMode class, localStorage persistence

92/92 tests passing, typecheck and lint clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-05-27 20:06:01 +02:00
parent d5ab1fd26f
commit f5ea9d16af
21 changed files with 721 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/tests/MitreMatrixModal.test.tsx
View File

@@ -44,6 +44,8 @@ const SELECTION: MitreTechnique[] = [
{ id: 'T1078', name: 'Valid Accounts', tactics: ['initial-access'] },
];
const NO_TACTICS: never[] = [];
describe('MitreMatrixModal', () => {
let mock: MockAdapter;
@@ -58,14 +60,26 @@ describe('MitreMatrixModal', () => {
it('returns null when isOpen=false', () => {
const { container } = renderWithProviders(
<MitreMatrixModal isOpen={false} initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen={false}
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
expect(container.firstChild).toBeNull();
});
it('renders dialog with tactic columns when open', async () => {
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => {
expect(screen.getByText('Initial Access')).toBeInTheDocument();
@@ -75,7 +89,13 @@ describe('MitreMatrixModal', () => {
it('renders techniques for each tactic', async () => {
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => {
expect(screen.getByText('T1078')).toBeInTheDocument();
@@ -88,12 +108,17 @@ describe('MitreMatrixModal', () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={onApply} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={onApply}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
// Click the label button for T1078 to select it
const t1078Btn = screen.getAllByRole('button').find(
(btn) => btn.textContent?.includes('T1078') && !btn.getAttribute('aria-label'),
);
@@ -102,7 +127,9 @@ describe('MitreMatrixModal', () => {
await user.click(screen.getByRole('button', { name: /Apply/i }));
expect(onApply).toHaveBeenCalledWith(
expect.arrayContaining([expect.objectContaining({ id: 'T1078' })]),
expect.objectContaining({
techniques: expect.arrayContaining([expect.objectContaining({ id: 'T1078' })]),
}),
);
});
@@ -112,7 +139,13 @@ describe('MitreMatrixModal', () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={onApply} onCancel={onCancel} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={onApply}
onCancel={onCancel}
/>,
);
await user.click(screen.getByRole('button', { name: /Cancel/i }));
@@ -126,7 +159,13 @@ describe('MitreMatrixModal', () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={onCancel} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={onCancel}
/>,
);
await user.keyboard('{Escape}');
@@ -134,21 +173,31 @@ describe('MitreMatrixModal', () => {
expect(onCancel).toHaveBeenCalled();
});
it('shows initial selection as selected', async () => {
it('shows initial technique selection as selected (count in header)', async () => {
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={SELECTION} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={SELECTION}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
// T1078 should show selected count in tactic header
expect(screen.getByText('1 selected')).toBeInTheDocument();
expect(screen.getByText(/1 sel\./i)).toBeInTheDocument();
});
it('search filter narrows visible techniques', async () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
@@ -156,7 +205,6 @@ describe('MitreMatrixModal', () => {
const searchInput = screen.getByPlaceholderText(/Filter techniques/i);
await user.type(searchInput, 'T1059');
// T1059 column should be visible, T1078 should not
expect(screen.queryByText('T1078')).toBeNull();
expect(screen.getByText('T1059')).toBeInTheDocument();
});
@@ -164,64 +212,84 @@ describe('MitreMatrixModal', () => {
it('chevron expands subtechniques', async () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
// Subtechniques should not be visible initially
expect(screen.queryByText(/Default Accounts/)).toBeNull();
// Click the expand chevron for T1078
const expandBtn = screen.getByRole('button', { name: /Expand T1078/i });
await user.click(expandBtn);
expect(screen.getByText(/Default Accounts/)).toBeInTheDocument();
});
it('Apply button shows technique count', async () => {
it('Apply button shows item count when techniques selected', async () => {
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={SELECTION} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={SELECTION}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => {
expect(screen.getByRole('button', { name: /Apply 1 technique/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Apply 1 item/i })).toBeInTheDocument();
});
});
it('Apply button is disabled when no techniques selected and no initial selection', async () => {
it('Apply button is disabled when nothing selected and no initial selection', async () => {
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
// Label is "Clear all" when totalSelected === 0, but it's disabled when initialSelection is also empty
const applyBtn = screen.getByRole('button', { name: /Clear all/i });
expect(applyBtn).toBeDisabled();
});
it('Apply button shows "Clear all" and stays enabled when initial selection is deselected', async () => {
it('Apply button shows "Clear all" and is enabled when initial selection is deselected', async () => {
const onApply = vi.fn();
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={SELECTION} onApply={onApply} onCancel={vi.fn()} />,
<MitreMatrixModal
isOpen
initialTechniques={SELECTION}
initialTactics={NO_TACTICS}
onApply={onApply}
onCancel={vi.fn()}
/>,
);
await waitFor(() => screen.getByText('T1078'));
// Deselect T1078 (it was pre-selected)
const t1078Btn = screen.getAllByRole('button').find(
(btn) => btn.textContent?.includes('T1078') && !btn.getAttribute('aria-label'),
);
await user.click(t1078Btn!);
// Button should show "Clear all" and be enabled (user explicitly clearing the list)
const applyBtn = screen.getByRole('button', { name: /Clear all/i });
expect(applyBtn).not.toBeDisabled();
await user.click(applyBtn);
expect(onApply).toHaveBeenCalledWith([]);
expect(onApply).toHaveBeenCalledWith(
expect.objectContaining({ techniques: [], tactics: [] }),
);
});
it('backdrop click calls onCancel', async () => {
@@ -229,10 +297,15 @@ describe('MitreMatrixModal', () => {
const user = userEvent.setup();
renderWithProviders(
<MitreMatrixModal isOpen initialSelection={[]} onApply={vi.fn()} onCancel={onCancel} />,
<MitreMatrixModal
isOpen
initialTechniques={[]}
initialTactics={NO_TACTICS}
onApply={vi.fn()}
onCancel={onCancel}
/>,
);
// Click the backdrop (the fixed inset div behind the modal)
const backdrop = document.querySelector('.bg-ink\\/60') as HTMLElement;
if (backdrop) await user.click(backdrop);

44
frontend/tests/MitreTechniqueTag.test.tsx
View File

@@ -1,18 +1,22 @@
import { describe, expect, it, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MitreTechniqueTag } from '@/components/MitreTechniqueTag';
import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag';
import { renderWithProviders } from './utils';
import type { MitreTacticRef } from '@/api/types';
const TECHNIQUE = { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] };
const TACTIC: MitreTacticRef = { id: 'TA0007', name: 'Discovery' };
describe('MitreTechniqueTag', () => {
it('renders id and name', () => {
it('renders id and name in title attribute (AC-22.2)', () => {
renderWithProviders(
<MitreTechniqueTag technique={TECHNIQUE} onRemove={vi.fn()} />,
);
expect(screen.getByText('T1059')).toBeInTheDocument();
expect(screen.getByText(/Command and Scripting Interpreter/)).toBeInTheDocument();
// Name is in title= only, not as visible text
expect(screen.getByTitle(/Command and Scripting Interpreter/)).toBeInTheDocument();
expect(screen.queryByText(/Command and Scripting Interpreter/)).toBeNull();
});
it('shows remove button when not disabled', () => {
@@ -39,3 +43,37 @@ describe('MitreTechniqueTag', () => {
expect(screen.queryByRole('button', { name: /Remove/i })).toBeNull();
});
});
describe('MitreTacticTag', () => {
it('renders tactic id with title containing name', () => {
renderWithProviders(
<MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} />,
);
expect(screen.getByText('TA0007')).toBeInTheDocument();
expect(screen.getByTitle(/Discovery/)).toBeInTheDocument();
});
it('shows remove button when not disabled', () => {
renderWithProviders(
<MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} />,
);
expect(screen.getByRole('button', { name: /Remove TA0007/i })).toBeInTheDocument();
});
it('clicking × calls onRemove', async () => {
const onRemove = vi.fn();
const user = userEvent.setup();
renderWithProviders(
<MitreTacticTag tactic={TACTIC} onRemove={onRemove} />,
);
await user.click(screen.getByRole('button', { name: /Remove TA0007/i }));
expect(onRemove).toHaveBeenCalledOnce();
});
it('hides remove button when disabled', () => {
renderWithProviders(
<MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} disabled />,
);
expect(screen.queryByRole('button', { name: /Remove/i })).toBeNull();
});
});

115
frontend/tests/MitreTechniquesField.test.tsx
View File

@@ -5,10 +5,11 @@ import MockAdapter from 'axios-mock-adapter';
import { apiClient } from '@/api/client';
import { MitreTechniquesField } from '@/components/MitreTechniquesField';
import { renderWithProviders } from './utils';
import type { MitreTechnique } from '@/api/types';
import type { MitreTechnique, MitreTacticRef } from '@/api/types';
const T1059: MitreTechnique = { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] };
const T1078: MitreTechnique = { id: 'T1078', name: 'Valid Accounts', tactics: ['initial-access'] };
const TA0007: MitreTacticRef = { id: 'TA0007', name: 'Discovery' };
vi.mock('@/hooks/useAuth', () => ({
useAuth: () => ({
@@ -23,6 +24,15 @@ vi.mock('@/hooks/useAuth', () => ({
}),
}));
const SIM_RESPONSE = {
id: 7, engagement_id: 42, name: 'test', techniques: [], tactics: [],
description: null, commands: null, prerequisites: null,
executed_at: null, execution_result: null, log_source: null,
logs: null, soc_comment: null, incident_number: null,
status: 'pending', created_at: '2026-01-01', updated_at: null,
created_by: { id: 1, username: 'alice' },
};
describe('MitreTechniquesField', () => {
let mock: MockAdapter;
@@ -34,61 +44,54 @@ describe('MitreTechniquesField', () => {
mock.restore();
});
it('shows empty state message when no techniques', () => {
it('shows empty state message when no techniques or tactics', () => {
renderWithProviders(
<MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[]} tactics={[]} simulationId={7} engagementId={42} />,
);
expect(screen.getByText(/No techniques selected/i)).toBeInTheDocument();
});
it('renders tags for each technique', () => {
it('renders technique tags for each technique', () => {
renderWithProviders(
<MitreTechniquesField value={[T1059, T1078]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[T1059, T1078]} tactics={[]} simulationId={7} engagementId={42} />,
);
expect(screen.getAllByTestId('mitre-technique-tag')).toHaveLength(2);
expect(screen.getByText('T1059')).toBeInTheDocument();
expect(screen.getByText('T1078')).toBeInTheDocument();
expect(screen.getByTitle(/T1059/)).toBeInTheDocument();
expect(screen.getByTitle(/T1078/)).toBeInTheDocument();
});
it('shows Add technique and Quick search buttons when not disabled', () => {
it('renders tactic chips alongside technique chips', () => {
renderWithProviders(
<MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[T1059]} tactics={[TA0007]} simulationId={7} engagementId={42} />,
);
expect(screen.getByRole('button', { name: /Add technique/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Quick search/i })).toBeInTheDocument();
expect(screen.getAllByTestId('mitre-tactic-tag')).toHaveLength(1);
expect(screen.getByTitle(/TA0007/)).toBeInTheDocument();
});
it('hides action buttons when disabled', () => {
it('shows search input and matrix icon when not disabled', () => {
renderWithProviders(
<MitreTechniquesField value={[T1059]} simulationId={7} engagementId={42} disabled />,
<MitreTechniquesField value={[]} tactics={[]} simulationId={7} engagementId={42} />,
);
expect(screen.queryByRole('button', { name: /Add technique/i })).toBeNull();
expect(screen.queryByRole('button', { name: /Quick search/i })).toBeNull();
expect(screen.getByRole('button', { name: /Open MITRE matrix/i })).toBeInTheDocument();
// The search placeholder button
expect(screen.getByRole('button', { name: /Search technique/i })).toBeInTheDocument();
});
it('× button on tag calls PATCH with technique removed', async () => {
mock.onPatch('/simulations/7').reply(200, {
id: 7, engagement_id: 42, name: 'test', techniques: [],
description: null, commands: null, prerequisites: null,
executed_at: null, execution_result: null, log_source: null,
logs: null, soc_comment: null, incident_number: null,
status: 'pending', created_at: '2026-01-01', updated_at: null,
created_by: { id: 1, username: 'alice' },
});
// also mock GET simulations list for invalidation
it('hides input row when disabled', () => {
renderWithProviders(
<MitreTechniquesField value={[T1059]} tactics={[]} simulationId={7} engagementId={42} disabled />,
);
expect(screen.queryByRole('button', { name: /Open MITRE matrix/i })).toBeNull();
});
it('× button on technique tag calls PATCH with technique removed', async () => {
mock.onPatch('/simulations/7').reply(200, SIM_RESPONSE);
mock.onGet('/engagements/42/simulations').reply(200, []);
mock.onGet('/simulations/7').reply(200, {
id: 7, engagement_id: 42, name: 'test', techniques: [],
description: null, commands: null, prerequisites: null,
executed_at: null, execution_result: null, log_source: null,
logs: null, soc_comment: null, incident_number: null,
status: 'pending', created_at: '2026-01-01', updated_at: null,
created_by: { id: 1, username: 'alice' },
});
mock.onGet('/simulations/7').reply(200, SIM_RESPONSE);
const user = userEvent.setup();
renderWithProviders(
<MitreTechniquesField value={[T1059, T1078]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[T1059, T1078]} tactics={[]} simulationId={7} engagementId={42} />,
);
const removeBtn = screen.getByRole('button', { name: /Remove T1059/i });
@@ -98,15 +101,37 @@ describe('MitreTechniquesField', () => {
expect(mock.history.patch.length).toBe(1);
const body = JSON.parse(mock.history.patch[0].data as string);
expect(body.technique_ids).toEqual(['T1078']);
expect(body.tactic_ids).toEqual([]);
});
});
it('Quick search toggle shows picker input', async () => {
it('× button on tactic tag calls PATCH with tactic removed', async () => {
mock.onPatch('/simulations/7').reply(200, SIM_RESPONSE);
mock.onGet('/engagements/42/simulations').reply(200, []);
mock.onGet('/simulations/7').reply(200, SIM_RESPONSE);
const user = userEvent.setup();
renderWithProviders(
<MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[T1059]} tactics={[TA0007]} simulationId={7} engagementId={42} />,
);
await user.click(screen.getByRole('button', { name: /Quick search/i }));
const removeBtn = screen.getByRole('button', { name: /Remove TA0007/i });
await user.click(removeBtn);
await waitFor(() => {
expect(mock.history.patch.length).toBe(1);
const body = JSON.parse(mock.history.patch[0].data as string);
expect(body.tactic_ids).toEqual([]);
expect(body.technique_ids).toEqual(['T1059']);
});
});
it('clicking search placeholder shows combobox input', async () => {
const user = userEvent.setup();
renderWithProviders(
<MitreTechniquesField value={[]} tactics={[]} simulationId={7} engagementId={42} />,
);
await user.click(screen.getByRole('button', { name: /Search technique/i }));
expect(screen.getByRole('combobox')).toBeInTheDocument();
});
@@ -114,35 +139,29 @@ describe('MitreTechniquesField', () => {
mock.onGet('/mitre/techniques').reply(200, [T1059]);
const user = userEvent.setup();
renderWithProviders(
<MitreTechniquesField value={[T1059]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[T1059]} tactics={[]} simulationId={7} engagementId={42} />,
);
// Open the quick-search picker
await user.click(screen.getByRole('button', { name: /Quick search/i }));
await user.click(screen.getByRole('button', { name: /Search technique/i }));
const combobox = screen.getByRole('combobox');
expect(combobox).toBeInTheDocument();
// Type to trigger the search (debounce is 200ms but fake timers not needed — mock responds immediately)
await user.type(combobox, 'T1059');
// Wait for the option to appear in the listbox
const option = await screen.findByRole('option', { name: /T1059/i });
expect(option).toBeInTheDocument();
// Select it via pointerDown (mirrors the component's onPointerDown handler)
await user.pointer({ target: option, keys: '[MouseLeft>]' });
// Dedup guard should have fired — no PATCH should have been sent
expect(mock.history.patch.length).toBe(0);
});
it('opens matrix modal when Add technique is clicked', async () => {
it('opens matrix modal when matrix icon is clicked', async () => {
mock.onGet('/mitre/matrix').reply(200, []);
const user = userEvent.setup();
renderWithProviders(
<MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
<MitreTechniquesField value={[]} tactics={[]} simulationId={7} engagementId={42} />,
);
await user.click(screen.getByRole('button', { name: /Add technique/i }));
await user.click(screen.getByRole('button', { name: /Open MITRE matrix/i }));
expect(screen.getByRole('dialog')).toBeInTheDocument();
});
});

1
frontend/tests/SimulationFormPage.test.tsx
View File

@@ -12,6 +12,7 @@ const BASE_SIM: Simulation = {
engagement_id: 42,
name: 'Recon test',
techniques: [],
tactics: [],
description: 'Some description',
commands: 'whoami\nipconfig',
prerequisites: null,

1
frontend/tests/SimulationList.test.tsx
View File

@@ -12,6 +12,7 @@ const SIMULATIONS: Simulation[] = [
engagement_id: 42,
name: 'Lateral movement test',
techniques: [{ id: 'T1021', name: 'Remote Services', tactics: ['lateral-movement'] }],
tactics: [],
description: null,
commands: null,
prerequisites: null,