@cccsaurora/howler-ui 2.19.0-dev.1151 → 2.19.0-dev.1260

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 = () => {
@@ -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/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) {
+            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;

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/help/OverviewDocumentation.d.ts

@@ -1,3 +1,3 @@
-import { type FC } from 'react';
+import type { FC } from 'react';
 declare const OverviewDocumentation: FC;
 export default OverviewDocumentation;

package/components/routes/help/OverviewDocumentation.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import HandlebarsMarkdown from '@cccsaurora/howler-ui/components/elements/display/HandlebarsMarkdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
-import {} from 'react';
 import ErrorBoundary from '../ErrorBoundary';
 import { useStartingTemplate } from '../overviews/startingTemplate';
 const OverviewDocumentation = () => {

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;