@cccsaurora/howler-ui 2.19.0-dev.1151 → 2.19.0-dev.1260

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
+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';
+const CaseDetails = ({ case: providedCase }) => {
+    const { t } = useTranslation();
+    const { case: _case, update: updateCase } = useCase({ case: providedCase });
+    const { showModal } = useContext(ModalContext);
+    const { viewers } = useContext(SocketContext);
+    const { config } = useContext(ApiConfigContext);
+    const [loading, setLoading] = useState(false);
+    const caseViewers = _case?.case_id ? (viewers[_case.case_id] ?? []) : [];
+    const wrappedUpdate = async (subset) => {
+        try {
+            setLoading(true);
+            await updateCase(subset);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleStatus = (status) => {
+        if (status === 'resolved') {
+            const onConfirm = () => wrappedUpdate({ status });
+            showModal(_jsx(ResolveModal, { case: _case, onConfirm: onConfirm }), { maxHeight: '80vh' });
+        }
+        else {
+            wrappedUpdate({ status });
+        }
+    };
+    if (!_case) {
+        return (_jsx(Card, { sx: {
+                borderRadius: 0,
+                width: '300px',
+                maxHeight: 'calc(100vh - 64px)',
+                display: 'flex',
+                flexDirection: 'column',
+                p: 1
+            }, children: _jsx(Skeleton, { variant: "rounded", height: 50 }) }));
+    }
+    return (_jsxs(Card, { elevation: 1, sx: {
+            borderRadius: 0,
+            width: '300px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column',
+            p: 1,
+            position: 'relative'
+        }, children: [_jsx(LinearProgress, { sx: { opacity: +loading, position: 'absolute', top: 0, left: 0, right: 0 } }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [{
+                                        'in-progress': _jsx(HourglassBottom, { color: "warning" }),
+                                        'on-hold': _jsx(Pause, { color: "disabled" }),
+                                        resolved: _jsx(Check, { color: "success" })
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, disableClearable: true, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => {
+                                    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.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.d.ts

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

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

@@ -0,0 +1,145 @@
+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 { 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/CaseObservables.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+declare const _default: import("react").NamedExoticComponent<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default _default;

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

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Chip, Grid, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { toArray, uniq } from 'lodash-es';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutletContext } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+import ObservableTable from './observables/ObservableTable';
+import { OBSERVABLE_FIELDS, buildObservableEntries, classifyRole, resolveSources } from './utils';
+const RELATED_FIELDS = OBSERVABLE_FIELDS.map(f => `related.${f}`).join(',');
+const EXTRA_FIELDS = 'howler.escalation,howler.outline.threat,howler.outline.target,howler.outline.indicators,threat.indicator.ip,threat.indicator.description';
+const CaseObservables = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const routeCase = useOutletContext();
+    const { case: _case } = useCase({ case: providedCase ?? routeCase, caseId });
+    const [records, setRecords] = useState(null);
+    const [activeFilters, setActiveFilters] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [originFilters, setOriginFilters] = useState([]);
+    const [roleFilters, setRoleFilters] = useState([]);
+    const [escalationOptions, setEscalationOptions] = useState([]);
+    const [activeEscalations, setActiveEscalations] = useState([]);
+    const [escalationMap, setEscalationMap] = useState(new Map());
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'event'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
+    useEffect(() => {
+        if (ids.length < 1) {
+            setRecords([]);
+            return;
+        }
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
+            query: `howler.id:(${ids.join(' OR ')})`,
+            fl: `howler.id,${RELATED_FIELDS},${EXTRA_FIELDS}`
+        })).then(response => {
+            setRecords(response.items);
+            // Build escalation map from fetched records
+            const escMap = new Map();
+            for (const record of response.items) {
+                const id = record.howler?.id ?? record.howler?.id;
+                const escalation = record.howler?.escalation;
+                if (id && escalation) {
+                    escMap.set(id, escalation);
+                }
+            }
+            setEscalationMap(escMap);
+        });
+    }, [dispatchApi, ids]);
+    useEffect(() => {
+        if (ids.length < 1) {
+            setEscalationOptions([]);
+            setActiveEscalations([]);
+            return;
+        }
+        dispatchApi(api.v2.search.facet.post(['hit', 'event'], {
+            fields: ['howler.escalation'],
+            filters: [`howler.id:(${ids.join(' OR ')})`]
+        }), { throwError: false }).then(result => {
+            if (result) {
+                setEscalationOptions(Object.keys(result['howler.escalation'] ?? {}));
+            }
+        });
+    }, [dispatchApi, ids]);
+    const allObservables = useMemo(() => {
+        if (!records || !_case) {
+            return [];
+        }
+        const entries = buildObservableEntries(records);
+        return entries.map(entry => ({
+            ...entry,
+            role: classifyRole(entry.value, _case, records),
+            sources: resolveSources(entry.seenIn, _case.items, escalationMap)
+        }));
+    }, [records, _case, escalationMap]);
+    const observableTypes = useMemo(() => (allObservables ? uniq(allObservables.map(a => a.type)).sort() : []), [allObservables]);
+    const filteredObservables = useMemo(() => {
+        if (allObservables.length < 1) {
+            return [];
+        }
+        let result = allObservables;
+        if (activeFilters.length > 0) {
+            result = result.filter(a => activeFilters.includes(a.type));
+        }
+        if (searchQuery.trim()) {
+            const query = searchQuery.trim().toLowerCase();
+            result = result.filter(a => a.value.toLowerCase().includes(query) || a.type.toLowerCase().includes(query));
+        }
+        if (originFilters.length > 0) {
+            result = result.filter(a => a.sources?.some(s => originFilters.includes(s.type)));
+        }
+        if (activeEscalations.length > 0) {
+            result = result.filter(a => a.sources?.some(s => s.escalation && activeEscalations.includes(s.escalation)));
+        }
+        if (roleFilters.length > 0) {
+            result = result.filter(a => a.role && roleFilters.includes(a.role));
+        }
+        return result;
+    }, [allObservables, activeFilters, searchQuery, originFilters, activeEscalations, roleFilters]);
+    const toggleSetItem = (setter, item) => {
+        setter(prev => {
+            if (prev.includes(item)) {
+                return prev.filter(_item => _item !== item);
+            }
+            else {
+                return [...prev, item];
+            }
+        });
+    };
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(TextField, { size: "small", placeholder: t('page.cases.observables.search'), value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { maxWidth: 360 }, id: "observable-search" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_type')} (${toArray(activeFilters)
+                                            .map(type => t(`page.cases.observables.type.${type}`))
+                                            .sort()
+                                            .join(', ')})`
+                                        : t('page.cases.observables.filter_by_type'), slotProps: {
+                                        chip: { size: 'small', color: activeFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: records === null ? (_jsx(Skeleton, { width: 200, height: 32 })) : (_jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: observableTypes.map(type => (_jsx(Chip, { label: t(`page.cases.observables.type.${type}`), size: "small", onClick: () => toggleSetItem(setActiveFilters, type), color: activeFilters.includes(type) ? 'primary' : 'default', variant: activeFilters.includes(type) ? 'filled' : 'outlined' }, type))) })) }), _jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: originFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_origin')} (${toArray(originFilters).join(', ')})`
+                                        : t('page.cases.observables.filter_by_origin'), slotProps: {
+                                        chip: { size: 'small', color: originFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: ['hit', 'event'].map(origin => (_jsx(Chip, { label: t(`page.cases.observables.origin.${origin}`), size: "small", onClick: () => toggleSetItem(setOriginFilters, origin), color: originFilters.includes(origin) ? 'primary' : 'default', variant: originFilters.includes(origin) ? 'filled' : 'outlined' }, origin))) }) }), _jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: roleFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_role')} (${toArray(roleFilters).join(', ')})`
+                                        : t('page.cases.observables.filter_by_role'), slotProps: {
+                                        chip: { size: 'small', color: roleFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: ['threat', 'target', 'indicator'].map(role => (_jsx(Chip, { label: t(`page.cases.observables.role.${role}`), size: "small", onClick: () => toggleSetItem(setRoleFilters, role), color: roleFilters.includes(role) ? 'primary' : 'default', variant: roleFilters.includes(role) ? 'filled' : 'outlined' }, role))) }) }), escalationOptions.length > 0 && (_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeEscalations.length > 0
+                                        ? `${t('page.cases.observables.filter_by_escalation')} (${toArray(activeEscalations).join(', ')})`
+                                        : t('page.cases.observables.filter_by_escalation'), slotProps: {
+                                        chip: {
+                                            size: 'small',
+                                            color: activeEscalations.length > 0 ? 'primary' : 'default'
+                                        }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: escalationOptions.map(esc => (_jsx(Chip, { label: esc, size: "small", onClick: () => toggleSetItem(setActiveEscalations, esc), color: activeEscalations.includes(esc) ? 'primary' : 'default', variant: activeEscalations.includes(esc) ? 'filled' : 'outlined' }, esc))) }) }))] })] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, children: _jsx(Skeleton, { height: 40 }) }, `skeleton-${i}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (_jsx(Grid, { item: true, xs: 12, children: _jsx(ObservableTable, { observables: filteredObservables, case: _case }) }))] }));
+};
+export default memo(CaseObservables);

package/components/routes/cases/detail/CaseObservables.test.d.ts

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

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

@@ -0,0 +1,169 @@
+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 { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Component rendering tests
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.fn();
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key, i18n: { language: 'en' } })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: vi.fn(() => Promise.resolve({ items: [] })),
+                facet: {
+                    post: vi.fn(() => Promise.resolve({}))
+                }
+            }
+        }
+    }
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({ case: c, updateCase: vi.fn(), loading: false, missing: false })
+}));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ value }) => createElement('span', null, value)
+}));
+const mockCase = {
+    case_id: 'case-001',
+    items: [
+        { type: 'hit', value: 'hit-1', path: 'alerts/analytic-1 (hit-1)' },
+        { type: 'observable', value: 'obs-1', path: 'observables/obs-1' }
+    ]
+};
+const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/observables'] }, children);
+// lazy import the component after mocks are set up
+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(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        const skeletons = document.querySelectorAll('.MuiSkeleton-root');
+        expect(skeletons.length).toBeGreaterThan(0);
+    });
+    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(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
+    });
+    it('renders observables in a table for extracted observables', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+        // Table headers should be present
+        expect(screen.getByText('page.cases.observables.columns.type')).toBeTruthy();
+        expect(screen.getByText('page.cases.observables.columns.value')).toBeTruthy();
+    });
+    it('renders a filter chip for each observable type present when popper is opened', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        // Open the type filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        // Filter chips visible in popper + table = at least 2 of each type
+        expect(screen.getAllByText('page.cases.observables.type.ip').length).toBeGreaterThanOrEqual(2);
+        expect(screen.getAllByText('page.cases.observables.type.user').length).toBeGreaterThanOrEqual(2);
+    });
+    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(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+        // Open the type filter popper and click the first 'ip' chip (in the popper)
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        await userEvent.click(screen.getAllByText('page.cases.observables.type.ip')[0]);
+        expect(screen.queryByText('alice')).toBeNull();
+        expect(screen.getByText('1.2.3.4')).toBeTruthy();
+    });
+    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(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        // Open the type filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        const ipChip = screen.getAllByText('page.cases.observables.type.ip')[0];
+        await userEvent.click(ipChip);
+        await userEvent.click(ipChip);
+        expect(screen.getByText('1.2.3.4')).toBeTruthy();
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders nothing when the case has no hit/observable items', async () => {
+        const emptyCase = { case_id: 'case-002', items: [] };
+        render(_jsx(CaseObservables, { case: emptyCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+    it('filters observables by search query', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        const searchInput = screen.getByPlaceholderText('page.cases.observables.search');
+        await userEvent.type(searchInput, 'alice');
+        expect(screen.queryByText('1.2.3.4')).toBeNull();
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders origin filter chips inside popper', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        // Open the origin filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_origin'));
+        expect(screen.getByText('page.cases.observables.origin.hit')).toBeTruthy();
+        expect(screen.getByText('page.cases.observables.origin.event')).toBeTruthy();
+    });
+    it('renders escalation filter chips from facet response', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce({
+            items: [{ howler: { id: 'hit-1', escalation: 'evidence' }, related: { ip: ['1.2.3.4'] } }]
+        })
+            .mockResolvedValueOnce({
+            'howler.escalation': { evidence: 1 }
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        await waitFor(() => {
+            // 'evidence' appears in the table escalation column
+            expect(screen.getByText('evidence')).toBeTruthy();
+        });
+    });
+    it('classifies roles and renders role chips in the table', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [
+                {
+                    howler: { id: 'hit-1', outline: { threat: 'malware.exe' } },
+                    related: { hosts: ['malware.exe'] }
+                }
+            ]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('malware.exe');
+        expect(screen.getByText('page.cases.observables.role.threat')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseOverview: FC<{
+    case: Case;
+    updateCase: (_case: Partial<Case>) => Promise<void>;
+}>;
+export default CaseOverview;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Edit, Save } from '@mui/icons-material';
+import { Box, Card, CardContent, CardHeader, Divider, IconButton, LinearProgress, Skeleton, Stack, useTheme } from '@mui/material';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import MarkdownEditor from '@cccsaurora/howler-ui/components/elements/MarkdownEditor';
+import { useEffect, useState } from 'react';
+const CaseOverview = ({ case: _case, updateCase }) => {
+    const theme = useTheme();
+    const [editing, setEditing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [overview, setOverview] = useState(_case?.overview);
+    useEffect(() => {
+        if (!editing && _case?.overview) {
+            setOverview(_case.overview);
+        }
+    }, [_case?.overview, editing]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 370 });
+    }
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsxs(Stack, { children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), _jsx(CardContent, { sx: { position: 'relative' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, sx: {
+                                '& > :first-child': {
+                                    marginTop: '0 !important'
+                                },
+                                '& > h1,h2,h3,h4,h5': {
+                                    fontSize: theme.typography.h5.fontSize
+                                }
+                            }, children: editing ? (_jsx(MarkdownEditor, { height: "40vh", content: overview, setContent: _content => setOverview(_content) })) : (_jsx(Markdown, { md: _case.overview })) }), _jsxs(Stack, { spacing: 1, children: [_jsx(IconButton, { size: "small", disabled: loading, onClick: async () => {
+                                        if (editing) {
+                                            try {
+                                                setLoading(true);
+                                                await updateCase({ overview });
+                                            }
+                                            finally {
+                                                setEditing(false);
+                                                setLoading(false);
+                                            }
+                                        }
+                                        else {
+                                            setEditing(true);
+                                        }
+                                    }, children: editing ? _jsx(Save, { color: loading ? 'disabled' : 'success', fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }), editing && (_jsx(IconButton, { size: "small", disabled: loading, onClick: () => setEditing(false), children: _jsx(Clear, { color: loading ? 'disabled' : 'error', fontSize: "small" }) }))] })] }) })] }));
+};
+export default CaseOverview;

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseRules: FC<{
+    case?: Case;
+    caseId?: string;
+}>;
+export default CaseRules;