@cccsaurora/howler-ui 2.19.0-dev.1151 → 2.19.0-dev.1260

package/components/routes/cases/Cases.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Topic } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { DATE_RANGE_LUCENE, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import CaseCard from '../../elements/case/CaseCard';
+import CaseAssigneeFilter from './search/CaseAssigneeFilter';
+import CaseDateFilter, {} from './search/CaseDateFilter';
+import CaseStatusFilter from './search/CaseStatusFilter';
+const CasesBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request } = useContext(SearchResponseContext);
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [statusFilter, setStatusFilter] = useState([]);
+    const [assigneeFilter, setAssigneeFilter] = useState([]);
+    const [dateRange, setDateRange] = useState('date.range.all');
+    const [customStart, setCustomStart] = useState(dayjs().subtract(2, 'days'));
+    const [customEnd, setCustomEnd] = useState(dayjs());
+    const filtersReady = useRef(false);
+    const buildFilters = useCallback(() => {
+        const filters = [];
+        if (statusFilter.length > 0) {
+            filters.push(`status:(${statusFilter.map(status => `"${status}"`).join(' OR ')})`);
+        }
+        if (assigneeFilter.length > 0) {
+            filters.push(assigneeFilter
+                .map(assignee => `(participants:"${sanitizeLuceneQuery(assignee)}" OR tasks.assignment:"${sanitizeLuceneQuery(assignee)}")`)
+                .join(' OR '));
+        }
+        const lucene = DATE_RANGE_LUCENE[dateRange];
+        if (lucene) {
+            filters.push(`created:[${lucene} TO now]`);
+        }
+        else if (dateRange === 'date.range.custom') {
+            filters.push(`created:[${customStart.toISOString()} TO ${customEnd.toISOString()}]`);
+        }
+        return filters;
+    }, [statusFilter, assigneeFilter, dateRange, customStart, customEnd]);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            const filters = buildFilters();
+            await request(api.v2.fuzzy.post, {
+                query: phrase.trim() || '*',
+                filters,
+                rows: pageCount,
+                offset,
+                indexes: ['case']
+            });
+        }
+        catch {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, buildFilters, request, pageCount, offset]);
+    // Load the items into list when response changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.case_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    // Re-search when filter chips change, but skip the initial render.
+    useEffect(() => {
+        if (!filtersReady.current) {
+            filtersReady.current = true;
+            return;
+        }
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusFilter, assigneeFilter, dateRange, customStart, customEnd]);
+    const renderer = useCallback((item, className) => _jsx(CaseCard, { case: item, className: className }), []);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.cases.search.prompt') }), searchFilters: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { mt: 0.5, flexWrap: 'wrap' }, children: [_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: setStatusFilter }), _jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: setAssigneeFilter }), _jsx(CaseDateFilter, { dateRange: dateRange, onChange: setDateRange, customStart: customStart, customEnd: customEnd, onCustomStartChange: setCustomStart, onCustomEndChange: setCustomEnd })] }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/cases/${item.id}`), searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
+};
+const Cases = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "case_id", children: _jsx(CasesBase, {}) }) }));
+};
+export default Cases;

package/components/routes/cases/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ESCALATION_COLOR_MAP: {
+    normal: string;
+    focus: string;
+    crisis: string;
+};
+export declare const CASE_STATUSES: readonly ["open", "in-progress", "on-hold", "resolved"];

package/components/routes/cases/constants.js

@@ -0,0 +1,6 @@
+export const ESCALATION_COLOR_MAP = {
+    normal: 'default',
+    focus: 'warning',
+    crisis: 'error'
+};
+export const CASE_STATUSES = ['open', 'in-progress', 'on-hold', 'resolved'];

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

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const AlertPanel: FC<{
+    case: Case;
+}>;
+export default AlertPanel;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const AlertPanel = ({ case: _case }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const [alertPage, setAlertPage] = useState(1);
+    const alertPages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'hit')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.alerts') }), _jsx(Pagination, { count: alertPages.length, page: alertPage, onChange: (_, page) => setAlertPage(page) })] }), _jsx(Divider, {}), alertPages?.length > 0 &&
+                alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.value, lazy: true }), _jsx(Box, { component: Link, to: `/hits/${item.value}`, sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: '100%',
+                                cursor: 'pointer',
+                                zIndex: 100,
+                                borderRadius: '4px',
+                                '&:hover': {
+                                    background: theme.palette.divider,
+                                    border: `thin solid ${theme.palette.primary.light}`
+                                }
+                            } })] }, item.id ?? item.value)))] }));
+};
+export default AlertPanel;

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

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

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockHitCardProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: (props) => {
+        mockHitCardProps.current.push(props);
+        return _jsx("div", { id: `hit-card-${String(props.id)}` });
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+    };
+});
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import AlertPanel from './AlertPanel';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderPanel = (caseValue) => {
+    return render(_jsx(MemoryRouter, { children: _jsx(AlertPanel, { case: caseValue }) }));
+};
+const makeHitItem = (value, id = value) => ({
+    type: 'hit',
+    value,
+    id,
+    name: null,
+    parent: null
+});
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockHitCardProps.current = [];
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('AlertPanel', () => {
+    it('renders a skeleton when the case is null', () => {
+        const { container } = renderPanel(null);
+        expect(container.querySelector('.MuiSkeleton-root')).toBeTruthy();
+    });
+    it('renders the translated heading key', () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [] });
+        renderPanel(_case);
+        expect(screen.getByText('page.cases.dashboard.alerts')).toBeInTheDocument();
+    });
+    it('renders HitCard only for unique hit items on the current page', () => {
+        const duplicate = makeHitItem('hit-1', '/cases/test/path-a');
+        const _case = createMockCase({
+            case_id: 'case-2',
+            items: [duplicate, duplicate, makeHitItem('hit-2', '/cases/test/path-b'), { type: 'event', value: 'event-1' }]
+        });
+        renderPanel(_case);
+        expect(screen.getByTestId('hit-card-hit-1')).toBeInTheDocument();
+        expect(screen.getByTestId('hit-card-hit-2')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-event-1')).not.toBeInTheDocument();
+        expect(mockHitCardProps.current).toHaveLength(2);
+        expect(mockHitCardProps.current[0]).toEqual(expect.objectContaining({
+            id: 'hit-1',
+            lazy: true,
+            layout: 'dense'
+        }));
+    });
+    it('renders overlay links that target each hit path', () => {
+        const _case = createMockCase({
+            case_id: 'case-3',
+            items: [makeHitItem('hit-1', '/cases/case-3/path-one'), makeHitItem('hit-2', '/cases/case-3/path-two')]
+        });
+        const { container } = renderPanel(_case);
+        const links = Array.from(container.querySelectorAll('a'));
+        expect(links).toHaveLength(2);
+        expect(links[0]).toHaveAttribute('href', '/hits/hit-1');
+        expect(links[1]).toHaveAttribute('href', '/hits/hit-2');
+    });
+    it('shows pagination with multiple pages and switches to page 2 items', () => {
+        const items = Array.from({ length: 6 }, (_, idx) => makeHitItem(`hit-${idx + 1}`, `/cases/test/hit-${idx + 1}`));
+        const _case = createMockCase({ case_id: 'case-4', items });
+        renderPanel(_case);
+        expect(screen.getByTestId('hit-card-hit-1')).toBeInTheDocument();
+        expect(screen.getByTestId('hit-card-hit-5')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-hit-6')).not.toBeInTheDocument();
+        const pageTwoButton = screen.getByRole('button', { name: 'Go to page 2' });
+        fireEvent.click(pageTwoButton);
+        expect(screen.getByTestId('hit-card-hit-6')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-hit-1')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseDashboard: FC<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default CaseDashboard;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { difference, get, isNil } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutletContext } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import useCase from '../hooks/useCase';
+import CaseAggregate from './aggregates/CaseAggregate';
+import AlertPanel from './AlertPanel';
+import CaseOverview from './CaseOverview';
+import RelatedCasePanel from './RelatedCasePanel';
+import TaskPanel from './TaskPanel';
+const AGGREGATE_FIELDS = [
+    ['howler.outline.threat', 'material-symbols:warning-rounded', 'warning.main', 'page.cases.dashboard.threat'],
+    ['howler.outline.target', 'material-symbols:group', 'primary.main', 'page.cases.dashboard.target'],
+    ['howler.outline.indicators', 'fluent:number-symbol-24-filled', null, 'page.cases.dashboard.indicators']
+];
+const getDuration = (case_) => {
+    if (case_?.start) {
+        return dayjs
+            .duration(dayjs(case_?.end ?? new Date()).diff(dayjs(case_.start), 'minute'), 'minute')
+            .format('HH[h] mm[m]');
+    }
+    return '--';
+};
+const CaseDashboard = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const routeCase = useOutletContext();
+    const { case: _case, update: updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
+    const [invalidIds, setInvalidIds] = useState([]);
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'event'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const caseRecords = useMemo(() => Object.fromEntries(ids.map(id => [id, records[id]])), [ids, records]);
+    useEffect(() => {
+        const missingIds = Object.entries(caseRecords)
+            .filter(([id, record]) => !invalidIds.includes(id) && isNil(record))
+            .map(([id]) => id);
+        if (missingIds.length < 1) {
+            return;
+        }
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
+            query: `howler.id:(${missingIds.join(' OR ')})`,
+            metadata: ['template', 'analytic']
+        })).then(response => {
+            loadRecords(response.items);
+            setInvalidIds(difference(missingIds, response.items.map(record => record.howler.id)));
+        });
+    }, [caseRecords, dispatchApi, ids, invalidIds, loadRecords]);
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(CaseOverview, { case: _case, updateCase: updateCase }) }), AGGREGATE_FIELDS.map(([field, icon, iconColor, subtitle]) => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: icon, iconColor: iconColor && get(theme.palette, iconColor), field: field, records: Object.values(caseRecords), subtitle: t(subtitle) }) }, field))), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
+};
+export default CaseDashboard;

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

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

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

@@ -0,0 +1,218 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, waitFor } from '@testing-library/react';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { useState } from 'react';
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockSearchPost = vi.hoisted(() => vi.fn());
+const mockUpdateCase = vi.hoisted(() => vi.fn());
+const mockUseCaseState = vi.hoisted(() => ({ case: null }));
+const mockAggregateProps = vi.hoisted(() => ({
+    current: []
+}));
+const mockCaseOverviewProps = vi.hoisted(() => ({ current: [] }));
+const mockTaskPanelProps = vi.hoisted(() => ({ current: [] }));
+const mockAlertPanelProps = vi.hoisted(() => ({ current: [] }));
+const mockRelatedCasePanelProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+vi.mock('use-context-selector', async () => {
+    const react = (await vi.importActual('react'));
+    return {
+        createContext: react.createContext,
+        useContextSelector: (context, selector) => {
+            return selector(react.useContext(context));
+        }
+    };
+});
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (...args) => mockSearchPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: () => ({
+        case: mockUseCaseState.case,
+        update: mockUpdateCase
+    })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useOutletContext: () => createMockCase({ case_id: 'route-case-id', items: [] })
+    };
+});
+vi.mock('./aggregates/CaseAggregate', () => ({
+    default: (props) => {
+        mockAggregateProps.current.push(props);
+        return _jsx("div", { id: `aggregate-${String(mockAggregateProps.current.length)}` });
+    }
+}));
+vi.mock('./CaseOverview', () => ({
+    default: (props) => {
+        mockCaseOverviewProps.current.push(props);
+        return _jsx("div", { id: "case-overview" });
+    }
+}));
+vi.mock('./TaskPanel', () => ({
+    default: (props) => {
+        mockTaskPanelProps.current.push(props);
+        return _jsx("div", { id: "task-panel" });
+    }
+}));
+vi.mock('./AlertPanel', () => ({
+    default: (props) => {
+        mockAlertPanelProps.current.push(props);
+        return _jsx("div", { id: "alert-panel" });
+    }
+}));
+vi.mock('./RelatedCasePanel', () => ({
+    default: (props) => {
+        mockRelatedCasePanelProps.current.push(props);
+        return _jsx("div", { id: "related-case-panel" });
+    }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import CaseDashboard from './CaseDashboard';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const makeRecordContextValue = (records, loadRecords) => ({
+    records,
+    selectedRecords: [],
+    addRecordToSelection: vi.fn(),
+    removeRecordFromSelection: vi.fn(),
+    clearSelectedRecords: vi.fn(),
+    loadRecords,
+    updateRecord: vi.fn(),
+    getRecord: vi.fn()
+});
+const renderDashboard = ({ dashboardCase, initialRecords = {}, onLoadRecords }) => {
+    const Wrapper = ({ children }) => {
+        const [records, setRecords] = useState(initialRecords);
+        const loadRecords = items => {
+            onLoadRecords?.(items);
+            const mapped = Object.fromEntries(items.map(item => [item.howler.id, item]));
+            setRecords(prev => ({ ...prev, ...mapped }));
+        };
+        return (_jsx(RecordContext.Provider, { value: makeRecordContextValue(records, loadRecords), children: children }));
+    };
+    return render(_jsx(CaseDashboard, { case: dashboardCase }), { wrapper: Wrapper });
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockSearchPost.mockReset();
+    mockUpdateCase.mockReset();
+    mockAggregateProps.current = [];
+    mockCaseOverviewProps.current = [];
+    mockTaskPanelProps.current = [];
+    mockAlertPanelProps.current = [];
+    mockRelatedCasePanelProps.current = [];
+    mockUseCaseState.case = null;
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDashboard', () => {
+    it('renders nothing when useCase does not return a case', () => {
+        const baseCase = createMockCase({ case_id: 'case-1', items: [] });
+        mockUseCaseState.case = null;
+        const { container } = renderDashboard({ dashboardCase: baseCase });
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('renders overview, panels and aggregate cards with translated subtitles', () => {
+        const dashboardCase = createMockCase({
+            case_id: 'case-2',
+            items: [
+                { type: 'hit', value: 'hit-1' },
+                { type: 'event', value: 'event-1' }
+            ]
+        });
+        mockUseCaseState.case = dashboardCase;
+        renderDashboard({
+            dashboardCase,
+            initialRecords: {
+                'hit-1': createMockHit({ howler: { id: 'hit-1', outline: { threat: 'threat-a', target: 'target-a' } } }),
+                'event-1': createMockEvent({ howler: { id: 'event-1', outline: { indicators: ['ioc-a'] } } })
+            }
+        });
+        expect(mockCaseOverviewProps.current).toHaveLength(1);
+        expect(mockTaskPanelProps.current).toHaveLength(1);
+        expect(mockAlertPanelProps.current).toHaveLength(1);
+        expect(mockRelatedCasePanelProps.current).toHaveLength(1);
+        expect(mockAggregateProps.current).toHaveLength(4);
+        expect(mockAggregateProps.current[0]).toEqual(expect.objectContaining({
+            field: 'howler.outline.threat',
+            subtitle: 'page.cases.dashboard.threat'
+        }));
+        expect(mockAggregateProps.current[1]).toEqual(expect.objectContaining({
+            field: 'howler.outline.target',
+            subtitle: 'page.cases.dashboard.target'
+        }));
+        expect(mockAggregateProps.current[2]).toEqual(expect.objectContaining({
+            field: 'howler.outline.indicators',
+            subtitle: 'page.cases.dashboard.indicators'
+        }));
+        expect(mockAggregateProps.current[3]).toEqual(expect.objectContaining({
+            subtitle: 'page.cases.dashboard.duration',
+            title: '--'
+        }));
+    });
+    it('loads missing hit and event records and sends expected search query', async () => {
+        const dashboardCase = createMockCase({
+            case_id: 'case-3',
+            items: [
+                { type: 'hit', value: 'hit-1' },
+                { type: 'event', value: 'event-1' },
+                { type: 'hit', value: 'hit-2' },
+                { type: 'case', value: 'case-child' }
+            ]
+        });
+        mockUseCaseState.case = dashboardCase;
+        const loadedEvent = createMockEvent({ howler: { id: 'event-1' } });
+        const loadedHit = createMockHit({ howler: { id: 'hit-2' } });
+        mockSearchPost.mockReturnValue({ endpoint: 'search' });
+        mockDispatchApi.mockResolvedValue({
+            items: [loadedEvent, loadedHit]
+        });
+        const onLoadRecords = vi.fn();
+        renderDashboard({
+            dashboardCase,
+            initialRecords: {
+                'hit-1': createMockHit({ howler: { id: 'hit-1' } })
+            },
+            onLoadRecords
+        });
+        await waitFor(() => {
+            expect(mockSearchPost).toHaveBeenCalledWith(['hit', 'event'], {
+                query: 'howler.id:(event-1 OR hit-2)',
+                metadata: ['template', 'analytic']
+            });
+            expect(mockDispatchApi).toHaveBeenCalledTimes(1);
+            expect(onLoadRecords).toHaveBeenCalledWith([loadedEvent, loadedHit]);
+        });
+    });
+});

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

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseDetails: FC<{
+    case: Case;
+}>;
+export default CaseDetails;