@cccsaurora/howler-ui 2.18.0-dev.748 → 2.18.0-dev.752

package/components/elements/record/RecordContextMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
 import api from '@cccsaurora/howler-ui/api';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
@@ -12,6 +12,7 @@ import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions'
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
 import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
+import CreateCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/CreateCaseModal';
 import { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -237,7 +238,15 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
             icon: _jsx(CreateNewFolder, {}),
             label: t('modal.cases.add_to_case'),
             disabled: !record,
-            onClick: () => showModal(_jsx(AddToCaseModal, { records: records }))
+            onClick: () => showModal(_jsx(AddToCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        result.push({
+            kind: 'item',
+            id: 'create-case',
+            icon: _jsx(NoteAdd, {}),
+            label: t('modal.cases.create_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(CreateCaseModal, { records: records }), { maxHeight: '90vh' })
         });
         return result;
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/components/elements/record/RecordContextMenu.test.js

@@ -944,7 +944,7 @@ describe('HitContextMenu', () => {
             });
             await waitFor(() => {
                 expect(mockShowModal).toHaveBeenCalledOnce();
-                expect(mockShowModal).toHaveBeenCalledWith(expect.objectContaining({ type: expect.any(Function) }));
+                expect(mockShowModal).toHaveBeenCalledWith(expect.objectContaining({ type: expect.any(Function) }), expect.objectContaining({ maxHeight: expect.any(String) }));
             });
         });
     });

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

@@ -1,20 +1,25 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Button, Stack, TextField, Typography } from '@mui/material';
+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 AddToCaseModal = ({ records }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const { close } = useContext(ModalContext);
     const [cases, setCases] = useState([]);
     const [selectedCase, setSelectedCase] = useState(null);
-    const [path, setPath] = useState('');
-    const [title, setTitle] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [entries, updateEntry] = useRecordEntries(records);
     useEffect(() => {
         dispatchApi(api.search.case.post({ query: 'case_id:*', rows: 100 }), { throwError: false }).then(result => {
             if (result) {
@@ -22,41 +27,33 @@ const AddToCaseModal = ({ records }) => {
             }
         });
     }, [dispatchApi]);
-    const folderOptions = useMemo(() => {
-        if (!selectedCase?.items) {
-            return [];
+    const folderOptions = useFolderOptions(selectedCase);
+    const isValid = useMemo(() => !!selectedCase &&
+        entries.length > 0 &&
+        entries.every(e => !!e.title.trim() && !e.path.startsWith('/') && !e.path.endsWith('/')), [selectedCase, entries]);
+    const onSubmit = async () => {
+        if (!isValid || !selectedCase) {
+            return;
         }
-        const paths = new Set();
-        for (const item of selectedCase.items) {
-            if (!item.path) {
-                continue;
-            }
-            const parts = item.path.split('/');
-            parts.pop();
-            for (let i = 1; i <= parts.length; i++) {
-                paths.add(parts.slice(0, i).join('/'));
+        setSubmitting(true);
+        try {
+            for (const entry of entries) {
+                const fullPath = entry.path ? `${entry.path}/${entry.title}` : entry.title;
+                await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
+                    path: fullPath,
+                    value: entry.record.howler.id,
+                    type: entry.record.__index
+                }));
             }
+            close();
         }
-        return Array.from(paths).sort();
-    }, [selectedCase]);
-    const fullPath = path ? `${path}/${title}` : title;
-    const isValid = !!selectedCase && !!title;
-    const onSubmit = async () => {
-        if (!selectedCase || records?.length < 1) {
-            return;
+        finally {
+            setSubmitting(false);
         }
-        await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
-            path: fullPath,
-            value: records[0].howler.id,
-            type: records[0].__index
-        }));
-        close();
     };
-    // TODO: No support currently for multiple records
-    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', 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) => {
+    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);
-                    setPath('');
                 }, 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 && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => setPath(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true })) }), _jsx(TextField, { size: "small", placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] })), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid, onClick: onSubmit, children: t('confirm') })] })] }));
+                    _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, onTitleChange: val => updateEntry(i, 'title', val), onPathChange: val => updateEntry(i, 'path', 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 AddToCaseModal;

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

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

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

@@ -0,0 +1,313 @@
+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, createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddToCaseModal from './AddToCaseModal';
+// ---------------------------------------------------------------------------
+// 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: [{ path: 'folder/subfolder/item', type: 'hit', value: 'x', 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_OBSERVABLE = createMockObservable({
+    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(AddToCaseModal, { 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.title'));
+            expect(titleInput).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+        });
+        it('pre-populates title for an observable with Observable and id', async () => {
+            renderModal([MOCK_OBSERVABLE]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            expect(titleInput).toHaveValue(`Observable (${MOCK_OBSERVABLE.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.title'));
+            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.title'));
+            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.title'));
+            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 observable records each get correct default titles', async () => {
+            renderModal([MOCK_HIT_1, MOCK_OBSERVABLE]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Folder path options
+    // -------------------------------------------------------------------------
+    describe('folder path 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 pathInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path'));
+            await user.click(pathInputs[0]);
+            expect(await screen.findByRole('option', { name: 'folder' })).toBeInTheDocument();
+            expect(screen.getByRole('option', { name: 'folder/subfolder' })).toBeInTheDocument();
+        });
+        it('shows the full path preview when a path and title are set', async () => {
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Beta');
+            const pathInput = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path'))[0];
+            await user.type(pathInput, 'myfolder');
+            const expectedFull = `myfolder/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`;
+            await waitFor(() => {
+                expect(screen.getByText(i18n.t('modal.cases.add_to_case.full_path', { path: expectedFull }))).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.title'));
+            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({
+                path: `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`,
+                value: MOCK_HIT_1.howler.id,
+                type: 'hit'
+            }));
+        });
+        it('combines folder path and title in the submitted path', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_HIT_1]);
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            await selectCase(user, 'Case Alpha');
+            const pathInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path'));
+            await user.type(pathInput, 'investigations');
+            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({
+                path: `investigations/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`
+            }));
+        });
+        it('uses observable __index for observable records', async () => {
+            const api = (await import('api')).default;
+            renderModal([MOCK_OBSERVABLE]);
+            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: 'observable' }));
+        });
+    });
+    // -------------------------------------------------------------------------
+    // 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.title'));
+            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({ path: '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/CaseRecordRow.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { RecordEntry } from './types';
+declare const CaseRecordRow: FC<{
+    entry: RecordEntry;
+    folderOptions?: string[];
+    onTitleChange: (title: string) => void;
+    onPathChange: (path: string) => void;
+}>;
+export default CaseRecordRow;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Chip, Stack, TextField, Typography } from '@mui/material';
+import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { useTranslation } from 'react-i18next';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+const CaseRecordRow = ({ entry, folderOptions = [], onTitleChange, onPathChange }) => {
+    const { t } = useTranslation();
+    const { record, path, title } = entry;
+    const fullPath = path ? `${path}/${title}` : title;
+    const pathError = path.startsWith('/') || path.endsWith('/');
+    return (_jsxs(Accordion, { variant: "outlined", defaultExpanded: true, sx: { flexShrink: 0 }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), sx: { px: 1, minHeight: '48px !important', '& > *': { margin: '0 !important' } }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(Typography, { variant: "body2", fontWeight: 500, sx: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: isHit(record) ? record.howler.analytic : 'Observable' }), isHit(record) && _jsx(EscalationChip, { hit: record, layout: HitLayout.DENSE }), isHit(record) && _jsx(Chip, { label: record.howler.status, size: "small", color: "primary", sx: { flexShrink: 0 } }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { flexShrink: 0 }, children: record.howler.id })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => onPathChange(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true, error: pathError, helperText: pathError ? t('modal.cases.add_to_case.path_invalid') : undefined })) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => onTitleChange(ev.target.value) }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] }) })] }));
+};
+export default CaseRecordRow;

package/components/routes/cases/modals/CreateCaseModal.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 CreateCaseModal: FC<{
+    records: (Hit | Observable)[];
+}>;
+export default CreateCaseModal;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 MarkdownEditor from '@cccsaurora/howler-ui/components/elements/MarkdownEditor';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CaseRecordRow from './CaseRecordRow';
+import { useRecordEntries } from './hooks';
+const ESCALATIONS = ['normal', 'focus', 'crisis'];
+const CreateCaseModal = ({ records }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [caseTitle, setCaseTitle] = useState('');
+    const [summary, setSummary] = useState('');
+    const [overview, setOverview] = useState('');
+    const [escalation, setEscalation] = useState(null);
+    const [submitting, setSubmitting] = useState(false);
+    const [entries, updateEntry] = useRecordEntries(records);
+    const isValid = useMemo(() => !!caseTitle.trim() &&
+        !!summary.trim() &&
+        entries.every(e => !!e.title.trim() && !e.path.startsWith('/') && !e.path.endsWith('/')), [caseTitle, summary, entries]);
+    const onSubmit = async () => {
+        if (!isValid) {
+            return;
+        }
+        setSubmitting(true);
+        try {
+            const newCase = await dispatchApi(api.v2.case.post({
+                title: caseTitle.trim(),
+                summary: summary.trim(),
+                ...(overview.trim() ? { overview: overview.trim() } : {}),
+                ...(escalation ? { escalation } : {})
+            }));
+            if (newCase?.case_id) {
+                for (const entry of entries) {
+                    const fullPath = entry.path ? `${entry.path}/${entry.title}` : entry.title;
+                    await dispatchApi(api.v2.case.items.post(newCase.case_id, {
+                        path: fullPath,
+                        value: entry.record.howler.id,
+                        type: entry.record.__index
+                    }));
+                }
+                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.create_case') }), _jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.title'), value: caseTitle, onChange: ev => setCaseTitle(ev.target.value) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.summary'), value: summary, onChange: ev => setSummary(ev.target.value) }), _jsx(Autocomplete, { options: ESCALATIONS, value: escalation, disablePortal: true, onChange: (_ev, val) => setEscalation(val), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.create_case.escalation'), fullWidth: true })) }), _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.overview') }), _jsx(MarkdownEditor, { content: overview, setContent: setOverview, height: "200px", fontSize: 14 })] })] }), entries.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.items_section') }) }), _jsx(Stack, { spacing: 1, overflow: "auto", flex: 1, children: entries.map((entry, i) => (_jsx(CaseRecordRow, { entry: entry, onTitleChange: val => updateEntry(i, 'title', val), onPathChange: val => updateEntry(i, 'path', val) }, entry.record.howler.id))) })] })) : (_jsx("div", { style: { flex: 1 } })), _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 CreateCaseModal;

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

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

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

@@ -0,0 +1,358 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CreateCaseModal from './CreateCaseModal';
+// ---------------------------------------------------------------------------
+// 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
+}));
+let mockSetContent = null;
+vi.mock('components/elements/MarkdownEditor', () => ({
+    default: ({ content, setContent }) => {
+        mockSetContent = setContent;
+        return _jsx("textarea", { id: "markdown-editor", value: content, onChange: ev => setContent(ev.target.value) });
+    }
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                post: vi.fn().mockReturnValue('case-post-request'),
+                items: {
+                    post: vi.fn().mockReturnValue('items-post-request')
+                }
+            }
+        }
+    }
+}));
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+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_OBSERVABLE = createMockObservable({
+    howler: { id: 'obs-001' }
+});
+const MOCK_CONFIG = {
+    lookups: {
+        'howler.escalation': ['normal', 'focus', 'crisis']
+    }
+};
+// ---------------------------------------------------------------------------
+// Wrapper
+// ---------------------------------------------------------------------------
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ApiConfigContext.Provider, { value: { config: MOCK_CONFIG, setConfig: vi.fn() }, children: _jsx(ModalContext.Provider, { value: { close: mockClose, open: vi.fn(), setContent: vi.fn() }, children: children }) }) }));
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderModal = (records) => render(_jsx(CreateCaseModal, { records: records }), { wrapper: Wrapper });
+const fillCaseMetadata = async (user, { title = 'My Case', summary = 'A summary' } = {}) => {
+    await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.title')), title);
+    await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.summary')), summary);
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CreateCaseModal', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        // Default: case creation returns a case, item post resolves
+        mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+    });
+    // -------------------------------------------------------------------------
+    // Initial render
+    // -------------------------------------------------------------------------
+    describe('initial render', () => {
+        it('shows the modal title', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByText(i18n.t('modal.cases.create_case'))).toBeInTheDocument();
+        });
+        it('renders a cancel button', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByRole('button', { name: i18n.t('cancel') })).toBeInTheDocument();
+        });
+        it('renders a confirm button', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeInTheDocument();
+        });
+        it('confirm button is disabled before required fields are filled', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('renders case title, summary, and escalation inputs', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.title'))).toBeInTheDocument();
+            expect(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.summary'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('modal.cases.create_case.overview'))).toBeInTheDocument();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Per-record rows
+    // -------------------------------------------------------------------------
+    describe('per-record rows', () => {
+        it('renders a row for each record', () => {
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            expect(screen.getByText(MOCK_HIT_1.howler.analytic)).toBeInTheDocument();
+            expect(screen.getByText(MOCK_HIT_2.howler.analytic)).toBeInTheDocument();
+        });
+        it('renders a row for an observable record', () => {
+            renderModal([MOCK_OBSERVABLE]);
+            expect(screen.getByText('Observable')).toBeInTheDocument();
+        });
+        it('pre-populates the title for a hit with analytic and id', () => {
+            renderModal([MOCK_HIT_1]);
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+        });
+        it('pre-populates the title for an observable with Observable and id', () => {
+            renderModal([MOCK_OBSERVABLE]);
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            expect(titleInput).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+        });
+        it('shows the alert placement section label when there are records', () => {
+            renderModal([MOCK_HIT_1]);
+            expect(screen.getByText(i18n.t('modal.cases.create_case.items_section'))).toBeInTheDocument();
+        });
+        it('does not show the alert placement section when records is empty', () => {
+            renderModal([]);
+            expect(screen.queryByText(i18n.t('modal.cases.create_case.items_section'))).not.toBeInTheDocument();
+        });
+        it('shows the full path preview when a title is set', async () => {
+            renderModal([MOCK_HIT_1]);
+            const expectedTitle = `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`;
+            await waitFor(() => {
+                expect(screen.getByText(i18n.t('modal.cases.add_to_case.full_path', { path: expectedTitle }))).toBeInTheDocument();
+            });
+        });
+        it('shows combined path/title in the full path preview', async () => {
+            renderModal([MOCK_HIT_1]);
+            const pathInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path'));
+            await user.type(pathInput, 'folder');
+            const expectedFull = `folder/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`;
+            await waitFor(() => {
+                expect(screen.getByText(i18n.t('modal.cases.add_to_case.full_path', { path: expectedFull }))).toBeInTheDocument();
+            });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Validation
+    // -------------------------------------------------------------------------
+    describe('validation', () => {
+        it('enables confirm after title and summary are filled', async () => {
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+        });
+        it('disables confirm when case title is empty', async () => {
+            renderModal([MOCK_HIT_1]);
+            await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.summary')), 'A summary');
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('disables confirm when summary is empty', async () => {
+            renderModal([MOCK_HIT_1]);
+            await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.create_case.title')), 'My Case');
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('disables confirm when any item title is cleared', async () => {
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            await user.clear(titleInput);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('enables confirm without records (case-only creation)', async () => {
+            renderModal([]);
+            await fillCaseMetadata(user);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+        });
+        it('disables confirm when a folder path starts with /', async () => {
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path')), '/leading');
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('disables confirm when a folder path ends with /', async () => {
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path')), 'trailing/');
+            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 user.click(screen.getByRole('button', { name: i18n.t('cancel') }));
+            expect(mockClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Submission
+    // -------------------------------------------------------------------------
+    describe('form submission', () => {
+        it('calls case.post with title, summary, and closes', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user, { title: 'Test Case', summary: 'Test summary' });
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.post).toHaveBeenCalledWith(expect.objectContaining({ title: 'Test Case', summary: 'Test summary' }));
+        });
+        it('includes overview in case.post when filled', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([]);
+            await fillCaseMetadata(user);
+            act(() => mockSetContent?.('## Overview\nSome detail'));
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.post).toHaveBeenCalledWith(expect.objectContaining({ overview: '## Overview\nSome detail' }));
+        });
+        it('does not include overview when left blank', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            const callArg = vi.mocked(api.v2.case.post).mock.calls[0][0];
+            expect(callArg).not.toHaveProperty('overview');
+        });
+        it('includes escalation when selected', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([]);
+            await fillCaseMetadata(user);
+            const combobox = screen.getByRole('combobox');
+            await user.click(combobox);
+            const option = await screen.findByRole('option', { name: 'crisis' });
+            await user.click(option);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.post).toHaveBeenCalledWith(expect.objectContaining({ escalation: 'crisis' }));
+        });
+        it('calls items.post for each record after case creation', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            // 1 case.post + 2 items.post
+            expect(mockDispatchApi).toHaveBeenCalledTimes(3);
+            expect(api.v2.case.items.post).toHaveBeenCalledTimes(2);
+        });
+        it('uses the default title as path for items', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({
+                path: `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`,
+                value: MOCK_HIT_1.howler.id,
+                type: 'hit'
+            }));
+        });
+        it('uses a custom edited item title in the path', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            await user.clear(titleInput);
+            await user.type(titleInput, 'Custom Item Name');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({ path: 'Custom Item Name' }));
+        });
+        it('combines folder path and title when a folder path is provided', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_HIT_1]);
+            await fillCaseMetadata(user);
+            await user.type(screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.select_path')), 'investigations');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({
+                path: `investigations/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`
+            }));
+        });
+        it('uses observable __index for observable records', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([MOCK_OBSERVABLE]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({ type: 'observable' }));
+        });
+        it('does not call items.post when there are no records', async () => {
+            const api = (await import('api')).default;
+            mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
+            renderModal([]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.items.post).not.toHaveBeenCalled();
+        });
+        it('does not close if case creation returns no case_id', async () => {
+            mockDispatchApi.mockResolvedValue(null);
+            renderModal([]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
+            expect(mockClose).not.toHaveBeenCalled();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Multiple records
+    // -------------------------------------------------------------------------
+    describe('multiple records', () => {
+        it('renders independent title inputs for each record', () => {
+            renderModal([MOCK_HIT_1, MOCK_HIT_2]);
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            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]);
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            await user.clear(titleInputs[0]);
+            await user.type(titleInputs[0], 'Edited Title');
+            expect(titleInputs[0]).toHaveValue('Edited Title');
+            expect(titleInputs[1]).toHaveValue(`${MOCK_HIT_2.howler.analytic} (${MOCK_HIT_2.howler.id})`);
+        });
+        it('mixed hit and observable records each get correct default titles', () => {
+            renderModal([MOCK_HIT_1, MOCK_OBSERVABLE]);
+            const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
+            expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+        });
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import type { RecordEntry } from './types';
+export declare const defaultTitle: (record: Hit | Observable) => string;
+export declare const useFolderOptions: (selectedCase: Case | null) => string[];
+export declare const useRecordEntries: (records: (Hit | Observable)[]) => readonly [RecordEntry[], (index: number, field: "title" | "path", value: string) => void];

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

@@ -0,0 +1,44 @@
+import { useCallback, useMemo, useState } from 'react';
+export const defaultTitle = (record) => {
+    if (record.__index === 'hit') {
+        return `${record.howler.analytic} (${record.howler.id})`;
+    }
+    return `Observable (${record.howler.id})`;
+};
+export const useFolderOptions = (selectedCase) => {
+    return useMemo(() => {
+        if (!selectedCase?.items) {
+            return [];
+        }
+        const paths = new Set();
+        for (const item of selectedCase.items) {
+            if (!item.path) {
+                continue;
+            }
+            const parts = item.path.split('/');
+            parts.pop();
+            for (let i = 1; i <= parts.length; i++) {
+                paths.add(parts.slice(0, i).join('/'));
+            }
+        }
+        return Array.from(paths);
+    }, [selectedCase]);
+};
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+export const useRecordEntries = (records) => {
+    const [entries, setEntries] = useState(() => (records ?? []).map(record => ({
+        record,
+        path: '',
+        title: defaultTitle(record)
+    })));
+    const updateEntry = useCallback((index, field, value) => {
+        setEntries(prev => {
+            const next = [...prev];
+            next[index] = { ...next[index], [field]: value };
+            return next;
+        });
+    }, []);
+    return [entries, updateEntry];
+};

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

@@ -0,0 +1,5 @@
+export interface RecordEntry {
+  record: Hit | Observable;
+  path: string;
+  title: string;
+}

package/locales/en/translation.json

@@ -312,10 +312,21 @@
     "modal.action.title": "Save Action",
     "modal.cases.add_to_case": "Add to Case",
     "modal.cases.add_to_case.full_path": "Full path: {{path}}",
+    "modal.cases.add_to_case.items_section": "Alert Placement",
+    "modal.cases.add_to_case.path_invalid": "Path must not start or end with a /",
     "modal.cases.add_to_case.select_case": "Search Cases",
     "modal.cases.add_to_case.select_path": "Select Folder Path",
     "modal.cases.add_to_case.title": "Item Title",
     "modal.cases.alerts.resolved": "Resolved Alerts",
+    "modal.cases.create_case": "Create Case",
+    "modal.cases.create_case.escalation": "Escalation",
+    "modal.cases.create_case.full_path": "Full path: {{path}}",
+    "modal.cases.create_case.item.path": "Folder Path (optional)",
+    "modal.cases.create_case.item.title": "Item Title",
+    "modal.cases.create_case.items_section": "Alert Placement",
+    "modal.cases.create_case.overview": "Case Overview (Markdown, optional)",
+    "modal.cases.create_case.summary": "Short Case Summary",
+    "modal.cases.create_case.title": "Case Title",
     "modal.cases.rename_item": "Rename Item",
     "modal.cases.rename_item.error.empty": "Name cannot be empty",
     "modal.cases.rename_item.error.slash": "Name cannot contain '/'",

package/locales/fr/translation.json

@@ -312,10 +312,21 @@
     "modal.action.title": "Enregistrer l'action",
     "modal.cases.add_to_case": "Ajouter au cas",
     "modal.cases.add_to_case.full_path": "Chemin complet : {{path}}",
+    "modal.cases.add_to_case.items_section": "Placement des alertes",
+    "modal.cases.add_to_case.path_invalid": "Le chemin ne doit pas commencer ou se terminer par un /",
     "modal.cases.add_to_case.select_case": "Rechercher des cas",
     "modal.cases.add_to_case.select_path": "Sélectionner le chemin du dossier",
     "modal.cases.add_to_case.title": "Titre de l'élément",
     "modal.cases.alerts.resolved": "Alertes résolues",
+    "modal.cases.create_case": "Créer un cas",
+    "modal.cases.create_case.escalation": "Escalade",
+    "modal.cases.create_case.full_path": "Chemin complet : {{path}}",
+    "modal.cases.create_case.item.path": "Chemin du dossier (optionnel)",
+    "modal.cases.create_case.item.title": "Titre de l'élément",
+    "modal.cases.create_case.items_section": "Placement des alertes",
+    "modal.cases.create_case.overview": "Vue d'ensemble du cas (Markdown, optionnel)",
+    "modal.cases.create_case.summary": "Résumé court du cas",
+    "modal.cases.create_case.title": "Titre du cas",
     "modal.cases.rename_item": "Renommer l'élément",
     "modal.cases.rename_item.error.empty": "Le nom ne peut pas être vide",
     "modal.cases.rename_item.error.slash": "Le nom ne peut pas contenir '/'",

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.18.0-dev.748",
+  "version": "2.18.0-dev.752",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",