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

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

@@ -1,219 +0,0 @@
-import {
-  Alert,
-  AlertTitle,
-  Autocomplete,
-  CircularProgress,
-  InputAdornment,
-  LinearProgress,
-  Stack,
-  TextField
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { capitalize } from 'lodash-es';
-import type { ActionOperationStep } from '@cccsaurora/howler-ui/models/ActionTypes';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-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: FC<{
-  readonly?: boolean;
-  loading?: boolean;
-  query: string;
-  step: ActionOperationStep;
-  values: string;
-  setValues?: (values: string) => void;
-}> = ({ step, query, values, setValues, readonly, loading }) => {
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-
-  const [validating, setValidating] = useState(false);
-  const [warnResponse, setWarnResponse] = useState<HowlerSearchResponse<Hit>>(null);
-  const [errorResponse, setErrorResponse] = useState<HowlerSearchResponse<Hit>>(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: string) =>
-      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?: string) =>
-      (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 (
-    <Stack spacing={2}>
-      {args.map(arg => {
-        if (step.options?.[arg]) {
-          const opts = getOptionsByContext(step.options, arg, values);
-
-          return (
-            <Autocomplete
-              disablePortal
-              key={arg}
-              options={opts}
-              disabled={readonly || loading}
-              value={parsedValues?.[arg] || ''}
-              renderInput={params => (
-                <TextField
-                  {...params}
-                  InputProps={{
-                    ...params.InputProps,
-                    startAdornment: loading && (
-                      <InputAdornment position="start">
-                        <CircularProgress size={24} />
-                      </InputAdornment>
-                    )
-                  }}
-                  label={getLabel(arg)}
-                />
-              )}
-              onChange={(_, value) => setValues(JSON.stringify({ ...parsedValues, [arg]: value }))}
-            />
-          );
-        } else {
-          return (
-            <TextField
-              key={arg}
-              disabled={readonly}
-              value={parsedValues?.[arg] || ''}
-              onChange={e => setValues(JSON.stringify({ ...parsedValues, [arg]: e.target.value }))}
-              label={getLabel(arg)}
-            />
-          );
-        }
-      })}
-      {filled && (
-        <>
-          {validating && <LinearProgress />}
-          {validationStatus && (
-            <Alert
-              variant="outlined"
-              severity={validationStatus}
-              sx={{
-                '& > code': { fontSize: '0.9em' },
-                '& a': {
-                  color: validationStatus,
-                  '&:visited': {
-                    color: validationStatus
-                  },
-                  '&:not(:hover)': { textDecoration: 'none' }
-                }
-              }}
-            >
-              <AlertTitle>
-                {t(
-                  (validationStatus === 'error' ? step.validation.error?.message : step.validation.warn?.message) ??
-                    `route.actions.alert.${validationStatus}`,
-                  {
-                    count: validationStatus === 'error' ? errorResponse.total : warnResponse?.total
-                  }
-                )}
-              </AlertTitle>
-              {validationStatus !== 'success' && (
-                <Link
-                  to={`/hits?query=${encodeURIComponent(
-                    errorResponse?.total
-                      ? substitute(step.validation.error.query)
-                      : warnResponse?.total && substitute(step.validation.warn.query)
-                  )}`}
-                >
-                  {errorResponse?.total ? (
-                    <code>{substitute(step.validation.error.query)}</code>
-                  ) : (
-                    warnResponse?.total && <code>{substitute(step.validation.warn.query)}</code>
-                  )}
-                </Link>
-              )}
-            </Alert>
-          )}
-        </>
-      )}
-    </Stack>
-  );
-};
-
-export default OperationStep;

package/components/routes/action/useMyActionFunctions.tsx

@@ -1,225 +0,0 @@
-import { Terminal } from '@mui/icons-material';
-import { LinearProgress, Stack } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import type { RecievedDataType } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
-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 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';
-import { useSnackbar, type SnackbarKey } 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<HowlerSearchResponse<Hit>>(null);
-  const [responseQuery, setResponseQuery] = useState('');
-  const [progress, setProgress] = useState<[number, number]>([0, 0]);
-  const [requestId, setRequestId] = useState<string>(null);
-  const [report, setReport] = useState<ActionReport>();
-
-  const handler = useCallback(
-    (data: RecievedDataType<{ request_id: string; processed: number; total: number }>) => {
-      if (data.type === 'action' && data.request_id === requestId) {
-        setProgress([data.processed, data.total]);
-      }
-    },
-    [requestId]
-  );
-
-  const onSearch = useCallback(
-    async (query: string) => {
-      const _response = await dispatchApi(
-        api.search.hit.post({
-          query,
-          rows: 3,
-          track_total_hits: true
-        })
-      );
-
-      setResponse(_response);
-      setResponseQuery(query);
-    },
-    [dispatchApi]
-  );
-
-  useEffect(() => {
-    addListener<{ processed: number; total: number }>('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: string, query: string, operations: Operation[], triggers: string[]) => {
-        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: string, operations: Operation[]): Promise<void> => {
-        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: string, query?: string) => {
-        setLoading(true);
-        const reqId = uuid();
-        setRequestId(reqId);
-        setReport(null);
-
-        let key: SnackbarKey = null;
-        try {
-          const action = api.search.action.post({ query: `action_id:${actionId}`, rows: 1 });
-
-          key = showInfoMessage(
-            <Stack spacing={1} width="100%" mb={-2} pb={1}>
-              <Stack direction="row" spacing={1} px="20px" pt="6px" pb="2px">
-                <Terminal fontSize="small" sx={{ mr: 2 }} />
-                <span>
-                  <Trans i18nKey="actions.running" values={{ action: (await action).items[0]?.name || t('unknown') }} />
-                </span>
-              </Stack>
-              <LinearProgress color="inherit" sx={theme => ({ borderRadius: theme.shape.borderRadius })} />
-            </Stack>,
-            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(
-            <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: string) => {
-        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.tsx

@@ -1,205 +0,0 @@
-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 type { ActionOperation } from '@cccsaurora/howler-ui/models/ActionTypes';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Action } from '@cccsaurora/howler-ui/models/entities/generated/Action';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useEffect, useState, type ChangeEventHandler } 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 type { CustomActionProps } from '../edit/ActionEditor';
-import ActionReportDisplay from '../shared/ActionReportDisplay';
-import useMyActionFunctions from '../useMyActionFunctions';
-
-const ActionDetails = () => {
-  const { t } = useTranslation();
-  const { dispatchApi } = useMyApi();
-  const params = useParams();
-  const { user } = useAppUser<HowlerUser>();
-  const pluginStore = usePluginStore();
-
-  const { response, onSearch, loading, setLoading, executeAction, deleteAction, progress, report } =
-    useMyActionFunctions();
-
-  const [operations, setOperations] = useState<ActionOperation[]>([]);
-  const [action, setAction] = useState<Action>();
-
-  const onTriggerChange: ChangeEventHandler<HTMLInputElement> = 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 (
-    <PageCenter maxWidth="1500px" textAlign="left" height="100%">
-      <Stack spacing={1}>
-        <Stack direction="row" justifyContent="space-between">
-          <Typography variant="h5">{action?.name}</Typography>
-          {action?.owner_id && <HowlerAvatar sx={{ width: 32, height: 32 }} userId={action.owner_id} />}
-        </Stack>
-        <Phrase
-          fullWidth
-          value={action?.query}
-          disabled
-          size="small"
-          onChange={() => {}}
-          startAdornment={
-            <IconButton onClick={() => onSearch(action?.query)}>
-              <Search fontSize="small" />
-            </IconButton>
-          }
-        />
-        <Stack direction="row" alignItems="center" spacing={1}>
-          {response && <QueryResultText count={response.total} query={action?.query} />}
-          <FlexOne />
-          {(action?.owner_id === user.username || user.roles?.includes('admin')) && (
-            <Button
-              startIcon={<Delete />}
-              size="small"
-              variant="outlined"
-              color="error"
-              onClick={() => deleteAction(action?.action_id)}
-            >
-              {t('delete')}
-            </Button>
-          )}
-          <Button
-            startIcon={<PlayCircleOutline />}
-            size="small"
-            variant="outlined"
-            color="success"
-            onClick={() => executeAction(action?.action_id)}
-          >
-            {t('route.actions.execute')}
-          </Button>
-          {(action?.owner_id === user.username || user.roles?.includes('admin')) && (
-            <Button
-              startIcon={<Edit />}
-              size="small"
-              variant="outlined"
-              component={Link}
-              to={`/action/${params.id}/edit`}
-            >
-              {t('route.actions.edit')}
-            </Button>
-          )}
-        </Stack>
-        {user.roles.includes('automation_advanced') && (
-          <FormGroup>
-            <Stack direction="row" spacing={1}>
-              {action?.operations
-                ?.map(a => (operations ?? []).find(_action => _action.id === a.operation_id)?.triggers ?? [])
-                .reduce((acc, triggers) => acc.filter(_t => triggers.includes(_t)))
-                .map(trigger => (
-                  <FormControlLabel
-                    key={trigger}
-                    control={
-                      <Checkbox
-                        name={trigger}
-                        onChange={onTriggerChange}
-                        checked={action?.triggers?.includes(trigger) ?? false}
-                      />
-                    }
-                    label={t(`route.actions.trigger.${trigger}`)}
-                  />
-                ))}
-            </Stack>
-          </FormGroup>
-        )}
-        {loading &&
-          (progress[1] > 0 ? (
-            <LinearProgress
-              variant="determinate"
-              value={(progress[0] / progress[1]) * 100}
-              valueBuffer={((progress[0] + 10) / progress[1]) * 100}
-            />
-          ) : (
-            <LinearProgress />
-          ))}
-        {report && <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
-              } as CustomActionProps);
-            }
-
-            return (
-              <OperationEntry
-                key={a.operation_id}
-                readonly
-                operations={operations}
-                query={action.query}
-                values={a.data_json}
-                operation={operations.find(_operation => _operation.id === a.operation_id)}
-              />
-            );
-          })}
-      </Stack>
-    </PageCenter>
-  );
-};
-
-export default ActionDetails;