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

package/components/logins/Login.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Container, Stack, styled } from '@mui/material';
+import { useAppBanner } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import TextDivider from '@cccsaurora/howler-ui/components/elements/display/TextDivider';
+import { useContext } from 'react';
+import OAuthLogin from './auth/OAuthLogin';
+import UserPassLogin from './auth/UserPassLogin';
+const LogWrap = styled('div')(() => ({
+    marginTop: '2rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+}));
+const InjectCss = styled(Stack)(({ theme }) => ({
+    '.login-stack': {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(-4)
+    },
+    '.MuiPaper-root': {
+        width: 'unset',
+        maxWidth: 'unset'
+    }
+}));
+const LoginScreen = () => {
+    const banner = useAppBanner();
+    const { config } = useContext(ApiConfigContext);
+    const loading = config.configuration === null;
+    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 }), loading && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(CircularProgress, {}) })), config.configuration?.auth?.internal?.enabled && (_jsxs(_Fragment, { children: [_jsx(UserPassLogin, {}), config.configuration?.auth?.oauth_providers?.length > 0 && _jsx(TextDivider, {})] })), config.configuration?.auth?.oauth_providers?.length > 0 && (_jsx(OAuthLogin, { providers: config.configuration?.auth?.oauth_providers }))] }) }) }) }));
+};
+export default LoginScreen;

package/components/logins/auth/OAuthLogin.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+type OAuthLoginProps = {
+    providers: string[];
+};
+declare const OAuthLogin: FC<OAuthLoginProps>;
+export default OAuthLogin;

package/components/logins/auth/OAuthLogin.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, CircularProgress, Stack } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import useLogin from '../hooks/useLogin';
+const OAuthLogin = ({ providers }) => {
+    const [searchParams] = useSearchParams();
+    const { t } = useTranslation();
+    const { doOAuth } = useLogin();
+    const [buttonLoading, setButtonLoading] = useState(false);
+    const setNonce = useMyLocalStorageItem(StorageKey.LOGIN_NONCE)[1];
+    useEffect(() => {
+        if (searchParams.get('code')) {
+            setButtonLoading(true);
+            doOAuth().finally(() => setButtonLoading(false));
+        }
+    }, [doOAuth, searchParams]);
+    const nonce = useMemo(() => Math.pow(Date.now(), 1 + Math.random()).toString(16), []);
+    return (_jsx(Stack, { spacing: 1, children: providers.map(item => (_jsx(Button, { fullWidth: true, variant: "contained", color: "primary", disabled: buttonLoading, href: api.auth.login.uri(new URLSearchParams({ oauth_provider: item, nonce })), onClick: () => setNonce(nonce), startIcon: buttonLoading && _jsx(CircularProgress, { size: 24 }), children: `${t('route.login.button.oauth')} ${item.replace(/_/g, ' ')}` }, item))) }));
+};
+export default OAuthLogin;

package/components/logins/auth/UserPassLogin.d.ts

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

package/components/logins/auth/UserPassLogin.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField } from '@mui/material';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useLogin from '../hooks/useLogin';
+const UserPassLogin = () => {
+    const { t } = useTranslation();
+    const { doLogin } = useLogin();
+    const [loading, setLoading] = useState(false);
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const onSubmit = useCallback(async (event) => {
+        // Not preventDefault here was causing this warning:
+        // Form submission canceled because the form is not connected
+        // The warning seems to go away is not storing user in state.
+        event.preventDefault();
+        event.stopPropagation();
+        if (!loading) {
+            setLoading(true);
+            await doLogin({ user: username, password });
+            setLoading(false);
+        }
+    }, [loading, doLogin, username, password]);
+    return (_jsx("form", { onSubmit: onSubmit, children: _jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { variant: "outlined", size: "small", label: t('page.login.username'), disabled: loading, onChange: event => setUsername(event.target.value) }), _jsx(TextField, { variant: "outlined", size: "small", type: "password", label: t('page.login.password'), disabled: loading, onChange: event => setPassword(event.target.value) }), _jsx(Button, { type: "submit", variant: "contained", color: "primary", disabled: loading, children: t('page.login.button') })] }) }));
+};
+export default UserPassLogin;

package/components/logins/hooks/useLogin.d.ts

@@ -0,0 +1,7 @@
+import type { PostLoginBody } from '@cccsaurora/howler-ui/api/auth/login';
+declare const useLogin: () => {
+    doLogin: (loginData: PostLoginBody) => Promise<void>;
+    doOAuth: () => Promise<void>;
+    getUser: () => Promise<void>;
+};
+export default useLogin;

package/components/logins/hooks/useLogin.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api, {} from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import LoginErrorModal from '@cccsaurora/howler-ui/components/elements/display/modals/LoginErrorModal';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { saveLoginCredential } from '@cccsaurora/howler-ui/utils/localStorage';
+const useLogin = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [searchParams] = useSearchParams();
+    const { dispatchApi } = useMyApi();
+    const { setUser } = useAppUser();
+    const { showErrorMessage } = useMySnackbar();
+    const { t } = useTranslation();
+    const { showModal } = useContext(ModalContext);
+    const { get, remove } = useMyLocalStorage();
+    // Get user information
+    const getUser = useCallback(async () => {
+        try {
+            // We try and retrieve the user
+            const user = await dispatchApi(api.user.whoami.get(), { showError: false, throwError: true });
+            // If successful, continue
+            if (user) {
+                setUser({
+                    ...user,
+                    favourite_analytics: user.favourite_analytics ?? []
+                });
+                // Either navigate to the original URL, or just the home page
+                if (get(StorageKey.NEXT_LOCATION)) {
+                    navigate(get(StorageKey.NEXT_LOCATION) + (get(StorageKey.NEXT_SEARCH) ?? ''));
+                    remove(StorageKey.NEXT_LOCATION);
+                    remove(StorageKey.NEXT_SEARCH);
+                }
+                else if (location.pathname === '/login') {
+                    navigate('/');
+                }
+                // If the user is null but there's no exception?
+            }
+            else {
+                setUser(null);
+                showErrorMessage(t('user.error.failed'));
+            }
+        }
+        catch (e) {
+            // There's some sort of error with the getting of the user - log them out or throw an error
+            if (e instanceof Error) {
+                if (e.cause?.api_status_code === 403) {
+                    navigate('/logout');
+                }
+                else {
+                    showModal(_jsx(LoginErrorModal, { error: e }), {
+                        disableClose: true
+                    });
+                }
+            }
+        }
+    }, [dispatchApi, setUser, get, location.pathname, navigate, remove, showErrorMessage, t, showModal]);
+    // Generic login flow.
+    const doLogin = useCallback(async (loginData) => {
+        // Provide the login data to the API for the server to authenticate
+        const userCredential = await dispatchApi(api.auth.login.post(loginData));
+        if (!userCredential) {
+            showErrorMessage(t('user.login.failed'));
+        }
+        else if (saveLoginCredential(userCredential)) {
+            getUser();
+        }
+    }, [dispatchApi, getUser, showErrorMessage, t]);
+    // OAuth login flow.
+    const doOAuth = useCallback(async () => {
+        const userCredential = await dispatchApi(api.auth.login.get(searchParams));
+        if (saveLoginCredential(userCredential)) {
+            getUser();
+        }
+    }, [dispatchApi, searchParams, getUser]);
+    // login service.
+    return useMemo(() => ({
+        doLogin,
+        doOAuth,
+        getUser
+    }), [doLogin, doOAuth, getUser]);
+};
+export default useLogin;

package/components/routes/404.d.ts

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

package/components/routes/404.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinkOff } 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 NotFoundPage = () => {
+    const { t } = useTranslation();
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(LinkOff, { color: "secondary", fontSize: "inherit" }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.404.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.404.description') }) })] }));
+};
+export default NotFoundPage;

package/components/routes/ErrorBoundary.d.ts

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

package/components/routes/ErrorBoundary.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
+import React, {} from 'react';
+import ErrorOccured from './ErrorOccured';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error: error };
+    }
+    componentDidCatch(error) {
+        this.setState({ hasError: true, error: error });
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
+        }
+        return this.props.children;
+    }
+}
+export default ErrorBoundary;

package/components/routes/ErrorOccured.d.ts

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

package/components/routes/ErrorOccured.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Error } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+const ErrorOccured = () => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    return (_jsxs(PageCenter, { width: "75%", children: [_jsx(Box, { pt: 6, textAlign: "center", fontSize: 200, children: _jsx(Error, { fontSize: "inherit", style: { color: '#f44336' } }) }), _jsx(Box, { pb: 2, children: _jsx(Typography, { variant: "h2", children: t('page.error.title') }) }), _jsx(Box, { children: _jsx(Typography, { variant: "h5", children: t('page.error.description') }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.support`))] }));
+};
+export default ErrorOccured;

package/components/routes/Logout.d.ts

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

package/components/routes/Logout.js

@@ -0,0 +1,37 @@
+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 useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useTranslation } from 'react-i18next';
+const LogWrap = styled('div')(() => ({
+    marginTop: '2rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+}));
+const InjectCss = styled(Stack)(({ theme }) => ({
+    '.login-stack': {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(-4)
+    },
+    '.MuiPaper-root': {
+        width: 'unset',
+        maxWidth: 'unset'
+    }
+}));
+const Logout = () => {
+    const { t } = useTranslation();
+    const banner = useAppBanner();
+    const layout = useAppLayout();
+    const localStorage = useMyLocalStorage();
+    // hide topnav and leftnav on logout.
+    layout.hideMenus();
+    // There is probably more stuff to be done to properly logout a user.
+    setTimeout(() => {
+        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') })] }) }) }) }));
+};
+export default Logout;

package/components/routes/action/edit/ActionEditor.d.ts

@@ -0,0 +1,14 @@
+import type { ActionOperation } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { Operation } from '@cccsaurora/howler-ui/models/entities/generated/Operation';
+import { type FC } from 'react';
+export interface CustomActionProps {
+    operation: ActionOperation;
+    operations: ActionOperation[];
+    query: string;
+    onChange: (operation: Operation) => void;
+    onDelete: () => void;
+    readonly: boolean;
+    values: string;
+}
+declare const ActionEditor: FC;
+export default ActionEditor;

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

@@ -0,0 +1,137 @@
+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 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';
+import HitQuery from '@cccsaurora/howler-ui/components/routes/hits/search/HitQuery';
+import { difference, uniq } from 'lodash-es';
+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 { operationReady } from '@cccsaurora/howler-ui/utils/actionUtils';
+import QueryResultText from '../../../elements/display/QueryResultText';
+import ActionReportDisplay from '../shared/ActionReportDisplay';
+import OperationEntry from '../shared/OperationEntry';
+import useMyActionFunctions from '../useMyActionFunctions';
+const ActionEditor = () => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const { dispatchApi } = useMyApi();
+    const { getHitFields } = useContext(FieldContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const params = useParams();
+    const { user } = useAppUser();
+    const pluginStore = usePluginStore();
+    const { response, loading, setLoading, responseQuery, report, progress, onSearch, saveAction, submitAction } = useMyActionFunctions();
+    const [operations, setOperations] = useState([]);
+    const [name, setName] = useState('');
+    const [userOperations, setUserOperations] = useState([]);
+    const [triggers, setTriggers] = useState([]);
+    const availableOperations = useMemo(() => operations.filter(o => !userOperations.some(uo => uo.operation_id === o.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]);
+    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) => {
+        if (e.target.checked && !triggers.includes(e.target.name)) {
+            setTriggers([...triggers, e.target.name]);
+        }
+        else if (!e.target.checked && triggers.includes(e.target.name)) {
+            setTriggers(triggers.filter(_t => _t !== e.target.name));
+        }
+    }, [triggers]);
+    useEffect(() => {
+        dispatchApi(api.action.operations.get())
+            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < 1))
+            .then(setOperations);
+        if (responseQuery) {
+            onSearch(responseQuery);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchApi, getHitFields]);
+    useEffect(() => {
+        if (responseQuery && searchParams.get('query') !== responseQuery) {
+            searchParams.set('query', responseQuery);
+            setSearchParams(new URLSearchParams(searchParams), { replace: true });
+        }
+    }, [searchParams, responseQuery, setSearchParams]);
+    useEffect(() => {
+        if (params.id) {
+            setLoading(true);
+            dispatchApi(api.search.action.post({
+                query: `action_id:${params.id}`,
+                rows: 1
+            }), { throwError: false }).then(result => {
+                if (!result) {
+                    setLoading(false);
+                    return;
+                }
+                const existingAction = result.items[0];
+                setName(existingAction.name);
+                searchParams.set('query', existingAction.query);
+                setSearchParams(new URLSearchParams(searchParams), { replace: true });
+                setUserOperations(existingAction.operations);
+                setLoading(false);
+                onSearch(existingAction.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') ||
+                                    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')
+                                        ? 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(HitQuery, { triggerSearch: onSearch }), response ? (_jsx(QueryResultText, { count: response.total, query: responseQuery })) : (_jsx(Typography, { sx: theme => ({
+                            color: theme.palette.text.secondary,
+                            fontSize: '0.9em',
+                            fontStyle: 'italic',
+                            mb: 0.5,
+                            '& a': { color: theme.palette.text.secondary }
+                        }), 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}`, {
+                                operation,
+                                operations: [operation, ...availableOperations],
+                                query: responseQuery,
+                                onChange: onActionChange(index),
+                                onDelete: onActionDelete(index),
+                                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: '{}'
+                                            }
+                                        ]), 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') }))] }))] }));
+};
+export default ActionEditor;

package/components/routes/action/shared/ActionReportDisplay.d.ts

@@ -0,0 +1,7 @@
+import type { ActionOperation, ActionReport } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { FC } from 'react';
+declare const ActionReportDisplay: FC<{
+    report: ActionReport;
+    operations: ActionOperation[];
+}>;
+export default ActionReportDisplay;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorOutline, ExpandMore, InfoOutlined, TaskAltOutlined } from '@mui/icons-material';
+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';
+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]) => {
+                            const operation = operations.find(_a => _a.id === operationId);
+                            if (!operation) {
+                                return null;
+                            }
+                            return (_jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", mr: 1, children: [_jsx(Typography, { children: operation.i18nKey ? t(operation.i18nKey) : operation.title }), _reports.map(r => ({
+                                                    success: _jsx(TaskAltOutlined, { color: "success" }, r.message),
+                                                    skipped: _jsx(InfoOutlined, { color: "info" }, r.message),
+                                                    error: _jsx(ErrorOutline, { color: "error" }, r.message)
+                                                })[r.outcome])] }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: _reports.map(r => (_jsxs(Alert, { variant: "outlined", severity: r.outcome.replace('skipped', 'info'), children: [_jsx(AlertTitle, { children: r.title }), _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: _jsx(Markdown, { md: r.message.replace('$UI_HOST', window.location.origin) }) }), _jsx(Typography, { variant: "caption", children: _jsx(Link, { to: `/hits?query=${encodeURIComponent(r.query)}`, children: t('route.actions.search.open') }) })] })] }, r.query))) }) })] }, operationId));
+                        }) })] }), _jsx(Divider, { orientation: "horizontal" })] }));
+};
+export default ActionReportDisplay;

package/components/routes/action/shared/OperationEntry.d.ts

@@ -0,0 +1,13 @@
+import type { ActionOperation } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { Operation } from '@cccsaurora/howler-ui/models/entities/generated/Operation';
+import type { FC } from 'react';
+declare const OperationEntry: FC<{
+    query: string;
+    operation: ActionOperation;
+    readonly?: boolean;
+    values?: string;
+    operations: ActionOperation[];
+    onChange?: (operation: Operation) => void;
+    onDelete?: () => void;
+}>;
+export default OperationEntry;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Delete } from '@mui/icons-material';
+import { Box, Card, CardContent, Chip, Divider, IconButton, ListItemText, MenuItem, Select, Stack } from '@mui/material';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { checkArgsAreFilled, operationReady } from '@cccsaurora/howler-ui/utils/actionUtils';
+import OperationStep from './OperationStep';
+const OperationEntry = ({ operation, operations, onChange, onDelete, query, readonly = false, values }) => {
+    const { t } = useTranslation();
+    const ready = useMemo(() => operationReady(values, operation), [operation, values]);
+    const handleChange = useCallback((e) => {
+        if (onChange) {
+            onChange({
+                operation_id: e.target.value,
+                data_json: '{}'
+            });
+        }
+    }, [onChange]);
+    return operation?.id ? (_jsx(Card, { variant: "outlined", sx: [!readonly && ready && { borderColor: 'success.main' }], children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsxs(Stack, { spacing: 1, children: [_jsx(Select, { value: operation?.id, size: "small", disabled: readonly || operations.length < 2, onChange: handleChange, children: operations
+                                            .sort((a, b) => (b.priority ?? -1) - (a.priority ?? -1))
+                                            .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,
+                                data_json: _values
+                            }) }, Object.keys(step.args).join('')));
+                    })] }) }) }, operation?.id)) : null;
+};
+export default OperationEntry;

package/components/routes/action/shared/OperationStep.d.ts

@@ -0,0 +1,11 @@
+import type { ActionOperationStep } from '@cccsaurora/howler-ui/models/ActionTypes';
+import type { FC } from 'react';
+declare const OperationStep: FC<{
+    readonly?: boolean;
+    loading?: boolean;
+    query: string;
+    step: ActionOperationStep;
+    values: string;
+    setValues?: (values: string) => void;
+}>;
+export default OperationStep;