@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

package/components/routes/cases/search/CaseAssigneeFilter.test.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseAssigneeFilter from './CaseAssigneeFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: () => ({ user: { username: 'alice', name: 'Alice Smith' } })
+}));
+// Stub HowlerAvatar to avoid avatar API calls
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+// Stub UserList to a simple multi-select so we can test the onChange wire-up
+// without pulling in the full component and its popover.
+vi.mock('components/elements/UserList', () => ({
+    default: ({ userIds, onChange, multiple }) => (_jsxs("div", { id: "user-list", children: [_jsx("button", { id: "user-list-add", onClick: () => onChange([...userIds, 'bob']), children: "Add bob" }), multiple &&
+                userIds.map(id => (_jsxs("button", { id: `remove-${id}`, onClick: () => onChange(userIds.filter(u => u !== id)), children: ["Remove ", id] }, id)))] }))
+}));
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const mockSearchUsers = vi.fn();
+const USERS = {
+    alice: { username: 'alice', name: 'Alice Smith' },
+    bob: { username: 'bob', name: 'Bob Jones' }
+};
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(UserListContext.Provider, { value: { users: USERS, searchUsers: mockSearchUsers, fetchUsers: vi.fn() }, children: children }) }));
+const renderFilter = (assigneeFilter, onChange = vi.fn()) => render(_jsx(CaseAssigneeFilter, { assigneeFilter: assigneeFilter, onChange: onChange }), { wrapper: Wrapper });
+const openPopper = async (user, labelText) => {
+    const chip = screen.getByText(labelText).closest('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByTestId('user-list')).toBeInTheDocument();
+    });
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseAssigneeFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('searchUsers on mount', () => {
+        it('calls searchUsers with "uname:*" on mount', () => {
+            renderFilter([]);
+            expect(mockSearchUsers).toHaveBeenCalledWith('uname:*');
+        });
+    });
+    describe('label', () => {
+        it('shows the default "Assignee" label when no assignees are selected', () => {
+            renderFilter([]);
+            expect(screen.getByText(i18n.t('route.cases.filter.assignee'))).toBeInTheDocument();
+        });
+        it('shows the user display name when one assignee is selected', () => {
+            renderFilter(['alice']);
+            expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+        });
+        it('shows count + "Assignees" when multiple assignees are selected', () => {
+            renderFilter(['alice', 'bob']);
+            expect(screen.getByText(`2 ${i18n.t('route.cases.filter.assignees')}`)).toBeInTheDocument();
+        });
+        it('falls back to username when user is not in the user map', () => {
+            renderFilter(['unknown-user']);
+            const chipLabel = document.querySelector('.MuiChip-label');
+            expect(chipLabel?.textContent).toContain('unknown-user');
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color when no assignees are selected', () => {
+            renderFilter([]);
+            const chip = screen.getByText(i18n.t('route.cases.filter.assignee')).closest('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color when assignees are selected', () => {
+            renderFilter(['alice']);
+            const chip = screen.getByText('Alice Smith').closest('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('"Myself" checkbox', () => {
+        it('is unchecked when the current user is not in the filter', async () => {
+            renderFilter([]);
+            await openPopper(user, i18n.t('route.cases.filter.assignee'));
+            const checkbox = screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') });
+            expect(checkbox).not.toBeChecked();
+        });
+        it('is checked when the current user is already in the filter', async () => {
+            renderFilter(['alice']);
+            await openPopper(user, 'Alice Smith');
+            const checkbox = screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') });
+            expect(checkbox).toBeChecked();
+        });
+        it('adds the current user to the filter when the checkbox is checked', async () => {
+            const onChange = vi.fn();
+            renderFilter([], onChange);
+            await openPopper(user, i18n.t('route.cases.filter.assignee'));
+            await user.click(screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') }));
+            expect(onChange).toHaveBeenCalledWith(['alice']);
+        });
+        it('removes the current user from the filter when the checkbox is unchecked', async () => {
+            const onChange = vi.fn();
+            renderFilter(['alice', 'bob'], onChange);
+            await openPopper(user, `2 ${i18n.t('route.cases.filter.assignees')}`);
+            await user.click(screen.getByRole('checkbox', { name: i18n.t('route.cases.filter.myself') }));
+            expect(onChange).toHaveBeenCalledWith(['bob']);
+        });
+    });
+    describe('UserList onChange passthrough', () => {
+        it('passes onChange directly to UserList', async () => {
+            const onChange = vi.fn();
+            renderFilter(['alice'], onChange);
+            await openPopper(user, 'Alice Smith');
+            await user.click(screen.getByTestId('user-list-add'));
+            expect(onChange).toHaveBeenCalledWith(['alice', 'bob']);
+        });
+    });
+});

package/components/routes/cases/search/CaseDateFilter.d.ts

@@ -0,0 +1,13 @@
+import type { Dayjs } from 'dayjs';
+import type { FC } from 'react';
+import { DATE_RANGES } from '@cccsaurora/howler-ui/utils/constants';
+export type DateRangeOption = (typeof DATE_RANGES)[number];
+declare const CaseDateFilter: FC<{
+    dateRange: DateRangeOption;
+    onChange: (v: DateRangeOption) => void;
+    customStart: Dayjs;
+    customEnd: Dayjs;
+    onCustomStartChange: (v: Dayjs) => void;
+    onCustomEndChange: (v: Dayjs) => void;
+}>;
+export default CaseDateFilter;

package/components/routes/cases/search/CaseDateFilter.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvTimer } from '@mui/icons-material';
+import { Autocomplete, Stack, TextField, Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { useTranslation } from 'react-i18next';
+import { DATE_RANGES } from '@cccsaurora/howler-ui/utils/constants';
+const CaseDateFilter = ({ dateRange, onChange, customStart, customEnd, onCustomStartChange, onCustomEndChange }) => {
+    const { t } = useTranslation();
+    return (_jsx(ChipPopper, { icon: _jsx(AvTimer, { fontSize: "small" }), label: _jsx(Typography, { variant: "body2", children: dateRange === 'date.range.all'
+                ? t('route.cases.filter.date')
+                : dateRange === 'date.range.custom'
+                    ? `${customStart.format('YYYY-MM-DD')} ${t('to')} ${customEnd.format('YYYY-MM-DD')}`
+                    : t(dateRange) }), minWidth: "225px", slotProps: { chip: { size: 'small', color: dateRange !== 'date.range.all' ? 'primary' : 'default' } }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { size: "small", value: dateRange, options: [...DATE_RANGES], getOptionLabel: o => t(o), disableClearable: true, onChange: (_, nv) => onChange(nv), renderInput: params => _jsx(TextField, { ...params, label: t('route.cases.filter.date') }) }), dateRange === 'date.range.custom' && (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: customStart, maxDate: customEnd, onChange: nv => {
+                                    if (nv) {
+                                        onCustomStartChange(nv);
+                                    }
+                                }, ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: customEnd, minDate: customStart, onChange: nv => {
+                                    if (nv) {
+                                        onCustomEndChange(nv);
+                                    }
+                                }, ampm: false, disableFuture: true })] }) }))] }) }));
+};
+export default CaseDateFilter;

package/components/routes/cases/search/CaseDateFilter.test.d.ts

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

package/components/routes/cases/search/CaseDateFilter.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseDateFilter from './CaseDateFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// ---------------------------------------------------------------------------
+// Stub the date pickers so jsdom doesn't choke on them
+// ---------------------------------------------------------------------------
+vi.mock('@mui/x-date-pickers/DateTimePicker', () => ({
+    DateTimePicker: ({ label, onChange }) => (_jsx("button", { id: `picker-${label}`, onClick: () => onChange(dayjs('2025-06-01')), children: label }))
+}));
+// ---------------------------------------------------------------------------
+// Wrapper / render helper
+// ---------------------------------------------------------------------------
+const FIXED_START = dayjs('2025-01-01');
+const FIXED_END = dayjs('2025-03-01');
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+const renderFilter = ({ dateRange = 'date.range.all', onChange = vi.fn(), onCustomStartChange = vi.fn(), onCustomEndChange = vi.fn() } = {}) => render(_jsx(CaseDateFilter, { dateRange: dateRange, onChange: onChange, customStart: FIXED_START, customEnd: FIXED_END, onCustomStartChange: onCustomStartChange, onCustomEndChange: onCustomEndChange }), { wrapper: Wrapper });
+const openPopper = async (user) => {
+    // The chip label varies; find the chip by the AvTimer icon's sibling
+    const chip = document.querySelector('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDateFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('label', () => {
+        it('shows "Date Range" label when date.range.all is selected', () => {
+            renderFilter({ dateRange: 'date.range.all' });
+            expect(screen.getByText(i18n.t('route.cases.filter.date'))).toBeInTheDocument();
+        });
+        it('shows the translated range label for a non-all preset', () => {
+            renderFilter({ dateRange: 'date.range.1.week' });
+            expect(screen.getByText(i18n.t('date.range.1.week'))).toBeInTheDocument();
+        });
+        it('shows formatted start/end dates for the custom range', () => {
+            renderFilter({ dateRange: 'date.range.custom' });
+            const expected = `${FIXED_START.format('YYYY-MM-DD')} ${i18n.t('to')} ${FIXED_END.format('YYYY-MM-DD')}`;
+            expect(screen.getByText(expected)).toBeInTheDocument();
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color for date.range.all', () => {
+            renderFilter({ dateRange: 'date.range.all' });
+            const chip = document.querySelector('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color for any non-all range', () => {
+            renderFilter({ dateRange: 'date.range.1.day' });
+            const chip = document.querySelector('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('popper content', () => {
+        it('does not show the autocomplete before the chip is clicked', () => {
+            renderFilter();
+            expect(screen.queryByRole('combobox')).toBeNull();
+        });
+        it('shows the range autocomplete after the chip is clicked', async () => {
+            renderFilter();
+            await openPopper(user);
+            expect(screen.getByRole('combobox')).toBeInTheDocument();
+        });
+        it('does not show date pickers when a preset (non-custom) range is active', async () => {
+            renderFilter({ dateRange: 'date.range.1.day' });
+            await openPopper(user);
+            expect(screen.queryByTestId(`picker-${i18n.t('date.select.start')}`)).toBeNull();
+        });
+        it('shows start and end date pickers when custom range is active', async () => {
+            renderFilter({ dateRange: 'date.range.custom' });
+            await openPopper(user);
+            expect(screen.getByTestId(`picker-${i18n.t('date.select.start')}`)).toBeInTheDocument();
+            expect(screen.getByTestId(`picker-${i18n.t('date.select.end')}`)).toBeInTheDocument();
+        });
+    });
+    describe('interactions', () => {
+        it('calls onChange when a range option is selected from the autocomplete', async () => {
+            const onChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.all', onChange });
+            await openPopper(user);
+            await user.click(screen.getByRole('combobox'));
+            const option = await screen.findByRole('option', { name: i18n.t('date.range.1.week') });
+            await user.click(option);
+            expect(onChange).toHaveBeenCalledWith('date.range.1.week');
+        });
+        it('calls onCustomStartChange when the start date picker fires', async () => {
+            const onCustomStartChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.custom', onCustomStartChange });
+            await openPopper(user);
+            await user.click(screen.getByTestId(`picker-${i18n.t('date.select.start')}`));
+            expect(onCustomStartChange).toHaveBeenCalledWith(dayjs('2025-06-01'));
+        });
+        it('calls onCustomEndChange when the end date picker fires', async () => {
+            const onCustomEndChange = vi.fn();
+            renderFilter({ dateRange: 'date.range.custom', onCustomEndChange });
+            await openPopper(user);
+            await user.click(screen.getByTestId(`picker-${i18n.t('date.select.end')}`));
+            expect(onCustomEndChange).toHaveBeenCalledWith(dayjs('2025-06-01'));
+        });
+    });
+});

package/components/routes/cases/search/CaseStatusFilter.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const CaseStatusFilter: FC<{
+    statusFilter: string[];
+    onChange: (v: string[]) => void;
+}>;
+export default CaseStatusFilter;

package/components/routes/cases/search/CaseStatusFilter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { useTranslation } from 'react-i18next';
+import { CASE_STATUSES } from '../constants';
+const CaseStatusFilter = ({ statusFilter, onChange }) => {
+    const { t } = useTranslation();
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: _jsx(Typography, { variant: "body2", children: statusFilter.length === 0
+                ? t('route.cases.filter.status')
+                : statusFilter.map(s => t(`page.cases.status.${s}`)).join(', ') }), minWidth: "200px", slotProps: { chip: { size: 'small', color: statusFilter.length > 0 ? 'primary' : 'default' } }, children: _jsx(ToggleButtonGroup, { value: statusFilter, onChange: (_, nv) => onChange(nv), size: "small", orientation: "vertical", sx: { width: '100%' }, children: CASE_STATUSES.map(s => (_jsx(ToggleButton, { value: s, sx: { justifyContent: 'flex-start' }, children: t(`page.cases.status.${s}`) }, s))) }) }));
+};
+export default CaseStatusFilter;

package/components/routes/cases/search/CaseStatusFilter.test.d.ts

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

package/components/routes/cases/search/CaseStatusFilter.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CaseStatusFilter from './CaseStatusFilter';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const Wrapper = ({ children }) => _jsx(I18nextProvider, { i18n: i18n, children: children });
+const renderFilter = (statusFilter, onChange = vi.fn()) => render(_jsx(CaseStatusFilter, { statusFilter: statusFilter, onChange: onChange }), { wrapper: Wrapper });
+const openPopper = async (user) => {
+    const chip = screen.getByText(i18n.t('route.cases.filter.status')).closest('.MuiChip-root');
+    await user.click(chip);
+    await waitFor(() => {
+        expect(screen.getByRole('group')).toBeInTheDocument();
+    });
+};
+describe('CaseStatusFilter', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+    });
+    describe('label', () => {
+        it('shows the default "Status" label when no statuses are selected', () => {
+            renderFilter([]);
+            expect(screen.getByText(i18n.t('route.cases.filter.status'))).toBeInTheDocument();
+        });
+        it('shows a comma-separated list of status labels when statuses are selected', () => {
+            renderFilter(['open', 'on-hold']);
+            const expected = [i18n.t('page.cases.status.open'), i18n.t('page.cases.status.on-hold')].join(', ');
+            expect(screen.getByText(expected)).toBeInTheDocument();
+        });
+        it('shows a single status label when one status is selected', () => {
+            renderFilter(['resolved']);
+            expect(screen.getByText(i18n.t('page.cases.status.resolved'))).toBeInTheDocument();
+        });
+    });
+    describe('chip color', () => {
+        it('uses default color when no statuses are selected', () => {
+            renderFilter([]);
+            const chip = screen.getByText(i18n.t('route.cases.filter.status')).closest('.MuiChip-root');
+            expect(chip).not.toHaveClass('MuiChip-colorPrimary');
+        });
+        it('uses primary color when statuses are selected', () => {
+            renderFilter(['open']);
+            const chip = screen.getByText(i18n.t('page.cases.status.open')).closest('.MuiChip-root');
+            expect(chip).toHaveClass('MuiChip-colorPrimary');
+        });
+    });
+    describe('popper content', () => {
+        it('does not show toggle buttons before the chip is clicked', () => {
+            renderFilter([]);
+            expect(screen.queryByRole('group')).toBeNull();
+        });
+        it('shows all four status toggle buttons when the chip is clicked', async () => {
+            renderFilter([]);
+            await openPopper(user);
+            expect(screen.getByText(i18n.t('page.cases.status.open'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.in-progress'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.on-hold'))).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('page.cases.status.resolved'))).toBeInTheDocument();
+        });
+    });
+    describe('interactions', () => {
+        it('calls onChange when a toggle button is clicked', async () => {
+            const onChange = vi.fn();
+            renderFilter([], onChange);
+            await openPopper(user);
+            await user.click(screen.getByText(i18n.t('page.cases.status.open')));
+            expect(onChange).toHaveBeenCalledWith(['open']);
+        });
+        it('calls onChange with empty array when the only selected status is deselected', async () => {
+            const onChange = vi.fn();
+            renderFilter(['open'], onChange);
+            const chip = screen.getByText(i18n.t('page.cases.status.open')).closest('.MuiChip-root');
+            await user.click(chip);
+            await waitFor(() => {
+                expect(screen.getByRole('group')).toBeInTheDocument();
+            });
+            await user.click(screen.getAllByText(i18n.t('page.cases.status.open'))[1]);
+            expect(onChange).toHaveBeenCalledWith([]);
+        });
+    });
+});

package/components/routes/cases/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+export declare const buildPathFromID: (_case: Case, itemId: string) => string;
+export declare const getIDFromPath: (_case: Case, path: string) => string | null;

package/components/routes/cases/utils.js

@@ -0,0 +1,21 @@
+export const buildPathFromID = (_case, itemId) => {
+    const item = _case.items?.find(i => i.id === itemId);
+    if (!item)
+        return itemId;
+    const name = item.name ?? item.value ?? itemId;
+    if (!item.parent)
+        return name;
+    const parentPath = buildPathFromID(_case, item.parent);
+    return `${parentPath}/${name}`;
+};
+export const getIDFromPath = (_case, path) => {
+    if (!_case.items)
+        return null;
+    for (const item of _case.items) {
+        const itemPath = buildPathFromID(_case, item.id);
+        if (itemPath === path) {
+            return item.id;
+        }
+    }
+    return null;
+};

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 = () => {
@@ -146,7 +146,7 @@ const DossierEditor = () => {
             return;
         }
         setLoading(true);
-        dispatchApi(api.dossier.get(params.id))
+        void dispatchApi(api.dossier.get(params.id))
             .then(_dossier => {
             setOriginalDossier(_dossier);
             setDossier(_dossier);
@@ -158,7 +158,7 @@ const DossierEditor = () => {
             return;
         }
         setQuery(dossier.query);
-        (async () => {
+        void (async () => {
             setLoading(true);
             try {
                 const result = await dispatchApi(api.search.hit.post({ query: dossier.query, rows: 0 }));
@@ -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);
@@ -273,7 +273,7 @@ describe('DossierEditor', () => {
                 const titleInput = screen.getByTestId('dossier-title');
                 await user.type(titleInput, 'Test Title');
                 const queryInput = screen.getByTestId('query-input');
-                user.click(queryInput);
+                void user.click(queryInput);
                 await user.keyboard('test query');
                 await user.keyboard('{Enter}');
                 await waitFor(() => {

package/components/routes/dossiers/Dossiers.js

@@ -3,6 +3,7 @@ import { Topic } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -23,9 +24,9 @@ const DossiersBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
     const onSearch = useCallback(async () => {
@@ -42,19 +43,19 @@ const DossiersBase = () => {
             // Check for the actual search query
             const query = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the overview should be visible and/or matches the type we are filtering for
-            setResponse(await dispatchApi(api.search.dossier.post({
+            await request(api.search.dossier.post, {
                 query,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     useEffect(() => {
@@ -70,18 +71,19 @@ const DossiersBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
         withConfirmDeleteModal(async () => {
             try {
-                await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
-                await onSearch();
+                await dispatchApi(api.dossier.del(id), { throwError: true, showError: true });
+                remove(id);
                 showSuccessMessage(t('route.dossiers.manager.delete.success'));
             }
             catch (_err) {
@@ -89,9 +91,9 @@ const DossiersBase = () => {
                 console.warn(_err);
             }
         });
-    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
+    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
-        onSearch();
+        void onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -107,7 +109,7 @@ const DossiersBase = () => {
     }, [offset, response?.total, searchParams, setSearchParams]);
     useEffect(() => {
         if (!loading) {
-            onSearch();
+            void onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
@@ -115,6 +117,6 @@ const DossiersBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.dossiers.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/dossiers/${item.id}/edit`), onCreate: () => navigate('/dossiers/create'), createPrompt: "route.dossiers.create", searchPrompt: "route.dossiers.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
 };
 const Dossiers = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(DossiersBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "dossier_id", children: _jsx(DossiersBase, {}) }) }));
 };
 export default Dossiers;

package/components/routes/dossiers/PivotForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, iconExists } from '@iconify/react';
 import { Add, Delete, OpenInNew, Remove } from '@mui/icons-material';
 import { Alert, Autocomplete, Button, Divider, IconButton, Paper, Stack, Tab, Tabs, TextField, Typography, useTheme } from '@mui/material';
@@ -13,9 +13,7 @@ import { useSearchParams } from 'react-router-dom';
 const LinkForm = ({ pivot, update }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.value'), disabled: !pivot, value: pivot?.value ?? '', fullWidth: true, onChange: ev => update({ value: ev.target.value }) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), pivot?.mappings?.map((_mapping, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            _jsxs(Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.key'), disabled: !pivot, value: _mapping?.key ?? '', onChange: ev => update({
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.value'), disabled: !pivot, value: pivot?.value ?? '', fullWidth: true, onChange: ev => update({ value: ev.target.value }) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), pivot?.mappings?.map((_mapping, index) => (_jsxs(Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.key'), disabled: !pivot, value: _mapping?.key ?? '', onChange: ev => update({
                                     mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, key: ev.target.value } : _m)
                                 }) }), _jsx(Autocomplete, { fullWidth: true, disabled: !pivot, options: ['custom', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.mapping.field'), sx: { minWidth: '150px' } })), getOptionLabel: opt => t(opt), value: _mapping.field ?? '', onChange: (_ev, field) => update({
                                     mappings: pivot.mappings.map((_m, _index) => (index === _index ? { ..._m, field } : _m))

package/components/routes/events/EventViewer.d.ts

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

package/components/routes/events/EventViewer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+const EventViewer = ({ event: provided, eventId }) => {
+    const { dispatchApi } = useMyApi();
+    const [event, setEvent] = useState(null);
+    useEffect(() => {
+        if (provided) {
+            setEvent(provided);
+        }
+    }, [provided]);
+    useEffect(() => {
+        if (eventId) {
+            void dispatchApi(api.v2.search.post('event', { query: `howler.id:${eventId}`, rows: 1 }), {
+                throwError: false
+            }).then(res => setEvent(res.items[0]));
+        }
+    }, [dispatchApi, eventId]);
+    return _jsx(Box, { p: 1, children: event ? _jsx(ObjectDetails, { obj: event }) : _jsx(Skeleton, { height: 120 }) });
+};
+export default EventViewer;