feat: use REST API endpoint to test step

packages/web/src/components/TestSubstep/index.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
@@ -10,37 +9,19 @@ import LoadingButton from '@mui/lab/LoadingButton';
 
 import { EditorContext } from 'contexts/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
+import useTestStep from 'hooks/useTestStep';
 import JSONViewer from 'components/JSONViewer';
 import WebhookUrlInfo from 'components/WebhookUrlInfo';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import { useQueryClient } from '@tanstack/react-query';
 import { StepPropType, SubstepPropType } from 'propTypes/propTypes';
 
-function serializeErrors(graphQLErrors) {
-  return graphQLErrors?.map((error) => {
-    try {
-      return {
-        ...error,
-        message: (
-          <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
-            {JSON.stringify(JSON.parse(error.message), null, 2)}
-          </pre>
-        ),
-      };
-    } catch {
-      return error;
-    }
-  });
-}
-
 function TestSubstep(props) {
   const {
     substep,
     expanded = false,
     onExpand,
     onCollapse,
-    onSubmit,
     onContinue,
     step,
     showWebhookUrl = false,
@@ -48,15 +29,21 @@ function TestSubstep(props) {
   } = props;
   const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
-  const [executeFlow, { data, error, loading, called, reset }] = useMutation(
-    EXECUTE_FLOW,
-    {
-      context: { autoSnackbar: false },
-    },
-  );
-  const response = data?.executeFlow?.data;
-  const isCompleted = !error && called && !loading;
-  const hasNoOutput = !response && isCompleted;
+  const {
+    mutateAsync: testStep,
+    isPending: isTestStepPending,
+    data,
+    isSuccess: isCompleted,
+    reset,
+  } = useTestStep(step.id);
+  const loading = isTestStepPending;
+  const lastExecutionStep = data?.data.lastExecutionStep;
+  const dataOut = lastExecutionStep?.dataOut;
+  const errorDetails = lastExecutionStep?.errorDetails;
+  const hasError = errorDetails && Object.values(errorDetails).length > 0;
+  const hasNoOutput = !hasError && isCompleted && !dataOut;
+  const hasOutput =
+    !hasError && isCompleted && dataOut && Object.values(dataOut).length > 0;
   const { name } = substep;
   const queryClient = useQueryClient();
 
@@ -75,18 +62,12 @@ function TestSubstep(props) {
       return;
     }
 
-    await executeFlow({
-      variables: {
-        input: {
-          stepId: step.id,
-        },
-      },
-    });
+    await testStep();
 
     await queryClient.invalidateQueries({
       queryKey: ['flows', flowId],
     });
-  }, [onSubmit, onContinue, isCompleted, queryClient, flowId]);
+  }, [testStep, onContinue, isCompleted, queryClient, flowId]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 
@@ -102,14 +83,14 @@ function TestSubstep(props) {
             alignItems: 'flex-start',
           }}
         >
-          {!!error?.graphQLErrors?.length && (
+          {hasError && (
             <Alert
               severity="error"
               sx={{ mb: 2, fontWeight: 500, width: '100%' }}
             >
-              {serializeErrors(error.graphQLErrors).map((error, i) => (
-                <div key={i}>{error.message}</div>
-              ))}
+              <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
+                {JSON.stringify(errorDetails, null, 2)}
+              </pre>
             </Alert>
           )}
 
@@ -133,12 +114,12 @@ function TestSubstep(props) {
             </Alert>
           )}
 
-          {response && (
+          {hasOutput && (
             <Box
               sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}
               data-test="flow-test-substep-output"
             >
-              <JSONViewer data={response} />
+              <JSONViewer data={dataOut} />
             </Box>
           )}
 

packages/web/src/hooks/useTestStep.js

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useTestStep(stepId) {
+  const query = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post(`/v1/steps/${stepId}/test`);
+
+      return data;
+    },
+  });
+
+  return query;
+}