@cccsaurora/howler-ui 2.19.0-dev.839 → 2.19.0-dev.842

package/components/routes/cases/detail/aggregates/CaseAggregate.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Card, CardContent, Skeleton, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
+import { get, isEmpty, uniq } from 'lodash-es';
+import { memo } from 'react';
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 'none'
+    }
+});
+const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) => {
+    const theme = useTheme();
+    if (!title && (!records || !field)) {
+        return _jsx(Skeleton, { height: 120 });
+    }
+    const values = records
+        ? uniq(records
+            .map(_record => get(_record, field))
+            .flat()
+            .filter(Boolean))
+        : [];
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: uniq(values).map(value => (_jsx("span", { children: value }, value))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
+};
+export default memo(CaseAggregate);

package/components/routes/cases/detail/aggregates/SourceAggregate.d.ts

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

package/components/routes/cases/detail/aggregates/SourceAggregate.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Grid, Skeleton } from '@mui/material';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { uniq } from 'lodash-es';
+import { useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import useCase from '../../hooks/useCase';
+const SourceAggregate = ({ case: providedCase }) => {
+    const { case: _case } = useCase({ case: providedCase });
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const analytics = useMemo(() => {
+        if (!_case) {
+            return [];
+        }
+        const hitIds = _case.items
+            .filter(item => item.type === 'hit')
+            .map(item => item.value)
+            .filter(value => !!value);
+        return uniq(hitIds.map(id => records[id]?.howler?.analytic).filter(analytic => !!analytic));
+    }, [_case, records]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 12, variant: "rounded" });
+    }
+    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
+};
+export default SourceAggregate;

package/components/routes/cases/detail/assets/Asset.d.ts

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { FC } from 'react';
+export type AssetType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
+export interface AssetEntry {
+    type: AssetType;
+    value: string;
+    /** IDs of the hits/observables this asset was seen in */
+    seenIn: string[];
+}
+declare const Asset: FC<{
+    asset: AssetEntry;
+    case: Case;
+}>;
+export default Asset;

package/components/routes/cases/detail/assets/Asset.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, Chip, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const Asset = ({ asset, case: _case }) => {
+    const { t } = useTranslation();
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.assets.type.${asset.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: asset.value })] }), asset.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.assets.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: asset.seenIn.map(id => {
+                                    const entry = _case.items.find(item => item.value === id);
+                                    return (_jsx(Chip, { clickable: true, size: "small", label: entry.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${entry.path}` }, id));
+                                }) })] }))] }) }) }));
+};
+export default Asset;

package/components/routes/cases/detail/assets/Asset.test.d.ts

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

package/components/routes/cases/detail/assets/Asset.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it } from 'vitest';
+import Asset, {} from './Asset';
+const makeAsset = (overrides = {}) => ({
+    type: 'ip',
+    value: '192.168.1.1',
+    seenIn: [],
+    ...overrides
+});
+describe('Asset', () => {
+    describe('type chip', () => {
+        it('renders the correct label for each type', () => {
+            const cases = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+            for (const type of cases) {
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type, value: 'x' }), case: createMockCase() }) }));
+                expect(screen.getByText(`page.cases.assets.type.${type}`)).toBeTruthy();
+                unmount();
+            }
+        });
+    });
+    describe('value display', () => {
+        it('renders the asset value', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            expect(screen.getByText('10.0.0.1')).toBeTruthy();
+        });
+        it('renders long hash values without truncation', () => {
+            const hash = 'a'.repeat(64);
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            expect(screen.getByText(hash)).toBeTruthy();
+        });
+    });
+    describe('seen-in chips', () => {
+        it('renders nothing when seenIn is empty', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: [] }), case: createMockCase() }) }));
+            expect(screen.queryByText('page.cases.assets.seen_in')).toBeNull();
+        });
+        it('renders "Seen in" label when seenIn has entries', () => {
+            const _case = createMockCase({
+                items: [{ path: 'alerts/test-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
+            expect(screen.getByText('page.cases.assets.seen_in')).toBeTruthy();
+        });
+        it('renders a chip labelled with entry.path for each seenIn id', () => {
+            const _case = createMockCase({
+                items: [
+                    { path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
+                    { path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
+                    { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
+                ]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
+            expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
+            expect(screen.getByText('observables/obs-002')).toBeTruthy();
+            expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
+        });
+        it('links each chip to /cases/:case_id/:path', () => {
+            const _case = createMockCase({
+                case_id: 'case-abc',
+                items: [{ path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+            });
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
+            const link = screen.getByText('alerts/my-analytic (hit-001)').closest('a');
+            expect(link).not.toBeNull();
+            expect(link?.getAttribute('href')).toBe('/cases/case-abc/alerts/my-analytic (hit-001)');
+        });
+    });
+});

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

@@ -0,0 +1,20 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+import type { Tree } from './types';
+interface CaseFolderProps {
+    case: Case;
+    folder?: Tree;
+    name?: string;
+    step?: number;
+    /**
+     * The chain of `leaf.path` values for each case item traversed from the root
+     * case to reach this nested case. Empty at the top level.
+     *
+     * Example: case1 → case2 (path "cases/caseone") → case3 (path "cases/casetwo")
+     * gives parentCasePaths = ['cases/caseone', 'cases/casetwo'] inside case3.
+     */
+    parentCasePaths?: string[];
+    onItemUpdated?: (newCase: Case) => void;
+}
+declare const CaseFolder: FC<CaseFolderProps>;
+export default CaseFolder;

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Skeleton, Stack, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import CaseFolderContextMenu from './CaseFolderContextMenu';
+import FolderEntry from './FolderEntry';
+import { buildTree } from './utils';
+const CaseFolder = ({ case: _case, folder, name, step = -1, parentCasePaths = [], onItemUpdated }) => {
+    const theme = useTheme();
+    const { dispatchApi } = useMyApi();
+    const params = useParams();
+    const [open, setOpen] = useState(true);
+    const [caseStates, setCaseStates] = useState({});
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
+    const rootCaseId = params.id;
+    // Returns the MUI colour token for the item's escalation, or undefined if none.
+    const getEscalationColor = (itemType, itemKey, leafId) => {
+        if (itemType === 'hit' && leafId) {
+            const color = ESCALATION_COLORS[records[leafId]?.howler?.escalation];
+            if (color)
+                return color;
+        }
+        if (itemType === 'case' && itemKey) {
+            const color = ESCALATION_COLORS[caseStates[itemKey]?.data?.escalation];
+            if (color)
+                return color;
+        }
+        return undefined;
+    };
+    const toggleCase = useCallback((item, itemKey) => {
+        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.value && !prev.data && !prev.loading;
+        setCaseStates(current => ({ ...current, [resolvedKey]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
+        if (!shouldFetch)
+            return;
+        dispatchApi(api.v2.case.get(item.value), { throwError: false })
+            .then(caseResponse => {
+            if (!caseResponse)
+                return;
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], data: caseResponse } }));
+        })
+            .finally(() => {
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], loading: false } }));
+        });
+    }, [caseStates, dispatchApi]);
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { _case: _case, tree: tree, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+                        transition: theme.transitions.create('background', { duration: 100 }),
+                        background: 'transparent',
+                        '&:hover': { background: theme.palette.grey[800] }
+                    }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, path: tree.path, itemType: "folder", indent: step * 1.5, label: name, chevronOpen: open, onClick: () => setOpen(_open => !_open), entry: tree }) }) })), open && (_jsxs(_Fragment, { children: [Object.entries(tree.folders ?? {}).map(([path, subfolder]) => {
+                        return (_jsx(CaseFolder, { name: path, case: _case, folder: subfolder, step: step + 1, parentCasePaths: parentCasePaths, onItemUpdated: onItemUpdated }, `${_case?.case_id}-${path}`));
+                    }), tree.leaves?.map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const isCase = itemType === 'case';
+                        const itemKey = leaf.path || leaf.value;
+                        const nodeState = itemKey ? caseStates[itemKey] : null;
+                        const isCaseOpen = !!nodeState?.open;
+                        const isCaseLoading = !!nodeState?.loading;
+                        const nestedCase = nodeState?.data ?? null;
+                        const fullItemPath = [...parentCasePaths, leaf.path].filter(Boolean).join('/');
+                        const itemTo = itemType !== 'reference' ? `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}` : leaf.value;
+                        const escalationColor = getEscalationColor(itemType, itemKey, leaf.value);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        return (_jsx(CaseFolderContextMenu, { _case: _case, leaf: leaf, onUpdate: onItemUpdated, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
+                                            transition: theme.transitions.create('background', { duration: 100 }),
+                                            background: 'transparent',
+                                            '&:hover': { background: theme.palette.grey[800] }
+                                        }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, path: leaf.path, indent: step * 1.5 + 1, label: leaf.path?.split('/').pop() || leaf.value || '', itemType: itemType, iconColor: iconColor, labelColor: leafColor, chevronOpen: isCaseOpen, to: itemTo, onClick: () => isCase && toggleCase(leaf, itemKey), entry: leaf }) }), 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, parentCasePaths: [...parentCasePaths, leaf.path].filter(Boolean), onItemUpdated: onItemUpdated }))] }) }, `${_case?.case_id}-${leaf.value}-${leaf.path}`));
+                    })] }))] }));
+};
+export default CaseFolder;

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

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

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

@@ -0,0 +1,295 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act, createContext } from 'react';
+import { setupContextSelectorMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+setupContextSelectorMock();
+setupReactRouterMock();
+vi.mock('@dnd-kit/core', () => ({
+    useDraggable: () => ({
+        attributes: {},
+        listeners: {},
+        setNodeRef: vi.fn(),
+        transform: null,
+        isDragging: false,
+        active: null
+    }),
+    useDroppable: () => ({
+        setNodeRef: vi.fn(),
+        isOver: false
+    })
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } }
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockGetCase = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (...args) => mockGetCase(...args),
+                items: { del: vi.fn(), patch: vi.fn() }
+            }
+        }
+    }
+}));
+// CaseFolderContextMenu — render children only; ignore menu entries for these tests
+vi.mock('./CaseFolderContextMenu', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    return {
+        ModalContext: createContext({ showModal: vi.fn(), close: vi.fn(), setContent: vi.fn() })
+    };
+});
+// RecordContext — supply a controllable records map
+const mockRecords = vi.hoisted(() => ({ current: {} }));
+vi.mock('components/app/providers/RecordProvider', async () => {
+    return {
+        RecordContext: createContext({ records: mockRecords.current })
+    };
+});
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import { MemoryRouter, useParams } from 'react-router-dom';
+import CaseFolder from './CaseFolder';
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+const makeCase = (id, items = []) => ({
+    case_id: id,
+    title: `Case ${id}`,
+    items
+});
+const hitItem = (path, value = path) => ({ type: 'hit', value, path });
+const caseItem = (path, value) => ({ type: 'case', value, path });
+const refItem = (path, value) => ({ type: 'reference', value, path });
+const renderFolder = (props, routeId) => {
+    vi.mocked(useParams).mockReturnValue({ id: routeId ?? props.case.case_id });
+    return render(_jsx(MemoryRouter, { children: _jsx(CaseFolder, { step: 0, ...props }) }));
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockGetCase.mockReset();
+    mockRecords.current = {};
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseFolder', () => {
+    describe('flat leaves', () => {
+        it('renders a leaf label derived from path', () => {
+            renderFolder({ case: makeCase('c1', [hitItem('folder/my-hit', 'v1')]) });
+            expect(screen.getByText('my-hit')).toBeInTheDocument();
+        });
+        it('falls back to value when leaf has no path', () => {
+            const noPath = { type: 'hit', value: 'bare-value' };
+            // Items with no path are excluded from the tree entirely
+            renderFolder({ case: makeCase('c1', [noPath]) });
+            expect(screen.queryByText('bare-value')).not.toBeInTheDocument();
+        });
+        it('renders multiple leaves in the same folder', () => {
+            const items = [hitItem('folder/alpha', 'va'), hitItem('folder/beta', 'vb')];
+            renderFolder({ case: makeCase('c1', items) });
+            expect(screen.getByText('alpha')).toBeInTheDocument();
+            expect(screen.getByText('beta')).toBeInTheDocument();
+        });
+    });
+    describe('folder header', () => {
+        it('renders the folder name when name prop is provided', () => {
+            renderFolder({
+                case: makeCase('c1'),
+                name: 'documents',
+                folder: { path: 'documents', leaves: [hitItem('documents/item', 'v')] }
+            });
+            expect(screen.getByText('documents')).toBeInTheDocument();
+        });
+        it('does not render a folder header when name is omitted', () => {
+            // Use a flat item (no subfolder) so the only text rendered is the leaf label itself.
+            renderFolder({ case: makeCase('c1', [hitItem('top-item', 'v')]) });
+            // The leaf label is present but there is no wrapping folder header element
+            expect(screen.getByText('top-item')).toBeInTheDocument();
+            // queryByText with the exact folder-header label (which would come from the `name` prop) is absent
+            expect(screen.queryByText('somefolder')).not.toBeInTheDocument();
+        });
+        it('collapses children when the folder header is clicked', async () => {
+            const user = userEvent.setup();
+            renderFolder({
+                case: makeCase('c1'),
+                name: 'docs',
+                folder: { path: 'docs', leaves: [hitItem('docs/item', 'v')] }
+            });
+            expect(screen.getByText('item')).toBeInTheDocument();
+            await user.click(screen.getByText('docs'));
+            expect(screen.queryByText('item')).not.toBeInTheDocument();
+        });
+        it('expands children again after a second click', async () => {
+            const user = userEvent.setup();
+            renderFolder({
+                case: makeCase('c1'),
+                name: 'docs',
+                folder: { path: 'docs', leaves: [hitItem('docs/item', 'v')] }
+            });
+            await user.click(screen.getByText('docs'));
+            await user.click(screen.getByText('docs'));
+            expect(screen.getByText('item')).toBeInTheDocument();
+        });
+    });
+    describe('leaf link URLs', () => {
+        it('builds a /cases/<id>/<path> URL for a hit leaf', () => {
+            renderFolder({ case: makeCase('case-1', [hitItem('folder/my-hit', 'hit-id')]) });
+            const link = screen.getByText('my-hit').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/folder/my-hit');
+        });
+        it('uses the leaf value directly as href for a reference item', () => {
+            renderFolder({ case: makeCase('case-1', [refItem('links/ext', 'https://example.com')]) });
+            const link = screen.getByText('ext').closest('a');
+            expect(link).toHaveAttribute('href', 'https://example.com');
+        });
+        it('omits the path segment when the leaf has no path (only value)', () => {
+            // A leaf item with value but no structural path still renders the root case URL
+            const items = [hitItem('top', 'top-val')];
+            renderFolder({ case: makeCase('case-1', items) });
+            const link = screen.getByText('top').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/top');
+        });
+    });
+    describe('nested case paths', () => {
+        it('prepends parentCasePaths to the leaf URL', () => {
+            const leaf = hitItem('example/page', 'page-val');
+            renderFolder({
+                case: makeCase('case3', [leaf]),
+                parentCasePaths: ['cases/caseone', 'cases/casetwo']
+            }, 'case1');
+            const link = screen.getByText('page').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case1/cases/caseone/cases/casetwo/example/page');
+        });
+        it('produces the correct URL at one level of nesting', () => {
+            const leaf = hitItem('data/item', 'val');
+            renderFolder({
+                case: makeCase('case2', [leaf]),
+                parentCasePaths: ['cases/caseone']
+            }, 'case1');
+            const link = screen.getByText('item').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case1/cases/caseone/data/item');
+        });
+    });
+    describe('subfolders', () => {
+        it('renders subfolder names', () => {
+            renderFolder({
+                case: makeCase('c1', [hitItem('alpha/item', 'v')])
+            });
+            // The structural folder "alpha" is not rendered as a labelled header at root level,
+            // but its child leaf label "item" should be visible
+            expect(screen.getByText('item')).toBeInTheDocument();
+        });
+        it('renders nested subfolder children', () => {
+            renderFolder({
+                case: makeCase('c1', [hitItem('a/b/deep', 'v')])
+            });
+            expect(screen.getByText('deep')).toBeInTheDocument();
+        });
+    });
+    describe('nested case expansion', () => {
+        it('does not show nested case content before the case leaf is clicked', () => {
+            const items = [caseItem('cases/child', 'child-case-id')];
+            const _case = makeCase('root', items);
+            mockDispatchApi.mockResolvedValue(null);
+            renderFolder({ case: _case });
+            expect(screen.queryByText('nested-item')).not.toBeInTheDocument();
+        });
+        it('fetches the nested case when a case leaf is clicked', async () => {
+            const items = [caseItem('cases/child', 'child-case-id')];
+            const nestedCase = makeCase('child-case-id', [hitItem('nested/page', 'p')]);
+            mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderFolder({ case: makeCase('root', items) });
+            act(() => {
+                screen.getByText('child').click();
+            });
+            await waitFor(() => {
+                expect(mockGetCase).toHaveBeenCalledWith('child-case-id');
+            });
+        });
+        it('renders the nested case items after the fetch resolves', async () => {
+            const nestedCase = makeCase('child-case-id', [hitItem('nested/page', 'p')]);
+            mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderFolder({ case: makeCase('root', [caseItem('cases/child', 'child-case-id')]) });
+            act(() => {
+                screen.getByText('child').click();
+            });
+            await waitFor(() => {
+                expect(screen.getByText('page')).toBeInTheDocument();
+            });
+        });
+        it('builds the correct URL for a leaf inside a nested case', async () => {
+            const nestedCase = makeCase('child-case-id', [hitItem('data/item', 'val')]);
+            mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderFolder({ case: makeCase('root', [caseItem('cases/child', 'child-case-id')]) });
+            act(() => {
+                screen.getByText('child').click();
+            });
+            await waitFor(() => {
+                const link = screen.getByText('item').closest('a');
+                expect(link).toHaveAttribute('href', '/cases/root/cases/child/data/item');
+            });
+        });
+        it('does not call the API a second time when a case leaf is toggled closed and re-opened', async () => {
+            const nestedCase = makeCase('child-case-id', [hitItem('nested/page', 'p')]);
+            mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderFolder({ case: makeCase('root', [caseItem('cases/child', 'child-case-id')]) });
+            act(() => {
+                screen.getByText('child').click();
+            });
+            await waitFor(() => expect(screen.getByText('page')).toBeInTheDocument());
+            act(() => {
+                screen.getByText('child').click(); // close
+            });
+            act(() => {
+                screen.getByText('child').click(); // re-open
+            });
+            expect(mockGetCase).toHaveBeenCalledTimes(1);
+        });
+        it('hides nested case content after the case leaf is toggled closed', async () => {
+            const nestedCase = makeCase('child-case-id', [hitItem('nested/page', 'p')]);
+            mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderFolder({ case: makeCase('root', [caseItem('cases/child', 'child-case-id')]) });
+            act(() => {
+                screen.getByText('child').click();
+            });
+            await waitFor(() => expect(screen.getByText('page')).toBeInTheDocument());
+            act(() => {
+                screen.getByText('child').click();
+            });
+            expect(screen.queryByText('page')).not.toBeInTheDocument();
+        });
+    });
+    describe('rootCaseId propagation', () => {
+        it('uses _case.case_id as the root when rootCaseId is not provided', () => {
+            renderFolder({ case: makeCase('my-case', [hitItem('folder/item', 'v')]) });
+            const link = screen.getByText('item').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/my-case/folder/item');
+        });
+        it('uses the provided rootCaseId in URLs when given', () => {
+            renderFolder({ case: makeCase('nested-case', [hitItem('folder/item', 'v')]) }, 'root-case');
+            const link = screen.getByText('item').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/root-case/folder/item');
+        });
+    });
+});

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 updated (renamed, removed). */
+    onUpdate?: (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;