feat: hide steps depending on approval branch, show disabled mrf step

Author: pregnantboy

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

@@ -1,13 +1,16 @@
 import { IStep } from '@plumber/types'
 
+import { useContext, useMemo } from 'react'
 import { BiPlus } from 'react-icons/bi'
 import { Box, Divider, useDisclosure } from '@chakra-ui/react'
 import { IconButton, TouchableTooltip } from '@opengovsg/design-system-react'
 
 import EmptyFlowStepHeader from '@/components/EmptyFlowStepHeader'
 import FlowStepConfigurationModal from '@/components/FlowStepConfigurationModal'
+import { MrfContext } from '@/contexts/MrfContext'
 import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'
 
+import { DisabledFlowStep } from './DisabledFlowStep'
 import UnsavedChangesAlert from './UnsavedChangesAlert'
 
 interface AddStepButtonProps {
@@ -21,6 +24,28 @@ interface AddStepButtonProps {
 export function AddStepButton(props: AddStepButtonProps): JSX.Element {
   const { isHidden, isLastStep, step, isDisabled, showEmptyAction } = props
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { approvalBranches, disabledMrfStepToDisplay } = useContext(MrfContext)
+  const approvalBranch =
+    step.config.approval?.branch || approvalBranches[step.id]
+
+  const { dividerColor, iconBgColor } = useMemo(() => {
+    if (approvalBranch === undefined) {
+      return {
+        dividerColor: 'base.divider.strong',
+        iconBgColor: undefined,
+      }
+    }
+    if (approvalBranch === 'approve') {
+      return {
+        dividerColor: 'green.500',
+        iconBgColor: 'green.50',
+      }
+    }
+    return {
+      dividerColor: 'red.500',
+      iconBgColor: 'red.50',
+    }
+  }, [approvalBranch])
 
   const {
     cancelRef,
@@ -32,14 +57,29 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
     onProceed: onOpen,
   })
 
+  const shouldShowDisabledMrfStep = isLastStep && disabledMrfStepToDisplay
+  const containerHeight = useMemo(() => {
+    if (showEmptyAction) {
+      return undefined
+    }
+    if (isHidden) {
+      return 12
+    }
+    if (shouldShowDisabledMrfStep) {
+      return 36
+    }
+    return 16
+  }, [showEmptyAction, isHidden, shouldShowDisabledMrfStep])
+
   return (
     <Box
       pos="relative"
       display="flex"
       flexDir="column"
       alignItems="center"
       alignSelf="stretch"
-      h={showEmptyAction ? undefined : isHidden ? 12 : 16}
+      h={containerHeight}
+      w="100%"
     >
       {isHidden || (isDisabled && !isLastStep) ? (
         !isLastStep && (
@@ -65,7 +105,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
           )}
           {/* Top vertical line */}
           <Box h={6}>
-            <Divider orientation="vertical" borderColor="base.divider.strong" />
+            <Divider orientation="vertical" borderColor={dividerColor} />
           </Box>
           <TouchableTooltip
             label={isDisabled ? '' : 'Add step'}
@@ -81,6 +121,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
               variant={isLastStep ? 'outline' : 'clear'}
               size="xs"
               color="interaction.sub.default"
+              bg={iconBgColor}
               borderRadius="full"
               pointerEvents={isDisabled ? 'none' : 'auto'}
               _hover={{
@@ -89,20 +130,26 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
               _active={{
                 bg: 'interaction.muted.neutral.active',
               }}
-              borderColor={isLastStep ? 'interaction.sub.default' : undefined}
+              borderColor={isLastStep ? dividerColor : undefined}
               h={8}
             />
           </TouchableTooltip>
           {/* Bottom vertical line */}
           {!isLastStep && (
             <Box h={6}>
-              <Divider
-                orientation="vertical"
-                borderColor="base.divider.strong"
-              />
+              <Divider orientation="vertical" borderColor={dividerColor} />
             </Box>
           )}
 
+          {shouldShowDisabledMrfStep && (
+            <DisabledFlowStep
+              step={disabledMrfStepToDisplay}
+              tooltipText={
+                'This step will only happen if the previous MRF step is approved'
+              }
+            />
+          )}
+
           {isOpen && (
             <FlowStepConfigurationModal
               onClose={onClose}

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

@@ -0,0 +1,54 @@
+import { IStep } from '@plumber/types'
+
+import { useContext } from 'react'
+import { Flex } from '@chakra-ui/react'
+import { TouchableTooltip } from '@opengovsg/design-system-react'
+
+import StepAppIcon from '@/components/FlowStep/components/StepAppIcon'
+import StepCaptionAndDemo from '@/components/FlowStep/components/StepCaptionAndDemo'
+import { flowStepStyles } from '@/components/FlowStep/styles'
+import { EditorContext } from '@/contexts/Editor'
+import { getFlowStepHeaderWidth } from '@/helpers/editor'
+import { useStepMetadata } from '@/hooks/useStepMetadata'
+
+interface DisabledFlowStepProps {
+  step: IStep
+  tooltipText: string
+}
+
+export function DisabledFlowStep(props: DisabledFlowStepProps) {
+  const { step, tooltipText } = props
+
+  const { allApps, isMobile, isDrawerOpen } = useContext(EditorContext)
+
+  const { app, caption } = useStepMetadata(allApps, step, true)
+  const headerWidth = getFlowStepHeaderWidth(isDrawerOpen, isMobile, false)
+
+  return (
+    <Flex
+      flexDir="row"
+      alignItems="center"
+      width="100%"
+      display={isMobile ? 'block' : 'flex'}
+      my={4}
+    >
+      <TouchableTooltip label={tooltipText} wrapperStyles={{ width: '100%' }}>
+        <Flex
+          data-test="flow-step"
+          {...flowStepStyles.container}
+          h="64px"
+          w={headerWidth}
+        >
+          <Flex
+            {...flowStepStyles.topHeader}
+            opacity={0.4}
+            pointerEvents="none"
+          >
+            <StepAppIcon app={app} step={step} />
+            <StepCaptionAndDemo app={app} caption={caption} />
+          </Flex>
+        </Flex>
+      </TouchableTooltip>
+    </Flex>
+  )
+}

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

@@ -1,6 +1,7 @@
 import { useCallback, useContext } from 'react'
 import { Flex, Tab, TabList, TabProps, Tabs } from '@chakra-ui/react'
 
+import { EditorContext } from '@/contexts/Editor'
 import { MrfContext } from '@/contexts/MrfContext'
 
 const tabStyle = (primaryColor: string): TabProps => {
@@ -24,15 +25,18 @@ const tabStyle = (primaryColor: string): TabProps => {
 }
 
 export function ApproveReject({ stepId }: { stepId: string }) {
+  const { setCurrentStepId, onDrawerClose } = useContext(EditorContext)
   const { approvalBranches, setApprovalBranch } = useContext(MrfContext)
 
   const isApproveBranch = approvalBranches[stepId] === 'approve'
 
   const onChange = useCallback(
     (index: number) => {
       setApprovalBranch(stepId, index === 0 ? 'approve' : 'reject')
+      setCurrentStepId(null)
+      onDrawerClose()
     },
-    [stepId, setApprovalBranch],
+    [stepId, setApprovalBranch, setCurrentStepId, onDrawerClose],
   )
 
   return (

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

@@ -161,8 +161,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} />
   }
@@ -234,9 +232,6 @@ 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}
             >
               <Flex {...flowStepStyles.topHeader} onClick={handleClick}>
                 <StepAppIcon

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

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

packages/frontend/src/contexts/MrfContext.tsx

@@ -14,13 +14,15 @@ interface MrfContextReturnValue {
     [stepId: string]: IStepApprovalBranch
   }
   setApprovalBranch: (stepId: string, branch: IStepApprovalBranch) => void
+  disabledMrfStepToDisplay: IStep | null
 }
 
 export const MrfContext = createContext<MrfContextReturnValue>({
   mrfSteps: [],
   mrfApprovalSteps: [],
   approvalBranches: {},
   setApprovalBranch: () => null,
+  disabledMrfStepToDisplay: null,
 })
 
 interface MrfContextProviderProps {
@@ -30,6 +32,9 @@ interface MrfContextProviderProps {
 export const MrfContextProvider = ({ children }: MrfContextProviderProps) => {
   const { flow } = useContext(EditorContext)
 
+  const [disabledMrfStepToDisplay, setDisabledMrfStepToDisplay] =
+    useState<IStep | null>(null)
+
   const mrfSteps = flow.steps.filter(
     (step) => step.appKey === FORMSG_APP_KEY && step.key === MRF_ACTION_KEY,
   )
@@ -52,6 +57,13 @@ export const MrfContextProvider = ({ children }: MrfContextProviderProps) => {
       ...prev,
       [stepId]: branch,
     }))
+    if (branch === 'reject') {
+      const nextMrfStepId =
+        mrfSteps[mrfSteps.findIndex((mrfStep) => mrfStep.id === stepId) + 1]
+      setDisabledMrfStepToDisplay(nextMrfStepId ?? null)
+    } else {
+      setDisabledMrfStepToDisplay(null)
+    }
   }
 
   return (
@@ -61,6 +73,7 @@ export const MrfContextProvider = ({ children }: MrfContextProviderProps) => {
         mrfApprovalSteps,
         approvalBranches,
         setApprovalBranch,
+        disabledMrfStepToDisplay,
       }}
     >
       {children}

packages/frontend/src/contexts/StepsToDisplay.tsx

@@ -6,6 +6,7 @@ import { createContext, useContext, useMemo } from 'react'
 import { extractBranchesWithSteps } from '@/helpers/toolbox'
 
 import { EditorContext } from './Editor'
+import { MrfContext } from './MrfContext'
 
 export type StepToDisplayContextValue = {
   triggerStep: IStep | null
@@ -31,8 +32,38 @@ export function StepsToDisplayProvider({
   children,
 }: StepExecutionsProviderProps): JSX.Element {
   const { allApps, flow } = useContext(EditorContext)
+  const { approvalBranches } = useContext(MrfContext)
 
-  const steps = flow.steps
+  const allSteps = flow.steps
+
+  const stepsToDisplay = useMemo(() => {
+    let firstRejectBranchStepId: string | null = null
+    return allSteps.filter((step) => {
+      if (
+        firstRejectBranchStepId != null &&
+        step.config?.approval?.stepId !== firstRejectBranchStepId
+      ) {
+        return false
+      }
+
+      if (!firstRejectBranchStepId && approvalBranches[step.id] === 'reject') {
+        firstRejectBranchStepId = step.id
+        return true
+      }
+
+      if (!step.config?.approval) {
+        return true
+      }
+
+      const approvalConfigStepId = step.config?.approval?.stepId
+      const approvalConfigBranch = step.config?.approval?.branch
+
+      if (approvalBranches[approvalConfigStepId] === approvalConfigBranch) {
+        return true
+      }
+      return false
+    })
+  }, [allSteps, approvalBranches])
 
   const appsWithActions: IApp[] = allApps.filter(
     (app: IApp) => !!app.actions?.length,
@@ -57,7 +88,7 @@ export function StepsToDisplayProvider({
       return [null, [], []]
     }
 
-    const groupStepIdx = steps.findIndex((step, index) => {
+    const groupStepIdx = stepsToDisplay.findIndex((step, index) => {
       if (
         // We ignore the 1st step because it's either a trigger, or a
         // step-grouping action that is using a nested Editor to edit steps in
@@ -73,15 +104,18 @@ export function StepsToDisplayProvider({
 
     let branchesWithSteps: IStep[][] = []
     if (groupStepIdx !== -1) {
-      branchesWithSteps = extractBranchesWithSteps(steps.slice(groupStepIdx), 0)
+      branchesWithSteps = extractBranchesWithSteps(
+        stepsToDisplay.slice(groupStepIdx),
+        0,
+      )
     }
 
-    const triggerStep = steps[0]
+    const triggerStep = stepsToDisplay[0]
 
     return groupStepIdx === -1
-      ? [triggerStep, steps.slice(1), []]
-      : [triggerStep, steps.slice(1, groupStepIdx), branchesWithSteps]
-  }, [groupingActions, steps])
+      ? [triggerStep, stepsToDisplay.slice(1), []]
+      : [triggerStep, stepsToDisplay.slice(1, groupStepIdx), branchesWithSteps]
+  }, [groupingActions, stepsToDisplay])
 
   return (
     <StepsToDisplayContext.Provider