@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { AddCircle, CalendarMonth, Circle, Dashboard, Dataset, Description, Folder, Refresh, Rule, Search, UnfoldLess } from '@mui/icons-material';
+import { alpha, Box, Card, Chip, IconButton, LinearProgress, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useReducer, 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 { showModal } = useContext(ModalContext);
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), useSensor(TouchSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
+    const [loading, setLoading] = useState(false);
+    const [activeDragData, setActiveDragData] = useState(null);
+    const [collapseKey, collapse] = useReducer(x => x + 1, 0);
+    const handleDragStart = useCallback((event) => {
+        const data = event.active.data.current;
+        setActiveDragData({ type: data.type, label: data.label ?? '' });
+    }, []);
+    const navItemSx = useCallback((isActive) => [
+        {
+            cursor: 'pointer',
+            px: 0.5,
+            py: 0.5,
+            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 targetFolderId = over.data.current.folderId ?? null;
+        if (!movingEntry.id) {
+            return;
+        }
+        if (movingEntry.parent === targetFolderId) {
+            return;
+        }
+        try {
+            setLoading(true);
+            const updatedCase = await dispatchApi(api.v2.case.items.put(_case.case_id, movingEntry.id, { parent: targetFolderId }));
+            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.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case?.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
+                                    if (_case) {
+                                        showModal(_jsx(AddToCaseModal, { case: _case, onUpdated: update }), { maxHeight: '90vh', height: 'unset' });
+                                    }
+                                }, children: [_jsx(Description, { sx: { fontSize: '18px' } }), _jsx(AddCircle, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                            bottom: 2,
+                                            right: 2,
+                                            backgroundColor: theme.palette.background.paper,
+                                            borderRadius: '100%'
+                                        }, htmlColor: "grey" })] }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_folder'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: async () => {
+                                    if (_case?.case_id) {
+                                        try {
+                                            setLoading(true);
+                                            const updatedCase = await dispatchApi(api.v2.case.items.post(_case.case_id, {
+                                                type: 'folder',
+                                                name: t('page.cases.sidebar.new_folder'),
+                                                value: t('page.cases.sidebar.new_folder')
+                                            }));
+                                            update(updatedCase);
+                                        }
+                                        finally {
+                                            setLoading(false);
+                                        }
+                                    }
+                                }, children: [_jsx(Folder, { sx: { fontSize: '18px' } }), _jsx(AddCircle, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                            bottom: 2,
+                                            right: 2,
+                                            backgroundColor: theme.palette.background.paper,
+                                            borderRadius: '100%'
+                                        }, htmlColor: "grey" })] }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.refresh'), children: _jsx(IconButton, { size: "small", onClick: async () => {
+                                    if (_case?.case_id) {
+                                        try {
+                                            setLoading(true);
+                                            const refreshedCase = await dispatchApi(api.v2.case.get(_case.case_id));
+                                            if (refreshedCase) {
+                                                update(refreshedCase);
+                                            }
+                                        }
+                                        finally {
+                                            setLoading(false);
+                                        }
+                                    }
+                                }, children: _jsx(Refresh, { sx: { fontSize: '18px' } }) }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.collapse_all'), children: _jsx(IconButton, { size: "small", onClick: collapse, children: _jsx(UnfoldLess, { sx: { fontSize: '18px' } }) }) })] }) }), _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, collapseKey: collapseKey }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && _jsx(FolderEntry, { caseId: null, indent: 0, label: activeDragData.label, entry: null }) })] })] }) }))] }));
+};
+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,155 @@
+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();
+const mockDragEndHandler = vi.hoisted(() => ({ current: null }));
+const mockDragStartHandler = 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(() => []),
+    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 mockItemsPut = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: vi.fn(),
+                items: {
+                    put: (...args) => mockItemsPut(...args),
+                    post: vi.fn(),
+                    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: '' }))
+    };
+});
+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() })
+    };
+});
+import CaseSidebar from './CaseSidebar';
+const hitItem = (value, id = value, parent = null) => ({
+    type: 'hit',
+    value,
+    id,
+    parent,
+    name: null
+});
+const renderSidebar = (overrides, onUpdate = vi.fn()) => {
+    const _case = createMockCase({ case_id: 'case-1', items: [], ...overrides });
+    const utils = render(_jsx(MemoryRouter, { children: _jsx(CaseSidebar, { case: _case, update: onUpdate }) }));
+    return { _case, onUpdate, ...utils };
+};
+const fireDragStart = (data) => {
+    act(() => {
+        mockDragStartHandler.current?.({ active: { data: { current: data } } });
+    });
+};
+const fireDragEnd = (activeData, overData) => {
+    act(() => {
+        mockDragEndHandler.current?.({
+            active: { data: { current: activeData } },
+            over: overData ? { data: { current: overData } } : null
+        });
+    });
+};
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockItemsPut.mockReset();
+    mockDragEndHandler.current = null;
+    mockDragStartHandler.current = null;
+});
+describe('CaseSidebar', () => {
+    it('renders navigation links and DnD wrappers', () => {
+        const { container } = renderSidebar();
+        expect(container.querySelector('#dnd-context')).toBeInTheDocument();
+        expect(container.querySelector('#case-folder')).toBeInTheDocument();
+        expect(container.querySelector('#drag-overlay')).toBeInTheDocument();
+        expect(container.querySelector('#root-drop-zone')).toHaveAttribute('data-case-id', 'case-1');
+        expect(screen.getByText('page.cases.dashboard').closest('a')).toHaveAttribute('href', '/cases/case-1');
+    });
+    it('shows and clears drag overlay label across drag start/end', async () => {
+        const items = [hitItem('folder/my-item', 'val')];
+        renderSidebar({ items });
+        fireDragStart({ type: 'hit', label: 'my-item', entry: hitItem('folder/my-item', 'val'), caseId: 'case-1' });
+        expect(screen.getByText('my-item')).toBeInTheDocument();
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(createMockCase({ case_id: 'case-1', items }));
+        fireDragEnd({ type: 'hit', entry: hitItem('folder/my-item', 'val', 'docs-folder'), caseId: 'case-1' }, { folderId: 'archive-folder', caseId: 'case-1' });
+        await waitFor(() => {
+            expect(screen.queryByText('my-item')).not.toBeInTheDocument();
+        });
+    });
+    it('moves item to folder by calling items.put with parent folder id', async () => {
+        const items = [hitItem('v', 'item-1', 'old-folder')];
+        const updatedCase = createMockCase({ case_id: 'case-1', items });
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(updatedCase);
+        const { onUpdate } = renderSidebar({ items });
+        fireDragEnd({ type: 'hit', entry: items[0], caseId: 'case-1' }, { folderId: 'archive-folder', caseId: 'case-1' });
+        await waitFor(() => {
+            expect(mockItemsPut).toHaveBeenCalledWith('case-1', 'item-1', { parent: 'archive-folder' });
+            expect(onUpdate).toHaveBeenCalledWith(updatedCase);
+        });
+    });
+    it('moves item to root with parent null', async () => {
+        const items = [hitItem('v', 'item-1', 'folder-id')];
+        mockItemsPut.mockReturnValue('put-request');
+        mockDispatchApi.mockResolvedValue(createMockCase({ case_id: 'case-1', items }));
+        renderSidebar({ items });
+        fireDragEnd({ type: 'hit', entry: items[0], caseId: 'case-1' }, { caseId: 'case-1' });
+        await waitFor(() => {
+            expect(mockItemsPut).toHaveBeenCalledWith('case-1', 'item-1', { parent: null });
+        });
+    });
+    it('does nothing for no-op drops (same parent) and invalid payloads', async () => {
+        renderSidebar({ items: [hitItem('v', 'item-1', 'same-folder')] });
+        fireDragEnd({ type: 'hit', entry: hitItem('v', 'item-1', 'same-folder'), caseId: 'case-1' }, { folderId: 'same-folder', caseId: 'case-1' });
+        fireDragEnd({ type: 'hit', entry: { type: 'hit', value: 'v' }, caseId: 'case-1' }, { folderId: 'x' });
+        fireDragEnd({ type: 'hit', entry: hitItem('v', 'id-2') }, null);
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(mockItemsPut).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Task } from '@cccsaurora/howler-ui/models/entities/generated/Task';
+import { type FC } from 'react';
+declare const CaseTask: FC<{
+    case: Case;
+    task?: Task;
+    onDelete?: () => Promise<void>;
+    onEdit?: (task?: Partial<Task>) => Promise<void>;
+    loading?: boolean;
+    newTask?: boolean;
+    /** When true all editing controls are hidden and the task is display-only */
+    readOnly?: boolean;
+}>;
+export default CaseTask;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Close, Delete, Edit } from '@mui/icons-material';
+import { Autocomplete, Card, Checkbox, Chip, IconButton, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { buildPathFromID } from '../utils';
+const CaseTask = ({ case: _case, task, onEdit, onDelete, newTask = false, readOnly = false }) => {
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [editing, setEditing] = useState(newTask);
+    const [summary, setSummary] = useState(task?.summary || '');
+    const [item, setItem] = useState(task?.item ? _case?.items.find(_item => _item.id === task.item) : null);
+    const [assignment, setAssignment] = useState(task?.assignment);
+    const [complete, setComplete] = useState(task?.complete ?? false);
+    const dirty = summary !== task?.summary ||
+        item?.id !== task?.item ||
+        complete !== task?.complete ||
+        assignment !== task?.assignment;
+    const options = useMemo(() => _case?.items ?? [], [_case]);
+    const onSubmit = async () => {
+        if (dirty && editing) {
+            setLoading(true);
+            await onEdit({ summary, item: !item ? null : item.id, assignment, complete });
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (!readOnly && !editing && task?.assignment !== assignment) {
+            setLoading(true);
+            onEdit({ assignment }).finally(() => setLoading(false));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [assignment]);
+    useEffect(() => {
+        if (!readOnly && !editing && task?.complete !== complete) {
+            setLoading(true);
+            onEdit({ complete }).finally(() => setLoading(false));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [complete]);
+    useEffect(() => {
+        if (!editing && task) {
+            setSummary(task.summary);
+            setItem(task?.item ? _case?.items.find(_item => _item.id === task.item) : null);
+            setComplete(task.complete);
+            setAssignment(task.assignment);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [task, _case]);
+    return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { disabled: loading || readOnly, color: "success", checked: complete, size: "small", onChange: (_ev, _complete) => !readOnly && setComplete(_complete) }), editing && !readOnly ? (_jsx(TextField, { disabled: loading, value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [complete && { textDecoration: 'line-through' }], children: task?.summary || summary })), !editing && item && (_jsx(Chip, { clickable: true, component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, item.id)}`, label: item.name })), editing && !readOnly && (_jsx(Autocomplete, { disabled: loading, value: item, options: options, getOptionLabel: opt => buildPathFromID(_case, opt.id), isOptionEqualToValue: opt => opt.id === item.id, onChange: (_ev, value) => setItem(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), _jsx(UserList, { disabled: loading || readOnly, userIds: [assignment], onChange: ([_assigment]) => !readOnly && setAssignment(_assigment), i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 }), _jsx("div", { style: { flex: 1 } }), !readOnly && editing && !newTask && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: () => {
+                                setLoading(true);
+                                onDelete().then(() => setLoading(false));
+                            }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }) })), !readOnly && (_jsx(Tooltip, { title: t(editing ? 'route.cases.task.edit.save' : 'route.cases.task.edit'), children: _jsx("span", { children: _jsx(IconButton, { size: "small", color: editing ? 'success' : 'default', onClick: async () => {
+                                    if (!editing) {
+                                        setEditing(true);
+                                        return;
+                                    }
+                                    await onSubmit();
+                                    setEditing(false);
+                                }, disabled: (!dirty && editing) || loading || !summary, children: editing ? _jsx(Check, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) }) })), !readOnly && editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => {
+                                if (newTask) {
+                                    onDelete();
+                                }
+                                else {
+                                    setEditing(false);
+                                }
+                            }, disabled: loading, children: _jsx(Close, { fontSize: "small" }) }) }))] }), loading && _jsx(LinearProgress, { sx: { left: 0, bottom: 0, right: 0, position: 'absolute' } })] }));
+};
+export default CaseTask;

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

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

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockUserListOnChange = vi.hoisted(() => ({ fn: null }));
+const mockPathAutocompleteOnChange = vi.hoisted(() => ({ fn: null }));
+vi.mock('components/elements/UserList', () => ({
+    default: ({ onChange, userIds, disabled }) => {
+        mockUserListOnChange.fn = onChange;
+        return _jsx("div", { id: "user-list", "data-disabled": String(!!disabled), "data-user-ids": JSON.stringify(userIds) });
+    }
+}));
+setupReactRouterMock();
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        Autocomplete: ({ onChange, value }) => {
+            mockPathAutocompleteOnChange.fn = onChange;
+            return _jsx("div", { id: "path-autocomplete", "data-value": value?.id ?? '' });
+        }
+    };
+});
+import CaseTask from './CaseTask';
+const mkTask = (overrides) => ({
+    id: 't1',
+    summary: 'Test task',
+    complete: false,
+    assignment: undefined,
+    ...overrides
+});
+const testCase = createMockCase({
+    case_id: 'case-1',
+    items: [
+        { id: 'root-folder', type: 'folder', value: 'Folder', name: 'Folder' },
+        { id: 'item-1', type: 'hit', value: 'hit-1', name: 'Hit One', parent: 'root-folder' },
+        { id: 'item-2', type: 'hit', value: 'hit-2', name: 'Hit Two' }
+    ]
+});
+const renderTask = (task, opts = {}) => {
+    const mockOnEdit = vi.fn().mockResolvedValue(undefined);
+    const mockOnDelete = vi.fn().mockResolvedValue(undefined);
+    const { container } = render(_jsx(MemoryRouter, { children: _jsx(CaseTask, { case: testCase, task: task, onEdit: mockOnEdit, onDelete: mockOnDelete, readOnly: opts.readOnly, newTask: opts.newTask }) }));
+    return { container, mockOnEdit, mockOnDelete };
+};
+const getEditButton = (container) => (container.querySelector('[data-testid="EditIcon"]')?.closest('button') ?? null);
+const getSaveButton = (container) => (container.querySelector('[data-testid="CheckIcon"]')?.closest('button') ?? null);
+const getCancelButton = (container) => (container.querySelector('[data-testid="CloseIcon"]')?.closest('button') ?? null);
+beforeEach(() => {
+    mockUserListOnChange.fn = null;
+    mockPathAutocompleteOnChange.fn = null;
+});
+describe('CaseTask', () => {
+    describe('display mode', () => {
+        it('renders the task summary text', () => {
+            renderTask(mkTask({ summary: 'My important task' }));
+            expect(screen.getByText('My important task')).toBeInTheDocument();
+        });
+        it('shows a checked checkbox when task.complete is true', () => {
+            renderTask(mkTask({ complete: true }));
+            expect(screen.getByRole('checkbox')).toBeChecked();
+        });
+        it('shows a path chip linking to the resolved item path when task.item is set', () => {
+            renderTask(mkTask({ item: 'item-1' }));
+            const link = screen.getByText('Hit One').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/Folder/Hit One');
+        });
+        it('does not show an item chip when task.item is not set', () => {
+            renderTask(mkTask({ item: undefined }));
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+        });
+        it('shows the edit button in display mode', () => {
+            const { container } = renderTask(mkTask());
+            expect(getEditButton(container)).toBeInTheDocument();
+        });
+    });
+    describe('edit mode', () => {
+        it('enters edit mode and shows a textbox when the edit button is clicked', () => {
+            const { container } = renderTask(mkTask());
+            fireEvent.click(getEditButton(container));
+            expect(screen.getByRole('textbox')).toBeInTheDocument();
+        });
+        it('keeps save disabled after entering edit mode with no changes', () => {
+            const { container } = renderTask(mkTask({ summary: 'Unchanged' }));
+            fireEvent.click(getEditButton(container));
+            expect(getSaveButton(container)).toBeDisabled();
+        });
+        it('calls onEdit with selected item id on save', async () => {
+            const { container, mockOnEdit } = renderTask(mkTask({ summary: 'Task' }));
+            fireEvent.click(getEditButton(container));
+            act(() => {
+                mockPathAutocompleteOnChange.fn?.({}, {
+                    id: 'item-2',
+                    type: 'hit',
+                    value: 'hit-2',
+                    name: 'Hit Two'
+                });
+            });
+            await act(async () => {
+                fireEvent.click(getSaveButton(container));
+            });
+            expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ item: 'item-2' }));
+        });
+    });
+    describe('new task mode', () => {
+        it('starts in edit mode and can be cancelled via onDelete', async () => {
+            const { container, mockOnDelete } = renderTask(undefined, { newTask: true });
+            expect(screen.getByRole('textbox')).toBeInTheDocument();
+            await act(() => fireEvent.click(getCancelButton(container)));
+            expect(mockOnDelete).toHaveBeenCalled();
+        });
+    });
+    describe('read-only mode', () => {
+        it('hides edit controls and keeps checkbox disabled', () => {
+            const { container } = renderTask(mkTask({ item: 'item-1' }), { readOnly: true });
+            expect(getEditButton(container)).not.toBeInTheDocument();
+            expect(screen.getByRole('checkbox')).toBeDisabled();
+            expect(screen.getByText('Hit One')).toBeInTheDocument();
+        });
+    });
+    describe('auto-update effects', () => {
+        it('auto-calls onEdit when complete is toggled while not editing', async () => {
+            const { mockOnEdit } = renderTask(mkTask({ complete: false }));
+            await act(async () => {
+                fireEvent.click(screen.getByRole('checkbox'));
+            });
+            await waitFor(() => {
+                expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ complete: true }));
+            });
+        });
+        it('auto-calls onEdit when assignment changes while not editing', async () => {
+            const { mockOnEdit } = renderTask(mkTask({ assignment: undefined }));
+            await act(async () => {
+                mockUserListOnChange.fn?.(['user-42']);
+            });
+            await waitFor(() => {
+                expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ assignment: 'user-42' }));
+            });
+        });
+    });
+});

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

@@ -0,0 +1,12 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+interface MitreOption {
+    id: string;
+    name: string;
+    kind: 'tactic' | 'technique';
+}
+export declare const buildFilters: (mitre: MitreOption[], escalations: string[]) => string[];
+declare const _default: import("react").NamedExoticComponent<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default _default;