@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

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

@@ -0,0 +1,127 @@
+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 } 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 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;
+        }
+        void dispatchApi(api.v2.search.post(['hit', 'event'], {
+            query: `howler.id:(${ids.join(' OR ')})`,
+            fl: `howler.id,${RELATED_FIELDS},${EXTRA_FIELDS}`
+        }), { throwError: false, showError: true }).then(response => response && setRecords(response.items));
+    }, [dispatchApi, ids]);
+    useEffect(() => {
+        if (ids.length < 1) {
+            setEscalationOptions([]);
+            setActiveEscalations([]);
+            return;
+        }
+        void 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 (!_case) {
+            return [];
+        }
+        if (!records?.length) {
+            return [];
+        }
+        return buildObservableEntries(_case, records);
+    }, [records, _case]);
+    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,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { 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 screen.findByText('page.cases.observables.filter_by_escalation');
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_escalation'));
+        expect(screen.getAllByText('evidence').length).toBeGreaterThanOrEqual(2);
+    });
+    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,40 @@
+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, { children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, className: "no-margin-first-child", sx: {
+                                '& > 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;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Delete } from '@mui/icons-material';
+import { Button, Card, Chip, IconButton, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutletContext } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+import CreateRuleDialog from './CreateRuleDialog';
+const CaseRules = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { showModal } = useContext(ModalContext);
+    const routeCase = useOutletContext();
+    const { case: _case, update } = useCase({ case: providedCase ?? routeCase, caseId });
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const handleCreateRule = useCallback(async (ruleData) => {
+        if (!_case) {
+            return;
+        }
+        const updatedCase = await dispatchApi(api.v2.case.rules.post(_case.case_id, ruleData));
+        void update(updatedCase, false);
+    }, [_case, dispatchApi, update]);
+    const handleDeleteRule = useCallback(async (ruleId) => {
+        if (!_case) {
+            return;
+        }
+        showModal(_jsx(ConfirmDeleteModal, { onConfirm: async () => {
+                const updatedCase = await dispatchApi(api.v2.case.rules.del(_case.case_id, ruleId), { throwError: false });
+                if (updatedCase) {
+                    void update(updatedCase, false);
+                }
+            } }), { height: 'auto' });
+    }, [_case, dispatchApi, showModal, update]);
+    const handleToggleEnabled = useCallback(async (ruleId, enabled) => {
+        if (!_case) {
+            return;
+        }
+        const updatedCase = await dispatchApi(api.v2.case.rules.put(_case.case_id, ruleId, { enabled }));
+        void update(updatedCase, false);
+    }, [_case, dispatchApi, update]);
+    if (!_case) {
+        return null;
+    }
+    const rules = _case.rules ?? [];
+    return (_jsxs(Stack, { spacing: 2, sx: { p: 2, height: '100%', overflow: 'auto' }, children: [_jsx(Button, { id: "create-rule-button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: () => setDialogOpen(true), sx: { alignSelf: 'end' }, children: t('page.cases.rules.create') }), _jsx(Card, { children: rules.length === 0 ? (_jsx(Typography, { m: 2, color: "textSecondary", textAlign: "center", children: t('page.cases.rules.empty') })) : (_jsx(TableContainer, { children: _jsxs(Table, { id: "rules-table", size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.cases.rules.destination') }), _jsx(TableCell, { children: t('page.cases.rules.query') }), _jsx(TableCell, { children: t('hit.search.index') }), _jsx(TableCell, { children: t('page.cases.rules.timeframe') }), _jsx(TableCell, { children: t('page.cases.rules.author') }), _jsx(TableCell, { align: "center", children: t('enabled') }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rules.map(rule => (_jsxs(TableRow, { id: `rule-row-${rule.rule_id}`, children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: rule.destination }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: {
+                                                    fontFamily: 'monospace'
+                                                }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: rule.timeframe != null ? (_jsx(Chip, { size: "small", label: rule.expire_after_resolved
+                                                    ? t('page.cases.rules.timeframe.after_resolved', { days: rule.timeframe })
+                                                    : t('page.cases.rules.timeframe.days', { days: rule.timeframe }), color: rule.expire_after_resolved ? 'info' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id))) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
+};
+export default CaseRules;

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

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

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

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockUpdate = vi.hoisted(() => vi.fn());
+const mockShowModal = vi.hoisted(() => vi.fn());
+const mockCase = vi.hoisted(() => ({
+    current: {
+        case_id: 'case-001',
+        title: 'Test Case',
+        rules: []
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ showModal: mockShowModal, close: vi.fn(), setContent: vi.fn() })
+    };
+});
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({
+        case: c ?? mockCase.current,
+        update: mockUpdate,
+        loading: false,
+        missing: false
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useOutletContext: () => mockCase.current,
+        useLocation: () => ({ pathname: '/cases/case-001/rules', search: '' }),
+        useParams: () => ({ id: 'case-001' }),
+        useNavigate: () => vi.fn()
+    };
+});
+const mockOnSubmit = vi.hoisted(() => ({ current: null }));
+vi.mock('./CreateRuleDialog', () => ({
+    default: ({ open, onClose, onSubmit }) => {
+        mockOnSubmit.current = onSubmit;
+        return open ? (_jsxs("div", { id: "create-rule-dialog", children: [_jsx("button", { id: "rule-submit-button", onClick: () => onSubmit({ query: 'event.kind:alert', destination: 'alerts/incoming' }), children: "submit" }), _jsx("button", { onClick: onClose, children: "cancel" })] })) : null;
+    }
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                rules: {
+                    post: vi.fn(),
+                    del: vi.fn(),
+                    put: vi.fn()
+                }
+            }
+        }
+    }
+}));
+import api from '@cccsaurora/howler-ui/api';
+import CaseRules from './CaseRules';
+const makeRule = (overrides) => ({
+    rule_id: 'rule-001',
+    query: 'event.kind:alert',
+    destination: 'alerts/{{howler.analytic}}',
+    author: 'analyst1',
+    enabled: true,
+    timeframe: 14,
+    expire_after_resolved: false,
+    indexes: ['hit'],
+    ...overrides
+});
+describe('CaseRules', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            title: 'Test Case',
+            rules: []
+        });
+    });
+    it('renders empty state when no rules exist', () => {
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.empty')).toBeInTheDocument();
+    });
+    it('renders rule list with destination, query, author, and timeframe', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByTestId('rules-table')).toBeInTheDocument();
+        expect(screen.getByText('alerts/{{howler.analytic}}')).toBeInTheDocument();
+        expect(screen.getByText('event.kind:alert')).toBeInTheDocument();
+        expect(screen.getByText('analyst1')).toBeInTheDocument();
+    });
+    it('shows no expiry chip when timeframe is null', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: undefined })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.no_expiry')).toBeInTheDocument();
+    });
+    it('shows after-resolved chip when expire_after_resolved is true', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 7, expire_after_resolved: true })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.after_resolved')).toBeInTheDocument();
+    });
+    it('shows days chip when expire_after_resolved is false', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 14, expire_after_resolved: false })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.days')).toBeInTheDocument();
+    });
+    it('renders enabled toggle for each rule', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        render(_jsx(CaseRules, {}));
+        const toggle = screen.getByTestId('rule-toggle-rule-001');
+        expect(toggle).toBeInTheDocument();
+    });
+    it('renders index chips for rule indexes', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ indexes: ['hit', 'event'] })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('hit')).toBeInTheDocument();
+        expect(screen.getByText('event')).toBeInTheDocument();
+    });
+    it('defaults to hit chip when indexes is undefined', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ indexes: undefined })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('hit')).toBeInTheDocument();
+    });
+    it('opens create rule dialog when create button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('create-rule-button'));
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('create-rule-dialog')).toBeInTheDocument();
+        });
+    });
+    it('submits create rule form and calls API', async () => {
+        const user = userEvent.setup();
+        const updatedCase = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ rule_id: 'new-rule' })]
+        });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        api.v2.case.rules.post.mockReturnValue('post-request');
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('create-rule-button'));
+        });
+        await waitFor(() => {
+            expect(screen.getByTestId('create-rule-dialog')).toBeInTheDocument();
+        });
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-submit-button'));
+        });
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('post-request');
+        });
+    });
+    it('calls delete API when delete is confirmed via modal', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        const updatedCase = createMockCase({ case_id: 'case-001', rules: [] });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        api.v2.case.rules.del.mockReturnValue('del-request');
+        // Make showModal immediately invoke the onConfirm callback
+        mockShowModal.mockImplementation((modal) => {
+            modal.props.onConfirm();
+        });
+        render(_jsx(CaseRules, {}));
+        await act(async () => {
+            await user.click(screen.getByTestId('rule-delete-rule-001'));
+        });
+        await waitFor(() => {
+            expect(mockShowModal).toHaveBeenCalled();
+            expect(mockDispatchApi).toHaveBeenCalledWith('del-request', { throwError: false });
+        });
+    });
+    it('calls put API when enabled toggle is clicked', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ enabled: true })]
+        });
+        const updatedCase = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ enabled: false })]
+        });
+        mockDispatchApi.mockResolvedValueOnce(updatedCase);
+        vi.mocked(api.v2.case.rules.put).mockReturnValue('put-request');
+        render(_jsx(CaseRules, {}));
+        const toggle = screen.getByTestId('rule-toggle-rule-001');
+        await act(async () => {
+            await user.click(toggle);
+        });
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('put-request');
+        });
+    });
+    it('renders multiple rules', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [
+                makeRule({ rule_id: 'rule-001', query: 'query1' }),
+                makeRule({ rule_id: 'rule-002', query: 'query2', author: 'analyst2' })
+            ]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('query1')).toBeInTheDocument();
+        expect(screen.getByText('query2')).toBeInTheDocument();
+        expect(screen.getByText('analyst2')).toBeInTheDocument();
+    });
+});