@cccsaurora/howler-ui 2.19.0-dev.950 → 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.950",
+  "version": "2.19.0-dev.958",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",