@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

package/components/routes/cases/detail/CaseTimeline.js

@@ -0,0 +1,106 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Autocomplete, Box, Chip, Divider, Skeleton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { capitalize } from 'lodash-es';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useOutletContext } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import useCase from '../hooks/useCase';
+// builds the additional filters for the lucene query
+export const buildFilters = (mitre, escalations) => {
+    const filters = [];
+    const tacticIds = mitre.filter(o => o.kind === 'tactic').map(o => o.id);
+    const techniqueIds = mitre.filter(o => o.kind === 'technique').map(o => o.id);
+    if (tacticIds.length) {
+        filters.push(`threat.tactic.id:(${tacticIds.join(' OR ')})`);
+    }
+    if (techniqueIds.length) {
+        filters.push(`threat.technique.id:(${techniqueIds.join(' OR ')})`);
+    }
+    if (escalations.length) {
+        filters.push(`howler.escalation:(${escalations.join(' OR ')})`);
+    }
+    return filters;
+};
+const CaseTimeline = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { config } = useContext(ApiConfigContext);
+    const routeCase = useOutletContext();
+    const { case: _case } = useCase({ case: providedCase ?? routeCase, caseId });
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    const [mitreOptions, setMitreOptions] = useState([]);
+    const [escalationOptions, setEscalationOptions] = useState([]);
+    const [displayedEntries, setDisplayedEntries] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedMitres, setSelectedMitres] = useState([]);
+    const [selectedEscalations, setSelectedEscalations] = useState(['evidence']);
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'event'].includes(item.type))
+        .map(item => item.value)
+        .filter(Boolean), [_case]);
+    const getItemId = (value) => _case.items.find(item => item.value === value)?.id;
+    useEffect(() => {
+        if (ids.length < 1) {
+            return;
+        }
+        dispatchApi(api.v2.search.facet.post(['hit', 'event'], {
+            fields: ['threat.tactic.id', 'threat.technique.id', 'howler.escalation'],
+            filters: [`howler.id:(${ids.join(' OR ')})`]
+        }), { throwError: false }).then(result => {
+            if (!result) {
+                return;
+            }
+            setEscalationOptions(Object.keys(result['howler.escalation'] ?? {}));
+            const tactics = Object.keys(result['threat.tactic.id'] ?? {}).map(tactic => ({
+                id: tactic,
+                name: config.lookups?.tactics?.[tactic].name ?? tactic,
+                kind: 'tactic'
+            }));
+            const techniques = Object.keys(result['threat.technique.id'] ?? {}).map(technique => ({
+                id: technique,
+                name: config.lookups?.techniques?.[technique].name ?? technique,
+                kind: 'technique'
+            }));
+            setMitreOptions([...tactics, ...techniques]);
+        });
+    }, [config.lookups?.tactics, config.lookups?.techniques, dispatchApi, ids]);
+    useEffect(() => {
+        if (!ids.length) {
+            setDisplayedEntries([]);
+            return;
+        }
+        setLoading(true);
+        const filters = buildFilters(selectedMitres, selectedEscalations);
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
+            query: `howler.id:(${ids.join(' OR ')})`,
+            sort: 'event.created asc',
+            rows: ids.length,
+            filters
+        }), { throwError: false }).then(response => {
+            setLoading(false);
+            if (!response) {
+                return;
+            }
+            loadRecords(response.items);
+            setDisplayedEntries(response.items);
+        });
+    }, [ids, selectedMitres, selectedEscalations, dispatchApi, loadRecords]);
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${getItemId(entry.howler.id)}`, sx: { flex: 1, minWidth: 0, textDecoration: 'none' }, children: isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })) })] }), _jsx(Divider, { flexItem: true })] }, entry.howler.id))) }))] }));
+};
+export default memo(CaseTimeline);

package/components/routes/cases/detail/CaseTimeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/cases/detail/CaseTimeline.test.js

@@ -0,0 +1,320 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/no-children-prop */
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildFilters } from './CaseTimeline';
+// ---------------------------------------------------------------------------
+// Pure logic tests
+// ---------------------------------------------------------------------------
+describe('buildFilters', () => {
+    it('returns an empty array when both lists are empty', () => {
+        expect(buildFilters([], [])).toEqual([]);
+    });
+    it('builds a tactic filter', () => {
+        const result = buildFilters([{ id: 'TA0001', name: 'Initial Access', kind: 'tactic' }], []);
+        expect(result).toEqual(['threat.tactic.id:(TA0001)']);
+    });
+    it('builds a technique filter', () => {
+        const result = buildFilters([{ id: 'T1059', name: 'Command Scripting', kind: 'technique' }], []);
+        expect(result).toEqual(['threat.technique.id:(T1059)']);
+    });
+    it('OR-combines multiple tactics in one clause', () => {
+        const result = buildFilters([
+            { id: 'TA0001', name: 'Initial Access', kind: 'tactic' },
+            { id: 'TA0002', name: 'Execution', kind: 'tactic' }
+        ], []);
+        expect(result).toEqual(['threat.tactic.id:(TA0001 OR TA0002)']);
+    });
+    it('emits separate clauses for tactics and techniques', () => {
+        const result = buildFilters([
+            { id: 'TA0001', name: 'Initial Access', kind: 'tactic' },
+            { id: 'T1059', name: 'Command Scripting', kind: 'technique' }
+        ], []);
+        expect(result).toContain('threat.tactic.id:(TA0001)');
+        expect(result).toContain('threat.technique.id:(T1059)');
+        expect(result).toHaveLength(2);
+    });
+    it('builds an escalation filter', () => {
+        const result = buildFilters([], ['evidence', 'hit']);
+        expect(result).toEqual(['howler.escalation:(evidence OR hit)']);
+    });
+    it('combines mitre and escalation filters', () => {
+        const result = buildFilters([{ id: 'TA0001', name: 'Initial Access', kind: 'tactic' }], ['evidence']);
+        expect(result).toHaveLength(2);
+        expect(result).toContain('threat.tactic.id:(TA0001)');
+        expect(result).toContain('howler.escalation:(evidence)');
+    });
+});
+// ---------------------------------------------------------------------------
+// Component rendering tests
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.fn();
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({ case: c, update: vi.fn(), loading: false, missing: false })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return { ...actual, useOutletContext: () => undefined };
+});
+// Stub card components — their internals are irrelevant to timeline tests
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `HitCard:${id}` })
+}));
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `EventCard:${id}` })
+}));
+// Return the request object rather than a Promise so dispatchApi's first
+// argument is JSON-serialisable (JSON.stringify(Promise) === '{}').
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (_indexes, request) => request ?? {},
+                facet: {
+                    post: (_indexes, request) => request ?? {}
+                }
+            }
+        }
+    }
+}));
+const mockLoadRecords = vi.fn();
+const mockConfig = {
+    lookups: {
+        tactics: { TA0001: { key: 'TA0001', name: 'Initial Access', url: '' } },
+        techniques: { T1059: { key: 'T1059', name: 'Command Scripting', url: '' } }
+    }
+};
+const mockCase = {
+    case_id: 'case-001',
+    items: [
+        { type: 'hit', value: 'hit-1', path: 'hits/hit-1' },
+        { type: 'event', value: 'obs-1', path: 'events/obs-1' }
+    ]
+};
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
+const mockConfigWithUrls = {
+    lookups: {
+        tactics: { TA0001: { key: 'TA0001', name: 'Initial Access', url: 'https://attack.mitre.org/tactics/TA0001' } },
+        techniques: {
+            T1059: { key: 'T1059', name: 'Command Scripting', url: 'https://attack.mitre.org/techniques/T1059' }
+        }
+    }
+};
+const WrapperWithUrl = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfigWithUrls, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
+const CaseTimeline = (await import('./CaseTimeline')).default;
+// Reusable mock response factories
+const mockFacetResponse = {
+    'threat.tactic.id': { TA0001: 1 },
+    'threat.technique.id': { T1059: 1 },
+    'howler.escalation': { evidence: 2, hit: 1 }
+};
+const mockSearchResponse = (items = [
+    createMockHit({ howler: { id: 'hit-1' }, event: { created: '2024-01-01T00:00:00Z' } }),
+    createMockEvent({ howler: { id: 'obs-1' } })
+]) => ({ items, total: items.length, rows: items.length, offset: 0 });
+describe('CaseTimeline component', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockClear();
+        mockLoadRecords.mockClear();
+    });
+    it('renders loading skeletons while the search is pending', () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        expect(document.querySelectorAll('.MuiSkeleton-root').length).toBeGreaterThan(0);
+    });
+    it('shows the empty state when no entries are returned', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse([]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.timeline.empty');
+    });
+    it('renders HitCard for hit entries and EventCard for event entries', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        expect(await screen.findByText('HitCard:hit-1')).toBeTruthy();
+        expect(screen.getByText('EventCard:obs-1')).toBeTruthy();
+    });
+    it('renders the formatted event.created timestamp for hits', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, event: { created: '2024-06-15T12:34:56Z' } })]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText(/2024-06-15/);
+    });
+    it('falls back to entry.timestamp when event.created is absent', async () => {
+        const entry = createMockHit({ howler: { id: 'hit-1' } });
+        entry.timestamp = '2024-03-10T08:00:00Z';
+        delete entry.event;
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse([entry]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText(/2024-03-10/);
+    });
+    it('calls loadRecords with the search results', async () => {
+        const items = [createMockHit({ howler: { id: 'hit-1' } })];
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse(items));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        expect(mockLoadRecords).toHaveBeenCalledWith(items);
+    });
+    it('renders MITRE autocomplete with options derived from the facet response', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        expect(screen.getByRole('combobox', { name: /page.cases.timeline.filter.mitre/i })).toBeTruthy();
+    });
+    it('renders escalation autocomplete pre-populated with "evidence"', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        // "evidence" chip should be pre-selected as a tag
+        expect(screen.getByText('evidence')).toBeTruthy();
+    });
+    it('re-fetches with an escalation filter when a new escalation is selected', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse())
+            .mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const escalationInput = screen.getByRole('combobox', { name: /page.cases.timeline.filter.escalation/i });
+        await act(async () => {
+            await userEvent.click(escalationInput);
+        });
+        const option = await screen.findByRole('option', { name: /\bhit\b/i });
+        await act(async () => {
+            await userEvent.click(option);
+        });
+        // The third dispatchApi call should carry a filter containing "hit"
+        const thirdCallArgs = mockDispatchApi.mock.calls[2];
+        expect(JSON.stringify(thirdCallArgs[0])).toContain('hit');
+    });
+    it('re-fetches when a MITRE tactic is selected', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse())
+            .mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const mitreInput = screen.getByRole('combobox', { name: /page.cases.timeline.filter.mitre/i });
+        await act(async () => {
+            await userEvent.click(mitreInput);
+        });
+        const tacticOption = await screen.findByRole('option', { name: /TA0001/i });
+        await act(async () => {
+            await userEvent.click(tacticOption);
+        });
+        const thirdCallArgs = mockDispatchApi.mock.calls[2];
+        expect(JSON.stringify(thirdCallArgs[0])).toContain('TA0001');
+    });
+    it('passes the case item ids in the base query on every search call', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const searchCallArg = mockDispatchApi.mock.calls[1][0];
+        expect(JSON.stringify(searchCallArg)).toContain('hit-1');
+        expect(JSON.stringify(searchCallArg)).toContain('obs-1');
+    });
+    it('renders nothing when _case is not yet available', () => {
+        const emptyCaseWrapper = ({ children }) => createElement(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: null }, createElement(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: null }, createElement(MemoryRouter, null, children)));
+        const { container } = render(_jsx(CaseTimeline, {}), { wrapper: emptyCaseWrapper });
+        expect(container.firstChild).toBeNull();
+    });
+    it('renders nothing and skips fetching when the case has no items', () => {
+        mockDispatchApi.mockResolvedValue({});
+        render(_jsx(CaseTimeline, { case: { case_id: 'empty', items: [] } }), { wrapper: Wrapper });
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+    describe('tactic and technique inline entries', () => {
+        it('renders the technique ID link for a hit with threat.technique', async () => {
+            mockDispatchApi
+                .mockResolvedValueOnce(mockFacetResponse)
+                .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { technique: { id: 'T1059' } } })]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+            expect(await screen.findByText('T1059')).toBeTruthy();
+        });
+        it('renders the tactic ID link for a hit with threat.tactic', async () => {
+            mockDispatchApi
+                .mockResolvedValueOnce(mockFacetResponse)
+                .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { tactic: { id: 'TA0001' } } })]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+            expect(await screen.findByText('TA0001')).toBeTruthy();
+        });
+        it('renders both technique and tactic ID links when the entry has both threat fields', async () => {
+            mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse([
+                createMockHit({
+                    howler: { id: 'hit-1' },
+                    threat: { technique: { id: 'T1059' }, tactic: { id: 'TA0001' } }
+                })
+            ]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+            await screen.findByText('T1059');
+            expect(screen.getByText('TA0001')).toBeTruthy();
+        });
+        it('does not render tactic or technique links when threat data is absent', async () => {
+            mockDispatchApi
+                .mockResolvedValueOnce(mockFacetResponse)
+                .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' } })]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+            await screen.findByText('HitCard:hit-1');
+            expect(screen.queryByText('T1059')).toBeNull();
+            expect(screen.queryByText('TA0001')).toBeNull();
+        });
+        it('sets href on the technique link from config.lookups.techniques.url', async () => {
+            mockDispatchApi
+                .mockResolvedValueOnce(mockFacetResponse)
+                .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { technique: { id: 'T1059' } } })]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: WrapperWithUrl });
+            const link = await screen.findByText('T1059');
+            expect(link.getAttribute('href')).toBe('https://attack.mitre.org/techniques/T1059');
+        });
+        it('sets href on the tactic link from config.lookups.tactics.url', async () => {
+            mockDispatchApi
+                .mockResolvedValueOnce(mockFacetResponse)
+                .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { tactic: { id: 'TA0001' } } })]));
+            render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: WrapperWithUrl });
+            const link = await screen.findByText('TA0001');
+            expect(link.getAttribute('href')).toBe('https://attack.mitre.org/tactics/TA0001');
+        });
+        describe('tooltip content', () => {
+            beforeEach(() => {
+                vi.useFakeTimers({ shouldAdvanceTime: true });
+            });
+            afterEach(() => {
+                vi.useRealTimers();
+            });
+            it('shows a tooltip with technique ID and name on hover', async () => {
+                mockDispatchApi
+                    .mockResolvedValueOnce(mockFacetResponse)
+                    .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { technique: { id: 'T1059' } } })]));
+                render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+                const link = await screen.findByText('T1059');
+                await act(async () => {
+                    await userEvent.hover(link);
+                });
+                const tooltip = await screen.findByRole('tooltip');
+                expect(tooltip.textContent).toContain('T1059: Command Scripting');
+            });
+            it('shows a tooltip with tactic ID and name on hover', async () => {
+                mockDispatchApi
+                    .mockResolvedValueOnce(mockFacetResponse)
+                    .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, threat: { tactic: { id: 'TA0001' } } })]));
+                render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+                const link = await screen.findByText('TA0001');
+                await act(async () => {
+                    await userEvent.hover(link);
+                });
+                const tooltip = await screen.findByRole('tooltip');
+                expect(tooltip.textContent).toContain('TA0001: Initial Access');
+            });
+        });
+    });
+});

package/components/routes/cases/detail/CreateRuleDialog.d.ts

@@ -0,0 +1,9 @@
+import type { Rule } from '@cccsaurora/howler-ui/models/entities/generated/Rule';
+import { type FC } from 'react';
+interface CreateRuleDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (ruleData: Partial<Rule>) => Promise<void>;
+}
+declare const CreateRuleDialog: FC<CreateRuleDialogProps>;
+export default CreateRuleDialog;

package/components/routes/cases/detail/CreateRuleDialog.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { CheckCircleOutline, FilterList, RadioButtonUnchecked, Search } from '@mui/icons-material';
+import { Autocomplete, Box, Button, Card, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import QueryResultText from '@cccsaurora/howler-ui/components/elements/display/QueryResultText';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const DEFAULT_TIMEFRAME_DAYS = 14;
+const PROMPT_CONTEXT = 'isRecordQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
+const OPTIONS = {
+    fontSize: 17,
+    lineHeight: 19,
+    lineNumbers: 'off',
+    lineDecorationsWidth: 0,
+    lineNumbersMinChars: 0,
+    showFoldingControls: 'never',
+    scrollBeyondLastLine: false,
+    glyphMargin: false,
+    renderLineHighlight: 'none',
+    overviewRulerLanes: 0
+};
+const INDEX_OPTIONS = ['hit', 'event'];
+const Subtitle = ({ i18nKey }) => {
+    const { t } = useTranslation();
+    return (_jsx(Typography, { sx: theme => ({
+            color: theme.palette.text.secondary,
+            fontSize: '0.9em',
+            fontStyle: 'italic'
+        }), variant: "body2", children: t(i18nKey) }));
+};
+const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const monaco = useMonaco();
+    const [query, setQuery] = useState('');
+    const [destination, setDestination] = useState('');
+    const [indexes, setIndexes] = useState(['hit']);
+    const [timeframeDays, setTimeframeDays] = useState(DEFAULT_TIMEFRAME_DAYS);
+    const [hasExpiry, setHasExpiry] = useState(true);
+    const [expireAfterResolved, setExpireAfterResolved] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const [response, setResponse] = useState(null);
+    const handleOpen = useCallback(() => {
+        setQuery('');
+        setDestination('');
+        setIndexes(['hit']);
+        setTimeframeDays(DEFAULT_TIMEFRAME_DAYS);
+        setHasExpiry(true);
+        setExpireAfterResolved(false);
+        setResponse(null);
+    }, []);
+    const handleSearch = useCallback(async () => {
+        setSearching(true);
+        try {
+            const result = await dispatchApi(api.search.hit.post({
+                query,
+                rows: 0,
+                track_total_hits: true
+            }));
+            setResponse(result);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, query]);
+    const handleQueryChange = useCallback((q) => {
+        setQuery(q);
+        setResponse(null);
+    }, []);
+    const handleSubmit = useCallback(async () => {
+        if (!query.trim() || !destination.trim()) {
+            return;
+        }
+        setLoading(true);
+        try {
+            await onSubmit({
+                query: query.trim(),
+                destination: destination.trim(),
+                timeframe: hasExpiry ? timeframeDays : null,
+                expire_after_resolved: hasExpiry ? expireAfterResolved : false,
+                indexes
+            });
+            onClose();
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [query, destination, hasExpiry, timeframeDays, expireAfterResolved, indexes, onSubmit, onClose]);
+    const onMount = useCallback((ed) => {
+        ed.createContextKey('isRecordQuery', true);
+    }, []);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const executeDisposable = monaco.editor.addEditorAction({
+            id: 'execute-query',
+            label: t('route.advanced.execute.query'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+            run: handleSearch
+        });
+        return () => {
+            executeDisposable.dispose();
+        };
+    }, [monaco, t, handleSearch]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        let disposable;
+        disposable = monaco.editor.addKeybindingRule({
+            command: 'execute-query',
+            keybinding: monaco.KeyCode.Enter,
+            when: PROMPT_CONTEXT
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [monaco, handleSearch]);
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, id: "create-rule-dialog", TransitionProps: { onEnter: handleOpen }, PaperProps: {
+            elevation: 0
+        }, children: [_jsx(DialogTitle, { children: t('page.cases.rules.create') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 3, sx: { mt: 1 }, children: [_jsxs(Box, { children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('page.cases.rules.query') }), _jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: indexes.map(opt => t(`hit.search.index.${opt}`)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: INDEX_OPTIONS, value: indexes, onChange: (_ev, values) => values.length > 0 && setIndexes(values), getOptionLabel: opt => t(`hit.search.index.${opt}`), renderInput: params => _jsx(TextField, { ...params }) }) })] }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: _jsx(Box, { sx: { border: 1, borderColor: 'divider', borderRadius: 1, flex: 1 }, children: _jsxs(Card, { variant: "outlined", sx: theme => ({
+                                                width: '100%',
+                                                height: theme.spacing(5),
+                                                py: 1,
+                                                pl: 1,
+                                                pr: 0.5,
+                                                position: 'relative',
+                                                overflow: 'visible',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                '& .monaco-editor': {
+                                                    position: 'absolute !important'
+                                                },
+                                                transition: theme.transitions.create('border-color')
+                                            }), onKeyDown: e => e.stopPropagation(), children: [_jsx(QueryEditor, { query: query, setQuery: handleQueryChange, language: "lucene", id: "rule-query-editor", height: "20px", editorOptions: OPTIONS, onMount: onMount }), _jsx(Tooltip, { title: t('route.search'), children: _jsx("span", { children: _jsx(IconButton, { size: "small", id: "rule-search-button", onClick: handleSearch, disabled: searching || !query.trim(), children: _jsx(Search, {}) }) }) })] }) }) }), response ? (_jsx(QueryResultText, { count: response.total, query: query, mb: 0 })) : (_jsx(Subtitle, { i18nKey: "hit.search.prompt" }))] }), _jsxs(Box, { children: [_jsx(TextField, { id: "rule-destination-input", label: t('page.cases.rules.destination'), value: destination, onChange: e => setDestination(e.target.value), fullWidth: true, placeholder: "alerts/{{howler.analytic}}", size: "small" }), _jsx(Subtitle, { i18nKey: "page.cases.rules.destination.help" })] }), _jsxs(Stack, { children: [_jsx(TextField, { id: "rule-timeframe-input", type: "number", label: t('page.cases.rules.timeframe'), value: timeframeDays, onChange: e => setTimeframeDays(Math.max(1, parseInt(e.target.value, 10) || 1)), size: "small", disabled: !hasExpiry, sx: { flex: 1 }, InputProps: { inputProps: { min: 1 } } }), _jsx(Subtitle, { i18nKey: "page.cases.rules.timeframe.help" })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { id: "rule-no-expiry-checkbox", label: t('page.cases.rules.no_expiry'), icon: !hasExpiry ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: !hasExpiry ? 'primary' : 'default', clickable: true, disabled: expireAfterResolved, onClick: () => setHasExpiry(prev => !prev) }), _jsx(Chip, { id: "rule-expire-after-resolved", label: t('page.cases.rules.expire_after_resolved'), icon: expireAfterResolved ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: expireAfterResolved ? 'primary' : 'default', clickable: hasExpiry, onClick: () => setExpireAfterResolved(prev => !prev), disabled: !hasExpiry })] })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, children: t('cancel') }), _jsx(Button, { id: "rule-submit-button", variant: "contained", onClick: handleSubmit, disabled: !response || loading || !query.trim() || !destination.trim() || indexes.length === 0, children: t('page.cases.rules.create') })] })] }));
+};
+export default CreateRuleDialog;

package/components/routes/cases/detail/CreateRuleDialog.test.d.ts

@@ -0,0 +1 @@
+export {};