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

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

@@ -0,0 +1,170 @@
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
+import { createElement } from '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));
+};
+const CaseConsumers = ({ case: providedCase }) => {
+    const sidebarCase = useCase({ case: providedCase });
+    const dashboardCase = useCase({ case: providedCase });
+    const detailsCase = useCase({ case: providedCase });
+    return createElement('div', null, createElement('span', { id: 'sidebar-case-title' }, sidebarCase.case.title), createElement('span', { id: 'dashboard-case-title' }, dashboardCase.case.title), createElement('span', { id: 'details-case-title' }, detailsCase.case.title));
+};
+// ---------------------------------------------------------------------------
+// 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 and hook instance', () => {
+            const mockCase = createMockCase({ case_id: 'c3' });
+            renderUseCaseHook({ case: mockCase });
+            expect(mockAddListener).toHaveBeenCalledWith(expect.stringMatching(/^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(expect.stringMatching(/^case-update-c7-/));
+        });
+        it('updates every concurrent case consumer for the same case', () => {
+            const mockCase = createMockCase({ case_id: 'c8', title: 'Original' });
+            render(createElement(CaseConsumers, { case: mockCase }));
+            const listenerKeys = mockAddListener.mock.calls.map(([key]) => key);
+            expect(listenerKeys).toHaveLength(3);
+            expect([...new Set(listenerKeys)]).toHaveLength(3);
+            const updatedCase = createMockCase({ case_id: 'c8', title: 'Updated via socket' });
+            act(() => {
+                mockAddListener.mock.calls.forEach(([, listener]) => {
+                    listener({
+                        type: 'cases',
+                        case: updatedCase,
+                        error: false,
+                        message: '',
+                        status: 200
+                    });
+                });
+            });
+            expect(screen.getByTestId('sidebar-case-title')).toHaveTextContent('Updated via socket');
+            expect(screen.getByTestId('dashboard-case-title')).toHaveTextContent('Updated via socket');
+            expect(screen.getByTestId('details-case-title')).toHaveTextContent('Updated via socket');
+        });
+    });
+});

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

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

package/components/routes/cases/modals/AddRecordToCaseModal.js

@@ -0,0 +1,57 @@
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, CircularProgress, Divider, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CaseRecordRow from './CaseRecordRow';
+import { useFolderOptions, useRecordEntries } from './hooks';
+// ---------------------------------------------------------------------------
+// Modal
+// ---------------------------------------------------------------------------
+const AddRecordToCaseModal = ({ records }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [cases, setCases] = useState([]);
+    const [selectedCase, setSelectedCase] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    const [entries, updateEntry] = useRecordEntries(records);
+    useEffect(() => {
+        void dispatchApi(api.search.case.post({ query: 'case_id:*', rows: 100 }), { throwError: false }).then(result => {
+            if (result) {
+                setCases(result.items);
+            }
+        });
+    }, [dispatchApi]);
+    const folderOptions = useFolderOptions(selectedCase);
+    const isValid = useMemo(() => !!selectedCase && entries.length > 0 && entries.every(e => !!e.name.trim()), [selectedCase, entries]);
+    const onSubmit = async () => {
+        if (!isValid || !selectedCase) {
+            return;
+        }
+        setSubmitting(true);
+        try {
+            for (const entry of entries) {
+                await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
+                    name: entry.name,
+                    value: entry.record.howler.id,
+                    type: entry.record.__index,
+                    parent: entry.parent
+                }));
+            }
+            close();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', maxHeight: '90vh', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_to_case') }), _jsx(Autocomplete, { options: cases, getOptionLabel: option => option.title ?? option.case_id ?? '', isOptionEqualToValue: (option, value) => option.case_id === value.case_id, value: selectedCase, disablePortal: true, onChange: (_ev, newVal) => {
+                    setSelectedCase(newVal);
+                }, renderOption: (props, option) => (_createElement("li", { ...props, key: option.case_id, style: { ...props.style, display: 'flex', justifyContent: 'stretch', alignItems: 'stretch' } },
+                    _jsx(CaseCard, { case: option, slotProps: { card: { sx: { width: '100%' } } } }))), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_case'), fullWidth: true })) }), selectedCase && entries.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.items_section') }) }), _jsx(Stack, { spacing: 1, overflow: "auto", flex: 1, children: entries.map((entry, i) => (_jsx(CaseRecordRow, { entry: entry, folderOptions: folderOptions, onNameChange: val => updateEntry(i, 'name', val), onParentChange: val => updateEntry(i, 'parent', val) }, entry.record.howler.id))) })] })) : (_jsx("div", { style: { flex: 1, maxHeight: '100px' } })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, disabled: submitting, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid || submitting, startIcon: submitting ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : undefined, onClick: onSubmit, children: t('confirm') })] })] }));
+};
+export default AddRecordToCaseModal;

package/components/routes/cases/modals/AddRecordToCaseModal.test.d.ts

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

package/components/routes/cases/modals/AddRecordToCaseModal.test.js

@@ -0,0 +1,309 @@
+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 { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddRecordToCaseModal from './AddRecordToCaseModal';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockClose = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/elements/hit/elements/EscalationChip', () => ({
+    default: () => null
+}));
+vi.mock('components/elements/case/CaseCard', () => ({
+    default: ({ case: c }) => _jsx("div", { children: c.title ?? c.case_id })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            case: { post: vi.fn().mockReturnValue('search-case-request') }
+        },
+        v2: {
+            case: {
+                items: { post: vi.fn().mockReturnValue('items-post-request') }
+            }
+        }
+    }
+}));
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+const CASE_A = createMockCase({ case_id: 'case-a', title: 'Case Alpha', items: [] });
+const CASE_B = createMockCase({
+    case_id: 'case-b',
+    title: 'Case Beta',
+    items: [
+        { id: 'f1', type: 'folder', value: 'folder', name: 'folder', visible: true },
+        { id: 'f2', type: 'folder', value: 'subfolder', name: 'subfolder', parent: 'f1', visible: true },
+        { id: 'i1', type: 'hit', value: 'x', name: 'item', parent: 'f2', visible: true }
+    ]
+});
+const MOCK_HIT_1 = createMockHit({
+    howler: { id: 'hit-001', analytic: 'AnalyticOne', status: 'open' }
+});
+const MOCK_HIT_2 = createMockHit({
+    howler: { id: 'hit-002', analytic: 'AnalyticTwo', status: 'open' }
+});
+const MOCK_EVENT = createMockEvent({
+    howler: { id: 'obs-001' }
+});
+// ---------------------------------------------------------------------------
+// Wrapper
+// ---------------------------------------------------------------------------
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ModalContext.Provider, { value: { close: mockClose, open: vi.fn(), setContent: vi.fn() }, children: children }) }));
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderModal = (records) => render(_jsx(AddRecordToCaseModal, { records: records }), { wrapper: Wrapper });
+const selectCase = async (user, caseTitle) => {
+    const combobox = screen.getAllByRole('combobox')[0];
+    await user.click(combobox);
+    const option = await screen.findByRole('option', { name: caseTitle });
+    await user.click(option);
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('AddToCaseModal', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        mockDispatchApi.mockResolvedValue({ items: [CASE_A, CASE_B] });
+    });
+    // -------------------------------------------------------------------------
+    // Initial render
+    // -------------------------------------------------------------------------
+    describe('initial render', () => {
+        it('shows the modal title', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            expect(screen.getByText(i18n.t('modal.cases.add_to_case'))).toBeInTheDocument();
+        });
+        it('renders cancel and confirm buttons', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            expect(screen.getByRole('button', { name: i18n.t('cancel') })).toBeInTheDocument();
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeInTheDocument();
+        });
+        it('confirm is disabled before a case is selected', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('fetches cases on mount', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            expect(api.search.case.post).toHaveBeenCalledWith({ query: 'case_id:*', rows: 100 });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Default item titles
+    // -------------------------------------------------------------------------
+    describe('default item titles', () => {
+        it('pre-populates title for a hit with analytic and id', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            expect(titleInput).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+        });
+        it('pre-populates title for an event with Event and id', async () => {
+            renderModal([MOCK_EVENT]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            expect(titleInput).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
+        });
+        it('title input is editable', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            await user.clear(titleInput);
+            await user.type(titleInput, 'Custom Title');
+            expect(titleInput).toHaveValue('Custom Title');
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Multiple records
+    // -------------------------------------------------------------------------
+    describe('multiple records', () => {
+        it('renders a row for each hit record', async () => {
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            expect(screen.getByText(MOCK_HIT_1.howler.analytic)).toBeInTheDocument();
+            expect(screen.getByText(MOCK_HIT_2.howler.analytic)).toBeInTheDocument();
+        });
+        it('renders independent title inputs for each record', async () => {
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            expect(titleInputs).toHaveLength(2);
+            expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`${MOCK_HIT_2.howler.analytic} (${MOCK_HIT_2.howler.id})`);
+        });
+        it('editing one record title does not affect the other', async () => {
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            await user.clear(titleInputs[0]);
+            await user.type(titleInputs[0], 'Edited');
+            expect(titleInputs[0]).toHaveValue('Edited');
+            expect(titleInputs[1]).toHaveValue(`${MOCK_HIT_2.howler.analytic} (${MOCK_HIT_2.howler.id})`);
+        });
+        it('mixed hit and event records each get correct default titles', async () => {
+            renderModal([MOCK_HIT_1, MOCK_EVENT]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Folder path options
+    // -------------------------------------------------------------------------
+    describe('folder options', () => {
+        it('shows folder options derived from the selected case items', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Beta');
+            const folderInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.select_folder'));
+            await user.click(folderInputs[0]);
+            expect(await screen.findByRole('option', { name: 'folder' })).toBeInTheDocument();
+            expect(screen.getByRole('option', { name: 'folder/subfolder' })).toBeInTheDocument();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Validation
+    // -------------------------------------------------------------------------
+    describe('validation', () => {
+        it('enables confirm after a case is selected and titles are filled', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+        });
+        it('disables confirm when an item title is cleared', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            await user.clear(titleInput);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Cancel
+    // -------------------------------------------------------------------------
+    describe('cancel button', () => {
+        it('calls close when cancel is clicked', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await user.click(screen.getByRole('button', { name: i18n.t('cancel') }));
+            expect(mockClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Submission — single record
+    // -------------------------------------------------------------------------
+    describe('form submission — single record', () => {
+        beforeEach(() => {
+            mockDispatchApi
+                .mockResolvedValueOnce({ items: [CASE_A, CASE_B] }) // case list fetch
+                .mockResolvedValue(undefined); // items.post
+        });
+        it('calls items.post with the correct arguments and closes', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({
+                name: `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`,
+                value: MOCK_HIT_1.howler.id,
+                type: 'hit',
+                parent: null
+            }));
+        });
+        it('includes the selected folder id as parent in the submitted item', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Beta');
+            const folderInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_folder'));
+            await user.click(folderInput);
+            const option = await screen.findByRole('option', { name: 'folder' });
+            await user.click(option);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-b', expect.objectContaining({
+                parent: 'f1'
+            }));
+        });
+        it('uses event __index for event records', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_EVENT]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ type: 'event' }));
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Submission — multiple records
+    // -------------------------------------------------------------------------
+    describe('form submission — multiple records', () => {
+        beforeEach(() => {
+            mockDispatchApi.mockResolvedValueOnce({ items: [CASE_A, CASE_B] }).mockResolvedValue(undefined);
+        });
+        it('calls items.post once per record', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledTimes(2);
+        });
+        it('submits the correct value for each record', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ value: MOCK_HIT_1.howler.id }));
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ value: MOCK_HIT_2.howler.id }));
+        });
+        it('uses an independently edited title for each record', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.name'));
+            await user.clear(titleInputs[0]);
+            await user.type(titleInputs[0], 'First Item');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ name: 'First Item', value: MOCK_HIT_1.howler.id }));
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ value: MOCK_HIT_2.howler.id }));
+        });
+    });
+});

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

@@ -0,0 +1,9 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+interface AddItemToCaseModalProps {
+    case: Case;
+    parentId?: string | null;
+    onUpdated?: (updatedCase: Case) => void;
+}
+declare const AddToCaseModal: FC<AddItemToCaseModalProps>;
+export default AddToCaseModal;

package/components/routes/cases/modals/AddToCaseModal.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { Autocomplete, Box, Button, CircularProgress, Stack, TextField, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFolderOptions } from './hooks';
+const ITEM_TYPES = [
+    { value: 'reference', labelKey: 'modal.cases.add_item.type.link' },
+    { value: 'markdown', labelKey: 'modal.cases.add_item.type.markdown' }
+];
+const AddToCaseModal = ({ case: _case, parentId = null, onUpdated }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [itemType, setItemType] = useState(ITEM_TYPES[0]);
+    const [title, setTitle] = useState('');
+    const [value, setValue] = useState('');
+    const [selectedParent, setSelectedParent] = useState(parentId);
+    const [submitting, setSubmitting] = useState(false);
+    const folderOptions = useFolderOptions(_case);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+    }, [monaco]);
+    const isValid = useMemo(() => {
+        if (!title.trim()) {
+            return false;
+        }
+        if (itemType.value === 'reference' && !value.trim()) {
+            return false;
+        }
+        if (itemType.value === 'markdown' && !value.trim()) {
+            return false;
+        }
+        return true;
+    }, [title, value, itemType]);
+    const onSubmit = async () => {
+        if (!isValid || !_case.case_id) {
+            return;
+        }
+        setSubmitting(true);
+        try {
+            const updatedCase = await dispatchApi(api.v2.case.items.post(_case.case_id, {
+                type: itemType.value,
+                value,
+                name: title,
+                parent: selectedParent
+            }));
+            if (updatedCase) {
+                onUpdated?.(updatedCase);
+                close();
+            }
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(1000px, 60vw)' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_item') }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { value: itemType, onChange: (_, option) => {
+                            if (option) {
+                                setItemType(option);
+                            }
+                        }, options: ITEM_TYPES, getOptionLabel: opt => t(opt.labelKey), isOptionEqualToValue: (option, choice) => option.value === choice.value, disablePortal: true, disableClearable: true, renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.type'), sx: { minWidth: '175px' } })) }), _jsx(TextField, { size: "small", label: t('modal.cases.add_item.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true })] }), itemType.value === 'reference' && (_jsx(TextField, { size: "small", label: t('modal.cases.add_item.url'), value: value, onChange: ev => setValue(ev.target.value), fullWidth: true, placeholder: "https://example.com" })), itemType.value === 'markdown' && (_jsx(Box, { sx: { border: 'thin solid', borderColor: theme.palette.divider }, children: _jsx(ThemedEditor, { id: "add-item-markdown", height: "240px", width: "100%", language: "markdown", theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: value, onChange: content => setValue(content ?? ''), options: {} }) })), folderOptions.length > 0 && (_jsx(Autocomplete, { options: folderOptions, getOptionLabel: opt => opt.label, isOptionEqualToValue: (opt, val) => opt.id === val.id, value: folderOptions.find(f => f.id === selectedParent) ?? null, disablePortal: true, onChange: (_ev, newVal) => setSelectedParent(newVal?.id ?? null), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.folder'), placeholder: t('modal.cases.add_item.root'), fullWidth: true })) })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, disabled: submitting, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid || submitting, startIcon: submitting ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : undefined, onClick: onSubmit, children: t('confirm') })] })] }));
+};
+export default AddToCaseModal;

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

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { FolderOption, RecordEntry } from './types';
+declare const CaseRecordRow: FC<{
+    entry: RecordEntry;
+    folderOptions?: FolderOption[];
+    onNameChange: (name: string) => void;
+    onParentChange: (parent: string | null) => void;
+}>;
+export default CaseRecordRow;