@cccsaurora/howler-ui 2.19.0-cases.1097 → 2.19.0-cases.1111

package/components/app/App.js

@@ -28,8 +28,8 @@ import AnalyticDetails from '@cccsaurora/howler-ui/components/routes/analytics/A
 import AnalyticSearch from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticSearch';
 import CaseViewer from '@cccsaurora/howler-ui/components/routes/cases/CaseViewer';
 import Cases from '@cccsaurora/howler-ui/components/routes/cases/Cases';
-import CaseAssets from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseAssets';
 import CaseDashboard from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseDashboard';
+import CaseObservables from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseObservables';
 import CaseRules from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseRules';
 import CaseTimeline from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTimeline';
 import ItemPage from '@cccsaurora/howler-ui/components/routes/cases/detail/ItemPage';
@@ -214,8 +214,8 @@ const createRouter = () => createBrowserRouter([
                         element: _jsx(CaseDashboard, {})
                     },
                     {
-                        path: 'assets',
-                        element: _jsx(CaseAssets, {})
+                        path: 'observables',
+                        element: _jsx(CaseObservables, {})
                     },
                     {
                         path: 'timeline',

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, FormatListBulleted, HourglassBottom, Pause, People, WarningRounded } from '@mui/icons-material';
-import { Autocomplete, AvatarGroup, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
+import { Check, FormatListBulleted, HourglassBottom, Pause, People, TrendingUp, WarningRounded } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Card, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
@@ -10,6 +10,7 @@ import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import dayjs from 'dayjs';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ESCALATION_COLOR_MAP } from '../constants';
 import useCase from '../hooks/useCase';
 import ResolveModal from '../modals/ResolveModal';
 import SourceAggregate from './aggregates/SourceAggregate';
@@ -61,10 +62,18 @@ const CaseDetails = ({ case: providedCase }) => {
                                         'in-progress': _jsx(HourglassBottom, { color: "warning" }),
                                         'on-hold': _jsx(Pause, { color: "disabled" }),
                                         resolved: _jsx(Check, { color: "success" })
-                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => handleStatus(status) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading }), _jsx("div", { style: { flex: 1 } })] }), caseViewers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(SocketBadge, { size: "medium" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.viewers') })] }), _jsx(AvatarGroup, { max: 4, sx: { alignSelf: 'start' }, componentsProps: {
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => {
+                                    if (status) {
+                                        handleStatus(status);
+                                    }
+                                } }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(TrendingUp, { color: ESCALATION_COLOR_MAP[_case.escalation] }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.escalation') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.escalation ?? null, options: config.lookups['case.escalation'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, escalation) => {
+                                    if (escalation) {
+                                        wrappedUpdate({ escalation });
+                                    }
+                                } })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading }), _jsx("div", { style: { flex: 1 } })] }), caseViewers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(SocketBadge, { size: "medium" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.viewers') })] }), _jsx(AvatarGroup, { max: 4, sx: { alignSelf: 'start' }, componentsProps: {
                                             additionalAvatar: {
                                                 sx: { height: 32, width: 32, fontSize: '12px' }
                                             }
-                                        }, children: caseViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: 32, width: 32 } }, viewer))) })] }))] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
+                                        }, children: caseViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: 32, width: 32 } }, viewer))) })] }))] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
 };
 export default CaseDetails;

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

@@ -0,0 +1,146 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import {} from 'react';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Hoisted stubs
+// ---------------------------------------------------------------------------
+const mockUpdate = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockShowModal = vi.hoisted(() => vi.fn());
+// ---------------------------------------------------------------------------
+// Module mocks (registered before the dynamic import below)
+// ---------------------------------------------------------------------------
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({
+            showModal: mockShowModal,
+            close: vi.fn(),
+            setContent: vi.fn(),
+            withConfirmDeleteModal: vi.fn()
+        })
+    };
+});
+vi.mock('components/elements/UserList', () => ({
+    default: () => _jsx("div", { id: "user-list" })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { children: userId })
+}));
+vi.mock('components/elements/display/icons/SocketBadge', () => ({
+    default: () => _jsx("span", {})
+}));
+vi.mock('./aggregates/SourceAggregate', () => ({
+    default: () => _jsx("span", {})
+}));
+vi.mock('../modals/ResolveModal', () => ({
+    default: () => null
+}));
+// ---------------------------------------------------------------------------
+// Shared provider config
+// ---------------------------------------------------------------------------
+const mockConfig = {
+    lookups: {
+        'howler.status': ['open', 'in-progress', 'on-hold', 'resolved'],
+        'case.escalation': ['normal', 'focus', 'crisis'],
+        'howler.escalation': ['miss', 'hit', 'alert', 'evidence']
+    }
+};
+const mockViewers = {};
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(SocketContext.Provider, { value: {
+            emit: vi.fn(),
+            open: true,
+            fetchViewers: vi.fn(),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: { ...mockViewers }
+        }, children: children }) }));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+const { default: CaseDetails } = await import('./CaseDetails');
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDetails', () => {
+    let user;
+    let testCase;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        mockUpdate.mockResolvedValue(undefined);
+        testCase = createMockCase({ case_id: 'test-case-id', status: 'open', escalation: 'normal' });
+        Object.keys(mockViewers).forEach(k => delete mockViewers[k]);
+    });
+    it('renders a skeleton and no controls when the case is null', () => {
+        render(_jsx(CaseDetails, { case: null }), { wrapper: Wrapper });
+        expect(document.querySelector('.MuiSkeleton-root')).toBeTruthy();
+        expect(screen.queryByRole('combobox')).toBeNull();
+    });
+    it('renders the status label and current status value', () => {
+        render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+        expect(screen.getByText('page.cases.detail.status')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('open')).toBeInTheDocument();
+    });
+    it('renders the escalation label and current escalation value', () => {
+        render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+        expect(screen.getByText('page.cases.detail.escalation')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('normal')).toBeInTheDocument();
+    });
+    describe('status changes', () => {
+        it('calls update with the new status when a non-resolved option is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('open'));
+            await user.click(await screen.findByRole('option', { name: 'in-progress' }));
+            await waitFor(() => {
+                expect(mockUpdate).toHaveBeenCalledWith({ status: 'in-progress' });
+            });
+        });
+        it('opens the resolve modal instead of calling update when "resolved" is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('open'));
+            await user.click(await screen.findByRole('option', { name: 'resolved' }));
+            expect(mockShowModal).toHaveBeenCalledOnce();
+            expect(mockUpdate).not.toHaveBeenCalled();
+        });
+    });
+    describe('escalation changes', () => {
+        it('calls update with the new escalation when an option is selected', async () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            await user.click(screen.getByDisplayValue('normal'));
+            await user.click(await screen.findByRole('option', { name: 'focus' }));
+            await waitFor(() => {
+                expect(mockUpdate).toHaveBeenCalledWith({ escalation: 'focus' });
+            });
+        });
+    });
+    describe('viewers section', () => {
+        it('hides the viewers section when no viewers are active', () => {
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            expect(screen.queryByText('page.cases.detail.viewers')).toBeNull();
+        });
+        it('shows the viewers section and renders viewer avatars when active viewers are present', () => {
+            mockViewers['test-case-id'] = ['user-1', 'user-2'];
+            render(_jsx(CaseDetails, { case: testCase }), { wrapper: Wrapper });
+            expect(screen.getByText('page.cases.detail.viewers')).toBeInTheDocument();
+            expect(screen.getByText('user-1')).toBeInTheDocument();
+            expect(screen.getByText('user-2')).toBeInTheDocument();
+        });
+    });
+});

package/components/routes/cases/detail/{CaseAssets.d.ts → CaseObservables.d.ts}

@@ -1,9 +1,9 @@
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import { type AssetEntry } from './assets/Asset';
+import { type ObservableEntry } from './observables/Observable';
 /** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export declare const buildAssetEntries: (records: Partial<Hit | Event>[]) => AssetEntry[];
+export declare const buildObservableEntries: (records: Partial<Hit | Event>[]) => ObservableEntry[];
 declare const _default: import("react").NamedExoticComponent<{
     case?: Case;
     caseId?: string;

package/components/routes/cases/detail/{CaseAssets.js → CaseObservables.js}

@@ -6,16 +6,16 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
 import useCase from '../hooks/useCase';
-import Asset, {} from './assets/Asset';
-/** All Related fields that carry asset values */
-const ASSET_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+import Observable, {} from './observables/Observable';
+/** All Related fields that carry observable values */
+const OBSERVABLE_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
 /** Extract (type, value, seenInId) triples from a record's related field */
-const extractAssets = (related, recordId) => {
+const extractObservables = (related, recordId) => {
     if (!related) {
         return [];
     }
     const results = [];
-    for (const field of ASSET_FIELDS) {
+    for (const field of OBSERVABLE_FIELDS) {
         const raw = related[field];
         if (!raw) {
             continue;
@@ -30,7 +30,7 @@ const extractAssets = (related, recordId) => {
     return results;
 };
 /** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export const buildAssetEntries = (records) => {
+export const buildObservableEntries = (records) => {
     const map = new Map();
     for (const record of records) {
         const related = record.related ?? record.related;
@@ -38,7 +38,7 @@ export const buildAssetEntries = (records) => {
         if (!recordId) {
             continue;
         }
-        for (const { type, value, id } of extractAssets(related, recordId)) {
+        for (const { type, value, id } of extractObservables(related, recordId)) {
             const key = `${type}:${value}`;
             if (!map.has(key)) {
                 map.set(key, { type, value, seenIn: [] });
@@ -51,8 +51,8 @@ export const buildAssetEntries = (records) => {
     }
     return Array.from(map.values());
 };
-const RELATED_FIELDS = ASSET_FIELDS.map(f => `related.${f}`).join(',');
-const CaseAssets = ({ case: providedCase, caseId }) => {
+const RELATED_FIELDS = OBSERVABLE_FIELDS.map(f => `related.${f}`).join(',');
+const CaseObservables = ({ case: providedCase, caseId }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const routeCase = useOutletContext();
@@ -73,17 +73,17 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
             fl: `howler.id,${RELATED_FIELDS}`
         })).then(response => setRecords(response.items));
     }, [dispatchApi, ids]);
-    const allAssets = useMemo(() => (records ? buildAssetEntries(records) : []), [records]);
-    const assetTypes = useMemo(() => (allAssets ? [...new Set(allAssets.map(a => a.type))].sort() : []), [allAssets]);
-    const filteredAssets = useMemo(() => {
-        if (allAssets.length < 1) {
+    const allObservables = useMemo(() => (records ? buildObservableEntries(records) : []), [records]);
+    const observableTypes = useMemo(() => (allObservables ? [...new Set(allObservables.map(a => a.type))].sort() : []), [allObservables]);
+    const filteredObservables = useMemo(() => {
+        if (allObservables.length < 1) {
             return [];
         }
         if (activeFilters.size === 0) {
-            return allAssets;
+            return allObservables;
         }
-        return allAssets.filter(a => activeFilters.has(a.type));
-    }, [allAssets, activeFilters]);
+        return allObservables.filter(a => activeFilters.has(a.type));
+    }, [allObservables, activeFilters]);
     const toggleFilter = (type) => {
         setActiveFilters(prev => {
             const next = new Set(prev);
@@ -99,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))))] }) }), 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}`))))] }));
+    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.observables.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (observableTypes.map(type => (_jsx(Chip, { label: t(`page.cases.observables.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}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (filteredObservables.map(observable => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Observable, { asset: observable, case: _case }) }, `${observable.type}:${observable.value}`))))] }));
 };
-export default memo(CaseAssets);
+export default memo(CaseObservables);

package/components/routes/cases/detail/{CaseAssets.test.js → CaseObservables.test.js}

@@ -6,28 +6,28 @@ import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it, vi } from 'vitest';
-import { buildAssetEntries } from './CaseAssets';
+import { buildObservableEntries } from './CaseObservables';
 // ---------------------------------------------------------------------------
 // Pure logic tests — no React needed
 // ---------------------------------------------------------------------------
-describe('buildAssetEntries', () => {
+describe('buildObservableEntries', () => {
     it('returns an empty array for records with no related field', () => {
-        expect(buildAssetEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
+        expect(buildObservableEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
     });
     it('extracts a single IP from a hit', () => {
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
+        const result = buildObservableEntries([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([
+        const result = buildObservableEntries([
             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([
+        const result = buildObservableEntries([
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockEvent({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
         ]);
@@ -35,14 +35,14 @@ describe('buildAssetEntries', () => {
         expect(result[0].seenIn).toEqual(['h1', 'obs1']);
     });
     it('keeps distinct asset values as separate entries', () => {
-        const result = buildAssetEntries([
+        const result = buildObservableEntries([
             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([
+        const result = buildObservableEntries([
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
         ]);
@@ -50,10 +50,10 @@ describe('buildAssetEntries', () => {
     });
     it('skips records with no howler.id', () => {
         const noId = { related: { ip: ['1.2.3.4'] } };
-        expect(buildAssetEntries([noId])).toEqual([]);
+        expect(buildObservableEntries([noId])).toEqual([]);
     });
     it('handles the scalar `id` field on Related', () => {
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
         expect(result).toHaveLength(1);
         expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
     });
@@ -66,7 +66,7 @@ describe('buildAssetEntries', () => {
             uri: ['https://example.com'],
             signature: ['rule-X']
         };
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related })]);
         const types = result.map(a => a.type).sort();
         expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
     });
@@ -91,65 +91,65 @@ const mockCase = {
         { type: 'event', value: 'obs-1' }
     ]
 };
-const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);
+const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/observables'] }, children);
 // lazy import the component after mocks are set up
-const CaseAssets = (await import('./CaseAssets')).default;
-describe('CaseAssets component', () => {
+const CaseObservables = (await import('./CaseObservables')).default;
+describe('CaseObservables component', () => {
     beforeEach(() => {
         mockDispatchApi.mockClear();
     });
     it('renders skeletons while records are loading', () => {
         mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         // 6 skeleton cards
         const skeletons = document.querySelectorAll('.MuiSkeleton-root');
         expect(skeletons.length).toBeGreaterThan(0);
     });
-    it('shows "No assets found" when records have no related data', async () => {
+    it('shows "No observables found" when records have no related data', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'obs-1' } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        await screen.findByText('page.cases.assets.empty');
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
     });
-    it('renders asset cards for extracted assets', async () => {
+    it('renders observable cards for extracted observables', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
     });
-    it('renders a filter chip for each asset type present', async () => {
+    it('renders a filter chip for each observable type present', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        await screen.findAllByText('page.cases.assets.type.ip');
-        expect(screen.getAllByText('page.cases.assets.type.ip')).toHaveLength(2);
-        expect(screen.getAllByText('page.cases.assets.type.user')).toHaveLength(2);
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findAllByText('page.cases.observables.type.ip');
+        expect(screen.getAllByText('page.cases.observables.type.ip')).toHaveLength(2);
+        expect(screen.getAllByText('page.cases.observables.type.user')).toHaveLength(2);
     });
-    it('filters assets when a type chip is clicked', async () => {
+    it('filters observables when a type chip is clicked', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        // Wait for both assets to appear
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        // Wait for both observables to appear
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
         // Click the 'ip' filter chip
-        await userEvent.click(screen.getByRole('button', { name: 'page.cases.assets.type.ip' }));
+        await userEvent.click(screen.getByRole('button', { name: 'page.cases.observables.type.ip' }));
         // Alice (user) should be filtered out
         expect(screen.queryByText('alice')).toBeNull();
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
     });
-    it('restores all assets when an active filter chip is clicked again', async () => {
+    it('restores all observables when an active filter chip is clicked again', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
-        const ipChip = screen.getByRole('button', { name: 'page.cases.assets.type.ip' });
+        const ipChip = screen.getByRole('button', { name: 'page.cases.observables.type.ip' });
         await userEvent.click(ipChip);
         await userEvent.click(ipChip);
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
@@ -157,8 +157,8 @@ describe('CaseAssets component', () => {
     });
     it('renders nothing when the case has no hit/event items', async () => {
         const emptyCase = { case_id: 'case-002', items: [] };
-        render(_jsx(CaseAssets, { case: emptyCase }), { wrapper: Wrapper });
-        await screen.findByText('page.cases.assets.empty');
+        render(_jsx(CaseObservables, { case: emptyCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
         expect(mockDispatchApi).not.toHaveBeenCalled();
     });
 });

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

@@ -99,7 +99,7 @@ const CaseSidebar = ({ case: _case, update }) => {
             maxHeight: 'calc(100vh - 64px)',
             display: 'flex',
             flexDirection: 'column'
-        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('assets')), component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
                 }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: null, path: "", indent: 0, label: activeDragData.label, itemType: activeDragData.type })) })] })] }) }))] }));

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

@@ -146,10 +146,10 @@ describe('CaseSidebar', () => {
             const link = screen.getByText('page.cases.dashboard').closest('a');
             expect(link).toHaveAttribute('href', '/cases/case-1');
         });
-        it('renders an Assets nav link pointing to the case assets route', () => {
+        it('renders an Observables nav link pointing to the case observables route', () => {
             renderSidebar();
-            const link = screen.getByText('page.cases.assets').closest('a');
-            expect(link).toHaveAttribute('href', '/cases/case-1/assets');
+            const link = screen.getByText('page.cases.observables').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/observables');
         });
         it('renders a Timeline nav link pointing to the case timeline route', () => {
             renderSidebar();

package/components/routes/cases/detail/observables/Observable.d.ts

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { FC } from 'react';
+export type ObservableType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
+export interface ObservableEntry {
+    type: ObservableType;
+    value: string;
+    /** IDs of the hits/events this observable was seen in */
+    seenIn: string[];
+}
+declare const Observable: FC<{
+    asset: ObservableEntry;
+    case: Case;
+}>;
+export default Observable;

package/components/routes/cases/detail/{assets/Asset.js → observables/Observable.js}

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, Chip, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const Asset = ({ asset, case: _case }) => {
+const Observable = ({ 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 => {
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${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.observables.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: asset.seenIn.map(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));
                                 }) })] }))] }) }) }));
 };
-export default Asset;
+export default Observable;

package/components/routes/cases/detail/observables/Observable.test.d.ts

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

package/components/routes/cases/detail/{assets/Asset.test.js → observables/Observable.test.js}

@@ -4,46 +4,46 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it } from 'vitest';
-import Asset, {} from './Asset';
-const makeAsset = (overrides = {}) => ({
+import Observable, {} from './Observable';
+const makeObservable = (overrides = {}) => ({
     type: 'ip',
     value: '192.168.1.1',
     seenIn: [],
     ...overrides
 });
-describe('Asset', () => {
+describe('Observable', () => {
     describe('type chip', () => {
         it('renders the correct label for each type', () => {
             const cases = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
             for (const type of cases) {
-                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type, value: 'x' }), case: createMockCase() }) }));
-                expect(screen.getByText(`page.cases.assets.type.${type}`)).toBeTruthy();
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ type, value: 'x' }), case: createMockCase() }) }));
+                expect(screen.getByText(`page.cases.observables.type.${type}`)).toBeTruthy();
                 unmount();
             }
         });
     });
     describe('value display', () => {
         it('renders the asset value', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ value: '10.0.0.1' }), case: createMockCase() }) }));
             expect(screen.getByText('10.0.0.1')).toBeTruthy();
         });
         it('renders long hash values without truncation', () => {
             const hash = 'a'.repeat(64);
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ type: 'hash', value: hash }), case: createMockCase() }) }));
             expect(screen.getByText(hash)).toBeTruthy();
         });
     });
     describe('seen-in chips', () => {
         it('renders nothing when seenIn is empty', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: [] }), case: createMockCase() }) }));
-            expect(screen.queryByText('page.cases.assets.seen_in')).toBeNull();
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: [] }), case: createMockCase() }) }));
+            expect(screen.queryByText('page.cases.observables.seen_in')).toBeNull();
         });
         it('renders "Seen in" label when seenIn has entries', () => {
             const _case = createMockCase({
                 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();
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            expect(screen.getByText('page.cases.observables.seen_in')).toBeTruthy();
         });
         it('renders a chip labelled with entry.path for each seenIn id', () => {
             const _case = createMockCase({
@@ -53,7 +53,7 @@ describe('Asset', () => {
                     { 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 }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
             expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
             expect(screen.getByText('events/obs-002')).toBeTruthy();
             expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
@@ -63,7 +63,7 @@ describe('Asset', () => {
                 case_id: 'case-abc',
                 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 }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
             const link = screen.getByText('alerts/my-analytic (hit-001)').closest('a');
             expect(link).not.toBeNull();
             expect(link?.getAttribute('href')).toBe('/cases/case-abc/alerts/my-analytic (hit-001)');

package/locales/en/translation.json

@@ -390,18 +390,18 @@
     "page.403.title": "403: Access Forbidden",
     "page.404.description": "The page you are looking for cannot be found...",
     "page.404.title": "404: Not found",
-    "page.cases.assets": "Assets",
-    "page.cases.assets.empty": "No assets found.",
-    "page.cases.assets.filter_by_type": "Filter by type:",
-    "page.cases.assets.seen_in": "Seen in",
-    "page.cases.assets.type.hash": "Hash",
-    "page.cases.assets.type.hosts": "Host",
-    "page.cases.assets.type.id": "ID",
-    "page.cases.assets.type.ids": "ID",
-    "page.cases.assets.type.ip": "IP",
-    "page.cases.assets.type.signature": "Signature",
-    "page.cases.assets.type.uri": "URI",
-    "page.cases.assets.type.user": "User",
+    "page.cases.observables": "Observables",
+    "page.cases.observables.empty": "No observables found.",
+    "page.cases.observables.filter_by_type": "Filter by type:",
+    "page.cases.observables.seen_in": "Seen in",
+    "page.cases.observables.type.hash": "Hash",
+    "page.cases.observables.type.hosts": "Host",
+    "page.cases.observables.type.id": "ID",
+    "page.cases.observables.type.ids": "ID",
+    "page.cases.observables.type.ip": "IP",
+    "page.cases.observables.type.signature": "Signature",
+    "page.cases.observables.type.uri": "URI",
+    "page.cases.observables.type.user": "User",
     "page.cases.created": "Created",
     "page.cases.dashboard": "Dashboard",
     "page.cases.dashboard.alerts": "Alerts",
@@ -420,6 +420,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Properties",
     "page.cases.detail.status": "Status",
+    "page.cases.detail.escalation": "Escalation",
     "page.cases.detail.viewers": "Active Viewers",
     "page.cases.escalation": "Escalation",
     "page.cases.folder.drop.root": "Place here to move to root",

package/locales/fr/translation.json

@@ -390,18 +390,18 @@
     "page.403.title": "403: Accès interdit",
     "page.404.description": "La page que vous recherchez est introuvable ...",
     "page.404.title": "404: Introuvable",
-    "page.cases.assets": "Actifs",
-    "page.cases.assets.empty": "Aucun actif trouvé.",
-    "page.cases.assets.filter_by_type": "Filtrer par type :",
-    "page.cases.assets.seen_in": "Vu dans",
-    "page.cases.assets.type.hash": "Hachage",
-    "page.cases.assets.type.hosts": "Hôte",
-    "page.cases.assets.type.id": "Identifiant",
-    "page.cases.assets.type.ids": "Identifiant",
-    "page.cases.assets.type.ip": "IP",
-    "page.cases.assets.type.signature": "Signature",
-    "page.cases.assets.type.uri": "URI",
-    "page.cases.assets.type.user": "Utilisateur",
+    "page.cases.observables": "Observables",
+    "page.cases.observables.empty": "Aucun observable trouvé.",
+    "page.cases.observables.filter_by_type": "Filtrer par type :",
+    "page.cases.observables.seen_in": "Vu dans",
+    "page.cases.observables.type.hash": "Hachage",
+    "page.cases.observables.type.hosts": "Hôte",
+    "page.cases.observables.type.id": "Identifiant",
+    "page.cases.observables.type.ids": "Identifiant",
+    "page.cases.observables.type.ip": "IP",
+    "page.cases.observables.type.signature": "Signature",
+    "page.cases.observables.type.uri": "URI",
+    "page.cases.observables.type.user": "Utilisateur",
     "page.cases.created": "Créé",
     "page.cases.dashboard": "Tableau de bord",
     "page.cases.dashboard.alerts": "Alertes",
@@ -420,6 +420,7 @@
     "page.cases.detail.participants": "Participants",
     "page.cases.detail.properties": "Propriétés",
     "page.cases.detail.status": "Statut",
+    "page.cases.detail.escalation": "Escalade",
     "page.cases.detail.viewers": "Spectateurs actifs",
     "page.cases.escalation": "Escalade",
     "page.cases.folder.drop.root": "Déposer ici pour déplacer à la racine",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-cases.1097",
+  "version": "2.19.0-cases.1111",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -212,7 +212,7 @@
     "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
     "./components/routes/cases/detail/aggregates/*": "./components/routes/cases/detail/aggregates/*.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/observables/*": "./components/routes/cases/detail/observables/*.js",
     "./components/app/providers/*": "./components/app/providers/*.js",
     "./components/app/drawers/*": "./components/app/drawers/*.js",
     "./components/app/hooks/*": "./components/app/hooks/*.js",

package/components/routes/cases/detail/assets/Asset.d.ts

@@ -1,14 +0,0 @@
-import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
-import type { FC } from 'react';
-export type AssetType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
-export interface AssetEntry {
-    type: AssetType;
-    value: string;
-    /** IDs of the hits/events this asset was seen in */
-    seenIn: string[];
-}
-declare const Asset: FC<{
-    asset: AssetEntry;
-    case: Case;
-}>;
-export default Asset;