@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.1040

package/components/routes/cases/detail/sidebar/FolderEntry.test.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+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 })),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' }))
+    };
+});
+// Controllable draggable mock — lets individual tests flip isDragging and transform
+const mockDraggable = vi.hoisted(() => ({
+    isDragging: false,
+    transform: null
+}));
+vi.mock('@dnd-kit/core', () => ({
+    useDraggable: vi.fn(() => ({
+        attributes: {},
+        listeners: {},
+        setNodeRef: vi.fn(),
+        transform: mockDraggable.transform,
+        isDragging: mockDraggable.isDragging,
+        active: null
+    })),
+    useDroppable: vi.fn(() => ({
+        setNodeRef: vi.fn(),
+        isOver: false
+    }))
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: (t) => (t ? `translate3d(${t.x}px,${t.y}px,0)` : '') } }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import { useDroppable } from '@dnd-kit/core';
+import FolderEntry from './FolderEntry';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const hitItem = (path, value = path) => ({ type: 'hit', value, path });
+const renderEntry = (props = {}) => render(_jsx(MemoryRouter, { children: _jsx(FolderEntry, { caseId: "case-1", path: "folder/item", indent: 1, label: "my label", itemType: "hit", ...props }) }));
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDraggable.isDragging = false;
+    mockDraggable.transform = null;
+    vi.mocked(useDroppable).mockReturnValue({ setNodeRef: vi.fn(), isOver: false });
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('FolderEntry', () => {
+    describe('rendering', () => {
+        it('renders the label text', () => {
+            renderEntry({ label: 'hello world' });
+            expect(screen.getByText('hello world')).toBeInTheDocument();
+        });
+        it('renders as a link when `to` is provided', () => {
+            renderEntry({ to: '/cases/case-1/folder/item' });
+            const el = screen.getByText('my label').closest('a');
+            expect(el).toHaveAttribute('href', '/cases/case-1/folder/item');
+        });
+        it('opens link in new tab for reference items', () => {
+            renderEntry({ itemType: 'reference', to: 'https://example.com', label: 'ext' });
+            const el = screen.getByText('ext').closest('a');
+            expect(el).toHaveAttribute('target', '_blank');
+            expect(el).toHaveAttribute('rel', 'noopener noreferrer');
+        });
+        it('does not render as a link when `to` is omitted', () => {
+            renderEntry({ to: undefined });
+            expect(screen.getByText('my label').closest('a')).toBeNull();
+        });
+        it('shows the chevron for folder items', () => {
+            // Chevron is visible (non-zero opacity) for folder and case types
+            const { container } = renderEntry({ itemType: 'folder' });
+            // ChevronRight is the first svg inside the row
+            const chevron = container.querySelector('svg');
+            expect(chevron).toBeInTheDocument();
+            expect(chevron).not.toHaveStyle('opacity: 0');
+        });
+        it('hides the chevron for non-folder, non-case items', () => {
+            const { container } = renderEntry({ itemType: 'hit' });
+            const chevron = container.querySelector('svg');
+            // Chevron rendered but with opacity 0 (applied via MUI sx / emotion class)
+            expect(chevron).toBeInTheDocument();
+            expect(chevron).toHaveStyle({ opacity: '0' });
+        });
+        it('rotates chevron when chevronOpen is true', () => {
+            const { container } = renderEntry({ itemType: 'folder', chevronOpen: true });
+            const chevron = container.querySelector('svg');
+            expect(chevron).toHaveStyle({ transform: 'rotate(90deg)' });
+        });
+        it('does not rotate chevron when chevronOpen is false', () => {
+            const { container } = renderEntry({ itemType: 'folder', chevronOpen: false });
+            const chevron = container.querySelector('svg');
+            expect(chevron).toHaveStyle({ transform: 'rotate(0deg)' });
+        });
+        it('falls back to the Folder icon for unknown itemTypes', () => {
+            // Should not throw; renders something
+            expect(() => renderEntry({ itemType: 'unknown-type' })).not.toThrow();
+            expect(screen.getByText('my label')).toBeInTheDocument();
+        });
+    });
+    describe('drag state', () => {
+        it('is fully visible when not dragging', () => {
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.opacity).toBe('');
+        });
+        it('becomes invisible (opacity 0) while dragging', () => {
+            mockDraggable.isDragging = true;
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.opacity).toBe('0');
+        });
+        it('does not render as a link while dragging even if `to` is set', () => {
+            mockDraggable.isDragging = true;
+            renderEntry({ to: '/cases/case-1/folder/item' });
+            // isLink = to != null && !isDragging → false, so no <a> wrapping
+            expect(screen.getByText('my label').closest('a')).toBeNull();
+        });
+        it('applies the CSS transform from useDraggable', () => {
+            mockDraggable.transform = { x: 42, y: 10, scaleX: 1, scaleY: 1 };
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.transform).toMatch(/translate3d\(42px,10px/);
+        });
+    });
+    describe('droppable behaviour', () => {
+        it('disables the droppable for non-folder items', () => {
+            renderEntry({ itemType: 'hit', caseId: 'case-1' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('enables the droppable for folder items when caseId is set and not dragging', () => {
+            renderEntry({ itemType: 'folder', caseId: 'case-1' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: false }));
+        });
+        it('disables the droppable for folder items when caseId is null', () => {
+            renderEntry({ itemType: 'folder', caseId: null });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('shows the drop highlight border when isOver and caseId match', () => {
+            vi.mocked(useDroppable).mockReturnValue({ setNodeRef: vi.fn(), isOver: true });
+            const { container } = renderEntry({ caseId: 'case-1', itemType: 'folder' });
+            // The absolute overlay Box has a dynamic border-color — it should be present in DOM
+            const overlay = container.querySelector('[style*="border"]') ?? container.querySelector('div > div');
+            expect(overlay).toBeInTheDocument();
+        });
+    });
+    describe('DnD ID namespacing', () => {
+        it('passes the namespaced id to useDraggable', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: 'case-1', itemType: 'hit', path: 'folder/item' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:hit:folder/item' }));
+        });
+        it('passes the namespaced id to useDroppable', async () => {
+            renderEntry({ caseId: 'case-1', itemType: 'folder', path: 'docs' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:folder:docs' }));
+        });
+        it('uses empty string prefix when caseId is null', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: null, itemType: 'hit', path: 'item' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ id: ':hit:item' }));
+        });
+    });
+    describe('drag disabled when caseId is falsy', () => {
+        it('disables dragging when caseId is null', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: null });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('enables dragging when caseId is set', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: 'case-1' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: false }));
+        });
+    });
+    describe('click handler', () => {
+        it('calls onClick when the entry is clicked', async () => {
+            const onClick = vi.fn();
+            renderEntry({ onClick });
+            await userEvent.click(screen.getByText('my label'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('drag data payload', () => {
+        it('includes type, label, entry, and caseId in drag data', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            const entry = hitItem('folder/item');
+            renderEntry({ caseId: 'case-1', itemType: 'hit', label: 'my label', entry });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({
+                data: { type: 'hit', label: 'my label', entry, caseId: 'case-1' }
+            }));
+        });
+    });
+});

package/components/routes/cases/detail/sidebar/RootDropZone.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const RootDropZone: FC<{
+    caseId: string;
+}>;
+export default RootDropZone;

package/components/routes/cases/detail/sidebar/RootDropZone.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndContext, useDroppable } from '@dnd-kit/core';
+import { Inbox } from '@mui/icons-material';
+import { alpha, Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const RootDropZone = ({ caseId }) => {
+    const { t } = useTranslation();
+    const { active } = useDndContext();
+    const { setNodeRef, isOver } = useDroppable({
+        id: `${caseId}:folder:__root__`,
+        data: { path: '', caseId }
+    });
+    if (!active) {
+        return null;
+    }
+    return (_jsxs(Box, { ref: setNodeRef, sx: theme => ({
+            minHeight: '250px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+            border: '2px dashed',
+            borderColor: isOver ? theme.palette.primary.main : theme.palette.divider,
+            borderRadius: 1,
+            mx: 1,
+            mt: 1,
+            transition: theme.transitions.create(['border-color', 'background-color']),
+            bgcolor: isOver ? alpha(theme.palette.primary.main, 0.08) : 'transparent',
+            color: isOver ? theme.palette.primary.main : theme.palette.text.secondary
+        }), children: [_jsx(Inbox, { fontSize: "large", sx: { opacity: 0.6 } }), _jsx(Typography, { variant: "caption", children: t('page.cases.folder.drop.root') })] }));
+};
+export default RootDropZone;

package/components/routes/cases/detail/sidebar/types.d.ts

@@ -0,0 +1,9 @@
+import type { Item } from 'models/entities/generated/Item';
+
+export type Tree = {
+  path: string;
+  leaves?: Item[];
+  folders?: {
+    [key: string]: Tree;
+  };
+};

package/components/routes/cases/detail/sidebar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import type { Tree } from './types';
+export declare const buildTree: (items?: Item[]) => Tree;

package/components/routes/cases/detail/sidebar/utils.js

@@ -0,0 +1,29 @@
+import { get, set, sortBy, take } from 'lodash-es';
+export const buildTree = (items = []) => {
+    // Root tree node stores direct children in `leaves`; subfolders live under `folders`.
+    const tree = { leaves: [], path: '' };
+    sortBy(items, 'path').forEach(item => {
+        // Ignore items that cannot be placed in the folder structure.
+        if (!item?.path) {
+            return;
+        }
+        // Split path into folder segments + item name, then remove the item name.
+        const parts = item.path.split('/');
+        parts.pop();
+        // Ensure each folder node exists and has its path set.
+        parts.forEach((_, index) => {
+            const folderPath = `folders.${take(parts, index + 1).join('.folders.')}`;
+            set(tree, `${folderPath}.path`, take(parts, index + 1).join('/'));
+        });
+        if (parts.length > 0) {
+            // Navigate to the target folder via the `folders` nesting and append the leaf.
+            const folderPath = `folders.${parts.join('.folders.')}`;
+            const size = get(tree, folderPath)?.leaves?.length ?? 0;
+            set(tree, `${folderPath}.leaves.${size}`, item);
+            return;
+        }
+        // Items without parent folders are top-level leaves.
+        tree.leaves.push(item);
+    });
+    return tree;
+};

package/components/routes/cases/detail/sidebar/utils.test.d.ts

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

package/components/routes/cases/detail/sidebar/utils.test.js

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { buildTree } from './utils';
+const hit = (path, value = path) => ({ type: 'hit', value, path });
+describe('buildTree', () => {
+    it('returns an empty tree for no items', () => {
+        expect(buildTree()).toEqual({ path: '', leaves: [] });
+    });
+    it('returns an empty tree for an empty array', () => {
+        expect(buildTree([])).toEqual({ path: '', leaves: [] });
+    });
+    it('ignores items with no path', () => {
+        const noPath = { type: 'hit', value: 'x' };
+        expect(buildTree([noPath])).toEqual({ path: '', leaves: [] });
+    });
+    it('places a path-less item alongside a valid one without affecting the folder', () => {
+        const valid = hit('folder/item');
+        const noPath = { type: 'hit', value: 'x' };
+        const result = buildTree([valid, noPath]);
+        expect(result.leaves).toEqual([]);
+        expect(result.folders?.folder.leaves).toEqual([valid]);
+    });
+    it('places an item with a filename but no folder as a top-level leaf', () => {
+        const flat = hit('flat-item');
+        const result = buildTree([flat]);
+        expect(result.leaves).toEqual([flat]);
+        expect(result.folders).toBeUndefined();
+    });
+    it('places an item in a single-level folder', () => {
+        const nested = hit('folderA/item');
+        const result = buildTree([nested]);
+        expect(result.leaves).toEqual([]);
+        expect(result.folders?.folderA).toMatchObject({ path: 'folderA', leaves: [nested] });
+    });
+    it('sets path correctly for a single-level folder', () => {
+        const result = buildTree([hit('folderA/item')]);
+        expect(result.folders?.folderA.path).toBe('folderA');
+    });
+    it('places an item in a two-level nested folder', () => {
+        const deep = hit('a/b/item');
+        const result = buildTree([deep]);
+        expect(result.folders?.a.folders?.b.leaves).toEqual([deep]);
+    });
+    it('sets path correctly for deeply nested folders', () => {
+        const result = buildTree([hit('a/b/item')]);
+        expect(result.folders?.a.path).toBe('a');
+        expect(result.folders?.a.folders?.b.path).toBe('a/b');
+    });
+    it('groups multiple items under the same folder', () => {
+        const item1 = hit('folder/item1', 'v1');
+        const item2 = hit('folder/item2', 'v2');
+        const result = buildTree([item1, item2]);
+        const leaves = result.folders?.folder.leaves ?? [];
+        expect(leaves).toHaveLength(2);
+        expect(leaves).toEqual(expect.arrayContaining([item1, item2]));
+    });
+    it('handles multiple top-level folders independently', () => {
+        const hitA = hit('folderA/item', 'a');
+        const hitB = hit('folderB/item', 'b');
+        const result = buildTree([hitA, hitB]);
+        expect(result.folders?.folderA.leaves).toEqual([hitA]);
+        expect(result.folders?.folderB.leaves).toEqual([hitB]);
+    });
+    it('handles a mix of top-level leaves and folder items', () => {
+        const flat = hit('flat-item', 'flat');
+        const nested = hit('folder/item', 'nested');
+        const result = buildTree([flat, nested]);
+        expect(result.leaves).toEqual([flat]);
+        expect(result.folders?.folder.leaves).toEqual([nested]);
+    });
+    it('places items across sibling folders at different depths', () => {
+        const shallow = hit('a/item', 'shallow');
+        const deep = hit('a/b/item', 'deep');
+        const result = buildTree([shallow, deep]);
+        expect(result.folders?.a.leaves).toEqual([shallow]);
+        expect(result.folders?.a.folders?.b.leaves).toEqual([deep]);
+    });
+    it('preserves all item fields on leaves', () => {
+        const rich = { type: 'reference', value: 'https://example.com', path: 'links/example' };
+        const result = buildTree([rich]);
+        expect(result.folders?.links.leaves?.[0]).toEqual(rich);
+    });
+});

package/components/routes/cases/hooks/useCase.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+interface CaseArguments {
+    case?: Case;
+    caseId?: string;
+}
+interface CaseResult {
+    case: Case;
+    update: (update: Partial<Case>, publish?: boolean) => Promise<void>;
+    loading: boolean;
+    missing: boolean;
+}
+declare const useCase: (args: CaseArguments) => CaseResult;
+export default useCase;

package/components/routes/cases/hooks/useCase.js

@@ -0,0 +1,69 @@
+import api from '@cccsaurora/howler-ui/api';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { isCaseUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
+const useCase = ({ caseId, case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const { addListener, removeListener } = useContext(SocketContext);
+    const [loading, setLoading] = useState(false);
+    const [missing, setMissing] = useState(false);
+    const [_case, setCase] = useState(providedCase);
+    const activeCaseId = _case?.case_id ?? caseId;
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            setLoading(true);
+            dispatchApi(api.v2.case.get(caseId), { throwError: false })
+                .then(setCase)
+                .finally(() => setLoading(false));
+        }
+    }, [caseId, dispatchApi]);
+    useEffect(() => {
+        if (!activeCaseId) {
+            return;
+        }
+        const listenerKey = `case-update-${activeCaseId}`;
+        addListener(listenerKey, data => {
+            if (isCaseUpdate(data) && data.case.case_id === activeCaseId) {
+                setCase(data.case);
+            }
+        });
+        return () => {
+            removeListener(listenerKey);
+        };
+    }, [activeCaseId, addListener, removeListener]);
+    const update = useCallback(async (_updatedCase, publish = true) => {
+        if (!activeCaseId) {
+            return;
+        }
+        try {
+            if (publish) {
+                setCase(await dispatchApi(api.v2.case.put(activeCaseId, _updatedCase)));
+            }
+            else {
+                setCase(prevCase => {
+                    if (!prevCase) {
+                        return prevCase;
+                    }
+                    return {
+                        ...prevCase,
+                        ..._updatedCase
+                    };
+                });
+            }
+        }
+        catch (e) {
+            setMissing(true);
+        }
+        finally {
+            return;
+        }
+    }, [activeCaseId, dispatchApi]);
+    return { case: _case, update, loading, missing };
+};
+export default useCase;

package/components/routes/cases/hooks/useCase.test.d.ts

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

package/components/routes/cases/hooks/useCase.test.js

@@ -0,0 +1,141 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockCaseGet = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (...args) => mockCaseGet(...args),
+                put: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/SocketProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        SocketContext: createContext({
+            addListener: mockAddListener,
+            removeListener: mockRemoveListener,
+            emit: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            isOpen: () => true,
+            viewers: {},
+            fetchViewers: vi.fn()
+        })
+    };
+});
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line
+import useCase from './useCase';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderUseCaseHook = (args) => {
+    return renderHook(() => useCase(args));
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockAddListener.mockReset();
+    mockRemoveListener.mockReset();
+    mockCaseGet.mockReset();
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('useCase', () => {
+    describe('initialization', () => {
+        it('uses the provided case directly when given', () => {
+            const mockCase = createMockCase({ case_id: 'c1', title: 'Provided' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            expect(result.current.case).toBe(mockCase);
+            expect(result.current.loading).toBe(false);
+        });
+        it('fetches the case by ID when caseId is provided', async () => {
+            const mockCase = createMockCase({ case_id: 'c2', title: 'Fetched' });
+            mockDispatchApi.mockResolvedValue(mockCase);
+            const { result } = renderUseCaseHook({ caseId: 'c2' });
+            await waitFor(() => {
+                expect(result.current.case).toEqual(mockCase);
+            });
+            expect(mockDispatchApi).toHaveBeenCalled();
+        });
+    });
+    describe('socket listener', () => {
+        it('registers a listener keyed by case ID', () => {
+            const mockCase = createMockCase({ case_id: 'c3' });
+            renderUseCaseHook({ case: mockCase });
+            expect(mockAddListener).toHaveBeenCalledWith('case-update-c3', expect.any(Function));
+        });
+        it('updates state when a matching case update is received', () => {
+            const mockCase = createMockCase({ case_id: 'c4', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            const updatedCase = createMockCase({ case_id: 'c4', title: 'Updated via socket' });
+            act(() => {
+                listenerCallback({
+                    type: 'cases',
+                    case: updatedCase,
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Updated via socket');
+        });
+        it('ignores case updates for a different case ID', () => {
+            const mockCase = createMockCase({ case_id: 'c5', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            const differentCase = createMockCase({ case_id: 'other-case', title: 'Different' });
+            act(() => {
+                listenerCallback({
+                    type: 'cases',
+                    case: differentCase,
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Original');
+        });
+        it('ignores non-case-update messages', () => {
+            const mockCase = createMockCase({ case_id: 'c6', title: 'Original' });
+            const { result } = renderUseCaseHook({ case: mockCase });
+            const listenerCallback = mockAddListener.mock.calls[0][1];
+            act(() => {
+                listenerCallback({
+                    type: 'hits',
+                    hit: {},
+                    version: '1',
+                    error: false,
+                    message: '',
+                    status: 200
+                });
+            });
+            expect(result.current.case.title).toBe('Original');
+        });
+        it('removes listener on unmount', () => {
+            const mockCase = createMockCase({ case_id: 'c7' });
+            const { unmount } = renderUseCaseHook({ case: mockCase });
+            unmount();
+            expect(mockRemoveListener).toHaveBeenCalledWith('case-update-c7');
+        });
+    });
+});

package/components/routes/cases/modals/AddToCaseModal.d.ts

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const AddToCaseModal: FC<{
+    records: (Hit | Observable)[];
+}>;
+export default AddToCaseModal;