@cccsaurora/howler-ui 2.18.0-dev.686 → 2.18.0-dev.695

package/api/v2/case/index.d.ts

@@ -1,6 +1,8 @@
+import * as items from '@cccsaurora/howler-ui/api/v2/case/items';
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 export declare const uri: (id?: string) => string;
 export declare const get: (id: string) => Promise<Case>;
 export declare const post: (newData: Partial<Case>) => Promise<Case>;
 export declare const put: (id: string, _case: Partial<Case>) => Promise<Case>;
 export declare const del: (id: string) => Promise<void>;
+export { items };

package/api/v2/case/index.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-cycle
 import { hdelete, hget, hpost, hput, joinAllUri, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+import * as items from '@cccsaurora/howler-ui/api/v2/case/items';
 export const uri = (id) => {
     return id ? joinAllUri(parentUri(), 'case', id) : joinUri(parentUri(), 'case');
 };
@@ -16,3 +17,4 @@ export const put = (id, _case) => {
 export const del = (id) => {
     return hdelete(uri(id));
 };
+export { items };

package/api/v2/case/items.d.ts

@@ -0,0 +1,5 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+export declare const uri: (id: string) => string;
+export declare const post: (id: string, newData: Item) => Promise<Case>;
+export declare const del: (id: string, values: string | string[]) => Promise<Case>;

package/api/v2/case/items.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-cycle
+import { hdelete, hpost, joinUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2/case';
+export const uri = (id) => {
+    return joinUri(parentUri(id), 'items');
+};
+export const post = (id, newData) => {
+    return hpost(uri(id), newData);
+};
+export const del = (id, values) => {
+    if (!Array.isArray(values)) {
+        values = [values];
+    }
+    return hdelete(uri(id), { values });
+};

package/components/elements/case/CaseCard.d.ts

@@ -1,8 +1,12 @@
+import { type CardProps } from '@mui/material';
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import { type FC } from 'react';
 declare const CaseCard: FC<{
     case?: Case;
     caseId?: string;
     className?: string;
+    slotProps?: {
+        card?: CardProps;
+    };
 }>;
 export default CaseCard;

package/components/elements/case/CaseCard.js

@@ -14,7 +14,7 @@ import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
 const STATUS_COLORS = {
     resolved: 'success'
 };
-const CaseCard = ({ case: providedCase, caseId, className }) => {
+const CaseCard = ({ case: providedCase, caseId, className, slotProps }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
@@ -32,7 +32,10 @@ const CaseCard = ({ case: providedCase, caseId, className }) => {
     if (!_case) {
         return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
     }
-    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main }, className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", children: _case.title }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 1, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
+    return (_jsx(Card, { variant: "outlined", ...slotProps?.card, sx: [
+            { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main },
+            ...(Array.isArray(slotProps?.card?.sx) ? slotProps.card.sx : slotProps?.card?.sx ? [slotProps.card.sx] : [])
+        ], className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", children: _case.title }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 1, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
                                         .filter(task => !task.complete)
                                         .map(task => (_jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: task.summary }, task.id)))] })] }))] }) }) }, _case.case_id));
 };

package/components/elements/record/RecordContextMenu.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AddCircleOutline, Assignment, Edit, HowToVote, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
 import api from '@cccsaurora/howler-ui/api';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
@@ -10,6 +11,7 @@ import { TOP_ROW, VOTE_OPTIONS } from '@cccsaurora/howler-ui/components/elements
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
+import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
 import { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -41,6 +43,7 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
     const { dispatchApi } = useMyApi();
     const { executeAction } = useMyActionFunctions();
     const { config } = useContext(ApiConfigContext);
+    const { showModal } = useContext(ModalContext);
     const pluginStore = usePluginStore();
     const { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
     const query = useContextSelector(ParameterContext, ctx => ctx?.query);
@@ -227,9 +230,18 @@ const RecordContextMenu = ({ children, getSelectedId, Component }) => {
                 });
             }
         }
+        result.push({ kind: 'divider', id: 'add-to-case-divider' });
+        result.push({
+            kind: 'item',
+            id: 'add-to-case',
+            icon: _jsx(CreateNewFolder, {}),
+            label: t('modal.cases.add_to_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(AddToCaseModal, { records: records }))
+        });
         return result;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction]);
+    }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction, showModal, records]);
     return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(null), items: items, children: children }));
 };
 export default RecordContextMenu;

package/components/elements/record/RecordContextMenu.test.js

@@ -47,6 +47,7 @@ vi.mock('components/app/hooks/useMatchers', () => ({
         getMatchingTemplate: mockGetMatchingTemplate
     }))
 }));
+const mockShowModal = vi.fn();
 const mockDispatchApi = vi.fn();
 vi.mock('components/hooks/useMyApi', () => ({
     default: vi.fn(() => ({
@@ -72,6 +73,9 @@ vi.mock('plugins/store', () => ({
         plugins: ['plugin1']
     }
 }));
+vi.mock('components/routes/cases/modals/AddToCaseModal', () => ({
+    default: () => null
+}));
 // Mock MUI components
 vi.mock('@mui/material', async () => {
     const actual = await vi.importActual('@mui/material');
@@ -91,6 +95,7 @@ vi.mock('@mui/material', async () => {
 });
 // Import component after mocks
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
@@ -114,7 +119,7 @@ const mockRecordContext = {
 const mockParameterContext = { query: DEFAULT_QUERY, setQuery: vi.fn() };
 // Test wrapper
 const Wrapper = ({ children }) => {
-    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ApiConfigContext.Provider, { value: mockApiContext, children: _jsx(RecordContext.Provider, { value: mockRecordContext, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }) }));
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ApiConfigContext.Provider, { value: mockApiContext, children: _jsx(ModalContext.Provider, { value: { showModal: mockShowModal }, children: _jsx(RecordContext.Provider, { value: mockRecordContext, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }) }) }));
 };
 describe('HitContextMenu', () => {
     let user;
@@ -893,4 +898,54 @@ describe('HitContextMenu', () => {
             expect(mockPluginStoreExecuteFunction).toHaveBeenCalled();
         });
     });
+    describe('Add to Case Menu Item', () => {
+        it('should render "Add to Case" item in the menu', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Add to Case')).toBeInTheDocument();
+            });
+        });
+        it('should enable "Add to Case" when a record is present', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const menuItems = screen.getAllByRole('menuitem');
+                const addToCaseItem = menuItems.find(item => item.textContent?.includes('Add to Case'));
+                expect(addToCaseItem).toHaveAttribute('aria-disabled', 'false');
+            });
+        });
+        it('should disable "Add to Case" when record is null', async () => {
+            act(() => {
+                mockRecordContext.records['test-hit-1'] = null;
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                const menuItems = screen.getAllByRole('menuitem');
+                const addToCaseItem = menuItems.find(item => item.textContent?.includes('Add to Case'));
+                expect(addToCaseItem).toHaveAttribute('aria-disabled', 'true');
+            });
+        });
+        it('should call showModal with an AddToCaseModal element when clicked', async () => {
+            act(() => {
+                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+                fireEvent.contextMenu(contextMenuWrapper);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Add to Case')).toBeInTheDocument();
+            });
+            await act(async () => {
+                await user.click(screen.getByText('Add to Case'));
+            });
+            await waitFor(() => {
+                expect(mockShowModal).toHaveBeenCalledOnce();
+                expect(mockShowModal).toHaveBeenCalledWith(expect.objectContaining({ type: expect.any(Function) }));
+            });
+        });
+    });
 });

package/components/routes/cases/CaseViewer.js

@@ -9,11 +9,11 @@ import CaseSidebar from './detail/CaseSidebar';
 import useCase from './hooks/useCase';
 const CaseViewer = () => {
     const params = useParams();
-    const { case: _case, missing } = useCase({ caseId: params.id });
+    const { case: _case, missing, update } = useCase({ caseId: params.id });
     if (missing) {
         return _jsx(NotFoundPage, {});
     }
-    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsx(Box, { sx: {
+    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
                     maxHeight: 'calc(100vh - 64px)',
                     flex: 1,
                     overflow: 'auto'

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

@@ -15,7 +15,7 @@ const AlertPanel = ({ case: _case }) => {
         return _jsx(Skeleton, { height: 240 });
     }
     return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.alerts') }), _jsx(Pagination, { count: alertPages.length, page: alertPage, onChange: (_, page) => setAlertPage(page) })] }), _jsx(Divider, {}), alertPages?.length > 0 &&
-                alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.id }), _jsx(Box, { component: Link, to: item.path, sx: {
+                alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.value }), _jsx(Box, { component: Link, to: item.path, sx: {
                                 position: 'absolute',
                                 top: 0,
                                 left: 0,
@@ -28,6 +28,6 @@ const AlertPanel = ({ case: _case }) => {
                                     background: theme.palette.divider,
                                     border: `thin solid ${theme.palette.primary.light}`
                                 }
-                            } })] }, item.id)))] }));
+                            } })] }, item.path)))] }));
 };
 export default AlertPanel;

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

@@ -59,7 +59,10 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
     const { case: _case } = useCase({ case: providedCase ?? routeCase, caseId });
     const [records, setRecords] = useState(null);
     const [activeFilters, setActiveFilters] = useState(new Set());
-    const ids = useMemo(() => (_case?.items ?? []).filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), [_case?.items]);
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'observable'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
     useEffect(() => {
         if (ids.length < 1) {
             setRecords([]);
@@ -96,6 +99,6 @@ const CaseAssets = ({ 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, { direction: "row", alignItems: "center", spacing: 1, flexWrap: "wrap", children: [_jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t('page.cases.assets.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (assetTypes.map(type => (_jsx(Chip, { label: t(`page.cases.assets.type.${type}`), size: "small", onClick: () => toggleFilter(type), color: activeFilters.has(type) ? 'primary' : 'default', variant: activeFilters.has(type) ? 'filled' : 'outlined' }, type))))] }) }), filteredAssets === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: _jsx(Skeleton, { height: 100 }) }, `skeleton-${i}`)))) : filteredAssets.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.assets.empty') }) })) : (filteredAssets.map(asset => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Asset, { asset: asset, case: _case }) }, `${asset.type}:${asset.value}`))))] }));
+    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flexWrap: "wrap", children: [_jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t('page.cases.assets.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (assetTypes.map(type => (_jsx(Chip, { label: t(`page.cases.assets.type.${type}`), size: "small", onClick: () => toggleFilter(type), color: activeFilters.has(type) ? 'primary' : 'default', variant: activeFilters.has(type) ? 'filled' : 'outlined' }, type))))] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: _jsx(Skeleton, { height: 100 }) }, `skeleton-${i}`)))) : filteredAssets.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.assets.empty') }) })) : (filteredAssets.map(asset => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Asset, { asset: asset, case: _case }) }, `${asset.type}:${asset.value}`))))] }));
 };
 export default CaseAssets;

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

@@ -4,44 +4,48 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it, vi } from 'vitest';
 import { buildAssetEntries } from './CaseAssets';
 // ---------------------------------------------------------------------------
 // Pure logic tests — no React needed
 // ---------------------------------------------------------------------------
-const makeHit = (id, related) => ({
-    howler: { id },
-    related
-});
-const makeObservable = (id, related) => ({
-    howler: { id },
-    related
-});
 describe('buildAssetEntries', () => {
     it('returns an empty array for records with no related field', () => {
-        expect(buildAssetEntries([makeHit('h1', undefined)])).toEqual([]);
+        expect(buildAssetEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
     });
     it('extracts a single IP from a hit', () => {
-        const result = buildAssetEntries([makeHit('h1', { ip: ['1.2.3.4'] })]);
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
         expect(result).toHaveLength(1);
         expect(result[0]).toEqual({ type: 'ip', value: '1.2.3.4', seenIn: ['h1'] });
     });
     it('extracts multiple fields from a single record', () => {
-        const result = buildAssetEntries([makeHit('h1', { ip: ['1.2.3.4'], user: ['alice'] })]);
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } })
+        ]);
         const types = result.map(a => a.type).sort();
         expect(types).toEqual(['ip', 'user']);
     });
     it('deduplicates the same asset value across multiple records', () => {
-        const result = buildAssetEntries([makeHit('h1', { ip: ['1.2.3.4'] }), makeObservable('obs1', { ip: ['1.2.3.4'] })]);
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockObservable({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
         expect(result).toHaveLength(1);
         expect(result[0].seenIn).toEqual(['h1', 'obs1']);
     });
     it('keeps distinct asset values as separate entries', () => {
-        const result = buildAssetEntries([makeHit('h1', { ip: ['1.2.3.4'] }), makeHit('h2', { ip: ['5.6.7.8'] })]);
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h2' }, related: { ip: ['5.6.7.8'] } })
+        ]);
         expect(result).toHaveLength(2);
     });
     it('does not duplicate seenIn ids when the same record appears twice for the same asset', () => {
-        const result = buildAssetEntries([makeHit('h1', { ip: ['1.2.3.4'] }), makeHit('h1', { ip: ['1.2.3.4'] })]);
+        const result = buildAssetEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
         expect(result[0].seenIn).toEqual(['h1']);
     });
     it('skips records with no howler.id', () => {
@@ -49,7 +53,7 @@ describe('buildAssetEntries', () => {
         expect(buildAssetEntries([noId])).toEqual([]);
     });
     it('handles the scalar `id` field on Related', () => {
-        const result = buildAssetEntries([makeHit('h1', { id: 'some-id' })]);
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
         expect(result).toHaveLength(1);
         expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
     });
@@ -62,7 +66,7 @@ describe('buildAssetEntries', () => {
             uri: ['https://example.com'],
             signature: ['rule-X']
         };
-        const result = buildAssetEntries([makeHit('h1', related)]);
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related })]);
         const types = result.map(a => a.type).sort();
         expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
     });
@@ -80,8 +84,8 @@ vi.mock('../hooks/useCase', () => ({
 const mockCase = {
     case_id: 'case-001',
     items: [
-        { id: 'hit-1', type: 'hit', path: 'hit-1' },
-        { id: 'obs-1', type: 'observable', path: 'obs-1' }
+        { type: 'hit', value: 'hit-1' },
+        { type: 'observable', value: 'obs-1' }
     ]
 };
 const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);

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

@@ -31,9 +31,12 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
     const routeCase = useOutletContext();
-    const { case: _case, updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
+    const { case: _case, update: updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
     const [records, setRecords] = useState(null);
-    const ids = useMemo(() => (_case?.items ?? []).filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), [_case?.items]);
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'observable'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
     useEffect(() => {
         if (ids?.length < 1) {
             return;

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

@@ -12,7 +12,7 @@ import ResolveModal from '../modals/ResolveModal';
 import SourceAggregate from './aggregates/SourceAggregate';
 const CaseDetails = ({ case: providedCase }) => {
     const { t } = useTranslation();
-    const { case: _case, updateCase } = useCase({ case: providedCase });
+    const { case: _case, update: updateCase } = useCase({ case: providedCase });
     const { showModal } = useContext(ModalContext);
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);

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

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

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { ESCALATION_COLOR_MAP } from '../constants';
 import CaseFolder from './sidebar/CaseFolder';
-const CaseSidebar = ({ case: _case }) => {
+const CaseSidebar = ({ case: _case, update }) => {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
@@ -56,6 +56,6 @@ const CaseSidebar = ({ case: _case }) => {
                 ], component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
-                }, children: _jsx(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: _jsx(CaseFolder, { case: _case }) }) }))] }));
+                }, children: _jsx(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: _jsx(CaseFolder, { case: _case, onItemRemoved: update }) }) }))] }));
 };
 export default CaseSidebar;

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

@@ -50,14 +50,14 @@ const ItemPage = ({ case: providedCase }) => {
                     }
                     return;
                 }
-                if (!matchedNestedCase.id) {
+                if (!matchedNestedCase.value) {
                     if (!cancelled) {
                         setItem(null);
                         setLoading(false);
                     }
                     return;
                 }
-                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.id), { throwError: false });
+                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.value), { throwError: false });
                 if (!nextCase) {
                     if (!cancelled) {
                         setItem(null);
@@ -86,13 +86,13 @@ const ItemPage = ({ case: providedCase }) => {
         return _jsx(NotFoundPage, {});
     }
     if (item.type === 'hit') {
-        return _jsx(InformationPane, { selected: item.id });
+        return _jsx(InformationPane, { selected: item.value });
     }
     if (item.type === 'observable') {
-        return _jsx(ObservableViewer, { observableId: item.id });
+        return _jsx(ObservableViewer, { observableId: item.value });
     }
     if (item.type === 'case') {
-        return _jsx(CaseDashboard, { caseId: item.id });
+        return _jsx(CaseDashboard, { caseId: item.value });
     }
     return _jsx("h1", { children: JSON.stringify(item) });
 };

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

@@ -13,7 +13,7 @@ const RelatedCasePanel = ({ case: _case }) => {
     if (!_case) {
         return _jsx(Skeleton, { height: 240 });
     }
-    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.cases') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.id }), _jsx(Box, { component: Link, to: item.path, sx: {
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.cases') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.value }), _jsx(Box, { component: Link, to: item.path, sx: {
                             position: 'absolute',
                             top: 0,
                             left: 0,
@@ -26,6 +26,6 @@ const RelatedCasePanel = ({ case: _case }) => {
                                 background: theme.palette.divider,
                                 border: `thin solid ${theme.palette.primary.light}`
                             }
-                        } })] }, item.id)))] }));
+                        } })] }, item.path)))] }));
 };
 export default RelatedCasePanel;

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

@@ -9,7 +9,10 @@ const SourceAggregate = ({ case: providedCase }) => {
     const { dispatchApi } = useMyApi();
     const { case: _case } = useCase({ case: providedCase });
     const [analytics, setAnalytics] = useState([]);
-    const hitIds = useMemo(() => _case?.items.filter(item => item.type === 'hit').map(item => item.id), [_case?.items]);
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
     useEffect(() => {
         dispatchApi(api.v2.search.post('hit', { query: `howler.id:(${hitIds.join(' OR ')})`, fl: 'howler.analytic' }))
             .then(response => response?.items.map(hit => hit.howler.analytic) ?? [])

package/components/routes/cases/detail/assets/Asset.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 const Asset = ({ asset, 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.assets.type.${asset.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: asset.value })] }), asset.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.assets.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: asset.seenIn.map(id => {
-                                    const entry = _case.items.find(item => item.id === id);
+                                    const entry = _case.items.find(item => item.value === id);
                                     return (_jsx(Chip, { clickable: true, size: "small", label: entry.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${entry.path}` }, id));
                                 }) })] }))] }) }) }));
 };

package/components/routes/cases/detail/assets/Asset.test.js

@@ -40,7 +40,7 @@ describe('Asset', () => {
         });
         it('renders "Seen in" label when seenIn has entries', () => {
             const _case = createMockCase({
-                items: [{ id: 'hit-001', path: 'alerts/test-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+                items: [{ path: 'alerts/test-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
             });
             render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
             expect(screen.getByText('page.cases.assets.seen_in')).toBeTruthy();
@@ -48,9 +48,9 @@ describe('Asset', () => {
         it('renders a chip labelled with entry.path for each seenIn id', () => {
             const _case = createMockCase({
                 items: [
-                    { id: 'hit-001', path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
-                    { id: 'obs-002', path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
-                    { id: 'hit-003', path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
+                    { path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
+                    { path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
+                    { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
                 ]
             });
             render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
@@ -61,7 +61,7 @@ describe('Asset', () => {
         it('links each chip to /cases/:case_id/:path', () => {
             const _case = createMockCase({
                 case_id: 'case-abc',
-                items: [{ id: 'hit-001', path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
+                items: [{ path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
             });
             render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
             const link = screen.getByText('alerts/my-analytic (hit-001)').closest('a');

package/components/routes/cases/detail/sidebar/CaseFolder.d.ts

@@ -8,6 +8,7 @@ interface CaseFolderProps {
     step?: number;
     rootCaseId?: string;
     pathPrefix?: string;
+    onItemRemoved?: (newCase: Case) => void;
 }
 declare const CaseFolder: FC<CaseFolderProps>;
 export default CaseFolder;