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

package/components/app/providers/SearchResponseProvider.test.js

@@ -0,0 +1,406 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook } from '@testing-library/react';
+import { useContext } from 'react';
+import SearchResponseProvider, { SearchResponseContext } from './SearchResponseProvider';
+const TEST_PAGE_SIZE = 25;
+const TEST_TOTAL_COUNT = 100;
+const makeWrapper = (initialResponse) => {
+    const Wrapper = ({ children }) => (_jsx(SearchResponseProvider, { idField: "id", initialResponse: initialResponse, children: children }));
+    return Wrapper;
+};
+const renderProvider = (initialResponse) => {
+    return renderHook(() => useContext(SearchResponseContext), {
+        wrapper: makeWrapper(initialResponse)
+    });
+};
+describe('push', () => {
+    it("should add an item to the response if it doesn't exist", () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push({ id: '1', name: 'test' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [
+                { id: '0', name: 'existing' },
+                { id: '1', name: 'test' }
+            ],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT + 1,
+            removeCount: 0
+        });
+    });
+    it('should replace an item in the response if it already exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'new' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should update total but not add item if the response has the maximum number of items', () => {
+        const items = Array.from({ length: TEST_PAGE_SIZE }, (_, i) => ({ id: i.toString(), name: `item${i}` }));
+        const newItem = { id: TEST_PAGE_SIZE.toString(), name: 'test' };
+        const hook = renderProvider({
+            items,
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.push(newItem);
+        });
+        expect(hook.result.current.response?.items).not.toContainEqual(newItem);
+        expect(hook.result.current.response).toEqual({
+            items,
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT + 1,
+            removeCount: 0
+        });
+    });
+    it('should decrement removeCount if the item does not exist already', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 1
+        });
+        act(() => {
+            hook.result.current.push({ id: '1', name: 'test' });
+        });
+        expect(hook.result.current.response).not.toBeNull();
+        expect(hook.result.current.response.removeCount).toBe(0);
+    });
+    it('should not decrement removeCount if the item already exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'existing' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 1
+        });
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).not.toBeNull();
+        expect(hook.result.current.response.removeCount).toBe(1);
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.push({ id: '0', name: 'test' });
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+});
+describe('remove', () => {
+    it('should remove an item from the response if it exists', () => {
+        const hook = renderProvider({
+            items: [
+                { id: '0', name: 'item0' },
+                { id: '1', name: 'item1' }
+            ],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.remove('0');
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'item1' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT - 1,
+            removeCount: 1
+        });
+    });
+    it('should ignore the remove if the item does not exist', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.remove('1');
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.remove('0');
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+});
+describe('replace', () => {
+    it('should replace an item in the response if it exists', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.replace('0', { id: undefined, name: 'new' });
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'new' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should ignore the replace if the item does not exist', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        act(() => {
+            hook.result.current.replace('1', { id: undefined, name: 'new' });
+        });
+        expect(hook.result.current.response).not.toContainEqual({ id: '1', name: 'new' });
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should keep response null if it is uninitiated', () => {
+        const hook = renderProvider();
+        act(() => {
+            hook.result.current.replace('0', { id: '0', name: 'new' });
+        });
+        expect(hook.result.current.response).toBeNull();
+    });
+    it('should throw error if item id does not match the id provided', () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'old' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        expect(() => act(() => {
+            hook.result.current.replace('0', { id: '1', name: 'new' });
+        })).toThrow(/id does not match/);
+    });
+});
+describe('request', () => {
+    const apiSearchMock = vi.fn();
+    beforeEach(() => {
+        apiSearchMock.mockReset();
+    });
+    it('should update the response with the result of the request', async () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it.for([
+        { description: 'before', offset: 0 },
+        { description: 'the same as', offset: TEST_PAGE_SIZE }
+    ])('should reset removeCount if the offset is $description the current offset', async ({ offset }) => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: TEST_PAGE_SIZE,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: offset
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 0
+        });
+    });
+    it('should not reset removeCount if the offset is after the current offset', async () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: TEST_PAGE_SIZE,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: TEST_PAGE_SIZE * 2
+        };
+        apiSearchMock.mockResolvedValue({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT
+        });
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual({
+            items: [{ id: '1', name: 'new' }],
+            offset: request.offset,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+    });
+    it('should keep response undefined if the request fails', async () => {
+        const hook = renderProvider();
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request).catch(() => { });
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toBeNull();
+    });
+    it('should keep response unchanged if the request fails', async () => {
+        const initialResponse = {
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        };
+        const hook = renderProvider(initialResponse);
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request).catch(() => { });
+        });
+        expect(apiSearchMock).toHaveBeenCalledWith(request);
+        expect(hook.result.current.response).toEqual(initialResponse);
+    });
+    it('should throw an error if the request throws an error', async () => {
+        const hook = renderProvider();
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: 0
+        };
+        apiSearchMock.mockRejectedValue(new Error('Request failed'));
+        await expect(act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        })).rejects.toThrow('Request failed');
+    });
+});
+describe('getSearchRequestData', () => {
+    it.for([
+        { description: 'no remove count', removeCount: 0 },
+        { description: 'with remove count', removeCount: 5 }
+    ])('should modify offset if it is provided - $description', ({ removeCount }) => {
+        const hook = renderProvider({
+            items: [],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: removeCount
+        });
+        const modifiedRequest = hook.result.current.getSearchRequestData({ offset: TEST_PAGE_SIZE });
+        expect(modifiedRequest.offset).toBe(TEST_PAGE_SIZE - removeCount);
+    });
+    it('should not modify offset if it is not provided', () => {
+        const hook = renderProvider({
+            items: [],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const modifiedRequest = hook.result.current.getSearchRequestData({ query: 'value' });
+        expect(modifiedRequest.offset).not.toBeDefined();
+    });
+    it('should not modify offset if response is uninitialised', () => {
+        const hook = renderProvider();
+        const modifiedRequest = hook.result.current.getSearchRequestData({ offset: TEST_PAGE_SIZE });
+        expect(modifiedRequest.offset).toBe(TEST_PAGE_SIZE);
+    });
+});

package/components/app/providers/ViewProvider.test.js

@@ -151,7 +151,10 @@ describe('ViewContext', () => {
         it('should allow users to edit views', async () => {
             const result = await act(async () => hook.result.current('example_view_id', { query: DEFAULT_QUERY }));
             expect(hput).toHaveBeenCalledOnce();
-            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: DEFAULT_QUERY });
+            const [url, body, ...rest] = vi.mocked(hput).mock.calls[0];
+            expect(url).toBe('/api/v1/view/example_view_id');
+            expect(body).toEqual({ query: DEFAULT_QUERY });
+            expect(rest.every(v => v === undefined)).toBe(true);
             expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
         });
     });

package/components/elements/addons/search/SearchPagination.d.ts

@@ -3,7 +3,8 @@ type SearchPaginationProps = Omit<PaginationProps, 'onChange'> & {
     limit: number;
     offset: number;
     total: number;
+    removeCount?: number;
     onChange: (nextOffset: number) => void;
 };
-declare const SearchPagination: ({ limit, offset, total, onChange, ...paginationProps }: SearchPaginationProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchPagination: ({ limit, offset, total, removeCount, onChange, ...paginationProps }: SearchPaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchPagination;

package/components/elements/addons/search/SearchPagination.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pagination } from '@mui/material';
 import { useCallback } from 'react';
-const SearchPagination = ({ limit, offset, total, onChange, ...paginationProps }) => {
+const SearchPagination = ({ limit, offset, total, removeCount, onChange, ...paginationProps }) => {
     const onPageChange = useCallback((_event, nextPage) => {
         onChange(nextPage === 1 ? 0 : (nextPage - 1) * limit);
     }, [limit, onChange]);
-    const count = Math.ceil(total / limit);
-    const page = Math.floor((offset + 1) / limit) + 1;
-    return limit && total && limit < total ? (_jsx(Pagination, { count: count, page: page, onChange: onPageChange, ...paginationProps })) : null;
+    const count = Math.ceil((total + (removeCount ?? 0)) / limit);
+    const page = Math.floor((offset + 1 + (removeCount ?? 0)) / limit) + 1;
+    return limit && total && count > 1 ? (_jsx(Pagination, { count: count, page: page, onChange: onPageChange, ...paginationProps })) : null;
 };
 export default SearchPagination;

package/components/elements/addons/search/SearchTotal.test.js

@@ -38,7 +38,9 @@ describe('SearchTotal', () => {
             expect(container.firstChild).toHaveClass('custom');
         });
         it('passes variant to Typography', () => {
-            const { container } = render(_jsx(SearchTotal, { total: 10, offset: 0, pageLength: 10, variant: "caption" }), { wrapper: Wrapper });
+            const { container } = render(_jsx(SearchTotal, { total: 10, offset: 0, pageLength: 10, variant: "caption" }), {
+                wrapper: Wrapper
+            });
             expect(container.firstChild).toHaveClass('MuiTypography-caption');
         });
     });

package/components/elements/display/ItemManager.d.ts

@@ -1,4 +1,4 @@
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { SearchResponseState } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import type { TuiListItemOnSelect, TuiListItemRenderer } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import type { FC, ReactNode } from 'react';
 interface ItemManagerProps {
@@ -13,7 +13,7 @@ interface ItemManagerProps {
     onSelect?: TuiListItemOnSelect<unknown>;
     phrase: string;
     renderer: TuiListItemRenderer<unknown>;
-    response: HowlerSearchResponse<unknown>;
+    response: SearchResponseState<unknown>;
     searchAdornment?: ReactNode;
     searching: boolean;
     createPrompt?: string;

package/components/elements/display/ItemManager.js

@@ -24,7 +24,7 @@ const ItemManager = ({ aboveSearch, afterSearch, belowSearch, searchFilters, has
                                             mt: -0.5,
                                             borderBottomLeftRadius: theme.shape.borderRadius,
                                             borderBottomRightRadius: theme.shape.borderRadius
-                                        }) }))] }), afterSearch] }), searchFilters, response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: onPageChange })] })), belowSearch, _jsx(TuiList, { onSelection: onSelect, children: renderer }), onCreate && (_jsxs(Fab, { variant: "extended", size: "large", color: "primary", sx: theme => ({
+                                        }) }))] }), afterSearch] }), searchFilters, response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, removeCount: response.removeCount, onChange: onPageChange })] })), belowSearch, _jsx(TuiList, { onSelection: onSelect, children: renderer }), onCreate && (_jsxs(Fab, { variant: "extended", size: "large", color: "primary", sx: theme => ({
                             textTransform: 'none',
                             position: isNarrow ? 'fixed' : 'absolute',
                             right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,

package/components/hooks/useMyApi.d.ts

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

package/components/routes/action/useMyActionFunctions.js

@@ -163,8 +163,11 @@ const useMyActionFunctions = () => {
         deleteAction: useCallback(async (actionId) => {
             setLoading(true);
             try {
-                await dispatchApi(api.action.del(actionId));
-                if (location.pathname.endsWith(actionId)) {
+                const detailedActionView = location.pathname.endsWith(actionId);
+                await dispatchApi(api.action.del(actionId, detailedActionView ? 'wait_for' : undefined), {
+                    throwError: true
+                });
+                if (detailedActionView) {
                     navigate('/action');
                 }
             }

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

@@ -9,6 +9,7 @@ import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/Fle
 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 useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import OperationEntry from '@cccsaurora/howler-ui/components/routes/action/shared/OperationEntry';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useState } from 'react';
@@ -28,6 +29,7 @@ const ActionDetails = () => {
     const [operations, setOperations] = useState([]);
     const [action, setAction] = useState();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const onTriggerChange = useCallback(async (e) => {
         let newTriggers = action.triggers ?? [];
         if (e.target.checked && !newTriggers.includes(e.target.name)) {
@@ -47,6 +49,10 @@ const ActionDetails = () => {
             setLoading(false);
         }
     }, [action, dispatchApi, setLoading]);
+    const onDelete = useCallback(() => withConfirmDeleteModal(async () => {
+        await deleteAction(action?.action_id);
+        showSuccessMessage(t('route.actions.manager.delete.success'));
+    }), [withConfirmDeleteModal, deleteAction, action?.action_id, showSuccessMessage, t]);
     useEffect(() => {
         setLoading(true);
         Promise.all([
@@ -65,7 +71,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: () => 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
+    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: onDelete, 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

@@ -4,13 +4,14 @@ import { Autocomplete, Card, CardContent, CardHeader, Chip, Grid, IconButton, St
 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 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';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 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 { Trans, useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -21,17 +22,17 @@ const ActionSearch = () => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { user } = useAppUser();
-    const { dispatchApi } = useMyApi();
     const { load } = useContext(TuiListMethodContext);
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [searchParams, setSearchParams] = useSearchParams();
     const { deleteAction } = useMyActionFunctions();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     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 [searchModifiers, setSearchModifiers] = useState([]);
     // Search Handler.
     const onSearch = useCallback(async () => {
@@ -50,13 +51,11 @@ const ActionSearch = () => {
             if (searchModifiers.length > 0) {
                 query = `(${query}) AND (triggers:(${searchModifiers.join(' OR ')}))`;
             }
-            const _response = await dispatchApi(api.search.action.post({
+            await request(api.search.action.post, {
                 query,
                 rows: pageCount,
                 offset
-            }));
-            setResponse(_response);
-            load(_response.items.map(u => ({ id: u.action_id, item: u })));
+            });
         }
         catch (e) {
             setHasError(true);
@@ -64,22 +63,29 @@ const ActionSearch = () => {
         finally {
             setSearching(false);
         }
-    }, [dispatchApi, load, offset, pageCount, phrase, searchModifiers, searchParams, setSearchParams]);
+    }, [phrase, setSearchParams, searchParams, searchModifiers, request, pageCount, offset]);
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({ id: item.action_id, item: item })));
+        }
+    }, [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, actionId) => {
         e.preventDefault();
         e.stopPropagation();
         withConfirmDeleteModal(async () => {
             await deleteAction(actionId);
-            onSearch();
+            remove(actionId);
+            showSuccessMessage(t('route.actions.manager.delete.success'));
         });
-    }, [deleteAction, onSearch, withConfirmDeleteModal]);
+    }, [deleteAction, remove, withConfirmDeleteModal, showSuccessMessage, t]);
     // Effect to initialize list of users.
     useEffect(() => {
         onSearch();
@@ -120,6 +126,6 @@ const ActionSearch = () => {
     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 = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(ActionSearch, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "action_id", children: _jsx(ActionSearch, {}) }) }));
 };
 export default ActionSearchProvider;

package/components/routes/analytics/AnalyticDetails.js

@@ -62,7 +62,7 @@ const AnalyticDetails = () => {
     }, [analytic?.analytic_id, dispatchApi]);
     const onDelete = useCallback(() => {
         withConfirmDeleteModal(async () => {
-            await dispatchApi(api.analytic.del(analytic?.analytic_id));
+            await dispatchApi(api.analytic.del(analytic?.analytic_id, 'wait_for'));
             showSuccessMessage(t('route.analytics.deleted'));
             navigate('/analytics');
         });