@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.271

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
+import { capitalize } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+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';
+const THROTTLER = new Throttler(500);
+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 filled = useMemo(() => checkArgsAreFilled(step, values), [step, values]);
+    const validationStatus = useMemo(() => errorResponse?.total > 0
+        ? 'error'
+        : warnResponse?.total > 0
+            ? 'warning'
+            : errorResponse || warnResponse
+                ? 'success'
+                : null, [errorResponse, warnResponse]);
+    const args = useMemo(() => getArgsByContext(step.args, values), [step.args, values]);
+    const parsedValues = useMemo(() => JSON.parse(values), [values]);
+    /**
+     * Substitute the current user values into a given validation query
+     */
+    const substitute = useCallback((_query) => Object.entries(values).reduce((q, [key, val]) => q.replace(`$${key}`, sanitizeLuceneQuery(val)), _query), [values]);
+    /**
+     * Get a well formatted label based on the argument key
+     */
+    const getLabel = useCallback((argId) => (argId ?? '')
+        .replace(/[-_]/g, ' ')
+        .split(' ')
+        .map(part => capitalize(part))
+        .join(' '), []);
+    /**
+     * Run validation on the data provided for this step of the operation
+     */
+    const validate = useCallback(async () => {
+        if (!query || readonly) {
+            return;
+        }
+        try {
+            setValidating(true);
+            if (step.validation?.warn) {
+                const result = await dispatchApi(api.search.hit.post({
+                    query: `(${query}) AND (${substitute(step.validation.warn.query)})`
+                }), { throwError: false });
+                setWarnResponse(result);
+            }
+            if (step.validation?.error) {
+                const result = await dispatchApi(api.search.hit.post({
+                    query: `(${query}) AND (${substitute(step.validation.error.query)})`
+                }), { throwError: false });
+                setErrorResponse(result);
+            }
+        }
+        finally {
+            setValidating(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step.validation?.error, step.validation?.warn, dispatchApi, query, substitute]);
+    useEffect(() => {
+        if (validating || !filled || !step.validation) {
+            return;
+        }
+        THROTTLER.debounce(validate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filled, validate, query, values]);
+    return (_jsxs(Stack, { spacing: 2, children: [args.map(arg => {
+                if (step.options?.[arg]) {
+                    const opts = getOptionsByContext(step.options, arg, values);
+                    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));
+                }
+                else {
+                    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' },
+                            '& a': {
+                                color: validationStatus,
+                                '&:visited': {
+                                    color: validationStatus
+                                },
+                                '&:not(:hover)': { textDecoration: 'none' }
+                            }
+                        }, 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
+                                }) }), 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) })) }))] }))] }))] }));
+};
+export default OperationStep;

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

@@ -0,0 +1,19 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { ActionReport } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Operation } from '@cccsaurora/howler-ui/models/entities/generated/Operation';
+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>>>;
+    responseQuery: string;
+    report: ActionReport;
+    progress: [number, number];
+    onSearch: (query: string) => Promise<void>;
+    saveAction: (name: string, query: string, operations: Operation[], triggers: string[]) => Promise<void>;
+    submitAction: (query: string, operations: Operation[]) => Promise<void>;
+    executeAction: (actionId: string, query?: string) => Promise<void>;
+    deleteAction: (actionId: string) => Promise<void>;
+};
+export default useMyActionFunctions;

package/components/routes/action/useMyActionFunctions.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Terminal } from '@mui/icons-material';
+import { LinearProgress, Stack } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+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 { v4 as uuid } from 'uuid';
+const useMyActionFunctions = () => {
+    const { t } = useTranslation();
+    const { closeSnackbar } = useSnackbar();
+    const { showErrorMessage, showSuccessMessage, showInfoMessage } = useMySnackbar();
+    const { dispatchApi } = useMyApi();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+    const { addListener, removeListener } = useContext(SocketContext);
+    const [loading, setLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+    const [responseQuery, setResponseQuery] = useState('');
+    const [progress, setProgress] = useState([0, 0]);
+    const [requestId, setRequestId] = useState(null);
+    const [report, setReport] = useState();
+    const handler = useCallback((data) => {
+        if (data.type === 'action' && data.request_id === requestId) {
+            setProgress([data.processed, data.total]);
+        }
+    }, [requestId]);
+    const onSearch = useCallback(async (query) => {
+        const _response = await dispatchApi(api.search.hit.post({
+            query,
+            rows: 3,
+            track_total_hits: true
+        }));
+        setResponse(_response);
+        setResponseQuery(query);
+    }, [dispatchApi]);
+    useEffect(() => {
+        addListener('action', handler);
+        return () => removeListener('action');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handler]);
+    return {
+        loading,
+        setLoading,
+        response,
+        setResponse,
+        responseQuery,
+        report,
+        progress,
+        onSearch,
+        saveAction: useCallback(async (name, query, operations, triggers) => {
+            try {
+                if (!query) {
+                    showErrorMessage(t('route.actions.query.empty'));
+                    return;
+                }
+                if (params.id) {
+                    setLoading(true);
+                    const result = await dispatchApi(api.action.put(params.id, {
+                        name,
+                        query,
+                        operations
+                    }), { showError: true, throwError: false });
+                    if (result) {
+                        navigate(`/action/${params.id}`);
+                    }
+                }
+                else {
+                    setLoading(true);
+                    const newAction = await dispatchApi(api.action.post({
+                        name,
+                        query,
+                        operations,
+                        triggers
+                    }), { showError: true, throwError: false });
+                    if (newAction) {
+                        navigate(`/action/${newAction.action_id}`);
+                    }
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        }, [dispatchApi, navigate, params.id, showErrorMessage, t]),
+        submitAction: useCallback(async (query, operations) => {
+            if (!query) {
+                showErrorMessage(t('route.actions.query.empty'));
+                return;
+            }
+            setLoading(true);
+            const reqId = uuid();
+            setRequestId(reqId);
+            setReport(null);
+            try {
+                setReport(await dispatchApi(api.action.execute.post({
+                    request_id: reqId,
+                    query,
+                    operations
+                }), { throwError: false, showError: true }));
+            }
+            finally {
+                setLoading(false);
+                setRequestId(null);
+                setProgress([0, 0]);
+                onSearch(query);
+            }
+        }, [dispatchApi, onSearch, showErrorMessage, t]),
+        executeAction: useCallback(async (actionId, query) => {
+            setLoading(true);
+            const reqId = uuid();
+            setRequestId(reqId);
+            setReport(null);
+            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, {
+                    persist: true,
+                    hideIconVariant: true,
+                    style: { padding: 0, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }
+                });
+                setReport(await dispatchApi(api.action.execute.post({
+                    request_id: reqId,
+                    query,
+                    action_id: actionId
+                }), { throwError: false, showError: true }));
+                showSuccessMessage(_jsx(Trans, { i18nKey: "actions.succeeded", values: { action: (await action).items[0]?.name || t('unknown') } }));
+            }
+            finally {
+                if (key) {
+                    closeSnackbar(key);
+                }
+                setLoading(false);
+                setRequestId(null);
+                setProgress([0, 0]);
+            }
+        }, [closeSnackbar, dispatchApi, showInfoMessage, showSuccessMessage, t]),
+        deleteAction: useCallback(async (actionId) => {
+            setLoading(true);
+            try {
+                await dispatchApi(api.action.del(actionId));
+                if (location.pathname.endsWith(actionId)) {
+                    navigate('/action');
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        }, [dispatchApi, location.pathname, navigate])
+    };
+};
+export default useMyActionFunctions;

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

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

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

@@ -0,0 +1,80 @@
+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 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 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 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 { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { Link, useParams } from 'react-router-dom';
+import QueryResultText from '../../../elements/display/QueryResultText';
+import ActionReportDisplay from '../shared/ActionReportDisplay';
+import useMyActionFunctions from '../useMyActionFunctions';
+const ActionDetails = () => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const params = useParams();
+    const { user } = useAppUser();
+    const pluginStore = usePluginStore();
+    const { response, onSearch, loading, setLoading, executeAction, deleteAction, progress, report } = useMyActionFunctions();
+    const [operations, setOperations] = useState([]);
+    const [action, setAction] = useState();
+    const onTriggerChange = useCallback(async (e) => {
+        let newTriggers = action.triggers ?? [];
+        if (e.target.checked && !newTriggers.includes(e.target.name)) {
+            newTriggers.push(e.target.name);
+        }
+        else if (!e.target.checked && newTriggers.includes(e.target.name)) {
+            newTriggers = newTriggers.filter(_t => _t !== e.target.name);
+        }
+        setLoading(true);
+        try {
+            await dispatchApi(api.action.patch(action.action_id, {
+                triggers: newTriggers
+            }));
+            setAction({ ...action, triggers: newTriggers });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [action, dispatchApi, setLoading]);
+    useEffect(() => {
+        setLoading(true);
+        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);
+        }
+        // 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
+                            ?.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 &&
+                    (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)) {
+                            return pluginStore.executeFunction(`operation.${a.operation_id}`, {
+                                readonly: true,
+                                operation: operations.find(_operation => _operation.id === a.operation_id),
+                                operations,
+                                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));
+                    })] }) }));
+};
+export default ActionDetails;

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

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

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Delete, Engineering, Terminal } from '@mui/icons-material';
+import { Autocomplete, Card, CardContent, CardHeader, Chip, Grid, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey, VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import useMyActionFunctions from '../useMyActionFunctions';
+const ActionSearch = () => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const { dispatchApi } = useMyApi();
+    const { load } = useContext(TuiListMethodContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { deleteAction } = useMyActionFunctions();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [searching, setSearching] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [searchModifiers, setSearchModifiers] = useState([]);
+    // Search Handler.
+    const onSearch = useCallback(async () => {
+        setSearching(true);
+        setHasError(false);
+        if (phrase) {
+            searchParams.set('phrase', phrase);
+        }
+        else {
+            searchParams.delete('phrase');
+        }
+        setSearchParams(searchParams, { replace: true });
+        try {
+            const sanitizedPhrase = sanitizeLuceneQuery(phrase);
+            let query = `name:(*${sanitizedPhrase}*) OR query:(*${sanitizedPhrase}*)`;
+            if (searchModifiers.length > 0) {
+                query = `(${query}) AND (triggers:(${searchModifiers.join(' OR ')}))`;
+            }
+            const _response = await dispatchApi(api.search.action.post({
+                query,
+                rows: pageCount,
+                offset
+            }));
+            setResponse(_response);
+            load(_response.items.map(u => ({ id: u.action_id, item: u })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, load, offset, pageCount, phrase, searchModifiers, searchParams, setSearchParams]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    // Effect to initialize list of users.
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    useEffect(() => {
+        onSearch();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchModifiers]);
+    // Search result list item renderer.
+    const renderer = useCallback(({ item }, classRenderer) => {
+        return (_jsxs(Card, { onClick: () => navigate(`/action/${item.item.action_id}`), variant: "outlined", className: classRenderer(), sx: {
+                '&:hover': { borderColor: 'primary.main' },
+                transitionProperty: 'border-color',
+                cursor: 'pointer',
+                mt: 1
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h5", children: item.item.name }), item.item.triggers.length > 0 && (_jsx(Tooltip, { title: _jsx(Trans, { i18nKey: "route.actions.trigger.description", values: { triggers: item.item.triggers.join(', ') }, components: { bold: _jsx("strong", {}) } }), children: _jsx(Engineering, {}) })), _jsx(FlexOne, {}), (item.item.owner_id === user.username || user.roles?.includes('admin')) && (_jsx(IconButton, { size: "small", onClick: async (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    await deleteAction(item.item.action_id);
+                                    onSearch();
+                                }, children: _jsx(Delete, {}) })), _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important' }, userId: item.item.owner_id })] }), subheader: item.item.query }), _jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsx(Grid, { container: true, spacing: 1, children: item.item.operations.map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: t(`operations.${d.operation_id}`) }) }, d.operation_id))) }) })] }, item.item.name));
+    }, [deleteAction, navigate, onSearch, t, user.roles, user.username]);
+    return (_jsx(ItemManager, { onSearch: onSearch, onCreate: () => navigate('/action/execute'), onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.actions.search.prompt') }), searchFilters: _jsx(Autocomplete, { multiple: true, size: "small", value: searchModifiers, onChange: (__, values) => setSearchModifiers(values), getOptionLabel: trigger => t(`route.actions.trigger.${trigger}`), options: VALID_ACTION_TRIGGERS, renderInput: params => (_jsx(TextField, { ...params, sx: { maxWidth: '500px' }, label: t('route.actions.trigger') })) }), renderer: renderer, response: response, createPrompt: "route.actions.create", searchPrompt: "route.actions.search", createIcon: _jsx(Terminal, { sx: { mr: 1 } }) }));
+};
+const ActionSearchProvider = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(ActionSearch, {}) }));
+};
+export default ActionSearchProvider;

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

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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Tab, Tabs } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useSearchParams } from 'react-router-dom';
+const Integrations = () => {
+    const { t } = useTranslation();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const pluginStore = usePluginStore();
+    const pluginIntegrations = useMemo(() => Object.fromEntries(howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.integrations`))), [pluginStore]);
+    const [tab, setTab] = useState(Object.keys(pluginIntegrations)[0] ?? '');
+    useEffect(() => {
+        searchParams.set('tab', tab);
+        setSearchParams(searchParams);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tab]);
+    const tabData = useMemo(() => {
+        return pluginIntegrations[tab]();
+    }, [pluginIntegrations, tab]);
+    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(Stack, { spacing: 1, children: [_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: Object.keys(pluginIntegrations).map(integration => (_jsx(Tab, { label: t(`route.integrations.${integration}`), value: integration }, integration))) }), tabData] }) }));
+};
+export default Integrations;

package/components/routes/admin/users/UserEditor.d.ts

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

package/components/routes/admin/users/UserEditor.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import UserPageWrapper from '@cccsaurora/howler-ui/components/elements/display/UserPageWrapper';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
+import ProfileSection from '@cccsaurora/howler-ui/components/routes/settings/ProfileSection';
+import SecuritySection from '@cccsaurora/howler-ui/components/routes/settings/SecuritySection';
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+const UserEditor = () => {
+    const { dispatchApi } = useMyApi();
+    const { id } = useParams();
+    const [user, setUser] = useState();
+    const { user: currentUser } = useAppUser();
+    const isAdmin = currentUser.is_admin;
+    const { editName, editPassword, editQuota, addRole, removeRole, addApiKey, removeApiKey, viewGroups } = useMyUserFunctions();
+    const userWrapper = useCallback((fn) => {
+        return async (value) => setUser(await fn(user, value));
+    }, [user, setUser]);
+    useEffect(() => {
+        if (id && !user) {
+            dispatchApi(api.user.get(id)).then(setUser);
+        }
+    }, [dispatchApi, id, user]);
+    return (_jsxs(UserPageWrapper, { user: user, children: [_jsx(ProfileSection, { user: user, editName: (isAdmin || currentUser.username === user?.username) && userWrapper(editName), addRole: isAdmin && userWrapper(addRole), removeRole: isAdmin && userWrapper(removeRole), viewGroups: currentUser.username === user?.username && viewGroups }), _jsx(SecuritySection, { user: user, editPassword: currentUser.username === user?.username && editPassword, addApiKey: currentUser.username === user?.username && addApiKey, removeApiKey: (isAdmin || currentUser.username === user?.username) && userWrapper(removeApiKey), editQuota: isAdmin && userWrapper(editQuota) })] }));
+};
+export default UserEditor;

package/components/routes/admin/users/UserSearch.d.ts

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