@cccsaurora/howler-ui 2.18.0-dev.686 → 2.18.0-dev.695

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

@@ -7,6 +7,7 @@ import { omit } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import CaseFolderContextMenu from './CaseFolderContextMenu';
 import { buildTree } from './utils';
 // Static map: item type → MUI icon component (avoids re-creating closures on each render)
 const ICON_FOR_TYPE = {
@@ -17,7 +18,7 @@ const ICON_FOR_TYPE = {
     lead: Lightbulb,
     reference: LinkIcon
 };
-const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '' }) => {
+const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '', onItemRemoved }) => {
     const theme = useTheme();
     const location = useLocation();
     const { dispatchApi } = useMyApi();
@@ -26,10 +27,10 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
     const [hitMetadata, setHitMetadata] = useState({});
     const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
     const currentRootCaseId = rootCaseId || _case?.case_id;
-    const hitIds = useMemo(() => tree.leaves
-        ?.filter(l => l.type?.toLowerCase() === 'hit')
-        .map(l => l.id)
-        .filter(Boolean) ?? [], [tree.leaves]);
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
     useEffect(() => {
         if (hitIds.length < 1) {
             return;
@@ -55,16 +56,17 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
         return undefined;
     };
     const toggleCase = useCallback((item, itemKey) => {
-        const resolvedKey = itemKey || item.path || item.id;
-        if (!resolvedKey)
+        const resolvedKey = itemKey || item.path || item.value;
+        if (!resolvedKey) {
             return;
+        }
         const prev = caseStates[resolvedKey] ?? { open: false, loading: false, data: null };
         const shouldOpen = !prev.open;
-        const shouldFetch = shouldOpen && !!item.id && !prev.data && !prev.loading;
+        const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
         setCaseStates(current => ({ ...current, [resolvedKey]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
         if (!shouldFetch)
             return;
-        dispatchApi(api.v2.case.get(item.id), { throwError: false })
+        dispatchApi(api.v2.case.get(item.value), { throwError: false })
             .then(caseResponse => {
             if (!caseResponse)
                 return;
@@ -74,17 +76,17 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
             setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], loading: false } }));
         });
     }, [caseStates, dispatchApi]);
-    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsxs(Stack, { direction: "row", pl: step * 1.5, py: 0.25, sx: {
-                    cursor: 'pointer',
-                    transition: theme.transitions.create('background', { duration: 50 }),
-                    background: 'transparent',
-                    '&:hover': {
-                        background: theme.palette.grey[800]
-                    }
-                }, onClick: () => setOpen(_open => !_open), children: [_jsx(ChevronRight, { fontSize: "small", color: "disabled", sx: [
-                            { transition: theme.transitions.create('transform', { duration: 100 }), transform: 'rotate(0deg)' },
-                            open && { transform: 'rotate(90deg)' }
-                        ] }), _jsx(FolderIcon, { fontSize: "small", color: "disabled" }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: name })] })), open && (_jsxs(_Fragment, { children: [Object.entries(omit(tree, 'leaves')).map(([path, subfolder]) => (_jsx(CaseFolder, { name: path, case: _case, folder: subfolder, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: pathPrefix }, `${_case?.case_id}-${path}`))), tree.leaves?.map(leaf => {
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { _case: _case, tree: tree, onRemoved: onItemRemoved, children: _jsxs(Stack, { direction: "row", pl: step * 1.5, py: 0.25, sx: {
+                        cursor: 'pointer',
+                        transition: theme.transitions.create('background', { duration: 50 }),
+                        background: 'transparent',
+                        '&:hover': {
+                            background: theme.palette.grey[800]
+                        }
+                    }, onClick: () => setOpen(_open => !_open), children: [_jsx(ChevronRight, { fontSize: "small", color: "disabled", sx: [
+                                { transition: theme.transitions.create('transform', { duration: 100 }), transform: 'rotate(0deg)' },
+                                open && { transform: 'rotate(90deg)' }
+                            ] }), _jsx(FolderIcon, { fontSize: "small", color: "disabled" }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: name })] }) })), open && (_jsxs(_Fragment, { children: [Object.entries(omit(tree, 'leaves')).map(([path, subfolder]) => (_jsx(CaseFolder, { name: path, case: _case, folder: subfolder, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: pathPrefix, onItemRemoved: onItemRemoved }, `${_case?.case_id}-${path}`))), tree.leaves?.map(leaf => {
                         const itemType = leaf.type?.toLowerCase();
                         const isCase = itemType === 'case';
                         const fullRelativePath = [pathPrefix, leaf.path].filter(Boolean).join('/');
@@ -102,30 +104,30 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                         const iconColor = escalationColor ?? 'inherit';
                         const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
                         const Icon = ICON_FOR_TYPE[itemType ?? ''] ?? Article;
-                        return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", pl: step * 1.5 + 1, py: 0.25, sx: [
-                                        {
-                                            cursor: 'pointer',
-                                            overflow: 'visible',
-                                            color: `${theme.palette.text.secondary} !important`,
-                                            textDecoration: 'none',
-                                            transition: theme.transitions.create('background', { duration: 100 }),
-                                            background: 'transparent',
-                                            '&:hover': {
-                                                background: theme.palette.grey[800]
+                        return (_jsx(CaseFolderContextMenu, { _case: _case, leaf: leaf, onRemoved: onItemRemoved, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", pl: step * 1.5 + 1, py: 0.25, sx: [
+                                            {
+                                                cursor: 'pointer',
+                                                overflow: 'visible',
+                                                color: `${theme.palette.text.secondary} !important`,
+                                                textDecoration: 'none',
+                                                transition: theme.transitions.create('background', { duration: 100 }),
+                                                background: 'transparent',
+                                                '&:hover': {
+                                                    background: theme.palette.grey[800]
+                                                },
+                                                borderRight: '3px solid transparent'
                                             },
-                                            borderRight: '3px solid transparent'
-                                        },
-                                        decodeURIComponent(location.pathname) === itemPath && {
-                                            background: alpha(theme.palette.grey[600], 0.15),
-                                            borderRightColor: theme.palette.primary.main
-                                        }
-                                    ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, target: itemType === 'reference' ? '_blank' : undefined, rel: itemType === 'reference' ? 'noopener noreferrer' : undefined, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
-                                                !isCase && { opacity: 0 },
-                                                isCase && {
-                                                    transition: theme.transitions.create('transform', { duration: 100 }),
-                                                    transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
-                                                }
-                                            ] }), _jsx(Icon, { fontSize: "small", color: iconColor }), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: leaf.path?.split('/').pop() || leaf.value })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath }))] }, `${_case?.case_id}-${leaf.value}-${leaf.path}`));
+                                            decodeURIComponent(location.pathname) === itemPath && {
+                                                background: alpha(theme.palette.grey[600], 0.15),
+                                                borderRightColor: theme.palette.primary.main
+                                            }
+                                        ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, target: itemType === 'reference' ? '_blank' : undefined, rel: itemType === 'reference' ? 'noopener noreferrer' : undefined, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
+                                                    !isCase && { opacity: 0 },
+                                                    isCase && {
+                                                        transition: theme.transitions.create('transform', { duration: 100 }),
+                                                        transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                    }
+                                                ] }), _jsx(Icon, { fontSize: "small", color: iconColor }), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: leaf.path?.split('/').pop() || leaf.value })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath, onItemRemoved: onItemRemoved }))] }) }, `${_case?.case_id}-${leaf.value}-${leaf.path}`));
                     })] }))] }));
 };
 export default CaseFolder;

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

@@ -0,0 +1,34 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import { type FC, type PropsWithChildren } from 'react';
+import type { Tree } from './types';
+/**
+ * Recursively collects all leaf items from a folder tree.
+ */
+export declare const collectAllLeaves: (tree: Tree) => Item[];
+/**
+ * Returns the URL to open for a given leaf item, or null if no URL applies.
+ * - reference: the item's value (an external URL)
+ * - hit: /hits/<id>
+ * - observable: /observables/<id>
+ * - case: /cases/<id>
+ * - table / lead: null (no dedicated detail page)
+ */
+export declare const getOpenUrl: (leaf: Item) => string | null;
+export interface CaseFolderContextMenuProps extends PropsWithChildren {
+    /** The case that owns the item(s). */
+    _case: Case;
+    /** Present when the context menu is for a single leaf item. */
+    leaf?: Item;
+    /** Present when the context menu is for a folder (all leaves within it will be removed). */
+    tree?: Tree;
+    /** Called after item(s) have been successfully removed. */
+    onRemoved?: (updatedCase: Case) => void;
+}
+/**
+ * Wraps its children with a right-click context menu providing:
+ * - **Open item** – opens the item in a new tab (only for leaf items with a navigable URL).
+ * - **Remove item / Remove folder** – deletes the leaf item or all items under a folder.
+ */
+declare const CaseFolderContextMenu: FC<CaseFolderContextMenuProps>;
+export default CaseFolderContextMenu;

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Delete, OpenInNew } from '@mui/icons-material';
+import api from '@cccsaurora/howler-ui/api';
+import ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+/**
+ * Recursively collects all leaf items from a folder tree.
+ */
+export const collectAllLeaves = (tree) => {
+    const result = [...(tree.leaves ?? [])];
+    for (const key of Object.keys(tree)) {
+        if (key !== 'leaves') {
+            result.push(...collectAllLeaves(tree[key]));
+        }
+    }
+    return result;
+};
+/**
+ * Returns the URL to open for a given leaf item, or null if no URL applies.
+ * - reference: the item's value (an external URL)
+ * - hit: /hits/<id>
+ * - observable: /observables/<id>
+ * - case: /cases/<id>
+ * - table / lead: null (no dedicated detail page)
+ */
+export const getOpenUrl = (leaf) => {
+    const type = leaf.type?.toLowerCase();
+    if (type === 'reference') {
+        return leaf.value ?? null;
+    }
+    if (type === 'hit') {
+        return leaf.value ? `/hits/${leaf.value}` : null;
+    }
+    if (type === 'observable') {
+        return leaf.value ? `/observables/${leaf.value}` : null;
+    }
+    if (type === 'case') {
+        return leaf.value ? `/cases/${leaf.value}` : null;
+    }
+    return null;
+};
+/**
+ * Wraps its children with a right-click context menu providing:
+ * - **Open item** – opens the item in a new tab (only for leaf items with a navigable URL).
+ * - **Remove item / Remove folder** – deletes the leaf item or all items under a folder.
+ */
+const CaseFolderContextMenu = ({ _case, leaf, tree, onRemoved, children }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const items = useMemo(() => {
+        const entries = [];
+        if (leaf) {
+            const openUrl = getOpenUrl(leaf);
+            if (openUrl) {
+                entries.push({
+                    kind: 'item',
+                    id: 'open-item',
+                    label: t('page.cases.sidebar.item.open'),
+                    icon: _jsx(OpenInNew, { fontSize: "small" }),
+                    onClick: () => window.open(openUrl, '_blank', 'noopener noreferrer')
+                });
+            }
+        }
+        if (entries.length > 0) {
+            entries.push({ kind: 'divider', id: 'divider-remove' });
+        }
+        const isFolder = !leaf && !!tree;
+        entries.push({
+            kind: 'item',
+            id: 'remove-item',
+            label: isFolder ? t('page.cases.sidebar.folder.remove') : t('page.cases.sidebar.item.remove'),
+            icon: _jsx(Delete, { fontSize: "small" }),
+            onClick: () => {
+                if (!_case.case_id) {
+                    return;
+                }
+                const itemsToDelete = leaf ? [leaf] : tree ? collectAllLeaves(tree) : [];
+                const values = itemsToDelete.filter(i => !!i.value).map(i => i.value);
+                if (!values.length) {
+                    return;
+                }
+                dispatchApi(api.v2.case.items.del(_case.case_id, values), { throwError: false }).then(updatedCase => {
+                    if (updatedCase) {
+                        onRemoved?.(updatedCase);
+                    }
+                });
+            }
+        });
+        return entries;
+    }, [_case, leaf, tree, dispatchApi, onRemoved, t]);
+    return _jsx(ContextMenu, { items: items, children: children });
+};
+export default CaseFolderContextMenu;

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

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

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

@@ -0,0 +1,296 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/elements/ContextMenu', () => ({
+    default: ({ items, children }) => (_jsxs("div", { children: [children, items.map((item) => {
+                if (item.kind === 'item') {
+                    return (_jsx("button", { id: item.id, onClick: item.onClick, children: item.label }, item.id));
+                }
+                if (item.kind === 'divider') {
+                    return _jsx("hr", {}, item.id);
+                }
+                return null;
+            })] }))
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockDel = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                items: {
+                    del: (...args) => mockDel(...args)
+                }
+            }
+        }
+    }
+}));
+// ---------------------------------------------------------------------------
+// Imports (after mocks so that module registry picks up the stubs)
+// ---------------------------------------------------------------------------
+import CaseFolderContextMenu, { collectAllLeaves, getOpenUrl } from './CaseFolderContextMenu';
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+const mockCase = { case_id: 'case-1', title: 'Test Case', items: [] };
+const hitLeaf = { type: 'hit', value: 'hit-123', path: 'folder/hit-item' };
+const referenceLeaf = { type: 'reference', value: 'https://example.com', path: 'folder/ref-item' };
+const observableLeaf = { type: 'observable', value: 'obs-456', path: 'folder/obs-item' };
+const caseLeaf = { type: 'case', value: 'nested-case-id', path: 'folder/case-item' };
+const tableLeaf = { type: 'table', value: 'table-789', path: 'folder/table-item' };
+const leadLeaf = { type: 'lead', value: 'lead-999', path: 'folder/lead-item' };
+const renderMenu = (props) => render(_jsx(CaseFolderContextMenu, { _case: mockCase, ...props, children: _jsx("div", { id: "child", children: "child" }) }));
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDel.mockClear();
+    mockDispatchApi.mockClear();
+    mockDispatchApi.mockImplementation((p) => p);
+    mockDel.mockResolvedValue(mockCase);
+    vi.spyOn(window, 'open').mockReturnValue(null);
+});
+// ---------------------------------------------------------------------------
+// Unit tests for exported utilities
+// ---------------------------------------------------------------------------
+describe('collectAllLeaves', () => {
+    it('returns leaves at the root level', () => {
+        const tree = { leaves: [hitLeaf, referenceLeaf] };
+        expect(collectAllLeaves(tree)).toEqual([hitLeaf, referenceLeaf]);
+    });
+    it('returns leaves from nested subfolders', () => {
+        const tree = {
+            leaves: [hitLeaf],
+            subfolder: { leaves: [referenceLeaf] }
+        };
+        expect(collectAllLeaves(tree)).toEqual([hitLeaf, referenceLeaf]);
+    });
+    it('returns leaves from deeply nested subfolders', () => {
+        const tree = {
+            leaves: [],
+            level1: {
+                leaves: [hitLeaf],
+                level2: { leaves: [referenceLeaf] }
+            }
+        };
+        const result = collectAllLeaves(tree);
+        expect(result).toContain(hitLeaf);
+        expect(result).toContain(referenceLeaf);
+    });
+    it('returns an empty array for an empty tree', () => {
+        expect(collectAllLeaves({ leaves: [] })).toEqual([]);
+    });
+});
+describe('getOpenUrl', () => {
+    it('returns the value directly for a reference item', () => {
+        expect(getOpenUrl(referenceLeaf)).toBe('https://example.com');
+    });
+    it('returns /hits/<id> for a hit item', () => {
+        expect(getOpenUrl(hitLeaf)).toBe('/hits/hit-123');
+    });
+    it('returns /observables/<id> for an observable item', () => {
+        expect(getOpenUrl(observableLeaf)).toBe('/observables/obs-456');
+    });
+    it('returns /cases/<id> for a case item', () => {
+        expect(getOpenUrl(caseLeaf)).toBe('/cases/nested-case-id');
+    });
+    it('returns null for a table item', () => {
+        expect(getOpenUrl(tableLeaf)).toBeNull();
+    });
+    it('returns null for a lead item', () => {
+        expect(getOpenUrl(leadLeaf)).toBeNull();
+    });
+    it('returns null when value is undefined', () => {
+        expect(getOpenUrl({ type: 'hit' })).toBeNull();
+    });
+    it('returns null when type is undefined', () => {
+        expect(getOpenUrl({ value: 'something' })).toBeNull();
+    });
+});
+// ---------------------------------------------------------------------------
+// Component tests
+// ---------------------------------------------------------------------------
+describe('CaseFolderContextMenu', () => {
+    describe('renders children', () => {
+        it('renders children content', () => {
+            renderMenu({ leaf: hitLeaf });
+            expect(screen.getByTestId('child')).toBeInTheDocument();
+        });
+    });
+    describe('menu items for leaf types', () => {
+        it('shows "Open item" and "Remove item" for a hit leaf', () => {
+            renderMenu({ leaf: hitLeaf });
+            expect(screen.getByTestId('open-item')).toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('shows "Open item" and "Remove item" for a reference leaf', () => {
+            renderMenu({ leaf: referenceLeaf });
+            expect(screen.getByTestId('open-item')).toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('shows "Open item" and "Remove item" for an observable leaf', () => {
+            renderMenu({ leaf: observableLeaf });
+            expect(screen.getByTestId('open-item')).toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('shows "Open item" and "Remove item" for a case leaf', () => {
+            renderMenu({ leaf: caseLeaf });
+            expect(screen.getByTestId('open-item')).toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('shows only "Remove item" for a table leaf (no open URL)', () => {
+            renderMenu({ leaf: tableLeaf });
+            expect(screen.queryByTestId('open-item')).not.toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('shows only "Remove item" for a lead leaf (no open URL)', () => {
+            renderMenu({ leaf: leadLeaf });
+            expect(screen.queryByTestId('open-item')).not.toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('labels the remove button "Remove item" for a leaf', () => {
+            renderMenu({ leaf: hitLeaf });
+            expect(screen.getByTestId('remove-item')).toHaveTextContent('page.cases.sidebar.item.remove');
+        });
+        it('shows a divider only when "Open item" is also present', () => {
+            const { container: withOpen } = renderMenu({ leaf: hitLeaf });
+            expect(withOpen.querySelector('hr')).not.toBeNull();
+            const { container: withoutOpen } = renderMenu({ leaf: tableLeaf });
+            expect(withoutOpen.querySelector('hr')).toBeNull();
+        });
+    });
+    describe('menu items for folders', () => {
+        const folderTree = { leaves: [hitLeaf, referenceLeaf] };
+        it('shows only "Remove folder" for a folder (no open URL)', () => {
+            renderMenu({ tree: folderTree });
+            expect(screen.queryByTestId('open-item')).not.toBeInTheDocument();
+            expect(screen.getByTestId('remove-item')).toBeInTheDocument();
+        });
+        it('labels the remove button "Remove folder" for a tree', () => {
+            renderMenu({ tree: folderTree });
+            expect(screen.getByTestId('remove-item')).toHaveTextContent('page.cases.sidebar.folder.remove');
+        });
+    });
+    describe('"Open item" action', () => {
+        it('calls window.open with the hit URL', () => {
+            renderMenu({ leaf: hitLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('open-item'));
+            });
+            expect(window.open).toHaveBeenCalledWith('/hits/hit-123', '_blank', 'noopener noreferrer');
+        });
+        it('calls window.open with the reference URL directly', () => {
+            renderMenu({ leaf: referenceLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('open-item'));
+            });
+            expect(window.open).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener noreferrer');
+        });
+        it('calls window.open with the observable URL', () => {
+            renderMenu({ leaf: observableLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('open-item'));
+            });
+            expect(window.open).toHaveBeenCalledWith('/observables/obs-456', '_blank', 'noopener noreferrer');
+        });
+        it('calls window.open with the case URL', () => {
+            renderMenu({ leaf: caseLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('open-item'));
+            });
+            expect(window.open).toHaveBeenCalledWith('/cases/nested-case-id', '_blank', 'noopener noreferrer');
+        });
+    });
+    describe('"Remove item" action for a leaf', () => {
+        it('calls dispatchApi with the delete call for the leaf', async () => {
+            renderMenu({ leaf: hitLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(mockDel).toHaveBeenCalledWith('case-1', ['hit-123']);
+            });
+        });
+        it('calls onRemoved with the updated case after the delete resolves', async () => {
+            const onRemoved = vi.fn();
+            renderMenu({ leaf: hitLeaf, onRemoved });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(onRemoved).toHaveBeenCalledWith(mockCase);
+            });
+        });
+        it('does not call the API when case_id is missing', () => {
+            renderMenu({ _case: { title: 'No ID' }, leaf: hitLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            expect(mockDel).not.toHaveBeenCalled();
+        });
+        it('skips items with no value', async () => {
+            const noValueLeaf = { type: 'hit', path: 'folder/no-value' };
+            renderMenu({ leaf: noValueLeaf });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(mockDel).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('"Remove folder" action', () => {
+        it('calls dispatchApi with all leaf values in a single batch call', async () => {
+            const folderTree = { leaves: [hitLeaf, referenceLeaf] };
+            renderMenu({ tree: folderTree });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(mockDel).toHaveBeenCalledWith('case-1', ['hit-123', 'https://example.com']);
+                expect(mockDel).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('calls dispatchApi with leaves from nested subfolders in a single batch call', async () => {
+            const nestedTree = {
+                leaves: [hitLeaf],
+                subfolder: { leaves: [referenceLeaf] }
+            };
+            renderMenu({ tree: nestedTree });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(mockDel).toHaveBeenCalledWith('case-1', expect.arrayContaining(['hit-123', 'https://example.com']));
+                expect(mockDel).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('calls onRemoved with the updated case after deletion', async () => {
+            const onRemoved = vi.fn();
+            const folderTree = { leaves: [hitLeaf, referenceLeaf] };
+            renderMenu({ tree: folderTree, onRemoved });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            await waitFor(() => {
+                expect(onRemoved).toHaveBeenCalledWith(mockCase);
+            });
+        });
+        it('does not call the API or onRemoved for an empty folder', () => {
+            const onRemoved = vi.fn();
+            renderMenu({ tree: { leaves: [] }, onRemoved });
+            act(() => {
+                fireEvent.click(screen.getByTestId('remove-item'));
+            });
+            expect(mockDel).not.toHaveBeenCalled();
+            expect(onRemoved).not.toHaveBeenCalled();
+        });
+    });
+});

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

@@ -5,7 +5,7 @@ interface CaseArguments {
 }
 interface CaseResult {
     case: Case;
-    updateCase: (update: Partial<Case>) => Promise<void>;
+    update: (update: Partial<Case>, publish?: boolean) => Promise<void>;
     loading: boolean;
     missing: boolean;
 }

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

@@ -19,12 +19,25 @@ const useCase = ({ caseId, case: providedCase }) => {
                 .finally(() => setLoading(false));
         }
     }, [caseId, dispatchApi]);
-    const updateCase = useCallback(async (_updatedCase) => {
+    const update = useCallback(async (_updatedCase, publish = true) => {
         if (!_case?.case_id) {
             return;
         }
         try {
-            setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+            if (publish) {
+                setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+            }
+            else {
+                setCase(prevCase => {
+                    if (!prevCase) {
+                        return prevCase;
+                    }
+                    return {
+                        ...prevCase,
+                        ..._updatedCase
+                    };
+                });
+            }
         }
         catch (e) {
             setMissing(true);
@@ -33,6 +46,6 @@ const useCase = ({ caseId, case: providedCase }) => {
             return;
         }
     }, [_case?.case_id, dispatchApi]);
-    return { case: _case, updateCase, loading, missing };
+    return { case: _case, update, loading, missing };
 };
 export default useCase;

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

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