[MRF-12] PLU-520: (frontend) set approval config when creating step

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

@@ -39,7 +39,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

@@ -39,6 +39,10 @@ function updateHandlerFactory(flowId: string, previousStepId: string) {
         templateConfig: {
           appEventKey: null,
         },
+        approval: {
+          branch: createdStep?.config?.approval?.branch ?? null,
+          stepId: createdStep?.config?.approval?.stepId ?? null,
+        },
       },
       createdAt: new Date().toISOString(),
     }
@@ -65,9 +69,17 @@ export default function DuplicateStepButton(props: DuplicateStepButtonProps) {
   const { flow, isMobile, onDrawerOpen, setCurrentStepId } =
     useContext(EditorContext)
 
-  const [createStep] = useMutation(CREATE_STEP, { refetchQueries: [GET_FLOW] })
-
+  const [createStep] = useMutation(CREATE_STEP)
   const onDuplicateStep = useCallback(async () => {
+    const duplicateConfig = {
+      ...(step.config?.approval && {
+        approval: step.config?.approval,
+      }),
+      ...(step.config?.stepName && {
+        stepName: `[COPY] ${step.config.stepName}`,
+      }),
+    }
+
     const mutationInput = {
       previousStep: {
         id: step.id,
@@ -80,11 +92,7 @@ export default function DuplicateStepButton(props: DuplicateStepButtonProps) {
       key: step.key,
       connection: { id: step.connection?.id },
       parameters: { ...step.parameters },
-      ...(step.config?.stepName && {
-        config: {
-          stepName: `[COPY] ${step.config.stepName}`,
-        },
-      }),
+      config: duplicateConfig,
     }
 
     const createdStep = await createStep({

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

@@ -77,6 +77,7 @@ export default function FlowStep(
     substeps,
     shouldShowDragHandle,
     isDeletable,
+    approvalBranch,
   } = useStepMetadata(step, true)
 
   const {
@@ -232,6 +233,9 @@ export default function FlowStep(
               borderTopRadius={hasInfoBox ? 'none' : 'lg'}
               h={isNested ? '48px' : '64px'}
               w={headerWidth}
+              // approval branch can be approve, reject or undefined
+              // boxShadow specified in theme/foundations/shadows.ts
+              boxShadow={isNested ? 'none' : approvalBranch ?? undefined}
             >
               <Flex {...flowStepStyles.topHeader} onClick={handleClick}>
                 <StepAppIcon

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/index.tsx

@@ -4,7 +4,9 @@ import { useCallback, useContext, useMemo } from 'react'
 import { useQuery } from '@apollo/client'
 
 import { EditorContext } from '@/contexts/Editor'
+import { MrfContext } from '@/contexts/MrfContext'
 import { GET_APP_CONNECTIONS } from '@/graphql/queries/get-app-connections'
+import { getMrfApprovalConfig } from '@/helpers/formsg'
 
 import { EXCEL_APP_KEY } from '../constants'
 import { FlowStepConfigurationContext } from '../FlowStepConfigurationContext'
@@ -74,9 +76,11 @@ export default function ChooseAndAddConnection(
     setCurrentStepId,
     executeTestStep,
   } = useContext(EditorContext)
-  const { modalState, patchModalState, step, prevStepId } = useContext(
+  const { modalState, patchModalState, step, prevStep } = useContext(
     FlowStepConfigurationContext,
   )
+
+  const { approvalBranches } = useContext(MrfContext)
   const { currentScreen, selectedApp, selectedEvent } = modalState
 
   const {
@@ -125,12 +129,17 @@ export default function ChooseAndAddConnection(
       patchModalState({ isLoading: true })
       let newStepId = null
       try {
-        if (prevStepId) {
+        if (prevStep) {
+          const approvalConfig = getMrfApprovalConfig({
+            previousStep: prevStep,
+            approvalBranches: approvalBranches,
+          })
           const createdStep = await onCreateStep(
-            prevStepId,
+            prevStep.id,
             selectedApp.key,
             selectedEvent.key,
             connectionId,
+            { approval: approvalConfig },
           )
           newStepId = createdStep.id
         } else if (step) {
@@ -162,11 +171,12 @@ export default function ChooseAndAddConnection(
       selectedApp,
       selectedEvent,
       patchModalState,
-      prevStepId,
+      prevStep,
       step,
       onClose,
       onDrawerOpen,
       setCurrentStepId,
+      approvalBranches,
       onCreateStep,
       onUpdateStep,
       executeTestStep,

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/index.tsx

@@ -4,7 +4,9 @@ import { useCallback, useContext, useMemo } from 'react'
 import { useQuery } from '@apollo/client'
 
 import { EditorContext } from '@/contexts/Editor'
+import { MrfContext } from '@/contexts/MrfContext'
 import { GET_APP_CONNECTIONS } from '@/graphql/queries/get-app-connections'
+import { getMrfApprovalConfig } from '@/helpers/formsg'
 import {
   TOOLBOX_ACTIONS,
   TOOLBOX_APP_KEY,
@@ -34,8 +36,10 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
     flowId,
   } = useContext(EditorContext)
 
-  const { modalState, patchModalState, prevStepId, isTrigger, step } =
-    useContext(FlowStepConfigurationContext)
+  const { modalState, patchModalState, prevStep, isTrigger, step } = useContext(
+    FlowStepConfigurationContext,
+  )
+  const { approvalBranches } = useContext(MrfContext)
 
   const { currentScreen, selectedApp } = modalState
 
@@ -106,12 +110,17 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
       patchModalState({ isLoading: true })
       let newStepId = null
       try {
-        if (prevStepId) {
+        if (prevStep) {
+          const approvalConfig = getMrfApprovalConfig({
+            previousStep: prevStep,
+            approvalBranches: approvalBranches,
+          })
           const createdStep = await onCreateStep(
-            prevStepId,
+            prevStep.id,
             app.key,
             triggerOrAction.key,
             excelConnection?.id || undefined,
+            { approval: approvalConfig },
           )
           newStepId = createdStep.id
         } else if (step) {
@@ -147,11 +156,12 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
       excelConnection?.verified,
       excelConnection?.id,
       patchModalState,
-      prevStepId,
+      prevStep,
       step,
       onClose,
       onDrawerOpen,
       setCurrentStepId,
+      approvalBranches,
       onCreateStep,
       initializeIfThen,
       onUpdateStep,

packages/frontend/src/components/FlowStepGroup/Content/IfThen/useDuplicateBranch.tsx

@@ -61,6 +61,9 @@ export default function useDuplicateBranch(branchSteps: IStep[]) {
               ...restParameters,
               ...(branchName && { branchName: newBranchName }),
             },
+            config: {
+              approval: step.config?.approval,
+            },
           }
         }),
       }

packages/frontend/src/components/FlowStepGroup/index.tsx

@@ -9,6 +9,7 @@ import { NESTED_DRAG_HANDLE_WIDTH } from '@/components/SortableList/components/S
 import { EditorContext } from '@/contexts/Editor'
 import { getFlowStepHeaderWidth, getToolboxIcon } from '@/helpers/editor'
 import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
+import { useStepMetadata } from '@/hooks/useStepMetadata'
 
 import { MIN_FLOW_STEP_WIDTH } from '../Editor/constants'
 
@@ -27,6 +28,7 @@ interface FlowStepGroupProps {
 export default function FlowStepGroup(props: FlowStepGroupProps) {
   const { groupedSteps, stepsBeforeGroup } = props
   const { isDrawerOpen, isMobile, onDrawerClose } = useContext(EditorContext)
+  const { approvalBranch } = useStepMetadata(groupedSteps[0]?.[0])
 
   const { stepGroupType, stepGroupCaption } = useMemo(() => {
     let stepGroupType: string | null = null
@@ -85,6 +87,10 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
         display={isMobile ? 'block' : 'flex'}
         w={getFlowStepHeaderWidth(isDrawerOpen, isMobile)}
         minW={MIN_FLOW_STEP_WIDTH}
+        // approval branch can be approve, reject or undefined
+        // boxShadow specified in theme/foundations/shadows.ts
+        // we display for entire group instead of individual nested steps
+        boxShadow={approvalBranch ?? undefined}
       >
         <Box {...flowStepGroupStyles.header} w="100%">
           <Flex

packages/frontend/src/contexts/Editor.tsx

@@ -1,4 +1,10 @@
-import type { IApp, IExecutionStep, IFlow, IStep } from '@plumber/types'
+import type {
+  IApp,
+  IExecutionStep,
+  IFlow,
+  IStep,
+  IStepConfig,
+} from '@plumber/types'
 
 import {
   createContext,
@@ -67,6 +73,7 @@ interface IEditorContextValue {
     appKey: string,
     eventKey: string,
     connectionId?: string,
+    config?: IStepConfig,
   ) => Promise<IStep>
   onUpdateStep: (step: IStep, onCompleted?: () => void) => Promise<IStep>
   allApps: IApp[]
@@ -200,6 +207,7 @@ export const EditorProvider = ({
       appKey: string,
       eventKey: string,
       connectionId?: string,
+      config?: IStepConfig,
     ) => {
       const mutationInput = {
         previousStep: {
@@ -212,6 +220,7 @@ export const EditorProvider = ({
         appKey,
         key: eventKey,
         connection: { id: connectionId },
+        config,
       }
 
       const createdStep = await createStep({

packages/frontend/src/helpers/formsg.ts

@@ -1,3 +1,52 @@
+import { IStep, IStepApprovalBranch, IStepApprovalConfig } from '@plumber/types'
+
 export const MRF_ACTION_KEY = 'mrfSubmission'
 export const FORMSG_APP_KEY = 'formsg'
 export const FORMSG_TRIGGER_KEY = 'newSubmission'
+
+/**
+ * Helper function to check if the step to be created is within an MRF approval branch
+ */
+export function getMrfApprovalConfig({
+  previousStep,
+  approvalBranches,
+}: {
+  previousStep: IStep
+  approvalBranches: Record<string, IStepApprovalBranch>
+}): IStepApprovalConfig | undefined {
+  /**
+   * If step to be created is a trigger, return undefined always
+   */
+  if (!previousStep) {
+    return undefined
+  }
+
+  /**
+   * If previous step is an action step within an approval branch,
+   * return the same approval branch and step id
+   */
+  if (
+    previousStep.config?.approval?.branch &&
+    previousStep.config?.approval?.stepId
+  ) {
+    return {
+      branch: previousStep.config?.approval?.branch,
+      stepId: previousStep.config?.approval?.stepId,
+    }
+  }
+
+  /**
+   * If previous step is an approval step and is set to reject, return the reject branch
+   */
+  if (approvalBranches[previousStep.id] === 'reject') {
+    return {
+      branch: 'reject',
+      stepId: previousStep.id,
+    }
+  }
+
+  /**
+   * Default: undefined
+   */
+  return undefined
+}

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: {
@@ -168,6 +174,7 @@ export function useIfThenInitializer(): [
             connection: {
               id: null,
             },
+            // no need to set config here since it's already set
           },
         },
       })
@@ -188,6 +195,7 @@ export function useIfThenInitializer(): [
               depth,
               branchName: 'Branch 2',
             },
+            config: commonConfig,
           },
         },
       })
@@ -213,6 +221,7 @@ export function useIfThenInitializer(): [
               id: currStep.flowId,
               updatedAt: createdSecondBranch.flow.updatedAt,
             },
+            config: commonConfig,
           },
         },
       })
@@ -227,6 +236,7 @@ export function useIfThenInitializer(): [
               id: currStep.flowId,
               updatedAt: createdFirstStep?.flow?.updatedAt,
             },
+            config: commonConfig,
           },
         },
       })