@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/components/routes/ErrorOccured.test.js

@@ -5,9 +5,13 @@ 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 })
-}));
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        PageCenter: ({ children }) => _jsx("div", { id: "page-center", children: children })
+    };
+});
 const mockExecuteFunction = vi.fn(() => null);
 vi.mock('react-pluggable', () => ({
     usePluginStore: () => ({

package/components/routes/Logout.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container, Stack, Typography, styled } from '@mui/material';
-import { useAppBanner, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';
+import { PageCardCentered, useAppLayout } from '@tui/core';
+import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useTranslation } from 'react-i18next';
 const LogWrap = styled('div')(() => ({
@@ -22,7 +22,6 @@ const InjectCss = styled(Stack)(({ theme }) => ({
 }));
 const Logout = () => {
     const { t } = useTranslation();
-    const banner = useAppBanner();
     const layout = useAppLayout();
     const localStorage = useMyLocalStorage();
     // hide topnav and leftnav on logout.
@@ -32,6 +31,6 @@ const Logout = () => {
         localStorage.clear();
         window.location.replace('/');
     }, 2000);
-    return (_jsx(Container, { component: "main", maxWidth: "xs", children: _jsx(InjectCss, { direction: "column", alignItems: "center", children: _jsx(PageCardCentered, { children: _jsxs(LogWrap, { children: [banner, _jsx(Box, { m: 2 }), _jsx(Typography, { children: t('page.logout') })] }) }) }) }));
+    return (_jsx(Container, { component: "main", maxWidth: "xs", children: _jsx(InjectCss, { direction: "column", alignItems: "center", children: _jsx(PageCardCentered, { children: _jsxs(LogWrap, { children: [_jsx(AppBrand, { application: "howler", variant: "banner-vertical", size: "large" }), _jsx(Box, { m: 2 }), _jsx(Typography, { children: t('page.logout') })] }) }) }) }));
 };
 export default Logout;

package/components/routes/Logout.test.js

@@ -7,20 +7,21 @@ 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('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        useAppLayout: () => ({
+            hideMenus: mockHideMenus
+        }),
+        PageCardCentered: ({ children }) => _jsx("div", { children: children })
+    };
+});
 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;
@@ -41,9 +42,9 @@ describe('Logout', () => {
         render(_jsx(Logout, {}), { wrapper: Wrapper });
         expect(screen.getByText(/Logging out current user/)).toBeInTheDocument();
     });
-    it('should render the app banner', () => {
+    it('should render the application brand', () => {
         render(_jsx(Logout, {}), { wrapper: Wrapper });
-        expect(screen.getByText('Banner')).toBeInTheDocument();
+        expect(screen.getByAltText('howler logo')).toBeInTheDocument();
     });
     it('should hide menus on mount', () => {
         render(_jsx(Logout, {}), { wrapper: Wrapper });

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, PlayCircleOutline, Save } from '@mui/icons-material';
 import { Button, Card, CardContent, Checkbox, CircularProgress, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { PageCenter, useAppUser } from '@tui/core';
 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 { 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';
@@ -13,7 +12,7 @@ import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router';
 import { operationReady } from '@cccsaurora/howler-ui/utils/actionUtils';
 import QueryResultText from '../../../elements/display/QueryResultText';
 import ActionReportDisplay from '../shared/ActionReportDisplay';
@@ -33,15 +32,17 @@ const ActionEditor = () => {
     const [name, setName] = useState('');
     const [userOperations, setUserOperations] = useState([]);
     const [triggers, setTriggers] = useState([]);
+    const canManageTriggers = (user.roles ?? []).includes('automation_advanced');
     const availableOperations = useMemo(() => operations.filter(o => !userOperations.some(uo => uo.operation_id === o.id)), [operations, userOperations]);
+    const userOperationsReady = useMemo(() => userOperations.every(userOperation => operationReady(userOperation?.data_json, operations.find(candidate => candidate.id === userOperation.operation_id))), [operations, userOperations]);
     const onActionChange = useCallback((index) => (a) => {
         setUserOperations(_userActions => {
             _userActions.splice(index, 1, a);
             return [..._userActions];
         });
         const newOperation = operations.find(op => op.id === a.operation_id);
-        setTriggers(triggers.filter(_trigger => newOperation.triggers.includes(_trigger)));
-    }, [operations, triggers]);
+        setTriggers(currentTriggers => newOperation ? currentTriggers.filter(trigger => newOperation.triggers.includes(trigger)) : []);
+    }, [operations]);
     const onActionDelete = useCallback((index) => () => setUserOperations(_userActions => _userActions.filter((__, _index) => _index !== index)), []);
     const _submitAction = useCallback(() => submitAction(responseQuery, userOperations), [responseQuery, submitAction, userOperations]);
     const onTriggerChange = useCallback(async (e) => {
@@ -54,7 +55,7 @@ const ActionEditor = () => {
     }, [triggers]);
     useEffect(() => {
         void dispatchApi(api.action.operations.get())
-            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < a.roles.length))
+            .then(_operations => (_operations ?? []).filter(a => difference(a.roles, user.roles ?? []).length < a.roles.length))
             .then(setOperations);
         if (responseQuery) {
             void onSearch(responseQuery);
@@ -79,30 +80,32 @@ const ActionEditor = () => {
                     return;
                 }
                 const existingAction = result.items[0];
-                setName(existingAction.name);
-                searchParams.set('query', existingAction.query);
+                if (!existingAction) {
+                    setLoading(false);
+                    return;
+                }
+                const query = existingAction.query ?? '';
+                setName(existingAction.name ?? '');
+                searchParams.set('query', query);
                 setSearchParams(new URLSearchParams(searchParams), { replace: true });
-                setUserOperations(existingAction.operations);
+                setUserOperations(existingAction.operations ?? []);
                 setLoading(false);
-                void onSearch(existingAction.query);
+                void onSearch(query);
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatchApi, params.id]);
-    return (_jsxs(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: [_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.actions.name'), size: "small", disabled: loading, value: name, onChange: e => setName(e.target.value), fullWidth: true }), _jsx(Button, { variant: "outlined", size: "small", startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Save, {}), sx: { minWidth: '150px' }, disabled: !name ||
-                                    loading ||
-                                    userOperations.length < 1 ||
-                                    userOperations.some(a => !operationReady(a?.data_json, operations.find(_a => _a.id === a.operation_id))), onClick: () => saveAction(name, responseQuery, userOperations, triggers), children: t('route.actions.save') })] }), _jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, ml: -1, mr: -1, children: uniq(operations.flatMap(op => op.triggers)).map(trigger => {
-                                const disabled = !user.roles.includes('automation_advanced') ||
+    return (_jsxs(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: [_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.actions.name'), size: "small", disabled: loading, value: name, onChange: e => setName(e.target.value), fullWidth: true }), _jsx(Button, { variant: "outlined", size: "small", startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Save, {}), sx: { minWidth: '150px' }, disabled: !name || loading || userOperations.length < 1 || !userOperationsReady, onClick: () => saveAction(name, responseQuery, userOperations, triggers), children: t('route.actions.save') })] }), _jsx(FormGroup, { children: _jsx(Stack, { direction: "row", spacing: 1, ml: -1, mr: -1, children: uniq(operations.flatMap(op => op.triggers)).map(trigger => {
+                                const disabled = !canManageTriggers ||
                                     userOperations.length < 1 ||
                                     !userOperations.every(userOperation => operations.find(operation => operation.id === userOperation.operation_id)?.triggers.includes(trigger));
                                 const component = (_jsx(FormControlLabel, { disabled: disabled, control: _jsx(Checkbox, { sx: { mr: 0.5 }, name: trigger, onChange: onTriggerChange, checked: triggers?.includes(trigger) ?? false }), label: t(`route.actions.trigger.${trigger}`) }, trigger));
-                                return (_jsx(Tooltip, { title: !user.roles.includes('automation_advanced')
+                                return (_jsx(Tooltip, { title: !canManageTriggers
                                         ? t('route.actions.trigger.disabled.permissions')
                                         : 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(RecordQuery, { 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 ?? 0, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
                             color: theme.palette.text.secondary,
                             fontSize: '0.9em',
                             fontStyle: 'italic',
@@ -111,8 +114,11 @@ const ActionEditor = () => {
                         }), variant: "body2", children: t('route.actions.search.warning') })), loading &&
                         (progress[1] > 0 ? (_jsx(LinearProgress, { variant: "determinate", value: (progress[0] / progress[1]) * 100, valueBuffer: ((progress[0] + 10) / progress[1]) * 100 })) : (_jsx(LinearProgress, {}))), report && _jsx(ActionReportDisplay, { report: report, operations: operations })] }), operations.length > 0 && (_jsxs(Stack, { spacing: 1, mt: 1, children: [userOperations.map((a, index) => {
                         const operation = operations.find(_operation => _operation.id === a.operation_id);
-                        if (howlerPluginStore.operations.includes(a.operation_id)) {
-                            return pluginStore.executeFunction(`operation.${a.operation_id}`, {
+                        if (!operation) {
+                            return null;
+                        }
+                        if (howlerPluginStore.operations.includes(operation.id)) {
+                            return pluginStore.executeFunction(`operation.${operation.id}`, {
                                 operation,
                                 operations: [operation, ...availableOperations],
                                 query: responseQuery,
@@ -121,17 +127,19 @@ const ActionEditor = () => {
                                 values: a.data_json
                             });
                         }
-                        return (_jsx(OperationEntry, { query: responseQuery, operation: operation, operations: [operation, ...availableOperations], values: a.data_json, onChange: onActionChange(index), onDelete: onActionDelete(index) }, a.operation_id));
-                    }), userOperations.length < operations.length && (_jsx(Card, { variant: "outlined", sx: { flex: 1 }, children: _jsx(CardContent, { sx: { paddingBottom: '16px !important' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body1", color: !response && 'text.secondary', children: t('route.actions.operation.add') }), _jsx(IconButton, { size: "small", disabled: !response, onClick: () => setUserOperations(_userActions => [
-                                            ..._userActions,
-                                            {
-                                                operation_id: operations.find(a => !_userActions.some(_a => _a.operation_id === a.id)).id,
-                                                data_json: '{}'
+                        return (_jsx(OperationEntry, { query: responseQuery, operation: operation, operations: [operation, ...availableOperations], values: a.data_json, onChange: onActionChange(index), onDelete: onActionDelete(index) }, operation.id));
+                    }), userOperations.length < operations.length && (_jsx(Card, { variant: "outlined", sx: { flex: 1 }, children: _jsx(CardContent, { sx: { paddingBottom: '16px !important' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body1", color: !response ? 'text.secondary' : undefined, children: t('route.actions.operation.add') }), _jsx(IconButton, { size: "small", disabled: !response, onClick: () => {
+                                            const nextOperation = operations.find(operation => !userOperations.some(userOperation => userOperation.operation_id === operation.id));
+                                            if (!nextOperation) {
+                                                return;
                                             }
-                                        ]), children: _jsx(Add, {}) })] }) }) })), operations.length > 0 && !location.pathname.endsWith('/edit') && (_jsx(Button, { variant: "outlined", color: "success", sx: { alignSelf: 'start' }, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : _jsx(PlayCircleOutline, {}), disabled: !responseQuery ||
-                            !response ||
-                            loading ||
-                            userOperations.length < 1 ||
-                            userOperations.some(a => !operationReady(a?.data_json, operations.find(_a => _a.id === a.operation_id))), onClick: _submitAction, children: t('route.actions.execute') }))] }))] }));
+                                            setUserOperations(currentUserOperations => [
+                                                ...currentUserOperations,
+                                                {
+                                                    operation_id: nextOperation.id,
+                                                    data_json: '{}'
+                                                }
+                                            ]);
+                                        }, children: _jsx(Add, {}) })] }) }) })), operations.length > 0 && !location.pathname.endsWith('/edit') && (_jsx(Button, { variant: "outlined", color: "success", sx: { alignSelf: 'start' }, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : _jsx(PlayCircleOutline, {}), disabled: !responseQuery || !response || loading || userOperations.length < 1 || !userOperationsReady, onClick: _submitAction, children: t('route.actions.execute') }))] }))] }));
 };
 export default ActionEditor;

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

@@ -3,7 +3,7 @@ import { ErrorOutline, ExpandMore, InfoOutlined, TaskAltOutlined } from '@mui/ic
 import { Accordion, AccordionDetails, AccordionSummary, Alert, AlertTitle, Divider, Stack, Typography } from '@mui/material';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const ActionReportDisplay = ({ report, operations }) => {
     const { t } = useTranslation();
     return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Accordion, { variant: "outlined", defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsx(Typography, { children: t('route.actions.report') }) }), _jsx(AccordionDetails, { children: Object.entries(report).map(([operationId, _reports]) => {

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

@@ -22,8 +22,8 @@ const OperationEntry = ({ operation, operations, onChange, onDelete, query, read
                                             .map(_operation => (_jsx(MenuItem, { value: _operation?.id, children: _jsx(ListItemText, { primary: _operation.i18nKey ? t(_operation.i18nKey) : _operation.title, secondary: _operation.description?.short }) }, _operation?.id))) }), operation.triggers.map(_trigger => (_jsx(Chip, { size: "small", label: t(`route.actions.trigger.${_trigger}`), sx: { alignSelf: 'start' } }, _trigger)))] }), _jsx(Divider, { flexItem: true, orientation: "vertical" }), _jsx(Box, { flex: 1, sx: { '& pre': { whiteSpace: 'normal' } }, children: _jsx(Markdown, { md: operation.description?.long }) }), !readonly && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true, orientation: "vertical" }), _jsx(IconButton, { onClick: onDelete, children: _jsx(Delete, {}) })] }))] }), _jsx(Divider, { orientation: "horizontal" }), operation.steps
                         .filter((_, index, arr) => (index > 0 ? checkArgsAreFilled(arr[index - 1], values) : true))
                         .map(step => {
-                        return (_jsx(OperationStep, { readonly: readonly, step: step, query: query, values: values, setValues: _values => onChange({
-                                operation_id: operation?.id,
+                        return (_jsx(OperationStep, { readonly: readonly, step: step, query: query, values: values, setValues: _values => onChange?.({
+                                operation_id: operation.id,
                                 data_json: _values
                             }) }, Object.keys(step.args).join('')));
                     })] }) }) }, operation?.id)) : null;

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

@@ -5,7 +5,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { capitalize } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { checkArgsAreFilled, getArgsByContext, getOptionsByContext } from '@cccsaurora/howler-ui/utils/actionUtils';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
@@ -14,16 +14,16 @@ const OperationStep = ({ step, query, values, setValues, readonly, loading }) =>
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const [validating, setValidating] = useState(false);
-    const [warnResponse, setWarnResponse] = useState(null);
-    const [errorResponse, setErrorResponse] = useState(null);
+    const [warnResponse, setWarnResponse] = useState();
+    const [errorResponse, setErrorResponse] = useState();
     const filled = useMemo(() => checkArgsAreFilled(step, values), [step, values]);
-    const validationStatus = useMemo(() => errorResponse?.total > 0
+    const validationStatus = errorResponse?.total
         ? 'error'
-        : warnResponse?.total > 0
+        : warnResponse?.total
             ? 'warning'
             : errorResponse || warnResponse
                 ? 'success'
-                : null, [errorResponse, warnResponse]);
+                : null;
     const args = useMemo(() => getArgsByContext(step.args, values), [step.args, values]);
     const parsedValues = useMemo(() => JSON.parse(values), [values]);
     /**
@@ -78,10 +78,10 @@ const OperationStep = ({ step, query, values, setValues, readonly, loading }) =>
                     return (_jsx(Autocomplete, { disablePortal: true, options: opts, disabled: readonly || loading, value: parsedValues?.[arg] || '', renderInput: params => (_jsx(TextField, { ...params, InputProps: {
                                 ...params.InputProps,
                                 startAdornment: loading && (_jsx(InputAdornment, { position: "start", children: _jsx(CircularProgress, { size: 24 }) }))
-                            }, label: getLabel(arg) })), onChange: (_, value) => setValues(JSON.stringify({ ...parsedValues, [arg]: value })) }, arg));
+                            }, label: getLabel(arg) })), onChange: (_, value) => setValues?.(JSON.stringify({ ...parsedValues, [arg]: value })) }, arg));
                 }
                 else {
-                    return (_jsx(TextField, { disabled: readonly, value: parsedValues?.[arg] || '', onChange: e => setValues(JSON.stringify({ ...parsedValues, [arg]: e.target.value })), label: getLabel(arg) }, arg));
+                    return (_jsx(TextField, { disabled: readonly, value: parsedValues?.[arg] || '', onChange: e => setValues?.(JSON.stringify({ ...parsedValues, [arg]: e.target.value })), label: getLabel(arg) }, arg));
                 }
             }), filled && (_jsxs(_Fragment, { children: [validating && _jsx(LinearProgress, {}), validationStatus && (_jsxs(Alert, { variant: "outlined", severity: validationStatus, sx: {
                             '& > code': { fontSize: '0.9em' },
@@ -94,9 +94,11 @@ const OperationStep = ({ step, query, values, setValues, readonly, loading }) =>
                             }
                         }, children: [_jsx(AlertTitle, { children: t((validationStatus === 'error' ? step.validation.error?.message : step.validation.warn?.message) ??
                                     `route.actions.alert.${validationStatus}`, {
-                                    count: validationStatus === 'error' ? errorResponse.total : warnResponse?.total
+                                    count: validationStatus === 'error' ? (errorResponse.total ?? 0) : warnResponse?.total
                                 }) }), validationStatus !== 'success' && (_jsx(Link, { to: `/hits?query=${encodeURIComponent(errorResponse?.total
                                     ? substitute(step.validation.error.query)
-                                    : warnResponse?.total && substitute(step.validation.warn.query))}`, children: errorResponse?.total ? (_jsx("code", { children: substitute(step.validation.error.query) })) : (warnResponse?.total && _jsx("code", { children: substitute(step.validation.warn.query) })) }))] }))] }))] }));
+                                    : warnResponse?.total
+                                        ? substitute(step.validation.warn.query)
+                                        : '')}`, children: errorResponse?.total ? (_jsx("code", { children: substitute(step.validation.error.query) })) : (warnResponse?.total && _jsx("code", { children: substitute(step.validation.warn.query) })) }))] }))] }))] }));
 };
 export default OperationStep;

package/components/routes/action/useMyActionFunctions.d.ts

@@ -5,10 +5,10 @@ import type { Operation } from '@cccsaurora/howler-ui/models/entities/generated/
 declare const useMyActionFunctions: () => {
     loading: boolean;
     setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    response: HowlerSearchResponse<Hit>;
-    setResponse: import("react").Dispatch<import("react").SetStateAction<HowlerSearchResponse<Hit>>>;
+    response: HowlerSearchResponse<Hit> | undefined;
+    setResponse: import("react").Dispatch<import("react").SetStateAction<HowlerSearchResponse<Hit> | undefined>>;
     responseQuery: string;
-    report: ActionReport;
+    report: ActionReport | undefined;
     progress: [number, number];
     onSearch: (query: string) => Promise<void>;
     saveAction: (name: string, query: string, operations: Operation[], triggers: string[]) => Promise<void>;

package/components/routes/action/useMyActionFunctions.js

@@ -8,7 +8,7 @@ import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar'
 import { useSnackbar } from 'notistack';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import { v4 as uuid } from 'uuid';
 const useMyActionFunctions = () => {
     const { t } = useTranslation();
@@ -20,10 +20,10 @@ const useMyActionFunctions = () => {
     const params = useParams();
     const { addListener, removeListener } = useContext(SocketContext);
     const [loading, setLoading] = useState(false);
-    const [response, setResponse] = useState(null);
+    const [response, setResponse] = useState();
     const [responseQuery, setResponseQuery] = useState('');
     const [progress, setProgress] = useState([0, 0]);
-    const [requestId, setRequestId] = useState(null);
+    const [requestId, setRequestId] = useState();
     const [report, setReport] = useState();
     const handler = useCallback((data) => {
         if (data.type === 'action' && data.request_id === requestId) {
@@ -67,7 +67,7 @@ const useMyActionFunctions = () => {
                         operations
                     }), { showError: true, throwError: false });
                     if (result) {
-                        navigate(`/action/${params.id}`);
+                        void navigate(`/action/${params.id}`);
                     }
                 }
                 else {
@@ -79,7 +79,7 @@ const useMyActionFunctions = () => {
                         triggers
                     }), { showError: true, throwError: false });
                     if (newAction) {
-                        navigate(`/action/${newAction.action_id}`);
+                        void navigate(`/action/${newAction.action_id}`);
                     }
                 }
             }
@@ -95,7 +95,7 @@ const useMyActionFunctions = () => {
             setLoading(true);
             const reqId = uuid();
             setRequestId(reqId);
-            setReport(null);
+            setReport(undefined);
             try {
                 setReport(await dispatchApi(api.action.execute.post({
                     request_id: reqId,
@@ -105,7 +105,7 @@ const useMyActionFunctions = () => {
             }
             finally {
                 setLoading(false);
-                setRequestId(null);
+                setRequestId(undefined);
                 setProgress([0, 0]);
                 void onSearch(query);
             }
@@ -114,11 +114,12 @@ const useMyActionFunctions = () => {
             setLoading(true);
             const reqId = uuid();
             setRequestId(reqId);
-            setReport(null);
+            setReport(undefined);
             let key = null;
             try {
-                const action = api.search.action.post({ query: `action_id:${actionId}`, rows: 1 });
-                key = showInfoMessage(_jsxs(Stack, { spacing: 1, width: "100%", mb: -2, pb: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, px: "20px", pt: "6px", pb: "2px", children: [_jsx(Terminal, { fontSize: "small", sx: { mr: 2 } }), _jsx("span", { children: _jsx(Trans, { i18nKey: "actions.running", values: { action: (await action).items[0]?.name || t('unknown') } }) })] }), _jsx(LinearProgress, { color: "inherit", sx: theme => ({ borderRadius: theme.shape.borderRadius }) })] }), 0, {
+                const actionResponse = await api.search.action.post({ query: `action_id:${actionId}`, rows: 1 });
+                const actionName = actionResponse?.items[0]?.name ?? t('unknown');
+                key = showInfoMessage(_jsxs(Stack, { spacing: 1, width: "100%", mb: -2, pb: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, px: "20px", pt: "6px", pb: "2px", children: [_jsx(Terminal, { fontSize: "small", sx: { mr: 2 } }), _jsx("span", { children: _jsx(Trans, { i18nKey: "actions.running", values: { action: actionName } }) })] }), _jsx(LinearProgress, { color: "inherit", sx: theme => ({ borderRadius: theme.shape.borderRadius }) })] }), 0, {
                     persist: true,
                     hideIconVariant: true,
                     style: { padding: 0, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }
@@ -129,7 +130,6 @@ const useMyActionFunctions = () => {
                     action_id: actionId
                 }), { throwError: false, showError: false });
                 setReport(result);
-                const actionName = (await action).items[0]?.name || t('unknown');
                 if (!result) {
                     showErrorMessage(_jsx(Trans, { i18nKey: "actions.error", values: { action: actionName, message: t('unknown') } }));
                     return;
@@ -156,7 +156,7 @@ const useMyActionFunctions = () => {
                     closeSnackbar(key);
                 }
                 setLoading(false);
-                setRequestId(null);
+                setRequestId(undefined);
                 setProgress([0, 0]);
             }
         }, [closeSnackbar, dispatchApi, showInfoMessage, showSuccessMessage, showErrorMessage, t]),
@@ -168,7 +168,7 @@ const useMyActionFunctions = () => {
                     throwError: true
                 });
                 if (detailedActionView) {
-                    navigate('/action');
+                    void navigate('/action');
                 }
             }
             finally {

package/components/routes/action/view/ActionDetails.d.ts

@@ -1,2 +1,2 @@
-declare const ActionDetails: () => import("react/jsx-runtime").JSX.Element;
+declare const ActionDetails: () => import("react").JSX.Element;
 export default ActionDetails;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Delete, Edit, PlayCircleOutline, Search } from '@mui/icons-material';
 import { Button, Checkbox, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack, Typography } from '@mui/material';
+import { PageCenter, useAppUser } from '@tui/core';
 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 { MembershipManagement } from '@cccsaurora/howler-ui/components/elements/membership/MembershipManagement';
 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';
@@ -15,7 +15,7 @@ import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router';
 import QueryResultText from '../../../elements/display/QueryResultText';
 import ActionReportDisplay from '../shared/ActionReportDisplay';
 import useMyActionFunctions from '../useMyActionFunctions';
@@ -31,63 +31,83 @@ const ActionDetails = () => {
     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)) {
-            newTriggers.push(e.target.name);
+        if (!action?.action_id) {
+            return;
         }
-        else if (!e.target.checked && newTriggers.includes(e.target.name)) {
-            newTriggers = newTriggers.filter(_t => _t !== e.target.name);
+        let triggers = action.triggers ?? [];
+        if (e.target.checked && !triggers.includes(e.target.name)) {
+            triggers = [...triggers, e.target.name];
+        }
+        else if (!e.target.checked && triggers.includes(e.target.name)) {
+            triggers = triggers.filter(_t => _t !== e.target.name);
         }
         setLoading(true);
         try {
             await dispatchApi(api.action.patch(action.action_id, {
-                triggers: newTriggers
+                triggers
             }));
-            setAction({ ...action, triggers: newTriggers });
+            setAction({ ...action, triggers });
         }
         finally {
             setLoading(false);
         }
     }, [action, dispatchApi, setLoading]);
     const onDelete = useCallback(() => withConfirmDeleteModal(async () => {
-        await deleteAction(action?.action_id);
+        if (!action?.action_id) {
+            return;
+        }
+        await deleteAction(action.action_id);
         showSuccessMessage(t('route.actions.manager.delete.success'));
     }), [withConfirmDeleteModal, deleteAction, action?.action_id, showSuccessMessage, t]);
     useEffect(() => {
+        if (!params.id) {
+            return;
+        }
         setLoading(true);
         void Promise.all([
-            dispatchApi(api.action.operations.get()).then(setOperations),
-            dispatchApi(api.action.get(params.id).then(setAction))
+            dispatchApi(api.action.operations.get()).then(result => setOperations(result ?? [])),
+            dispatchApi(api.action.get(params.id)).then(setAction)
         ]).finally(() => setLoading(false));
     }, [dispatchApi, params.id, setLoading]);
     useEffect(() => {
         if (action?.query) {
-            void onSearch(action?.query);
+            void onSearch(action.query);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [action?.query]);
-    const editRoles = user.roles.includes('automation_basic') || user.roles.includes('automation_advanced');
+    const editRoles = user.roles && (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)))
+        (user.roles &&
+            (user.roles.includes('admin') ||
+                user.roles.includes('actionrunner_basic') ||
+                user.roles.includes('actionrunner_advanced')));
+    const actionId = action?.action_id;
+    const adminList = action?.admins ?? [];
+    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 && _jsx(HowlerAvatar, { sx: { width: 32, height: 32 }, userId: action.owner })] }), _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 === user.username && editRoles) || user.roles?.includes('admin')) && (_jsx(Button, { startIcon: _jsx(Delete, {}), size: "small", variant: "outlined", color: "error", onClick: onDelete, children: t('button.delete') })), actionId && execRoles && (_jsx(Button, { startIcon: _jsx(PlayCircleOutline, {}), size: "small", variant: "outlined", color: "success", onClick: () => executeAction(actionId), children: t('route.actions.execute') })), ((action?.owner === user.username && editRoles) ||
+                            (adminList.includes(user.username) && editRoles) ||
+                            (action?.members?.includes(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') })), _jsx(MembershipManagement, { size: "small", type: "action", entity: action, onChange: _action => setAction(_action) })] }), (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((availableTriggers, triggers, index) => index === 0 ? triggers : availableTriggers.filter(trigger => triggers.includes(trigger)), [])
                             .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 &&
                     (progress[1] > 0 ? (_jsx(LinearProgress, { variant: "determinate", value: (progress[0] / progress[1]) * 100, valueBuffer: ((progress[0] + 10) / progress[1]) * 100 })) : (_jsx(LinearProgress, {}))), report && _jsx(ActionReportDisplay, { report: report, operations: operations }), operations.length > 0 &&
                     action &&
-                    action.operations.map(a => {
-                        if (howlerPluginStore.operations.includes(a.operation_id)) {
+                    action.operations?.map(a => {
+                        const operationId = a.operation_id;
+                        const operation = operations.find(_operation => _operation.id === operationId);
+                        if (!operationId || !operation) {
+                            return null;
+                        }
+                        if (howlerPluginStore.operations.includes(operationId)) {
                             return pluginStore.executeFunction(`operation.${a.operation_id}`, {
                                 readonly: true,
-                                operation: operations.find(_operation => _operation.id === a.operation_id),
+                                operation,
                                 operations,
-                                query: action.query,
+                                query: action.query ?? '',
                                 values: a.data_json
                             });
                         }
-                        return (_jsx(OperationEntry, { readonly: true, operations: operations, query: action.query, values: a.data_json, operation: operations.find(_operation => _operation.id === a.operation_id) }, a.operation_id));
+                        return (_jsx(OperationEntry, { readonly: true, operations: operations, query: action.query ?? '', values: a.data_json, operation: operation }, operationId));
                     })] }) }));
 };
 export default ActionDetails;