@cccsaurora/howler-ui 2.18.0-dev.710 → 2.18.0-dev.716

package/components/elements/hit/HitCard.d.ts

@@ -3,5 +3,6 @@ declare const _default: import("react").NamedExoticComponent<{
     id?: string;
     layout: HitLayout;
     readOnly?: boolean;
+    elevation?: number;
 }>;
 export default _default;

package/components/elements/hit/HitCard.js

@@ -7,7 +7,7 @@ import HowlerCard from '../display/HowlerCard';
 import HitBanner from './HitBanner';
 import HitLabels from './HitLabels';
 import HitOutline from './HitOutline';
-const HitCard = ({ id, layout, readOnly = true }) => {
+const HitCard = ({ id, layout, readOnly = true, elevation }) => {
     const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const hit = useContextSelector(RecordContext, ctx => ctx.records[id]);
     useEffect(() => {
@@ -19,6 +19,6 @@ const HitCard = ({ id, layout, readOnly = true }) => {
     if (!hit) {
         return _jsx(Skeleton, { variant: "rounded", height: "200px" });
     }
-    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), _jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
+    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, elevation: elevation, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), _jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
 };
 export default memo(HitCard);

package/components/routes/cases/CaseViewer.js

@@ -13,10 +13,10 @@ const CaseViewer = () => {
     if (missing) {
         return _jsx(NotFoundPage, {});
     }
-    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
-                    maxHeight: 'calc(100vh - 64px)',
-                    flex: 1,
-                    overflow: 'auto'
-                }, children: _jsx(ErrorBoundary, { children: _jsx(Outlet, { context: _case }) }) }), _jsx(CaseDetails, { case: _case })] }));
+    return (_jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
+                        maxHeight: 'calc(100vh - 64px)',
+                        flex: 1,
+                        overflow: 'auto'
+                    }, children: _jsx(ErrorBoundary, { children: _jsx(Outlet, { context: _case }) }) }), _jsx(CaseDetails, { case: _case })] }) }));
 };
 export default memo(CaseViewer);

package/components/routes/cases/detail/sidebar/CaseFolder.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Article, BookRounded, CheckCircle, ChevronRight, Folder as FolderIcon, Lightbulb, Link as LinkIcon, TableChart, Visibility } from '@mui/icons-material';
 import { alpha, Skeleton, Stack, Typography, 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 { omit } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
 import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import CaseFolderContextMenu from './CaseFolderContextMenu';
 import { buildTree } from './utils';
@@ -24,7 +26,8 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
     const { dispatchApi } = useMyApi();
     const [open, setOpen] = useState(true);
     const [caseStates, setCaseStates] = useState({});
-    const [hitMetadata, setHitMetadata] = useState({});
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
     const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
     const currentRootCaseId = rootCaseId || _case?.case_id;
     const hitIds = useMemo(() => _case?.items
@@ -36,15 +39,15 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
             return;
         }
         dispatchApi(api.search.hit.post({ query: `howler.id:(${hitIds.join(' OR ')})` }), { throwError: false }).then(result => {
-            if ((result?.items?.length ?? 0) < 1)
+            if (result?.items?.length < 1) {
                 return;
-            setHitMetadata(Object.fromEntries(result.items.map(hit => [hit.howler.id, hit.howler])));
+            }
         });
-    }, [hitIds, dispatchApi]);
+    }, [hitIds, dispatchApi, _case.status, loadRecords]);
     // Returns the MUI colour token for the item's escalation, or undefined if none.
     const getEscalationColor = (itemType, itemKey, leafId) => {
         if (itemType === 'hit' && leafId) {
-            const color = ESCALATION_COLORS[hitMetadata[leafId]?.escalation];
+            const color = ESCALATION_COLORS[records[leafId]?.howler?.escalation];
             if (color)
                 return color;
         }

package/components/routes/cases/modals/ResolveModal.js

@@ -1,19 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OpenInNew } from '@mui/icons-material';
-import { Autocomplete, Box, Button, Card, Chip, Divider, IconButton, LinearProgress, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import { KeyboardArrowDown, OpenInNew } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Divider, IconButton, LinearProgress, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import AnalyticLink from '@cccsaurora/howler-ui/components/elements/hit/elements/AnalyticLink';
 import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { uniq } from 'lodash-es';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { isNil, uniq } from 'lodash-es';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
 import useCase from '../hooks/useCase';
+const HitEntry = ({ hit, checked, onChange }) => {
+    if (!hit) {
+        return _jsx(Skeleton, { variant: "rounded", height: "40px", width: "100%" });
+    }
+    return (_jsxs(Accordion, { sx: { flexShrink: 0, px: 0, py: 0 }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), sx: {
+                    px: 1,
+                    py: 0,
+                    minHeight: '48px !important',
+                    '& > *': {
+                        margin: '0 !important'
+                    }
+                }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, pr: 1, width: "100%", children: [!isNil(checked) && (_jsx(Checkbox, { size: "small", checked: checked, onClick: e => {
+                                onChange?.();
+                                e.preventDefault();
+                                e.stopPropagation();
+                            } })), _jsx(AnalyticLink, { hit: hit, compressed: true, alignSelf: "center" }), _jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE }), _jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: "small", color: "primary" }), _jsx("div", { style: { flex: 1 } }), _jsx(IconButton, { size: "small", component: Link, to: `/hits/${hit.howler.id}`, children: _jsx(OpenInNew, { fontSize: "small" }) })] }) }), _jsx(AccordionDetails, { children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL, elevation: 0 }) })] }, hit.howler.id));
+};
 const ResolveModal = ({ case: _case, onConfirm }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
@@ -23,40 +43,73 @@ const ResolveModal = ({ case: _case, onConfirm }) => {
     const [loading, setLoading] = useState(true);
     const [rationale, setRationale] = useState('');
     const [assessment, setAssessment] = useState(null);
-    const [hits, setHits] = useState([]);
+    const [selectedHitIds, setSelectedHitIds] = useState(new Set());
     const hitIds = useMemo(() => uniq((_case?.items ?? [])
         .filter(item => item.type === 'hit')
         .map(item => item.value)
         .filter(Boolean)), [_case?.items]);
-    const { assess } = useHitActions(hits);
+    const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const hits = useMemo(() => hitIds.map(id => records[id]).filter(Boolean), [hitIds, records]);
+    const selectedHits = useMemo(() => hits.filter(hit => selectedHitIds.has(hit.howler.id)), [hits, selectedHitIds]);
+    const { assess } = useHitActions(selectedHits);
+    const unresolvedHits = useMemo(() => hitIds.filter(id => {
+        const record = records[id];
+        if (!record) {
+            // Treat missing records as unresolved until they are loaded
+            return true;
+        }
+        return record.howler.status !== 'resolved';
+    }), [hitIds, records]);
+    const handleConfirm = async () => {
+        setLoading(true);
+        try {
+            await assess(assessment, true, rationale);
+            setSelectedHitIds(new Set());
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleToggleHit = useCallback((hitId) => {
+        setSelectedHitIds(prev => {
+            const next = new Set(prev);
+            if (next.has(hitId)) {
+                next.delete(hitId);
+            }
+            else {
+                next.add(hitId);
+            }
+            return next;
+        });
+    }, []);
     useEffect(() => {
         (async () => {
             try {
                 const result = await dispatchApi(api.search.hit.post({
-                    query: `howler.id:(${hitIds.join(' OR ')}) AND -howler.status:resolved`,
+                    query: `howler.id:(${hitIds.join(' OR ')})`,
                     metadata: ['analytic']
                 }));
-                setHits(result.items);
+                loadRecords(result.items);
             }
             finally {
                 setLoading(false);
             }
         })();
-    }, [dispatchApi, hitIds]);
-    const handleConfirm = async () => {
-        setLoading(true);
-        try {
-            await assess(assessment, true, rationale);
-            await updateCase({ status: 'resolved' });
+    }, [dispatchApi, hitIds, loadRecords]);
+    useEffect(() => {
+        if (loading || unresolvedHits.length > 0) {
+            return;
+        }
+        updateCase({ status: 'resolved' }).then(() => {
             onConfirm();
             close();
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups['howler.assessment'], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), fullWidth: true })) }) })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), loading
-                        ? hitIds.map(id => _jsx(Skeleton, { variant: "rounded", height: "40px", width: "100%" }, id))
-                        : hits.map(hit => (_jsx(Card, { sx: { p: 1, flexShrink: 0 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(AnalyticLink, { hit: hit, compressed: true, alignSelf: "center" }), _jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE }), _jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: "small", color: "primary" }), _jsx("div", { style: { flex: 1 } }), _jsx(IconButton, { size: "small", component: Link, to: `/hits/${hit.howler.id}`, children: _jsx(OpenInNew, { fontSize: "small" }) })] }) }, hit.howler.id)))] }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: loading || !assessment || !rationale, onClick: handleConfirm, children: t('confirm') })] })] }));
+        });
+    }, [close, loading, onConfirm, unresolvedHits.length, updateCase]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), "aria-label": t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups['howler.assessment'], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), "aria-label": t('hit.details.actions.assessment'), fullWidth: true })) }) })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), hits
+                        .filter(hit => unresolvedHits.includes(hit.howler.id))
+                        .map(hit => (_jsx(HitEntry, { hit: hit, checked: selectedHitIds.has(hit.howler.id), onChange: () => handleToggleHit(hit.howler.id) }, hit.howler.id))), _jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), children: t('modal.cases.alerts.resolved') }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: hits
+                                        .filter(hit => !unresolvedHits.includes(hit.howler.id))
+                                        .map(hit => (_jsx(HitEntry, { hit: hit }, hit.howler.id))) }) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: loading || !assessment || !rationale || selectedHitIds.size === 0, startIcon: loading ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : undefined, onClick: handleConfirm, children: t('confirm') })] })] }));
 };
 export default ResolveModal;

package/components/routes/cases/modals/ResolveModal.test.d.ts

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

package/components/routes/cases/modals/ResolveModal.test.js

@@ -0,0 +1,384 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import {} from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import ResolveModal from './ResolveModal';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockAssess = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockUpdateCase = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockClose = vi.hoisted(() => vi.fn());
+const mockLoadRecords = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useHitActions', () => ({
+    default: () => ({ assess: mockAssess })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: () => ({ update: mockUpdateCase })
+}));
+vi.mock('components/elements/hit/elements/AnalyticLink', () => ({
+    default: ({ hit }) => _jsx("span", { "data-testid": `analytic-${hit.howler.id}`, children: hit.howler.analytic })
+}));
+vi.mock('components/elements/hit/elements/EscalationChip', () => ({
+    default: () => null
+}));
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `HitCard:${id}` })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: (params) => params
+            }
+        }
+    }
+}));
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: () => ({ user: { username: 'test-user' } })
+}));
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+const mockConfig = {
+    lookups: {
+        'howler.assessment': ['legitimate', 'false_positive', 'non_issue']
+    }
+};
+const makeUnresolvedHit = (id) => createMockHit({ howler: { id, status: 'open', analytic: `analytic-${id}` } });
+const makeResolvedHit = (id) => createMockHit({ howler: { id, status: 'resolved', analytic: `analytic-${id}` } });
+const HIT_1 = makeUnresolvedHit('hit-1');
+const HIT_2 = makeUnresolvedHit('hit-2');
+const HIT_RESOLVED = makeResolvedHit('hit-resolved');
+const caseWithHits = (hitIds) => createMockCase({
+    case_id: 'case-1',
+    items: hitIds.map(id => ({ type: 'hit', value: id }))
+});
+// ---------------------------------------------------------------------------
+// Wrapper factory
+// ---------------------------------------------------------------------------
+const createWrapper = (records = {}) => {
+    const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ModalContext.Provider, { value: { close: mockClose, open: vi.fn(), setContent: vi.fn() }, children: _jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { children: children }) }) }) }) }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Clicks a MUI Checkbox — operates on the ButtonBase parent of the hidden input
+ * so that user-event's special checkbox-input code path is bypassed and the
+ * component's own onClick handler fires correctly.
+ */
+const clickCheckbox = (checkbox) => {
+    fireEvent.click(checkbox.parentElement);
+};
+/** Fills in assessment and rationale so the confirm button becomes enabled. */
+const fillForm = async (user, assessment = 'legitimate', rationale = 'Test rationale') => {
+    const rationaleInput = screen.getByPlaceholderText(i18n.t('modal.rationale.label'));
+    await user.clear(rationaleInput);
+    await user.type(rationaleInput, rationale);
+    // Typing into the combobox triggers MUI Autocomplete's onInputChange which
+    // opens the listbox — a plain click does not reliably open it in jsdom.
+    // The combobox has no accessible label (only a placeholder), so we query by
+    // role alone — there is exactly one combobox in the modal.
+    const assessmentInput = screen.getByRole('combobox');
+    await user.type(assessmentInput, assessment.slice(0, 3));
+    const option = await screen.findByRole('option', { name: assessment });
+    await user.click(option);
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('ResolveModal', () => {
+    let user;
+    let mockOnConfirm;
+    beforeEach(() => {
+        user = userEvent.setup();
+        mockOnConfirm = vi.fn();
+        vi.clearAllMocks();
+        // Default: resolve immediately with an empty items list
+        mockDispatchApi.mockResolvedValue({ items: [] });
+    });
+    // -------------------------------------------------------------------------
+    // Initial render
+    // -------------------------------------------------------------------------
+    describe('initial render', () => {
+        it('shows the modal title', () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByText(i18n.t('modal.cases.resolve'))).toBeInTheDocument();
+        });
+        it('shows the modal description', () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByText(i18n.t('modal.cases.resolve.description'))).toBeInTheDocument();
+        });
+        it('renders a cancel button', () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByRole('button', { name: i18n.t('cancel') })).toBeInTheDocument();
+        });
+        it('renders a confirm button', () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeInTheDocument();
+        });
+        it('shows the "Resolved Alerts" accordion', () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByText(i18n.t('modal.cases.alerts.resolved'))).toBeInTheDocument();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Loading state
+    // -------------------------------------------------------------------------
+    describe('loading state', () => {
+        it('shows a LinearProgress while the API call is pending', () => {
+            mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
+            const { container } = render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            const progress = container.querySelector('.MuiLinearProgress-root');
+            expect(progress).toBeInTheDocument();
+            // opacity is 1 while loading
+            expect(progress).toHaveStyle({ opacity: '1' });
+        });
+        it('disables the confirm button while loading', () => {
+            mockDispatchApi.mockReturnValue(new Promise(() => { }));
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('shows a CircularProgress inside the confirm button while loading', () => {
+            mockDispatchApi.mockReturnValue(new Promise(() => { }));
+            const { container } = render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            expect(container.querySelector('.MuiCircularProgress-root')).toBeInTheDocument();
+        });
+        it('fades out the LinearProgress after loading completes', async () => {
+            const { container } = render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                const progress = container.querySelector('.MuiLinearProgress-root');
+                expect(progress).toHaveStyle({ opacity: '0' });
+            });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Hit rendering
+    // -------------------------------------------------------------------------
+    describe('hit rendering', () => {
+        it('renders unresolved hits with checkboxes after loading', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1', 'hit-2']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1, 'hit-2': HIT_2 })
+            });
+            await waitFor(() => {
+                expect(screen.getAllByRole('checkbox')).toHaveLength(2);
+            });
+        });
+        it('does not show a checkbox for resolved hits', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1', 'hit-resolved']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1, 'hit-resolved': HIT_RESOLVED })
+            });
+            await waitFor(() => {
+                // only the single unresolved hit gets a checkbox
+                expect(screen.getAllByRole('checkbox')).toHaveLength(1);
+            });
+        });
+        it('calls loadRecords with the API search results', async () => {
+            const items = [HIT_1];
+            mockDispatchApi.mockResolvedValueOnce({ items });
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                expect(mockLoadRecords).toHaveBeenCalledWith(items);
+            });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Confirm button disabled states
+    // -------------------------------------------------------------------------
+    describe('confirm button enablement', () => {
+        it('is disabled when no hits are selected', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            // Wait for the hit to load (checkbox appears) but don't select it
+            await screen.findAllByRole('checkbox');
+            await fillForm(user);
+            // No hit selected → selectedHitIds.size === 0 → button still disabled
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('is disabled when assessment is missing', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            const rationaleInput = screen.getByPlaceholderText(i18n.t('modal.rationale.label'));
+            await user.type(rationaleInput, 'some reason');
+            // no assessment chosen → still disabled
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('is disabled when rationale is empty', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            // fill only assessment, no rationale
+            const assessmentInput = screen.getByRole('combobox');
+            await user.type(assessmentInput, 'leg');
+            const option = await screen.findByRole('option', { name: 'legitimate' });
+            await user.click(option);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+        });
+        it('is enabled when a hit is selected + assessment + rationale are provided', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            await fillForm(user);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Checkbox / selection toggling
+    // -------------------------------------------------------------------------
+    describe('hit selection', () => {
+        it('checks a hit when its checkbox is clicked', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            expect(checkbox).not.toBeChecked();
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+        });
+        it('unchecks a hit when its checkbox is clicked a second time', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).not.toBeChecked());
+        });
+        it('tracks each hit independently when there are multiple', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1', 'hit-2']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1, 'hit-2': HIT_2 })
+            });
+            const checkboxes = await screen.findAllByRole('checkbox');
+            expect(checkboxes).toHaveLength(2);
+            clickCheckbox(checkboxes[0]);
+            await waitFor(() => {
+                expect(checkboxes[0]).toBeChecked();
+                expect(checkboxes[1]).not.toBeChecked();
+            });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Confirm action
+    // -------------------------------------------------------------------------
+    describe('confirm action', () => {
+        it('calls assess with the chosen assessment, true, and rationale', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            await fillForm(user, 'legitimate', 'My rationale');
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => {
+                expect(mockAssess).toHaveBeenCalledWith('legitimate', true, 'My rationale');
+            });
+        });
+        it('clears the selection after confirm completes', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            const [checkbox] = await screen.findAllByRole('checkbox');
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            await fillForm(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => {
+                expect(checkbox).not.toBeChecked();
+            });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Cancel button
+    // -------------------------------------------------------------------------
+    describe('cancel button', () => {
+        it('calls close() when cancel is clicked', async () => {
+            // Use a case with an unresolved hit so the auto-resolve effect does not fire
+            // and call close() before we even click cancel.
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            // Wait for loading to finish so no unexpected state transitions happen mid-click
+            await screen.findAllByRole('checkbox');
+            await user.click(screen.getByRole('button', { name: i18n.t('cancel') }));
+            expect(mockClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Auto-resolve when all hits are already resolved
+    // -------------------------------------------------------------------------
+    describe('auto-resolve', () => {
+        it('calls updateCase, onConfirm, and close when no unresolved hits remain after loading', async () => {
+            // All hits in the case are already resolved
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-resolved']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-resolved': HIT_RESOLVED })
+            });
+            // dispatchApi resolves → loading becomes false → unresolvedHits.length === 0 → auto-close
+            await waitFor(() => {
+                expect(mockUpdateCase).toHaveBeenCalledWith({ status: 'resolved' });
+            });
+            await waitFor(() => {
+                expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+                expect(mockClose).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('does NOT auto-resolve while hits are still unresolved', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            // Wait for loading to complete: the unresolved hit's checkbox appears once the
+            // dispatchApi call settles and the LinearProgress opacity drops to 0.
+            await screen.findAllByRole('checkbox');
+            // Should not have auto-resolved
+            expect(mockUpdateCase).not.toHaveBeenCalled();
+            expect(mockClose).not.toHaveBeenCalled();
+        });
+    });
+});

package/locales/en/translation.json

@@ -315,6 +315,7 @@
     "modal.cases.add_to_case.select_case": "Search Cases",
     "modal.cases.add_to_case.select_path": "Select Folder Path",
     "modal.cases.add_to_case.title": "Item Title",
+    "modal.cases.alerts.resolved": "Resolved Alerts",
     "modal.cases.rename_item": "Rename Item",
     "modal.cases.rename_item.error.empty": "Name cannot be empty",
     "modal.cases.rename_item.error.slash": "Name cannot contain '/'",

package/locales/fr/translation.json

@@ -315,6 +315,7 @@
     "modal.cases.add_to_case.select_case": "Rechercher des cas",
     "modal.cases.add_to_case.select_path": "Sélectionner le chemin du dossier",
     "modal.cases.add_to_case.title": "Titre de l'élément",
+    "modal.cases.alerts.resolved": "Alertes résolues",
     "modal.cases.rename_item": "Renommer l'élément",
     "modal.cases.rename_item.error.empty": "Le nom ne peut pas être vide",
     "modal.cases.rename_item.error.slash": "Le nom ne peut pas contenir '/'",

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.18.0-dev.710",
+  "version": "2.18.0-dev.716",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",