feat: modify approval branch state in context

Author: pregnantboy

packages/frontend/src/components/Editor/FlowStepWithAddButton.tsx

@@ -44,7 +44,7 @@ export default function FlowStepWithAddButton({
         // only allow reordering if there are more than 1 action steps
         allowReorder={true}
       />
-      {isApprovalStep && <ApproveReject />}
+      {isApprovalStep && <ApproveReject stepId={step.id} />}
       <AddStepButton
         isLastStep={isLastStep}
         step={step}

packages/frontend/src/components/FlowStep/components/ApproveReject.tsx

@@ -1,6 +1,8 @@
-import { useState } from 'react'
+import { useCallback, useContext } from 'react'
 import { Flex, Tab, TabList, TabProps, Tabs } from '@chakra-ui/react'
 
+import { MrfContext } from '@/contexts/MrfContext'
+
 const tabStyle = (primaryColor: string): TabProps => {
   return {
     _selected: {
@@ -21,19 +23,28 @@ const tabStyle = (primaryColor: string): TabProps => {
   }
 }
 
-export function ApproveReject() {
-  const [isApprovedSelected, setIsApprovedSelected] = useState(true)
+export function ApproveReject({ stepId }: { stepId: string }) {
+  const { approvalBranches, setApprovalBranch } = useContext(MrfContext)
+
+  const isApproveBranch = approvalBranches[stepId] === 'approve'
+
+  const onChange = useCallback(
+    (index: number) => {
+      setApprovalBranch(stepId, index === 0 ? 'approve' : 'reject')
+    },
+    [stepId, setApprovalBranch],
+  )
 
   return (
     <Flex mt={4} mx="auto">
       <Tabs
         variant="soft-rounded"
-        index={isApprovedSelected ? 0 : 1}
+        index={isApproveBranch ? 0 : 1}
         backgroundColor="base.divider.medium"
         borderRadius="full"
         py={1}
         px={0.5}
-        onChange={(index) => setIsApprovedSelected(index === 0)}
+        onChange={onChange}
       >
         <TabList gap={2}>
           <Tab {...tabStyle('green.500')}>If approved</Tab>

packages/frontend/src/components/FlowStep/components/DuplicateStepButton.tsx

@@ -71,9 +71,13 @@ export default function DuplicateStepButton(props: DuplicateStepButtonProps) {
 
   const [createStep] = useMutation(CREATE_STEP)
   const onDuplicateStep = useCallback(async () => {
-    const duplicateConfig = { ...step.config }
-    if (step.config?.stepName) {
-      duplicateConfig.stepName = `[COPY] ${step.config.stepName}`
+    const duplicateConfig = {
+      ...(step.config?.approval && {
+        approval: step.config?.approval,
+      }),
+      ...(step.config?.stepName && {
+        stepName: `[COPY] ${step.config.stepName}`,
+      }),
     }
 
     const mutationInput = {

packages/frontend/src/helpers/toolbox.ts

@@ -151,6 +151,12 @@ export function useIfThenInitializer(): [
     async (currStep: IStep) => {
       setIsInitializing(true)
 
+      const commonConfig = {
+        ...(currStep.config?.approval && {
+          approval: currStep.config?.approval,
+        }),
+      }
+
       const updateFirstBranch = await updateStep({
         variables: {
           input: {
@@ -167,6 +173,7 @@ export function useIfThenInitializer(): [
             connection: {
               id: null,
             },
+            // no need to set config here since it's already set
           },
         },
       })
@@ -185,9 +192,7 @@ export function useIfThenInitializer(): [
               depth,
               branchName: 'Branch 2',
             },
-            config: {
-              approval: currStep.config?.approval,
-            },
+            config: commonConfig,
           },
         },
       })
@@ -211,6 +216,7 @@ export function useIfThenInitializer(): [
             flow: {
               id: currStep.flowId,
             },
+            config: commonConfig,
           },
         },
       })
@@ -223,6 +229,7 @@ export function useIfThenInitializer(): [
             flow: {
               id: currStep.flowId,
             },
+            config: commonConfig,
           },
         },
       })