@cccsaurora/howler-ui 2.19.0-dev.938 → 2.19.0-dev.958

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.938",
+  "version": "2.19.0-dev.958",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/setupTests.js

@@ -2,7 +2,12 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
 import '@testing-library/jest-dom/vitest';
 import { configure } from '@testing-library/react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
 import { server } from '@cccsaurora/howler-ui/tests/server';
+dayjs.extend(utc);
+dayjs.extend(relativeTime);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 // Extend vitest with the dom matchers from jest-dom.
 expect.extend(matchers);

package/utils/actionUtils.test.d.ts

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

package/utils/actionUtils.test.js

@@ -0,0 +1,140 @@
+import { describe, expect, it } from 'vitest';
+import { checkArgsAreFilled, getArgsByContext, getOptionsByContext, operationReady } from './actionUtils';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const makeStep = (args, options = {}) => ({
+    args,
+    options,
+    validation: {}
+});
+const makeAction = (steps) => ({
+    id: 'test-action',
+    title: 'Test Action',
+    i18nKey: 'test.action',
+    description: { short: '', long: '' },
+    roles: [],
+    steps,
+    triggers: []
+});
+// ---------------------------------------------------------------------------
+// checkArgsAreFilled
+// ---------------------------------------------------------------------------
+describe('checkArgsAreFilled', () => {
+    it('returns false when values is empty/falsy', () => {
+        const step = makeStep({ status: [] });
+        expect(checkArgsAreFilled(step, '')).toBe(false);
+    });
+    it('returns true when all required args are present and truthy', () => {
+        const step = makeStep({ status: [] });
+        expect(checkArgsAreFilled(step, JSON.stringify({ status: 'open' }))).toBe(true);
+    });
+    it('returns false when a required arg is missing from values', () => {
+        const step = makeStep({ status: [], assignment: [] });
+        expect(checkArgsAreFilled(step, JSON.stringify({ status: 'open' }))).toBe(false);
+    });
+    it('returns false when a required arg is present but falsy (empty string)', () => {
+        const step = makeStep({ status: [] });
+        expect(checkArgsAreFilled(step, JSON.stringify({ status: '' }))).toBe(false);
+    });
+    it('returns true when there are no required args', () => {
+        const step = makeStep({});
+        expect(checkArgsAreFilled(step, JSON.stringify({}))).toBe(true);
+    });
+});
+// ---------------------------------------------------------------------------
+// getOptionsByContext
+// ---------------------------------------------------------------------------
+describe('getOptionsByContext', () => {
+    it('returns an empty array when the arg is not in options', () => {
+        const options = {};
+        expect(getOptionsByContext(options, 'status', '{}')).toEqual([]);
+    });
+    it('returns the full list when the arg maps to a plain array', () => {
+        const options = { status: ['open', 'in-progress', 'resolved'] };
+        expect(getOptionsByContext(options, 'status', '{}')).toEqual(['open', 'in-progress', 'resolved']);
+    });
+    it('returns options matching the current context when arg has conditional options', () => {
+        const options = {
+            assessment: {
+                'status:open': ['false_positive', 'legitimate'],
+                'status:resolved': ['correct']
+            }
+        };
+        const context = JSON.stringify({ status: 'open' });
+        expect(getOptionsByContext(options, 'assessment', context)).toEqual(['false_positive', 'legitimate']);
+    });
+    it('returns an empty array when context does not match any conditional key', () => {
+        const options = {
+            assessment: {
+                'status:open': ['false_positive']
+            }
+        };
+        const context = JSON.stringify({ status: 'resolved' });
+        expect(getOptionsByContext(options, 'assessment', context)).toEqual([]);
+    });
+});
+// ---------------------------------------------------------------------------
+// getArgsByContext
+// ---------------------------------------------------------------------------
+describe('getArgsByContext', () => {
+    it('always returns an arg with an empty conditions array', () => {
+        const args = { status: [] };
+        expect(getArgsByContext(args, '{}')).toContain('status');
+    });
+    it('includes an arg whose condition matches the current context', () => {
+        const args = { assessment: ['status:open'] };
+        const values = JSON.stringify({ status: 'open' });
+        expect(getArgsByContext(args, values)).toContain('assessment');
+    });
+    it('excludes an arg whose condition does not match the current context', () => {
+        const args = { assessment: ['status:open'] };
+        const values = JSON.stringify({ status: 'resolved' });
+        expect(getArgsByContext(args, values)).not.toContain('assessment');
+    });
+    it('includes an arg when any one of multiple conditions matches (OR logic)', () => {
+        const args = { rationale: ['status:open', 'status:in-progress'] };
+        const values = JSON.stringify({ status: 'in-progress' });
+        expect(getArgsByContext(args, values)).toContain('rationale');
+    });
+    it('returns an empty array when no args match', () => {
+        const args = { assessment: ['status:open'] };
+        const values = JSON.stringify({ status: 'resolved' });
+        expect(getArgsByContext(args, values)).toEqual([]);
+    });
+});
+// ---------------------------------------------------------------------------
+// operationReady
+// ---------------------------------------------------------------------------
+describe('operationReady', () => {
+    it('returns false when data is null/falsy', () => {
+        const action = makeAction([makeStep({ status: [] })]);
+        expect(operationReady(null, action)).toBe(false);
+    });
+    it('returns falsy when action is falsy', () => {
+        expect(operationReady(JSON.stringify({ status: 'open' }), null)).toBeFalsy();
+    });
+    it('returns true when all unconditional args are present', () => {
+        const action = makeAction([makeStep({ status: [] })]);
+        const data = JSON.stringify({ status: 'open' });
+        expect(operationReady(data, action)).toBe(true);
+    });
+    it('returns false when a required unconditional arg is missing', () => {
+        const action = makeAction([makeStep({ status: [], assessment: [] })]);
+        const data = JSON.stringify({ status: 'open' });
+        expect(operationReady(data, action)).toBe(false);
+    });
+    it('ignores conditional args that do not apply in the current context', () => {
+        // assessment only required when status=open; here status=resolved so assessment is not required
+        const action = makeAction([makeStep({ status: [], assessment: ['status:open'] })]);
+        const data = JSON.stringify({ status: 'resolved' });
+        expect(operationReady(data, action)).toBe(true);
+    });
+    it('merges args across multiple steps', () => {
+        const step1 = makeStep({ status: [] });
+        const step2 = makeStep({ assignment: [] });
+        const action = makeAction([step1, step2]);
+        const data = JSON.stringify({ status: 'open', assignment: 'alice' });
+        expect(operationReady(data, action)).toBe(true);
+    });
+});

package/utils/stringUtils.test.d.ts

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

package/utils/stringUtils.test.js

@@ -0,0 +1,159 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import { maxLenStr, nameToInitials, safeFieldValue, safeFieldValueURI, safeStringPropertyCompare, sanitizeLuceneQuery, sanitizeMultilineLucene, validateRegex } from './stringUtils';
+describe('nameToInitials', () => {
+    it('returns initials from a standard first-last name', () => {
+        expect(nameToInitials('John Doe')).toEqual(['J', 'D']);
+    });
+    it('returns a single initial when there is only one word', () => {
+        expect(nameToInitials('John')).toEqual(['J']);
+    });
+    it('uses only the first two words even when there are more', () => {
+        expect(nameToInitials('John Middle Doe')).toEqual(['J', 'M']);
+    });
+    it('reverses order when the name is in "last, first" comma format', () => {
+        // "Smith, John" → parts = ["Smith,", "John"] → reversed → ["John", "Smith,"] → initials ["J", "S"]
+        expect(nameToInitials('Smith, John')).toEqual(['J', 'S']);
+    });
+    it('returns uppercase initials regardless of input case', () => {
+        expect(nameToInitials('alice bob')).toEqual(['A', 'B']);
+    });
+});
+describe('maxLenStr', () => {
+    it('returns the string unchanged when shorter than the limit', () => {
+        expect(maxLenStr('hello', 10)).toBe('hello');
+    });
+    it('returns the string unchanged when length equals the limit', () => {
+        expect(maxLenStr('hello', 5)).toBe('hello');
+    });
+    it('truncates and appends "..." when string exceeds the limit', () => {
+        expect(maxLenStr('hello world', 8)).toBe('hello...');
+    });
+    it('handles an empty string', () => {
+        expect(maxLenStr('', 5)).toBe('');
+    });
+    it('truncation accounts for the three-character ellipsis', () => {
+        // len=6 → keeps first 3 chars then "..."
+        expect(maxLenStr('abcdefgh', 6)).toBe('abc...');
+    });
+});
+describe('safeFieldValue', () => {
+    it('wraps a plain string in double quotes', () => {
+        expect(safeFieldValue('test')).toBe('"test"');
+    });
+    it('escapes backslashes', () => {
+        expect(safeFieldValue('back\\slash')).toBe('"back\\\\slash"');
+    });
+    it('escapes embedded double quotes', () => {
+        expect(safeFieldValue('say "hello"')).toBe('"say \\"hello\\""');
+    });
+    it('converts a number to a quoted string', () => {
+        expect(safeFieldValue(42)).toBe('"42"');
+    });
+    it('converts a boolean to a quoted string', () => {
+        expect(safeFieldValue(true)).toBe('"true"');
+    });
+    it('escapes backslash before escaping quotes (order matters)', () => {
+        expect(safeFieldValue('\\"')).toBe('"\\\\\\"\"');
+    });
+});
+describe('safeFieldValueURI', () => {
+    it('URI-encodes the safe field value of a plain string', () => {
+        expect(safeFieldValueURI('hello')).toBe(encodeURIComponent('"hello"'));
+    });
+    it('URI-encodes special characters', () => {
+        expect(safeFieldValueURI('hello world')).toBe(encodeURIComponent('"hello world"'));
+    });
+    it('handles strings that already contain lucene special chars', () => {
+        const input = 'field:value';
+        expect(safeFieldValueURI(input)).toBe(encodeURIComponent(safeFieldValue(input)));
+    });
+});
+describe('sanitizeLuceneQuery', () => {
+    it('escapes colons', () => {
+        expect(sanitizeLuceneQuery('field:value')).toBe('field\\:value');
+    });
+    it('escapes forward slashes', () => {
+        expect(sanitizeLuceneQuery('path/to')).toBe('path\\/to');
+    });
+    it('escapes opening parenthesis', () => {
+        expect(sanitizeLuceneQuery('(term)')).toBe('\\(term\\)');
+    });
+    it('escapes square brackets', () => {
+        expect(sanitizeLuceneQuery('[a TO b]')).toBe('\\[a TO b\\]');
+    });
+    it('escapes curly braces', () => {
+        expect(sanitizeLuceneQuery('{a TO b}')).toBe('\\{a TO b\\}');
+    });
+    it('escapes carets', () => {
+        expect(sanitizeLuceneQuery('term^2')).toBe('term\\^2');
+    });
+    it('escapes double-ampersand (&&)', () => {
+        expect(sanitizeLuceneQuery('a && b')).toBe('a \\&& b');
+    });
+    it('escapes double-pipe (||)', () => {
+        expect(sanitizeLuceneQuery('a || b')).toBe('a \\|| b');
+    });
+    it('leaves a plain alphanumeric string unchanged', () => {
+        expect(sanitizeLuceneQuery('plainterm')).toBe('plainterm');
+    });
+});
+describe('safeStringPropertyCompare', () => {
+    const compare = safeStringPropertyCompare('name');
+    it('returns a negative number when a sorts before b', () => {
+        expect(compare({ name: 'Alice' }, { name: 'Bob' })).toBeLessThan(0);
+    });
+    it('returns a positive number when a sorts after b', () => {
+        expect(compare({ name: 'Bob' }, { name: 'Alice' })).toBeGreaterThan(0);
+    });
+    it('returns 0 for equal strings', () => {
+        expect(compare({ name: 'Alice' }, { name: 'Alice' })).toBe(0);
+    });
+    it('returns 1 when only a has the property', () => {
+        expect(compare({ name: 'Alice' }, {})).toBe(1);
+    });
+    it('returns 0 when only b has the property', () => {
+        expect(compare({}, { name: 'Bob' })).toBe(0);
+    });
+    it('returns 0 when neither object has the property', () => {
+        expect(compare({}, {})).toBe(0);
+    });
+    it('supports nested property paths', () => {
+        const nestedCompare = safeStringPropertyCompare('user.name');
+        expect(nestedCompare({ user: { name: 'Alice' } }, { user: { name: 'Bob' } })).toBeLessThan(0);
+    });
+});
+describe('sanitizeMultilineLucene', () => {
+    it('removes a trailing inline comment', () => {
+        expect(sanitizeMultilineLucene('query # comment')).toBe('query ');
+    });
+    it('removes a full-line comment', () => {
+        expect(sanitizeMultilineLucene('# full line\nquery')).toBe('\nquery');
+    });
+    it('collapses two or more consecutive newlines into one', () => {
+        expect(sanitizeMultilineLucene('a\n\n\nb')).toBe('a\nb');
+    });
+    it('collapses exactly two consecutive newlines', () => {
+        expect(sanitizeMultilineLucene('a\n\nb')).toBe('a\nb');
+    });
+    it('leaves a clean single-line query unchanged', () => {
+        expect(sanitizeMultilineLucene('howler.status:open')).toBe('howler.status:open');
+    });
+});
+describe('validateRegex', () => {
+    it('returns true for a valid regex pattern', () => {
+        expect(validateRegex('[a-z]+')).toBe(true);
+    });
+    it('returns true for an empty string (valid zero-length pattern)', () => {
+        expect(validateRegex('')).toBe(true);
+    });
+    it('returns false for an invalid regex pattern', () => {
+        expect(validateRegex('[unclosed')).toBe(false);
+    });
+    it('returns true for a complex but valid regex', () => {
+        expect(validateRegex('^(\\d{4})-(\\d{2})-(\\d{2})$')).toBe(true);
+    });
+    it('returns true for a pattern with quantifiers', () => {
+        expect(validateRegex('a{2,5}')).toBe(true);
+    });
+});

package/utils/utils.test.d.ts

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

package/utils/utils.test.js

@@ -0,0 +1,292 @@
+/// <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';
+describe('bytesToSize', () => {
+    it('returns "0 B" for 0', () => {
+        expect(bytesToSize(0)).toBe('0 B');
+    });
+    it('returns "0 B" for null', () => {
+        expect(bytesToSize(null)).toBe('0 B');
+    });
+    it('formats bytes', () => {
+        expect(bytesToSize(512)).toBe('512 B');
+    });
+    it('formats kilobytes', () => {
+        expect(bytesToSize(1024)).toBe('1 KB');
+    });
+    it('formats megabytes', () => {
+        expect(bytesToSize(1024 * 1024)).toBe('1 MB');
+    });
+    it('formats gigabytes', () => {
+        expect(bytesToSize(1024 * 1024 * 1024)).toBe('1 GB');
+    });
+});
+describe('humanReadableNumber', () => {
+    it('returns "0 " for 0', () => {
+        expect(humanReadableNumber(0)).toBe('0 ');
+    });
+    it('returns "0 " for null', () => {
+        expect(humanReadableNumber(null)).toBe('0 ');
+    });
+    it('returns the number with a trailing space for values below 1000', () => {
+        expect(humanReadableNumber(500)).toBe('500 ');
+    });
+    it('formats thousands with "k"', () => {
+        expect(humanReadableNumber(1000)).toBe('1k ');
+    });
+    it('formats millions with "m"', () => {
+        expect(humanReadableNumber(1_000_000)).toBe('1m ');
+    });
+});
+describe('compareTimestamp', () => {
+    it('returns a negative number when a is earlier than b', () => {
+        expect(compareTimestamp('2021-01-01T00:00:00Z', '2021-01-02T00:00:00Z')).toBeLessThan(0);
+    });
+    it('returns a positive number when a is later than b', () => {
+        expect(compareTimestamp('2021-01-02T00:00:00Z', '2021-01-01T00:00:00Z')).toBeGreaterThan(0);
+    });
+    it('returns 0 for identical timestamps', () => {
+        expect(compareTimestamp('2021-01-01T00:00:00Z', '2021-01-01T00:00:00Z')).toBe(0);
+    });
+    it('returns a difference in seconds', () => {
+        // 86400 seconds = 1 day
+        expect(compareTimestamp('2021-01-02T00:00:00Z', '2021-01-01T00:00:00Z')).toBe(86400);
+    });
+});
+describe('hashCode', () => {
+    it('returns a number', () => {
+        expect(typeof hashCode('hello')).toBe('number');
+    });
+    it('returns the same value for the same input', () => {
+        expect(hashCode('hello')).toBe(hashCode('hello'));
+    });
+    it('returns different values for different inputs', () => {
+        expect(hashCode('hello')).not.toBe(hashCode('world'));
+    });
+    it('returns 0 for an empty string', () => {
+        expect(hashCode('')).toBe(0);
+    });
+});
+describe('sortByTimestamp', () => {
+    it('returns an empty array for an empty input', () => {
+        expect(sortByTimestamp([])).toEqual([]);
+    });
+    it('sorts items in descending timestamp order (most recent first)', () => {
+        const items = [
+            { timestamp: '2021-01-01T00:00:00Z' },
+            { timestamp: '2021-03-01T00:00:00Z' },
+            { timestamp: '2021-02-01T00:00:00Z' }
+        ];
+        const sorted = sortByTimestamp(items);
+        expect(sorted[0].timestamp).toBe('2021-03-01T00:00:00Z');
+        expect(sorted[2].timestamp).toBe('2021-01-01T00:00:00Z');
+    });
+    it('does not mutate the original array', () => {
+        const original = [{ timestamp: '2021-01-01T00:00:00Z' }, { timestamp: '2021-03-01T00:00:00Z' }];
+        const copy = [...original];
+        sortByTimestamp(original);
+        expect(original).toEqual(copy);
+    });
+    it('handles items with missing timestamps', () => {
+        const items = [{ timestamp: '2021-01-01T00:00:00Z' }, {}];
+        expect(() => sortByTimestamp(items)).not.toThrow();
+    });
+});
+describe('getTimeRange', () => {
+    it('returns [earliest, latest] from an array of timestamps', () => {
+        const timestamps = ['2021-03-01T00:00:00Z', '2021-01-01T00:00:00Z', '2021-02-01T00:00:00Z'];
+        const [start, end] = getTimeRange(timestamps);
+        expect(start).toBe('2021-01-01T00:00:00Z');
+        expect(end).toBe('2021-03-01T00:00:00Z');
+    });
+    it('returns the same value for both when given a single timestamp', () => {
+        const [start, end] = getTimeRange(['2021-01-01T00:00:00Z']);
+        expect(start).toBe(end);
+    });
+});
+describe('removeEmpty', () => {
+    it('removes null values from a flat object', () => {
+        expect(removeEmpty({ a: null, b: 'val' })).toEqual({ b: 'val' });
+    });
+    it('removes undefined values from a flat object', () => {
+        expect(removeEmpty({ a: undefined, b: 'val' })).toEqual({ b: 'val' });
+    });
+    it('recursively removes null values from nested objects', () => {
+        expect(removeEmpty({ nested: { a: null, b: 'val' } })).toEqual({ nested: { b: 'val' } });
+    });
+    it('handles an empty object', () => {
+        expect(removeEmpty({})).toEqual({});
+    });
+    it('handles null input gracefully', () => {
+        expect(removeEmpty(null)).toEqual({});
+    });
+    it('keeps arrays as-is', () => {
+        const result = removeEmpty({ arr: [1, 2, 3] });
+        expect(result.arr).toEqual([1, 2, 3]);
+    });
+});
+describe('searchObject', () => {
+    const obj = { name: 'Alice', role: 'admin', nested: { city: 'Ottawa' } };
+    it('returns the full object when query is empty', () => {
+        const result = searchObject(obj, '');
+        expect(result).toMatchObject(obj);
+    });
+    it('returns matching entries for a key match', () => {
+        const result = searchObject(obj, 'name');
+        expect(result.name).toBe('Alice');
+    });
+    it('returns matching entries for a value match', () => {
+        const result = searchObject(obj, 'Alice');
+        expect(result.name).toBe('Alice');
+    });
+    it('returns an empty object when nothing matches', () => {
+        const result = searchObject(obj, 'zzznomatch');
+        expect(result).toEqual({});
+    });
+    it('returns flat result when returnFlat=true', () => {
+        const result = searchObject(obj, 'city', true);
+        expect(result['nested.city']).toBe('Ottawa');
+    });
+    it('returns full flat object when query is empty and returnFlat=true', () => {
+        const result = searchObject({ a: 1 }, '', true);
+        expect(result.a).toBe(1);
+    });
+    it('handles an invalid regex gracefully by returning the full object', () => {
+        const result = searchObject(obj, '[invalid');
+        expect(result).toMatchObject(obj);
+    });
+});
+describe('convertDateToLucene', () => {
+    it('returns "[now-1d TO now]" for a 1-day range', () => {
+        expect(convertDateToLucene('date.range.1.day')).toBe('[now-1d TO now]');
+    });
+    it('returns "[now-1w TO now]" for a 1-week range', () => {
+        expect(convertDateToLucene('date.range.1.week')).toBe('[now-1w TO now]');
+    });
+    it('returns "[now-1M TO now]" for a 1-month range', () => {
+        expect(convertDateToLucene('date.range.1.month')).toBe('[now-1M TO now]');
+    });
+    it('returns "[now-1y TO now]" for a 1-year range', () => {
+        expect(convertDateToLucene('date.range.1.year')).toBe('[now-1y TO now]');
+    });
+    it('returns "*" for the "all" range', () => {
+        expect(convertDateToLucene('date.range.all')).toBe('*');
+    });
+    it('returns the default 1-day range when input does not start with "date.range."', () => {
+        expect(convertDateToLucene('something.else')).toBe('[now-1d TO now]');
+    });
+    it('uses the day unit as fallback for an unknown period type', () => {
+        expect(convertDateToLucene('date.range.3.unknown')).toBe('[now-3d TO now]');
+    });
+    it('handles multi-unit amounts', () => {
+        expect(convertDateToLucene('date.range.3.day')).toBe('[now-3d TO now]');
+    });
+});
+describe('convertCustomDateRangeToLucene', () => {
+    it('formats a custom date range', () => {
+        expect(convertCustomDateRangeToLucene('2021-01-01', '2021-12-31')).toBe('[2021-01-01 TO 2021-12-31]');
+    });
+    it('works with ISO datetime strings', () => {
+        expect(convertCustomDateRangeToLucene('2021-01-01T00:00:00Z', '2021-12-31T23:59:59Z')).toBe('[2021-01-01T00:00:00Z TO 2021-12-31T23:59:59Z]');
+    });
+});
+describe('convertLuceneToDate', () => {
+    it('converts a 1-day lucene range back to "date.range.1.day"', () => {
+        expect(convertLuceneToDate('event.created:[now-1d TO now]')).toBe('date.range.1.day');
+    });
+    it('converts a 1-week lucene range back to "date.range.1.week"', () => {
+        expect(convertLuceneToDate('event.created:[now-1w TO now]')).toBe('date.range.1.week');
+    });
+    it('converts a 1-month lucene range back to "date.range.1.month"', () => {
+        expect(convertLuceneToDate('event.created:[now-1M TO now]')).toBe('date.range.1.month');
+    });
+    it('returns the input unchanged when there is no colon (not a field query)', () => {
+        expect(convertLuceneToDate('*')).toBe('*');
+    });
+    it('falls back to "day" for an unrecognised unit suffix', () => {
+        expect(convertLuceneToDate('event.created:[now-5z TO now]')).toBe('date.range.5.day');
+    });
+});
+describe('tryParse', () => {
+    it('parses valid JSON and returns the value', () => {
+        expect(tryParse('{"a":1}')).toEqual({ a: 1 });
+    });
+    it('parses a JSON array', () => {
+        expect(tryParse('[1,2,3]')).toEqual([1, 2, 3]);
+    });
+    it('returns the raw string when JSON is invalid', () => {
+        expect(tryParse('not json')).toBe('not json');
+    });
+    it('parses a quoted JSON string', () => {
+        expect(tryParse('"hello"')).toBe('hello');
+    });
+    it('returns the raw string for partially-valid JSON', () => {
+        expect(tryParse('{invalid}')).toBe('{invalid}');
+    });
+});
+describe('flattenDeep', () => {
+    it('flattens a simple nested object', () => {
+        const result = flattenDeep({ a: { b: 1 } });
+        expect(result).toEqual({ 'a.b': 1 });
+    });
+    it('leaves a flat object unchanged', () => {
+        const result = flattenDeep({ a: 1, b: 2 });
+        expect(result).toEqual({ a: 1, b: 2 });
+    });
+    it('flattens arrays of objects by merging values under a common key', () => {
+        const result = flattenDeep({ items: [{ id: 'x' }, { id: 'y' }] });
+        expect(result['items.id']).toEqual(['x', 'y']);
+    });
+    it('keeps a primitive array as-is', () => {
+        const result = flattenDeep({ tags: ['a', 'b', 'c'] });
+        expect(result.tags).toEqual(['a', 'b', 'c']);
+    });
+    it('handles an empty object', () => {
+        expect(flattenDeep({})).toEqual({});
+    });
+});
+describe('formatDate', () => {
+    it('returns "?" for a falsy value', () => {
+        expect(formatDate(null)).toBe('?');
+    });
+    it('returns "?" for an empty string', () => {
+        expect(formatDate('')).toBe('?');
+    });
+    it('formats an ISO string as UTC in YYYY/MM/DD HH:mm:ss format', () => {
+        // 2021-06-15T12:30:45Z → UTC → "2021/06/15 12:30:45"
+        expect(formatDate('2021-06-15T12:30:45Z')).toBe('2021/06/15 12:30:45');
+    });
+    it('formats a Date object correctly', () => {
+        const date = new Date('2023-01-01T00:00:00Z');
+        expect(formatDate(date)).toBe('2023/01/01 00:00:00');
+    });
+    it('formats a unix timestamp (ms) correctly', () => {
+        // 1000ms = 1970-01-01T00:00:01Z
+        expect(formatDate(1000)).toBe('1970/01/01 00:00:01');
+    });
+    it('returns "?" for a numeric 0 (treated as falsy by the guard)', () => {
+        expect(formatDate(0)).toBe('?');
+    });
+});
+describe('twitterShort', () => {
+    it('returns "?" for a falsy value', () => {
+        expect(twitterShort(null)).toBe('?');
+    });
+    it('returns "?" for the literal string "?"', () => {
+        expect(twitterShort('?')).toBe('?');
+    });
+    it('returns a non-empty relative string for a recent date', () => {
+        const result = twitterShort(new Date().toISOString());
+        expect(result).toBeTruthy();
+        expect(typeof result).toBe('string');
+    });
+    it('returns "a few seconds ago" for a date just in the past', () => {
+        const recent = new Date(Date.now() - 2000).toISOString();
+        expect(twitterShort(recent)).toBe('a few seconds ago');
+    });
+    it('returns a sensible relative string for a date one year in the past', () => {
+        const oneYearAgo = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString();
+        const result = twitterShort(oneYearAgo);
+        expect(result).toMatch(/year/);
+    });
+});

package/utils/viewUtils.test.d.ts

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

package/utils/viewUtils.test.js

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { buildViewUrl } from './viewUtils';
+const makeView = (overrides = {}) => ({
+    view_id: 'view-1',
+    title: 'Test View',
+    query: 'howler.status:open',
+    sort: 'event.created desc',
+    span: 'date.range.1.month',
+    type: 'personal',
+    owner: 'testuser',
+    ...overrides
+});
+describe('buildViewUrl', () => {
+    it('includes the view_id as the "view" query param', () => {
+        const url = buildViewUrl(makeView({ view_id: 'abc-123' }));
+        expect(url).toContain('view=abc-123');
+    });
+    it('starts with /search', () => {
+        const url = buildViewUrl(makeView());
+        expect(url.startsWith('/search?')).toBe(true);
+    });
+    it('includes the span param when provided', () => {
+        const url = buildViewUrl(makeView({ span: 'date.range.1.week' }));
+        expect(url).toContain('span=date.range.1.week');
+    });
+    it('omits the span param when span is undefined', () => {
+        const url = buildViewUrl(makeView({ span: undefined }));
+        expect(url).not.toContain('span=');
+    });
+    it('includes the sort param when provided', () => {
+        const url = buildViewUrl(makeView({ sort: 'event.created asc' }));
+        expect(url).toContain('sort=event.created+asc');
+    });
+    it('omits the sort param when sort is undefined', () => {
+        const url = buildViewUrl(makeView({ sort: undefined }));
+        expect(url).not.toContain('sort=');
+    });
+    it('builds a complete URL with all fields present', () => {
+        const url = buildViewUrl(makeView({ view_id: 'v1', span: 'date.range.1.day', sort: 'event.created desc' }));
+        const parsed = new URL(url, 'http://localhost');
+        expect(parsed.searchParams.get('view')).toBe('v1');
+        expect(parsed.searchParams.get('span')).toBe('date.range.1.day');
+        expect(parsed.searchParams.get('sort')).toBe('event.created desc');
+    });
+});