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

package/components/routes/cases/Cases.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Topic } from '@mui/icons-material';
 import { Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -10,22 +10,23 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import dayjs from 'dayjs';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { DATE_RANGE_LUCENE, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import CaseCard from '../../elements/case/CaseCard';
 import CaseAssigneeFilter from './search/CaseAssigneeFilter';
 import CaseDateFilter, {} from './search/CaseDateFilter';
 import CaseStatusFilter from './search/CaseStatusFilter';
+const SearchResponseContext = createSearchResponseContext();
 const CasesBase = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const { response, request } = useContext(SearchResponseContext);
+    const { response, request } = useSearchResponseContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
-    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset') ?? '') || 0);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [statusFilter, setStatusFilter] = useState([]);
@@ -83,7 +84,7 @@ const CasesBase = () => {
     // Load the items into list when response changes.
     useEffect(() => {
         if (response) {
-            load(response.items.map((item) => ({
+            load(response.items.map(item => ({
                 id: item.case_id,
                 item,
                 selected: false,
@@ -108,7 +109,7 @@ const CasesBase = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -135,6 +136,6 @@ const CasesBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.cases.search.prompt') }), searchFilters: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { mt: 0.5, flexWrap: 'wrap' }, children: [_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: setStatusFilter }), _jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: setAssigneeFilter }), _jsx(CaseDateFilter, { dateRange: dateRange, onChange: setDateRange, customStart: customStart, customEnd: customEnd, onCustomStartChange: setCustomStart, onCustomEndChange: setCustomEnd })] }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/cases/${item.id}`), searchPrompt: "route.cases.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
 };
 const Cases = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "case_id", children: _jsx(CasesBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "case_id", children: _jsx(CasesBase, {}) }) }));
 };
 export default Cases;

package/components/routes/cases/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const ESCALATION_COLOR_MAP: {
-    normal: string;
-    focus: string;
-    crisis: string;
+    readonly normal: 'default';
+    readonly focus: 'warning';
+    readonly crisis: 'error';
 };
 export declare const CASE_STATUSES: readonly ['open', 'in-progress', 'on-hold', 'resolved'];

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

@@ -5,7 +5,7 @@ import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayo
 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 { buildPathFromID } from '../utils';
 const AlertPanel = ({ case: _case }) => {
     const theme = useTheme();

package/components/routes/cases/detail/AlertPanel.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';
 // ---------------------------------------------------------------------------
@@ -21,8 +21,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 makeHitItem = (value, id = value) => ({
     type: 'hit',
     value,
-    id,
-    name: null,
-    parent: null
+    id
 });
 // ---------------------------------------------------------------------------
 // Setup

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

@@ -7,8 +7,9 @@ import dayjs from 'dayjs';
 import { difference, get, isNil } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 import useCase from '../hooks/useCase';
 import CaseAggregate from './aggregates/CaseAggregate';
 import AlertPanel from './AlertPanel';
@@ -18,7 +19,7 @@ import TaskPanel from './TaskPanel';
 const AGGREGATE_FIELDS = [
     ['howler.outline.threat', 'material-symbols:warning-rounded', 'warning.main', 'page.cases.dashboard.threat'],
     ['howler.outline.target', 'material-symbols:group', 'primary.main', 'page.cases.dashboard.target'],
-    ['howler.outline.indicators', 'fluent:number-symbol-24-filled', null, 'page.cases.dashboard.indicators']
+    ['howler.outline.indicators', 'fluent:number-symbol-24-filled', 'inherit', 'page.cases.dashboard.indicators']
 ];
 const getDuration = (case_) => {
     if (case_?.start) {
@@ -38,7 +39,7 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const ids = useMemo(() => (_case?.items ?? [])
         .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
-        .filter(val => !!val), [_case?.items]);
+        .filter(notNil), [_case?.items]);
     const records = useContextSelector(RecordContext, ctx => ctx.records);
     const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,6 +55,9 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
             query: `howler.id:(${missingIds.join(' OR ')})`,
             metadata: ['template', 'analytic']
         })).then(response => {
+            if (!response) {
+                return;
+            }
             loadRecords(response.items);
             setInvalidIds(difference(missingIds, response.items.map(record => record.howler.id)));
         });
@@ -61,6 +65,6 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     if (!_case) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(CaseOverview, { case: _case, updateCase: updateCase }) }), AGGREGATE_FIELDS.map(([field, icon, iconColor, subtitle]) => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: icon, iconColor: iconColor && get(theme.palette, iconColor), field: field, records: Object.values(caseRecords), subtitle: t(subtitle) }) }, field))), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
+    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 2, children: [_jsx(Grid, { size: 12, children: _jsx(CaseOverview, { case: _case, updateCase: updateCase }) }), AGGREGATE_FIELDS.map(([field, icon, iconColor, subtitle]) => (_jsx(Grid, { size: { xs: 12, md: 6, xl: 3 }, children: _jsx(CaseAggregate, { icon: icon, iconColor: iconColor !== 'inherit' ? get(theme.palette, iconColor) : iconColor, field: field, records: Object.values(caseRecords), subtitle: t(subtitle) }) }, field))), _jsx(Grid, { size: { xs: 12, md: 6, xl: 3 }, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { size: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { size: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { size: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
 };
 export default CaseDashboard;

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

@@ -53,8 +53,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,
         useOutletContext: () => createMockCase({ case_id: 'route-case-id', items: [] })

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

@@ -21,6 +21,7 @@ const CaseDetails = ({ case: providedCase }) => {
     const { viewers } = useContext(SocketContext);
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);
+    const escalationOptions = config.lookups?.['case.escalation'] ?? [];
     const caseViewers = _case?.case_id ? (viewers[_case.case_id] ?? []) : [];
     const wrappedUpdate = async (subset) => {
         try {
@@ -50,6 +51,10 @@ const CaseDetails = ({ case: providedCase }) => {
                 p: 1
             }, children: _jsx(Skeleton, { variant: "rounded", height: 50 }) }));
     }
+    // SvgIcon doesn't support the 'default' color, so fall back to 'inherit' (its own default) to keep the same
+    // visual appearance the invalid value previously produced at runtime.
+    const escalationColor = ESCALATION_COLOR_MAP[_case.escalation];
+    const escalationIconColor = escalationColor === 'default' ? 'inherit' : escalationColor;
     return (_jsxs(Card, { elevation: 1, sx: {
             borderRadius: 0,
             width: '300px',
@@ -62,11 +67,11 @@ const CaseDetails = ({ case: providedCase }) => {
                                         'in-progress': _jsx(HourglassBottom, { color: "warning" }),
                                         'on-hold': _jsx(Pause, { color: "disabled" }),
                                         resolved: _jsx(Check, { color: "success" })
-                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => {
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.status, options: config.lookups?.['howler.status'] ?? [], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => {
                                     if (status) {
                                         handleStatus(status);
                                     }
-                                } }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(TrendingUp, { color: ESCALATION_COLOR_MAP[_case.escalation] }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.escalation') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.escalation ?? null, options: config.lookups['case.escalation'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, escalation) => {
+                                } }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(TrendingUp, { color: escalationIconColor }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.escalation') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.escalation ?? undefined, options: escalationOptions, renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, escalation) => {
                                     if (escalation) {
                                         void wrappedUpdate({ escalation });
                                     }

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

@@ -60,7 +60,7 @@ const mockConfig = {
     }
 };
 const mockViewers = {};
-const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(SocketContext.Provider, { value: {
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { loaded: true, config: mockConfig, setConfig: vi.fn() }, children: _jsx(SocketContext.Provider, { value: {
             emit: vi.fn(),
             open: true,
             fetchViewers: vi.fn(),

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

@@ -7,7 +7,8 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { toArray, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 import useCase from '../hooks/useCase';
 import ObservableTable from './observables/ObservableTable';
 import { OBSERVABLE_FIELDS, buildObservableEntries } from './utils';
@@ -28,7 +29,7 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
     const ids = useMemo(() => (_case?.items ?? [])
         .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
-        .filter(val => !!val), [_case?.items]);
+        .filter(notNil), [_case?.items]);
     useEffect(() => {
         if (ids.length < 1) {
             setRecords([]);
@@ -100,7 +101,7 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
     if (!_case) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(TextField, { size: "small", placeholder: t('page.cases.observables.search'), value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { maxWidth: 360 }, id: "observable-search" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeFilters.length > 0
+    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { size: 12, children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(TextField, { size: "small", placeholder: t('page.cases.observables.search'), value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { maxWidth: 360 }, id: "observable-search" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeFilters.length > 0
                                         ? `${t('page.cases.observables.filter_by_type')} (${toArray(activeFilters)
                                             .map(type => t(`page.cases.observables.type.${type}`))
                                             .sort()
@@ -122,6 +123,6 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
                                             size: 'small',
                                             color: activeEscalations.length > 0 ? 'primary' : 'default'
                                         }
-                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: escalationOptions.map(esc => (_jsx(Chip, { label: esc, size: "small", onClick: () => toggleSetItem(setActiveEscalations, esc), color: activeEscalations.includes(esc) ? 'primary' : 'default', variant: activeEscalations.includes(esc) ? 'filled' : 'outlined' }, esc))) }) }))] })] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, children: _jsx(Skeleton, { height: 40 }) }, `skeleton-${i}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (_jsx(Grid, { item: true, xs: 12, children: _jsx(ObservableTable, { observables: filteredObservables, case: _case }) }))] }));
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: escalationOptions.map(esc => (_jsx(Chip, { label: esc, size: "small", onClick: () => toggleSetItem(setActiveEscalations, esc), color: activeEscalations.includes(esc) ? 'primary' : 'default', variant: activeEscalations.includes(esc) ? 'filled' : 'outlined' }, esc))) }) }))] })] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { size: 12, children: _jsx(Skeleton, { height: 40 }) }, `skeleton-${i}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { size: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (_jsx(Grid, { size: 12, children: _jsx(ObservableTable, { observables: filteredObservables, case: _case }) }))] }));
 };
 export default memo(CaseObservables);

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } 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 { describe, expect, it, vi } from 'vitest';
 // ---------------------------------------------------------------------------
 // Component rendering tests

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

@@ -8,7 +8,7 @@ const CaseOverview = ({ case: _case, updateCase }) => {
     const theme = useTheme();
     const [editing, setEditing] = useState(false);
     const [loading, setLoading] = useState(false);
-    const [overview, setOverview] = useState(_case?.overview);
+    const [overview, setOverview] = useState(_case?.overview ?? '');
     useEffect(() => {
         if (!editing && _case?.overview) {
             setOverview(_case.overview);
@@ -21,7 +21,7 @@ const CaseOverview = ({ case: _case, updateCase }) => {
                                 '& > h1,h2,h3,h4,h5': {
                                     fontSize: theme.typography.h5.fontSize
                                 }
-                            }, children: editing ? (_jsx(MarkdownEditor, { height: "40vh", content: overview, setContent: _content => setOverview(_content) })) : (_jsx(Markdown, { md: _case.overview })) }), _jsxs(Stack, { spacing: 1, children: [_jsx(IconButton, { size: "small", disabled: loading, onClick: async () => {
+                            }, children: editing ? (_jsx(MarkdownEditor, { height: "40vh", content: overview, setContent: _content => setOverview(_content) })) : (_jsx(Markdown, { md: _case.overview ?? '' })) }), _jsxs(Stack, { spacing: 1, children: [_jsx(IconButton, { size: "small", disabled: loading, onClick: async () => {
                                         if (editing) {
                                             try {
                                                 setLoading(true);

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

@@ -7,7 +7,7 @@ import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/displa
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router';
 import useCase from '../hooks/useCase';
 import CreateRuleDialog from './CreateRuleDialog';
 const CaseRules = ({ case: providedCase, caseId }) => {
@@ -18,14 +18,16 @@ const CaseRules = ({ case: providedCase, caseId }) => {
     const { case: _case, update } = useCase({ case: providedCase ?? routeCase, caseId });
     const [dialogOpen, setDialogOpen] = useState(false);
     const handleCreateRule = useCallback(async (ruleData) => {
-        if (!_case) {
+        if (!_case?.case_id) {
             return;
         }
         const updatedCase = await dispatchApi(api.v2.case.rules.post(_case.case_id, ruleData));
-        void update(updatedCase, false);
+        if (updatedCase) {
+            void update(updatedCase, false);
+        }
     }, [_case, dispatchApi, update]);
     const handleDeleteRule = useCallback(async (ruleId) => {
-        if (!_case) {
+        if (!_case?.case_id) {
             return;
         }
         showModal(_jsx(ConfirmDeleteModal, { onConfirm: async () => {
@@ -36,11 +38,13 @@ const CaseRules = ({ case: providedCase, caseId }) => {
             } }), { height: 'auto' });
     }, [_case, dispatchApi, showModal, update]);
     const handleToggleEnabled = useCallback(async (ruleId, enabled) => {
-        if (!_case) {
+        if (!_case?.case_id) {
             return;
         }
         const updatedCase = await dispatchApi(api.v2.case.rules.put(_case.case_id, ruleId, { enabled }));
-        void update(updatedCase, false);
+        if (updatedCase) {
+            void update(updatedCase, false);
+        }
     }, [_case, dispatchApi, update]);
     if (!_case) {
         return null;

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

@@ -30,8 +30,8 @@ vi.mock('../hooks/useCase', () => ({
         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: () => mockCase.current,

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { PageCenter } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
@@ -12,17 +12,17 @@ import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayo
 import FuzzySearchBar from '@cccsaurora/howler-ui/components/elements/search/FuzzySearchBar';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { useOutletContext } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 const CaseSearch = () => {
     const parentCase = useOutletContext();
-    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes) ?? [];
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const [hitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, HitLayout.NORMAL);
     const [loading, setLoading] = useState(false);
-    const [response, setResponse] = useState(null);
+    const [response, setResponse] = useState();
     const [error, setError] = useState(null);
     const [offset, setOffset] = useState(0);
     const caseIds = useMemo(() => parentCase
@@ -51,7 +51,7 @@ const CaseSearch = () => {
         }
         catch (err) {
             setError(err.message || 'An error occurred while searching.');
-            setResponse(null);
+            setResponse(undefined);
         }
         finally {
             setLoading(false);

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

@@ -20,8 +20,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,
         // Provide a parent case via outlet context for CaseSearch

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

@@ -9,7 +9,7 @@ import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals
 import dayjs from 'dayjs';
 import { useCallback, useContext, useReducer, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { ESCALATION_COLOR_MAP } from '../constants';
 import CaseFolder from './sidebar/CaseFolder';
 import FolderEntry from './sidebar/FolderEntry';
@@ -63,9 +63,10 @@ const CaseSidebar = ({ case: _case, update }) => {
     ]);
     const handleDragEnd = useCallback(async (event) => {
         setActiveDragData(null);
-        if (!_case) {
+        if (!_case?.case_id) {
             return;
         }
+        const caseId = _case.case_id;
         const { active, over } = event;
         if (!over?.data.current || !active?.data.current) {
             return;
@@ -80,8 +81,10 @@ const CaseSidebar = ({ case: _case, update }) => {
         }
         try {
             setLoading(true);
-            const updatedCase = await dispatchApi(api.v2.case.items.put(_case.case_id, movingEntry.id, { parent: targetFolderId }));
-            update(updatedCase);
+            const updatedCase = await dispatchApi(api.v2.case.items.put(caseId, movingEntry.id, { parent: targetFolderId }));
+            if (updatedCase) {
+                update(updatedCase);
+            }
         }
         finally {
             setLoading(false);
@@ -93,7 +96,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.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case?.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case.case_id)), component: Link, to: `/cases/${_case.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
                                     if (_case) {
                                         showModal(_jsx(AddToCaseModal, { case: _case, onUpdated: update }), { maxHeight: '90vh', height: 'unset' });
                                     }
@@ -113,7 +116,9 @@ const CaseSidebar = ({ case: _case, update }) => {
                                                 name: t('page.cases.sidebar.new_folder'),
                                                 value: t('page.cases.sidebar.new_folder')
                                             }));
-                                            update(updatedCase);
+                                            if (updatedCase) {
+                                                update(updatedCase);
+                                            }
                                         }
                                         finally {
                                             setLoading(false);
@@ -142,6 +147,6 @@ const CaseSidebar = ({ case: _case, update }) => {
                                 }, children: _jsx(Refresh, { sx: { fontSize: '18px' } }) }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.collapse_all'), children: _jsx(IconButton, { size: "small", onClick: collapse, children: _jsx(UnfoldLess, { sx: { fontSize: '18px' } }) }) })] }) }), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
-                }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update, collapseKey: collapseKey }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && _jsx(FolderEntry, { caseId: null, indent: 0, label: activeDragData.label, entry: null }) })] })] }) }))] }));
+                }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update, collapseKey: collapseKey }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: _case.case_id, indent: 0, label: activeDragData.label, entry: undefined })) })] })] }) }))] }));
 };
 export default CaseSidebar;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -46,8 +46,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 })),
@@ -70,12 +70,11 @@ vi.mock('components/app/providers/ModalProvider', async () => {
     };
 });
 import CaseSidebar from './CaseSidebar';
-const hitItem = (value, id = value, parent = null) => ({
+const hitItem = (value, id = value, parent) => ({
     type: 'hit',
     value,
     id,
-    parent,
-    name: null
+    parent
 });
 const renderSidebar = (overrides, onUpdate = vi.fn()) => {
     const _case = createMockCase({ case_id: 'case-1', items: [], ...overrides });

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

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