From ed0d22dcd745e35921db981d0d53e74200b10e73 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Fri, 23 Sep 2022 18:10:26 +0200
Subject: [PATCH] fix(Editor): open new step upon step creation

---
 packages/web/src/components/Editor/index.tsx   | 18 ++++++++++++------
 .../web/src/graphql/mutations/create-step.ts   |  1 +
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/Editor/index.tsx b/packages/web/src/components/Editor/index.tsx
index 3715bbb3..9b10094a 100644
--- a/packages/web/src/components/Editor/index.tsx
+++ b/packages/web/src/components/Editor/index.tsx
@@ -41,8 +41,11 @@ function updateHandlerFactory(flowId: string, previousStepId: string) {
 export default function Editor(props: EditorProps): React.ReactElement {
   const [updateStep] = useMutation(UPDATE_STEP);
   const [createStep, { loading: creationInProgress }] = useMutation(CREATE_STEP);
-  const [currentStep, setCurrentStep] = React.useState<number | null>(0);
+
   const { flow } = props;
+  const [triggerStep] = flow.steps;
+
+  const [currentStepId, setCurrentStepId] = React.useState<string | null>(triggerStep.id);
 
   const onStepChange = React.useCallback(
     (step: any) => {
@@ -68,7 +71,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
   );
 
   const addStep = React.useCallback(
-    (previousStepId) => {
+    async (previousStepId) => {
       const mutationInput = {
         previousStep: {
           id: previousStepId,
@@ -78,10 +81,13 @@ export default function Editor(props: EditorProps): React.ReactElement {
         },
       };
 
-      createStep({
+      const createdStep = await createStep({
         variables: { input: mutationInput },
         update: updateHandlerFactory(flow.id, previousStepId),
       });
+      const createdStepId = createdStep.data.createStep.id;
+
+      setCurrentStepId(createdStepId);
     },
     [createStep, flow.id]
   );
@@ -102,9 +108,9 @@ export default function Editor(props: EditorProps): React.ReactElement {
             key={step.id}
             step={step}
             index={index + 1}
-            collapsed={currentStep !== index}
-            onOpen={() => setCurrentStep(index)}
-            onClose={() => setCurrentStep(null)}
+            collapsed={currentStepId !== step.id}
+            onOpen={() => setCurrentStepId(step.id)}
+            onClose={() => setCurrentStepId(null)}
             onChange={onStepChange}
           />
 
diff --git a/packages/web/src/graphql/mutations/create-step.ts b/packages/web/src/graphql/mutations/create-step.ts
index 59bf3b91..72d1e4c1 100644
--- a/packages/web/src/graphql/mutations/create-step.ts
+++ b/packages/web/src/graphql/mutations/create-step.ts
@@ -8,6 +8,7 @@ export const CREATE_STEP = gql`
       key
       appKey
       parameters
+      position
       status
       connection {
         id