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

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, value: string) => Promise<void>;

package/api/v2/case/items.js

@@ -0,0 +1,12 @@
+// 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, value) => {
+    return hdelete(uri(id), { value });
+};

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/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

@@ -33,7 +33,10 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const routeCase = useOutletContext();
     const { case: _case, 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/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.js

@@ -26,10 +26,10 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
     const [hitMetadata, setHitMetadata] = useState({});
     const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
     const currentRootCaseId = rootCaseId || _case?.case_id;
-    const hitIds = useMemo(() => tree.leaves
-        ?.filter(l => l.type?.toLowerCase() === 'hit')
-        .map(l => l.id)
-        .filter(Boolean) ?? [], [tree.leaves]);
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
     useEffect(() => {
         if (hitIds.length < 1) {
             return;
@@ -55,16 +55,17 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
         return undefined;
     };
     const toggleCase = useCallback((item, itemKey) => {
-        const resolvedKey = itemKey || item.path || item.id;
-        if (!resolvedKey)
+        const resolvedKey = itemKey || item.path || item.value;
+        if (!resolvedKey) {
             return;
+        }
         const prev = caseStates[resolvedKey] ?? { open: false, loading: false, data: null };
         const shouldOpen = !prev.open;
-        const shouldFetch = shouldOpen && !!item.id && !prev.data && !prev.loading;
+        const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
         setCaseStates(current => ({ ...current, [resolvedKey]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
         if (!shouldFetch)
             return;
-        dispatchApi(api.v2.case.get(item.id), { throwError: false })
+        dispatchApi(api.v2.case.get(item.value), { throwError: false })
             .then(caseResponse => {
             if (!caseResponse)
                 return;

package/components/routes/cases/modals/AddToCaseModal.d.ts

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const AddToCaseModal: FC<{
+    records: (Hit | Observable)[];
+}>;
+export default AddToCaseModal;

package/components/routes/cases/modals/AddToCaseModal.js

@@ -0,0 +1,62 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const AddToCaseModal = ({ records }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [cases, setCases] = useState([]);
+    const [selectedCase, setSelectedCase] = useState(null);
+    const [path, setPath] = useState('');
+    const [title, setTitle] = useState('');
+    useEffect(() => {
+        dispatchApi(api.search.case.post({ query: 'case_id:*', rows: 100 }), { throwError: false }).then(result => {
+            if (result) {
+                setCases(result.items);
+            }
+        });
+    }, [dispatchApi]);
+    const folderOptions = useMemo(() => {
+        if (!selectedCase?.items) {
+            return [];
+        }
+        const paths = new Set();
+        for (const item of selectedCase.items) {
+            if (!item.path) {
+                continue;
+            }
+            const parts = item.path.split('/');
+            parts.pop();
+            for (let i = 1; i <= parts.length; i++) {
+                paths.add(parts.slice(0, i).join('/'));
+            }
+        }
+        return Array.from(paths).sort();
+    }, [selectedCase]);
+    const fullPath = path ? `${path}/${title}` : title;
+    const isValid = !!selectedCase && !!title;
+    const onSubmit = async () => {
+        if (!selectedCase || records?.length < 1) {
+            return;
+        }
+        await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
+            path: fullPath,
+            value: records[0].howler.id,
+            type: records[0].__index
+        }));
+        close();
+    };
+    // TODO: No support currently for multiple records
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_to_case') }), _jsx(Autocomplete, { options: cases, getOptionLabel: option => option.title ?? option.case_id ?? '', isOptionEqualToValue: (option, value) => option.case_id === value.case_id, value: selectedCase, disablePortal: true, onChange: (_ev, newVal) => {
+                    setSelectedCase(newVal);
+                    setPath('');
+                }, renderOption: (props, option) => (_createElement("li", { ...props, key: option.case_id, style: { ...props.style, display: 'flex', justifyContent: 'stretch', alignItems: 'stretch' } },
+                    _jsx(CaseCard, { case: option, slotProps: { card: { sx: { width: '100%' } } } }))), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_case'), fullWidth: true })) }), selectedCase && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => setPath(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true })) }), _jsx(TextField, { size: "small", placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] })), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid, onClick: onSubmit, children: t('confirm') })] })] }));
+};
+export default AddToCaseModal;

package/components/routes/cases/modals/ResolveModal.js

@@ -24,7 +24,10 @@ const ResolveModal = ({ case: _case, onConfirm }) => {
     const [rationale, setRationale] = useState('');
     const [assessment, setAssessment] = useState(null);
     const [hits, setHits] = useState([]);
-    const hitIds = useMemo(() => uniq((_case?.items ?? []).filter(item => item.type === 'hit').map(item => item.id)), [_case?.items]);
+    const hitIds = useMemo(() => uniq((_case?.items ?? [])
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(Boolean)), [_case?.items]);
     const { assess } = useHitActions(hits);
     useEffect(() => {
         (async () => {

package/locales/en/translation.json

@@ -312,6 +312,11 @@
     "modal.action.title": "Save Action",
     "modal.cases.resolve": "Resolve Case",
     "modal.cases.resolve.description": "When resolving a case, you must either assess all open alerts, or add an assessment to the alerts.",
+    "modal.cases.add_to_case": "Add to Case",
+    "modal.cases.add_to_case.select_case": "Search Cases",
+    "modal.cases.add_to_case.select_path": "Select Folder Path",
+    "modal.cases.add_to_case.title": "Item Title",
+    "modal.cases.add_to_case.full_path": "Full path: {{path}}",
     "modal.confirm.delete.description": "Are you sure you want to delete this item?",
     "modal.confirm.delete.title": "Confirm Deletion",
     "modal.rationale.description": "Provide a rationale that succinctly explains to other analysts why you are confident in this assessment.",

package/locales/fr/translation.json

@@ -312,6 +312,11 @@
     "modal.action.title": "Enregistrer l'action",
     "modal.cases.resolve": "Résoudre le cas",
     "modal.cases.resolve.description": "Lors de la résolution d'un cas, vous devez soit évaluer toutes les alertes ouvertes, soit ajouter une évaluation aux alertes.",
+    "modal.cases.add_to_case": "Ajouter au cas",
+    "modal.cases.add_to_case.select_case": "Rechercher des cas",
+    "modal.cases.add_to_case.select_path": "Sélectionner le chemin du dossier",
+    "modal.cases.add_to_case.title": "Titre de l'élément",
+    "modal.cases.add_to_case.full_path": "Chemin complet : {{path}}",
     "modal.confirm.delete.description": "Êtes-vous sûr de vouloir supprimer cet élément ?",
     "modal.confirm.delete.title": "Confirmer la suppression",
     "modal.rationale.description": "Fournissez une justification qui explique succinctement aux autres analystes les raisons pour lesquelles vous êtes confiant dans cette évaluation.",

package/models/entities/generated/Item.d.ts

@@ -2,8 +2,8 @@
  * NOTE: This is an auto-generated file. Don't edit this manually.
  */
 export interface Item {
-  id?: string;
   path?: string;
   type?: string;
   value?: string;
+  visible?: boolean;
 }

package/package.json

@@ -101,183 +101,183 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.18.0-dev.686",
+  "version": "2.18.0-dev.688",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
     "./components/*": "./components/*.js",
-    "./branding/*": "./branding/*.js",
-    "./tests/*": "./tests/*.js",
-    "./commons/*": "./commons/*.js",
+    "./rest/*": "./rest/*.js",
+    "./rest": "./rest/index.js",
+    "./plugins/*": "./plugins/*.js",
+    "./models/*": "./models/*.js",
     "./utils/*": "./utils/*.js",
     "./utils/*.json": "./utils/*.json",
+    "./branding/*": "./branding/*.js",
+    "./tests/*": "./tests/*.js",
     "./locales/*.json": "./locales/*.json",
+    "./commons/*": "./commons/*.js",
     "./api/*": "./api/*.js",
     "./api": "./api/index.js",
-    "./plugins/*": "./plugins/*.js",
-    "./models/*": "./models/*.js",
-    "./rest/*": "./rest/*.js",
-    "./rest": "./rest/index.js",
-    "./components/logins/*": "./components/logins/*.js",
+    "./components/routes/*": "./components/routes/*.js",
     "./components/app/*": "./components/app/*.js",
-    "./components/elements/*": "./components/elements/*.js",
     "./components/hooks/*": "./components/hooks/*.js",
-    "./components/routes/*": "./components/routes/*.js",
-    "./components/logins/auth/*": "./components/logins/auth/*.js",
-    "./components/logins/hooks/*": "./components/logins/hooks/*.js",
-    "./components/app/drawers/*": "./components/app/drawers/*.js",
-    "./components/app/providers/*": "./components/app/providers/*.js",
-    "./components/app/hooks/*": "./components/app/hooks/*.js",
-    "./components/elements/display/*": "./components/elements/display/*.js",
-    "./components/elements/observable/*": "./components/elements/observable/*.js",
-    "./components/elements/hit/*": "./components/elements/hit/*.js",
-    "./components/elements/record/*": "./components/elements/record/*.js",
-    "./components/elements/view/*": "./components/elements/view/*.js",
-    "./components/elements/case/*": "./components/elements/case/*.js",
-    "./components/elements/addons/*": "./components/elements/addons/*.js",
-    "./components/elements/display/handlebars/*": "./components/elements/display/handlebars/*.js",
-    "./components/elements/display/modals/*": "./components/elements/display/modals/*.js",
-    "./components/elements/display/features/*": "./components/elements/display/features/*.js",
-    "./components/elements/display/icons/*": "./components/elements/display/icons/*.js",
-    "./components/elements/display/json/*": "./components/elements/display/json/*.js",
-    "./components/elements/display/markdownPlugins/*.md": "./components/elements/display/markdownPlugins/*.md.js",
-    "./components/elements/display/icons/svg/*": "./components/elements/display/icons/svg/*.js",
-    "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
-    "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
-    "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
-    "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
-    "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
-    "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
-    "./components/elements/addons/buttons/*": "./components/elements/addons/buttons/*.js",
-    "./components/elements/addons/buttons": "./components/elements/addons/buttons/index.js",
-    "./components/elements/addons/lists/*": "./components/elements/addons/lists/*.js",
-    "./components/elements/addons/lists": "./components/elements/addons/lists/index.js",
-    "./components/elements/addons/search/*": "./components/elements/addons/search/*.js",
-    "./components/elements/addons/layout/*": "./components/elements/addons/layout/*.js",
-    "./components/elements/addons/lists/table/*": "./components/elements/addons/lists/table/*.js",
-    "./components/elements/addons/lists/table": "./components/elements/addons/lists/table/index.js",
-    "./components/elements/addons/lists/hooks/*": "./components/elements/addons/lists/hooks/*.js",
-    "./components/elements/addons/search/phrase/*": "./components/elements/addons/search/phrase/*.js",
-    "./components/elements/addons/search/phrase": "./components/elements/addons/search/phrase/index.js",
-    "./components/elements/addons/search/phrase/word/*": "./components/elements/addons/search/phrase/word/*.js",
-    "./components/elements/addons/search/phrase/word/consumers/*": "./components/elements/addons/search/phrase/word/consumers/*.js",
-    "./components/elements/addons/layout/vsbox/*": "./components/elements/addons/layout/vsbox/*.js",
-    "./components/routes/home/*": "./components/routes/home/*.js",
-    "./components/routes/home": "./components/routes/home/index.js",
+    "./components/elements/*": "./components/elements/*.js",
+    "./components/logins/*": "./components/logins/*.js",
+    "./components/routes/admin/*": "./components/routes/admin/*.js",
+    "./components/routes/hits/*": "./components/routes/hits/*.js",
     "./components/routes/action/*": "./components/routes/action/*.js",
-    "./components/routes/templates/*": "./components/routes/templates/*.js",
     "./components/routes/dossiers/*": "./components/routes/dossiers/*.js",
-    "./components/routes/overviews/*": "./components/routes/overviews/*.js",
-    "./components/routes/views/*": "./components/routes/views/*.js",
-    "./components/routes/hits/*": "./components/routes/hits/*.js",
-    "./components/routes/analytics/*": "./components/routes/analytics/*.js",
-    "./components/routes/advanced/*": "./components/routes/advanced/*.js",
-    "./components/routes/help/*": "./components/routes/help/*.js",
-    "./components/routes/admin/*": "./components/routes/admin/*.js",
     "./components/routes/settings/*": "./components/routes/settings/*.js",
+    "./components/routes/advanced/*": "./components/routes/advanced/*.js",
+    "./components/routes/templates/*": "./components/routes/templates/*.js",
+    "./components/routes/analytics/*": "./components/routes/analytics/*.js",
     "./components/routes/observables/*": "./components/routes/observables/*.js",
+    "./components/routes/help/*": "./components/routes/help/*.js",
     "./components/routes/cases/*": "./components/routes/cases/*.js",
-    "./components/routes/action/edit/*": "./components/routes/action/edit/*.js",
+    "./components/routes/overviews/*": "./components/routes/overviews/*.js",
+    "./components/routes/home/*": "./components/routes/home/*.js",
+    "./components/routes/home": "./components/routes/home/index.js",
+    "./components/routes/views/*": "./components/routes/views/*.js",
+    "./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
+    "./components/routes/hits/view/*": "./components/routes/hits/view/*.js",
+    "./components/routes/hits/search/*": "./components/routes/hits/search/*.js",
+    "./components/routes/hits/search/shared/*": "./components/routes/hits/search/shared/*.js",
+    "./components/routes/hits/search/grid/*": "./components/routes/hits/search/grid/*.js",
     "./components/routes/action/view/*": "./components/routes/action/view/*.js",
+    "./components/routes/action/edit/*": "./components/routes/action/edit/*.js",
     "./components/routes/action/shared/*": "./components/routes/action/shared/*.js",
     "./components/routes/action/view/markdown/*.md": "./components/routes/action/view/markdown/*.md.js",
-    "./components/routes/overviews/template/*": "./components/routes/overviews/template/*.js",
-    "./components/routes/hits/search/*": "./components/routes/hits/search/*.js",
-    "./components/routes/hits/view/*": "./components/routes/hits/view/*.js",
-    "./components/routes/hits/search/grid/*": "./components/routes/hits/search/grid/*.js",
-    "./components/routes/hits/search/shared/*": "./components/routes/hits/search/shared/*.js",
     "./components/routes/analytics/widgets/*": "./components/routes/analytics/widgets/*.js",
-    "./components/routes/help/components/*": "./components/routes/help/components/*.js",
     "./components/routes/help/markdown/*.md": "./components/routes/help/markdown/*.md.js",
+    "./components/routes/help/components/*": "./components/routes/help/components/*.js",
     "./components/routes/help/markdown/fr/*.md": "./components/routes/help/markdown/fr/*.md.js",
     "./components/routes/help/markdown/en/*.md": "./components/routes/help/markdown/en/*.md.js",
-    "./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
     "./components/routes/cases/modals/*": "./components/routes/cases/modals/*.js",
     "./components/routes/cases/hooks/*": "./components/routes/cases/hooks/*.js",
     "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
     "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",
     "./components/routes/cases/detail/assets/*": "./components/routes/cases/detail/assets/*.js",
     "./components/routes/cases/detail/aggregates/*": "./components/routes/cases/detail/aggregates/*.js",
+    "./components/routes/overviews/template/*": "./components/routes/overviews/template/*.js",
+    "./components/app/hooks/*": "./components/app/hooks/*.js",
+    "./components/app/drawers/*": "./components/app/drawers/*.js",
+    "./components/app/providers/*": "./components/app/providers/*.js",
+    "./components/elements/view/*": "./components/elements/view/*.js",
+    "./components/elements/addons/*": "./components/elements/addons/*.js",
+    "./components/elements/record/*": "./components/elements/record/*.js",
+    "./components/elements/case/*": "./components/elements/case/*.js",
+    "./components/elements/display/*": "./components/elements/display/*.js",
+    "./components/elements/hit/*": "./components/elements/hit/*.js",
+    "./components/elements/observable/*": "./components/elements/observable/*.js",
+    "./components/elements/addons/search/*": "./components/elements/addons/search/*.js",
+    "./components/elements/addons/lists/*": "./components/elements/addons/lists/*.js",
+    "./components/elements/addons/lists": "./components/elements/addons/lists/index.js",
+    "./components/elements/addons/buttons/*": "./components/elements/addons/buttons/*.js",
+    "./components/elements/addons/buttons": "./components/elements/addons/buttons/index.js",
+    "./components/elements/addons/layout/*": "./components/elements/addons/layout/*.js",
+    "./components/elements/addons/search/phrase/*": "./components/elements/addons/search/phrase/*.js",
+    "./components/elements/addons/search/phrase": "./components/elements/addons/search/phrase/index.js",
+    "./components/elements/addons/search/phrase/word/*": "./components/elements/addons/search/phrase/word/*.js",
+    "./components/elements/addons/search/phrase/word/consumers/*": "./components/elements/addons/search/phrase/word/consumers/*.js",
+    "./components/elements/addons/lists/hooks/*": "./components/elements/addons/lists/hooks/*.js",
+    "./components/elements/addons/lists/table/*": "./components/elements/addons/lists/table/*.js",
+    "./components/elements/addons/lists/table": "./components/elements/addons/lists/table/index.js",
+    "./components/elements/addons/layout/vsbox/*": "./components/elements/addons/layout/vsbox/*.js",
+    "./components/elements/display/json/*": "./components/elements/display/json/*.js",
+    "./components/elements/display/modals/*": "./components/elements/display/modals/*.js",
+    "./components/elements/display/features/*": "./components/elements/display/features/*.js",
+    "./components/elements/display/markdownPlugins/*.md": "./components/elements/display/markdownPlugins/*.md.js",
+    "./components/elements/display/handlebars/*": "./components/elements/display/handlebars/*.js",
+    "./components/elements/display/icons/*": "./components/elements/display/icons/*.js",
+    "./components/elements/display/icons/svg/*": "./components/elements/display/icons/svg/*.js",
+    "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
+    "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
+    "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
+    "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
+    "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
+    "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
+    "./components/logins/hooks/*": "./components/logins/hooks/*.js",
+    "./components/logins/auth/*": "./components/logins/auth/*.js",
+    "./plugins/clue/*": "./plugins/clue/*.js",
+    "./plugins/clue": "./plugins/clue/index.js",
+    "./plugins/clue/components/*": "./plugins/clue/components/*.js",
+    "./plugins/clue/locales/*": "./plugins/clue/locales/*.js",
+    "./models/socket/*": "./models/socket/*.js",
+    "./models/entities/*": "./models/entities/*.js",
+    "./models/entities/generated/*": "./models/entities/generated/*.js",
+    "./locales/fr/*.json": "./locales/fr/*.json",
+    "./locales/en/*.json": "./locales/en/*.json",
+    "./locales/fr/help/*.json": "./locales/fr/help/*.json",
+    "./locales/en/help/*.json": "./locales/en/help/*.json",
     "./commons/components/*": "./commons/components/*.js",
     "./commons/components/breadcrumbs/*": "./commons/components/breadcrumbs/*.js",
-    "./commons/components/app/*": "./commons/components/app/*.js",
-    "./commons/components/utils/*": "./commons/components/utils/*.js",
     "./commons/components/notification/*": "./commons/components/notification/*.js",
     "./commons/components/notification": "./commons/components/notification/index.js",
+    "./commons/components/topnav/*": "./commons/components/topnav/*.js",
+    "./commons/components/app/*": "./commons/components/app/*.js",
     "./commons/components/display/*": "./commons/components/display/*.js",
     "./commons/components/leftnav/*": "./commons/components/leftnav/*.js",
-    "./commons/components/search/*": "./commons/components/search/*.js",
     "./commons/components/pages/*": "./commons/components/pages/*.js",
-    "./commons/components/topnav/*": "./commons/components/topnav/*.js",
-    "./commons/components/app/providers/*": "./commons/components/app/providers/*.js",
-    "./commons/components/app/hooks/*": "./commons/components/app/hooks/*.js",
-    "./commons/components/app/hooks": "./commons/components/app/hooks/index.js",
-    "./commons/components/utils/hooks/*": "./commons/components/utils/hooks/*.js",
+    "./commons/components/utils/*": "./commons/components/utils/*.js",
+    "./commons/components/search/*": "./commons/components/search/*.js",
     "./commons/components/notification/elements/*": "./commons/components/notification/elements/*.js",
     "./commons/components/notification/elements/item/*": "./commons/components/notification/elements/item/*.js",
+    "./commons/components/app/hooks/*": "./commons/components/app/hooks/*.js",
+    "./commons/components/app/hooks": "./commons/components/app/hooks/index.js",
+    "./commons/components/app/providers/*": "./commons/components/app/providers/*.js",
     "./commons/components/display/hooks/*": "./commons/components/display/hooks/*.js",
     "./commons/components/pages/hooks/*": "./commons/components/pages/hooks/*.js",
-    "./locales/fr/*.json": "./locales/fr/*.json",
-    "./locales/en/*.json": "./locales/en/*.json",
-    "./locales/fr/help/*.json": "./locales/fr/help/*.json",
-    "./locales/en/help/*.json": "./locales/en/help/*.json",
-    "./api/overview/*": "./api/overview/*.js",
-    "./api/overview": "./api/overview/index.js",
-    "./api/v2/*": "./api/v2/*.js",
-    "./api/v2": "./api/v2/index.js",
+    "./commons/components/utils/hooks/*": "./commons/components/utils/hooks/*.js",
     "./api/action/*": "./api/action/*.js",
     "./api/action": "./api/action/index.js",
-    "./api/auth/*": "./api/auth/*.js",
-    "./api/auth": "./api/auth/index.js",
+    "./api/v2/*": "./api/v2/*.js",
+    "./api/v2": "./api/v2/index.js",
+    "./api/view/*": "./api/view/*.js",
+    "./api/view": "./api/view/index.js",
     "./api/notebook/*": "./api/notebook/*.js",
     "./api/notebook": "./api/notebook/index.js",
-    "./api/template/*": "./api/template/*.js",
-    "./api/template": "./api/template/index.js",
     "./api/analytic/*": "./api/analytic/*.js",
     "./api/analytic": "./api/analytic/index.js",
+    "./api/hit/*": "./api/hit/*.js",
+    "./api/hit": "./api/hit/index.js",
+    "./api/overview/*": "./api/overview/*.js",
+    "./api/overview": "./api/overview/index.js",
+    "./api/configs/*": "./api/configs/*.js",
+    "./api/configs": "./api/configs/index.js",
     "./api/user/*": "./api/user/*.js",
     "./api/user": "./api/user/index.js",
     "./api/dossier/*": "./api/dossier/*.js",
     "./api/dossier": "./api/dossier/index.js",
+    "./api/auth/*": "./api/auth/*.js",
+    "./api/auth": "./api/auth/index.js",
     "./api/search/*": "./api/search/*.js",
     "./api/search": "./api/search/index.js",
-    "./api/configs/*": "./api/configs/*.js",
-    "./api/configs": "./api/configs/index.js",
-    "./api/hit/*": "./api/hit/*.js",
-    "./api/hit": "./api/hit/index.js",
-    "./api/view/*": "./api/view/*.js",
-    "./api/view": "./api/view/index.js",
-    "./api/v2/search/*": "./api/v2/search/*.js",
-    "./api/v2/search": "./api/v2/search/index.js",
+    "./api/template/*": "./api/template/*.js",
+    "./api/template": "./api/template/index.js",
     "./api/v2/case/*": "./api/v2/case/*.js",
     "./api/v2/case": "./api/v2/case/index.js",
-    "./api/analytic/comments/*": "./api/analytic/comments/*.js",
-    "./api/analytic/comments": "./api/analytic/comments/index.js",
+    "./api/v2/search/*": "./api/v2/search/*.js",
+    "./api/v2/search": "./api/v2/search/index.js",
     "./api/analytic/notebooks/*": "./api/analytic/notebooks/*.js",
     "./api/analytic/notebooks": "./api/analytic/notebooks/index.js",
+    "./api/analytic/comments/*": "./api/analytic/comments/*.js",
+    "./api/analytic/comments": "./api/analytic/comments/index.js",
+    "./api/hit/comments/*": "./api/hit/comments/*.js",
+    "./api/hit/comments": "./api/hit/comments/index.js",
     "./api/user/avatar/*": "./api/user/avatar/*.js",
     "./api/user/avatar": "./api/user/avatar/index.js",
-    "./api/search/eql/*": "./api/search/eql/*.js",
     "./api/search/histogram/*": "./api/search/histogram/*.js",
     "./api/search/histogram": "./api/search/histogram/index.js",
     "./api/search/facet/*": "./api/search/facet/*.js",
     "./api/search/facet": "./api/search/facet/index.js",
-    "./api/search/fields/*": "./api/search/fields/*.js",
-    "./api/search/fields": "./api/search/fields/index.js",
+    "./api/search/eql/*": "./api/search/eql/*.js",
+    "./api/search/count/*": "./api/search/count/*.js",
+    "./api/search/count": "./api/search/count/index.js",
     "./api/search/grouped/*": "./api/search/grouped/*.js",
     "./api/search/grouped": "./api/search/grouped/index.js",
-    "./api/search/sigma/*": "./api/search/sigma/*.js",
     "./api/search/explain/*": "./api/search/explain/*.js",
-    "./api/search/count/*": "./api/search/count/*.js",
-    "./api/search/count": "./api/search/count/index.js",
-    "./api/hit/comments/*": "./api/hit/comments/*.js",
-    "./api/hit/comments": "./api/hit/comments/index.js",
-    "./plugins/clue/*": "./plugins/clue/*.js",
-    "./plugins/clue": "./plugins/clue/index.js",
-    "./plugins/clue/components/*": "./plugins/clue/components/*.js",
-    "./plugins/clue/locales/*": "./plugins/clue/locales/*.js",
-    "./models/socket/*": "./models/socket/*.js",
-    "./models/entities/*": "./models/entities/*.js",
-    "./models/entities/generated/*": "./models/entities/generated/*.js"
+    "./api/search/fields/*": "./api/search/fields/*.js",
+    "./api/search/fields": "./api/search/fields/index.js",
+    "./api/search/sigma/*": "./api/search/sigma/*.js"
   }
 }

package/tests/server-handlers.js

@@ -30,7 +30,12 @@ export const MOCK_RESPONSES = {
         total: 1,
         rows: 1
     },
-    '/api/v1/analytic': [createMockAnalytic()]
+    '/api/v1/analytic': [createMockAnalytic()],
+    '/api/v2/search/hit,observable': {
+        items: [],
+        total: 0,
+        rows: 0
+    }
 };
 const handlers = [
     ...Object.entries(MOCK_RESPONSES).map(([path, data]) => http.all(path, async () => HttpResponse.json({ api_response: data }))),

package/tests/utils.d.ts

@@ -3,12 +3,14 @@ import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/A
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
 import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
 type RecursivePartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
 };
 export declare const createMockHit: (overrides?: RecursivePartial<Hit>) => Hit;
+export declare const createMockObservable: (overrides?: RecursivePartial<Observable>) => Observable;
 export declare const createMockAnalytic: (overrides?: Partial<Analytic>) => Analytic;
 export declare const createMockTemplate: (overrides?: Partial<Template>) => Template;
 export declare const createMockAction: (overrides?: Partial<Action>) => Action;

package/tests/utils.js

@@ -1,5 +1,6 @@
 // Mock data factories
 export const createMockHit = (overrides) => ({
+    ...overrides,
     __index: 'hit',
     howler: {
         id: 'test-hit-1',
@@ -15,6 +16,17 @@ export const createMockHit = (overrides) => ({
         ...overrides?.event
     }
 });
+export const createMockObservable = (overrides) => ({
+    ...overrides,
+    __index: 'observable',
+    howler: {
+        id: 'test-observable-1',
+        analytic: 'test-analytic',
+        detection: 'Test Detection',
+        hash: '',
+        ...overrides?.howler
+    }
+});
 export const createMockAnalytic = (overrides) => ({
     analytic_id: 'test-analytic-id',
     name: 'test-analytic',