@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

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

@@ -1,6 +1,6 @@
 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 { MemoryRouter } from 'react-router';
 import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -120,6 +120,13 @@ describe('CaseTask', () => {
             expect(screen.getByText('Hit One')).toBeInTheDocument();
         });
     });
+    describe('missing callbacks', () => {
+        it('does not expose editing controls without an edit callback', () => {
+            const { container } = render(_jsx(MemoryRouter, { children: _jsx(CaseTask, { case: testCase, task: mkTask() }) }));
+            expect(getEditButton(container)).not.toBeInTheDocument();
+            expect(screen.getByRole('checkbox')).toBeDisabled();
+        });
+    });
     describe('auto-update effects', () => {
         it('auto-calls onEdit when complete is toggled while not editing', async () => {
             const { mockOnEdit } = renderTask(mkTask({ complete: false }));

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

@@ -13,10 +13,10 @@ import dayjs from 'dayjs';
 import { capitalize } from 'lodash-es';
 import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useOutletContext } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import { getEscalationColor } from '@cccsaurora/howler-ui/utils/utils';
 import useCase from '../hooks/useCase';
 import { buildPathFromID } from '../utils';
 // builds the additional filters for the lucene query
@@ -49,10 +49,10 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
     const [selectedMitres, setSelectedMitres] = useState([]);
     const [selectedEscalations, setSelectedEscalations] = useState(['evidence']);
     const ids = useMemo(() => (_case?.items ?? [])
-        .filter(item => ['hit', 'event'].includes(item.type))
+        .filter(item => item.type && ['hit', 'event'].includes(item.type))
         .map(item => item.value)
-        .filter(Boolean), [_case]);
-    const getItemId = (value) => _case.items.find(item => item.value === value)?.id;
+        .filter((value) => !!value), [_case]);
+    const getItemId = (value) => _case.items?.find(item => item.value === value)?.id;
     useEffect(() => {
         if (ids.length < 1) {
             return;
@@ -67,12 +67,12 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
             setEscalationOptions(Object.keys(result['howler.escalation'] ?? {}));
             const tactics = Object.keys(result['threat.tactic.id'] ?? {}).map(tactic => ({
                 id: tactic,
-                name: config.lookups?.tactics?.[tactic].name ?? tactic,
+                name: config.lookups?.tactics?.[tactic]?.name ?? tactic,
                 kind: 'tactic'
             }));
             const techniques = Object.keys(result['threat.technique.id'] ?? {}).map(technique => ({
                 id: technique,
-                name: config.lookups?.techniques?.[technique].name ?? technique,
+                name: config.lookups?.techniques?.[technique]?.name ?? technique,
                 kind: 'technique'
             }));
             setMitreOptions([...tactics, ...techniques]);
@@ -102,7 +102,7 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
     if (!_case) {
         return null;
     }
-    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0, textDecoration: 'none', position: 'relative' }, children: [isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, getItemId(entry.howler.id))}`, sx: theme => ({
+    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: getEscalationColor(opt) }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : 'span', href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : 'span', href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0, textDecoration: 'none', position: 'relative' }, children: [isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${buildPathFromID(_case, getItemId(entry.howler.id) ?? entry.howler.id)}`, sx: theme => ({
                                                 position: 'absolute',
                                                 top: 0,
                                                 left: 0,

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { createElement } from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { buildFilters } from './CaseTimeline';
@@ -61,8 +61,8 @@ vi.mock('components/hooks/useMyApi', () => ({
 vi.mock('../hooks/useCase', () => ({
     default: ({ case: c }) => ({ case: c, update: vi.fn(), loading: false, missing: false })
 }));
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return { ...actual, useOutletContext: () => undefined };
 });
 // Stub card components — their internals are irrelevant to timeline tests
@@ -100,7 +100,7 @@ const mockCase = {
         { type: 'event', value: 'obs-1', path: 'events/obs-1' }
     ]
 };
-const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { loaded: false, config: mockConfig, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
 const mockConfigWithUrls = {
     lookups: {
         tactics: { TA0001: { key: 'TA0001', name: 'Initial Access', url: 'https://attack.mitre.org/tactics/TA0001' } },
@@ -109,7 +109,7 @@ const mockConfigWithUrls = {
         }
     }
 };
-const WrapperWithUrl = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfigWithUrls, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
+const WrapperWithUrl = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { loaded: false, config: mockConfigWithUrls, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
 const CaseTimeline = (await import('./CaseTimeline')).default;
 // Reusable mock response factories
 const mockFacetResponse = {
@@ -223,7 +223,7 @@ describe('CaseTimeline component', () => {
         expect(JSON.stringify(searchCallArg)).toContain('obs-1');
     });
     it('renders nothing when _case is not yet available', () => {
-        const emptyCaseWrapper = ({ children }) => createElement(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: null }, createElement(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: null }, createElement(MemoryRouter, null, children)));
+        const emptyCaseWrapper = ({ children }) => createElement(ApiConfigContext.Provider, { value: { loaded: true, config: mockConfig, setConfig: vi.fn() }, children: null }, createElement(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: null }, createElement(MemoryRouter, null, children)));
         const { container } = render(_jsx(CaseTimeline, {}), { wrapper: emptyCaseWrapper });
         expect(container.firstChild).toBeNull();
     });

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

@@ -44,7 +44,7 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
     const [expireAfterResolved, setExpireAfterResolved] = useState(false);
     const [loading, setLoading] = useState(false);
     const [searching, setSearching] = useState(false);
-    const [response, setResponse] = useState(null);
+    const [response, setResponse] = useState();
     const handleOpen = useCallback(() => {
         setQuery('');
         setDestination('');
@@ -52,7 +52,7 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
         setTimeframeDays(DEFAULT_TIMEFRAME_DAYS);
         setHasExpiry(true);
         setExpireAfterResolved(false);
-        setResponse(null);
+        setResponse(undefined);
     }, []);
     const handleSearch = useCallback(async () => {
         setSearching(true);
@@ -70,7 +70,7 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
     }, [dispatchApi, query]);
     const handleQueryChange = useCallback((q) => {
         setQuery(q);
-        setResponse(null);
+        setResponse(undefined);
     }, []);
     const handleSubmit = useCallback(async () => {
         if (!query.trim() || !destination.trim()) {
@@ -81,7 +81,7 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
             await onSubmit({
                 query: query.trim(),
                 destination: destination.trim(),
-                timeframe: hasExpiry ? timeframeDays : null,
+                timeframe: hasExpiry ? timeframeDays : undefined,
                 expire_after_resolved: hasExpiry ? expireAfterResolved : false,
                 indexes
             });

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

@@ -143,7 +143,7 @@ describe('CreateRuleDialog', () => {
             }));
         });
     });
-    it('omits timeframe when no expiry is checked', async () => {
+    it('sets timeframe to undefined when no expiry is checked', async () => {
         const user = userEvent.setup();
         const onSubmit = vi.fn().mockResolvedValue(undefined);
         mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
@@ -158,7 +158,7 @@ describe('CreateRuleDialog', () => {
             expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
                 query: 'event.kind:alert',
                 destination: 'alerts/incoming',
-                timeframe: null
+                timeframe: undefined
             }));
         });
     });

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

@@ -4,7 +4,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
 import InformationPane from '@cccsaurora/howler-ui/components/routes/hits/search/InformationPane';
 import { useEffect, useMemo, useState } from 'react';
-import { useOutletContext, useParams } from 'react-router-dom';
+import { useOutletContext, useParams } from 'react-router';
 import useCase from '../hooks/useCase';
 import { buildPathFromID } from '../utils';
 import CaseDashboard from './CaseDashboard';
@@ -36,8 +36,8 @@ const ItemPage = ({ case: providedCase }) => {
             let remainingPath = normalizedSubPath;
             while (currentCase && remainingPath) {
                 const currentRemainingPath = remainingPath;
-                const matchedNestedCase = currentCase.items
-                    .filter(Boolean)
+                const matchedNestedCase = currentCase
+                    .items.filter(Boolean)
                     .find(_item => _item.type === 'case' && currentRemainingPath.startsWith(`${_item.name}/`));
                 if (!matchedNestedCase) {
                     break;

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

@@ -32,7 +32,6 @@ describe('MarkdownPage', () => {
         vi.clearAllMocks();
         markdownItem = {
             id: 'item-1',
-            parent: null,
             type: 'markdown',
             name: 'Analyst Notes',
             value: 'Initial markdown value',
@@ -44,7 +43,6 @@ describe('MarkdownPage', () => {
                 markdownItem,
                 {
                     id: 'item-2',
-                    parent: null,
                     type: 'markdown',
                     name: 'Other Item',
                     value: 'Keep this value'
@@ -93,7 +91,6 @@ describe('MarkdownPage', () => {
             items: [
                 {
                     id: 'item-1',
-                    parent: null,
                     type: 'markdown',
                     name: 'Analyst Notes',
                     value: 'Persisted value',
@@ -101,7 +98,6 @@ describe('MarkdownPage', () => {
                 },
                 {
                     id: 'item-2',
-                    parent: null,
                     type: 'markdown',
                     name: 'Other Item',
                     value: 'Keep this value'

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

@@ -3,7 +3,7 @@ import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from
 import { chunk, uniq } from 'lodash-es';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import CaseCard from '../../../elements/case/CaseCard';
 const RelatedCasePanel = ({ case: _case }) => {
     const { t } = useTranslation();

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 // ---------------------------------------------------------------------------
@@ -15,8 +15,8 @@ vi.mock('react-i18next', () => ({
         t: (key) => key
     })
 }));
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
@@ -41,9 +41,7 @@ const renderPanel = (caseValue) => {
 const makeCaseItem = (value, id = value) => ({
     type: 'case',
     value,
-    id,
-    name: null,
-    parent: null
+    id
 });
 // ---------------------------------------------------------------------------
 // Setup

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

@@ -5,7 +5,7 @@ import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import CaseTask from './CaseTask';
 /** Maximum number of child cases auto-loaded for task aggregation. */
 const MAX_CHILD_CASES = 10;
@@ -27,7 +27,7 @@ const TaskPanel = ({ case: _case, updateCase }) => {
         }
         let cancelled = false;
         void dispatchApi(api.v2.search.post('case', { query: `case_id:(${childCaseItems.map(item => item.value).join(' OR ')})` }), { throwError: false })
-            .then(results => results.items)
+            .then(results => results?.items ?? [])
             .then(results => {
             if (!cancelled) {
                 setChildCases(results);
@@ -46,10 +46,10 @@ const TaskPanel = ({ case: _case, updateCase }) => {
     const childCaseOptions = useMemo(() => childCases.map(c => c.case_id), [childCases]);
     // Child cases whose tasks are currently visible
     const visibleChildCases = useMemo(() => (showChildTasks ? childCases.filter(c => (selectedChildIds ?? []).includes(c.case_id)) : []), [showChildTasks, childCases, selectedChildIds]);
-    const onEdit = (task) => async (newTask) => {
+    const onEdit = (task) => async (newTask = {}) => {
         if (task) {
             await updateCase({
-                tasks: _case.tasks.map(_task => {
+                tasks: (_case.tasks ?? []).map(_task => {
                     if (_task.id !== task.id) {
                         return _task;
                     }
@@ -62,7 +62,7 @@ const TaskPanel = ({ case: _case, updateCase }) => {
         }
         else {
             await updateCase({
-                tasks: [..._case.tasks, newTask]
+                tasks: [...(_case.tasks ?? []), newTask]
             });
         }
     };
@@ -73,8 +73,8 @@ const TaskPanel = ({ case: _case, updateCase }) => {
     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.case_id === id)?.title ?? id, renderTags: (vals, getTagProps) => vals.map((id, index) => {
                                     const { key, ...tagProps } = getTagProps({ index });
                                     return (_jsx(Chip, { ...tagProps, size: "small", label: childCases.find(c => c.case_id === id)?.title ?? 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, case: _case, onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, case: _case, onEdit: async (task) => {
-                    await onEdit()(task);
+                                }), 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, case: _case, onEdit: onEdit(task), onDelete: () => updateCase({ tasks: (_case.tasks ?? []).filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, case: _case, onEdit: async (task) => {
+                    await onEdit()(task ?? {});
                     setAddingTask(false);
                 }, onDelete: async () => setAddingTask(false) })), _jsxs(Stack, { onClick: () => setAddingTask(true), direction: "row", spacing: 2, sx: theme => ({
                     borderStyle: 'dashed',
@@ -90,6 +90,6 @@ const TaskPanel = ({ case: _case, updateCase }) => {
                         opacity: 1,
                         cursor: 'pointer'
                     }
-                }), 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.case_id}`, clickable: true, size: "small", label: child.title, 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, case: child, readOnly: true }, task.id)))] }, child.case_id)))] }));
+                }), 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.case_id}`, clickable: true, size: "small", label: child.title, 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, case: child, readOnly: true }, task.id)))] }, child.case_id)))] }));
 };
 export default TaskPanel;

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

@@ -1,6 +1,6 @@
 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 { MemoryRouter } from 'react-router';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 const mockDispatchApi = vi.hoisted(() => vi.fn());
@@ -19,8 +19,8 @@ vi.mock('api', () => ({
         }
     }
 }));
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))

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

@@ -19,6 +19,6 @@ const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) =>
             .flat()
             .filter(Boolean))
         : [];
-    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: uniq(values).map(value => (_jsx("span", { children: value }, value))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: uniq(values).map(value => (_jsx("span", { children: String(value) }, String(value)))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
 };
 export default memo(CaseAggregate);

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

@@ -12,15 +12,15 @@ const SourceAggregate = ({ case: providedCase }) => {
         if (!_case) {
             return [];
         }
-        const hitIds = _case.items
+        const hitIds = (_case.items ?? [])
             .filter(item => item.type === 'hit')
             .map(item => item.value)
-            .filter(value => !!value);
+            .filter((value) => !!value);
         return uniq(hitIds.map(id => records[id]?.howler?.analytic).filter(analytic => !!analytic));
     }, [_case, records]);
     if (!_case) {
         return _jsx(Skeleton, { height: 12, variant: "rounded" });
     }
-    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
+    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
 };
 export default SourceAggregate;

package/components/routes/cases/detail/observables/Observable.js

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

package/components/routes/cases/detail/observables/Observable.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it } from 'vitest';
 import Observable from './Observable';

package/components/routes/cases/detail/observables/ObservableTable.js

@@ -4,8 +4,8 @@ import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPo
 import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { Link } from 'react-router';
+import { getEscalationColor } from '@cccsaurora/howler-ui/utils/utils';
 const ROLE_COLORS = {
     threat: 'error',
     target: 'warning',
@@ -55,7 +55,7 @@ const ObservableTable = ({ observables, case: _case }) => {
                         const sources = observable.sources ?? [];
                         const escalations = [...new Set(sources.map(s => s.escalation).filter(Boolean))];
                         const linkedSources = sources.filter(source => source.path);
-                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }) }), _jsx(TableCell, { sx: { maxWidth: 300 }, children: _jsx(PluginTypography, { value: observable.value, context: "table", variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' } }) }), _jsx(TableCell, { children: observable.role && (_jsx(Chip, { size: "small", label: t(`page.cases.observables.role.${observable.role}`), color: ROLE_COLORS[observable.role], variant: "outlined" })) }), _jsx(TableCell, { align: "right", children: _jsx(Typography, { variant: "body2", children: sources.length }) }), _jsx(TableCell, { children: linkedSources.length === 0 ? null : linkedSources.length === 1 ? (_jsx(Chip, { clickable: true, size: "small", label: linkedSources[0].label ?? linkedSources[0].path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${linkedSources[0].path}` })) : (_jsx(ChipPopper, { label: `${linkedSources[0].label ?? linkedSources[0].path} (+${linkedSources.length - 1})`, slotProps: { chip: { size: 'small', variant: 'outlined' } }, children: _jsx(Stack, { gap: 0.5, children: linkedSources.map(source => (_jsx(Chip, { clickable: true, size: "small", label: source.label ?? source.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id))) }) })) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: escalations.map(esc => (_jsx(Chip, { size: "small", label: esc, color: ESCALATION_COLORS[esc] ?? 'default' }, esc))) }) })] }, `${observable.type}:${observable.value}`));
+                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }) }), _jsx(TableCell, { sx: { maxWidth: 300 }, children: _jsx(PluginTypography, { value: observable.value, context: "table", variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' } }) }), _jsx(TableCell, { children: observable.role && (_jsx(Chip, { size: "small", label: t(`page.cases.observables.role.${observable.role}`), color: ROLE_COLORS[observable.role], variant: "outlined" })) }), _jsx(TableCell, { align: "right", children: _jsx(Typography, { variant: "body2", children: sources.length }) }), _jsx(TableCell, { children: linkedSources.length === 0 ? null : linkedSources.length === 1 ? (_jsx(Chip, { clickable: true, size: "small", label: linkedSources[0].label ?? linkedSources[0].path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${linkedSources[0].path}` })) : (_jsx(ChipPopper, { label: `${linkedSources[0].label ?? linkedSources[0].path} (+${linkedSources.length - 1})`, slotProps: { chip: { size: 'small', variant: 'outlined' } }, children: _jsx(Stack, { gap: 0.5, children: linkedSources.map(source => (_jsx(Chip, { clickable: true, size: "small", label: source.label ?? source.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id))) }) })) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: escalations.map(esc => (_jsx(Chip, { size: "small", label: esc, color: getEscalationColor(esc) }, esc))) }) })] }, `${observable.type}:${observable.value}`));
                     }) })] }) }));
 };
 export default memo(ObservableTable);

package/components/routes/cases/detail/observables/ObservableTable.test.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it, vi } from 'vitest';
 import ObservableTable from './ObservableTable';

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

@@ -4,9 +4,9 @@ import api from '@cccsaurora/howler-ui/api';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { getEscalationColor, notNil } from '@cccsaurora/howler-ui/utils/utils';
 import { buildPathFromID } from '../../utils';
 import CaseFolderContextMenu from './CaseFolderContextMenu';
 import FolderEntry from './FolderEntry';
@@ -32,37 +32,41 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, parentCaseNames = []
     const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
     const rootCaseId = params.id;
     // Returns the MUI colour token for the item's escalation, or undefined if none.
-    const getEscalationColor = (itemType, leaf) => {
+    const getItemEscalationColor = (itemType, leaf) => {
         if (itemType === 'hit' && leaf.value) {
-            const color = ESCALATION_COLORS[records[leaf.value]?.howler?.escalation];
-            if (color)
+            const color = getEscalationColor(records[leaf.value]?.howler?.escalation, 'inherit');
+            if (color) {
                 return color;
+            }
         }
         if (itemType === 'case' && leaf.value) {
-            const color = ESCALATION_COLORS[caseStates[leaf.value]?.data?.escalation];
-            if (color)
+            const color = getEscalationColor(caseStates[leaf.value]?.data?.escalation, 'inherit');
+            if (color) {
                 return color;
+            }
         }
-        return null;
+        return 'inherit';
     };
     const toggleCase = useCallback((item) => {
         const prev = caseStates[item.value] ?? { open: false, loading: false, data: null };
         const shouldOpen = !prev.open;
         const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
         setCaseStates(current => ({ ...current, [item.value]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
-        if (!shouldFetch)
+        if (!shouldFetch) {
             return;
+        }
         void dispatchApi(api.v2.case.get(item.value), { throwError: false })
             .then(caseResponse => {
-            if (!caseResponse)
+            if (!caseResponse) {
                 return;
+            }
             setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], data: caseResponse } }));
         })
             .finally(() => {
             setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], loading: false } }));
         });
     }, [caseStates, dispatchApi]);
-    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { case: _case, item: folder.item, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && folder?.item && (_jsx(CaseFolderContextMenu, { case: _case, item: folder.item, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
                         transition: theme.transitions.create('background', { duration: 100 }),
                         background: 'transparent',
                         '&:hover': { background: theme.palette.grey[800] }
@@ -76,30 +80,30 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, parentCaseNames = []
                         const nestedCase = nodeState?.data ?? null;
                         const fullItemPath = [...parentCaseNames, leaf.name].filter(Boolean).join('/');
                         const itemTo = `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}`;
-                        const escalationColor = getEscalationColor(itemType, leaf);
-                        const iconColor = escalationColor ?? 'inherit';
-                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        const escalationColor = getItemEscalationColor(itemType, leaf);
+                        const leafColor = escalationColor !== 'inherit' ? `${escalationColor}.light` : 'text.secondary';
                         return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
                                             transition: theme.transitions.create('background', { duration: 100 }),
                                             background: 'transparent',
                                             '&:hover': { background: theme.palette.grey[800] }
-                                        }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, chevronOpen: isCaseOpen, to: itemTo, onClick: () => toggleCase(leaf), entry: leaf }) }), isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, parentCaseNames: [...parentCaseNames, leaf.name].filter(Boolean), onItemUpdated: onItemUpdated, collapseKey: collapseKey }))] }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                                        }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: escalationColor, labelColor: leafColor, chevronOpen: isCaseOpen, to: itemTo, onClick: () => toggleCase(leaf), entry: leaf }) }), isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, parentCaseNames: [...parentCaseNames, leaf.name].filter(notNil), onItemUpdated: onItemUpdated, collapseKey: collapseKey }))] }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
                     }), Object.entries(tree.folders ?? {}).map(([folderName, subfolder]) => {
-                        return (_jsx(CaseFolder, { name: folderName, case: _case, folder: subfolder, step: step + 1, parentCaseNames: parentCaseNames, onItemUpdated: onItemUpdated, collapseKey: collapseKey }, subfolder.item.id));
+                        return (_jsx(CaseFolder, { name: folderName, case: _case, folder: subfolder, step: step + 1, parentCaseNames: parentCaseNames, onItemUpdated: onItemUpdated, collapseKey: collapseKey }, subfolder.item?.id ?? folderName));
                     }), tree.leaves
                         ?.filter(leaf => leaf.type?.toLowerCase() !== 'case')
                         .map(leaf => {
                         const itemType = leaf.type?.toLowerCase();
                         const fullItemPath = [...parentCaseNames, buildPathFromID(_case, leaf.id)].filter(Boolean).join('/');
-                        const itemTo = itemType !== 'reference' ? `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}` : leaf.value;
-                        const escalationColor = getEscalationColor(itemType, leaf);
-                        const iconColor = escalationColor ?? 'inherit';
+                        const itemTo = itemType !== 'reference'
+                            ? `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}`
+                            : (leaf.value ?? '');
+                        const escalationColor = getItemEscalationColor(itemType, leaf);
                         const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
                         return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
                                     transition: theme.transitions.create('background', { duration: 100 }),
                                     background: 'transparent',
                                     '&:hover': { background: theme.palette.grey[800] }
-                                }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, to: itemTo, entry: leaf }) }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                                }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: escalationColor, labelColor: leafColor, to: itemTo, entry: leaf }) }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
                     })] }))] }));
 };
 export default CaseFolder;

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

@@ -37,7 +37,7 @@ const mockRecords = vi.hoisted(() => ({ current: {} }));
 vi.mock('components/app/providers/RecordProvider', async () => ({
     RecordContext: createContext({ records: mockRecords.current })
 }));
-import { MemoryRouter, useParams } from 'react-router-dom';
+import { MemoryRouter, useParams } from 'react-router';
 import CaseFolder from './CaseFolder';
 const makeCase = (id, items = []) => ({
     __index: 'case',

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

@@ -81,8 +81,10 @@ const CaseFolderContextMenu = ({ case: _case, item, onUpdate, children }) => {
             id: 'remove-item',
             label: isFolder ? t('page.cases.sidebar.folder.remove') : t('page.cases.sidebar.item.remove'),
             icon: _jsx(Delete, { fontSize: "small" }),
-            onClick: () => {
-                if (!_case.case_id) {
+            onClick: async () => {
+                const caseId = _case.case_id;
+                const itemId = item.id;
+                if (!caseId || !itemId) {
                     return;
                 }
                 void dispatchApi(api.v2.case.items.del(_case.case_id, [item.id], isFolder), { throwError: false }).then(updatedCase => {