@cccsaurora/howler-ui 2.19.0-cases.863 → 2.19.0-dev.1000

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

@@ -1,66 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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.js

@@ -1,221 +0,0 @@
-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: '2026-06-01T00:00:00.000Z',
-    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('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', 'observable'] })]
-        });
-        render(_jsx(CaseRules, {}));
-        expect(screen.getByText('hit')).toBeInTheDocument();
-        expect(screen.getByText('observable')).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();
-    });
-});

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

@@ -1,8 +0,0 @@
-import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
-import { type FC } from 'react';
-interface CaseSidebarProps {
-    case: Case;
-    update: (newCase: Case) => void;
-}
-declare const CaseSidebar: FC<CaseSidebarProps>;
-export default CaseSidebar;

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

@@ -1,107 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { CalendarMonth, Circle, Dashboard, Dataset, Rule } from '@mui/icons-material';
-import { alpha, Box, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Typography, useTheme } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import dayjs from 'dayjs';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
-import { ESCALATION_COLOR_MAP } from '../constants';
-import CaseFolder from './sidebar/CaseFolder';
-import FolderEntry from './sidebar/FolderEntry';
-import RootDropZone from './sidebar/RootDropZone';
-const CaseSidebar = ({ case: _case, update }) => {
-    const { dispatchApi } = useMyApi();
-    const { t } = useTranslation();
-    const location = useLocation();
-    const theme = useTheme();
-    const sensors = useSensors(useSensor(MouseSensor, {
-        activationConstraint: {
-            distance: 5
-        }
-    }), useSensor(TouchSensor, {
-        activationConstraint: {
-            distance: 5
-        }
-    }));
-    const [loading, setLoading] = useState(false);
-    const [activeDragData, setActiveDragData] = useState(null);
-    const handleDragStart = useCallback((event) => {
-        const data = event.active.data.current;
-        setActiveDragData({ type: data.type, label: data.label ?? '' });
-    }, []);
-    const navItemSx = useCallback((isActive) => [
-        {
-            cursor: 'pointer',
-            px: 1,
-            py: 1,
-            transition: theme.transitions.create('background', { duration: 100 }),
-            color: `${theme.palette.text.primary} !important`,
-            textDecoration: 'none',
-            background: 'transparent',
-            borderRight: `thin solid ${theme.palette.divider}`,
-            '&:hover': {
-                background: alpha(theme.palette.grey[600], 0.25)
-            }
-        },
-        isActive && {
-            background: alpha(theme.palette.grey[600], 0.15),
-            borderRight: `3px solid ${theme.palette.primary.main}`
-        }
-    ], [
-        theme.palette.divider,
-        theme.palette.grey,
-        theme.palette.primary.main,
-        theme.palette.text.primary,
-        theme.transitions
-    ]);
-    const handleDragEnd = useCallback(async (event) => {
-        setActiveDragData(null);
-        if (!_case) {
-            return;
-        }
-        const { active, over } = event;
-        if (!over?.data.current || !active?.data.current) {
-            return;
-        }
-        const movingEntry = active.data.current.entry;
-        const movingType = active.data.current.type;
-        if (!movingEntry?.path) {
-            return;
-        }
-        const filename = movingEntry.path.split('/').pop();
-        const targetPath = over.data.current.path ? `${over.data.current.path}/${filename}` : filename;
-        if (!targetPath) {
-            return;
-        }
-        if (targetPath === movingEntry.path) {
-            return;
-        }
-        const items = _case.items.map(_item => (movingType === 'folder'
-            ? _item.path.startsWith(movingEntry.path)
-            : _item.value === movingEntry.value)
-            ? { ..._item, path: _item.path.replace(movingEntry.path, targetPath) }
-            : _item);
-        try {
-            setLoading(true);
-            const updatedCase = await dispatchApi(api.v2.case.put(_case.case_id, { items }));
-            update(updatedCase);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [_case, dispatchApi, update]);
-    return (_jsxs(Box, { sx: {
-            flex: 1,
-            maxWidth: '350px',
-            maxHeight: 'calc(100vh - 64px)',
-            display: 'flex',
-            flexDirection: 'column'
-        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}`), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/assets`), component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/timeline`), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname === `/cases/${_case?.case_id}/rules`), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
-                    position: 'relative',
-                    borderRight: `thin solid ${theme.palette.divider}`
-                }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: null, path: "", indent: 0, label: activeDragData.label, itemType: activeDragData.type })) })] })] }) }))] }));
-};
-export default CaseSidebar;