@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/elements/search/FuzzySearchBar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from '@mui/icons-material';
+import { CircularProgress, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import IndexPicker from '@cccsaurora/howler-ui/components/routes/hits/search/shared/IndexPicker';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FuzzySearchBar = ({ onSearch, loading = false }) => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const defaultQuery = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [query, _setQuery] = useState(defaultQuery ?? '');
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const handleQueryChange = useCallback((e) => {
+        _setQuery(e.target.value);
+    }, [_setQuery]);
+    const handleSearch = useCallback(() => {
+        if (query.trim()) {
+            setQuery(query.trim());
+            onSearch(query.trim(), indexes);
+        }
+    }, [query, setQuery, onSearch, indexes]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }, [handleSearch]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { id: "fuzzy-search-input", size: "small", fullWidth: true, variant: "outlined", placeholder: t('search.fuzzy.placeholder'), value: query, onChange: handleQueryChange, onKeyDown: handleKeyDown, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: loading ? (_jsx(CircularProgress, { size: 24 })) : (_jsx(IconButton, { id: "fuzzy-search-button", onClick: handleSearch, edge: "end", disabled: !query.trim(), children: _jsx(Search, {}) })) }))
+                } }), _jsx(Stack, { direction: "row", children: _jsx(IndexPicker, { additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }] }) })] }));
+};
+export default FuzzySearchBar;

package/components/elements/search/FuzzySearchBar.test.d.ts

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

package/components/elements/search/FuzzySearchBar.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockIndexPickerProps = vi.hoisted(() => ({
+    last: null
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/routes/hits/search/shared/IndexPicker', () => ({
+    default: (props) => {
+        mockIndexPickerProps.last = props;
+        return _jsx("div", { id: "index-picker" });
+    }
+}));
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import FuzzySearchBar from './FuzzySearchBar';
+const mockOnSearch = vi.fn();
+const mockSetQuery = vi.fn();
+const parameterContextValue = {
+    indexes: ['hit', 'case'],
+    query: '',
+    setQuery: mockSetQuery
+};
+const Wrapper = ({ children }) => {
+    return _jsx(ParameterContext.Provider, { value: parameterContextValue, children: children });
+};
+describe('FuzzySearchBar', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        parameterContextValue.indexes = ['hit', 'case'];
+        parameterContextValue.query = '';
+        mockIndexPickerProps.last = null;
+    });
+    it('renders search input and index picker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-input')).toBeInTheDocument();
+        expect(screen.getByTestId('index-picker')).toBeInTheDocument();
+    });
+    it('disables search button when query is empty', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+    });
+    it('calls setQuery and onSearch with trimmed query and selected indexes on click', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '  malware triage  ');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        expect(mockSetQuery).toHaveBeenCalledWith('malware triage');
+        expect(mockOnSearch).toHaveBeenCalledWith('malware triage', ['hit', 'case']);
+    });
+    it('triggers search on Enter key', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), 'suspicious ip{enter}');
+        expect(mockSetQuery).toHaveBeenCalledWith('suspicious ip');
+        expect(mockOnSearch).toHaveBeenCalledWith('suspicious ip', ['hit', 'case']);
+    });
+    it('does not call search for whitespace-only input', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '   ');
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        expect(mockOnSearch).not.toHaveBeenCalled();
+    });
+    it('shows loading spinner and hides search button when loading', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch, loading: true }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        expect(screen.queryByTestId('fuzzy-search-button')).not.toBeInTheDocument();
+    });
+    it('passes expected options to IndexPicker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(mockIndexPickerProps.last).toEqual({
+            additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }]
+        });
+    });
+    it('initializes input with default query from context', () => {
+        parameterContextValue.query = 'existing search';
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByRole('textbox')).toHaveValue('existing search');
+    });
+});

package/components/elements/view/LayoutToggle.d.ts

@@ -0,0 +1,8 @@
+export type HowlerViewLayoutType = 'list' | 'grid' | null;
+declare const LayoutToggle: ({ displayType, setDisplayType, size, allowNullValue }: {
+    displayType: HowlerViewLayoutType;
+    setDisplayType: (type: HowlerViewLayoutType) => void;
+    size?: 'small' | 'medium' | 'large';
+    allowNullValue?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LayoutToggle;

package/components/elements/view/LayoutToggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List, TableChart } from '@mui/icons-material';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+const LayoutToggle = ({ displayType, setDisplayType, size, allowNullValue = false }) => {
+    return (_jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => {
+            if (!value && !allowNullValue) {
+                return;
+            }
+            setDisplayType(value);
+        }, size: size ?? 'small', children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, { fontSize: size ?? 'medium' }) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, { fontSize: size ?? 'medium' }) })] }));
+};
+export default LayoutToggle;

package/components/elements/view/ViewTitle.d.ts

@@ -3,8 +3,12 @@ interface ViewTitleProps {
     title?: string;
     type?: string;
     query?: string;
+    indexes?: string[];
     sort?: string;
     span?: string;
+    settings?: {
+        display?: string;
+    };
 }
 export declare const ViewTitle: FC<ViewTitleProps>;
 export {};

package/components/elements/view/ViewTitle.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownward, ArrowUpward, Language, Lock, Person } from '@mui/icons-material';
+import { ArrowDownward, ArrowUpward, Language, List, Lock, Person, TableChart } from '@mui/icons-material';
 import { Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-export const ViewTitle = ({ title, type, query, sort, span }) => {
+export const ViewTitle = ({ title, type, query, sort, span, indexes, settings }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -17,9 +17,19 @@ export const ViewTitle = ({ title, type, query, sort, span }) => {
             return t(span);
         }
     }, [span, t]);
+    const indexLabel = useMemo(() => {
+        if (!indexes || indexes.length === 0) {
+            return '';
+        }
+        else
+            return `(${indexes.join(', ')})`;
+    }, [indexes]);
     return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
+                        }[type] }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
+                            list: _jsx(List, { fontSize: "small" }),
+                            grid: _jsx(TableChart, { fontSize: "small" })
+                        }[settings.display] })), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span || indexLabel) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel }), indexLabel && _jsx(Chip, { label: indexLabel })] }))] }));
 };

package/components/hooks/useHitActions.d.ts

@@ -7,7 +7,7 @@ declare const useHitActions: (_hits: Hit | Hit[]) => {
     canAssess: boolean;
     loading: boolean;
     manage: (transition: string) => Promise<void>;
-    assess: (assessment: string, skipRationale?: boolean) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean, providedRationale?: any) => Promise<void>;
     vote: (v: string) => Promise<void>;
     selectedVote: string;
 };

package/components/hooks/useHitActions.js

@@ -4,8 +4,8 @@ import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const useHitActions = (_hits) => {
     const { showModal } = useContext(ModalContext);
     const { showWarningMessage } = useMySnackbar();
     const { dispatchApi } = useMyApi();
-    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
     const [loading, setLoading] = useState(false);
     const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
     const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false) => {
+    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
         const rationale = skipRationale
-            ? t('rationale.default', { assessment })
+            ? (providedRationale ?? t('rationale.default', { assessment }))
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);
@@ -173,7 +173,7 @@ const useHitActions = (_hits) => {
         ...option,
         actionFunction: () => {
             if (!loading) {
-                manage(option.name.toLowerCase());
+                void manage(option.name.toLowerCase());
             }
         }
     })), [config.config.lookups?.transitions, hits, loading, manage, user.username]);

package/components/hooks/useLocalStorage.js

@@ -9,7 +9,7 @@ const useLocalStorage = (prefix) => {
         try {
             return JSON.parse(localStorage.getItem(_buildKey(key)));
         }
-        catch (e) {
+        catch {
             return null;
         }
     }, [_buildKey]);

package/components/hooks/useLocalStorageItem.test.js

@@ -51,7 +51,7 @@ describe('useLocalStorageItem', () => {
         it('skips persisting to storage when save=false', () => {
             const { result } = renderHook(() => useLocalStorageItem('testkey', 0));
             vi.mocked(mockLocalStorage.setItem).mockClear();
-            act(() => result.current[1](10, false));
+            void act(() => result.current[1](10, false));
             expect(result.current[0]).toBe(10);
             expect(mockLocalStorage.setItem).not.toHaveBeenCalled();
         });
@@ -95,7 +95,7 @@ describe('useLocalStorageItem', () => {
         it('propagates save=false updates to other subscribers', () => {
             const { result: a } = renderHook(() => useLocalStorageItem('testkey', 0));
             const { result: b } = renderHook(() => useLocalStorageItem('testkey', 0));
-            act(() => a.current[1](10, false));
+            void act(() => a.current[1](10, false));
             expect(b.current[0]).toBe(10);
         });
         it('stops receiving updates after unmount', () => {

package/components/hooks/useMyApi.d.ts

@@ -1,4 +1,4 @@
-type DispatchApiConfig = {
+export type DispatchApiConfig = {
     throwError?: boolean;
     logError?: boolean;
     showError?: boolean;

package/components/hooks/useMyChart.d.ts

@@ -5,7 +5,7 @@ declare const useMyChart: () => {
         plugins: {
             legend: {
                 display: boolean;
-                position: "top";
+                position: 'top';
                 labels: {
                     color: string;
                 };
@@ -36,16 +36,16 @@ declare const useMyChart: () => {
                 zoom: {
                     wheel: {
                         enabled: boolean;
-                        modifierKey: "ctrl";
+                        modifierKey: 'ctrl';
                     };
                     pinch: {
                         enabled: boolean;
                     };
-                    mode: "y";
+                    mode: 'y';
                 };
                 pan: {
                     enabled: boolean;
-                    mode: "x" | "y" | "xy";
+                    mode: 'x' | 'y' | 'xy';
                 };
                 limits: {
                     y: {
@@ -56,9 +56,9 @@ declare const useMyChart: () => {
         };
         scales: {
             x: {
-                type: "time";
+                type: 'time';
                 time: {
-                    unit: "day";
+                    unit: 'day';
                 };
                 ticks: {
                     color: string;
@@ -73,12 +73,11 @@ declare const useMyChart: () => {
         };
     };
     doughnut: (titleKey: string, subtitleKey?: string) => {
-        scales: any;
         responsive: boolean;
         plugins: {
             legend: {
                 display: boolean;
-                position: "top";
+                position: 'top';
                 labels: {
                     color: string;
                 };
@@ -109,16 +108,16 @@ declare const useMyChart: () => {
                 zoom: {
                     wheel: {
                         enabled: boolean;
-                        modifierKey: "ctrl";
+                        modifierKey: 'ctrl';
                     };
                     pinch: {
                         enabled: boolean;
                     };
-                    mode: "y";
+                    mode: 'y';
                 };
                 pan: {
                     enabled: boolean;
-                    mode: "x" | "y" | "xy";
+                    mode: 'x' | 'y' | 'xy';
                 };
                 limits: {
                     y: {
@@ -127,13 +126,14 @@ declare const useMyChart: () => {
                 };
             };
         };
+        scales: any;
     };
     bar: (titleKey: string, subtitleKey?: string) => {
         responsive: boolean;
         plugins: {
             legend: {
                 display: boolean;
-                position: "top";
+                position: 'top';
                 labels: {
                     color: string;
                 };
@@ -164,16 +164,16 @@ declare const useMyChart: () => {
                 zoom: {
                     wheel: {
                         enabled: boolean;
-                        modifierKey: "ctrl";
+                        modifierKey: 'ctrl';
                     };
                     pinch: {
                         enabled: boolean;
                     };
-                    mode: "y";
+                    mode: 'y';
                 };
                 pan: {
                     enabled: boolean;
-                    mode: "x" | "y" | "xy";
+                    mode: 'x' | 'y' | 'xy';
                 };
                 limits: {
                     y: {
@@ -184,9 +184,9 @@ declare const useMyChart: () => {
         };
         scales: {
             x: {
-                type: "time";
+                type: 'time';
                 time: {
-                    unit: "day";
+                    unit: 'day';
                 };
                 ticks: {
                     color: string;
@@ -205,7 +205,7 @@ declare const useMyChart: () => {
         plugins: {
             legend: {
                 display: boolean;
-                position: "top";
+                position: 'top';
                 labels: {
                     color: string;
                 };
@@ -236,16 +236,16 @@ declare const useMyChart: () => {
                 zoom: {
                     wheel: {
                         enabled: boolean;
-                        modifierKey: "ctrl";
+                        modifierKey: 'ctrl';
                     };
                     pinch: {
                         enabled: boolean;
                     };
-                    mode: "y";
+                    mode: 'y';
                 };
                 pan: {
                     enabled: boolean;
-                    mode: "x" | "y" | "xy";
+                    mode: 'x' | 'y' | 'xy';
                 };
                 limits: {
                     y: {
@@ -256,9 +256,9 @@ declare const useMyChart: () => {
         };
         scales: {
             x: {
-                type: "time";
+                type: 'time';
                 time: {
-                    unit: "day";
+                    unit: 'day';
                 };
                 ticks: {
                     color: string;

package/components/hooks/useMyPreferences.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Api, Article, Book, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
 import { Stack } from '@mui/material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
@@ -24,6 +24,15 @@ const useMyPreferences = () => {
                     icon: _jsx(Dashboard, {})
                 }
             },
+            {
+                type: 'item',
+                element: {
+                    id: 'cases',
+                    i18nKey: 'route.cases',
+                    route: '/cases',
+                    icon: _jsx(BookRounded, {})
+                }
+            },
             {
                 type: 'group',
                 element: {

package/components/hooks/useMySearch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
+import HitPreview from '@cccsaurora/howler-ui/components/elements/hit/HitPreview';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
@@ -40,7 +40,7 @@ const useMySearch = () => {
         },
         headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
         itemRenderer: (item, options) => {
-            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitQuickSearch, { hit: item.item, options: options }) }));
+            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitPreview, { hit: item.item, options: options }) }));
         }
     }), [navigate, pageCount, t]);
 };

package/components/hooks/useMySitemap.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
+import { Article, Book, BookRounded, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +24,8 @@ const useMySitemap = () => {
     return useMemo(() => ({
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
+            { path: '/cases/:id/*', title: t('route.cases.view'), isLeaf: true, breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {
                 path: '/admin/users/:id',

package/components/hooks/useMySnackbar.js

@@ -20,7 +20,7 @@ const useMySnackbar = () => {
         ...snackBarOptions,
         ...options,
         SnackbarProps: {
-            ...(options.SnackbarProps ?? {}),
+            ...options.SnackbarProps,
             onClick: options.SnackbarProps?.onClick
                 ? e => {
                     options.SnackbarProps?.onClick(e);

package/components/hooks/useMyTheme.js

@@ -1,9 +1,16 @@
 const DEFAULT_THEME = {
+    components: {
+        MuiChip: {
+            defaultProps: {
+                size: 'small'
+            }
+        }
+    },
     palette: {
         dark: {
             background: {
-                default: '#202020',
-                paper: '#202020'
+                default: '#181818',
+                paper: '#181818'
             },
             primary: {
                 main: '#7DA1DB'

package/components/hooks/useMyTheme.test.d.ts

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

package/components/hooks/useMyTheme.test.js

@@ -0,0 +1,35 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import useMyTheme from './useMyTheme';
+describe('useMyTheme', () => {
+    it('returns a theme configuration object', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current).toBeDefined();
+        expect(typeof result.current).toBe('object');
+    });
+    it('contains a dark palette entry', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette?.dark).toBeDefined();
+    });
+    it('contains a light palette entry', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette?.light).toBeDefined();
+    });
+    it('returns the same reference on re-render (stable return value)', () => {
+        const { result, rerender } = renderHook(() => useMyTheme());
+        const first = result.current;
+        rerender();
+        expect(result.current).toBe(first);
+    });
+    it('dark palette includes primary and secondary colours', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette.dark.primary).toHaveProperty('main');
+        expect(result.current.palette.dark.secondary).toHaveProperty('main');
+    });
+    it('light palette includes primary and secondary colours', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.palette.light.primary).toHaveProperty('main');
+        expect(result.current.palette.light.secondary).toHaveProperty('main');
+    });
+});