@cccsaurora/howler-ui 2.19.0-dev.1000 → 2.19.0-dev.1085

package/components/routes/analytics/AnalyticSearch.js

@@ -4,6 +4,7 @@ import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconBu
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 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';
@@ -25,12 +26,12 @@ const AnalyticSearchBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const appUser = useAppUser();
+    const { response, request } = useContext(SearchResponseContext);
     const [onlyRules, setOnlyRules] = useLocalStorageItem(StorageKey.ONLY_RULES, 0);
     const [searching, setSearching] = useState(false);
     const [hasError, setHasError] = useState(false);
     const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const addFavourite = useCallback(async (analytic) => {
         await dispatchApi(api.analytic.favourite.post(analytic.analytic_id));
         appUser.setUser({
@@ -58,13 +59,12 @@ const AnalyticSearchBase = () => {
         setSearchParams(searchParams, { replace: true });
         try {
             const sanitizedPhrase = sanitizeLuceneQuery(phrase);
-            const _response = await dispatchApi(api.search.analytic.post({
+            const _response = await request(api.search.analytic.post, {
                 query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*` +
                     (onlyRules > 0 ? ' AND _exists_:rule_type' : onlyRules < 0 ? ' AND -_exists_:rule_type' : ''),
                 rows: pageCount,
                 offset
-            }));
-            setResponse(_response);
+            });
             load(_response.items.map(u => ({ id: u.analytic_id, item: u })));
         }
         catch (e) {
@@ -73,7 +73,7 @@ const AnalyticSearchBase = () => {
         finally {
             setSearching(false);
         }
-    }, [dispatchApi, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
+    }, [request, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             searchParams.set('offset', _offset.toString());
@@ -133,6 +133,6 @@ const AnalyticSearchBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: t(`route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`), children: _jsx(IconButton, { onClick: () => setOnlyRules((((onlyRules + 2) % 3) - 1)), children: _jsx(SsidChart, { color: onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit', sx: { transition: theme.transitions.create(['color']) } }) }) }) }), aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
 };
 const AnalyticSearch = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(AnalyticSearchBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "analytic_id", children: _jsx(AnalyticSearchBase, {}) }) }));
 };
 export default AnalyticSearch;

package/components/routes/dossiers/Dossiers.js

@@ -3,6 +3,7 @@ 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 SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 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';
@@ -23,9 +24,9 @@ const DossiersBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
     const onSearch = useCallback(async () => {
@@ -42,11 +43,11 @@ const DossiersBase = () => {
             // Check for the actual search query
             const query = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the overview should be visible and/or matches the type we are filtering for
-            setResponse(await dispatchApi(api.search.dossier.post({
+            await request(api.search.dossier.post, {
                 query,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -54,7 +55,7 @@ const DossiersBase = () => {
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     useEffect(() => {
@@ -70,18 +71,19 @@ const DossiersBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
         withConfirmDeleteModal(async () => {
             try {
-                await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
-                await onSearch();
+                await dispatchApi(api.dossier.del(id), { throwError: true, showError: true });
+                remove(id);
                 showSuccessMessage(t('route.dossiers.manager.delete.success'));
             }
             catch (_err) {
@@ -89,7 +91,7 @@ const DossiersBase = () => {
                 console.warn(_err);
             }
         });
-    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
+    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {
@@ -115,6 +117,6 @@ const DossiersBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.dossiers.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/dossiers/${item.id}/edit`), onCreate: () => navigate('/dossiers/create'), createPrompt: "route.dossiers.create", searchPrompt: "route.dossiers.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
 };
 const Dossiers = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(DossiersBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "dossier_id", children: _jsx(DossiersBase, {}) }) }));
 };
 export default Dossiers;

package/components/routes/home/AddNewCard.test.js

@@ -25,8 +25,26 @@ const mockFetchViews = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
 vi.mock('components/app/providers/ViewProvider', () => ({
     ViewContext: React.createContext({
         views: {
-            'view-1': { view_id: 'view-1', title: 'My View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } },
-            'view-2': { view_id: 'view-2', title: 'Second View', query: 'howler.status:open', sort: 'event.created desc', span: 'date.range.1.month', type: 'personal', owner: 'testuser', settings: { advance_on_triage: false } }
+            'view-1': {
+                view_id: 'view-1',
+                title: 'My View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            },
+            'view-2': {
+                view_id: 'view-2',
+                title: 'Second View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            }
         },
         fetchViews: mockFetchViews
     })

package/components/routes/home/ViewRefresh.test.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
-import { render, screen, act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';

package/components/routes/overviews/OverviewViewer.js

@@ -12,6 +12,7 @@ import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/Mod
 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';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
@@ -27,6 +28,7 @@ const OverviewViewer = () => {
     const { getOverviews } = useContext(OverviewContext);
     const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
@@ -131,12 +133,14 @@ const OverviewViewer = () => {
             await dispatchApi(api.overview.del(selectedOverview.overview_id), {
                 logError: false,
                 showError: true,
-                throwError: false
+                throwError: true
             });
+            setOverviewList(l => l.filter(v => v.overview_id !== selectedOverview.overview_id));
             setSelectedOverview(null);
             setContent('');
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
         });
-    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal]);
+    }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal, showSuccessMessage, t]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {
             try {

package/components/routes/overviews/Overviews.js

@@ -3,6 +3,7 @@ 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 SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 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';
@@ -25,9 +26,9 @@ const OverviewsBase = () => {
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
             setLoading(true);
@@ -42,11 +43,11 @@ const OverviewsBase = () => {
             // Check for the actual search query
             const query = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the overview should be visible and/or matches the type we are filtering for
-            setResponse(await dispatchApi(api.search.overview.post({
+            await request(api.search.overview.post, {
                 query,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -54,7 +55,7 @@ const OverviewsBase = () => {
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     useEffect(() => {
@@ -70,18 +71,19 @@ const OverviewsBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
         withConfirmDeleteModal(async () => {
             try {
-                await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
-                await onSearch();
+                await dispatchApi(api.overview.del(id), { throwError: true, showError: true });
+                remove(id);
                 showSuccessMessage(t('route.overviews.manager.delete.success'));
             }
             catch (_err) {
@@ -89,7 +91,7 @@ const OverviewsBase = () => {
                 console.warn(_err);
             }
         });
-    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
+    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {
@@ -115,6 +117,6 @@ const OverviewsBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Overviews = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(OverviewsBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));
 };
 export default Overviews;

package/components/routes/templates/TemplateViewer.js

@@ -10,6 +10,7 @@ import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppIn
 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 useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import isEqual from 'lodash-es/isEqual';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
@@ -19,6 +20,7 @@ const TemplateViewer = () => {
     const [params, setParams] = useSearchParams();
     const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [templateList, setTemplateList] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
     const [sessionTemplateList, setSessionTemplateList] = useState([]);
@@ -122,7 +124,7 @@ const TemplateViewer = () => {
             await dispatchApi(api.template.del(selectedTemplate.template_id), {
                 logError: false,
                 showError: true,
-                throwError: false
+                throwError: true
             });
             setSessionTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
                 v.detection != selectedTemplate.detection ||
@@ -130,6 +132,7 @@ const TemplateViewer = () => {
             setTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
                 v.detection != selectedTemplate.detection ||
                 v.type != selectedTemplate.type));
+            showSuccessMessage(t('route.templates.manager.delete.success'));
         });
     }, [
         dispatchApi,
@@ -137,7 +140,9 @@ const TemplateViewer = () => {
         selectedTemplate?.detection,
         selectedTemplate?.template_id,
         selectedTemplate?.type,
-        withConfirmDeleteModal
+        withConfirmDeleteModal,
+        showSuccessMessage,
+        t
     ]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {

package/components/routes/templates/Templates.js

@@ -4,11 +4,13 @@ import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/materia
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 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';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -20,12 +22,13 @@ const TemplatesBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const [searchParams, setSearchParams] = useSearchParams();
-    const { load, remove } = useContext(TuiListMethodContext);
+    const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { showSuccessMessage } = useMySnackbar();
     const { analytics } = useContext(AnalyticContext);
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [types, setTypes] = useState([]);
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
@@ -44,11 +47,11 @@ const TemplatesBase = () => {
             const phraseQuery = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the template should be visible and/or matches the type we are filtering for
             const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' ') || '*'})`;
-            setResponse(await dispatchApi(api.search.template.post({
+            await request(api.search.template.post, {
                 query: `${phraseQuery} AND ${typeQuery}`,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -56,7 +59,7 @@ const TemplatesBase = () => {
         finally {
             setSearching(false);
         }
-    }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, user.username, types, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     // or if the analytic list changes to refresh the disabled state
@@ -77,11 +80,12 @@ const TemplatesBase = () => {
     }, [response, load, analytics]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     useEffect(() => {
         onSearch();
         if (!searchParams.has('offset')) {
@@ -107,10 +111,11 @@ const TemplatesBase = () => {
         await dispatchApi(api.template.del(templateId), {
             logError: false,
             showError: true,
-            throwError: false
+            throwError: true
         });
         remove(templateId);
-    }, [dispatchApi, remove]);
+        showSuccessMessage(t('route.templates.manager.delete.success'));
+    }, [dispatchApi, remove, showSuccessMessage, t]);
     const renderer = useCallback((item, error, className) => (_jsx(TemplateCard, { template: item, error: error, onRemove: removeTemplate, className: className })), [removeTemplate]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', alignSelf: 'start' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
@@ -121,6 +126,6 @@ const TemplatesBase = () => {
         }, onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Templates = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(TemplatesBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "template_id", children: _jsx(TemplatesBase, {}) }) }));
 };
 export default Templates;

package/components/routes/views/Views.js

@@ -5,6 +5,7 @@ import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, T
 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 SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 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';
@@ -12,8 +13,8 @@ import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
 import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { isNull, omitBy, size } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,8 +28,8 @@ const ViewsBase = () => {
     const { t } = useTranslation();
     const { user } = useAppUser();
     const navigate = useNavigate();
-    const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
@@ -39,9 +40,9 @@ const ViewsBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [response, setResponse] = useState(null);
     const [type, setType] = useState(searchParams.get('type') || null);
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
@@ -63,11 +64,11 @@ const ViewsBase = () => {
             const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
             const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
             const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
-            setResponse(await dispatchApi(api.search.view.post({
+            await request(api.search.view.post, {
                 query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -83,7 +84,7 @@ const ViewsBase = () => {
         user.favourite_views,
         type,
         favouritesOnly,
-        dispatchApi,
+        request,
         pageCount,
         offset
     ]);
@@ -102,19 +103,21 @@ const ViewsBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((event, id) => {
         event.preventDefault();
         event.stopPropagation();
         withConfirmDeleteModal(async () => {
             await removeView(id);
-            onSearch();
+            remove(id);
+            showSuccessMessage(t('route.views.manager.delete.success'));
         });
-    }, [onSearch, removeView, withConfirmDeleteModal]);
+    }, [remove, removeView, withConfirmDeleteModal, showSuccessMessage, t]);
     const onFavourite = useCallback(async (event, id) => {
         event.preventDefault();
         if (user.favourite_views?.includes(id)) {
@@ -182,6 +185,6 @@ const ViewsBase = () => {
                         (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(ViewsBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "view_id", children: _jsx(ViewsBase, {}) }) }));
 };
 export default Views;

package/locales/en/translation.json

@@ -448,6 +448,7 @@
     "route.actions.edit": "Edit",
     "route.actions.execute": "Execute",
     "route.actions.manager": "Action Manager",
+    "route.actions.manager.delete.success": "Action removed.",
     "route.actions.name": "Action Name",
     "route.actions.open": "Open Query",
     "route.actions.operation.add": "Add New Operation",
@@ -661,7 +662,7 @@
     "route.overviews.default": "Default",
     "route.overviews.detection": "Choose Detection",
     "route.overviews.manager.delete": "Delete Overview",
-    "route.overviews.manager.delete.success": "Overview Removed.",
+    "route.overviews.manager.delete.success": "Overview removed.",
     "route.overviews.manager.search": "Search Overviews",
     "route.overviews.prompt": "Activate autocomplete using [ctrl + space].",
     "route.overviews.search.prompt": "Search by title, content, analytic or detection.",
@@ -679,6 +680,7 @@
     "route.templates.default": "Default",
     "route.templates.detection": "Choose Detection",
     "route.templates.global": "Global",
+    "route.templates.manager.delete.success": "Template removed.",
     "route.templates.manager.error.action": "Click to open quick fix options",
     "route.templates.manager.error.message": "Invalid Detection",
     "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
@@ -702,6 +704,7 @@
     "route.views.manager": "View Manager",
     "route.views.manager.all": "All",
     "route.views.manager.default": "Default View",
+    "route.views.manager.delete.success": "View removed.",
     "route.views.manager.favourites": "Show favourites only",
     "route.views.manager.global": "Global",
     "route.views.manager.open": "Open View",

package/locales/fr/translation.json

@@ -448,6 +448,7 @@
     "route.actions.edit": "Modifier",
     "route.actions.execute": "Exécuter",
     "route.actions.manager": "Gestion des actions",
+    "route.actions.manager.delete.success": "Action supprimée.",
     "route.actions.name": "Nom de l'action",
     "route.actions.open": "Ouvrir la requête",
     "route.actions.operation.add": "Ajouter une nouvelle opération",
@@ -661,7 +662,7 @@
     "route.overviews.default": "Défaut",
     "route.overviews.detection": "Choisir une détection",
     "route.overviews.manager.delete": "Supprimer la vue d'ensemble",
-    "route.overviews.manager.delete.success": "Vue d'ensemble Supprimée.",
+    "route.overviews.manager.delete.success": "Vue d'ensemble supprimée.",
     "route.overviews.manager.search": "Rechercher les vues d'ensemble",
     "route.overviews.prompt": "Activer l'autocomplétion en utilisant [ctrl + espace].",
     "route.overviews.search.prompt": "Recherche par titre, contenu, clé d'analyse ou de détection.",
@@ -679,6 +680,7 @@
     "route.templates.default": "Défaut",
     "route.templates.detection": "Choisir une détection",
     "route.templates.global": "Global",
+    "route.templates.manager.delete.success": "Modèle supprimé.",
     "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
     "route.templates.manager.error.message": "Détection non valide",
     "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
@@ -702,6 +704,7 @@
     "route.views.manager": "Gérer vue",
     "route.views.manager.all": "Tous",
     "route.views.manager.default": "Vue par défaut",
+    "route.views.manager.delete.success": "Vue supprimée.",
     "route.views.manager.favourites": "Afficher uniquement les favoris",
     "route.views.manager.global": "Global",
     "route.views.manager.open": "Ouvrier la vue",