@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/routes/cases/detail/sidebar/CaseFolderContextMenu.test.js

@@ -99,12 +99,13 @@ describe('CaseFolderContextMenu', () => {
             expect(mockDel).toHaveBeenCalledWith('case-1', ['folder-id'], true);
         });
     });
-    it('passes undefined item id through to delete API when id is missing', () => {
+    it('does not call the delete API when the item id is missing', () => {
         renderMenu({ item: { type: 'hit', value: 'h1', name: 'hit' } });
         act(() => {
             fireEvent.click(screen.getByText('page.cases.sidebar.item.remove'));
         });
-        expect(mockDel).toHaveBeenCalledWith('case-1', [undefined], false);
+        expect(mockDel).not.toHaveBeenCalled();
+        expect(mockDispatchApi).not.toHaveBeenCalled();
     });
     it('passes updated case to onUpdate after delete', async () => {
         const onUpdate = vi.fn();

package/components/routes/cases/detail/sidebar/FolderEntry.js

@@ -3,7 +3,7 @@ import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { BookRounded, CheckCircle, ChevronRight, Description, Folder, Lightbulb, Link as LinkIcon, TableChart, Visibility } from '@mui/icons-material';
 import { alpha, Box, Stack, Typography, useTheme } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 // Static map: item type → MUI icon component (avoids re-creating closures on each render)
 const ICON_FOR_TYPE = {
     folder: Folder,
@@ -42,7 +42,7 @@ const FolderEntry = ({ caseId, indent, label, iconColor = 'disabled', labelColor
     });
     const isLink = to != null && !isDragging;
     const active = decodeURIComponent(location.pathname) === to;
-    const Icon = ICON_FOR_TYPE[entry?.type] ?? Folder;
+    const Icon = ICON_FOR_TYPE[entry?.type ?? 'folder'];
     return (_jsxs(Stack, { ref: el => {
             setDroppableNodeRef(el);
             setDraggableNodeRef(el);
@@ -77,7 +77,7 @@ const FolderEntry = ({ caseId, indent, label, iconColor = 'disabled', labelColor
                         borderRadius: '5px',
                         transition: theme.transitions.create('border-color')
                     },
-                    isOver && caseId && { borderColor: theme.palette.primary.main }
+                    isOver && !!caseId && { borderColor: theme.palette.primary.main }
                 ] }), _jsx(ChevronRight, { fontSize: "small", color: "disabled", sx: [
                     !(isCase || isFolder) && { opacity: 0 },
                     {

package/components/routes/cases/detail/sidebar/FolderEntry.test.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children })),

package/components/routes/cases/detail/sidebar/types.d.ts

@@ -1,7 +1,7 @@
 import type { Item } from 'models/entities/generated/Item';
 
 export type Tree = {
-  item: Item;
+  item?: Item;
   leaves?: Item[];
   folders?: {
     [key: string]: Tree;

package/components/routes/cases/detail/sidebar/utils.js

@@ -7,7 +7,7 @@ import { sortBy } from 'lodash-es';
  * Items with `parent=null` or `parent=undefined` are root-level.
  */
 export const buildTree = (items = []) => {
-    const root = { item: null, leaves: [], folders: {} };
+    const root = { leaves: [], folders: {} };
     // Index folders by id
     const folderNodes = {};
     const folderItems = items.filter(item => item.type === 'folder');

package/components/routes/cases/detail/sidebar/utils.test.js

@@ -12,7 +12,7 @@ describe('buildTree', () => {
         expect(result.folders).toEqual({});
     });
     it('places items at root when parent is null', () => {
-        const item = { id: 'item-1', type: 'hit', value: 'hit-001', parent: null };
+        const item = { id: 'item-1', type: 'hit', value: 'hit-001' };
         const result = buildTree([item]);
         expect(result.leaves).toEqual([item]);
     });
@@ -22,27 +22,27 @@ describe('buildTree', () => {
         expect(result.leaves).toEqual([item]);
     });
     it('places items inside a folder by parent reference', () => {
-        const folder = { id: 'folder-1', type: 'folder', value: 'My Folder', name: 'My Folder', parent: null };
+        const folder = { id: 'folder-1', type: 'folder', value: 'My Folder', name: 'My Folder' };
         const item = { id: 'item-1', type: 'hit', value: 'hit-001', parent: 'folder-1' };
         const result = buildTree([folder, item]);
         expect(result.folders?.['My Folder']).toBeDefined();
         expect(result.folders?.['My Folder'].leaves).toEqual([item]);
     });
     it('renders empty folders', () => {
-        const folder = { id: 'folder-1', type: 'folder', value: 'Empty', name: 'Empty', parent: null };
+        const folder = { id: 'folder-1', type: 'folder', value: 'Empty', name: 'Empty' };
         const result = buildTree([folder]);
         expect(result.folders?.Empty).toBeDefined();
         expect(result.folders?.Empty.leaves).toEqual([]);
     });
     it('nests folders inside other folders', () => {
-        const parent = { id: 'f1', type: 'folder', value: 'Parent', name: 'Parent', parent: null };
+        const parent = { id: 'f1', type: 'folder', value: 'Parent', name: 'Parent' };
         const child = { id: 'f2', type: 'folder', value: 'Child', name: 'Child', parent: 'f1' };
         const item = { id: 'i1', type: 'hit', value: 'hit-1', parent: 'f2' };
         const result = buildTree([parent, child, item]);
         expect(result.folders?.Parent.folders?.Child.leaves).toEqual([item]);
     });
     it('includes folder id in tree nodes', () => {
-        const folder = { id: 'folder-1', type: 'folder', value: 'Folder', name: 'Folder', parent: null };
+        const folder = { id: 'folder-1', type: 'folder', value: 'Folder', name: 'Folder' };
         const result = buildTree([folder]);
         expect(result.folders?.Folder.item?.id).toBe('folder-1');
     });
@@ -52,7 +52,7 @@ describe('buildTree', () => {
         expect(result.leaves).toEqual([item]);
     });
     it('handles markdown items', () => {
-        const markdown = { id: 'md-1', type: 'markdown', value: '# Hello', parent: null };
+        const markdown = { id: 'md-1', type: 'markdown', value: '# Hello' };
         const result = buildTree([markdown]);
         expect(result.leaves).toEqual([markdown]);
     });
@@ -63,7 +63,7 @@ describe('buildTree', () => {
         expect(result.leaves).toHaveLength(2);
     });
     it('handles multiple items in the same folder', () => {
-        const folder = { id: 'f1', type: 'folder', value: 'Alerts', name: 'Alerts', parent: null };
+        const folder = { id: 'f1', type: 'folder', value: 'Alerts', name: 'Alerts' };
         const a = { id: 'a', type: 'hit', value: 'hit-a', parent: 'f1' };
         const b = { id: 'b', type: 'hit', value: 'hit-b', parent: 'f1' };
         const result = buildTree([folder, a, b]);
@@ -75,7 +75,7 @@ describe('buildTree', () => {
         expect(result.leaves?.[0].name).toBe('My Hit');
     });
     it('preserves all item fields on leaves', () => {
-        const rich = { id: 'r1', type: 'reference', value: 'https://example.com', name: 'Example', parent: null };
+        const rich = { id: 'r1', type: 'reference', value: 'https://example.com', name: 'Example' };
         const result = buildTree([rich]);
         expect(result.leaves?.[0]).toEqual(rich);
     });

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

@@ -25,4 +25,4 @@ export declare const buildObservableEntries: (_case: Case, records: (Hit | Event
  */
 export declare const classifyRole: (value: string, _case: Case, records: Partial<Hit | Event>[]) => ObservableRole;
 /** Resolve source metadata for an observable's record IDs */
-export declare const resolveSource: (record: Hit | Event, _case: Case) => ObservableSource;
+export declare const resolveSource: (record: Hit | Event, _case: Case) => ObservableSource | null;

package/components/routes/cases/detail/utils.js

@@ -37,14 +37,15 @@ export const buildObservableEntries = (_case, records) => {
                 map[key] = { type, value, sources: [], role: classifyRole(value, _case, records) };
             }
             const entry = map[key];
-            if (entry.sources.some(existingSource => existingSource.id === recordId)) {
+            const sources = (entry.sources ??= []);
+            if (sources.some(existingSource => existingSource.id === recordId)) {
                 continue;
             }
             const source = resolveSource(record, _case);
             if (!source) {
                 continue;
             }
-            entry.sources.push(source);
+            sources.push(source);
         }
     }
     return Object.values(map).filter(Boolean);

package/components/routes/cases/hooks/useCase.js

@@ -20,7 +20,14 @@ const useCase = ({ caseId, case: providedCase }) => {
         if (caseId) {
             setLoading(true);
             void dispatchApi(api.v2.case.get(caseId), { throwError: false })
-                .then(setCase)
+                .then(fetchedCase => {
+                if (!fetchedCase) {
+                    setCase(undefined);
+                    setMissing(true);
+                    return;
+                }
+                setCase(fetchedCase);
+            })
                 .finally(() => setLoading(false));
         }
     }, [caseId, dispatchApi]);
@@ -44,7 +51,12 @@ const useCase = ({ caseId, case: providedCase }) => {
         }
         try {
             if (publish) {
-                setCase(await dispatchApi(api.v2.case.put(activeCaseId, _updatedCase)));
+                const updatedCase = await dispatchApi(api.v2.case.put(activeCaseId, _updatedCase));
+                if (!updatedCase) {
+                    setMissing(true);
+                    return;
+                }
+                setCase(updatedCase);
             }
             else {
                 setCase(prevCase => {

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

@@ -238,7 +238,7 @@ describe('AddToCaseModal', () => {
                 name: `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`,
                 value: MOCK_HIT_1.howler.id,
                 type: 'hit',
-                parent: null
+                parent: undefined
             }));
         });
         it('includes the selected folder id as parent in the submitted item', async () => {

package/components/routes/cases/modals/AddToCaseModal.d.ts

@@ -2,7 +2,7 @@ import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case'
 import { type FC } from 'react';
 interface AddItemToCaseModalProps {
     case: Case;
-    parentId?: string | null;
+    parentId?: string;
     onUpdated?: (updatedCase: Case) => void;
 }
 declare const AddToCaseModal: FC<AddItemToCaseModalProps>;

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

@@ -12,7 +12,7 @@ const ITEM_TYPES = [
     { value: 'reference', labelKey: 'modal.cases.add_item.type.link' },
     { value: 'markdown', labelKey: 'modal.cases.add_item.type.markdown' }
 ];
-const AddToCaseModal = ({ case: _case, parentId = null, onUpdated }) => {
+const AddToCaseModal = ({ case: _case, parentId, onUpdated }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const monaco = useMonaco();
@@ -67,6 +67,6 @@ const AddToCaseModal = ({ case: _case, parentId = null, onUpdated }) => {
                             if (option) {
                                 setItemType(option);
                             }
-                        }, options: ITEM_TYPES, getOptionLabel: opt => t(opt.labelKey), isOptionEqualToValue: (option, choice) => option.value === choice.value, disablePortal: true, disableClearable: true, renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.type'), sx: { minWidth: '175px' } })) }), _jsx(TextField, { size: "small", label: t('modal.cases.add_item.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true })] }), itemType.value === 'reference' && (_jsx(TextField, { size: "small", label: t('modal.cases.add_item.url'), value: value, onChange: ev => setValue(ev.target.value), fullWidth: true, placeholder: "https://example.com" })), itemType.value === 'markdown' && (_jsx(Box, { sx: { border: 'thin solid', borderColor: theme.palette.divider }, children: _jsx(ThemedEditor, { id: "add-item-markdown", height: "240px", width: "100%", language: "markdown", theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: value, onChange: content => setValue(content ?? ''), options: {} }) })), folderOptions.length > 0 && (_jsx(Autocomplete, { options: folderOptions, getOptionLabel: opt => opt.label, isOptionEqualToValue: (opt, val) => opt.id === val.id, value: folderOptions.find(f => f.id === selectedParent) ?? null, disablePortal: true, onChange: (_ev, newVal) => setSelectedParent(newVal?.id ?? null), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.folder'), placeholder: t('modal.cases.add_item.root'), fullWidth: true })) })), _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') })] })] }));
+                        }, options: ITEM_TYPES, getOptionLabel: opt => t(opt.labelKey), isOptionEqualToValue: (option, choice) => option.value === choice.value, disablePortal: true, disableClearable: true, renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.type'), sx: { minWidth: '175px' } })) }), _jsx(TextField, { size: "small", label: t('modal.cases.add_item.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true })] }), itemType.value === 'reference' && (_jsx(TextField, { size: "small", label: t('modal.cases.add_item.url'), value: value, onChange: ev => setValue(ev.target.value), fullWidth: true, placeholder: "https://example.com" })), itemType.value === 'markdown' && (_jsx(Box, { sx: { border: 'thin solid', borderColor: theme.palette.divider }, children: _jsx(ThemedEditor, { id: "add-item-markdown", height: "240px", width: "100%", language: "markdown", theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: value, onChange: content => setValue(content ?? ''), options: {} }) })), folderOptions.length > 0 && (_jsx(Autocomplete, { options: folderOptions, getOptionLabel: opt => opt.label, isOptionEqualToValue: (opt, val) => opt.id === val.id, value: folderOptions.find(f => f.id === selectedParent), disablePortal: true, onChange: (_ev, newVal) => setSelectedParent(newVal?.id), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.folder'), placeholder: t('modal.cases.add_item.root'), fullWidth: true })) })), _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 AddToCaseModal;

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

@@ -248,7 +248,7 @@ describe('CreateCaseModal', () => {
                 name: `${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`,
                 value: MOCK_HIT_1.howler.id,
                 type: 'hit',
-                parent: null
+                parent: undefined
             }));
         });
         it('uses a custom edited item title in the name', async () => {

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

@@ -11,11 +11,12 @@ import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { isNil, uniq } from 'lodash-es';
+import { uniq } from 'lodash-es';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 import useCase from '../hooks/useCase';
 const HitEntry = ({ hit, checked, onChange }) => {
     if (!hit) {
@@ -28,7 +29,7 @@ const HitEntry = ({ hit, checked, onChange }) => {
                     '& > *': {
                         margin: '0 !important'
                     }
-                }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, pr: 1, width: "100%", children: [!isNil(checked) && (_jsx(Checkbox, { size: "small", checked: checked, onClick: e => {
+                }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, pr: 1, width: "100%", children: [notNil(checked) && (_jsx(Checkbox, { size: "small", checked: checked, onClick: e => {
                                 onChange?.();
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -104,14 +105,16 @@ const ResolveModal = ({ case: _case, onConfirm }) => {
                     query: `howler.id:(${hitIds.join(' OR ')})`,
                     metadata: ['analytic']
                 }));
-                loadRecords(result.items);
+                if (result) {
+                    loadRecords(result.items);
+                }
             }
             finally {
                 setLoading(false);
             }
         })();
     }, [dispatchApi, hitIds, loadRecords]);
-    return (_jsxs(Stack, { spacing: 1, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), "aria-label": t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups['howler.assessment'], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), "aria-label": t('hit.details.actions.assessment'), fullWidth: true })) }) }), _jsx(Button, { variant: "outlined", color: "primary", onClick: onAssess, disabled: selectedHitIds.size < 1 || !assessment, children: t('modal.cases.alerts.assess') })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), hits
+    return (_jsxs(Stack, { spacing: 1, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), "aria-label": t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups?.['howler.assessment'] ?? [], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), "aria-label": t('hit.details.actions.assessment'), fullWidth: true })) }) }), _jsx(Button, { variant: "outlined", color: "primary", onClick: onAssess, disabled: selectedHitIds.size < 1 || !assessment, children: t('modal.cases.alerts.assess') })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), hits
                         .filter(hit => unresolvedHits.includes(hit.howler.id))
                         .map(hit => (_jsx(HitEntry, { hit: hit, checked: selectedHitIds.has(hit.howler.id), onChange: () => handleToggleHit(hit.howler.id) }, hit.howler.id))), _jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), children: t('modal.cases.alerts.resolved') }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: hits
                                         .filter(hit => !unresolvedHits.includes(hit.howler.id))

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

@@ -7,7 +7,7 @@ import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/Mod
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { createMockCase, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import ResolveModal from './ResolveModal';
@@ -46,9 +46,6 @@ vi.mock('api', () => ({
         }
     }
 }));
-vi.mock('commons/components/app/hooks/useAppUser', () => ({
-    useAppUser: () => ({ user: { username: 'test-user' } })
-}));
 // ---------------------------------------------------------------------------
 // Fixtures
 // ---------------------------------------------------------------------------
@@ -64,7 +61,10 @@ 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 }))
+    items: hitIds.map(id => ({
+        type: 'hit',
+        value: id
+    }))
 });
 // ---------------------------------------------------------------------------
 // Wrapper factory

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

@@ -24,9 +24,8 @@ export const useFolderOptions = (selectedCase) => {
 // Hook
 // ---------------------------------------------------------------------------
 export const useRecordEntries = (records) => {
-    const [entries, setEntries] = useState(() => (records ?? []).map(record => ({
+    const [entries, setEntries] = useState(() => (records ?? []).map((record) => ({
         record,
-        parent: null,
         name: defaultTitle(record)
     })));
     const updateEntry = useCallback((index, field, value) => {

package/components/routes/cases/modals/types.d.ts

@@ -8,6 +8,6 @@ export interface FolderOption {
 
 export interface RecordEntry {
   record: Hit | Event;
-  parent: string | null;
+  parent?: string;
   name: string;
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 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';

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
@@ -11,9 +12,13 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 // ---------------------------------------------------------------------------
 // Hoisted mocks
 // ---------------------------------------------------------------------------
-vi.mock('commons/components/app/hooks/useAppUser', () => ({
-    useAppUser: () => ({ user: { username: 'alice', name: 'Alice Smith' } })
-}));
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        useAppUser: () => ({ user: { username: 'alice', name: 'Alice Smith' } })
+    };
+});
 // Stub HowlerAvatar to avoid avatar API calls
 vi.mock('components/elements/display/HowlerAvatar', () => ({
     default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
+// @ts-nocheck
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import i18n from '@cccsaurora/howler-ui/i18n';

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

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

package/components/routes/cases/utils.js

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

package/components/routes/dossiers/DossierCard.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Delete, Language, ManageSearch, Person } from '@mui/icons-material';
 import { Box, Card, Chip, Divider, Grid, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import Members from '@cccsaurora/howler-ui/components/elements/membership/Members';
 import { isEmpty } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const DossierCard = ({ dossier, className, onDelete }) => {
     const { t, i18n } = useTranslation();
-    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { '& > *': { flexShrink: 0 } }, children: [_jsxs(Stack, { sx: { flex: 1 }, children: [_jsxs(Typography, { variant: "body1", display: "flex", alignItems: "start", children: [_jsx(Tooltip, { title: t(`route.dossiers.manager.${dossier.type}`), children: dossier.type === 'personal' ? _jsx(Person, { fontSize: "small" }) : _jsx(Language, { fontSize: "small" }) }), _jsx(Box, { component: "span", ml: 1, children: dossier.title })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: dossier.query }) }), _jsxs(Grid, { container: true, spacing: 1, sx: { mt: 1 }, children: [dossier.leads?.map((lead, index) => (_jsx(Grid, { item: true, children: _jsx(Chip, { sx: { maxWidth: '300px' }, clickable: true, label: `${lead.label?.[i18n.language] ?? t('unknown')} (${lead.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=leads&lead=${index}`, onClick: e => e.stopPropagation() }) }, lead.format + lead.label?.en))), !isEmpty(dossier.leads) && !isEmpty(dossier.pivots) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), dossier.pivots?.map((pivot, index) => (_jsx(Grid, { item: true, children: _jsx(Chip, { sx: { maxWidth: '300px' }, clickable: true, label: `${pivot.label?.[i18n.language] ?? t('unknown')} (${pivot.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=pivots&pivot=${index}`, onClick: e => e.stopPropagation() }) }, pivot.format + pivot.label?.en)))] })] }), _jsx(HowlerAvatar, { sx: { height: '28px', width: '28px' }, userId: dossier.owner }), _jsx(Tooltip, { title: t('route.dossiers.manager.openinsearch'), children: _jsx(IconButton, { component: Link, to: `/search?query=${dossier.query}`, onClick: e => e.stopPropagation(), children: _jsx(ManageSearch, {}) }) }), onDelete && (_jsx(Tooltip, { title: t('route.dossiers.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, dossier.dossier_id), children: _jsx(Delete, {}) }) }))] }) }, dossier.dossier_id));
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { '& > *': { flexShrink: 0 } }, children: [_jsxs(Stack, { sx: { flex: 1 }, children: [_jsxs(Typography, { variant: "body1", display: "flex", alignItems: "start", children: [_jsx(Box, { component: "span", mr: 1, children: dossier.title }), _jsx(Tooltip, { title: t(`route.dossiers.manager.${dossier.type}`), children: dossier.type === 'personal' ? _jsx(Person, { fontSize: "small" }) : _jsx(Language, { fontSize: "small" }) })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: dossier.query }) }), _jsxs(Grid, { container: true, spacing: 1, sx: { mt: 1 }, children: [dossier.leads?.map((lead, index) => (_jsx(Grid, { children: _jsx(Chip, { sx: { maxWidth: '300px' }, clickable: true, label: `${lead.label?.[i18n.language] ?? t('unknown')} (${lead.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=leads&lead=${index}`, onClick: e => e.stopPropagation() }) }, lead.format + (lead.label?.en ?? '')))), !isEmpty(dossier.leads) && !isEmpty(dossier.pivots) && (_jsx(Grid, { children: _jsx(Divider, { orientation: "vertical" }) })), dossier.pivots?.map((pivot, index) => (_jsx(Grid, { children: _jsx(Chip, { sx: { maxWidth: '300px' }, clickable: true, label: `${pivot.label?.[i18n.language] ?? t('unknown')} (${pivot.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=pivots&pivot=${index}`, onClick: (e) => e.stopPropagation() }) }, pivot.format + (pivot.label?.en ?? ''))))] })] }), _jsx(Members, { item: dossier }), _jsx(Tooltip, { title: t('route.dossiers.manager.openinsearch'), children: _jsx(IconButton, { component: Link, to: `/search?query=${dossier.query}`, onClick: (e) => e.stopPropagation(), children: _jsx(ManageSearch, {}) }) }), onDelete && (_jsx(Tooltip, { title: t('route.dossiers.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, dossier.dossier_id), children: _jsx(Delete, {}) }) }))] }) }, dossier.dossier_id));
 };
 export default DossierCard;

package/components/routes/dossiers/DossierCard.test.js

@@ -9,10 +9,10 @@ import { I18nextProvider } from 'react-i18next';
 import { createMockDossier } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import DossierCard from './DossierCard';
-// Mock react-router-dom
+// Mock react-router
 const mockNavigate = vi.hoisted(() => vi.fn());
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         useNavigate: () => mockNavigate,
@@ -107,7 +107,7 @@ describe('DossierCard', () => {
             const dossier = createMockDossier({ owner: 'john.doe' });
             render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
             await waitFor(() => {
-                expect(screen.getByLabelText('john.doe')).toBeInTheDocument();
+                expect(screen.getByLabelText('Owner - john.doe')).toBeInTheDocument();
             });
         });
         it('should display delete button when onDelete is provided', async () => {
@@ -457,7 +457,7 @@ describe('DossierCard', () => {
                 expect(screen.getByText('Complete Dossier')).toBeInTheDocument();
                 expect(screen.getByText('howler.status:open AND howler.assigned:me')).toBeInTheDocument();
                 expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
-                expect(screen.getByLabelText('admin')).toBeInTheDocument();
+                expect(screen.getByLabelText('Owner - admin')).toBeInTheDocument();
                 expect(screen.getByRole('button')).toBeInTheDocument();
                 expect(screen.getByText(/Lead 1/)).toBeInTheDocument();
                 expect(screen.getByText(/Pivot 1/)).toBeInTheDocument();
@@ -486,7 +486,7 @@ describe('DossierCard', () => {
             for (const owner of owners) {
                 rerender(_jsx(DossierCard, { dossier: createMockDossier({ owner }) }));
                 await waitFor(() => {
-                    expect(screen.getByLabelText(owner)).toBeInTheDocument();
+                    expect(screen.getByLabelText(`Owner - ${owner}`)).toBeInTheDocument();
                 });
             }
         });