@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.1040

package/components/hooks/useHitActions.js

@@ -4,8 +4,8 @@ import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const useHitActions = (_hits) => {
     const { showModal } = useContext(ModalContext);
     const { showWarningMessage } = useMySnackbar();
     const { dispatchApi } = useMyApi();
-    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
     const [loading, setLoading] = useState(false);
     const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
     const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false) => {
+    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
         const rationale = skipRationale
-            ? t('rationale.default', { assessment })
+            ? (providedRationale ?? t('rationale.default', { assessment }))
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);

package/components/hooks/useMyApi.d.ts

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

package/components/hooks/useMyPreferences.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Api, Article, Book, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
+import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
 import { Stack } from '@mui/material';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
@@ -24,6 +24,15 @@ const useMyPreferences = () => {
                     icon: _jsx(Dashboard, {})
                 }
             },
+            {
+                type: 'item',
+                element: {
+                    id: 'cases',
+                    i18nKey: 'route.cases',
+                    route: '/cases',
+                    icon: _jsx(BookRounded, {})
+                }
+            },
             {
                 type: 'group',
                 element: {
@@ -276,7 +285,8 @@ const useMyPreferences = () => {
             rightBeforeSearch: (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [rightItems.map(item => (_jsx(Fragment, { children: item.component }, item.id))), _jsx(Classification, {})] }))
         },
         leftnav: {
-            elements: MENU_ITEMS
+            elements: MENU_ITEMS,
+            width: 280
         }
     }), [USER_MENU_ITEMS, ADMIN_MENU_ITEMS, MENU_ITEMS, leftItems, rightItems]);
 };

package/components/hooks/useMySearch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import HitQuickSearch from '@cccsaurora/howler-ui/components/elements/hit/HitQuickSearch';
+import HitPreview from '@cccsaurora/howler-ui/components/elements/hit/HitPreview';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
@@ -40,7 +40,7 @@ const useMySearch = () => {
         },
         headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
         itemRenderer: (item, options) => {
-            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitQuickSearch, { hit: item.item, options: options }) }));
+            return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitPreview, { hit: item.item, options: options }) }));
         }
     }), [navigate, pageCount, t]);
 };

package/components/hooks/useMySitemap.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Article, Book, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
+import { Article, Book, BookRounded, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, Terminal, Topic, Work } from '@mui/icons-material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,6 +24,9 @@ const useMySitemap = () => {
     return useMemo(() => ({
         routes: [
             { path: '/', title: t('route.home'), isRoot: true, icon: _jsx(Dashboard, {}) },
+            { path: '/cases', title: t('route.cases'), isRoot: true, icon: _jsx(BookRounded, {}) },
+            { path: '/cases/:id', title: t('route.cases.view'), breadcrumbs: ['/cases'] },
+            { path: '/cases/:id/*', title: t('route.cases.view'), isLeaf: true, breadcrumbs: ['/cases'] },
             { path: '/admin/users', title: t('route.admin.user.search'), isRoot: true, icon: _jsx(PersonSearch, {}) },
             {
                 path: '/admin/users/:id',

package/components/hooks/useMyTheme.js

@@ -1,9 +1,16 @@
 const DEFAULT_THEME = {
+    components: {
+        MuiChip: {
+            defaultProps: {
+                size: 'small'
+            }
+        }
+    },
     palette: {
         dark: {
             background: {
-                default: '#202020',
-                paper: '#202020'
+                default: '#181818',
+                paper: '#181818'
             },
             primary: {
                 main: '#7DA1DB'

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 { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+type MixedRecords = Hit | Observable | Case;
+/**
+ * Fetches records matching the provided IDs from the hit, observable, 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, observable, 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;
+        }
+        (async () => {
+            const joined = ids.join(' OR ');
+            const result = await dispatchApi(api.v2.search.post('hit,observable,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/routes/403.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const PermissionDeniedPage: FC;
+export default PermissionDeniedPage;

package/components/routes/403.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PersonOff } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { useTranslation } from 'react-i18next';
+const PermissionDeniedPage = () => {
+    const { t } = useTranslation();
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(PersonOff, { color: "secondary", fontSize: "inherit" }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.403.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.403.description') }) })] }));
+};
+export default PermissionDeniedPage;

package/components/routes/403.test.d.ts

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

package/components/routes/403.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import PermissionDeniedPage from './403';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('PermissionDeniedPage (403)', () => {
+    it('should render the 403 title and description', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('403: Access Forbidden')).toBeInTheDocument();
+        expect(screen.getByText('You do not have permission to access this page.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the PersonOff icon', () => {
+        render(_jsx(PermissionDeniedPage, {}), { wrapper: Wrapper });
+        // MUI SVG icons have data-testid attribute
+        expect(document.querySelector('[data-testid="PersonOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/404.test.d.ts

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

package/components/routes/404.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import NotFoundPage from './404';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('NotFoundPage (404)', () => {
+    it('should render the 404 title and description', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByText('404: Not found')).toBeInTheDocument();
+        expect(screen.getByText('The page you are looking for cannot be found...')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should render the LinkOff icon', () => {
+        render(_jsx(NotFoundPage, {}), { wrapper: Wrapper });
+        expect(document.querySelector('[data-testid="LinkOffIcon"]')).toBeInTheDocument();
+    });
+});

package/components/routes/ErrorBoundary.test.d.ts

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

package/components/routes/ErrorBoundary.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import ErrorBoundary from './ErrorBoundary';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: vi.fn(() => null)
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: [] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+const ThrowingComponent = ({ error }) => {
+    throw error;
+};
+describe('ErrorBoundary', () => {
+    it('should render children when no error occurs', () => {
+        render(_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 });
+        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 });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
+});

package/components/routes/ErrorOccured.test.d.ts

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

package/components/routes/ErrorOccured.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { describe, expect, it, vi } from 'vitest';
+import ErrorOccured from './ErrorOccured';
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
+}));
+const mockExecuteFunction = vi.fn(() => null);
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({
+        executeFunction: mockExecuteFunction
+    })
+}));
+vi.mock('plugins/store', () => ({
+    default: { plugins: ['TestPlugin'] }
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ErrorOccured', () => {
+    it('should render the error title and description', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByText('Application Stopped Working')).toBeInTheDocument();
+        expect(screen.getByText('The application stopped working suddenly. If the problem persists please reach out on teams.')).toBeInTheDocument();
+    });
+    it('should render inside PageCenter', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(screen.getByTestId('page-center')).toBeInTheDocument();
+    });
+    it('should execute plugin support functions', () => {
+        render(_jsx(ErrorOccured, {}), { wrapper: Wrapper });
+        expect(mockExecuteFunction).toHaveBeenCalledWith('TestPlugin.support');
+    });
+});

package/components/routes/Logout.test.d.ts

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

package/components/routes/Logout.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import Logout from './Logout';
+const mockHideMenus = vi.fn();
+const mockClear = vi.fn();
+vi.mock('commons/components/app/hooks', () => ({
+    useAppBanner: () => _jsx("div", { "data-testid": "app-banner", children: "Banner" }),
+    useAppLayout: () => ({
+        hideMenus: mockHideMenus
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    default: () => ({
+        clear: mockClear
+    })
+}));
+vi.mock('commons/components/pages/PageCardCentered', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('Logout', () => {
+    const originalLocation = window.location;
+    beforeEach(() => {
+        vi.useFakeTimers();
+        // Mock window.location.replace
+        Object.defineProperty(window, 'location', {
+            value: { ...originalLocation, replace: vi.fn() },
+            writable: true
+        });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+        vi.clearAllMocks();
+    });
+    it('should render the logout message', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(screen.getByText(/Logging out current user/)).toBeInTheDocument();
+    });
+    it('should render the app banner', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(screen.getByText('Banner')).toBeInTheDocument();
+    });
+    it('should hide menus on mount', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(mockHideMenus).toHaveBeenCalled();
+    });
+    it('should clear localStorage and redirect after 2 seconds', () => {
+        render(_jsx(Logout, {}), { wrapper: Wrapper });
+        expect(mockClear).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(2000);
+        expect(mockClear).toHaveBeenCalled();
+        expect(window.location.replace).toHaveBeenCalledWith('/');
+    });
+});

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';
@@ -54,7 +54,7 @@ const ActionEditor = () => {
     }, [triggers]);
     useEffect(() => {
         dispatchApi(api.action.operations.get())
-            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < 1))
+            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < a.roles.length))
             .then(setOperations);
         if (responseQuery) {
             onSearch(responseQuery);
@@ -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/useMyActionFunctions.js

@@ -142,7 +142,10 @@ const useMyActionFunctions = () => {
                     showErrorMessage(_jsx(Trans, { i18nKey: "actions.error", values: { action: actionName, messages: errors.map(error => error.message).join(', ') } }));
                 }
                 if (skipped.length > 0) {
-                    showInfoMessage(_jsx(Trans, { i18nKey: "actions.skipped", values: { action: actionName, messages: skipped.map(skippedAction => skippedAction.message).join(', ') } }));
+                    showInfoMessage(_jsx(Trans, { i18nKey: "actions.skipped", values: {
+                            action: actionName,
+                            messages: skipped.map(skippedAction => skippedAction.message).join(', ')
+                        } }));
                 }
                 if (succeeded.length > 0) {
                     showSuccessMessage(_jsx(Trans, { i18nKey: "actions.succeeded", values: { action: actionName } }));
@@ -160,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

@@ -4,13 +4,15 @@ import { Button, Checkbox, FormControlLabel, FormGroup, IconButton, LinearProgre
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import 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, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { Link, useParams } from 'react-router-dom';
@@ -26,6 +28,8 @@ const ActionDetails = () => {
     const { response, onSearch, loading, setLoading, executeAction, deleteAction, progress, report } = useMyActionFunctions();
     const [operations, setOperations] = useState([]);
     const [action, setAction] = useState();
+    const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const onTriggerChange = useCallback(async (e) => {
         let newTriggers = action.triggers ?? [];
         if (e.target.checked && !newTriggers.includes(e.target.name)) {
@@ -45,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([
@@ -58,7 +66,12 @@ const ActionDetails = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [action?.query]);
-    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 || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: () => deleteAction(action?.action_id), children: t('delete') })), _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 || 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
+    const editRoles = user.roles.includes('automation_basic') || user.roles.includes('automation_advanced');
+    const execRoles = editRoles ||
+        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: 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 &&