feat: show for-each in editor

Author: kevinkim-ogp

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

@@ -29,6 +29,7 @@ import {
   TOOLBOX_ACTIONS,
   TOOLBOX_APP_KEY,
   useIfThenInitializer,
+  useIsForEachSelectable,
   useIsIfThenSelectable,
 } from '@/helpers/toolbox'
 
@@ -78,6 +79,7 @@ export default function ChooseApp(props: ChooseAppProps) {
     [onSelectApp, onSelectAppEvent],
   )
 
+  const isForEachSelectable = useIsForEachSelectable({ isLastStep })
   const isIfThenSelectable = useIsIfThenSelectable({ isLastStep })
   const toolboxActionsToDisplay = useMemo(() => {
     if (isLoading || !launchDarkly.flags) {
@@ -273,8 +275,10 @@ export default function ChooseApp(props: ChooseAppProps) {
                           action={action}
                           onSelectAppEvent={() => onSelectAppEvent(app, action)}
                           isDisabled={
-                            action.key === TOOLBOX_ACTIONS.IfThen &&
-                            !isIfThenSelectable
+                            (action.key === TOOLBOX_ACTIONS.IfThen &&
+                              !isIfThenSelectable) ||
+                            (action.key === TOOLBOX_ACTIONS.ForEach &&
+                              !isForEachSelectable)
                           }
                           searchQuery={searchQuery}
                         />

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

@@ -8,6 +8,7 @@ import { GET_APP_CONNECTIONS } from '@/graphql/queries/get-app-connections'
 import {
   TOOLBOX_ACTIONS,
   TOOLBOX_APP_KEY,
+  useForEachInitializer,
   useIfThenInitializer,
 } from '@/helpers/toolbox'
 
@@ -68,6 +69,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
     return excelConnections[0]
   }, [selectedApp, appConnectionsData])
 
+  const [initializeForEach] = useForEachInitializer()
   const [initializeIfThen] = useIfThenInitializer()
 
   /**
@@ -134,6 +136,11 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
           })
           newStepId = updatedStep.id
           newStepIndex = updatedStep.position - 1
+
+          // account for for-each
+          if (triggerOrAction.key === TOOLBOX_ACTIONS.ForEach) {
+            await initializeForEach(step)
+          }
         }
       }
       patchModalState({ isLoading: false })
@@ -155,6 +162,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
       onCreateStep,
       initializeIfThen,
       onUpdateStep,
+      initializeForEach,
     ],
   )
 

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

@@ -0,0 +1,66 @@
+import { IStep } from '@plumber/types'
+
+import { Fragment, useContext, useMemo } from 'react'
+import { Flex } from '@chakra-ui/react'
+
+import { EditorContext } from '@/contexts/Editor'
+import { FlowStep, FlowStepGroup } from '@/exports/components'
+
+import { HoverAddStepButton } from '../IfThen/HoverAddStepButton'
+import { allowAddStep } from '../utils'
+
+interface ForEachProps {
+  groupedSteps: IStep[][]
+  stepsBeforeGroup: IStep[]
+}
+
+export default function ForEach(props: ForEachProps) {
+  const { groupedSteps } = props
+
+  const { isDrawerOpen, readOnly: isEditorReadOnly } = useContext(EditorContext)
+  const forEachSteps = groupedSteps[0]
+  const ifThenSteps = useMemo(() => {
+    if (groupedSteps.length === 1) {
+      return []
+    }
+    return groupedSteps.slice(1)
+  }, [groupedSteps])
+
+  const canAddStep =
+    allowAddStep(forEachSteps) ||
+    (forEachSteps.length === 1 && ifThenSteps.length !== 0)
+
+  return (
+    <Flex flexDir="column" alignItems="center" borderRadius="lg" w="100%">
+      <Flex flexDir="column" w="100%" px={4} py={3}>
+        {forEachSteps?.map((step, index) => {
+          return (
+            <Fragment key={step.id}>
+              <FlowStep
+                step={step}
+                index={index}
+                isDeletable={index !== 0}
+                isNested={true}
+                isLastStep={index === forEachSteps.length - 1}
+              />
+              <HoverAddStepButton
+                isDisabled={isEditorReadOnly || !canAddStep}
+                isDrawerOpen={isDrawerOpen}
+                isLastStep={
+                  index === forEachSteps.length - 1 && ifThenSteps.length === 0
+                }
+                prevStepId={step.id}
+              />
+            </Fragment>
+          )
+        })}
+        {ifThenSteps.length > 0 && (
+          <FlowStepGroup
+            stepsBeforeGroup={forEachSteps}
+            groupedSteps={ifThenSteps}
+          />
+        )}
+      </Flex>
+    </Flex>
+  )
+}

packages/frontend/src/components/FlowStepGroup/Content/ForEach/styles.ts

@@ -0,0 +1,23 @@
+export const forEachStyles = {
+  addStepButton: {
+    alignItems: 'center',
+    bg: 'white',
+    borderWidth: '1px',
+    borderColor: 'base.divider.medium',
+    borderRadius: 'lg',
+    gap: 2,
+    justifyContent: 'flex-start',
+    overflow: 'hidden',
+    px: 4,
+    py: 2,
+    variant: 'outline',
+    w: 'full',
+    _hover: {
+      bg: 'interaction.muted.neutral.hover',
+      cursor: 'pointer',
+    },
+    _active: {
+      bg: 'interaction.muted.neutral.active',
+    },
+  },
+}

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

@@ -30,9 +30,10 @@ import { EditorContext } from '@/contexts/Editor'
 import { DELETE_STEP } from '@/graphql/mutations/delete-step'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
 
+import { allowAddStep } from '../utils'
+
 import { HoverAddStepButton } from './HoverAddStepButton'
 import { branchStyles } from './styles'
-import { allowAddStep } from './utils'
 
 interface BranchProps {
   branchSteps: IStep[]

packages/frontend/src/components/FlowStepGroup/Content/IfThen/styles.ts

@@ -50,8 +50,8 @@ export const hoverAddStepButtonStyles = {
     alignItems: 'center',
     justifyContent: 'center',
     direction: 'row' as FlexProps['direction'],
-    m: 1,
-    mb: 0,
+    my: 1,
+    mx: 0,
     transition: 'all 0.3s ease',
   },
   button: {

…ts/FlowStepGroup/Content/IfThen/utils.ts …omponents/FlowStepGroup/Content/utils.tspackages/frontend/src/components/FlowStepGroup/Content/IfThen/utils.ts renamed to packages/frontend/src/components/FlowStepGroup/Content/utils.ts packages/frontend/src/components/FlowStepGroup/Content/IfThen/utils.ts renamed to packages/frontend/src/components/FlowStepGroup/Content/utils.ts

@@ -1,14 +1,18 @@
 import { IStep } from '@plumber/types'
 
 import { useContext, useMemo } from 'react'
+import { BiTrash } from 'react-icons/bi'
 import { Box, Flex, Icon, Text } from '@chakra-ui/react'
+import { IconButton } from '@opengovsg/design-system-react'
 
 import { EditorContext } from '@/contexts/Editor'
 import { getFlowStepHeaderWidth, getToolboxIcon } from '@/helpers/editor'
+import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 
 import { MIN_FLOW_STEP_WIDTH } from '../Editor/constants'
 
 import Error from './Content/Error'
+import ForEach from './Content/ForEach'
 import IfThen from './Content/IfThen'
 import { flowStepGroupStyles } from './styles'
 
@@ -25,10 +29,21 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
     let stepGroupType: string | null = null
     let stepGroupCaption: string | null = null
 
-    if (groupedSteps[0]?.[0]?.key === 'ifThen') {
-      stepGroupType = 'ifThen'
+    const groupKey = groupedSteps[0]?.[0]?.key
+    if (!groupKey) {
+      return { stepGroupType: null, stepGroupCaption: null }
+    }
+
+    if (groupKey === TOOLBOX_ACTIONS.IfThen) {
+      stepGroupType = TOOLBOX_ACTIONS.IfThen
       stepGroupCaption = 'If-then'
     }
+
+    if (groupKey === TOOLBOX_ACTIONS.ForEach) {
+      stepGroupType = TOOLBOX_ACTIONS.ForEach
+      stepGroupCaption = 'For each'
+    }
+
     return { stepGroupType, stepGroupCaption }
   }, [groupedSteps])
 
@@ -54,6 +69,7 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
             w="full"
             borderLeftWidth={0}
             borderRightWidth={0}
+            role="group"
           >
             <Flex {...flowStepGroupStyles.iconWrapper}>
               {/* App icon */}
@@ -70,13 +86,31 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
                 </Text>
               </Flex>
             </Flex>
+            {stepGroupType === TOOLBOX_ACTIONS.ForEach && (
+              <Flex ml="auto" opacity={0} _groupHover={{ opacity: 1 }}>
+                <IconButton
+                  boxSize={8}
+                  variant="clear"
+                  aria-label="Delete for each action"
+                  icon={<BiTrash />}
+                  colorScheme="secondary"
+                />
+              </Flex>
+            )}
           </Flex>
         </Box>
-        {stepGroupType === 'ifThen' ? (
+        {stepGroupType === TOOLBOX_ACTIONS.IfThen ? (
           <IfThen
             groupedSteps={groupedSteps}
             stepsBeforeGroup={stepsBeforeGroup}
           />
+        ) : stepGroupType === TOOLBOX_ACTIONS.ForEach ? (
+          <>
+            <ForEach
+              groupedSteps={groupedSteps}
+              stepsBeforeGroup={stepsBeforeGroup}
+            />
+          </>
         ) : (
           <Error />
         )}

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

@@ -30,6 +30,7 @@ import { GET_TEST_EXECUTION_STEPS } from '@/graphql/queries/get-test-execution-s
 import {
   TOOLBOX_ACTIONS,
   TOOLBOX_APP_KEY,
+  useForEachInitializer,
   useIfThenInitializer,
 } from '@/helpers/toolbox'
 import { extractVariables, StepWithVariables } from '@/helpers/variables'
@@ -224,6 +225,7 @@ export const EditorProvider = ({
 
   const [createStep] = useMutation(CREATE_STEP, { refetchQueries: [GET_FLOW] })
 
+  const [initializeForEach] = useForEachInitializer()
   const [initializeIfThen] = useIfThenInitializer()
 
   // Add a step to the flow with the given appKey and eventKey
@@ -254,8 +256,8 @@ export const EditorProvider = ({
       const newStep = createdStep.data.createStep
       setCurrentStepId(newStep.id)
 
-      // account for the if-then edge case
-      if (appKey === TOOLBOX_APP_KEY && eventKey === TOOLBOX_ACTIONS.IfThen) {
+      // account for the for-each and if-then
+      if (appKey === TOOLBOX_APP_KEY) {
         // Get the complete step data from the cache
         const { getFlow: updatedFlow } = client.readQuery({
           query: GET_FLOW,
@@ -271,15 +273,21 @@ export const EditorProvider = ({
             ...completeStep,
             flowId: flowId,
           }
-          return (await initializeIfThen(
-            completeStepWithFlow,
-          )) as unknown as IStep
+          if (eventKey === TOOLBOX_ACTIONS.IfThen) {
+            return (await initializeIfThen(
+              completeStepWithFlow,
+            )) as unknown as IStep
+          }
+
+          if (eventKey === TOOLBOX_ACTIONS.ForEach) {
+            await initializeForEach(completeStepWithFlow)
+          }
         }
       }
 
       return newStep as IStep
     },
-    [createStep, flowId, initializeIfThen, setCurrentStepId],
+    [createStep, flowId, initializeForEach, initializeIfThen],
   )
 
   /**