[MRF-10] PLU-520: pass prevStep instead of prevStepId

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

@@ -1,3 +1,5 @@
+import { IStep } from '@plumber/types'
+
 import { BiPlus } from 'react-icons/bi'
 import { Box, Divider, useDisclosure } from '@chakra-ui/react'
 import { IconButton, TouchableTooltip } from '@opengovsg/design-system-react'
@@ -14,11 +16,11 @@ interface AddStepButtonProps {
   isDisabled: boolean
   isLastStep: boolean
   showEmptyAction: boolean
-  stepId: string
+  step: IStep
 }
 
 export function AddStepButton(props: AddStepButtonProps): JSX.Element {
-  const { isHidden, isLastStep, stepId, isDisabled, showEmptyAction } = props
+  const { isHidden, isLastStep, step, isDisabled, showEmptyAction } = props
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   const {
@@ -107,7 +109,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
               onClose={onClose}
               isTrigger={false} // Can only add an action all the time
               isLastStep={isLastStep}
-              prevStepId={stepId}
+              prevStep={step}
             />
           )}
         </>

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

@@ -42,7 +42,7 @@ export default function FlowStepWithAddButton({
       {isApprovalStep && <ApproveReject />}
       <AddStepButton
         isLastStep={isLastStep}
-        stepId={step.id}
+        step={step}
         isHidden={isHidden}
         isDisabled={isDisabled}
         showEmptyAction={showEmptyAction}

packages/frontend/src/components/FlowStepConfigurationModal/FlowStepConfigurationContext.tsx

@@ -9,6 +9,7 @@ interface FlowStepConfigurationContextValue {
   patchModalState: (modalState: Partial<ModalState>) => void
   isTrigger: boolean
   isLastStep: boolean
+  prevStep?: IStep
   prevStepId?: string
   step?: IStep
 }
@@ -49,7 +50,7 @@ interface FlowStepConfigurationContextProps {
   event?: ITrigger | IAction
   isTrigger: boolean
   isLastStep: boolean
-  prevStepId?: string
+  prevStep?: IStep
   children: React.ReactNode
 }
 
@@ -59,7 +60,7 @@ export const FlowStepConfigurationContextProvider = ({
   event,
   isTrigger,
   isLastStep,
-  prevStepId,
+  prevStep,
   children,
 }: FlowStepConfigurationContextProps) => {
   const [modalState, setModalState] = useState<ModalState>({
@@ -81,7 +82,8 @@ export const FlowStepConfigurationContextProvider = ({
         patchModalState,
         isTrigger,
         isLastStep,
-        prevStepId,
+        prevStep,
+        prevStepId: prevStep?.id,
         step,
       }}
     >

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

@@ -20,7 +20,7 @@ interface FlowStepConfigurationModalProps {
   step?: IStep
   app?: IApp
   event?: ITrigger | IAction
-  prevStepId?: string
+  prevStep?: IStep
 }
 
 function FlowStepConfigurationModalContent({
@@ -52,15 +52,15 @@ function FlowStepConfigurationModalContent({
 export default function FlowStepConfigurationModal(
   props: FlowStepConfigurationModalProps,
 ): JSX.Element {
-  const { onClose, isTrigger, isLastStep, step, app, event, prevStepId } = props
+  const { onClose, isTrigger, isLastStep, step, app, event, prevStep } = props
 
   return (
     <FlowStepConfigurationContextProvider
       isTrigger={isTrigger}
       isLastStep={isLastStep}
       app={app}
       event={event}
-      prevStepId={prevStepId}
+      prevStep={prevStep}
       step={step}
     >
       <Modal

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

@@ -18,7 +18,7 @@ interface HoverAddStepButtonProps {
   isDisabled: boolean
   isDrawerOpen: boolean
   isLastStep: boolean
-  prevStepId: string
+  prevStep: IStep
   showEmptyAction?: boolean
   step: IStep
   allowReorder?: boolean
@@ -31,7 +31,7 @@ export function HoverAddStepButton(
   const {
     isDisabled,
     isLastStep,
-    prevStepId,
+    prevStep,
     showEmptyAction,
     step,
     allowReorder,
@@ -108,7 +108,7 @@ export function HoverAddStepButton(
           onClose={onClose}
           isTrigger={false} // Can only add an action all the time
           isLastStep={isLastStep}
-          prevStepId={prevStepId}
+          prevStep={prevStep}
         />
       )}
 

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

@@ -46,7 +46,7 @@ export default function GroupStepWithAddButton(
           isDisabled={readOnly || !canAddStep}
           isDrawerOpen={isDrawerOpen}
           isLastStep={isLastStep}
-          prevStepId={step.id}
+          prevStep={step}
           showEmptyAction={showEmptyAction}
           step={step}
           allowReorder={allowReorder}

packages/frontend/src/contexts/MrfContext.tsx

@@ -1,28 +1,25 @@
-import { IStep } from '@plumber/types'
+import { IStep, IStepApprovalBranch } from '@plumber/types'
 
-import { createContext, useContext, useState } from 'react'
+import { createContext, useState } from 'react'
+import get from 'lodash/get'
 
 import { FORMSG_APP_KEY, MRF_ACTION_KEY } from '@/helpers/formsg'
 
-type ApprovalBranch = 'approve' | 'reject'
-
 interface MrfContextReturnValue {
   mrfSteps: IStep[]
+  mrfApprovalSteps: IStep[]
   approvalBranches: {
-    [stepId: string]: ApprovalBranch
+    [stepId: string]: IStepApprovalBranch
   }
-  setApprovalBranch: (stepId: string, branch: ApprovalBranch) => void
+  setApprovalBranch: (stepId: string, branch: IStepApprovalBranch) => void
 }
 
-const MrfContext = createContext<MrfContextReturnValue | undefined>(undefined)
-
-export const useMrfContext = () => {
-  const context = useContext(MrfContext)
-  if (!context) {
-    throw new Error('useMrfContext must be used within a MrfContextProvider')
-  }
-  return context
-}
+export const MrfContext = createContext<MrfContextReturnValue>({
+  mrfSteps: [],
+  mrfApprovalSteps: [],
+  approvalBranches: {},
+  setApprovalBranch: () => null,
+})
 
 interface MrfContextProviderProps {
   children: React.ReactNode
@@ -37,16 +34,20 @@ export const MrfContextProvider = ({
     (step) => step.appKey === FORMSG_APP_KEY && step.key === MRF_ACTION_KEY,
   )
 
+  const mrfApprovalSteps = mrfSteps.filter(
+    (step) => !!get(step.parameters, 'mrf.approvalField', false),
+  )
+
   const [approvalBranches, setApprovalBranches] = useState<
-    Record<string, ApprovalBranch>
+    Record<string, IStepApprovalBranch>
   >({
-    ...mrfSteps.reduce((acc, step) => {
+    ...mrfApprovalSteps.reduce((acc, step) => {
       acc[step.id] = 'approve'
       return acc
-    }, {} as Record<string, ApprovalBranch>),
+    }, {} as Record<string, IStepApprovalBranch>),
   })
 
-  const setApprovalBranch = (stepId: string, branch: ApprovalBranch) => {
+  const setApprovalBranch = (stepId: string, branch: IStepApprovalBranch) => {
     setApprovalBranches((prev) => ({
       ...prev,
       [stepId]: branch,
@@ -57,6 +58,7 @@ export const MrfContextProvider = ({
     <MrfContext.Provider
       value={{
         mrfSteps,
+        mrfApprovalSteps,
         approvalBranches,
         setApprovalBranch,
       }}

packages/types/index.d.ts

@@ -166,6 +166,8 @@ export interface IExecution {
   createdAt: string
 }
 
+export type IStepApprovalBranch = 'approve' | 'reject'
+
 export interface IStepConfig {
   stepName?: string
   templateConfig?: IStepTemplateConfig