@cccsaurora/howler-ui 2.18.0-dev.757 → 2.18.0-dev.762

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/cases/modals/hooks.d.ts

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import type { RecordEntry } from './types';
+export declare const defaultTitle: (record: Hit | Observable) => string;
+export declare const useFolderOptions: (selectedCase: Case | null) => string[];
+export declare const useRecordEntries: (records: (Hit | Observable)[]) => readonly [RecordEntry[], (index: number, field: "title" | "path", value: string) => void];

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

@@ -0,0 +1,44 @@
+import { useCallback, useMemo, useState } from 'react';
+export const defaultTitle = (record) => {
+    if (record.__index === 'hit') {
+        return `${record.howler.analytic} (${record.howler.id})`;
+    }
+    return `Observable (${record.howler.id})`;
+};
+export const useFolderOptions = (selectedCase) => {
+    return useMemo(() => {
+        if (!selectedCase?.items) {
+            return [];
+        }
+        const paths = new Set();
+        for (const item of selectedCase.items) {
+            if (!item.path) {
+                continue;
+            }
+            const parts = item.path.split('/');
+            parts.pop();
+            for (let i = 1; i <= parts.length; i++) {
+                paths.add(parts.slice(0, i).join('/'));
+            }
+        }
+        return Array.from(paths);
+    }, [selectedCase]);
+};
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+export const useRecordEntries = (records) => {
+    const [entries, setEntries] = useState(() => (records ?? []).map(record => ({
+        record,
+        path: '',
+        title: defaultTitle(record)
+    })));
+    const updateEntry = useCallback((index, field, value) => {
+        setEntries(prev => {
+            const next = [...prev];
+            next[index] = { ...next[index], [field]: value };
+            return next;
+        });
+    }, []);
+    return [entries, updateEntry];
+};

package/components/routes/cases/modals/types.d.ts

@@ -0,0 +1,5 @@
+export interface RecordEntry {
+  record: Hit | Observable;
+  path: string;
+  title: string;
+}

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;