feat: hide steps depending on approval branch

Author: pregnantboy

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

@@ -1,11 +1,13 @@
 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 UnsavedChangesAlert from './UnsavedChangesAlert'
@@ -21,6 +23,28 @@ interface AddStepButtonProps {
 export function AddStepButton(props: AddStepButtonProps): JSX.Element {
   const { isHidden, isLastStep, step, isDisabled, showEmptyAction } = props
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const { approvalBranches } = 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,
@@ -65,7 +89,11 @@ 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}
+              boxShadow={approvalBranch}
+            />
           </Box>
           <TouchableTooltip
             label={isDisabled ? '' : 'Add step'}
@@ -81,6 +109,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={{
@@ -98,7 +127,8 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
             <Box h={6}>
               <Divider
                 orientation="vertical"
-                borderColor="base.divider.strong"
+                borderColor={dividerColor}
+                boxShadow={approvalBranch}
               />
             </Box>
           )}

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/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,26 @@ 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 = allSteps.filter((step) => {
+    if (!step.config?.approval) {
+      return true
+    }
+    const approvalConfigStepId = step.config.approval.stepId
+    const approvalConfigBranch = step.config.approval.branch
+    console.log({
+      approvalConfigStepId,
+      approvalConfigBranch,
+      currentBranch: approvalBranches[approvalConfigStepId],
+    })
+    if (approvalBranches[approvalConfigStepId] === approvalConfigBranch) {
+      return true
+    }
+    return false
+  })
 
   const appsWithActions: IApp[] = allApps.filter(
     (app: IApp) => !!app.actions?.length,
@@ -57,7 +76,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 +92,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