@cccsaurora/howler-ui 3.1.0-dev.1690 → 3.1.0-dev.1694

package/components/elements/UserList.js

@@ -42,6 +42,7 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
         options: allUserIds,
         renderInput,
         renderOption,
+        slotProps: { popper: { sx: { zIndex: 1600 } } },
         onInputChange: (_e, value) => search(value),
         getOptionDisabled: (optionUserId) => userIds.includes(optionUserId) || except.includes(optionUserId)
     };

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

@@ -1,10 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Button, CircularProgress, Divider, Stack, TextField, Typography } from '@mui/material';
+import { Delete } from '@mui/icons-material';
+import { Autocomplete, Button, CircularProgress, Divider, IconButton, List, ListItem, ListItemText, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import MarkdownEditor from '@cccsaurora/howler-ui/components/elements/MarkdownEditor';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useContext, useMemo, useState } from 'react';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CaseRecordRow from './CaseRecordRow';
 import { useRecordEntries } from './hooks';
@@ -17,8 +22,19 @@ const CreateCaseModal = ({ records }) => {
     const [summary, setSummary] = useState('');
     const [overview, setOverview] = useState('');
     const [escalation, setEscalation] = useState(null);
+    const [participants, setParticipants] = useState([]);
     const [submitting, setSubmitting] = useState(false);
     const [entries, updateEntry] = useRecordEntries(records);
+    const participantUsers = useMyUserList(participants);
+    const handleAddParticipant = useCallback(([userId]) => {
+        if (!userId) {
+            return;
+        }
+        setParticipants(current => (current.includes(userId) ? current : [...current, userId]));
+    }, []);
+    const handleRemoveParticipant = useCallback((userId) => {
+        setParticipants(current => current.filter(id => id !== userId));
+    }, []);
     const isValid = useMemo(() => !!caseTitle.trim() && !!summary.trim() && entries.every(e => !!e.name.trim()), [caseTitle, summary, entries]);
     const onSubmit = async () => {
         if (!isValid) {
@@ -30,7 +46,8 @@ const CreateCaseModal = ({ records }) => {
                 title: caseTitle.trim(),
                 summary: summary.trim(),
                 ...(overview.trim() ? { overview: overview.trim() } : {}),
-                ...(escalation ? { escalation } : {})
+                ...(escalation ? { escalation } : {}),
+                ...(participants.length > 0 ? { participants } : {})
             }));
             if (newCase?.case_id) {
                 for (const entry of entries) {
@@ -48,6 +65,6 @@ const CreateCaseModal = ({ records }) => {
             setSubmitting(false);
         }
     };
-    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', maxHeight: '90vh', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.create_case') }), _jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.title'), value: caseTitle, onChange: ev => setCaseTitle(ev.target.value) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.summary'), value: summary, onChange: ev => setSummary(ev.target.value) }), _jsx(Autocomplete, { options: ESCALATIONS, value: escalation, disablePortal: true, onChange: (_ev, val) => setEscalation(val), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.create_case.escalation'), fullWidth: true })) }), _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.overview') }), _jsx(MarkdownEditor, { content: overview, setContent: setOverview, height: "200px", fontSize: 14 })] })] }), entries.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.items_section') }) }), _jsx(Stack, { spacing: 1, overflow: "auto", flex: 1, children: entries.map((entry, i) => (_jsx(CaseRecordRow, { entry: entry, onNameChange: val => updateEntry(i, 'name', val), onParentChange: val => updateEntry(i, 'parent', val) }, entry.record.howler.id))) })] })) : (_jsx("div", { style: { flex: 1 } })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, disabled: submitting, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid || submitting, startIcon: submitting ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : undefined, onClick: onSubmit, children: t('confirm') })] })] }));
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', maxHeight: '90vh', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.create_case') }), _jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.title'), value: caseTitle, onChange: ev => setCaseTitle(ev.target.value) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.create_case.summary'), value: summary, onChange: ev => setSummary(ev.target.value) }), _jsx(Autocomplete, { options: ESCALATIONS, value: escalation, disablePortal: true, onChange: (_ev, val) => setEscalation(val), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.create_case.escalation'), fullWidth: true })) }), _jsxs(Stack, { spacing: 0.5, children: [_jsx(UserList, { variant: "list", i18nLabel: "page.cases.detail.assignment", userIds: [], onChange: handleAddParticipant, except: participants, disabled: submitting, showEmptyInput: true }), participants.length > 0 && (_jsx(List, { dense: true, children: participants.map(userId => (_jsx(ListItem, { disableGutters: true, children: _jsxs(Stack, { direction: "row", sx: { alignItems: 'center', width: '100%' }, spacing: 1, children: [_jsx(HowlerAvatar, { userId: userId || 'Unknown' }), _jsx(ListItemText, { primary: participantUsers[userId]?.name || userId, secondary: participantUsers[userId]?.email }), _jsx(FlexOne, {}), _jsx(Tooltip, { title: `${t('button.delete')}`, children: _jsx(IconButton, { disabled: submitting, onClick: () => handleRemoveParticipant(userId), children: _jsx(Delete, { color: "error" }) }) })] }) }, userId))) }))] }), _jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.overview') }), _jsx(MarkdownEditor, { content: overview, setContent: setOverview, height: "200px", fontSize: 14 })] })] }), entries.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { children: _jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.create_case.items_section') }) }), _jsx(Stack, { spacing: 1, overflow: "auto", flex: 1, children: entries.map((entry, i) => (_jsx(CaseRecordRow, { entry: entry, onNameChange: val => updateEntry(i, 'name', val), onParentChange: val => updateEntry(i, 'parent', val) }, entry.record.howler.id))) })] })) : (_jsx("div", { style: { flex: 1 } })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, disabled: submitting, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid || submitting, startIcon: submitting ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : undefined, onClick: onSubmit, children: t('confirm') })] })] }));
 };
 export default CreateCaseModal;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor, within } 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';
@@ -14,9 +14,23 @@ import CreateCaseModal from './CreateCaseModal';
 // ---------------------------------------------------------------------------
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockClose = vi.hoisted(() => vi.fn());
+const mockUserList = vi.hoisted(() => ({ onChange: null }));
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
+// UserList relies on UserListContext; stub it and expose its onChange so tests can add participants.
+vi.mock('components/elements/UserList', () => ({
+    default: ({ onChange, except, disabled }) => {
+        mockUserList.onChange = onChange;
+        return _jsx("div", { id: "user-list", "data-except": JSON.stringify(except ?? []), "data-disabled": String(!!disabled) });
+    }
+}));
+vi.mock('components/hooks/useMyUserList', () => ({
+    default: () => ({})
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId ?? 'none'}` })
+}));
 vi.mock('components/elements/hit/elements/EscalationChip', () => ({
     default: () => null
 }));
@@ -76,6 +90,7 @@ describe('CreateCaseModal', () => {
     beforeEach(() => {
         user = userEvent.setup();
         vi.clearAllMocks();
+        mockUserList.onChange = null;
         // Default: case creation returns a case, item post resolves
         mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
     });
@@ -291,6 +306,62 @@ describe('CreateCaseModal', () => {
         });
     });
     // -------------------------------------------------------------------------
+    // Participants
+    // -------------------------------------------------------------------------
+    describe('participants', () => {
+        it('renders the participant picker', () => {
+            renderModal([]);
+            expect(screen.getByTestId('user-list')).toBeInTheDocument();
+        });
+        it('includes participants in case.post when added', async () => {
+            const api = (await import('api')).default;
+            renderModal([]);
+            await fillCaseMetadata(user);
+            act(() => mockUserList.onChange?.(['analystA']));
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.post).toHaveBeenCalledWith(expect.objectContaining({ participants: ['analystA'] }));
+        });
+        it('does not include participants when none are added', async () => {
+            const api = (await import('api')).default;
+            renderModal([]);
+            await fillCaseMetadata(user);
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            const callArg = vi.mocked(api.v2.case.post).mock.calls[0][0];
+            expect(callArg).not.toHaveProperty('participants');
+        });
+        it('does not add duplicate participants', async () => {
+            const api = (await import('api')).default;
+            renderModal([]);
+            await fillCaseMetadata(user);
+            act(() => mockUserList.onChange?.(['analystA']));
+            act(() => mockUserList.onChange?.(['analystA']));
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            expect(api.v2.case.post).toHaveBeenCalledWith(expect.objectContaining({ participants: ['analystA'] }));
+        });
+        it('excludes already-selected participants from the picker', async () => {
+            renderModal([]);
+            act(() => mockUserList.onChange?.(['analystA']));
+            await waitFor(() => expect(screen.getByTestId('user-list').getAttribute('data-except')).toBe(JSON.stringify(['analystA'])));
+        });
+        it('displays an added participant and removes it via the delete button', async () => {
+            const api = (await import('api')).default;
+            renderModal([]);
+            await fillCaseMetadata(user);
+            act(() => mockUserList.onChange?.(['analystA']));
+            const item = screen.getByText('analystA').closest('li');
+            expect(item).not.toBeNull();
+            await user.click(within(item).getByRole('button'));
+            expect(screen.queryByText('analystA')).not.toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
+            await waitFor(() => expect(mockClose).toHaveBeenCalled());
+            const callArg = vi.mocked(api.v2.case.post).mock.calls[0][0];
+            expect(callArg).not.toHaveProperty('participants');
+        });
+    });
+    // -------------------------------------------------------------------------
     // Multiple records
     // -------------------------------------------------------------------------
     describe('multiple records', () => {

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1690",
+  "version": "3.1.0-dev.1694",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",