enable for each deletion

Author: kevinkim-ogp

packages/frontend/src/components/FlowStep/utils.ts

@@ -1,6 +1,6 @@
 import { IStep } from '@plumber/types'
 
-import { isIfThenStep } from '@/helpers/toolbox'
+import { isForEachStep, isIfThenStep } from '@/helpers/toolbox'
 
 function findAdjacentSteps(
   steps: IStep[],
@@ -17,14 +17,35 @@ function findAdjacentSteps(
 
 /**
  * NOTE: this function checks if we should create an empty step.
+ * This applies to if-then and for-each groups.
  * The conditions are:
  * 1. The previous step is an if-then step and the next step is also an if-then step,
  *    which means that the step being deleted is the 'last' step in the if-then group
  * 2. The previous step is an if-then step and there is no next step,
  *    which means that the step being deleted is the 'last' step in the group
+ * 3. The previous step is a for-each step and there is no next step
  */
 function shouldCreateEmptyStep(prev?: IStep, next?: IStep): boolean {
-  return !!prev && isIfThenStep(prev) && (!next || isIfThenStep(next))
+  if (!prev) {
+    return false
+  }
+
+  // Condition 1: Previous is if-then AND next is if-then
+  if (isIfThenStep(prev) && next && isIfThenStep(next)) {
+    return true
+  }
+
+  // Condition 2: Previous is if-then AND no next step
+  if (isIfThenStep(prev) && !next) {
+    return true
+  }
+
+  // Condition 3: Previous is for-each AND no next step
+  if (isForEachStep(prev) && !next) {
+    return true
+  }
+
+  return false
 }
 
 export { findAdjacentSteps, shouldCreateEmptyStep }

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

@@ -27,6 +27,7 @@ import { IconButton } from '@opengovsg/design-system-react'
 
 import FlowStep from '@/components/FlowStep'
 import { EditorContext } from '@/contexts/Editor'
+import { CREATE_STEP } from '@/graphql/mutations/create-step'
 import { DELETE_STEP } from '@/graphql/mutations/delete-step'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
 
@@ -38,12 +39,15 @@ import { branchStyles } from './styles'
 interface BranchProps {
   branchSteps: IStep[]
   stepsBeforeGroup: IStep[]
+  groupedSteps: IStep[][]
 }
 
 export default function Branch(props: BranchProps) {
-  const { branchSteps, stepsBeforeGroup } = props
+  const { branchSteps, stepsBeforeGroup, groupedSteps } = props
 
   const {
+    flow,
+    hasForEach,
     isDrawerOpen,
     isMobile,
     readOnly: isEditorReadOnly,
@@ -58,6 +62,10 @@ export default function Branch(props: BranchProps) {
     onClose: closeDeleteConfirmation,
   } = useDisclosure()
   const cancelDeleteButton = useRef<HTMLButtonElement>(null)
+  const [createStep, { loading: isCreatingStep }] = useMutation(CREATE_STEP, {
+    fetchPolicy: 'no-cache',
+    refetchQueries: [GET_FLOW],
+  })
   const [deleteStep, { loading: isDeletingBranch }] = useMutation(DELETE_STEP, {
     refetchQueries: [GET_FLOW],
   })
@@ -74,15 +82,37 @@ export default function Branch(props: BranchProps) {
       variables: { input: { ids: idsToDelete } },
     })
 
+    // EDGE CASE: if the branch is the last step in a for-each action,
+    // we should create an empty step after the for-each set up step
+    if (
+      hasForEach &&
+      groupedSteps.length === 1 &&
+      stepsBeforeGroup.length === 1
+    ) {
+      await createStep({
+        variables: {
+          input: {
+            previousStep: { id: stepsBeforeGroup[0]?.id },
+            flow: { id: flow.id },
+          },
+        },
+      })
+    }
+
     setCurrentStepId(null)
     closeDeleteConfirmation()
     onDrawerClose()
   }, [
     branchSteps,
     deleteStep,
-    onDrawerClose,
-    closeDeleteConfirmation,
+    hasForEach,
+    groupedSteps.length,
+    stepsBeforeGroup,
     setCurrentStepId,
+    closeDeleteConfirmation,
+    onDrawerClose,
+    createStep,
+    flow.id,
   ])
 
   const canAddStep = useMemo(() => allowAddStep(branchSteps), [branchSteps])
@@ -121,8 +151,8 @@ export default function Branch(props: BranchProps) {
                 aria-label="Delete branch"
                 colorScheme="secondary"
                 icon={<BiTrash />}
-                isLoading={isDeletingBranch}
-                isDisabled={isDeletingBranch}
+                isLoading={isDeletingBranch || isCreatingStep}
+                isDisabled={isDeletingBranch || isCreatingStep}
               />
             </Flex>
           )}

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

@@ -106,6 +106,7 @@ export default function IfThen(props: IfThenProps): JSX.Element {
               key={branchSteps[0].id}
               branchSteps={branchSteps}
               stepsBeforeGroup={stepsBeforeGroup}
+              groupedSteps={groupedSteps}
             />
           )
         })}

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

@@ -0,0 +1,55 @@
+import { RefObject } from 'react'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
+
+interface DeleteConfirmationDialogProps {
+  cancelRef: RefObject<HTMLButtonElement>
+  name: string
+  isOpen: boolean
+  onClose: () => void
+  onCancel: () => void
+  onDelete: () => void
+}
+
+export default function DeleteConfirmationDialog(
+  props: DeleteConfirmationDialogProps,
+) {
+  const { cancelRef, name, isOpen, onClose, onDelete, onCancel } = props
+  return (
+    <AlertDialog
+      isOpen={isOpen}
+      leastDestructiveRef={cancelRef}
+      onClose={onClose}
+    >
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader>Delete {name}</AlertDialogHeader>
+          <AlertDialogBody>
+            Are you sure you want to delete {name}? This action cannot be
+            undone.
+          </AlertDialogBody>
+          <AlertDialogFooter>
+            <Button
+              colorScheme="neutral"
+              variant="clear"
+              ref={cancelRef}
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+            <Button colorScheme="critical" onClick={onDelete} ml={3}>
+              Yes, delete {name}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}

packages/frontend/src/components/FlowStepGroup/hooks/useDeleteConfirmation.ts

@@ -0,0 +1,56 @@
+import { IStep } from '@plumber/types'
+
+import { MouseEventHandler, useCallback, useRef } from 'react'
+import { useMutation } from '@apollo/client'
+import { useDisclosure } from '@chakra-ui/react'
+
+import { DELETE_STEP } from '@/graphql/mutations/delete-step'
+import { GET_FLOW } from '@/graphql/queries/get-flow'
+import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
+
+const useDeleteConfirmation = (type: string, groupedSteps: IStep[][]) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = useRef<HTMLButtonElement>(null)
+
+  const [deleteStep, { loading: isDeletingBranch }] = useMutation(DELETE_STEP, {
+    refetchQueries: [GET_FLOW],
+  })
+
+  const openDeleteConfirmation = useCallback<MouseEventHandler>(
+    (e) => {
+      e.stopPropagation()
+      onOpen()
+    },
+    [onOpen],
+  )
+
+  const onDelete = useCallback(async () => {
+    if (type === TOOLBOX_ACTIONS.ForEach) {
+      /**
+       *  deleting the entire for-each deletes the entire for-each loop
+       * and all the steps inside it.
+       */
+      const flatSteps = groupedSteps.flat()
+      const idsToDelete = flatSteps.map((step) => step.id)
+      await deleteStep({
+        variables: { input: { ids: idsToDelete } },
+      })
+      onClose()
+    } else {
+      // TODO: refactor branch deletion
+    }
+    onClose()
+  }, [deleteStep, groupedSteps, onClose, type])
+
+  return {
+    cancelRef,
+    isDeletingBranch,
+    isOpen,
+    onDelete,
+    onOpen,
+    onClose,
+    openDeleteConfirmation,
+  }
+}
+
+export default useDeleteConfirmation

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

@@ -1,6 +1,6 @@
 import { IStep } from '@plumber/types'
 
-import { useContext, useMemo } from 'react'
+import { useCallback, 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'
@@ -11,9 +11,11 @@ import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 
 import { MIN_FLOW_STEP_WIDTH } from '../Editor/constants'
 
+import DeleteConfirmationDialog from './components/DeleteConfirmationDialog'
 import Error from './Content/Error'
 import ForEach from './Content/ForEach'
 import IfThen from './Content/IfThen'
+import useDeleteConfirmation from './hooks/useDeleteConfirmation'
 import { flowStepGroupStyles } from './styles'
 
 interface FlowStepGroupProps {
@@ -23,7 +25,7 @@ interface FlowStepGroupProps {
 
 export default function FlowStepGroup(props: FlowStepGroupProps) {
   const { groupedSteps, stepsBeforeGroup } = props
-  const { isDrawerOpen, isMobile } = useContext(EditorContext)
+  const { isDrawerOpen, isMobile, onDrawerClose } = useContext(EditorContext)
 
   const { stepGroupType, stepGroupCaption } = useMemo(() => {
     let stepGroupType: string | null = null
@@ -47,6 +49,19 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
     return { stepGroupType, stepGroupCaption }
   }, [groupedSteps])
 
+  const {
+    isOpen: isDeleteConfirmationOpen,
+    onOpen: openDeleteConfirmation,
+    onClose: closeDeleteConfirmation,
+    onDelete: deleteForEach,
+    cancelRef,
+  } = useDeleteConfirmation(stepGroupType ?? '', groupedSteps)
+
+  const handleForEachDelete = useCallback(async () => {
+    await deleteForEach()
+    onDrawerClose()
+  }, [deleteForEach, onDrawerClose])
+
   return (
     <Flex
       w="100%"
@@ -94,6 +109,7 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
                   aria-label="Delete for each action"
                   icon={<BiTrash />}
                   colorScheme="secondary"
+                  onClick={openDeleteConfirmation}
                 />
               </Flex>
             )}
@@ -110,6 +126,14 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
               groupedSteps={groupedSteps}
               stepsBeforeGroup={stepsBeforeGroup}
             />
+            <DeleteConfirmationDialog
+              name="For each"
+              cancelRef={cancelRef}
+              isOpen={isDeleteConfirmationOpen}
+              onClose={closeDeleteConfirmation}
+              onDelete={handleForEachDelete}
+              onCancel={closeDeleteConfirmation}
+            />
           </>
         ) : (
           <Error />

packages/frontend/src/contexts/Editor.tsx

@@ -28,6 +28,8 @@ import { GET_APPS } from '@/graphql/queries/get-apps'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
 import { GET_TEST_EXECUTION_STEPS } from '@/graphql/queries/get-test-execution-steps'
 import {
+  isForEachStep,
+  isIfThenStep,
   TOOLBOX_ACTIONS,
   TOOLBOX_APP_KEY,
   useForEachInitializer,
@@ -44,6 +46,7 @@ interface IEditorContextValue {
   testExecutionSteps: IExecutionStep[]
   currentStepId: string | null
   currentStepIndex: number | null
+  hasForEach: boolean
   hasIfThen: boolean
   currentTestExecutionStep: IExecutionStep | null
   isDrawerOpen: boolean
@@ -76,6 +79,7 @@ export const EditorContext = createContext<IEditorContextValue>({
   flowId: '',
   currentStepId: null,
   currentStepIndex: null,
+  hasForEach: false,
   hasIfThen: false,
   currentTestExecutionStep: null,
   isDrawerOpen: false,
@@ -174,9 +178,8 @@ export const EditorProvider = ({
   const isEmptyPipe =
     steps.length <= 2 && steps.every((s) => s.key === null && s.appKey === null)
 
-  const hasIfThen = flow?.steps.some(
-    (step: IStep) => step.key === TOOLBOX_ACTIONS.IfThen,
-  )
+  const hasForEach = flow?.steps.some((step) => isForEachStep(step))
+  const hasIfThen = flow?.steps.some((step: IStep) => isIfThenStep(step))
 
   const allApps = getAppsData?.getApps ?? []
 
@@ -392,6 +395,7 @@ export const EditorProvider = ({
         allApps,
         currentStepId,
         currentStepIndex,
+        hasForEach,
         hasIfThen,
         isDrawerOpen,
         isMobile,