@cccsaurora/howler-ui 2.18.0-dev.740 → 2.18.0-dev.748

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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();
+    const { close } = useContext(ModalContext);
+    const { config } = useContext(ApiConfigContext);
+    const { update: updateCase } = useCase({ case: _case });
+    const [loading, setLoading] = useState(true);
+    const [rationale, setRationale] = useState('');
+    const [assessment, setAssessment] = useState(null);
+    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 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 ')})`,
+                    metadata: ['analytic']
+                }));
+                loadRecords(result.items);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [dispatchApi, hitIds, loadRecords]);
+    useEffect(() => {
+        if (loading || unresolvedHits.length > 0) {
+            return;
+        }
+        updateCase({ status: 'resolved' }).then(() => {
+            onConfirm();
+            close();
+        });
+    }, [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/components/routes/dossiers/DossierEditor.js

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import QueryResultText from '../../elements/display/QueryResultText';
-import HitQuery from '../hits/search/HitQuery';
+import RecordQuery from '../hits/search/RecordQuery';
 import LeadForm from './LeadForm';
 import PivotForm from './PivotForm';
 const DossierEditor = () => {
@@ -188,6 +188,6 @@ const DossierEditor = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { disabled: !dossier || loading, onChange: (_val, isDirty) => setSearchDirty(isDirty), triggerSearch: query => setDossier(_dossier => ({ ..._dossier, query })) }), searchTotal >= 0 && _jsx(QueryResultText, { count: searchTotal, query: dossier.query })] }) }), _jsxs(Tabs, { value: tab, onChange: (_ev, value) => setTab(value), children: [_jsx(Tab, { label: t('route.dossiers.manager.tabs.leads'), value: "leads" }), _jsx(Tab, { label: t('route.dossiers.manager.tabs.pivots'), value: "pivots" })] }), tab === 'leads' && _jsx(LeadForm, { dossier: dossier, setDossier: setDossier, loading: loading }), tab === 'pivots' && _jsx(PivotForm, { dossier: dossier, setDossier: setDossier, loading: loading })] })] }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(RecordQuery, { disabled: !dossier || loading, onChange: (_val, isDirty) => setSearchDirty(isDirty), triggerSearch: query => setDossier(_dossier => ({ ..._dossier, query })) }), searchTotal >= 0 && _jsx(QueryResultText, { count: searchTotal, query: dossier.query })] }) }), _jsxs(Tabs, { value: tab, onChange: (_ev, value) => setTab(value), children: [_jsx(Tab, { label: t('route.dossiers.manager.tabs.leads'), value: "leads" }), _jsx(Tab, { label: t('route.dossiers.manager.tabs.pivots'), value: "pivots" })] }), tab === 'leads' && _jsx(LeadForm, { dossier: dossier, setDossier: setDossier, loading: loading }), tab === 'pivots' && _jsx(PivotForm, { dossier: dossier, setDossier: setDossier, loading: loading })] })] }) }));
 };
 export default memo(DossierEditor);

package/components/routes/dossiers/DossierEditor.test.js

@@ -61,7 +61,7 @@ vi.mock('commons/components/pages/PageCenter', () => ({
 vi.mock('../../elements/display/QueryResultText', () => ({
     default: ({ count, query }) => (_jsxs("div", { id: "query-result-text", children: [count, " ", ' results for ', " ", query] }))
 }));
-vi.mock('../hits/search/HitQuery', () => ({
+vi.mock('../hits/search/RecordQuery', () => ({
     default: ({ onChange, triggerSearch, disabled }) => {
         return (_jsxs("div", { id: "hit-query", children: [_jsx("input", { id: "query-input", disabled: disabled, onChange: e => {
                         onChange?.(e.target.value, false);

package/components/routes/help/ApiDocumentation.js

@@ -49,7 +49,7 @@ const ApiDocumentation = () => {
                                             .replace(/(\S+)\s+=>\s+(.+)/g, '\n`$1`: $2\n')
                                             .replace(/(Data Block:\n)([\s\S]+)(Result Example:)/, (__, p1, p2, p3) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\`\n${p3}`)
                                             .replace(/(Result Example:\n)([\s\S]+)$/, (__, p1, p2) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\``) }));
-                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { size: "small", label: "Stable", color: "success" })) : (_jsx(Chip, { size: "small", label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { size: "small", label: "Protected", color: "warning" })) : (_jsx(Chip, { size: "small", label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { size: "small", label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
+                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { label: "Stable", color: "success" })) : (_jsx(Chip, { label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { label: "Protected", color: "warning" })) : (_jsx(Chip, { label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
                                 }) })] }) })] }) }));
 };
 export default ApiDocumentation;

package/components/routes/help/HitBannerDocumentation.js

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 const HitBannerDocumentation = () => {
     const { t } = useTranslation();
     const dummyHit = useMemo(() => ({
+        __index: 'hit',
         timestamp: '2023-02-11T15:10:31.585826Z',
         howler: {
             id: 'howler.id',

package/components/routes/help/HitDocumentation.js

@@ -5,7 +5,6 @@ import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/use
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
-import BundleDocumentation from './BundleDocumentation';
 import HelpTabs from './components/HelpTabs';
 import HitBannerDocumentation from './HitBannerDocumentation';
 import HitLabelsDocumentation from './HitLabelsDocumentation';
@@ -23,8 +22,7 @@ const HitDocumentation = () => {
         searchParams.set('tab', _tab);
         setSearchParams(new URLSearchParams(searchParams));
     }, [searchParams, setSearchParams]);
-    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.bundle.title') }), value: "bundle", onClick: () => onChange('bundle') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
-                        bundle: () => _jsx(BundleDocumentation, {}),
+    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
                         header: () => _jsx(HitBannerDocumentation, {}),
                         links: () => _jsx(HitLinksDocumentation, {}),
                         labels: () => _jsx(HitLabelsDocumentation, {}),

package/components/routes/hits/search/InformationPane.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 declare const InformationPane: FC<{
+    selected?: string;
     onClose?: () => void;
 }>;
 export default InformationPane;