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

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();
});
});