@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.1040

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

@@ -0,0 +1,454 @@
+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);
+};
+const getHitCheckboxes = () => screen
+    .getAllByRole('checkbox')
+    .filter(checkbox => checkbox.getAttribute('aria-label') !== i18n.t('modal.cases.resolve.allow_unresolved.aria_label'));
+/** 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', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                expect(screen.getByText(i18n.t('modal.cases.resolve'))).toBeInTheDocument();
+            });
+        });
+        it('shows the modal description', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                expect(screen.getByText(i18n.t('modal.cases.resolve.description'))).toBeInTheDocument();
+            });
+        });
+        it('renders a cancel button', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: i18n.t('cancel') })).toBeInTheDocument();
+            });
+        });
+        it('renders a confirm button', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeInTheDocument();
+            });
+        });
+        it('shows the "Resolved Alerts" accordion', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits([]), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper()
+            });
+            await waitFor(() => {
+                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(getHitCheckboxes()).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(getHitCheckboxes()).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 waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            clickCheckbox(checkbox);
+            await waitFor(() => expect(checkbox).toBeChecked());
+            await fillForm(user);
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+        });
+        it('is enabled when unresolved override is selected with no hits selected', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeDisabled();
+            const unresolvedOverride = screen.getByRole('checkbox', {
+                name: i18n.t('modal.cases.resolve.allow_unresolved.aria_label')
+            });
+            await user.click(unresolvedOverride);
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(2);
+            });
+            const checkboxes = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            const [checkbox] = getHitCheckboxes();
+            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 waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            await user.click(screen.getByRole('button', { name: i18n.t('cancel') }));
+            expect(mockClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // Case resolution behavior
+    // -------------------------------------------------------------------------
+    describe('case resolution behavior', () => {
+        it('does NOT auto-resolve when all hits are already resolved', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-resolved']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-resolved': HIT_RESOLVED })
+            });
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+            });
+            expect(mockUpdateCase).not.toHaveBeenCalled();
+            expect(mockClose).not.toHaveBeenCalled();
+        });
+        it('resolves case when confirm is clicked and all hits are already resolved', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-resolved']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-resolved': HIT_RESOLVED })
+            });
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: i18n.t('confirm') })).toBeEnabled();
+            });
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => {
+                expect(mockUpdateCase).toHaveBeenCalledWith({ status: 'resolved' });
+                expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+                expect(mockClose).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('resolves case with unresolved hits when override option is selected', async () => {
+            render(_jsx(ResolveModal, { case: caseWithHits(['hit-1']), onConfirm: mockOnConfirm }), {
+                wrapper: createWrapper({ 'hit-1': HIT_1 })
+            });
+            await waitFor(() => {
+                expect(getHitCheckboxes()).toHaveLength(1);
+            });
+            await user.click(screen.getByRole('checkbox', { name: i18n.t('modal.cases.resolve.allow_unresolved.aria_label') }));
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => {
+                expect(mockAssess).not.toHaveBeenCalled();
+                expect(mockUpdateCase).toHaveBeenCalledWith({ status: 'resolved' });
+                expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+                expect(mockClose).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+});

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/cases/search/CaseAssigneeFilter.d.ts

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Person } from '@mui/icons-material';
+import { AvatarGroup, Checkbox, Divider, FormControlLabel, Stack, Typography } from '@mui/material';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import { useCallback, useContext, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+const CaseAssigneeFilter = ({ assigneeFilter, onChange }) => {
+    const { t } = useTranslation();
+    const { user: currentUser } = useAppUser();
+    const { users, searchUsers } = useContext(UserListContext);
+    useEffect(() => {
+        searchUsers('uname:*');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const toggleMyself = useCallback((_, checked) => {
+        if (!currentUser) {
+            return;
+        }
+        onChange(checked
+            ? [...assigneeFilter.filter(a => a !== currentUser.username), currentUser.username]
+            : assigneeFilter.filter(a => a !== currentUser.username));
+    }, [currentUser, assigneeFilter, onChange]);
+    return (_jsx(ChipPopper, { icon: assigneeFilter.length > 0 ? (_jsx(AvatarGroup, { sx: { '& .MuiAvatar-root': { height: 18, width: 18, fontSize: '0.6rem' } }, children: assigneeFilter.map(u => (_jsx(HowlerAvatar, { userId: u, sx: { height: 18, width: 18 } }, u))) })) : (_jsx(Person, { fontSize: "small" })), label: _jsx(Typography, { variant: "body2", children: assigneeFilter.length === 0
+                ? t('route.cases.filter.assignee')
+                : assigneeFilter.length === 1
+                    ? (users[assigneeFilter[0]]?.name ?? assigneeFilter[0])
+                    : `${assigneeFilter.length} ${t('route.cases.filter.assignees')}` }), minWidth: "260px", slotProps: { chip: { size: 'small', color: assigneeFilter.length > 0 ? 'primary' : 'default' } }, children: _jsxs(Stack, { direction: "row", divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), spacing: 1, children: [_jsx(UserList, { userIds: assigneeFilter, onChange: onChange, i18nLabel: "route.cases.filter.assignee", multiple: true }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: currentUser ? assigneeFilter.includes(currentUser.username) : false, onChange: toggleMyself }), label: t('route.cases.filter.myself') })] }) }));
+};
+export default CaseAssigneeFilter;

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

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