chore: refactor branch deletion

Author: kevinkim-ogp

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

@@ -1,36 +1,19 @@
 import { IStep } from '@plumber/types'
 
-import {
-  Fragment,
-  MouseEventHandler,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-} from 'react'
+import { Fragment, useCallback, useContext, useMemo } from 'react'
 import { BiTrash } from 'react-icons/bi'
 import { useMutation } from '@apollo/client'
-import {
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Box,
-  Button,
-  Flex,
-  Text,
-  useDisclosure,
-} from '@chakra-ui/react'
+import { Box, Flex, Text } from '@chakra-ui/react'
 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'
+import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 
+import DeleteConfirmationDialog from '../../components/DeleteConfirmationDialog'
+import useDeleteConfirmation from '../../hooks/useDeleteConfirmation'
 import { allowAddStep } from '../utils'
 
 import { HoverAddStepButton } from './HoverAddStepButton'
@@ -57,30 +40,19 @@ export default function Branch(props: BranchProps) {
 
   // Handle branch deletion
   const {
-    isOpen: deleteConfirmationIsOpen,
-    onOpen: openDeleteConfirmationImpl,
+    isDeletingBranch,
+    isOpen: isDeleteConfirmationOpen,
+    onOpen: openDeleteConfirmation,
     onClose: closeDeleteConfirmation,
-  } = useDisclosure()
-  const cancelDeleteButton = useRef<HTMLButtonElement>(null)
+    onDelete: deleteBranch,
+    cancelRef,
+  } = useDeleteConfirmation(TOOLBOX_ACTIONS.IfThen, groupedSteps, branchSteps)
   const [createStep, { loading: isCreatingStep }] = useMutation(CREATE_STEP, {
     fetchPolicy: 'no-cache',
     refetchQueries: [GET_FLOW],
   })
-  const [deleteStep, { loading: isDeletingBranch }] = useMutation(DELETE_STEP, {
-    refetchQueries: [GET_FLOW],
-  })
-  const openDeleteConfirmation = useCallback<MouseEventHandler>(
-    (e) => {
-      e.stopPropagation()
-      openDeleteConfirmationImpl()
-    },
-    [openDeleteConfirmationImpl],
-  )
-  const deleteBranch = useCallback(async () => {
-    const idsToDelete = branchSteps.map((step) => step.id)
-    await deleteStep({
-      variables: { input: { ids: idsToDelete } },
-    })
+  const handleDeleteBranch = useCallback(async () => {
+    await deleteBranch()
 
     // 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
@@ -103,8 +75,7 @@ export default function Branch(props: BranchProps) {
     closeDeleteConfirmation()
     onDrawerClose()
   }, [
-    branchSteps,
-    deleteStep,
+    deleteBranch,
     hasForEach,
     groupedSteps.length,
     stepsBeforeGroup,
@@ -144,7 +115,7 @@ export default function Branch(props: BranchProps) {
               <IconButton
                 boxSize={8}
                 onClick={(event) => {
-                  openDeleteConfirmation(event)
+                  openDeleteConfirmation()
                   event.stopPropagation()
                 }}
                 variant="clear"
@@ -179,36 +150,14 @@ export default function Branch(props: BranchProps) {
       })}
 
       {/* Delete Confirmation Modal */}
-      <AlertDialog
-        isOpen={deleteConfirmationIsOpen}
-        leastDestructiveRef={cancelDeleteButton}
+      <DeleteConfirmationDialog
+        name={branchSteps[0].parameters.branchName as string}
+        cancelRef={cancelRef}
+        isOpen={isDeleteConfirmationOpen}
         onClose={closeDeleteConfirmation}
-      >
-        <AlertDialogOverlay>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              Delete {branchSteps[0].parameters.branchName as string}
-            </AlertDialogHeader>
-            <AlertDialogBody>
-              Are you sure you want to delete this branch? This action cannot be
-              undone.
-            </AlertDialogBody>
-            <AlertDialogFooter>
-              <Button
-                colorScheme="neutral"
-                variant="clear"
-                ref={cancelDeleteButton}
-                onClick={closeDeleteConfirmation}
-              >
-                Cancel
-              </Button>
-              <Button colorScheme="critical" onClick={deleteBranch} ml={3}>
-                Yes, delete branch
-              </Button>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialogOverlay>
-      </AlertDialog>
+        onDelete={handleDeleteBranch}
+        onCancel={closeDeleteConfirmation}
+      />
     </Flex>
   )
 }

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

@@ -8,7 +8,11 @@ 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 useDeleteConfirmation = (
+  type: string,
+  groupedSteps: IStep[][],
+  branchSteps?: IStep[],
+) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const cancelRef = useRef<HTMLButtonElement>(null)
 
@@ -35,11 +39,17 @@ const useDeleteConfirmation = (type: string, groupedSteps: IStep[][]) => {
       await deleteStep({
         variables: { input: { ids: idsToDelete } },
       })
-    } else {
-      // TODO: refactor branch deletion
+    } else if (type === TOOLBOX_ACTIONS.IfThen) {
+      if (!branchSteps) {
+        return
+      }
+      const idsToDelete = branchSteps.map((step) => step.id)
+      await deleteStep({
+        variables: { input: { ids: idsToDelete } },
+      })
     }
     onClose()
-  }, [deleteStep, groupedSteps, onClose, type])
+  }, [branchSteps, deleteStep, groupedSteps, onClose, type])
 
   return {
     cancelRef,

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

@@ -68,7 +68,6 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
       alignItems="center"
       justifyContent={isDrawerOpen ? 'flex-start' : 'center'}
     >
-      {/* FIXME (kevinkim-ogp): above is a temporary wrapper to ensure the flow step group is centered when drawer is closed */}
       <Flex
         {...flowStepGroupStyles.container}
         display={isMobile ? 'block' : 'flex'}