@cccsaurora/howler-ui 2.16.0-dev.381 → 2.16.0-dev.383

package/components/app/providers/HitSearchProvider.js

@@ -85,7 +85,6 @@ const HitSearchProvider = ({ children }) => {
                 .forEach(viewQuery => _filters.push(viewQuery));
         }
         return _filters;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [endDate, filters, getCurrentViews, location.pathname, routeParams.id, span, startDate, views]);
     const search = useCallback(async (_query, appendResults) => {
         THROTTLER.debounce(async () => {

package/components/elements/display/modals/RationaleModal.js

@@ -3,39 +3,37 @@ import { Autocomplete, Button, CircularProgress, ListItemText, Stack, TextField,
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
 import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { isEqual } from 'lodash-es';
-import flatten from 'lodash-es/flatten';
+import { isEqual, uniqBy } from 'lodash-es';
 import isString from 'lodash-es/isString';
-import uniqBy from 'lodash-es/uniqBy';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 const RationaleModal = ({ hits, onSubmit }) => {
+    // Hooks for translations, API calls, modal control, user data, and analytic matching
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const { close } = useContext(ModalContext);
     const { user } = useAppUser();
+    const { getMatchingAnalytic } = useMatchers();
+    // State management for loading status, user input, and suggested options
     const [loading, setLoading] = useState(false);
     const [rationale, setRationale] = useState('');
     const [suggestedRationales, setSuggestedRationales] = useState([]);
-    const queries = useMemo(() => [
-        {
-            type: 'analytic',
-            query: hits
-                .map(hit => `(howler.rationale:* AND howler.analytic:"${sanitizeLuceneQuery(hit.howler.analytic)}")`)
-                .join(' OR ')
-        },
-        {
-            type: 'assignment',
-            query: `howler.rationale:* AND howler.assignment:${user.username} AND howler.timestamp:[now-14d TO now]`
-        }
-    ], [hits, user.username]);
+    /**
+     * Submits the rationale and closes the modal
+     */
     const handleSubmit = useCallback(() => {
         onSubmit(rationale);
         close();
     }, [onSubmit, rationale, close]);
+    /**
+     * Handles keyboard shortcuts:
+     * - Ctrl+Enter: Submit the rationale
+     * - Escape: Close the modal
+     */
     const handleKeydown = useCallback(e => {
         const parsedEvent = parseEvent(e);
         if (parsedEvent.isCtrl && parsedEvent.isEnter) {
@@ -45,21 +43,63 @@ const RationaleModal = ({ hits, onSubmit }) => {
             close();
         }
     }, [close, handleSubmit]);
+    /**
+     * Executes a facet search to retrieve rationales from existing hits
+     * @param request - The facet search request parameters
+     * @param type - The type of rationale source (assignment/analytic)
+     * @returns Array of rationale options with their type
+     */
+    const runFacet = useCallback(async (request, type) => {
+        const result = await dispatchApi(api.search.facet.hit.post(request), { throwError: false });
+        if (!result?.['howler.rationale']) {
+            return [];
+        }
+        return Object.keys(result['howler.rationale'] ?? {}).map(_rationale => ({
+            rationale: _rationale,
+            type
+        }));
+    }, [dispatchApi]);
+    /**
+     * Fetches preset rationales from the analytic configurations.
+     * Retrieves matching analytics for the provided hits and extracts their predefined rationales.
+     */
+    const fetchPresetRationales = useCallback(async () => {
+        const analytics = await Promise.all(hits.flatMap(hit => getMatchingAnalytic(hit)));
+        const uniqueAnalytics = uniqBy(analytics, 'analytic_id');
+        const rationales = uniqueAnalytics.flatMap(_analytic => _analytic?.triage_settings?.rationales ?? []);
+        return rationales.map(_rationale => ({ rationale: _rationale, type: 'preset' }));
+    }, [hits, getMatchingAnalytic]);
     useEffect(() => {
         (async () => {
             setLoading(true);
-            // TODO: Eventually switch a a facet call once the elasticsearch refactor is complete
-            const results = flatten(await Promise.all(queries.map(async ({ query, type }) => {
-                const result = await dispatchApi(api.search.hit.post({ query, rows: 250, fl: 'howler.rationale,howler.assignment' }), { throwError: false });
-                return uniqBy((result?.items ?? []).map(_hit => ({ rationale: _hit.howler.rationale, type })), 'rationale');
-            })));
-            setSuggestedRationales(results);
-            setLoading(false);
+            try {
+                const options = await Promise.all([
+                    fetchPresetRationales(),
+                    // Rationales by other users for the current analytic
+                    runFacet({
+                        query: 'howler.rationale:*',
+                        rows: 10,
+                        fields: ['howler.rationale'],
+                        filters: hits.map(hit => `howler.analytic:"${sanitizeLuceneQuery(hit.howler.analytic)}")`)
+                    }, 'analytic'),
+                    // Rationales provided by this user
+                    runFacet({
+                        query: `howler.rationale:* AND howler.assignment:${user.username} AND timestamp:[now-14d TO now]`,
+                        rows: 25,
+                        fields: ['howler.rationale']
+                    }, 'assignment')
+                ]);
+                setSuggestedRationales(options.flat());
+            }
+            finally {
+                setLoading(false);
+            }
         })();
-    }, [dispatchApi, queries]);
+    }, [dispatchApi, fetchPresetRationales, getMatchingAnalytic, hits, runFacet, user.username]);
+    // Render the modal with title, description, autocomplete input, and action buttons
     return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rationale.title') }), _jsx(Typography, { children: t('modal.rationale.description') }), _jsx(Autocomplete, { loading: loading, loadingText: t('loading'), freeSolo: true, value: rationale, onChange: (_, newValue) => setRationale(isString(newValue) ? newValue : (newValue?.rationale ?? '')), options: suggestedRationales, getOptionLabel: suggestion => (isString(suggestion) ? suggestion : suggestion.rationale), isOptionEqualToValue: (option, value) => isString(value) ? option.rationale === value : isEqual(option, value), fullWidth: true, disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, label: t('modal.rationale.label'), onChange: e => setRationale(e.target.value), onKeyDown: handleKeydown, InputProps: {
                         ...params.InputProps,
-                        endAdornment: (_jsxs(_Fragment, { children: [loading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] }))
-                    } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: option.rationale, secondary: t(`modal.rationale.type.${option.type}`) })) }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+                        endAdornment: (_jsxs(_Fragment, { children: [loading ? _jsx(CircularProgress, { "aria-label": t('loading'), color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] }))
+                    } })), renderOption: ({ key, ...props }, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: option.rationale, secondary: t(`modal.rationale.type.${option.type}`) }, key)) }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
 };
 export default RationaleModal;

package/components/elements/display/modals/RationaleModal.test.d.ts

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

package/components/elements/display/modals/RationaleModal.test.js

@@ -0,0 +1,538 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import RationaleModal from './RationaleModal';
+vi.mock('api', { spy: true });
+vi.mock('commons/components/app/hooks/useAppUser', () => ({
+    useAppUser: () => ({
+        user: { username: 'test-user' }
+    })
+}));
+// Mock functions
+let mockGetMatchingAnalytic = vi.fn();
+let mockOnSubmit = vi.fn();
+import { hpost } from '@cccsaurora/howler-ui/api';
+const mockHpost = vi.mocked(hpost);
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({
+        getMatchingAnalytic: mockGetMatchingAnalytic
+    })
+}));
+// Mock modal context
+const mockModalContext = {
+    close: vi.fn(),
+    open: vi.fn()
+};
+// Test wrapper
+const Wrapper = ({ children }) => {
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ModalContext.Provider, { value: mockModalContext, children: children }) }));
+};
+describe('RationaleModal', () => {
+    let user;
+    let defaultHits;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        defaultHits = [
+            createMockHit({
+                howler: {
+                    id: 'hit-1',
+                    analytic: 'test-analytic-1'
+                }
+            })
+        ];
+        // Reset mock functions
+        mockGetMatchingAnalytic.mockResolvedValue({
+            analytic_id: 'test-analytic-1',
+            triage_settings: {
+                rationales: ['Preset Rationale 1', 'Preset Rationale 2']
+            }
+        });
+        mockOnSubmit.mockClear();
+        mockModalContext.close.mockClear();
+        mockHpost.mockReset();
+    });
+    describe('Initial Rendering', () => {
+        it('should render modal title', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByText(i18n.t('modal.rationale.title'))).toBeInTheDocument();
+        });
+        it('should render modal description', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByText(i18n.t('modal.rationale.description'))).toBeInTheDocument();
+        });
+        it('should render autocomplete input field', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByLabelText(i18n.t('modal.rationale.label'))).toBeInTheDocument();
+        });
+        it('should render cancel button', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByText(i18n.t('cancel'))).toBeInTheDocument();
+        });
+        it('should render submit button', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByText(i18n.t('submit'))).toBeInTheDocument();
+        });
+        it('should render with minimum width', () => {
+            const { container } = render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const stack = container.querySelector('.MuiStack-root');
+            expect(stack).toHaveStyle({ minWidth: '500px' });
+        });
+    });
+    describe('Loading State', () => {
+        it('should show loading spinner in input field', async () => {
+            mockHpost.mockImplementationOnce(() => new Promise(() => { })); // Never resolves
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByLabelText(i18n.t('loading'))).toBeInTheDocument();
+            expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        });
+        it('should hide loading indicator after rationales are fetched', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(mockHpost).toBeCalledTimes(2);
+            });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('Suggested Rationales', () => {
+        it('should fetch preset rationales from analytics', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(defaultHits[0]);
+            });
+        });
+        it('should fetch rationales used by other users for same analytic', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(mockHpost).toHaveBeenCalledWith('/api/v1/search/facet/hit', {
+                    fields: ['howler.rationale'],
+                    query: 'howler.rationale:* AND howler.assignment:test-user AND timestamp:[now-14d TO now]',
+                    rows: 25
+                });
+                expect(mockHpost).toHaveBeenCalledWith('/api/v1/search/facet/hit', {
+                    fields: ['howler.rationale'],
+                    filters: ['howler.analytic:"test\\-analytic\\-1")'],
+                    query: 'howler.rationale:*',
+                    rows: 10
+                });
+            });
+        });
+        it('should fetch rationales from current user (last 14 days)', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const calls = mockHpost.mock.calls;
+                const userRationaleCall = calls.find(call => JSON.stringify(call).includes('test-user'));
+                expect(userRationaleCall).toBeTruthy();
+            });
+        });
+        it('should display preset rationales in autocomplete options', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('Preset Rationale 1')).toBeInTheDocument();
+            });
+        });
+        it('should display analytic rationales in autocomplete options', async () => {
+            mockHpost
+                .mockResolvedValueOnce({
+                'howler.rationale': { 'Analytic Rationale 1': 3 }
+            })
+                .mockResolvedValueOnce({ 'howler.rationale': {} });
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('Analytic Rationale 1')).toBeInTheDocument();
+            });
+        });
+        it('should display assignment rationales in autocomplete options', async () => {
+            mockHpost
+                .mockResolvedValueOnce({ 'howler.rationale': {} })
+                .mockResolvedValueOnce({ 'howler.rationale': { 'My Previous Rationale': 1 } });
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('My Previous Rationale')).toBeInTheDocument();
+            });
+        });
+        it('should show rationale type for each option', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                const typeLabel = screen.queryAllByText(i18n.t('modal.rationale.type.preset'));
+                expect(typeLabel.length).toBe(2);
+            });
+        });
+        it('should handle empty rationale results', async () => {
+            mockHpost.mockResolvedValue({});
+            mockGetMatchingAnalytic.mockResolvedValue({ analytic_id: 'test', triage_settings: {} });
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            // Should not crash, no options displayed
+            expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+        });
+        it('should deduplicate rationales from multiple analytics', async () => {
+            const multipleHits = [
+                createMockHit({ howler: { id: 'hit-1', analytic: 'analytic-1' } }),
+                createMockHit({ howler: { id: 'hit-2', analytic: 'analytic-1' } })
+            ];
+            mockGetMatchingAnalytic.mockResolvedValue({
+                analytic_id: 'analytic-1',
+                triage_settings: { rationales: ['Shared Rationale'] }
+            });
+            render(_jsx(RationaleModal, { hits: multipleHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                const options = screen.getAllByText('Shared Rationale');
+                // Should appear only once despite multiple hits
+                expect(options).toHaveLength(1);
+            });
+        });
+    });
+    describe('User Input', () => {
+        it('should allow typing free text in autocomplete', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Custom rationale text');
+            expect(input).toHaveValue('Custom rationale text');
+        });
+        it('should update rationale state when typing', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith('Test rationale');
+        });
+        it('should allow selecting a suggested rationale', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('Preset Rationale 1')).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Preset Rationale 1'));
+            expect(input).toHaveValue('Preset Rationale 1');
+        });
+        it('should clear input when text is deleted', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test');
+            await user.clear(input);
+            expect(input).toHaveValue('');
+        });
+    });
+    describe('Submit Functionality', () => {
+        it('should call onSubmit with rationale when submit button clicked', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith('Test rationale');
+            expect(mockOnSubmit).toHaveBeenCalledTimes(1);
+        });
+        it('should close modal after submit', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+        });
+        it('should submit with empty rationale if no text entered', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith('');
+        });
+        it('should submit with selected rationale from suggestions', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('Preset Rationale 1')).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Preset Rationale 1'));
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith('Preset Rationale 1');
+        });
+    });
+    describe('Cancel Functionality', () => {
+        it('should close modal when cancel button clicked', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const cancelButton = screen.getByText(i18n.t('cancel'));
+            await user.click(cancelButton);
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+        });
+        it('should not call onSubmit when cancel button clicked', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            const cancelButton = screen.getByText(i18n.t('cancel'));
+            await user.click(cancelButton);
+            expect(mockOnSubmit).not.toHaveBeenCalled();
+        });
+    });
+    describe('Keyboard Shortcuts', () => {
+        it('should submit when Ctrl+Enter is pressed', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            await user.keyboard('{Control>}{Enter}{/Control}');
+            expect(mockOnSubmit).toHaveBeenCalledWith('Test rationale');
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+        });
+        it('should close modal when Escape is pressed', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            await user.keyboard('{Escape}');
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+            expect(mockOnSubmit).not.toHaveBeenCalled();
+        });
+        it('should not submit when only Enter is pressed without Ctrl', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test rationale');
+            await user.keyboard('{Enter}');
+            // Enter alone in autocomplete shouldn't submit the form
+            expect(mockOnSubmit).not.toHaveBeenCalled();
+        });
+        it('should handle multiple keyboard shortcuts correctly', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            // Press Escape first - should close
+            await user.type(input, 'First');
+            await user.keyboard('{Escape}');
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+            expect(mockOnSubmit).not.toHaveBeenCalled();
+        });
+    });
+    describe('Multiple Hits', () => {
+        it('should handle multiple hits with different analytics', async () => {
+            const multipleHits = [
+                createMockHit({ howler: { id: 'hit-1', analytic: 'analytic-1' } }),
+                createMockHit({ howler: { id: 'hit-2', analytic: 'analytic-2' } })
+            ];
+            mockGetMatchingAnalytic
+                .mockResolvedValueOnce({
+                analytic_id: 'analytic-1',
+                triage_settings: { rationales: ['Rationale A'] }
+            })
+                .mockResolvedValueOnce({
+                analytic_id: 'analytic-2',
+                triage_settings: { rationales: ['Rationale B'] }
+            });
+            render(_jsx(RationaleModal, { hits: multipleHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(mockGetMatchingAnalytic).toHaveBeenCalledTimes(2);
+            });
+        });
+        it('should sanitize lucene queries in filters', async () => {
+            const hitWithSpecialChars = createMockHit({
+                howler: { id: 'hit-1', analytic: 'test:analytic+special' }
+            });
+            render(_jsx(RationaleModal, { hits: [hitWithSpecialChars], onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(mockHpost).toHaveBeenCalled();
+            });
+            // Verify that sanitizeLuceneQuery was used (analytic should be in quotes)
+            const dispatchCalls = mockHpost.mock.calls;
+            const hasQuotedAnalytic = dispatchCalls.some(call => JSON.stringify(call).includes('howler.analytic:'));
+            expect(hasQuotedAnalytic).toBeTruthy();
+        });
+    });
+    describe('Error Handling', () => {
+        it('should handle API errors gracefully', async () => {
+            mockHpost.mockRejectedValueOnce(new Error('API Error'));
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            // Component should still be functional
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            expect(input).toBeInTheDocument();
+        });
+        it('should handle missing analytic data', async () => {
+            mockGetMatchingAnalytic.mockResolvedValue(null);
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            // Should not crash
+            expect(screen.getByLabelText(i18n.t('modal.rationale.label'))).toBeInTheDocument();
+        });
+        it('should handle missing triage_settings in analytic', async () => {
+            mockGetMatchingAnalytic.mockResolvedValue({
+                analytic_id: 'test-analytic',
+                triage_settings: null
+            });
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            expect(screen.getByLabelText(i18n.t('modal.rationale.label'))).toBeInTheDocument();
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle empty hits array', async () => {
+            render(_jsx(RationaleModal, { hits: [], onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            expect(screen.getByLabelText(i18n.t('modal.rationale.label'))).toBeInTheDocument();
+        });
+        it('should handle special characters in rationale', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const specialText = 'Test <>&"\'{}[]()';
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, specialText.replace(/([{\[])/g, '$1$1'));
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith(specialText);
+        });
+        it('should handle rapid successive submissions', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Test');
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await act(async () => {
+                await user.click(submitButton);
+                await user.click(submitButton);
+                await user.click(submitButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledTimes(3);
+        });
+    });
+    describe('Accessibility', () => {
+        it('should have accessible labels for all interactive elements', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            expect(screen.getByLabelText(i18n.t('modal.rationale.label'))).toBeInTheDocument();
+            expect(screen.getByRole('button', { name: i18n.t('cancel') })).toBeInTheDocument();
+            expect(screen.getByRole('button', { name: i18n.t('submit') })).toBeInTheDocument();
+        });
+        it('should support keyboard navigation', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            const cancelButton = screen.getByText(i18n.t('cancel'));
+            const submitButton = screen.getByText(i18n.t('submit'));
+            // Tab through elements
+            await user.tab();
+            expect(input).toHaveFocus();
+            await user.tab();
+            expect(cancelButton).toHaveFocus();
+            await user.tab();
+            expect(submitButton).toHaveFocus();
+        });
+        it('should have proper ARIA attributes on autocomplete', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            expect(input).toHaveAttribute('aria-autocomplete', 'list');
+            expect(input).toHaveAttribute('role', 'combobox');
+        });
+        it('should announce loading state to screen readers', async () => {
+            mockHpost.mockImplementation(() => new Promise(() => { }));
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const progressbar = screen.getByRole('progressbar');
+            expect(progressbar).toBeInTheDocument();
+        });
+        it('should have semantic heading structure', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const heading = screen.getByRole('heading', { level: 4 });
+            expect(heading).toHaveTextContent(i18n.t('modal.rationale.title'));
+        });
+        it('should provide accessible descriptions for rationale types', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                const typeLabel = screen.queryAllByText(i18n.t('modal.rationale.type.preset'));
+                expect(typeLabel.length).toBe(2);
+            });
+        });
+        it('should maintain focus when opening autocomplete', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            expect(input).toHaveFocus();
+        });
+        it('should support screen reader navigation through options', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                const listbox = screen.getByRole('listbox');
+                expect(listbox).toBeInTheDocument();
+            });
+            const options = screen.getAllByRole('option');
+            expect(options.length).toBeGreaterThan(0);
+        });
+        it('should announce selected option to screen readers', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(screen.getByText('Preset Rationale 1')).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Preset Rationale 1'));
+            expect(input).toHaveValue('Preset Rationale 1');
+        });
+        it('should have sufficient color contrast for buttons', () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const cancelButton = screen.getByRole('button', { name: i18n.t('cancel') });
+            const submitButton = screen.getByRole('button', { name: i18n.t('submit') });
+            expect(cancelButton).toBeVisible();
+            expect(submitButton).toBeVisible();
+        });
+    });
+    describe('Integration', () => {
+        it('should work with all context providers', async () => {
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+            });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.type(input, 'Integration test');
+            const submitButton = screen.getByText(i18n.t('submit'));
+            await user.click(submitButton);
+            expect(mockOnSubmit).toHaveBeenCalledWith('Integration test');
+            expect(mockModalContext.close).toHaveBeenCalledTimes(1);
+        });
+        it('should combine rationales from all sources', async () => {
+            mockGetMatchingAnalytic.mockResolvedValue({
+                analytic_id: 'test',
+                triage_settings: { rationales: ['Preset 1'] }
+            });
+            mockHpost
+                .mockResolvedValueOnce({ 'howler.rationale': { 'Analytic 1': 2 } })
+                .mockResolvedValueOnce({ 'howler.rationale': { 'Assignment 1': 1 } });
+            render(_jsx(RationaleModal, { hits: defaultHits, onSubmit: mockOnSubmit }), { wrapper: Wrapper });
+            const input = screen.getByLabelText(i18n.t('modal.rationale.label'));
+            await user.click(input);
+            await waitFor(() => {
+                expect(mockHpost).toHaveBeenCalledTimes(2);
+                expect(screen.getByText('Preset 1')).toBeInTheDocument();
+                expect(screen.getByText('Analytic 1')).toBeInTheDocument();
+                expect(screen.getByText('Assignment 1')).toBeInTheDocument();
+            });
+        });
+    });
+});

package/components/routes/analytics/TriageSettings.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, Divider, Grid, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { Check, Delete, Remove } from '@mui/icons-material';
+import { Card, Chip, Divider, Grid, IconButton, InputAdornment, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-dayjs-4';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import EditRow from '@cccsaurora/howler-ui/components/elements/EditRow';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { capitalize, uniq } from 'lodash-es';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { capitalize, uniq, without } from 'lodash-es';
+import { useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 const TriageSettings = ({ analytic, setAnalytic }) => {
     const { dispatchApi } = useMyApi();
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     const [loading, setLoading] = useState(false);
+    const [rationale, setRationale] = useState('');
     const updateAnalytic = useCallback(async (changes) => {
         try {
             setLoading(true);
@@ -26,24 +28,45 @@ const TriageSettings = ({ analytic, setAnalytic }) => {
             setLoading(false);
         }
     }, [analytic?.analytic_id, dispatchApi, setAnalytic]);
-    const selectedAssessments = useMemo(() => analytic?.triage_settings?.valid_assessments ?? config.lookups?.['howler.assessment'] ?? [], [analytic?.triage_settings?.valid_assessments, config.lookups]);
+    const selectedAssessments = analytic?.triage_settings?.valid_assessments ?? config.lookups?.['howler.assessment'] ?? [];
+    const rationales = analytic?.triage_settings?.rationales ?? [];
     return (_jsxs(Stack, { spacing: 2, pt: 1, children: [_jsx(Divider, { flexItem: true }), _jsx(TableContainer, { sx: {
                     '& table tr:last-child td': {
                         borderBottom: 0
                     }
                 }, component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, children: _jsx(Typography, { variant: "h6", children: t('route.analytics.triage.title') }) }) }) }), _jsxs(TableBody, { children: [_jsx(EditRow, { titleKey: "route.analytics.triage.rationale", descriptionKey: "route.analytics.triage.rationale.description", value: analytic?.triage_settings?.skip_rationale ?? false, type: "checkbox", onEdit: async (value) => updateAnalytic({
                                         triage_settings: { skip_rationale: JSON.parse(value) }
-                                    }) }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { width: '100%', borderBottom: 0, paddingBottom: '0 !important', whiteSpace: 'nowrap' }, children: t('route.analytics.triage.assessments') }) }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { borderBottom: 0, paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.analytics.triage.assessments.description') }) }) }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, children: _jsx(Grid, { container: true, spacing: 1, children: config.lookups?.['howler.assessment']?.map(assessment => (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: theme => ({
-                                                        border: 'thin solid',
-                                                        borderColor: 'divider',
-                                                        p: 1,
-                                                        borderRadius: theme.shape.borderRadius
-                                                    }), children: [_jsx(Tooltip, { title: t(`hit.details.asessments.${assessment}.description`), children: _jsx(Typography, { component: "span", children: assessment.split('-').map(capitalize).join(' ') }) }), _jsx(Checkbox, { checked: selectedAssessments.includes(assessment) ?? true, onChange: (_event, checked) => updateAnalytic({
-                                                                triage_settings: {
-                                                                    valid_assessments: !checked
-                                                                        ? selectedAssessments.filter(_assessment => assessment !== _assessment)
-                                                                        : uniq([...selectedAssessments, assessment])
-                                                                }
-                                                            }), disabled: loading })] }) }, assessment))) }) }) })] })] }) })] }));
+                                    }) }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { width: '100%', borderBottom: 0, paddingBottom: '0 !important', whiteSpace: 'nowrap' }, children: t('route.analytics.triage.assessments') }) }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { borderBottom: 0, paddingTop: '0 !important' }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.analytics.triage.assessments.description') }), _jsx(Grid, { container: true, spacing: 1, sx: theme => ({ marginLeft: `${theme.spacing(-1)} !important`, marginTop: `0 !important` }), children: config.lookups?.['howler.assessment']?.map(assessment => {
+                                                        const checked = selectedAssessments.includes(assessment) ?? true;
+                                                        return (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", icon: checked ? (_jsx(Check, { fontSize: "small", color: "success" })) : (_jsx(Remove, { fontSize: "small", color: "error" })), color: checked ? 'success' : 'error', label: _jsx(Tooltip, { title: t(`hit.details.asessments.${assessment}.description`), children: _jsx("span", { children: assessment.split('-').map(capitalize).join(' ') }) }), onClick: () => updateAnalytic({
+                                                                    triage_settings: {
+                                                                        valid_assessments: checked
+                                                                            ? without(selectedAssessments, assessment)
+                                                                            : uniq([...selectedAssessments, assessment])
+                                                                    }
+                                                                }), disabled: loading }) }, assessment));
+                                                    }) })] }) }) }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { width: '100%', borderBottom: 0, paddingBottom: '0 !important', whiteSpace: 'nowrap' }, children: t('route.analytics.triage.rationales') }) }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { borderBottom: 0, paddingTop: '0 !important' }, children: _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.analytics.triage.rationales.description') }), rationales.map(_rationale => (_jsx(Card, { variant: "outlined", children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", px: 1, children: [_jsx(Typography, { flex: 1, children: _rationale }), _jsx(IconButton, { onClick: () => updateAnalytic({
+                                                                    triage_settings: {
+                                                                        rationales: without(rationales, _rationale)
+                                                                    }
+                                                                }), children: _jsx(Delete, {}) })] }) }, _rationale))), _jsx(Card, { variant: "outlined", sx: { p: 1 }, children: _jsx(TextField, { label: t('route.analytics.rationales.new'), value: rationale, onChange: e => setRationale(e.target.value), onKeyDown: e => {
+                                                            if (e.key === 'Enter' && !!rationale) {
+                                                                updateAnalytic({
+                                                                    triage_settings: {
+                                                                        rationales: uniq([...rationales, rationale])
+                                                                    }
+                                                                });
+                                                                setRationale('');
+                                                            }
+                                                        }, fullWidth: true, size: "small", InputProps: {
+                                                            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: "small", disabled: !rationale, onClick: () => {
+                                                                        updateAnalytic({
+                                                                            triage_settings: {
+                                                                                rationales: uniq([...rationales, rationale])
+                                                                            }
+                                                                        });
+                                                                        setRationale('');
+                                                                    }, children: _jsx(Check, { fontSize: "small" }) }) }))
+                                                        } }) })] }) }) }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { padding: '0 !important' }, children: _jsx(LinearProgress, { sx: { opacity: loading ? 1 : 0 } }) }) })] })] }) })] }));
 };
 export default TriageSettings;

package/locales/en/translation.json

@@ -493,6 +493,9 @@
     "route.analytics.triage.rationale.description": "When triaging alerts from this analytic, the rationale is not prompted, and is instead auto-generated.",
     "route.analytics.triage.assessments": "Permitted Assessment Outcomes",
     "route.analytics.triage.assessments.description": "When triaging alerts from this analytic, what assessments are valid?",
+    "route.analytics.triage.rationales": "Preset Rationales",
+    "route.analytics.triage.rationales.description": "Define preset rationales that will be available when triaging alerts from this analytic.",
+    "route.analytics.rationales.new": "New Rationale",
     "route.actions": "Actions",
     "route.actions.operation.add": "Add New Operation",
     "route.actions.alert.error": "There are {{count}} hits in your query for which this operation may fail.",

package/locales/fr/translation.json

@@ -496,6 +496,9 @@
     "route.analytics.triage.rationale.description": "Lors du triage des alertes provenant de cette analyse, la justification n'est pas demandée et est générée automatiquement.",
     "route.analytics.triage.assessments": "Résultats d'évaluation autorisés",
     "route.analytics.triage.assessments.description": "Lors du triage des alertes provenant de cette analyse, quelles sont les évaluations valides?",
+    "route.analytics.triage.rationales": "Justifications prédéfinies",
+    "route.analytics.triage.rationales.description": "Définir les justifications prédéfinies qui seront disponibles lors du triage des alertes de cette analyse.",
+    "route.analytics.rationales.new": "Nouvelle justification",
     "route.actions": "Actions",
     "route.actions.operation.add": "Ajouter une nouvelle opération",
     "route.actions.alert.error": "Il y a {{count}} hits dans votre requête pour lesquels cette opération peut échouer.",

package/models/entities/generated/TriageSettings.d.ts

@@ -3,6 +3,7 @@
  */
 export interface TriageSettings {
   dossiers?: string[];
+  rationales?: string[];
   skip_rationale?: boolean;
   valid_assessments?: string[];
 }

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.16.0-dev.381",
+  "version": "2.16.0-dev.383",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/tests/server-handlers.js

@@ -80,6 +80,19 @@ const handlers = [
                 span: 'date.range.1.week'
             }
         ]
-    }))
+    })),
+    http.post('/api/v1/search/facet/hit', async ({ request }) => {
+        const payload = await request.json();
+        let facetResponse = Object.fromEntries(payload.fields.map(field => [field, { 'facet 1': 1, 'facet 2': 2 }]));
+        if (payload.filters?.[0]?.includes('analytic')) {
+            facetResponse = Object.fromEntries(payload.fields.map(field => [field, { 'Analytic 1': 1, 'Analytic 2': 2 }]));
+        }
+        else if (payload.query.includes('test-user')) {
+            facetResponse = Object.fromEntries(payload.fields.map(field => [field, { 'Assignment 1': 1, 'Assignment 2': 2 }]));
+        }
+        return HttpResponse.json({
+            api_response: facetResponse
+        });
+    })
 ];
 export { handlers };