feat: edit logic to determine approval branch in step metadata context

Author: pregnantboy

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

@@ -77,6 +77,7 @@ export default function FlowStep(
     substeps,
     shouldShowDragHandle,
     isDeletable,
+    approvalBranch,
   } = useStepMetadata(step, true)
 
   const {
@@ -161,8 +162,6 @@ export default function FlowStep(
   // are removed once user executes a successful test
   const hasInfoBox = shouldShowTemplateMsg || shouldTestStepAgain
 
-  const approvalBranch = step.config.approval?.branch
-
   if (!allApps) {
     return <CircularProgress isIndeterminate my={2} />
   }
@@ -236,7 +235,7 @@ export default function FlowStep(
               w={headerWidth}
               // approval branch can be approve, reject or undefined
               // boxShadow specified in theme/foundations/shadows.ts
-              boxShadow={isNested ? 'none' : approvalBranch}
+              boxShadow={isNested ? 'none' : approvalBranch ?? undefined}
             >
               <Flex {...flowStepStyles.topHeader} onClick={handleClick}>
                 <StepAppIcon

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
@@ -70,8 +72,6 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
     (step) => step.key === TOOLBOX_ACTIONS.ForEach,
   )
 
-  const approvalBranch = groupedSteps[0]?.[0]?.config?.approval?.branch
-
   return (
     <Flex
       w={
@@ -90,7 +90,7 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
         // 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}
+        boxShadow={approvalBranch ?? undefined}
       >
         <Box {...flowStepGroupStyles.header} w="100%">
           <Flex

packages/frontend/src/helpers/formsg.ts

@@ -36,11 +36,11 @@ export function getMrfApprovalConfig({
   }
 
   /**
-   * If previous step is an approval step, check which branch it's currently set to
+   * If previous step is an approval step and is set to reject, return the reject branch
    */
-  if (previousStep.id in approvalBranches) {
+  if (approvalBranches[previousStep.id] === 'reject') {
     return {
-      branch: approvalBranches[previousStep.id],
+      branch: 'reject',
       stepId: previousStep.id,
     }
   }

packages/frontend/src/hooks/useStepMetadata.ts

@@ -1,10 +1,16 @@
-import { IAction, IApp, IStep, ISubstep, ITrigger } from '@plumber/types'
+import {
+  IAction,
+  IApp,
+  IStep,
+  IStepApprovalBranch,
+  ISubstep,
+  ITrigger,
+} from '@plumber/types'
 
 import { useContext, useMemo } from 'react'
-import get from 'lodash/get'
 
 import { EditorContext } from '@/contexts/Editor'
-import { FORMSG_APP_KEY, MRF_ACTION_KEY } from '@/helpers/formsg'
+import { MrfContext } from '@/contexts/MrfContext'
 import getStepName from '@/helpers/getStepName'
 import {
   isIfThenStep as checkIfThenStep,
@@ -27,6 +33,7 @@ interface UseStepMetadataResult {
   isDeletable: boolean
   isMrfStep: boolean
   isApprovalStep: boolean
+  approvalBranch: IStepApprovalBranch | null
 }
 
 export function useStepMetadata(
@@ -35,6 +42,7 @@ export function useStepMetadata(
 ): UseStepMetadataResult {
   const { readOnly, isMobile, isDrawerOpen, allApps } =
     useContext(EditorContext)
+  const { mrfSteps, approvalBranches } = useContext(MrfContext)
 
   const isCompleted = step?.status === 'completed'
   const isTrigger = step?.type === 'trigger'
@@ -75,11 +83,59 @@ export function useStepMetadata(
     [readOnly, selectedActionOrTrigger, step?.key],
   )
 
-  const isMrfStep =
-    step?.appKey === FORMSG_APP_KEY && step?.key === MRF_ACTION_KEY
+  const isMrfStep = useMemo(() => {
+    return mrfSteps.some((mrfStep) => mrfStep.id === step?.id)
+  }, [mrfSteps, step?.id])
+
+  const isApprovalStep = useMemo(() => {
+    if (!step?.id) {
+      return false
+    }
+    return approvalBranches[step.id] !== undefined
+  }, [approvalBranches, step?.id])
 
-  const isApprovalStep =
-    isMrfStep && !!get(step?.parameters, 'mrf.approvalField', false)
+  const approvalBranch = useMemo(() => {
+    // If step not instantiated, return null
+    if (!step) {
+      return null
+    }
+    // If not MRF workflow, return null
+    if (!mrfSteps.length || !step) {
+      return null
+    }
+    // If step is an MRF step, return null
+    if (isMrfStep) {
+      return null
+    }
+    if (step.config.approval?.branch === 'reject') {
+      return 'reject'
+    }
+    // Find the most immediate prior mrfStep by iterating from the last to the first.
+    let immediatePriorMrfStep = null
+    for (let i = mrfSteps.length - 1; i >= 0; i--) {
+      const mrfStep = mrfSteps[i]
+      if (mrfStep.position < step.position) {
+        immediatePriorMrfStep = mrfStep
+        break
+      }
+    }
+    // if is approval step, return whether
+    if (!immediatePriorMrfStep) {
+      console.warn(
+        'No immediate prior mrf step found... this should not happen tho',
+      )
+      return null
+    }
+    /**
+     * If no approval step config exists, but is part of an mrf branch,
+     * it's part of the approve branch by default
+     */
+    if (approvalBranches[immediatePriorMrfStep.id]) {
+      return 'approve'
+    }
+    // If follows a non-approval mrf step, return null
+    return null
+  }, [step, mrfSteps, isMrfStep, approvalBranches])
 
   /**
    * NOTE: there are various conditions that determine whether the drag handle
@@ -130,5 +186,6 @@ export function useStepMetadata(
     isDeletable,
     isMrfStep,
     isApprovalStep,
+    approvalBranch,
   }
 }