@cccsaurora/howler-ui 2.19.0-dev.999 → 2.20.0-dev.1352

package/components/hooks/useMyUserFunctions.d.ts

@@ -1,7 +1,8 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 declare const useMyUserFunctions: () => {
     editName: (user: HowlerUser, name: string) => Promise<{
-        name: string;
+        avatar?: string;
+        is_admin?: boolean;
         email: string;
         username: string;
         api_quota?: number;
@@ -16,15 +17,15 @@ declare const useMyUserFunctions: () => {
         favourite_analytics?: string[];
         dashboard?: {
             entry_id: string;
-            type: "view" | "analytic";
+            type: 'view' | 'analytic';
             config: string;
         }[];
         refresh_rate?: number;
-        avatar?: string;
-        is_admin?: boolean;
+        name: string;
     }>;
     editQuota: (user: HowlerUser, quota: string) => Promise<{
-        api_quota: number;
+        avatar?: string;
+        is_admin?: boolean;
         name: string;
         email: string;
         username: string;
@@ -39,16 +40,16 @@ declare const useMyUserFunctions: () => {
         favourite_analytics?: string[];
         dashboard?: {
             entry_id: string;
-            type: "view" | "analytic";
+            type: 'view' | 'analytic';
             config: string;
         }[];
         refresh_rate?: number;
-        avatar?: string;
-        is_admin?: boolean;
+        api_quota: number;
     }>;
     editPassword: (new_pass: string) => Promise<void>;
     addRole: (user: HowlerUser, role: string) => Promise<{
-        roles: string[];
+        avatar?: string;
+        is_admin?: boolean;
         name: string;
         email: string;
         username: string;
@@ -63,16 +64,16 @@ declare const useMyUserFunctions: () => {
         favourite_analytics?: string[];
         dashboard?: {
             entry_id: string;
-            type: "view" | "analytic";
+            type: 'view' | 'analytic';
             config: string;
         }[];
         refresh_rate?: number;
-        avatar?: string;
-        is_admin?: boolean;
+        roles: string[];
     }>;
     addApiKey: () => void;
     removeRole: (user: HowlerUser, role: string) => Promise<{
-        roles: string[];
+        avatar?: string;
+        is_admin?: boolean;
         name: string;
         email: string;
         username: string;
@@ -87,15 +88,15 @@ declare const useMyUserFunctions: () => {
         favourite_analytics?: string[];
         dashboard?: {
             entry_id: string;
-            type: "view" | "analytic";
+            type: 'view' | 'analytic';
             config: string;
         }[];
         refresh_rate?: number;
-        avatar?: string;
-        is_admin?: boolean;
+        roles: string[];
     }>;
     removeApiKey: (user: HowlerUser, apiKey: [string, string[]]) => Promise<{
-        apikeys: [string, string[], string][];
+        avatar?: string;
+        is_admin?: boolean;
         name: string;
         email: string;
         username: string;
@@ -110,15 +111,14 @@ declare const useMyUserFunctions: () => {
         favourite_analytics?: string[];
         dashboard?: {
             entry_id: string;
-            type: "view" | "analytic";
+            type: 'view' | 'analytic';
             config: string;
         }[];
         refresh_rate?: number;
-        avatar?: string;
-        is_admin?: boolean;
+        apikeys: [string, string[], string][];
     }>;
     viewGroups: () => Promise<void>;
-    setDashboard: (dashboard: HowlerUser["dashboard"]) => Promise<void>;
+    setDashboard: (dashboard: HowlerUser['dashboard']) => Promise<void>;
     setRefreshRate: (refresh_rate: number) => Promise<void>;
 };
 export default useMyUserFunctions;

package/components/hooks/{useHitSelection.d.ts → useRecordSelection.d.ts}

@@ -1,8 +1,8 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type React from 'react';
-declare const useHitSelection: () => {
+declare const useRecordSelection: () => {
     lastSelected: string;
     setLastSelected: React.Dispatch<React.SetStateAction<string>>;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/{useHitSelection.js → useRecordSelection.js}

@@ -1,20 +1,14 @@
-import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const useHitSelection = () => {
-    const navigate = useNavigate();
-    const { setItems } = useAppBreadcrumbs();
-    const { routes } = useMySitemap();
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+const useRecordSelection = () => {
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const [lastSelected, setLastSelected] = useState(null);
     const onClick = useCallback((e, hit) => {
@@ -47,32 +41,17 @@ const useHitSelection = () => {
             e.stopPropagation();
             return;
         }
-        if (hit.howler.is_bundle) {
-            const searchRoute = routes.find(_route => _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, '$1')));
-            const newBreadcrumb = {
-                ...searchRoute,
-                path: location.pathname + location.search
-            };
-            setItems([{ route: newBreadcrumb, matcher: null }]);
-            navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
-            clearSelectedHits(hit.howler.id);
-        }
-        else {
-            clearSelectedHits(hit.howler.id);
-            setSelected(hit.howler.id);
-        }
+        clearSelectedHits(hit.howler.id);
+        setSelected(hit.howler.id);
     }, [
         addHitToSelection,
         clearSelectedHits,
         lastSelected,
-        navigate,
         removeHitFromSelection,
-        response,
-        routes,
+        response?.items,
         selectedHits,
-        setItems,
         setSelected
     ]);
     return { lastSelected, setLastSelected, onClick };
 };
-export default useHitSelection;
+export default useRecordSelection;

package/components/hooks/useRelatedRecords.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+type MixedRecords = Hit | Event | Case;
+/**
+ * Fetches records matching the provided IDs from the hit, event, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+declare const useRelatedRecords: <T = MixedRecords>(ids: string[], enabled?: boolean) => WithMetadata<T>[];
+export default useRelatedRecords;

package/components/hooks/useRelatedRecords.js

@@ -0,0 +1,32 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+/**
+ * Fetches records matching the provided IDs from the hit, event, and case indexes.
+ *
+ * @param ids - List of howler.id / case_id values to look up.
+ * @param enabled - When false the fetch is skipped (e.g. while a panel is closed).
+ */
+const useRelatedRecords = (ids, enabled = true) => {
+    const { dispatchApi } = useMyApi();
+    const [records, setRecords] = useState([]);
+    useEffect(() => {
+        if (!enabled || ids.length === 0) {
+            if (records.length > 0) {
+                setRecords([]);
+            }
+            return;
+        }
+        void (async () => {
+            const joined = ids.join(' OR ');
+            const result = await dispatchApi(api.v2.search.post(['hit', 'event', 'case'], {
+                query: `howler.id:(${joined}) OR case_id:(${joined})`
+            }), { throwError: false, showError: true });
+            if (result) {
+                setRecords(result.items);
+            }
+        })();
+    }, [dispatchApi, enabled, ids, records.length]);
+    return records;
+};
+export default useRelatedRecords;

package/components/logins/Login.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, Container, Stack, styled } from '@mui/material';
 import { useAppBanner } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';

package/components/logins/auth/OAuthLogin.js

@@ -16,7 +16,7 @@ const OAuthLogin = ({ providers }) => {
     useEffect(() => {
         if (searchParams.get('code')) {
             setButtonLoading(true);
-            doOAuth().finally(() => setButtonLoading(false));
+            void doOAuth().finally(() => setButtonLoading(false));
         }
     }, [doOAuth, searchParams]);
     const nonce = useMemo(() => Math.pow(Date.now(), 1 + Math.random()).toString(16), []);

package/components/logins/hooks/useLogin.js

@@ -70,14 +70,14 @@ const useLogin = () => {
             showErrorMessage(t('user.login.failed'));
         }
         else if (saveLoginCredential(userCredential)) {
-            getUser();
+            void getUser();
         }
     }, [dispatchApi, getUser, showErrorMessage, t]);
     // OAuth login flow.
     const doOAuth = useCallback(async () => {
         const userCredential = await dispatchApi(api.auth.login.get(searchParams));
         if (saveLoginCredential(userCredential)) {
-            getUser();
+            void getUser();
         }
     }, [dispatchApi, searchParams, getUser]);
     // login service.

package/components/routes/ErrorBoundary.d.ts

@@ -1,14 +1,3 @@
-import React, { type PropsWithChildren } from 'react';
-declare class ErrorBoundary extends React.Component<PropsWithChildren<{}>, {
-    hasError: boolean;
-    error: Error;
-}> {
-    constructor(props: any);
-    static getDerivedStateFromError(error: any): {
-        hasError: boolean;
-        error: any;
-    };
-    componentDidCatch(error: Error): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
-}
+import { type PropsWithChildren } from 'react';
+declare const ErrorBoundary: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export default ErrorBoundary;

package/components/routes/ErrorBoundary.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpandMore } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
 import React, {} from 'react';
+import { useLocation } from 'react-router-dom';
 import ErrorOccured from './ErrorOccured';
-class ErrorBoundary extends React.Component {
+class ErrorBoundaryComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false, error: null };
@@ -14,6 +15,12 @@ class ErrorBoundary extends React.Component {
     componentDidCatch(error) {
         this.setState({ hasError: true, error: error });
     }
+    componentDidUpdate(previousProps) {
+        console.log(previousProps, this.props);
+        if (this.props.locationKey !== previousProps.locationKey && this.state.hasError) {
+            this.setState({ hasError: false, error: null });
+        }
+    }
     render() {
         if (this.state.hasError) {
             return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
@@ -21,4 +28,8 @@ class ErrorBoundary extends React.Component {
         return this.props.children;
     }
 }
+const ErrorBoundary = ({ children }) => {
+    const location = useLocation();
+    return _jsx(ErrorBoundaryComponent, { locationKey: location.key, children: children });
+};
 export default ErrorBoundary;

package/components/routes/ErrorBoundary.test.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import ErrorBoundary from './ErrorBoundary';
 vi.mock('commons/components/pages/PageCenter', () => ({
@@ -20,24 +22,45 @@ const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children:
 const ThrowingComponent = ({ error }) => {
     throw error;
 };
+const RouteContent = () => {
+    const location = useLocation();
+    if (location.pathname === '/broken') {
+        return _jsx(ThrowingComponent, { error: new Error('Broken route') });
+    }
+    return _jsx("div", { children: "Recovered route" });
+};
+const NavigationButton = () => {
+    const navigate = useNavigate();
+    return _jsx("button", { onClick: () => navigate('/recovered'), children: "Navigate away" });
+};
 describe('ErrorBoundary', () => {
     it('should render children when no error occurs', () => {
-        render(_jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx("div", { children: "Child content" }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Child content')).toBeInTheDocument();
     });
     it('should render error UI when a child throws', () => {
         const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
         const testError = new Error('Test error message');
         testError.stack = 'Error: Test error message\n    at TestComponent';
-        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Test error message')).toBeInTheDocument();
         consoleSpy.mockRestore();
     });
     it('should display the error page title when an error occurs', () => {
         const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
         const testError = new Error('Something went wrong');
-        render(_jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }), { wrapper: Wrapper });
+        render(_jsx(MemoryRouter, { children: _jsx(ErrorBoundary, { children: _jsx(ThrowingComponent, { error: testError }) }) }), { wrapper: Wrapper });
         expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
         consoleSpy.mockRestore();
     });
+    it('should reset after navigating away from an error', async () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+        const user = userEvent.setup();
+        render(_jsxs(MemoryRouter, { initialEntries: ['/broken'], children: [_jsx(NavigationButton, {}), _jsx(ErrorBoundary, { children: _jsx(RouteContent, {}) })] }), { wrapper: Wrapper });
+        expect(screen.getByText('Broken route')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Navigate away' }));
+        expect(screen.queryByText('Broken route')).not.toBeInTheDocument();
+        expect(screen.getByText('Recovered route')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
 });

package/components/routes/action/edit/ActionEditor.js

@@ -7,7 +7,7 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitQuery from '@cccsaurora/howler-ui/components/routes/hits/search/HitQuery';
+import RecordQuery from '@cccsaurora/howler-ui/components/routes/hits/search/RecordQuery';
 import { difference, uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -53,11 +53,11 @@ const ActionEditor = () => {
         }
     }, [triggers]);
     useEffect(() => {
-        dispatchApi(api.action.operations.get())
+        void dispatchApi(api.action.operations.get())
             .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < a.roles.length))
             .then(setOperations);
         if (responseQuery) {
-            onSearch(responseQuery);
+            void onSearch(responseQuery);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatchApi, getHitFields]);
@@ -70,7 +70,7 @@ const ActionEditor = () => {
     useEffect(() => {
         if (params.id) {
             setLoading(true);
-            dispatchApi(api.search.action.post({
+            void dispatchApi(api.search.action.post({
                 query: `action_id:${params.id}`,
                 rows: 1
             }), { throwError: false }).then(result => {
@@ -84,7 +84,7 @@ const ActionEditor = () => {
                 setSearchParams(new URLSearchParams(searchParams), { replace: true });
                 setUserOperations(existingAction.operations);
                 setLoading(false);
-                onSearch(existingAction.query);
+                void onSearch(existingAction.query);
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -102,7 +102,7 @@ const ActionEditor = () => {
                                         : disabled && userOperations.length > 0
                                             ? t('route.actions.trigger.disabled.explanation')
                                             : null, children: component }, trigger));
-                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(HitQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
+                            }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "end", sx: { mb: -1 }, children: [_jsx(Typography, { sx: theme => ({ color: theme.palette.text.disabled, fontStyle: 'italic', mb: 0.5 }), variant: "body2", children: t('hit.search.prompt') }), _jsx(SocketBadge, { size: "small" })] }), _jsx(RecordQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
                             color: theme.palette.text.secondary,
                             fontSize: '0.9em',
                             fontStyle: 'italic',

package/components/routes/action/shared/OperationEntry.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Delete } from '@mui/icons-material';
 import { Box, Card, CardContent, Chip, Divider, IconButton, ListItemText, MenuItem, Select, Stack } from '@mui/material';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';

package/components/routes/action/shared/OperationStep.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, AlertTitle, Autocomplete, CircularProgress, InputAdornment, LinearProgress, Stack, TextField } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';

package/components/routes/action/useMyActionFunctions.js

@@ -107,7 +107,7 @@ const useMyActionFunctions = () => {
                 setLoading(false);
                 setRequestId(null);
                 setProgress([0, 0]);
-                onSearch(query);
+                void onSearch(query);
             }
         }, [dispatchApi, onSearch, showErrorMessage, t]),
         executeAction: useCallback(async (actionId, query) => {
@@ -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,16 +49,20 @@ 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([
+        void Promise.all([
             dispatchApi(api.action.operations.get()).then(setOperations),
             dispatchApi(api.action.get(params.id).then(setAction))
         ]).finally(() => setLoading(false));
     }, [dispatchApi, params.id, setLoading]);
     useEffect(() => {
         if (action?.query) {
-            onSearch(action?.query);
+            void onSearch(action?.query);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [action?.query]);
@@ -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 &&