feat: add TestSubstep along with step status

packages/backend/src/apps/twitter/info.json

@@ -222,9 +222,11 @@
       "description": "Will be triggered when you tweet something new.",
       "subSteps": [
         {
+          "key": "chooseAccount",
           "name": "Choose account"
         },
         {
+          "key": "testStep",
           "name": "Test trigger"
         }
       ]
@@ -235,9 +237,11 @@
       "description": "Will be triggered when a specific user tweet something new.",
       "subSteps": [
         {
+          "key": "chooseAccount",
           "name": "Choose account"
         },
         {
+          "key": "chooseTrigger",
           "name": "Set up a trigger",
           "arguments": [
             {
@@ -249,6 +253,7 @@
           ]
         },
         {
+          "key": "testStep",
           "name": "Test trigger"
         }
       ]
@@ -261,9 +266,11 @@
       "description": "Will create a tweet.",
       "subSteps": [
         {
+          "key": "chooseAccount",
           "name": "Choose account"
         },
         {
+          "key": "chooseAction",
           "name": "Set up action",
           "arguments": [
             {
@@ -275,6 +282,7 @@
           ]
         },
         {
+          "key": "testStep",
           "name": "Test action"
         }
       ]

packages/backend/src/graphql/types/action.ts

@@ -11,6 +11,7 @@ const actionType = new GraphQLObjectType({
         new GraphQLObjectType({
           name: 'ActionSubStep',
           fields: {
+            key: { type: GraphQLString },
             name: { type: GraphQLString },
             arguments: {
               type: GraphQLList(

packages/backend/src/graphql/types/trigger.ts

@@ -11,6 +11,7 @@ const triggerType = new GraphQLObjectType({
         new GraphQLObjectType({
           name: 'TriggerSubStep',
           fields: {
+            key: { type: GraphQLString },
             name: { type: GraphQLString },
             arguments: {
               type: GraphQLList(

packages/web/src/components/ChooseAppAndEventSubstep/index.tsx

@@ -94,7 +94,7 @@ function ChooseAppAndEventSubstep(props: ChooseAppAndEventSubstepProps): React.R
         });
       }
     }
-  }, [step, onChange]);;
+  }, [step, onChange]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 

packages/web/src/components/FlowStep/index.tsx

@@ -8,7 +8,10 @@ import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import IconButton from '@mui/material/IconButton';
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
+import TestSubstep from 'components/TestSubstep';
 import FlowSubstep from 'components/FlowSubstep';
 import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
 import ChooseAccountSubstep from 'components/ChooseAccountSubstep';
@@ -20,7 +23,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import type { App, AppFields } from 'types/app';
 import type { Step } from 'types/step';
 import { StepType } from 'types/step';
-import { Content, Header, Wrapper } from './style';
+import { AppIconWrapper, AppIconStatusIconWrapper, Content, Header, Wrapper } from './style';
 
 type FlowStepProps = {
   collapsed?: boolean;
@@ -48,6 +51,9 @@ const parseStep = (step: Step) => {
   }
 };
 
+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+
 export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, onChange } = props;
   const contextButtonRef = React.useRef<HTMLButtonElement  | null>(null);
@@ -86,11 +92,19 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
   const toggleSubstep = (substepIndex: number) => setCurrentSubstep((value) => value !== substepIndex ? substepIndex : null);
 
+  const validationStatusIcon = step.status === 'completed' ? validIcon : errorIcon;
+
   return (
     <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
       <Header collapsed={collapsed}>
         <Stack direction="row" alignItems="center" gap={2}>
-          <AppIcon url={app?.iconUrl} name={app?.name} />
+          <AppIconWrapper>
+            <AppIcon url={app?.iconUrl} name={app?.name} />
+
+            <AppIconStatusIconWrapper>
+              {validationStatusIcon}
+            </AppIconStatusIconWrapper>
+          </AppIconWrapper>
 
           <div>
             <Typography variant="caption">
@@ -129,9 +143,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
             />
 
             <Form defaultValues={step.parameters}>
-              {substeps?.length > 0 && substeps.map((substep: { name: string, arguments: AppFields[] }, index: number) => (
+              {substeps?.length > 0 && substeps.map((substep: { name: string, key: string, arguments: AppFields[] }, index: number) => (
                 <React.Fragment key={`${substep?.name}-${index}`}>
-                  {substep.name === 'Choose account' && (
+                  {substep.key === 'chooseAccount' && (
                     <ChooseAccountSubstep
                       expanded={currentSubstep === (index + 1)}
                       substep={substep}
@@ -143,7 +157,19 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
                     />
                   )}
 
-                  {substep.name !== 'Choose account' && (
+                  {substep.key === 'testStep' && (
+                    <TestSubstep
+                      expanded={currentSubstep === (index + 1)}
+                      substep={substep}
+                      onExpand={() => toggleSubstep((index + 1))}
+                      onCollapse={() => toggleSubstep((index + 1))}
+                      onSubmit={expandNextStep}
+                      onChange={handleChange}
+                      step={step}
+                    />
+                  )}
+
+                  {['chooseAccount', 'testStep'].includes(substep.key) === false && (
                     <FlowSubstep
                       expanded={currentSubstep === (index + 1)}
                       substep={substep}

packages/web/src/components/FlowStep/style.ts

@@ -1,6 +1,25 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 
+export const AppIconWrapper = styled('div')`
+  position: relative;
+`;
+
+export const AppIconStatusIconWrapper = styled('span')`
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+  display: inline-flex;
+
+  svg {
+    // to make it distinguishable over an app icon
+    background: white;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+
 export const Wrapper = styled(Card)`
   width: 100%;
   overflow: unset;

packages/web/src/components/FlowSubstep/index.tsx

@@ -78,13 +78,11 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
       />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
-          {substep.name !== 'Choose account' && (
+          <React.Fragment>
-            <React.Fragment>
+            {args?.map((argument) => (
-              {args?.map((argument) => (
+              <InputCreator key={argument?.key} schema={argument} onBlur={handleChangeOnBlur} />
-                <InputCreator key={argument?.key} schema={argument} onBlur={handleChangeOnBlur} />
+            ))}
-              ))}
+          </React.Fragment>
-            </React.Fragment>
-          )}
 
           <Button
             fullWidth

packages/web/src/components/FlowSubstepTitle/index.tsx

@@ -13,6 +13,9 @@ type FlowSubstepTitleProps = {
   valid?: boolean | null;
 };
 
+const validIcon = <CheckCircleIcon color="success" />;
+const errorIcon = <ErrorIcon color="error" />;
+
 function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
   const {
     expanded = false,
@@ -22,9 +25,6 @@ function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
   } = props;
 
   const hasValidation = valid !== null;
-
-  const validIcon = <CheckCircleIcon color="success" />;
-  const errorIcon = <ErrorIcon color="error" />;
   const validationStatusIcon = valid ? validIcon : errorIcon;
 
   return (

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import Button from '@mui/material/Button';
+
+import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
+import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import type { Step, Substep } from 'types/step';
+import type { AppFields } from 'types/app';
+
+type TestSubstepProps = {
+  substep: Substep,
+  expanded?: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  onChange?: ({ step }: { step: Step }) => void;
+  onSubmit?: () => void;
+  step: Step;
+};
+
+function TestSubstep(props: TestSubstepProps): React.ReactElement {
+  const {
+    substep,
+    expanded = false,
+    onExpand,
+    onCollapse,
+    onSubmit,
+    step,
+  } = props;
+
+  const [executeFlow, { data }] = useMutation(EXECUTE_FLOW);
+
+  const response = data?.executeFlow?.data;
+
+  const {
+    name,
+  } = substep;
+
+  const handleSubmit = React.useCallback(() => {
+    executeFlow({
+      variables: {
+        stepId: step.id,
+      }
+    })
+  }, [onSubmit, step.id]);
+  const onToggle = expanded ? onCollapse : onExpand;
+
+  return (
+    <React.Fragment>
+      <FlowSubstepTitle
+        expanded={expanded}
+        onClick={onToggle}
+        title={name}
+      />
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+
+          {response && (
+            <pre style={{ whiteSpace: 'pre-wrap', }}>
+              {JSON.stringify(response, null, 2)}
+            </pre>
+          )}
+
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={handleSubmit}
+            sx={{ mt: 2 }}
+          >
+            Test & Continue
+          </Button>
+        </ListItem>
+      </Collapse>
+    </React.Fragment>
+  );
+};
+
+export default TestSubstep;

packages/web/src/graphql/mutations/execute-flow.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const EXECUTE_FLOW = gql`
+  mutation ExecuteFlow($stepId: String!) {
+    executeFlow(stepId: $stepId) {
+      step {
+        id
+        status
+      }
+      data
+    }
+  }
+`;

packages/web/src/graphql/queries/get-apps.ts

@@ -54,6 +54,7 @@ export const GET_APPS = gql`
         key
         description
         subSteps {
+          key
           name
           arguments {
             label
@@ -68,6 +69,7 @@ export const GET_APPS = gql`
         key
         description
         subSteps {
+          key
           name
           arguments {
             label

packages/web/src/graphql/queries/get-flow.ts

@@ -11,6 +11,7 @@ export const GET_FLOW = gql`
         type
         key
         appKey
+        status
         connection {
           id
           verified

packages/web/src/types/step.ts

@@ -15,6 +15,7 @@ export type Step = {
   previousStepId: string | null;
   parameters: Record<string, unknown>;
   connection: Pick<Connection, 'id' | 'verified'>;
+  status: 'completed' | 'incomplete';
 };
 
 export type Substep = {