@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

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

@@ -0,0 +1,238 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockApiGet = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: mockApiGet
+            }
+        }
+    }
+}));
+vi.mock('components/routes/404', () => ({
+    default: () => _jsx("div", { id: "not-found", children: "Not Found" })
+}));
+vi.mock('components/routes/hits/search/InformationPane', () => ({
+    default: ({ selected }) => _jsx("div", { id: "information-pane", children: selected })
+}));
+vi.mock('./CaseDashboard', () => ({
+    default: ({ caseId }) => _jsx("div", { id: "case-dashboard", children: caseId })
+}));
+vi.mock('./MarkdownPage', () => ({
+    default: ({ item }) => _jsx("div", { id: "markdown-page", children: item?.value })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: () => ({ case: undefined, loading: false, missing: false })
+}));
+const { mockParams } = setupReactRouterMock();
+const { default: ItemPage } = await import('./ItemPage');
+describe('ItemPage', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // Default to no wildcard path unless a test sets it
+        mockParams['*'] = '';
+    });
+    it('renders NotFoundPage when no subPath is provided', async () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [] });
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('renders MarkdownPage when a markdown item path is resolved', async () => {
+        const markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Notes',
+            value: 'Initial markdown',
+            classification: 'TLP:CLEAR'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [markdownItem] });
+        mockParams['*'] = 'Notes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Initial markdown');
+        });
+    });
+    it('normalizes leading/trailing slashes in subPath', async () => {
+        const markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Notes',
+            value: 'Normalized markdown',
+            classification: 'TLP:CLEAR'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [markdownItem] });
+        mockParams['*'] = '/Notes/';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Normalized markdown');
+        });
+    });
+    it('renders InformationPane for hit item paths', async () => {
+        const hitItem = {
+            id: 'hit-1',
+            parent: null,
+            type: 'hit',
+            name: 'Alert',
+            value: 'selected-hit-id'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [hitItem] });
+        mockParams['*'] = 'Alert';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('information-pane')).toHaveTextContent('selected-hit-id');
+        });
+    });
+    it('resolves nested case segments and renders downstream item', async () => {
+        const nestedMarkdown = {
+            id: 'n-md-1',
+            parent: null,
+            type: 'markdown',
+            name: 'NestedNotes',
+            value: 'Nested markdown content'
+        };
+        const childCase = createMockCase({ case_id: 'child-case-123', items: [nestedMarkdown] });
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockDispatchApi.mockResolvedValueOnce(childCase);
+        mockParams['*'] = 'Child/NestedNotes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledOnce();
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Nested markdown content');
+        });
+    });
+    it('returns NotFound when nested case has no value', async () => {
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: undefined
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockParams['*'] = 'Child/Anything';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('returns NotFound when nested case cannot be fetched', async () => {
+        const caseLink = {
+            id: 'case-link-1',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockDispatchApi.mockResolvedValueOnce(null);
+        mockParams['*'] = 'Child/NestedNotes';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledOnce();
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+    it('renders CaseDashboard when path equals nested case id', async () => {
+        const caseLink = {
+            id: 'Child/NestedCase',
+            parent: null,
+            type: 'case',
+            name: 'Child',
+            value: 'child-case-123'
+        };
+        const _case = createMockCase({ case_id: 'root-case', items: [caseLink] });
+        mockParams['*'] = 'Child/NestedCase';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(mockDispatchApi).not.toHaveBeenCalled();
+            expect(screen.getByTestId('case-dashboard')).toHaveTextContent('child-case-123');
+        });
+    });
+    it('resolves hierarchical non-case parent via buildPathFromID', async () => {
+        const folder = {
+            id: 'folder-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Folder'
+        };
+        const doc = {
+            id: 'doc-1',
+            parent: 'folder-1',
+            type: 'markdown',
+            name: 'Doc',
+            value: 'Child content'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [folder, doc] });
+        mockParams['*'] = 'Folder/Doc';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('markdown-page')).toHaveTextContent('Child content');
+        });
+    });
+    it('renders InformationPane for event item paths', async () => {
+        const eventItem = {
+            id: 'event-1',
+            parent: null,
+            type: 'event',
+            name: 'Incident',
+            value: 'selected-event-id'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [eventItem] });
+        mockParams['*'] = 'Incident';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('information-pane')).toHaveTextContent('selected-event-id');
+        });
+    });
+    it('falls back to JSON render for unknown item types', async () => {
+        const otherItem = {
+            id: 'other-1',
+            parent: null,
+            type: 'other',
+            name: 'Other',
+            value: 'misc'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [otherItem] });
+        mockParams['*'] = 'Other';
+        const { container } = render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(container.querySelector('h1')).toBeTruthy();
+            expect(container.querySelector('h1')?.textContent).toContain('other-1');
+        });
+    });
+    it('renders NotFoundPage when no item matches the given path', async () => {
+        const otherItem = {
+            id: 'item-2',
+            parent: null,
+            type: 'markdown',
+            name: 'Other',
+            value: 'Other content'
+        };
+        const _case = createMockCase({ case_id: 'case-1', items: [otherItem] });
+        mockParams['*'] = 'UnknownPath';
+        render(_jsx(ItemPage, { case: _case }));
+        await waitFor(() => {
+            expect(screen.getByTestId('not-found')).toBeInTheDocument();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cancel, Edit, Save } from '@mui/icons-material';
+import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import ClassificationChip from '@cccsaurora/howler-ui/components/elements/display/ClassificationChip';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useCase from '../hooks/useCase';
+import { buildPathFromID } from '../utils';
+const MarkdownPage = ({ case: _case, item }) => {
+    const { t } = useTranslation();
+    const [isEditing, setIsEditing] = useState(false);
+    const [markdown, setMarkdown] = useState(item.value ?? '');
+    const [saving, setSaving] = useState(false);
+    const { update } = useCase({ case: _case });
+    useEffect(() => {
+        setMarkdown(item.value ?? '');
+        setIsEditing(false);
+    }, [item.id, item.value]);
+    const path = useMemo(() => buildPathFromID(_case, item.parent), [_case, item.parent]);
+    const handleCancel = useCallback(() => {
+        setMarkdown(item.value ?? '');
+        setIsEditing(false);
+    }, [item.value]);
+    const handleSave = useCallback(async () => {
+        if (!_case.case_id || !item.id) {
+            return;
+        }
+        const nextItems = (_case.items ?? []).map(_item => {
+            if (_item.id === item.id) {
+                return {
+                    ..._item,
+                    value: markdown
+                };
+            }
+            return _item;
+        });
+        try {
+            setSaving(true);
+            await update({ items: nextItems });
+            setIsEditing(false);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [_case.case_id, _case.items, item.id, markdown, update]);
+    return (_jsxs(Box, { p: 1, sx: { mt: -1, minHeight: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsxs(Typography, { variant: "h6", color: "text.secondary", children: [path, "/"] }), _jsx(Typography, { variant: "h6", children: item.name })] }), item.classification && _jsx(ClassificationChip, { classification: item.classification, format: "long" }), _jsx("div", { style: { flex: 1 } }), isEditing && (_jsx(Tooltip, { title: t('button.save'), children: _jsx(IconButton, { size: "small", color: "success", onClick: handleSave, disabled: saving, children: _jsx(Save, { fontSize: "small" }) }) })), _jsx(Tooltip, { title: isEditing ? t('button.cancel') : t('edit'), children: _jsx(IconButton, { size: "small", color: isEditing ? 'error' : 'default', onClick: isEditing ? handleCancel : () => setIsEditing(true), disabled: saving, children: isEditing ? _jsx(Cancel, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) })] }), _jsx(Divider, {}), isEditing ? (_jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 1, sx: { mt: 1, flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
+                            flex: 1,
+                            minHeight: 0,
+                            border: theme => `1px solid ${theme.palette.divider}`,
+                            borderRadius: 1,
+                            overflow: 'hidden'
+                        }, children: _jsx(ThemedEditor, { id: "markdown-editor", language: "markdown", value: markdown, onChange: value => setMarkdown(value ?? ''), options: { wordWrap: 'on', scrollBeyondLastLine: false }, height: "100%" }) }), _jsx(Box, { sx: {
+                            flex: 1,
+                            minHeight: 0,
+                            border: theme => `1px solid ${theme.palette.divider}`,
+                            borderRadius: 1,
+                            p: 1,
+                            overflow: 'auto'
+                        }, children: _jsx(Markdown, { md: markdown }) })] })) : (_jsx(Markdown, { md: markdown }))] }));
+};
+export default MarkdownPage;

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

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

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

@@ -0,0 +1,116 @@
+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 { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockUpdate = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('components/elements/display/ClassificationChip', () => ({
+    default: () => _jsx("span", { id: "classification-chip" })
+}));
+vi.mock('components/elements/display/Markdown', () => ({
+    default: ({ md }) => _jsx("div", { id: "markdown-preview", children: md })
+}));
+vi.mock('components/elements/ThemedEditor', () => ({
+    default: ({ id, value, onChange }) => (_jsx("textarea", { id: id ?? 'themed-editor', value: value ?? '', onChange: ev => onChange?.(ev.target.value) }))
+}));
+const { default: MarkdownPage } = await import('./MarkdownPage');
+describe('MarkdownPage', () => {
+    let user;
+    let markdownItem;
+    let _case;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        markdownItem = {
+            id: 'item-1',
+            parent: null,
+            type: 'markdown',
+            name: 'Analyst Notes',
+            value: 'Initial markdown value',
+            classification: 'TLP:CLEAR'
+        };
+        _case = createMockCase({
+            case_id: 'case-1',
+            items: [
+                markdownItem,
+                {
+                    id: 'item-2',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Other Item',
+                    value: 'Keep this value'
+                }
+            ]
+        });
+    });
+    it('renders read mode by default', () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        expect(screen.getByText('Initial markdown value')).toBeInTheDocument();
+        expect(screen.queryByRole('textbox')).toBeNull();
+        expect(screen.getByRole('button', { name: 'edit' })).toBeInTheDocument();
+    });
+    it('enters edit mode and updates preview as content changes', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        expect(editor).toHaveValue('Initial markdown value');
+        await user.clear(editor);
+        await user.type(editor, 'Updated markdown preview');
+        expect(screen.getByTestId('markdown-preview')).toHaveTextContent('Updated markdown preview');
+    });
+    it('cancels edits and restores the original item value', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        await user.clear(editor);
+        await user.type(editor, 'Unsaved value');
+        await user.click(screen.getByRole('button', { name: 'button.cancel' }));
+        expect(screen.queryByRole('textbox')).toBeNull();
+        expect(screen.getByText('Initial markdown value')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        expect(screen.getByRole('textbox')).toHaveValue('Initial markdown value');
+    });
+    it('saves edits through update and exits edit mode', async () => {
+        render(_jsx(MarkdownPage, { case: _case, item: markdownItem }));
+        await user.click(screen.getByRole('button', { name: 'edit' }));
+        const editor = screen.getByRole('textbox');
+        await user.clear(editor);
+        await user.type(editor, 'Persisted value');
+        await user.click(screen.getByRole('button', { name: 'button.save' }));
+        await waitFor(() => {
+            expect(mockUpdate).toHaveBeenCalledOnce();
+        });
+        expect(mockUpdate).toHaveBeenCalledWith({
+            items: [
+                {
+                    id: 'item-1',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Analyst Notes',
+                    value: 'Persisted value',
+                    classification: 'TLP:CLEAR'
+                },
+                {
+                    id: 'item-2',
+                    parent: null,
+                    type: 'markdown',
+                    name: 'Other Item',
+                    value: 'Keep this value'
+                }
+            ]
+        });
+        await waitFor(() => {
+            expect(screen.queryByRole('textbox')).toBeNull();
+        });
+        expect(screen.getByText('Persisted value')).toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import CaseCard from '../../../elements/case/CaseCard';
+const RelatedCasePanel = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const [casePage, setCasePage] = useState(1);
+    const casePages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'case')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    if (casePages.length < 1) {
+        return null;
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.cases') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.value }), _jsx(Box, { component: Link, to: `/cases/${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 RelatedCasePanel;

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

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

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

@@ -0,0 +1,115 @@
+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 mockCaseCardProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+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 }))
+    };
+});
+vi.mock('../../../elements/case/CaseCard', () => ({
+    default: (props) => {
+        mockCaseCardProps.current.push(props);
+        return _jsx("div", { id: `case-card-${String(props.caseId)}` });
+    }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import RelatedCasePanel from './RelatedCasePanel';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderPanel = (caseValue) => {
+    return render(_jsx(MemoryRouter, { children: _jsx(RelatedCasePanel, { case: caseValue }) }));
+};
+const makeCaseItem = (value, id = value) => ({
+    type: 'case',
+    value,
+    id,
+    name: null,
+    parent: null
+});
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockCaseCardProps.current = [];
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('RelatedCasePanel', () => {
+    it('renders a skeleton when the case is null', () => {
+        const { container } = renderPanel(null);
+        expect(container.querySelector('.MuiSkeleton-root')).toBeTruthy();
+    });
+    it('renders nothing when the case has no case-type items', () => {
+        const baseCase = createMockCase({ case_id: 'case-no-cases', items: [{ type: 'hit', value: 'hit-1' }] });
+        const { container } = renderPanel(baseCase);
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('renders the translated heading key', () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [makeCaseItem('child-1')] });
+        renderPanel(_case);
+        expect(screen.getByText('page.cases.dashboard.cases')).toBeInTheDocument();
+    });
+    it('renders CaseCard only for unique case items on the current page', () => {
+        const duplicate = makeCaseItem('child-1', '/cases/test/path-a');
+        const _case = createMockCase({
+            case_id: 'case-2',
+            items: [
+                duplicate,
+                duplicate,
+                makeCaseItem('child-2', '/cases/test/path-b'),
+                { type: 'event', value: 'event-1' }
+            ]
+        });
+        renderPanel(_case);
+        expect(screen.getByTestId('case-card-child-1')).toBeInTheDocument();
+        expect(screen.getByTestId('case-card-child-2')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-event-1')).not.toBeInTheDocument();
+        expect(mockCaseCardProps.current).toHaveLength(2);
+        expect(mockCaseCardProps.current[0]).toEqual(expect.objectContaining({
+            caseId: 'child-1'
+        }));
+    });
+    it('renders overlay links that target each case path', () => {
+        const _case = createMockCase({
+            case_id: 'case-3',
+            items: [makeCaseItem('child-1', '/cases/case-3/path-one'), makeCaseItem('child-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/child-1');
+        expect(links[1]).toHaveAttribute('href', '/cases/child-2');
+    });
+    it('shows pagination with multiple pages and switches to page 2 items', () => {
+        const items = Array.from({ length: 6 }, (_, idx) => makeCaseItem(`child-${idx + 1}`, `/cases/test/child-${idx + 1}`));
+        const _case = createMockCase({ case_id: 'case-4', items });
+        renderPanel(_case);
+        expect(screen.getByTestId('case-card-child-1')).toBeInTheDocument();
+        expect(screen.getByTestId('case-card-child-5')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-child-6')).not.toBeInTheDocument();
+        const pageTwoButton = screen.getByRole('button', { name: 'Go to page 2' });
+        fireEvent.click(pageTwoButton);
+        expect(screen.getByTestId('case-card-child-6')).toBeInTheDocument();
+        expect(screen.queryByTestId('case-card-child-1')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const TaskPanel: FC<{
+    case: Case;
+    updateCase: (_case: Partial<Case>) => Promise<void>;
+}>;
+export default TaskPanel;