@cccsaurora/howler-ui 2.19.0-dev.950 → 2.19.0-dev.959

package/components/app/providers/ModalProvider.d.ts

@@ -6,6 +6,7 @@ export interface ModalOptions {
 }
 interface ModalContextType {
     showModal: (children: ReactNode, options?: ModalOptions) => () => void;
+    withConfirmDeleteModal: (onConfirm: () => void, preferDelete?: boolean, preferCancel?: boolean) => () => void;
     content?: ReactNode;
     setContent: (children: ReactNode) => void;
     options?: ModalOptions;

package/components/app/providers/ModalProvider.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import { createContext, useCallback, useEffect, useState } from 'react';
 const defaultOptions = {
     disableClose: false
@@ -23,6 +24,9 @@ const ModalProvider = ({ children }) => {
         return () => setContent(null);
     }, [options]);
     const close = useCallback(() => setContent(null), []);
-    return (_jsx(ModalContext.Provider, { value: { showModal, content, setContent, options, close }, children: children }));
+    const withConfirmDeleteModal = useCallback((onConfirm, preferDelete, preferCancel) => {
+        return showModal(_jsx(ConfirmDeleteModal, { onConfirm: onConfirm, preferDelete: preferDelete, preferCancel: preferCancel }));
+    }, [showModal]);
+    return (_jsx(ModalContext.Provider, { value: { showModal, withConfirmDeleteModal, content, setContent, options, close }, children: children }));
 };
 export default ModalProvider;

package/components/routes/action/view/ActionDetails.js

@@ -4,13 +4,14 @@ import { Button, Checkbox, FormControlLabel, FormGroup, IconButton, LinearProgre
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import OperationEntry from '@cccsaurora/howler-ui/components/routes/action/shared/OperationEntry';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { Link, useParams } from 'react-router-dom';
@@ -26,6 +27,7 @@ const ActionDetails = () => {
     const { response, onSearch, loading, setLoading, executeAction, deleteAction, progress, report } = useMyActionFunctions();
     const [operations, setOperations] = useState([]);
     const [action, setAction] = useState();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const onTriggerChange = useCallback(async (e) => {
         let newTriggers = action.triggers ?? [];
         if (e.target.checked && !newTriggers.includes(e.target.name)) {
@@ -63,7 +65,7 @@ const ActionDetails = () => {
         user.roles.includes('admin') ||
         user.roles.includes('actionrunner_basic') ||
         user.roles.includes('actionrunner_advanced');
-    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "h5", children: action?.name }), action?.owner_id && _jsx(HowlerAvatar, { sx: { width: 32, height: 32 }, userId: action.owner_id })] }), _jsx(Phrase, { fullWidth: true, value: action?.query, disabled: true, size: "small", onChange: () => { }, startAdornment: _jsx(IconButton, { onClick: () => onSearch(action?.query), children: _jsx(Search, { fontSize: "small" }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [response && _jsx(QueryResultText, { count: response.total, query: action?.query }), _jsx(FlexOne, {}), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: () => deleteAction(action?.action_id), children: t('button.delete') })), execRoles && (_jsx(Button, { startIcon: _jsx(PlayCircleOutline, {}), size: "small", variant: "outlined", color: "success", onClick: () => executeAction(action?.action_id), children: t('route.actions.execute') })), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Edit, {}), size: "small", variant: "outlined", component: Link, to: `/action/${params.id}/edit`, children: t('route.actions.edit') }))] }), user.roles.includes('automation_advanced') && (_jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, children: action?.operations
+    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "h5", children: action?.name }), action?.owner_id && _jsx(HowlerAvatar, { sx: { width: 32, height: 32 }, userId: action.owner_id })] }), _jsx(Phrase, { fullWidth: true, value: action?.query, disabled: true, size: "small", onChange: () => { }, startAdornment: _jsx(IconButton, { onClick: () => onSearch(action?.query), children: _jsx(Search, { fontSize: "small" }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [response && _jsx(QueryResultText, { count: response.total, query: action?.query }), _jsx(FlexOne, {}), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: () => withConfirmDeleteModal(() => deleteAction(action?.action_id)), children: t('button.delete') })), execRoles && (_jsx(Button, { startIcon: _jsx(PlayCircleOutline, {}), size: "small", variant: "outlined", color: "success", onClick: () => executeAction(action?.action_id), children: t('route.actions.execute') })), ((action?.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Edit, {}), size: "small", variant: "outlined", component: Link, to: `/action/${params.id}/edit`, children: t('route.actions.edit') }))] }), user.roles.includes('automation_advanced') && (_jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, children: action?.operations
                             ?.map(a => (operations ?? []).find(_action => _action.id === a.operation_id)?.triggers ?? [])
                             .reduce((acc, triggers) => acc.filter(_t => triggers.includes(_t)))
                             .map(trigger => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { name: trigger, onChange: onTriggerChange, checked: action?.triggers?.includes(trigger) ?? false }), label: t(`route.actions.trigger.${trigger}`) }, trigger))) }) })), loading &&

package/components/routes/action/view/ActionSearch.js

@@ -3,6 +3,7 @@ import { Delete, Engineering, Terminal } from '@mui/icons-material';
 import { Autocomplete, Card, CardContent, CardHeader, Chip, Grid, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
@@ -22,6 +23,7 @@ const ActionSearch = () => {
     const { user } = useAppUser();
     const { dispatchApi } = useMyApi();
     const { load } = useContext(TuiListMethodContext);
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [searchParams, setSearchParams] = useSearchParams();
     const { deleteAction } = useMyActionFunctions();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
@@ -70,6 +72,14 @@ const ActionSearch = () => {
             setOffset(_offset);
         }
     }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback((e, actionId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        withConfirmDeleteModal(async () => {
+            await deleteAction(actionId);
+            onSearch();
+        });
+    }, [deleteAction, onSearch, withConfirmDeleteModal]);
     // Effect to initialize list of users.
     useEffect(() => {
         onSearch();
@@ -105,13 +115,8 @@ const ActionSearch = () => {
                 transitionProperty: 'border-color',
                 cursor: 'pointer',
                 mt: 1
-            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h5", children: item.item.name }), item.item.triggers.length > 0 && (_jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "route.actions.trigger.description", values: { triggers: item.item.triggers.join(', ') }, components: { bold: _jsx("strong", {}) } }), children: _jsx(Engineering, {}) })), _jsx(FlexOne, {}), ((item.item.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(IconButton, { size: "small", onClick: async (e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    await deleteAction(item.item.action_id);
-                                    onSearch();
-                                }, children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
-    }, [deleteAction, editRoles, navigate, onSearch, t, user.roles, user.username]);
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h5", children: item.item.name }), item.item.triggers.length > 0 && (_jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "route.actions.trigger.description", values: { triggers: item.item.triggers.join(', ') }, components: { bold: _jsx("strong", {}) } }), children: _jsx(Engineering, {}) })), _jsx(FlexOne, {}), ((item.item.owner_id === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(IconButton, { size: "small", onClick: e => onDelete(e, item.item.action_id), children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
+    }, [editRoles, navigate, onDelete, t, user.roles, user.username]);
     return (_jsx(ItemManager, { onSearch: onSearch, onCreate: editRoles ? () => navigate('/action/execute') : undefined, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.actions.search.prompt') }), searchFilters: _jsx(Autocomplete, { multiple: true, size: "small", value: searchModifiers, onChange: (__, values) => setSearchModifiers(values), getOptionLabel: trigger => t(`route.actions.trigger.${trigger}`), options: VALID_ACTION_TRIGGERS, renderInput: params => (_jsx(TextField, { ...params, sx: { maxWidth: '500px' }, label: t('route.actions.trigger') })) }), renderer: renderer, response: response, createPrompt: "route.actions.create", searchPrompt: "route.actions.search", createIcon: _jsx(Terminal, { sx: { mr: 1 } }) }));
 };
 const ActionSearchProvider = () => {

package/components/routes/analytics/AnalyticDetails.js

@@ -5,6 +5,7 @@ import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
 import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
@@ -31,6 +32,7 @@ const AnalyticDetails = () => {
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
     const { showSuccessMessage } = useMySnackbar();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const { users, searchUsers } = useContext(UserListContext);
     const { config } = useContext(ApiConfigContext);
     const [analytic, setAnalytic] = useState(null);
@@ -58,11 +60,13 @@ const AnalyticDetails = () => {
         });
         setAnalytic(result);
     }, [analytic?.analytic_id, dispatchApi]);
-    const onDelete = useCallback(async () => {
-        await dispatchApi(api.analytic.del(analytic?.analytic_id));
-        showSuccessMessage(t('route.analytics.deleted'));
-        navigate('/analytics');
-    }, [analytic?.analytic_id, dispatchApi, navigate, showSuccessMessage, t]);
+    const onDelete = useCallback(() => {
+        withConfirmDeleteModal(async () => {
+            await dispatchApi(api.analytic.del(analytic?.analytic_id));
+            showSuccessMessage(t('route.analytics.deleted'));
+            navigate('/analytics');
+        });
+    }, [analytic?.analytic_id, dispatchApi, navigate, withConfirmDeleteModal, showSuccessMessage, t]);
     const onEdit = useCallback(async () => {
         if (editingInterval) {
             setIntervalLoading(true);

package/components/routes/dossiers/Dossiers.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Topic } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -18,6 +19,7 @@ const DossiersBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const { showSuccessMessage } = useMySnackbar();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
@@ -73,19 +75,21 @@ const DossiersBase = () => {
             setOffset(_offset);
         }
     }, [offset, searchParams, setSearchParams]);
-    const onDelete = useCallback(async (e, id) => {
+    const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
-        try {
-            await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
-            await onSearch();
-            showSuccessMessage(t('route.dossiers.manager.delete.success'));
-        }
-        catch (_err) {
-            // eslint-disable-next-line no-console
-            console.warn(_err);
-        }
-    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+        withConfirmDeleteModal(async () => {
+            try {
+                await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
+                await onSearch();
+                showSuccessMessage(t('route.dossiers.manager.delete.success'));
+            }
+            catch (_err) {
+                // eslint-disable-next-line no-console
+                console.warn(_err);
+            }
+        });
+    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {

package/components/routes/overviews/OverviewViewer.js

@@ -8,6 +8,7 @@ import { Check, DarkMode, Delete, SsidChart, WbSunny } from '@mui/icons-material
 import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
 import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -25,6 +26,7 @@ const OverviewViewer = () => {
     const [params, setParams] = useSearchParams();
     const { getOverviews } = useContext(OverviewContext);
     const { dispatchApi } = useMyApi();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
@@ -124,15 +126,17 @@ const OverviewViewer = () => {
             replace: true
         });
     }, [analytic, detection, params, setParams]);
-    const onDelete = useCallback(async () => {
-        await dispatchApi(api.overview.del(selectedOverview.overview_id), {
-            logError: false,
-            showError: true,
-            throwError: false
+    const onDelete = useCallback(() => {
+        withConfirmDeleteModal(async () => {
+            await dispatchApi(api.overview.del(selectedOverview.overview_id), {
+                logError: false,
+                showError: true,
+                throwError: false
+            });
+            setSelectedOverview(null);
+            setContent('');
         });
-        setSelectedOverview(null);
-        setContent('');
-    }, [dispatchApi, selectedOverview?.overview_id]);
+    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {
             try {

package/components/routes/overviews/Overviews.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -18,6 +19,7 @@ const OverviewsBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const { showSuccessMessage } = useMySnackbar();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
@@ -73,19 +75,21 @@ const OverviewsBase = () => {
             setOffset(_offset);
         }
     }, [offset, searchParams, setSearchParams]);
-    const onDelete = useCallback(async (e, id) => {
+    const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
-        try {
-            await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
-            await onSearch();
-            showSuccessMessage(t('route.overviews.manager.delete.success'));
-        }
-        catch (_err) {
-            // eslint-disable-next-line no-console
-            console.warn(_err);
-        }
-    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+        withConfirmDeleteModal(async () => {
+            try {
+                await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
+                await onSearch();
+                showSuccessMessage(t('route.overviews.manager.delete.success'));
+            }
+            catch (_err) {
+                // eslint-disable-next-line no-console
+                console.warn(_err);
+            }
+        });
+    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {

package/components/routes/templates/TemplateViewer.js

@@ -3,10 +3,11 @@ import { Autocomplete, Button, CircularProgress, Divider, FormControl, LinearPro
 import api from '@cccsaurora/howler-ui/api';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import TemplateEditor from '@cccsaurora/howler-ui/components/routes/templates/TemplateEditor';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Delete, SsidChart } from '@mui/icons-material';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import isEqual from 'lodash-es/isEqual';
@@ -17,6 +18,7 @@ const TemplateViewer = () => {
     const { t } = useTranslation();
     const [params, setParams] = useSearchParams();
     const { dispatchApi } = useMyApi();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [templateList, setTemplateList] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
     const [sessionTemplateList, setSessionTemplateList] = useState([]);
@@ -115,24 +117,27 @@ const TemplateViewer = () => {
         }
         return { ..._hit };
     }, [analytic]);
-    const onDelete = useCallback(async () => {
-        await dispatchApi(api.template.del(selectedTemplate.template_id), {
-            logError: false,
-            showError: true,
-            throwError: false
+    const onDelete = useCallback(() => {
+        withConfirmDeleteModal(async () => {
+            await dispatchApi(api.template.del(selectedTemplate.template_id), {
+                logError: false,
+                showError: true,
+                throwError: false
+            });
+            setSessionTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
+                v.detection != selectedTemplate.detection ||
+                v.type != selectedTemplate.type));
+            setTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
+                v.detection != selectedTemplate.detection ||
+                v.type != selectedTemplate.type));
         });
-        setSessionTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
-            v.detection != selectedTemplate.detection ||
-            v.type != selectedTemplate.type));
-        setTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
-            v.detection != selectedTemplate.detection ||
-            v.type != selectedTemplate.type));
     }, [
         dispatchApi,
         selectedTemplate?.analytic,
         selectedTemplate?.detection,
         selectedTemplate?.template_id,
-        selectedTemplate?.type
+        selectedTemplate?.type,
+        withConfirmDeleteModal
     ]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {

package/components/routes/views/Views.js

@@ -4,6 +4,7 @@ import { Clear, Edit, SavedSearch, Star, StarBorder } from '@mui/icons-material'
 import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
@@ -27,6 +28,7 @@ const ViewsBase = () => {
     const { user } = useAppUser();
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
@@ -105,12 +107,14 @@ const ViewsBase = () => {
             setOffset(_offset);
         }
     }, [offset, searchParams, setSearchParams]);
-    const onDelete = useCallback(async (event, id) => {
+    const onDelete = useCallback((event, id) => {
         event.preventDefault();
         event.stopPropagation();
-        await removeView(id);
-        onSearch();
-    }, [onSearch, removeView]);
+        withConfirmDeleteModal(async () => {
+            await removeView(id);
+            onSearch();
+        });
+    }, [onSearch, removeView, withConfirmDeleteModal]);
     const onFavourite = useCallback(async (event, id) => {
         event.preventDefault();
         if (user.favourite_views?.includes(id)) {

package/package.json

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

package/rest/FetchClient.test.d.ts

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

package/rest/FetchClient.test.js

@@ -0,0 +1,81 @@
+/// <reference types="vitest" />
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import FetchClient from './FetchClient';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const mockFetch = (status, body, headers = {}) => {
+    const response = {
+        status,
+        headers,
+        json: vi.fn().mockResolvedValue(body)
+    };
+    return vi.spyOn(globalThis, 'fetch').mockResolvedValue(response);
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('FetchClient', () => {
+    let client;
+    beforeEach(() => {
+        client = new FetchClient();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('calls fetch with the provided URL and GET method by default', async () => {
+        const spy = mockFetch(200, { api_response: 'ok' });
+        await client.fetch('/api/v1/test');
+        expect(spy).toHaveBeenCalledWith('/api/v1/test', expect.objectContaining({ method: 'get', credentials: 'same-origin' }));
+    });
+    it('appends query params to the URL when provided', async () => {
+        const spy = mockFetch(200, {});
+        const params = new URLSearchParams({ q: 'hello world' });
+        await client.fetch('/api/v1/search', 'get', undefined, params);
+        expect(spy).toHaveBeenCalledWith(expect.stringContaining('q=hello+world'), expect.anything());
+    });
+    it('returns [json, status, headers] on a successful response', async () => {
+        const payload = { api_response: { items: [] } };
+        mockFetch(200, payload);
+        const result = await client.fetch('/api/v1/hit');
+        expect(result[0]).toEqual(payload);
+        expect(result[1]).toBe(200);
+    });
+    it('serialises the body as JSON when provided', async () => {
+        const spy = mockFetch(201, {});
+        await client.fetch('/api/v1/hit', 'post', { key: 'val' });
+        const callArgs = spy.mock.calls[0][1];
+        expect(callArgs.body).toBe(JSON.stringify({ key: 'val' }));
+    });
+    it('sends null body when no body is provided', async () => {
+        const spy = mockFetch(200, {});
+        await client.fetch('/api/v1/hit', 'get');
+        const callArgs = spy.mock.calls[0][1];
+        expect(callArgs.body).toBeNull();
+    });
+    it('forwards custom headers to fetch', async () => {
+        const spy = mockFetch(200, {});
+        await client.fetch('/api/v1/hit', 'get', undefined, undefined, { Authorization: '******' });
+        const callArgs = spy.mock.calls[0][1];
+        expect(callArgs.headers.Authorization).toBe('******');
+    });
+    it('returns null for a 204 No Content response', async () => {
+        mockFetch(204, null);
+        const result = await client.fetch('/api/v1/hit', 'delete');
+        expect(result).toBeNull();
+    });
+    it('works with a PUT method', async () => {
+        const spy = mockFetch(200, {});
+        await client.fetch('/api/v1/hit/123', 'put', { status: 'open' });
+        expect(spy).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({ method: 'put' }));
+    });
+    it('works with a DELETE method', async () => {
+        const spy = mockFetch(200, {});
+        await client.fetch('/api/v1/hit/123', 'delete');
+        expect(spy).toHaveBeenCalledWith(expect.any(String), expect.objectContaining({ method: 'delete' }));
+    });
+    it('propagates errors thrown by the underlying fetch', async () => {
+        vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('network error'));
+        await expect(client.fetch('/api/v1/hit')).rejects.toThrow('network error');
+    });
+});

package/utils/Throttler.test.d.ts

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

package/utils/Throttler.test.js

@@ -0,0 +1,135 @@
+/// <reference types="vitest" />
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import Throttler from './Throttler';
+describe('Throttler', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    // -------------------------------------------------------------------------
+    // throttle
+    // -------------------------------------------------------------------------
+    describe('throttle', () => {
+        it('calls fn immediately on the first invocation', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.throttle(fn);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+        it('suppresses subsequent calls within the throttle window', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.throttle(fn);
+            t.throttle(fn);
+            t.throttle(fn);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+        it('allows another call after the throttle interval expires', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.throttle(fn);
+            vi.advanceTimersByTime(150);
+            t.throttle(fn);
+            expect(fn).toHaveBeenCalledTimes(2);
+        });
+        it('does not fire a second call if the interval has not yet elapsed', () => {
+            const fn = vi.fn();
+            const t = new Throttler(200);
+            t.throttle(fn);
+            vi.advanceTimersByTime(100);
+            t.throttle(fn);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // debounce
+    // -------------------------------------------------------------------------
+    describe('debounce', () => {
+        it('does not call fn immediately', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.debounce(fn);
+            expect(fn).not.toHaveBeenCalled();
+        });
+        it('calls fn after the delay elapses', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.debounce(fn);
+            vi.advanceTimersByTime(100);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+        it('resets the delay when called again before it fires', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.debounce(fn);
+            vi.advanceTimersByTime(80);
+            t.debounce(fn);
+            vi.advanceTimersByTime(80);
+            expect(fn).not.toHaveBeenCalled();
+            vi.advanceTimersByTime(30);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+        it('calls fn only once after many rapid invocations', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            for (let i = 0; i < 10; i++) {
+                t.debounce(fn);
+            }
+            vi.advanceTimersByTime(200);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+        it('fires a second call correctly after the first has resolved', () => {
+            const fn = vi.fn();
+            const t = new Throttler(100);
+            t.debounce(fn);
+            vi.advanceTimersByTime(150);
+            t.debounce(fn);
+            vi.advanceTimersByTime(150);
+            expect(fn).toHaveBeenCalledTimes(2);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // delayAsync
+    // -------------------------------------------------------------------------
+    describe('delayAsync', () => {
+        it('does not invoke fn before the delay', async () => {
+            const fn = vi.fn().mockResolvedValue('x');
+            const t = new Throttler(100);
+            t.delayAsync(fn);
+            expect(fn).not.toHaveBeenCalled();
+        });
+        it('resolves with the return value of fn', async () => {
+            const fn = vi.fn().mockResolvedValue('result');
+            const t = new Throttler(100);
+            const promise = t.delayAsync(fn);
+            vi.advanceTimersByTime(100);
+            await expect(promise).resolves.toBe('result');
+        });
+        it('passes variadic arguments through to fn', async () => {
+            const fn = vi.fn().mockImplementation(async (a, b) => a + b);
+            const t = new Throttler(100);
+            const promise = t.delayAsync(fn, 3, 4);
+            vi.advanceTimersByTime(100);
+            await expect(promise).resolves.toBe(7);
+        });
+        it('rejects when fn throws', async () => {
+            const fn = vi.fn().mockRejectedValue(new Error('boom'));
+            const t = new Throttler(100);
+            const promise = t.delayAsync(fn);
+            vi.advanceTimersByTime(100);
+            await expect(promise).rejects.toThrow('boom');
+        });
+        it('cancels the previous pending call when invoked again', async () => {
+            const fn = vi.fn().mockResolvedValue(42);
+            const t = new Throttler(100);
+            t.delayAsync(fn);
+            vi.advanceTimersByTime(50);
+            const second = t.delayAsync(fn);
+            vi.advanceTimersByTime(100);
+            await expect(second).resolves.toBe(42);
+            expect(fn).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/utils/hitFunctions.test.d.ts

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

package/utils/hitFunctions.test.js

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import { getUserList } from './hitFunctions';
+const makeHit = (howlerOverrides = {}) => ({
+    howler: {
+        log: [],
+        comment: [],
+        ...howlerOverrides
+    }
+});
+describe('getUserList', () => {
+    it('returns an empty Set when the hit is null', () => {
+        expect(getUserList(null)).toEqual(new Set());
+    });
+    it('returns an empty Set when the hit is undefined', () => {
+        expect(getUserList(undefined)).toEqual(new Set());
+    });
+    it('returns an empty Set when both log and comment are empty', () => {
+        expect(getUserList(makeHit())).toEqual(new Set());
+    });
+    it('collects users from the log array', () => {
+        const hit = makeHit({ log: [{ user: 'alice' }, { user: 'bob' }] });
+        expect(getUserList(hit)).toEqual(new Set(['alice', 'bob']));
+    });
+    it('collects users from the comment array', () => {
+        const hit = makeHit({ comment: [{ user: 'carol' }] });
+        expect(getUserList(hit)).toEqual(new Set(['carol']));
+    });
+    it('collects users from both log and comment', () => {
+        const hit = makeHit({
+            log: [{ user: 'alice' }],
+            comment: [{ user: 'bob' }]
+        });
+        expect(getUserList(hit)).toEqual(new Set(['alice', 'bob']));
+    });
+    it('deduplicates users that appear in both arrays', () => {
+        const hit = makeHit({
+            log: [{ user: 'alice' }],
+            comment: [{ user: 'alice' }]
+        });
+        const result = getUserList(hit);
+        expect(result).toEqual(new Set(['alice']));
+        expect(result.size).toBe(1);
+    });
+    it('deduplicates users that appear multiple times in the same array', () => {
+        const hit = makeHit({ log: [{ user: 'alice' }, { user: 'alice' }] });
+        expect(getUserList(hit).size).toBe(1);
+    });
+    it('handles a hit with no howler field gracefully', () => {
+        const hit = {};
+        expect(getUserList(hit)).toEqual(new Set());
+    });
+});

package/utils/localStorage.test.d.ts

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

package/utils/localStorage.test.js

@@ -0,0 +1,96 @@
+/// <reference types="vitest" />
+import { afterEach, describe, expect, it } from 'vitest';
+import { StorageKey } from './constants';
+import { getStored, removeStored, saveLoginCredential, setStored } from './localStorage';
+const PREFIX = 'howler.ui';
+describe('localStorage utilities', () => {
+    afterEach(() => {
+        localStorage.clear();
+    });
+    // -------------------------------------------------------------------------
+    // setStored / getStored
+    // -------------------------------------------------------------------------
+    describe('setStored / getStored', () => {
+        it('stores and retrieves a string value', () => {
+            setStored(StorageKey.USERNAME, 'alice');
+            expect(getStored(StorageKey.USERNAME)).toBe('alice');
+        });
+        it('stores and retrieves an object value', () => {
+            const value = { token: 'abc', expires: 123 };
+            setStored(StorageKey.APP_TOKEN, value);
+            expect(getStored(StorageKey.APP_TOKEN)).toEqual(value);
+        });
+        it('uses the prefixed key in the underlying localStorage', () => {
+            setStored(StorageKey.USERNAME, 'bob');
+            expect(localStorage.getItem(`${PREFIX}.${StorageKey.USERNAME}`)).toBe(JSON.stringify('bob'));
+        });
+        it('returns null for a key that has not been set', () => {
+            expect(getStored(StorageKey.USERNAME)).toBeNull();
+        });
+        it('overwrites an existing value', () => {
+            setStored(StorageKey.USERNAME, 'alice');
+            setStored(StorageKey.USERNAME, 'bob');
+            expect(getStored(StorageKey.USERNAME)).toBe('bob');
+        });
+        it('stores a number value', () => {
+            setStored(StorageKey.PAGE_COUNT, 25);
+            expect(getStored(StorageKey.PAGE_COUNT)).toBe(25);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // removeStored
+    // -------------------------------------------------------------------------
+    describe('removeStored', () => {
+        it('removes an existing key so it returns null on subsequent reads', () => {
+            setStored(StorageKey.USERNAME, 'alice');
+            removeStored(StorageKey.USERNAME);
+            expect(getStored(StorageKey.USERNAME)).toBeNull();
+        });
+        it('does not throw when removing a key that was never stored', () => {
+            expect(() => removeStored(StorageKey.USERNAME)).not.toThrow();
+        });
+        it('removes only the targeted key and leaves others intact', () => {
+            setStored(StorageKey.USERNAME, 'alice');
+            setStored(StorageKey.PROVIDER, 'howler');
+            removeStored(StorageKey.USERNAME);
+            expect(getStored(StorageKey.USERNAME)).toBeNull();
+            expect(getStored(StorageKey.PROVIDER)).toBe('howler');
+        });
+    });
+    // -------------------------------------------------------------------------
+    // saveLoginCredential
+    // -------------------------------------------------------------------------
+    describe('saveLoginCredential', () => {
+        it('returns true and stores app_token when app_token is present', () => {
+            const result = saveLoginCredential({ app_token: 'tok123' });
+            expect(result).toBe(true);
+            expect(getStored(StorageKey.APP_TOKEN)).toBe('tok123');
+        });
+        it('also stores refresh_token and provider when they are present', () => {
+            saveLoginCredential({ app_token: 'tok', refresh_token: 'ref', provider: 'howler' });
+            expect(getStored(StorageKey.REFRESH_TOKEN)).toBe('ref');
+            expect(getStored(StorageKey.PROVIDER)).toBe('howler');
+        });
+        it('does not store refresh_token when it is absent', () => {
+            saveLoginCredential({ app_token: 'tok' });
+            expect(getStored(StorageKey.REFRESH_TOKEN)).toBeNull();
+        });
+        it('returns false and clears stored tokens when app_token is absent', () => {
+            setStored(StorageKey.APP_TOKEN, 'old-token');
+            setStored(StorageKey.REFRESH_TOKEN, 'old-refresh');
+            const result = saveLoginCredential({});
+            expect(result).toBe(false);
+            expect(getStored(StorageKey.APP_TOKEN)).toBeNull();
+            expect(getStored(StorageKey.REFRESH_TOKEN)).toBeNull();
+        });
+        it('clears APP_TOKEN, REFRESH_TOKEN, and PROVIDER on empty credential', () => {
+            setStored(StorageKey.APP_TOKEN, 't');
+            setStored(StorageKey.REFRESH_TOKEN, 'r');
+            setStored(StorageKey.PROVIDER, 'p');
+            saveLoginCredential({});
+            expect(getStored(StorageKey.APP_TOKEN)).toBeNull();
+            expect(getStored(StorageKey.REFRESH_TOKEN)).toBeNull();
+            expect(getStored(StorageKey.PROVIDER)).toBeNull();
+        });
+    });
+});

package/utils/menuUtils.test.d.ts

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

package/utils/menuUtils.test.js

@@ -0,0 +1,198 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AppMenuBuilder from './menuUtils';
+// Avoid pulling in react-pluggable (and its transitive React deps) by mocking the store module.
+// vi.mock is hoisted by Vitest before any imports, so the mock is applied even though this call appears below the imports.
+vi.mock('plugins/store', () => ({
+    MainMenuInsertOperation: {
+        Insert: 'INSERT',
+        InsertAfter: 'AFTER',
+        InsertBefore: 'BEFORE'
+    }
+}));
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const makeItem = (id, overrides = {}) => ({
+    type: 'item',
+    element: { id, i18nKey: `key.${id}`, route: `/${id}`, ...overrides }
+});
+const makeGroup = (id, items = []) => ({
+    type: 'group',
+    element: { id, i18nKey: `key.${id}`, items }
+});
+const makeDivider = () => ({ type: 'divider', element: null });
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('AppMenuBuilder', () => {
+    let initial;
+    let builder;
+    beforeEach(() => {
+        initial = [makeItem('home'), makeItem('search'), makeGroup('tools', [{ id: 'view', route: '/view' }])];
+        builder = new AppMenuBuilder(initial);
+    });
+    // -------------------------------------------------------------------------
+    // menu getter
+    // -------------------------------------------------------------------------
+    describe('menu getter', () => {
+        it('returns the initial menu unchanged when no operations are applied', () => {
+            expect(builder.menu).toHaveLength(3);
+        });
+    });
+    // -------------------------------------------------------------------------
+    // indexOfMenuId
+    // -------------------------------------------------------------------------
+    describe('indexOfMenuId', () => {
+        it('returns index -1 for the "root" pseudo-target', () => {
+            expect(builder.indexOfMenuId('root')).toEqual({ index: -1 });
+        });
+        it('returns the correct top-level index for a root item', () => {
+            expect(builder.indexOfMenuId('home')).toEqual({ index: 0 });
+        });
+        it('returns both index and subIndex for a nested item', () => {
+            expect(builder.indexOfMenuId('view')).toEqual({ index: 2, subIndex: 0 });
+        });
+        it('throws for an unknown id', () => {
+            expect(() => builder.indexOfMenuId('unknown-id')).toThrow();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // insert
+    // -------------------------------------------------------------------------
+    describe('insert', () => {
+        it('appends a new item to the root when targetId is "root"', () => {
+            builder.insert('root', makeItem('new'));
+            expect(builder.menu).toHaveLength(4);
+            expect(builder.menu[3].element.id).toBe('new');
+        });
+        it('appends a new item to an existing group', () => {
+            builder.insert('tools', makeItem('extra'));
+            const group = builder.menu.find(el => el.type === 'group');
+            expect(group.element.items).toHaveLength(2);
+            expect(group.element.items[1].id).toBe('extra');
+        });
+        it('converts a root-level item into a group when inserting into it', () => {
+            builder.insert('home', makeItem('sub-home'));
+            const converted = builder.menu.find(el => el.type === 'group');
+            // The first group found should be the newly converted one.
+            expect(converted).toBeDefined();
+            expect(converted.element.items.some((i) => i.id === 'sub-home')).toBe(true);
+        });
+        it('marks nested items added to a group as nested:true', () => {
+            builder.insert('tools', makeItem('nested-item'));
+            const group = builder.menu.find(el => el.type === 'group');
+            const last = group.element.items[group.element.items.length - 1];
+            expect(last.nested).toBe(true);
+        });
+        it('does not insert a divider into a group (logs warning and returns)', () => {
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const before = builder.menu.find(el => el.type === 'group').element.items.length;
+            builder.insert('tools', makeDivider());
+            const after = builder.menu.find(el => el.type === 'group').element.items.length;
+            expect(after).toBe(before);
+            warnSpy.mockRestore();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // insertBefore
+    // -------------------------------------------------------------------------
+    describe('insertBefore', () => {
+        it('inserts a new root-level item before the target', () => {
+            builder.insertBefore('search', makeItem('before-search'));
+            // 'search' was at index 1; the new item should now be at index 1.
+            expect(builder.menu[1].element.id).toBe('before-search');
+            expect(builder.menu[2].element.id).toBe('search');
+        });
+        it('inserts before the first root item (index 0)', () => {
+            builder.insertBefore('home', makeItem('new-first'));
+            expect(builder.menu[0].element.id).toBe('new-first');
+        });
+        it('inserts a new nested item before a sub-item within its group', () => {
+            builder.insertBefore('view', makeItem('before-view'));
+            const group = builder.menu.find(el => el.type === 'group');
+            expect(group.element.items[0].id).toBe('before-view');
+            expect(group.element.items[1].id).toBe('view');
+        });
+        it('marks items inserted into a group as nested:true', () => {
+            builder.insertBefore('view', makeItem('nested-before'));
+            const group = builder.menu.find(el => el.type === 'group');
+            expect(group.element.items[0].nested).toBe(true);
+        });
+        it('does not insert a divider before a sub-item (logs warning)', () => {
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const before = builder.menu.find(el => el.type === 'group').element.items.length;
+            builder.insertBefore('view', makeDivider());
+            const after = builder.menu.find(el => el.type === 'group').element.items.length;
+            expect(after).toBe(before);
+            warnSpy.mockRestore();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // insertAfter
+    // -------------------------------------------------------------------------
+    describe('insertAfter', () => {
+        it('inserts a new root-level item after the target', () => {
+            builder.insertAfter('home', makeItem('after-home'));
+            expect(builder.menu[1].element.id).toBe('after-home');
+            expect(builder.menu[2].element.id).toBe('search');
+        });
+        it('inserts after the last root item', () => {
+            builder.insertAfter('tools', makeItem('very-last'));
+            expect(builder.menu[builder.menu.length - 1].element.id).toBe('very-last');
+        });
+        it('inserts a new nested item after a sub-item within its group', () => {
+            builder.insertAfter('view', makeItem('after-view'));
+            const group = builder.menu.find(el => el.type === 'group');
+            expect(group.element.items[0].id).toBe('view');
+            expect(group.element.items[1].id).toBe('after-view');
+        });
+        it('marks items inserted into a group as nested:true', () => {
+            builder.insertAfter('view', makeItem('nested-after'));
+            const group = builder.menu.find(el => el.type === 'group');
+            expect(group.element.items[1].nested).toBe(true);
+        });
+        it('does not insert a divider after a sub-item (logs warning)', () => {
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const before = builder.menu.find(el => el.type === 'group').element.items.length;
+            builder.insertAfter('view', makeDivider());
+            const after = builder.menu.find(el => el.type === 'group').element.items.length;
+            expect(after).toBe(before);
+            warnSpy.mockRestore();
+        });
+    });
+    // -------------------------------------------------------------------------
+    // applyOperations
+    // -------------------------------------------------------------------------
+    describe('applyOperations', () => {
+        it('applies an INSERT operation to the root', () => {
+            builder.applyOperations([{ operation: 'INSERT', targetId: 'root', item: makeItem('op-item') }]);
+            expect(builder.menu.some((el) => el.element?.id === 'op-item')).toBe(true);
+        });
+        it('applies a BEFORE operation', () => {
+            builder.applyOperations([{ operation: 'BEFORE', targetId: 'search', item: makeItem('before-op') }]);
+            const idx = builder.menu.findIndex((el) => el.element?.id === 'before-op');
+            const searchIdx = builder.menu.findIndex((el) => el.element?.id === 'search');
+            expect(idx).toBeLessThan(searchIdx);
+        });
+        it('applies an AFTER operation', () => {
+            builder.applyOperations([{ operation: 'AFTER', targetId: 'home', item: makeItem('after-op') }]);
+            const homeIdx = builder.menu.findIndex((el) => el.element?.id === 'home');
+            const afterIdx = builder.menu.findIndex((el) => el.element?.id === 'after-op');
+            expect(afterIdx).toBe(homeIdx + 1);
+        });
+        it('applies multiple operations in order', () => {
+            builder.applyOperations([
+                { operation: 'INSERT', targetId: 'root', item: makeItem('first') },
+                { operation: 'INSERT', targetId: 'root', item: makeItem('second') }
+            ]);
+            const ids = builder.menu.map((el) => el.element?.id).filter(Boolean);
+            expect(ids).toContain('first');
+            expect(ids).toContain('second');
+        });
+        it('ignores operations with unknown operation strings', () => {
+            const lenBefore = builder.menu.length;
+            builder.applyOperations([{ operation: 'UNKNOWN', targetId: 'root', item: makeItem('x') }]);
+            expect(builder.menu.length).toBe(lenBefore);
+        });
+    });
+});

package/utils/sessionStorage.test.d.ts

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

package/utils/sessionStorage.test.js

@@ -0,0 +1,81 @@
+/// <reference types="vitest" />
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { StorageKey } from './constants';
+import { getAxiosCache, getStored, removeStored, setAxiosCache, setStored } from './sessionStorage';
+// The sessionStorage module uses a debounced write (3 000 ms). Tests that need to verify
+// persistence to sessionStorage use fake timers and advance past the debounce delay.
+// afterEach flushes any pending changes so module-level state is clean for the next test.
+const DEBOUNCE_MS = 3100; // slightly past the 3 000 ms throttle
+const SESSION_PREFIX = 'howler.ui.cache';
+describe('sessionStorage utilities', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        // Flush pending debounced writes – this also resets the internal `changes` map.
+        vi.advanceTimersByTime(DEBOUNCE_MS);
+        vi.useRealTimers();
+        sessionStorage.clear();
+    });
+    // -------------------------------------------------------------------------
+    // getAxiosCache / setAxiosCache
+    // -------------------------------------------------------------------------
+    describe('getAxiosCache / setAxiosCache', () => {
+        it('returns an empty object when no cache has been stored', () => {
+            expect(getAxiosCache()).toEqual({});
+        });
+        it('stores and retrieves a cached entry after the debounce fires', () => {
+            setAxiosCache('etag-1', { data: 'value' });
+            vi.advanceTimersByTime(DEBOUNCE_MS);
+            expect(getAxiosCache()['etag-1']).toEqual({ data: 'value' });
+        });
+        it('accumulates multiple distinct cache entries', () => {
+            setAxiosCache('etag-a', { data: 'a' });
+            setAxiosCache('etag-b', { data: 'b' });
+            vi.advanceTimersByTime(DEBOUNCE_MS);
+            const cache = getAxiosCache();
+            expect(cache['etag-a']).toEqual({ data: 'a' });
+            expect(cache['etag-b']).toEqual({ data: 'b' });
+        });
+        it('overwrites an earlier entry for the same etag', () => {
+            setAxiosCache('etag-1', { data: 'old' });
+            setAxiosCache('etag-1', { data: 'new' });
+            vi.advanceTimersByTime(DEBOUNCE_MS);
+            expect(getAxiosCache()['etag-1']).toEqual({ data: 'new' });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // setStored / getStored (object values)
+    // -------------------------------------------------------------------------
+    describe('setStored / getStored', () => {
+        it('makes an object value immediately readable via getStored (in-memory, before flush)', () => {
+            setStored(StorageKey.AXIOS_CACHE, { immediate: true });
+            // Timer has NOT advanced yet – data is in the in-memory `changes` map.
+            const result = getStored(StorageKey.AXIOS_CACHE);
+            expect(result.immediate).toBe(true);
+        });
+        it('persists an object value to sessionStorage after the debounce delay', () => {
+            const key = `${SESSION_PREFIX}.${StorageKey.AXIOS_CACHE}`;
+            setStored(StorageKey.AXIOS_CACHE, { persisted: true });
+            // Before flush: sessionStorage is still empty.
+            expect(sessionStorage.getItem(key)).toBeNull();
+            vi.advanceTimersByTime(DEBOUNCE_MS);
+            expect(JSON.parse(sessionStorage.getItem(key))).toEqual({ persisted: true });
+        });
+    });
+    // -------------------------------------------------------------------------
+    // removeStored
+    // -------------------------------------------------------------------------
+    describe('removeStored', () => {
+        it('removes a key from sessionStorage', () => {
+            setStored(StorageKey.AXIOS_CACHE, { val: 1 });
+            vi.advanceTimersByTime(DEBOUNCE_MS);
+            removeStored(StorageKey.AXIOS_CACHE);
+            const key = `${SESSION_PREFIX}.${StorageKey.AXIOS_CACHE}`;
+            expect(sessionStorage.getItem(key)).toBeNull();
+        });
+        it('does not throw when removing a key that was never set', () => {
+            expect(() => removeStored(StorageKey.AXIOS_CACHE)).not.toThrow();
+        });
+    });
+});

package/utils/socketUtils.test.d.ts

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

package/utils/socketUtils.test.js

@@ -0,0 +1,26 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import { isHitUpdate } from './socketUtils';
+describe('isHitUpdate', () => {
+    it('returns truthy when data has both a truthy version and a hit', () => {
+        expect(isHitUpdate({ version: 1, hit: {} })).toBeTruthy();
+    });
+    it('returns truthy when version is a non-empty string', () => {
+        expect(isHitUpdate({ version: 'v1', hit: { howler: {} } })).toBeTruthy();
+    });
+    it('returns falsy when version is missing', () => {
+        expect(isHitUpdate({ hit: {} })).toBeFalsy();
+    });
+    it('returns falsy when hit is missing', () => {
+        expect(isHitUpdate({ version: 1 })).toBeFalsy();
+    });
+    it('returns falsy when both fields are missing', () => {
+        expect(isHitUpdate({})).toBeFalsy();
+    });
+    it('returns falsy when version is 0 (falsy)', () => {
+        expect(isHitUpdate({ version: 0, hit: {} })).toBeFalsy();
+    });
+    it('returns falsy when hit is null (falsy)', () => {
+        expect(isHitUpdate({ version: 1, hit: null })).toBeFalsy();
+    });
+});

package/utils/utils.test.js

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { describe, expect, it } from 'vitest';
-import { bytesToSize, compareTimestamp, convertCustomDateRangeToLucene, convertDateToLucene, convertLuceneToDate, flattenDeep, formatDate, getTimeRange, hashCode, humanReadableNumber, removeEmpty, searchObject, sortByTimestamp, twitterShort, tryParse } from './utils';
+import { bytesToSize, compareTimestamp, convertCustomDateRangeToLucene, convertDateToLucene, convertLuceneToDate, flattenDeep, formatDate, getTimeRange, hashCode, humanReadableNumber, removeEmpty, searchObject, sortByTimestamp, tryParse, twitterShort } from './utils';
 describe('bytesToSize', () => {
     it('returns "0 B" for 0', () => {
         expect(bytesToSize(0)).toBe('0 B');

package/utils/xsrf.test.d.ts

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

package/utils/xsrf.test.js

@@ -0,0 +1,41 @@
+/// <reference types="vitest" />
+import { afterEach, describe, expect, it } from 'vitest';
+import getXSRFCookie from './xsrf';
+describe('getXSRFCookie', () => {
+    const originalDescriptor = Object.getOwnPropertyDescriptor(document, 'cookie');
+    const setCookie = (value) => {
+        Object.defineProperty(document, 'cookie', {
+            get: () => value,
+            configurable: true
+        });
+    };
+    afterEach(() => {
+        if (originalDescriptor) {
+            Object.defineProperty(document, 'cookie', originalDescriptor);
+        }
+    });
+    it('returns null when document.cookie is empty', () => {
+        setCookie('');
+        expect(getXSRFCookie()).toBeNull();
+    });
+    it('returns null when XSRF-TOKEN is not among the cookies', () => {
+        setCookie('session=abc; theme=dark');
+        expect(getXSRFCookie()).toBeNull();
+    });
+    it('returns the XSRF-TOKEN value when it is the only cookie', () => {
+        setCookie('XSRF-TOKEN=my-token');
+        expect(getXSRFCookie()).toBe('my-token');
+    });
+    it('returns the XSRF-TOKEN value when it appears among other cookies', () => {
+        setCookie('session=abc; XSRF-TOKEN=csrf-value; theme=dark');
+        expect(getXSRFCookie()).toBe('csrf-value');
+    });
+    it('returns the XSRF-TOKEN value when it appears first', () => {
+        setCookie('XSRF-TOKEN=first-token; session=abc');
+        expect(getXSRFCookie()).toBe('first-token');
+    });
+    it('returns the XSRF-TOKEN value when it appears last', () => {
+        setCookie('session=abc; XSRF-TOKEN=last-token');
+        expect(getXSRFCookie()).toBe('last-token');
+    });
+});