@cccsaurora/howler-ui 2.19.0-dev.836 → 2.19.0-dev.842

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

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+import { buildAssetEntries } from './CaseAssets';
+// ---------------------------------------------------------------------------
+// Pure logic tests — no React needed
+// ---------------------------------------------------------------------------
+describe('buildAssetEntries', () => {
+    it('returns an empty array for records with no related field', () => {
+        expect(buildAssetEntries([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'] } })]);
+        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([
+            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([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockObservable({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
+        expect(result).toHaveLength(1);
+        expect(result[0].seenIn).toEqual(['h1', 'obs1']);
+    });
+    it('keeps distinct asset values as separate entries', () => {
+        const result = buildAssetEntries([
+            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([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
+        expect(result[0].seenIn).toEqual(['h1']);
+    });
+    it('skips records with no howler.id', () => {
+        const noId = { related: { ip: ['1.2.3.4'] } };
+        expect(buildAssetEntries([noId])).toEqual([]);
+    });
+    it('handles the scalar `id` field on Related', () => {
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
+    });
+    it('handles array fields like hash, hosts, user, ids, uri, signature', () => {
+        const related = {
+            hash: ['abc123'],
+            hosts: ['host.example.com'],
+            user: ['bob'],
+            ids: ['guid-1'],
+            uri: ['https://example.com'],
+            signature: ['rule-X']
+        };
+        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        const types = result.map(a => a.type).sort();
+        expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
+    });
+});
+// ---------------------------------------------------------------------------
+// Component rendering tests
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.fn();
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({ case: c, updateCase: vi.fn(), loading: false, missing: false })
+}));
+const mockCase = {
+    case_id: 'case-001',
+    items: [
+        { type: 'hit', value: 'hit-1' },
+        { type: 'observable', value: 'obs-1' }
+    ]
+};
+const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);
+// lazy import the component after mocks are set up
+const CaseAssets = (await import('./CaseAssets')).default;
+describe('CaseAssets component', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockClear();
+    });
+    it('renders skeletons while records are loading', () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
+        render(_jsx(CaseAssets, { 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 () => {
+        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');
+    });
+    it('renders asset cards for extracted assets', 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.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders a filter chip for each asset 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);
+    });
+    it('filters assets 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
+        await screen.findByText('1.2.3.4');
+        expect(screen.getByText('alice')).toBeTruthy();
+        // Click the 'ip' filter chip
+        await act(async () => {
+            await userEvent.click(screen.getByRole('button', { name: 'page.cases.assets.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 () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        const ipChip = screen.getByRole('button', { name: 'page.cases.assets.type.ip' });
+        await act(async () => {
+            await userEvent.click(ipChip);
+        });
+        await act(async () => {
+            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(CaseAssets, { case: emptyCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.assets.empty');
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+});

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

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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { difference, get, isNil } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useOutletContext } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import useCase from '../hooks/useCase';
+import CaseAggregate from './aggregates/CaseAggregate';
+import AlertPanel from './AlertPanel';
+import CaseOverview from './CaseOverview';
+import RelatedCasePanel from './RelatedCasePanel';
+import TaskPanel from './TaskPanel';
+const AGGREGATE_FIELDS = [
+    ['howler.outline.threat', 'material-symbols:warning-rounded', 'warning.main', 'page.cases.dashboard.threat'],
+    ['howler.outline.target', 'material-symbols:group', 'primary.main', 'page.cases.dashboard.target'],
+    ['howler.outline.indicators', 'fluent:number-symbol-24-filled', null, 'page.cases.dashboard.indicators']
+];
+const getDuration = (case_) => {
+    if (case_?.start) {
+        return dayjs
+            .duration(dayjs(case_?.end ?? new Date()).diff(dayjs(case_.start), 'minute'), 'minute')
+            .format('HH[h] mm[m]');
+    }
+    return '--';
+};
+const CaseDashboard = ({ case: providedCase, caseId }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const routeCase = useOutletContext();
+    const { case: _case, update: updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
+    const [invalidIds, setInvalidIds] = useState([]);
+    const ids = useMemo(() => (_case?.items ?? [])
+        .filter(item => ['hit', 'observable'].includes(item.type))
+        .map(item => item.value)
+        .filter(val => !!val), [_case?.items]);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const caseRecords = useMemo(() => Object.fromEntries(ids.map(id => [id, records[id]])), [ids, records]);
+    useEffect(() => {
+        const missingIds = Object.entries(caseRecords)
+            .filter(([id, record]) => !invalidIds.includes(id) && isNil(record))
+            .map(([id]) => id);
+        if (missingIds.length < 1) {
+            return;
+        }
+        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+            query: `howler.id:(${missingIds.join(' OR ')})`,
+            metadata: ['template', 'analytic']
+        })).then(response => {
+            loadRecords(response.items);
+            setInvalidIds(difference(missingIds, response.items.map(record => record.howler.id)));
+        });
+    }, [caseRecords, dispatchApi, ids, invalidIds, loadRecords]);
+    if (!_case) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(CaseOverview, { case: _case, updateCase: updateCase }) }), AGGREGATE_FIELDS.map(([field, icon, iconColor, subtitle]) => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: icon, iconColor: iconColor && get(theme.palette, iconColor), field: field, records: Object.values(caseRecords), subtitle: t(subtitle) }) }, field))), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
+};
+export default CaseDashboard;

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

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

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

@@ -0,0 +1,70 @@
+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 { 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 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, 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: {
+                                            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 }) }) })] })] }) })] })] })] }));
+};
+export default CaseDetails;

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;

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

@@ -0,0 +1,57 @@
+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 dayjs from 'dayjs';
+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));
+        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) {
+                    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 }));
+        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 => {
+                                    const _timeframe = rule.timeframe ? dayjs(rule.timeframe) : null;
+                                    return (_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: _timeframe ? (_jsx(Chip, { size: "small", label: _timeframe.format('YYYY-MM-DD HH:mm'), color: _timeframe.isBefore(dayjs()) ? 'error' : '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 {};