feat(Editor): toggle next step upon continuing

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

@@ -3,7 +3,7 @@ import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import type { IFlow } from '@automatisch/types';
+import type { IFlow, IStep } from '@automatisch/types';
 
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import { CREATE_STEP } from 'graphql/mutations/create-step';
@@ -96,6 +96,12 @@ export default function Editor(props: EditorProps): React.ReactElement {
     [createStep, flow.id]
   );
 
+  const openNextStep = React.useCallback((nextStep: IStep) => {
+    return () => {
+      setCurrentStepId(nextStep?.id);
+    };
+  }, []);
+
   return (
     <Box
       display="flex"
@@ -106,7 +112,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
       py={3}
       gap={1}
     >
-      {flow?.steps?.map((step, index) => (
+      {flow?.steps?.map((step, index, steps) => (
         <React.Fragment key={`${step}-${index}`}>
           <FlowStep
             key={step.id}
@@ -116,6 +122,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
             onOpen={() => setCurrentStepId(step.id)}
             onClose={() => setCurrentStepId(null)}
             onChange={onStepChange}
+            onContinue={openNextStep(steps[index + 1])}
           />
 
           <IconButton onClick={() => addStep(step.id)} color="primary" disabled={creationInProgress || flow.active}>

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

@@ -42,6 +42,7 @@ type FlowStepProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onChange: (step: IStep) => void;
+  onContinue?: () => void;
 };
 
 const validIcon = <CheckCircleIcon color="success" />;
@@ -99,7 +100,7 @@ function generateValidationSchema(substeps: ISubstep[]) {
 export default function FlowStep(
   props: FlowStepProps
 ): React.ReactElement | null {
-  const { collapsed, onChange } = props;
+  const { collapsed, onChange, onContinue } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef<HTMLButtonElement | null>(null);
   const step: IStep = props.step;
@@ -273,6 +274,7 @@ export default function FlowStep(
                             onCollapse={() => toggleSubstep(index + 1)}
                             onSubmit={expandNextStep}
                             onChange={handleChange}
+                            onContinue={onContinue}
                             step={step}
                           />
                         )}

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

@@ -54,8 +54,6 @@ const PowerInput = (props: PowerInputProps) => {
   } = props;
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef<HTMLDivElement | null>(null);
-  const [target, setTarget] = React.useState<Range | null>(null);
-  const [index, setIndex] = React.useState(0);
   const renderElement = React.useCallback(props => <Element {...props} />, []);
   const [editor] = React.useState(() => customizeEditor(createEditor()));
   const [showVariableSuggestions, setShowVariableSuggestions] = React.useState(false);
@@ -72,7 +70,7 @@ const PowerInput = (props: PowerInputProps) => {
     (variable: Pick<VariableElement, "name" | "value">) => {
         insertVariable(editor, variable, stepsWithVariables);
     },
-    [index, stepsWithVariables]
+    [stepsWithVariables]
   );
 
   return (

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

@@ -21,6 +21,7 @@ type TestSubstepProps = {
   onCollapse: () => void;
   onChange?: ({ step }: { step: IStep }) => void;
   onSubmit?: () => void;
+  onContinue?: () => void;
   step: IStep;
 };
 
@@ -31,6 +32,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
     onExpand,
     onCollapse,
     onSubmit,
+    onContinue,
     step,
   } = props;
 
@@ -53,14 +55,20 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
   }, [expanded, reset])
 
   const handleSubmit = React.useCallback(() => {
+    if (isCompleted) {
+      onContinue?.();
+
+      return;
+    }
+
     executeFlow({
       variables: {
         input: {
           stepId: step.id,
         },
       },
-    })
-  }, [onSubmit, step.id]);
+    });
+  }, [onSubmit, onContinue, isCompleted, step.id]);
   const onToggle = expanded ? onCollapse : onExpand;
 
   return (