@cccsaurora/howler-ui 2.19.0-cases.1057 → 2.19.0-cases.1065

package/api/v2/case/items.js

@@ -5,6 +5,13 @@ export const uri = (id) => {
     return joinUri(parentUri(id), 'items');
 };
 export const post = (id, newData) => {
+    // Case items must always be placed at the root of the case structure.
+    // If a nested path is provided, strip folder segments and retain only the last component,
+    // then warn so callers know a normalization occurred.
+    if (newData.type === 'case' && newData.path?.includes('/')) {
+        const normalizedPath = newData.path.replace(/\/+$/, '').split('/').pop() || newData.value;
+        newData = { ...newData, path: normalizedPath };
+    }
     return hpost(uri(id), newData);
 };
 export const del = (id, values) => {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
@@ -75,6 +75,9 @@ describe('buildAssetEntries', () => {
 // Component rendering tests
 // ---------------------------------------------------------------------------
 const mockDispatchApi = vi.fn();
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key, i18n: { language: 'en' } })
+}));
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
@@ -135,9 +138,7 @@ describe('CaseAssets component', () => {
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
         // Click the 'ip' filter chip
-        await act(async () => {
-            await userEvent.click(screen.getByRole('button', { name: 'page.cases.assets.type.ip' }));
-        });
+        await userEvent.click(screen.getByRole('button', { name: 'page.cases.assets.type.ip' }));
         // Alice (user) should be filtered out
         expect(screen.queryByText('alice')).toBeNull();
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
@@ -149,12 +150,8 @@ describe('CaseAssets component', () => {
         render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
         const ipChip = screen.getByRole('button', { name: 'page.cases.assets.type.ip' });
-        await act(async () => {
-            await userEvent.click(ipChip);
-        });
-        await act(async () => {
-            await userEvent.click(ipChip);
-        });
+        await userEvent.click(ipChip);
+        await userEvent.click(ipChip);
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
         expect(screen.getByText('alice')).toBeTruthy();
     });

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

@@ -35,8 +35,8 @@ const CaseSidebar = ({ case: _case, update }) => {
     const navItemSx = useCallback((isActive) => [
         {
             cursor: 'pointer',
-            px: 1,
-            py: 1,
+            px: 0.5,
+            py: 0.5,
             transition: theme.transitions.create('background', { duration: 100 }),
             color: `${theme.palette.text.primary} !important`,
             textDecoration: 'none',
@@ -99,7 +99,7 @@ const CaseSidebar = ({ case: _case, update }) => {
             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: {
+        }, 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('assets')), component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _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(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 })) })] })] }) }))] }));

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

@@ -263,4 +263,40 @@ describe('CaseSidebar', () => {
             expect(mockPut).not.toHaveBeenCalled();
         });
     });
+    // -------------------------------------------------------------------------
+    describe('card header', () => {
+        it('renders the case title in the header card', () => {
+            renderSidebar({ title: 'My Investigation' });
+            expect(screen.getByText('My Investigation')).toBeInTheDocument();
+        });
+        it('renders a Skeleton in place of the title when title is not set', () => {
+            renderSidebar({ title: undefined });
+            // At least one Skeleton should be present (title area)
+            expect(document.querySelector('.MuiSkeleton-root')).toBeInTheDocument();
+        });
+        it('renders the "started" label in the header', () => {
+            renderSidebar();
+            expect(screen.getByText(/started/i)).toBeInTheDocument();
+        });
+        it('renders a Skeleton for the date when created is not set', () => {
+            renderSidebar({ created: undefined });
+            expect(document.querySelector('.MuiSkeleton-root')).toBeInTheDocument();
+        });
+        it('renders no date Skeleton when created is set', () => {
+            // With a created date, the date text replaces the Skeleton and the title Skeleton
+            // disappears too (title defaults to "Test Case" via createMockCase).
+            // Provide escalation too so the escalation Skeleton is also replaced by a Chip.
+            renderSidebar({ created: '2024-06-01T00:00:00Z', escalation: 'open' });
+            // No Skeleton should appear when title, created, and escalation are all set
+            expect(document.querySelector('.MuiSkeleton-root')).not.toBeInTheDocument();
+        });
+        it('renders the escalation chip label when escalation is set', () => {
+            renderSidebar({ escalation: 'open' });
+            expect(screen.getByText('open')).toBeInTheDocument();
+        });
+        it('renders a Skeleton for escalation when escalation is not set', () => {
+            renderSidebar({ escalation: undefined });
+            expect(document.querySelector('.MuiSkeleton-root')).toBeInTheDocument();
+        });
+    });
 });

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

@@ -7,5 +7,12 @@ declare const CaseTask: FC<{
     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;
+    /** If provided, renders an origin chip linking the task back to its source case */
+    caseOrigin?: {
+        caseId: string;
+        caseName: string;
+    };
 }>;
 export default CaseTask;

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

@@ -5,7 +5,7 @@ import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const CaseTask = ({ task, onEdit, onDelete, paths, newTask = false }) => {
+const CaseTask = ({ task, onEdit, onDelete, paths, newTask = false, readOnly = false, caseOrigin }) => {
     const { t } = useTranslation();
     const [loading, setLoading] = useState(false);
     const [editing, setEditing] = useState(newTask);
@@ -22,14 +22,14 @@ const CaseTask = ({ task, onEdit, onDelete, paths, newTask = false }) => {
         }
     };
     useEffect(() => {
-        if (!editing && task?.assignment !== assignment) {
+        if (!readOnly && !editing && task?.assignment !== assignment) {
             setLoading(true);
             onEdit({ assignment }).finally(() => setLoading(false));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [assignment]);
     useEffect(() => {
-        if (!editing && task?.complete !== complete) {
+        if (!readOnly && !editing && task?.complete !== complete) {
             setLoading(true);
             onEdit({ complete }).finally(() => setLoading(false));
         }
@@ -44,17 +44,17 @@ const CaseTask = ({ task, onEdit, onDelete, paths, newTask = false }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [task]);
-    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, color: "success", checked: complete, size: "small", onChange: (_ev, _complete) => setComplete(_complete) }), editing ? (_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 && path && _jsx(Chip, { clickable: true, component: Link, to: path, label: path }), editing && (_jsx(Autocomplete, { disabled: loading, value: path, options: paths, onChange: (_ev, value) => setPath(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), _jsx(UserList, { disabled: loading, userIds: [assignment], onChange: ([_assigment]) => setAssignment(_assigment), i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 }), _jsx("div", { style: { flex: 1 } }), editing && !newTask && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: () => {
+    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 && path && _jsx(Chip, { clickable: true, component: Link, to: path, label: path }), editing && !readOnly && (_jsx(Autocomplete, { disabled: loading, value: path, options: paths, onChange: (_ev, value) => setPath(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 }), caseOrigin && (_jsx(Chip, { size: "small", component: Link, to: `/cases/${caseOrigin.caseId}`, clickable: true, label: caseOrigin.caseName, variant: "outlined", sx: { maxWidth: 140 } })), _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" }) }) })), _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 () => {
+                            }, 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" }) }) }) }), editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => {
+                                }, 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();
                                 }

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

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

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

@@ -0,0 +1,337 @@
+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 { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+/** Captures the UserList onChange so tests can simulate assignment changes. */
+const mockUserListOnChange = vi.hoisted(() => ({ fn: null }));
+/** Captures the path Autocomplete onChange so tests can simulate path selection. */
+const mockPathAutocompleteOnChange = vi.hoisted(() => ({ fn: null }));
+// ---------------------------------------------------------------------------
+// Module-level mocks
+// ---------------------------------------------------------------------------
+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) });
+    }
+}));
+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 }))
+    };
+});
+// Stub Autocomplete to avoid complex JSDOM interaction; exposes onChange directly.
+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 ?? '' });
+        }
+    };
+});
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import CaseTask from './CaseTask';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const mkTask = (overrides) => ({
+    id: 't1',
+    summary: 'Test task',
+    complete: false,
+    path: undefined,
+    assignment: undefined,
+    ...overrides
+});
+const renderTask = (task, opts = {}) => {
+    const mockOnEdit = vi.fn().mockResolvedValue(undefined);
+    const mockOnDelete = vi.fn().mockResolvedValue(undefined);
+    const { container } = render(_jsx(MemoryRouter, { children: _jsx(CaseTask, { task: task, paths: opts.paths ?? [], onEdit: mockOnEdit, onDelete: mockOnDelete, readOnly: opts.readOnly, newTask: opts.newTask, caseOrigin: opts.caseOrigin }) }));
+    return { container, mockOnEdit, mockOnDelete };
+};
+// Query helpers — MUI icons render SVGs with data-testid set by the icon name.
+// Use `?? null` so a missing element resolves to null rather than undefined;
+// jest-dom's toBeInTheDocument accepts null but not undefined.
+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);
+const getDeleteButton = (container) => (container.querySelector('[data-testid="DeleteIcon"]')?.closest('button') ?? null);
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockUserListOnChange.fn = null;
+    mockPathAutocompleteOnChange.fn = null;
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+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 an unchecked checkbox when task.complete is false', () => {
+            renderTask(mkTask({ complete: false }));
+            expect(screen.getByRole('checkbox')).not.toBeChecked();
+        });
+        it('shows a path chip linking to the path when task.path is set', () => {
+            renderTask(mkTask({ path: 'root/evidence' }));
+            const link = screen.getByText('root/evidence').closest('a');
+            expect(link).toHaveAttribute('href', 'root/evidence');
+        });
+        it('does not show a path chip when task.path is null', () => {
+            renderTask(mkTask({ path: undefined }));
+            // Path chip is the only Link rendered when no caseOrigin is provided
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+        });
+        it('shows the edit button in display mode', () => {
+            const { container } = renderTask(mkTask());
+            expect(getEditButton(container)).toBeInTheDocument();
+        });
+        it('does not show delete or cancel buttons in display mode', () => {
+            const { container } = renderTask(mkTask());
+            expect(getDeleteButton(container)).not.toBeInTheDocument();
+            expect(getCancelButton(container)).not.toBeInTheDocument();
+        });
+        it('does not show the save button in display mode', () => {
+            const { container } = renderTask(mkTask());
+            expect(getSaveButton(container)).not.toBeInTheDocument();
+        });
+        it('renders the UserList component', () => {
+            renderTask(mkTask());
+            expect(screen.getByTestId('user-list')).toBeInTheDocument();
+        });
+    });
+    // -------------------------------------------------------------------------
+    describe('origin chip', () => {
+        it('renders a chip linking to the source case when caseOrigin is provided', () => {
+            renderTask(mkTask(), { caseOrigin: { caseId: 'src-case', caseName: 'Source Case' } });
+            const chip = screen.getByText('Source Case').closest('a');
+            expect(chip).toHaveAttribute('href', '/cases/src-case');
+        });
+        it('does not render an origin chip when caseOrigin is not provided', () => {
+            renderTask(mkTask({ summary: 'No origin' }));
+            expect(screen.queryByRole('link')).not.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('shows a save (check) button after entering edit mode', () => {
+            const { container } = renderTask(mkTask());
+            fireEvent.click(getEditButton(container));
+            expect(getSaveButton(container)).toBeInTheDocument();
+        });
+        it('shows a cancel button in edit mode', () => {
+            const { container } = renderTask(mkTask());
+            fireEvent.click(getEditButton(container));
+            expect(getCancelButton(container)).toBeInTheDocument();
+        });
+        it('shows a delete button in edit mode for existing tasks', () => {
+            const { container } = renderTask(mkTask());
+            fireEvent.click(getEditButton(container));
+            expect(getDeleteButton(container)).toBeInTheDocument();
+        });
+        it('the save button is disabled when the summary is cleared', () => {
+            const { container } = renderTask(mkTask({ summary: 'Has text' }));
+            fireEvent.click(getEditButton(container));
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: '' } });
+            expect(getSaveButton(container)).toBeDisabled();
+        });
+        it('the save button is disabled when nothing has changed (not dirty)', () => {
+            const { container } = renderTask(mkTask({ summary: 'Unchanged' }));
+            fireEvent.click(getEditButton(container));
+            // No changes made — not dirty
+            expect(getSaveButton(container)).toBeDisabled();
+        });
+        it('enables the save button after the summary is changed', () => {
+            const { container } = renderTask(mkTask({ summary: 'Original' }));
+            fireEvent.click(getEditButton(container));
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Changed' } });
+            expect(getSaveButton(container)).not.toBeDisabled();
+        });
+        it('calls onEdit with the updated fields and exits edit mode on save', async () => {
+            const { container, mockOnEdit } = renderTask(mkTask({ summary: 'Original' }));
+            fireEvent.click(getEditButton(container));
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Updated summary' } });
+            await act(() => fireEvent.click(getSaveButton(container)));
+            expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ summary: 'Updated summary' }));
+            await waitFor(() => {
+                expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+            });
+        });
+        it('exits edit mode and shows the original summary on cancel', () => {
+            const { container } = renderTask(mkTask({ summary: 'Original' }));
+            fireEvent.click(getEditButton(container));
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Changed' } });
+            fireEvent.click(getCancelButton(container));
+            expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+            // task?.summary || summary — original task prop wins when not editing
+            expect(screen.getByText('Original')).toBeInTheDocument();
+        });
+        it('calls onDelete when the delete button is clicked', async () => {
+            const { container, mockOnDelete } = renderTask(mkTask());
+            fireEvent.click(getEditButton(container));
+            await act(() => fireEvent.click(getDeleteButton(container)));
+            expect(mockOnDelete).toHaveBeenCalled();
+        });
+        it('shows the path Autocomplete in edit mode', () => {
+            const { container } = renderTask(mkTask(), { paths: ['root/path'] });
+            fireEvent.click(getEditButton(container));
+            expect(screen.getByTestId('path-autocomplete')).toBeInTheDocument();
+        });
+        it('updates the Autocomplete value when a path is selected', () => {
+            const { container } = renderTask(mkTask(), { paths: ['root/path'] });
+            fireEvent.click(getEditButton(container));
+            act(() => {
+                mockPathAutocompleteOnChange.fn?.({}, 'root/path');
+            });
+            expect(screen.getByTestId('path-autocomplete')).toHaveAttribute('data-value', 'root/path');
+        });
+        it('includes the selected path in the onEdit payload on save', async () => {
+            const { container, mockOnEdit } = renderTask(mkTask({ summary: 'Task' }), {
+                paths: ['root/path']
+            });
+            fireEvent.click(getEditButton(container));
+            act(() => {
+                mockPathAutocompleteOnChange.fn?.({}, 'root/path');
+            });
+            await act(() => fireEvent.click(getSaveButton(container)));
+            expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ path: 'root/path' }));
+        });
+    });
+    // -------------------------------------------------------------------------
+    describe('new task mode', () => {
+        it('starts in edit mode (textbox visible immediately)', () => {
+            renderTask(undefined, { newTask: true });
+            expect(screen.getByRole('textbox')).toBeInTheDocument();
+        });
+        it('does not show a delete button for a new task', () => {
+            const { container } = renderTask(undefined, { newTask: true });
+            expect(getDeleteButton(container)).not.toBeInTheDocument();
+        });
+        it('calls onDelete (cancels) when cancel is clicked on a new task', async () => {
+            const { container, mockOnDelete } = renderTask(undefined, { newTask: true });
+            await act(() => fireEvent.click(getCancelButton(container)));
+            expect(mockOnDelete).toHaveBeenCalled();
+        });
+        it('calls onEdit with the entered summary when the new task is saved', async () => {
+            const { container, mockOnEdit } = renderTask(undefined, { newTask: true });
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Brand new task' } });
+            await act(() => fireEvent.click(getSaveButton(container)));
+            expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ summary: 'Brand new task' }));
+        });
+        it('disables the save button when summary is empty on a new task', () => {
+            const { container } = renderTask(undefined, { newTask: true });
+            expect(getSaveButton(container)).toBeDisabled();
+        });
+    });
+    // -------------------------------------------------------------------------
+    describe('auto-update effects', () => {
+        it('auto-calls onEdit when complete is toggled while not editing', async () => {
+            const { mockOnEdit } = renderTask(mkTask({ complete: false }));
+            await act(() => {
+                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 }));
+            act(() => {
+                mockUserListOnChange.fn?.(['user-42']);
+            });
+            await waitFor(() => {
+                expect(mockOnEdit).toHaveBeenCalledWith(expect.objectContaining({ assignment: 'user-42' }));
+            });
+        });
+        it('does not auto-call onEdit for complete changes when readOnly', async () => {
+            // The checkbox is disabled in readOnly — clicking it has no effect.
+            const { mockOnEdit } = renderTask(mkTask({ complete: false }), { readOnly: true });
+            fireEvent.click(screen.getByRole('checkbox'));
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockOnEdit).not.toHaveBeenCalled();
+        });
+        it('does not auto-call onEdit for assignment changes when readOnly', async () => {
+            // CaseTask guards setAssignment with !readOnly in the onChange inline function.
+            const { mockOnEdit } = renderTask(mkTask({ assignment: undefined }), { readOnly: true });
+            act(() => {
+                mockUserListOnChange.fn?.(['user-42']);
+            });
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockOnEdit).not.toHaveBeenCalled();
+        });
+        it('does not auto-call onEdit when complete is unchanged (initial render)', async () => {
+            const { mockOnEdit } = renderTask(mkTask({ complete: false }));
+            await new Promise(r => setTimeout(r, 0));
+            expect(mockOnEdit).not.toHaveBeenCalled();
+        });
+    });
+    // -------------------------------------------------------------------------
+    describe('read-only mode', () => {
+        it('hides the edit button', () => {
+            const { container } = renderTask(mkTask(), { readOnly: true });
+            expect(getEditButton(container)).not.toBeInTheDocument();
+        });
+        it('hides the delete button', () => {
+            const { container } = renderTask(mkTask(), { readOnly: true });
+            expect(getDeleteButton(container)).not.toBeInTheDocument();
+        });
+        it('hides the cancel button', () => {
+            const { container } = renderTask(mkTask(), { readOnly: true });
+            expect(getCancelButton(container)).not.toBeInTheDocument();
+        });
+        it('disables the checkbox', () => {
+            renderTask(mkTask(), { readOnly: true });
+            expect(screen.getByRole('checkbox')).toBeDisabled();
+        });
+        it('marks the UserList as disabled', () => {
+            renderTask(mkTask(), { readOnly: true });
+            expect(screen.getByTestId('user-list')).toHaveAttribute('data-disabled', 'true');
+        });
+        it('still renders the task summary text', () => {
+            renderTask(mkTask({ summary: 'Read-only task' }), { readOnly: true });
+            expect(screen.getByText('Read-only task')).toBeInTheDocument();
+        });
+        it('still renders the origin chip when caseOrigin is provided', () => {
+            renderTask(mkTask(), {
+                readOnly: true,
+                caseOrigin: { caseId: 'src', caseName: 'Src Case' }
+            });
+            expect(screen.getByText('Src Case')).toBeInTheDocument();
+        });
+    });
+    // -------------------------------------------------------------------------
+    describe('task prop sync effect', () => {
+        it('syncs local state when the task prop changes externally', () => {
+            const task = mkTask({ summary: 'Original' });
+            const { rerender } = render(_jsx(MemoryRouter, { children: _jsx(CaseTask, { task: task, paths: [], onEdit: vi.fn(), onDelete: vi.fn() }) }));
+            // Component shows original summary
+            expect(screen.getByText('Original')).toBeInTheDocument();
+            const updatedTask = mkTask({ summary: 'Updated externally' });
+            rerender(_jsx(MemoryRouter, { children: _jsx(CaseTask, { task: updatedTask, paths: [], onEdit: vi.fn(), onDelete: vi.fn() }) }));
+            // After rerender with new task prop, display should update
+            expect(screen.getByText('Updated externally')).toBeInTheDocument();
+        });
+    });
+});

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

@@ -1,12 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Add } from '@mui/icons-material';
-import { Divider, Skeleton, Stack, Typography } from '@mui/material';
-import { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Autocomplete, Chip, Divider, Skeleton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { isNil } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import CaseTask from './CaseTask';
+/** Maximum number of child cases auto-loaded for task aggregation. */
+const MAX_CHILD_CASES = 10;
 const TaskPanel = ({ case: _case, updateCase }) => {
     const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
     const [addingTask, setAddingTask] = useState(false);
+    const [childCases, setChildCases] = useState([]);
+    const [showChildTasks, setShowChildTasks] = useState(true);
+    const [selectedChildIds, setSelectedChildIds] = useState(null);
+    // Collect the IDs for all child case items (up to MAX_CHILD_CASES)
+    const childCaseItems = useMemo(() => (_case?.items ?? []).filter(item => item.type === 'case' && !!item.value).slice(0, MAX_CHILD_CASES), [_case?.items]);
+    // Fetch child case data whenever the parent case changes
+    useEffect(() => {
+        if (childCaseItems.length === 0) {
+            setChildCases([]);
+            setSelectedChildIds([]);
+            return;
+        }
+        let cancelled = false;
+        Promise.all(childCaseItems.map(async (item) => {
+            const c = await dispatchApi(api.v2.case.get(item.value), { throwError: false });
+            if (!c) {
+                return null;
+            }
+            return {
+                caseId: c.case_id,
+                caseName: c.title ?? c.case_id,
+                tasks: c.tasks ?? [],
+                paths: (c.items ?? []).map(i => i.path).filter(p => !isNil(p))
+            };
+        }))
+            .then(results => results.filter(r => !isNil(r)))
+            .then(results => {
+            if (!cancelled) {
+                setChildCases(results);
+                // Default: all child cases selected
+                if (selectedChildIds === null) {
+                    setSelectedChildIds(results.map(r => r.caseId));
+                }
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [childCaseItems, dispatchApi]);
+    // Child cases available as filter options
+    const childCaseOptions = useMemo(() => childCases.map(c => c.caseId), [childCases]);
+    // Child cases whose tasks are currently visible
+    const visibleChildCases = useMemo(() => (showChildTasks ? childCases.filter(c => (selectedChildIds ?? []).includes(c.caseId)) : []), [showChildTasks, childCases, selectedChildIds]);
     const onEdit = (task) => async (newTask) => {
         if (task) {
             await updateCase({
@@ -30,7 +81,11 @@ const TaskPanel = ({ case: _case, updateCase }) => {
     if (!_case) {
         return _jsx(Skeleton, { height: 240 });
     }
-    return (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.tasks') }), _jsx(Divider, {}), _case.tasks.map(task => (_jsx(CaseTask, { task: task, paths: _case.items.map(item => item.path), onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, paths: _case.items.map(item => item.path), onEdit: async (task) => {
+    const hasChildCases = childCases.length > 0;
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.tasks') }), hasChildCases && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { multiple: true, size: "small", disableCloseOnSelect: true, options: childCaseOptions, value: selectedChildIds ?? [], onChange: (_ev, val) => setSelectedChildIds(val), getOptionLabel: id => childCases.find(c => c.caseId === id)?.caseName ?? id, renderTags: (vals, getTagProps) => vals.map((id, index) => {
+                                    const { key, ...tagProps } = getTagProps({ index });
+                                    return (_jsx(Chip, { ...tagProps, size: "small", label: childCases.find(c => c.caseId === id)?.caseName ?? id }, key));
+                                }), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: selectedChildIds?.length === 0 ? t('page.cases.dashboard.tasks.filter_cases') : '', sx: { minWidth: 180 } })), sx: { minWidth: 180 } }), _jsx(Tooltip, { title: t(showChildTasks ? 'page.cases.dashboard.tasks.hide_child' : 'page.cases.dashboard.tasks.show_child'), children: _jsx(Chip, { size: "small", variant: showChildTasks ? 'filled' : 'outlined', label: t('page.cases.dashboard.tasks.child_cases'), icon: showChildTasks ? _jsx(ExpandLess, { fontSize: "small" }) : _jsx(ExpandMore, { fontSize: "small" }), onClick: () => setShowChildTasks(v => !v), clickable: true }) })] }))] }), _jsx(Divider, {}), _case.tasks.map(task => (_jsx(CaseTask, { task: task, paths: _case.items.map(item => item.path).filter(p => !isNil(p)), onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, paths: _case.items.map(item => item.path).filter(p => !isNil(p)), onEdit: async (task) => {
                     await onEdit()(task);
                     setAddingTask(false);
                 }, onDelete: async () => setAddingTask(false) })), _jsxs(Stack, { onClick: () => setAddingTask(true), direction: "row", spacing: 2, sx: theme => ({
@@ -47,6 +102,6 @@ const TaskPanel = ({ case: _case, updateCase }) => {
                         opacity: 1,
                         cursor: 'pointer'
                     }
-                }), children: [_jsx(Add, {}), _jsx(Typography, { children: t('page.cases.dashboard.tasks.add') })] })] }));
+                }), children: [_jsx(Add, {}), _jsx(Typography, { children: t('page.cases.dashboard.tasks.add') })] }), visibleChildCases.map(child => (_jsxs(Stack, { spacing: 1, children: [_jsx(Divider, { children: _jsx(Chip, { component: Link, to: `/cases/${child.caseId}`, clickable: true, size: "small", label: child.caseName, variant: "outlined" }) }), child.tasks.length === 0 ? (_jsx(Typography, { variant: "caption", color: "textSecondary", sx: { pl: 1 }, children: t('page.cases.dashboard.tasks.child.empty') })) : (child.tasks.map(task => (_jsx(CaseTask, { task: task, paths: child.paths, onEdit: async () => { }, readOnly: true, caseOrigin: { caseId: child.caseId, caseName: child.caseName } }, task.id))))] }, child.caseId)))] }));
 };
 export default TaskPanel;

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

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