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

package/components/routes/cases/detail/CaseRules.test.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockUpdate = vi.hoisted(() => vi.fn());
+const mockShowModal = vi.hoisted(() => vi.fn());
+const mockCase = vi.hoisted(() => ({
+    current: {
+        case_id: 'case-001',
+        title: 'Test Case',
+        rules: []
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ showModal: mockShowModal, close: vi.fn(), setContent: vi.fn() })
+    };
+});
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c ?? mockCase.current,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useOutletContext: () => mockCase.current,
+        useLocation: () => ({ pathname: '/cases/case-001/rules', search: '' }),
+        useParams: () => ({ id: 'case-001' }),
+        useNavigate: () => vi.fn()
+    };
+});
+const mockOnSubmit = vi.hoisted(() => ({ current: null }));
+vi.mock('./CreateRuleDialog', () => ({
+    default: ({ open, onClose, onSubmit }) => {
+        mockOnSubmit.current = onSubmit;
+        return open ? (_jsxs("div", { id: "create-rule-dialog", children: [_jsx("button", { id: "rule-submit-button", onClick: () => onSubmit({ query: 'event.kind:alert', destination: 'alerts/incoming' }), children: "submit" }), _jsx("button", { onClick: onClose, children: "cancel" })] })) : null;
+    }
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                rules: {
+                    post: vi.fn(),
+                    del: vi.fn(),
+                    put: vi.fn()
+                }
+            }
+        }
+    }
+}));
+import api from '@cccsaurora/howler-ui/api';
+import CaseRules from './CaseRules';
+const makeRule = (overrides) => ({
+    rule_id: 'rule-001',
+    query: 'event.kind:alert',
+    destination: 'alerts/{{howler.analytic}}',
+    author: 'analyst1',
+    enabled: true,
+    timeframe: '2026-06-01T00:00:00.000Z',
+    indexes: ['hit'],
+    ...overrides
+});
+describe('CaseRules', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            title: 'Test Case',
+            rules: []
+        });
+    });
+    it('renders empty state when no rules exist', () => {
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.empty')).toBeInTheDocument();
+    });
+    it('renders rule list with destination, query, author, and timeframe', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByTestId('rules-table')).toBeInTheDocument();
+        expect(screen.getByText('alerts/{{howler.analytic}}')).toBeInTheDocument();
+        expect(screen.getByText('event.kind:alert')).toBeInTheDocument();
+        expect(screen.getByText('analyst1')).toBeInTheDocument();
+    });
+    it('shows no expiry chip when timeframe is null', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: undefined })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.no_expiry')).toBeInTheDocument();
+    });
+    it('renders enabled toggle for each rule', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        render(_jsx(CaseRules, {}));
+        const toggle = screen.getByTestId('rule-toggle-rule-001');
+        expect(toggle).toBeInTheDocument();
+    });
+    it('renders index chips for rule indexes', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ indexes: ['hit', 'observable'] })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('hit')).toBeInTheDocument();
+        expect(screen.getByText('observable')).toBeInTheDocument();
+    });
+    it('defaults to hit chip when indexes is undefined', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ indexes: undefined })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('hit')).toBeInTheDocument();
+    });
+    it('opens create rule dialog when create button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('create-rule-button'));
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('create-rule-dialog')).toBeInTheDocument();
+        });
+    });
+    it('submits create rule form and calls API', async () => {
+        const user = userEvent.setup();
+        const updatedCase = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ rule_id: 'new-rule' })]
+        });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        api.v2.case.rules.post.mockReturnValue('post-request');
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('create-rule-button'));
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('create-rule-dialog')).toBeInTheDocument();
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('post-request');
+        });
+    });
+    it('calls delete API when delete is confirmed via modal', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        const updatedCase = createMockCase({ case_id: 'case-001', rules: [] });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        api.v2.case.rules.del.mockReturnValue('del-request');
+        // Make showModal immediately invoke the onConfirm callback
+        mockShowModal.mockImplementation((modal) => {
+            modal.props.onConfirm();
+        });
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-delete-rule-001'));
+        });
+        await waitFor(() => {
+            expect(mockShowModal).toHaveBeenCalled();
+            expect(mockDispatchApi).toHaveBeenCalledWith('del-request', { throwError: false });
+        });
+    });
+    it('calls put API when enabled toggle is clicked', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ enabled: true })]
+        });
+        const updatedCase = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ enabled: false })]
+        });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        vi.mocked(api.v2.case.rules.put).mockReturnValue('put-request');
+        render(_jsx(CaseRules, {}));
+        const toggle = screen.getByTestId('rule-toggle-rule-001');
+        await act(async () => {
+            await user.click(toggle);
+        });
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('put-request');
+        });
+    });
+    it('renders multiple rules', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [
+                makeRule({ rule_id: 'rule-001', query: 'query1' }),
+                makeRule({ rule_id: 'rule-002', query: 'query2', author: 'analyst2' })
+            ]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('query1')).toBeInTheDocument();
+        expect(screen.getByText('query2')).toBeInTheDocument();
+        expect(screen.getByText('analyst2')).toBeInTheDocument();
+    });
+});

package/components/routes/cases/detail/CaseSidebar.d.ts

@@ -0,0 +1,8 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+interface CaseSidebarProps {
+    case: Case;
+    update: (newCase: Case) => void;
+}
+declare const CaseSidebar: FC<CaseSidebarProps>;
+export default CaseSidebar;

package/components/routes/cases/detail/CaseSidebar.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { CalendarMonth, Circle, Dashboard, Dataset, Rule } from '@mui/icons-material';
+import { alpha, Box, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+import { ESCALATION_COLOR_MAP } from '../constants';
+import CaseFolder from './sidebar/CaseFolder';
+import FolderEntry from './sidebar/FolderEntry';
+import RootDropZone from './sidebar/RootDropZone';
+const CaseSidebar = ({ case: _case, update }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const location = useLocation();
+    const theme = useTheme();
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), useSensor(TouchSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
+    const [loading, setLoading] = useState(false);
+    const [activeDragData, setActiveDragData] = useState(null);
+    const handleDragStart = useCallback((event) => {
+        const data = event.active.data.current;
+        setActiveDragData({ type: data.type, label: data.label ?? '' });
+    }, []);
+    const navItemSx = useCallback((isActive) => [
+        {
+            cursor: 'pointer',
+            px: 1,
+            py: 1,
+            transition: theme.transitions.create('background', { duration: 100 }),
+            color: `${theme.palette.text.primary} !important`,
+            textDecoration: 'none',
+            background: 'transparent',
+            borderRight: `thin solid ${theme.palette.divider}`,
+            '&:hover': {
+                background: alpha(theme.palette.grey[600], 0.25)
+            }
+        },
+        isActive && {
+            background: alpha(theme.palette.grey[600], 0.15),
+            borderRight: `3px solid ${theme.palette.primary.main}`
+        }
+    ], [
+        theme.palette.divider,
+        theme.palette.grey,
+        theme.palette.primary.main,
+        theme.palette.text.primary,
+        theme.transitions
+    ]);
+    const handleDragEnd = useCallback(async (event) => {
+        setActiveDragData(null);
+        if (!_case) {
+            return;
+        }
+        const { active, over } = event;
+        if (!over?.data.current || !active?.data.current) {
+            return;
+        }
+        const movingEntry = active.data.current.entry;
+        const movingType = active.data.current.type;
+        if (!movingEntry?.path) {
+            return;
+        }
+        const filename = movingEntry.path.split('/').pop();
+        const targetPath = over.data.current.path ? `${over.data.current.path}/${filename}` : filename;
+        if (!targetPath) {
+            return;
+        }
+        if (targetPath === movingEntry.path) {
+            return;
+        }
+        const items = _case.items.map(_item => (movingType === 'folder'
+            ? _item.path.startsWith(movingEntry.path)
+            : _item.value === movingEntry.value)
+            ? { ..._item, path: _item.path.replace(movingEntry.path, targetPath) }
+            : _item);
+        try {
+            setLoading(true);
+            const updatedCase = await dispatchApi(api.v2.case.put(_case.case_id, { items }));
+            update(updatedCase);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [_case, dispatchApi, update]);
+    return (_jsxs(Box, { sx: {
+            flex: 1,
+            maxWidth: '350px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column'
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}`), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/assets`), component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/timeline`), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/rules`), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+                    position: 'relative',
+                    borderRight: `thin solid ${theme.palette.divider}`
+                }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: null, path: "", indent: 0, label: activeDragData.label, itemType: activeDragData.type })) })] })] }) }))] }));
+};
+export default CaseSidebar;

package/components/routes/cases/detail/CaseSidebar.test.d.ts

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

package/components/routes/cases/detail/CaseSidebar.test.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDragEndHandler = vi.hoisted(() => ({ current: null }));
+const mockDragStartHandler = vi.hoisted(() => ({ current: null }));
+const mockActiveDrag = vi.hoisted(() => ({ current: null }));
+vi.mock('@dnd-kit/core', () => ({
+    DndContext: ({ children, onDragEnd, onDragStart }) => {
+        mockDragEndHandler.current = onDragEnd;
+        mockDragStartHandler.current = onDragStart;
+        return _jsx("div", { id: "dnd-context", children: children });
+    },
+    DragOverlay: ({ children }) => _jsx("div", { id: "drag-overlay", children: children ?? null }),
+    MouseSensor: class {
+    },
+    TouchSensor: class {
+    },
+    useSensor: vi.fn(),
+    useSensors: vi.fn(() => []),
+    useDndContext: vi.fn(() => ({ active: mockActiveDrag.current })),
+    useDroppable: vi.fn(() => ({ setNodeRef: vi.fn(), isOver: false })),
+    useDraggable: vi.fn(() => ({
+        attributes: {},
+        listeners: {},
+        setNodeRef: vi.fn(),
+        transform: null,
+        isDragging: false,
+        active: null
+    })),
+    pointerWithin: vi.fn()
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } }
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockPut = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                put: (...args) => mockPut(...args),
+                get: vi.fn(),
+                items: { del: vi.fn(), patch: vi.fn() }
+            }
+        }
+    }
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children })),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' }))
+    };
+});
+// Stub heavy child components
+vi.mock('./sidebar/CaseFolder', () => ({
+    default: () => _jsx("div", { id: "case-folder" })
+}));
+vi.mock('./sidebar/FolderEntry', () => ({
+    default: ({ label }) => _jsx("div", { id: "folder-entry-overlay", children: label })
+}));
+vi.mock('./sidebar/RootDropZone', () => ({
+    default: ({ caseId }) => _jsx("div", { id: "root-drop-zone", "data-case-id": caseId })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ showModal: vi.fn(), close: vi.fn(), setContent: vi.fn() })
+    };
+});
+vi.mock('components/app/providers/RecordProvider', async () => {
+    const { createContext } = await import('react');
+    return { RecordContext: createContext({ records: {} }) };
+});
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import CaseSidebar from './CaseSidebar';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const hitItem = (path, value = path) => ({ type: 'hit', value, path });
+const renderSidebar = (overrides, onUpdate = vi.fn()) => {
+    const _case = createMockCase({ case_id: 'case-1', items: [], ...overrides });
+    render(_jsx(MemoryRouter, { children: _jsx(CaseSidebar, { case: _case, update: onUpdate }) }));
+    return { _case, onUpdate };
+};
+const fireDragStart = (data) => {
+    act(() => {
+        mockDragStartHandler.current?.({ active: { data: { current: data } } });
+    });
+};
+const fireDragEnd = (activeData, overData) => {
+    act(() => {
+        mockDragEndHandler.current?.({
+            active: { data: { current: activeData } },
+            over: { data: { current: overData } }
+        });
+    });
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockPut.mockReset();
+    mockActiveDrag.current = null;
+    mockDragEndHandler.current = null;
+    mockDragStartHandler.current = null;
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseSidebar', () => {
+    describe('structure', () => {
+        it('renders the DndContext', () => {
+            renderSidebar();
+            expect(screen.getByTestId('dnd-context')).toBeInTheDocument();
+        });
+        it('renders the CaseFolder inside DndContext', () => {
+            renderSidebar();
+            expect(screen.getByTestId('case-folder')).toBeInTheDocument();
+        });
+        it('renders the RootDropZone with the correct caseId', () => {
+            renderSidebar();
+            expect(screen.getByTestId('root-drop-zone')).toHaveAttribute('data-case-id', 'case-1');
+        });
+        it('renders the DragOverlay', () => {
+            renderSidebar();
+            expect(screen.getByTestId('drag-overlay')).toBeInTheDocument();
+        });
+        it('renders a Dashboard nav link pointing to the case route', () => {
+            renderSidebar();
+            const link = screen.getByText('page.cases.dashboard').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1');
+        });
+        it('renders an Assets nav link pointing to the case assets route', () => {
+            renderSidebar();
+            const link = screen.getByText('page.cases.assets').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/assets');
+        });
+        it('renders a Timeline nav link pointing to the case timeline route', () => {
+            renderSidebar();
+            const link = screen.getByText('page.cases.timeline').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/timeline');
+        });
+        it('renders a Rules nav link pointing to the case rules route', () => {
+            renderSidebar();
+            const rulesLink = screen.getByText('page.cases.rules').closest('a');
+            expect(rulesLink).toHaveAttribute('href', '/cases/case-1/rules');
+        });
+    });
+    describe('drag overlay', () => {
+        it('shows nothing in the overlay when no drag is active', () => {
+            renderSidebar();
+            expect(screen.queryByTestId('folder-entry-overlay')).not.toBeInTheDocument();
+        });
+        it('shows a FolderEntry in the overlay after drag starts', () => {
+            renderSidebar();
+            fireDragStart({ type: 'hit', label: 'my-item', entry: hitItem('folder/my-item'), caseId: 'case-1' });
+            expect(screen.getByTestId('folder-entry-overlay')).toBeInTheDocument();
+            expect(screen.getByText('my-item')).toBeInTheDocument();
+        });
+        it('clears the overlay after drag ends', async () => {
+            const items = [hitItem('folder/my-item', 'val')];
+            renderSidebar({ items });
+            mockDispatchApi.mockResolvedValue(createMockCase({ case_id: 'case-1', items }));
+            mockPut.mockReturnValue(Promise.resolve());
+            fireDragStart({ type: 'hit', label: 'my-item', entry: hitItem('folder/my-item'), caseId: 'case-1' });
+            expect(screen.getByTestId('folder-entry-overlay')).toBeInTheDocument();
+            fireDragEnd({ type: 'hit', entry: hitItem('folder/my-item', 'val'), caseId: 'case-1' }, { path: 'other', caseId: 'case-1' });
+            await waitFor(() => {
+                expect(screen.queryByTestId('folder-entry-overlay')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('handleDragEnd — item moves', () => {
+        it('calls PUT with the updated path when a hit is moved to a folder', async () => {
+            const items = [hitItem('docs/report', 'rep-val')];
+            const updatedCase = createMockCase({ case_id: 'case-1', items: [hitItem('archive/report', 'rep-val')] });
+            mockPut.mockReturnValue(Promise.resolve(updatedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            const { onUpdate } = renderSidebar({ items });
+            fireDragEnd({ type: 'hit', entry: hitItem('docs/report', 'rep-val'), caseId: 'case-1' }, { path: 'archive', caseId: 'case-1' });
+            await waitFor(() => {
+                expect(mockPut).toHaveBeenCalledWith('case-1', expect.objectContaining({
+                    items: expect.arrayContaining([expect.objectContaining({ path: 'archive/report' })])
+                }));
+                expect(onUpdate).toHaveBeenCalledWith(updatedCase);
+            });
+        });
+        it('moves an item to root when the over path is empty', async () => {
+            const items = [hitItem('folder/report', 'rep-val')];
+            const updatedCase = createMockCase({ case_id: 'case-1', items: [hitItem('report', 'rep-val')] });
+            mockPut.mockReturnValue(Promise.resolve(updatedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            const { onUpdate } = renderSidebar({ items });
+            fireDragEnd({ type: 'hit', entry: hitItem('folder/report', 'rep-val'), caseId: 'case-1' }, { path: '', caseId: 'case-1' } // root drop zone
+            );
+            await waitFor(() => {
+                expect(mockPut).toHaveBeenCalledWith('case-1', expect.objectContaining({
+                    items: expect.arrayContaining([expect.objectContaining({ path: 'report' })])
+                }));
+                expect(onUpdate).toHaveBeenCalledWith(updatedCase);
+            });
+        });
+        it('moves all items under a folder when type is folder', async () => {
+            const items = [hitItem('docs/a', 'a-val'), hitItem('docs/b', 'b-val'), hitItem('other/c', 'c-val')];
+            const updatedCase = createMockCase({ case_id: 'case-1', items });
+            mockPut.mockReturnValue(Promise.resolve(updatedCase));
+            mockDispatchApi.mockImplementation((p) => p);
+            renderSidebar({ items });
+            fireDragEnd({ type: 'folder', entry: { path: 'docs' }, caseId: 'case-1' }, { path: 'archive', caseId: 'case-1' });
+            await waitFor(() => {
+                expect(mockPut).toHaveBeenCalledWith('case-1', expect.objectContaining({
+                    items: expect.arrayContaining([
+                        expect.objectContaining({ path: 'archive/docs/a' }),
+                        expect.objectContaining({ path: 'archive/docs/b' }),
+                        // Items not under 'docs' are unchanged
+                        expect.objectContaining({ path: 'other/c' })
+                    ])
+                }));
+            });
+        });
+    });
+    describe('handleDragEnd — guards', () => {
+        it('does nothing when over is null', async () => {
+            renderSidebar({ items: [hitItem('folder/item', 'val')] });
+            act(() => {
+                mockDragEndHandler.current?.({
+                    active: { data: { current: { type: 'hit', entry: hitItem('folder/item', 'val'), caseId: 'case-1' } } },
+                    over: null
+                });
+            });
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockPut).not.toHaveBeenCalled();
+        });
+        it('does nothing when the path would not change (no-op drop)', async () => {
+            const items = [hitItem('folder/item', 'val')];
+            renderSidebar({ items });
+            // Dropping into the same folder → same path
+            fireDragEnd({ type: 'hit', entry: hitItem('folder/item', 'val'), caseId: 'case-1' }, { path: 'folder', caseId: 'case-1' });
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockPut).not.toHaveBeenCalled();
+        });
+        it('does nothing when movingEntry.path is missing', async () => {
+            renderSidebar();
+            fireDragEnd({ type: 'hit', entry: { value: 'val' }, caseId: 'case-1' }, // no path
+            { path: 'archive', caseId: 'case-1' });
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockPut).not.toHaveBeenCalled();
+        });
+    });
+});

package/components/routes/cases/detail/CaseTask.d.ts

@@ -0,0 +1,11 @@
+import type { Task } from '@cccsaurora/howler-ui/models/entities/generated/Task';
+import { type FC } from 'react';
+declare const CaseTask: FC<{
+    task?: Task;
+    paths: string[];
+    onDelete?: () => Promise<void>;
+    onEdit: (task?: Partial<Task>) => Promise<void>;
+    loading?: boolean;
+    newTask?: boolean;
+}>;
+export default CaseTask;