PLU-372: [UI-Prevamp] add delete step confirmation (#824)

## Problem

No confirmation before deleting a step from a pipe...

## Solution

Reuse the `AlertDialog` and add it to the delete icon

## Tests
- [x] Can delete step with the modal
- [x] Can cancel the deleting of step

Author: m0nggh

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

@@ -182,7 +182,7 @@ export default function FlowStep(
 
   const isDeletable =
     displayOverrides?.disableDelete === true ? false : !isTrigger && !readOnly
-  const [deleteStep] = useMutation(DELETE_STEP, {
+  const [deleteStep, { loading: isDeletingStep }] = useMutation(DELETE_STEP, {
     refetchQueries: [GET_FLOW],
   })
   const onDelete = useCallback<MouseEventHandler>(
@@ -254,6 +254,7 @@ export default function FlowStep(
         }
         isCompleted={step.status === 'completed'}
         onDelete={isDeletable ? onDelete : undefined}
+        isDeleting={isDeletable ? isDeletingStep : undefined}
         onOpen={onOpen}
         onClose={onClose}
         collapsed={collapsed ?? false}

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

@@ -3,6 +3,7 @@ import {
   type MouseEventHandler,
   type ReactNode,
   useCallback,
+  useRef,
   useState,
 } from 'react'
 import {
@@ -30,6 +31,8 @@ import { IconButton } from '@opengovsg/design-system-react'
 
 import DemoVideoModalContent from '@/components/FlowRow/DemoVideoModalContent'
 
+import MenuAlertDialog from '../MenuAlertDialog'
+
 // Chakra's `Collapse` sets `overflow: hidden` by default, which causes dropdown
 // menu items to be hidden. We override overflow by making `Collapse` a Chakra
 // element.
@@ -41,6 +44,7 @@ interface FlowStepHeaderProps {
   hintAboveCaption: string
   isCompleted?: boolean
   onDelete?: MouseEventHandler
+  isDeleting?: boolean
   onOpen: () => void
   onClose: () => void
   collapsed: boolean
@@ -61,6 +65,7 @@ export default function FlowStepHeader(
     hintAboveCaption,
     isCompleted,
     onDelete,
+    isDeleting,
     onOpen,
     onClose,
     collapsed,
@@ -79,6 +84,13 @@ export default function FlowStepHeader(
     }
   }, [collapsed, onOpen, onClose])
 
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  const {
+    isOpen: isDialogOpen,
+    onOpen: onDialogOpen,
+    onClose: onDialogClose,
+  } = useDisclosure()
+
   // for loading demo modal
   const {
     isOpen: isModalOpen,
@@ -231,7 +243,10 @@ export default function FlowStepHeader(
           {onDelete && (
             <Flex ml="auto">
               <IconButton
-                onClick={onDelete}
+                onClick={(event) => {
+                  onDialogOpen()
+                  event.stopPropagation()
+                }}
                 variant="clear"
                 aria-label="Delete Step"
                 icon={<BiTrashAlt />}
@@ -262,6 +277,18 @@ export default function FlowStepHeader(
           </ModalContent>
         </Modal>
       )}
+
+      {onDelete && isDeleting !== undefined && (
+        <MenuAlertDialog
+          isDialogOpen={isDialogOpen}
+          cancelRef={cancelRef}
+          onDialogClose={onDialogClose}
+          dialogHeader="Step"
+          dialogType="delete"
+          onClick={onDelete}
+          isLoading={isDeleting}
+        />
+      )}
     </>
   )
 }

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

@@ -1,3 +1,4 @@
+import { type MouseEventHandler } from 'react'
 import {
   AlertDialog,
   AlertDialogBody,
@@ -9,15 +10,15 @@ import {
 import { Button } from '@opengovsg/design-system-react'
 
 export type AlertDialogType = 'delete' | 'duplicate'
-export type AlertHeaderType = 'Connection' | 'Pipe' | 'Tile'
+export type AlertHeaderType = 'Connection' | 'Pipe' | 'Tile' | 'Step'
 
 interface MenuAlertDialogProps {
   isDialogOpen: boolean
   cancelRef: React.RefObject<HTMLButtonElement>
   onDialogClose: () => void
   dialogType: AlertDialogType
   dialogHeader: AlertHeaderType
-  onClick: () => void
+  onClick: (() => void) | MouseEventHandler
   isLoading: boolean
 }