@cccsaurora/howler-ui 2.19.0-cases.1095 → 2.19.0-cases.1110

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

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

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

@@ -0,0 +1,110 @@
+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 = (id, path = `/cases/test/${id}`) => ({
+    type: 'hit',
+    value: id,
+    path
+});
+// ---------------------------------------------------------------------------
+// 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', path: '/cases/test/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', '/cases/case-3/path-one');
+        expect(links[1]).toHaveAttribute('href', '/cases/case-3/path-two');
+    });
+    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.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', path: 'root/hit-1' },
+                { type: 'event', value: 'event-1', path: 'root/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', path: 'root/hit-1' },
+                { type: 'event', value: 'event-1', path: 'root/event-1' },
+                { type: 'hit', value: 'hit-2', path: 'root/hit-2' },
+                { type: 'case', value: 'case-child', path: 'root/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.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, FormatListBulleted, HourglassBottom, Pause, People, WarningRounded } from '@mui/icons-material';
-import { Autocomplete, AvatarGroup, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
+import { Check, FormatListBulleted, HourglassBottom, Pause, People, TrendingUp, WarningRounded } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Card, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
@@ -10,6 +10,7 @@ import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import dayjs from 'dayjs';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ESCALATION_COLOR_MAP } from '../constants';
 import useCase from '../hooks/useCase';
 import ResolveModal from '../modals/ResolveModal';
 import SourceAggregate from './aggregates/SourceAggregate';
@@ -61,10 +62,18 @@ const CaseDetails = ({ case: providedCase }) => {
                                         'in-progress': _jsx(HourglassBottom, { color: "warning" }),
                                         'on-hold': _jsx(Pause, { color: "disabled" }),
                                         resolved: _jsx(Check, { color: "success" })
-                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => handleStatus(status) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading }), _jsx("div", { style: { flex: 1 } })] }), caseViewers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(SocketBadge, { size: "medium" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.viewers') })] }), _jsx(AvatarGroup, { max: 4, sx: { alignSelf: 'start' }, componentsProps: {
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => {
+                                    if (status) {
+                                        handleStatus(status);
+                                    }
+                                } }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(TrendingUp, { color: ESCALATION_COLOR_MAP[_case.escalation] }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.escalation') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.escalation ?? null, options: config.lookups['case.escalation'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, escalation) => {
+                                    if (escalation) {
+                                        wrappedUpdate({ escalation });
+                                    }
+                                } })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading }), _jsx("div", { style: { flex: 1 } })] }), caseViewers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(SocketBadge, { size: "medium" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.viewers') })] }), _jsx(AvatarGroup, { max: 4, sx: { alignSelf: 'start' }, componentsProps: {
                                             additionalAvatar: {
                                                 sx: { height: 32, width: 32, fontSize: '12px' }
                                             }
-                                        }, children: caseViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: 32, width: 32 } }, viewer))) })] }))] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
+                                        }, children: caseViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: 32, width: 32 } }, viewer))) })] }))] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
 };
 export default CaseDetails;

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

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

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

@@ -0,0 +1,146 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import {} from 'react';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Hoisted stubs
+// ---------------------------------------------------------------------------
+const mockUpdate = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockShowModal = vi.hoisted(() => vi.fn());
+// ---------------------------------------------------------------------------
+// Module mocks (registered before the dynamic import below)
+// ---------------------------------------------------------------------------
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({
+            showModal: mockShowModal,
+            close: vi.fn(),
+            setContent: vi.fn(),
+            withConfirmDeleteModal: vi.fn()
+        })
+    };
+});
+vi.mock('components/elements/UserList', () => ({
+    default: () => _jsx("div", { id: "user-list" })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: userId })
+}));
+vi.mock('components/elements/display/icons/SocketBadge', () => ({
+    default: () => _jsx("span", {})
+}));
+vi.mock('./aggregates/SourceAggregate', () => ({
+    default: () => _jsx("span", {})
+}));
+vi.mock('../modals/ResolveModal', () => ({
+    default: () => null
+}));
+// ---------------------------------------------------------------------------
+// Shared provider config
+// ---------------------------------------------------------------------------
+const mockConfig = {
+    lookups: {
+        'howler.status': ['open', 'in-progress', 'on-hold', 'resolved'],
+        'case.escalation': ['normal', 'focus', 'crisis'],
+        'howler.escalation': ['miss', 'hit', 'alert', 'evidence']
+    }
+};
+const mockViewers = {};
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(SocketContext.Provider, { value: {
+            emit: vi.fn(),
+            open: true,
+            fetchViewers: vi.fn(),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: { ...mockViewers }
+        }, children: children }) }));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+const { default: CaseDetails } = await import('./CaseDetails');
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDetails', () => {
+    let user;
+    let testCase;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        mockUpdate.mockResolvedValue(undefined);
+        testCase = createMockCase({ case_id: 'test-case-id', status: 'open', escalation: 'normal' });
+        Object.keys(mockViewers).forEach(k => delete mockViewers[k]);
+    });
+    it('renders a skeleton and no controls when the case is null', () => {
+        render(_jsx(CaseDetails, { case: null }), { wrapper: Wrapper });
+        expect(document.querySelector('.MuiSkeleton-root')).toBeTruthy();
+        expect(screen.queryByRole('combobox')).toBeNull();
+    });
+    it('renders the status label and current status value', () => {
+        render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+        expect(screen.getByText('page.cases.detail.status')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('open')).toBeInTheDocument();
+    });
+    it('renders the escalation label and current escalation value', () => {
+        render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+        expect(screen.getByText('page.cases.detail.escalation')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('normal')).toBeInTheDocument();
+    });
+    describe('status changes', () => {
+        it('calls update with the new status when a non-resolved option is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('open'));
+            await user.click(await screen.findByRole('option', { name: 'in-progress' }));
+            await waitFor(() => {
+                expect(mockUpdate).toHaveBeenCalledWith({ status: 'in-progress' });
+            });
+        });
+        it('opens the resolve modal instead of calling update when "resolved" is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('open'));
+            await user.click(await screen.findByRole('option', { name: 'resolved' }));
+            expect(mockShowModal).toHaveBeenCalledOnce();
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+    });
+    describe('escalation changes', () => {
+        it('calls update with the new escalation when an option is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('normal'));
+            await user.click(await screen.findByRole('option', { name: 'focus' }));
+            await waitFor(() => {
+                expect(mockUpdate).toHaveBeenCalledWith({ escalation: 'focus' });
+            });
+        });
+    });
+    describe('viewers section', () => {
+        it('hides the viewers section when no viewers are active', () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            expect(screen.queryByText('page.cases.detail.viewers')).toBeNull();
+        });
+        it('shows the viewers section and renders viewer avatars when active viewers are present', () => {
+            mockViewers['test-case-id'] = ['user-1', 'user-2'];
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            expect(screen.getByText('page.cases.detail.viewers')).toBeInTheDocument();
+            expect(screen.getByText('user-1')).toBeInTheDocument();
+            expect(screen.getByText('user-2')).toBeInTheDocument();
+        });
+    });
+});

package/locales/en/translation.json

@@ -420,6 +420,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Properties",
     "page.cases.detail.status": "Status",
+    "page.cases.detail.escalation": "Escalation",
     "page.cases.detail.viewers": "Active Viewers",
     "page.cases.escalation": "Escalation",
     "page.cases.folder.drop.root": "Place here to move to root",

package/locales/fr/translation.json

@@ -420,6 +420,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Propriétés",
     "page.cases.detail.status": "Statut",
+    "page.cases.detail.escalation": "Escalade",
     "page.cases.detail.viewers": "Spectateurs actifs",
     "page.cases.escalation": "Escalade",
     "page.cases.folder.drop.root": "Déposer ici pour déplacer à la racine",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-cases.1095",
+  "version": "2.19.0-cases.1110",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",