fix: warn for unsaved changes on delete step

Author: kevinkim-ogp

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

@@ -6,25 +6,31 @@ import { useMutation } from '@apollo/client'
 import { Flex, useDisclosure } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
 
+import UnsavedChangesAlert from '@/components/Editor/UnsavedChangesAlert'
 import MenuAlertDialog from '@/components/MenuAlertDialog'
 import { EditorContext } from '@/contexts/Editor'
 import client from '@/graphql/client'
 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 { GET_TEST_EXECUTION_STEPS } from '@/graphql/queries/get-test-execution-steps'
+import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'
 
 import { findAdjacentSteps, shouldCreateEmptyStep } from '../utils'
 
 interface StepDeleteButtonProps {
   isNested?: boolean
   isDeletingStep?: boolean
   step: IStep
+  caption?: string
 }
 
 export default function StepDeleteButton(props: StepDeleteButtonProps) {
-  const { isNested, step } = props
+  const { isNested, step, caption } = props
   const cancelRef = useRef<HTMLButtonElement>(null)
+  const customBody = caption
+    ? `Are you sure you want to delete step ${caption}? You can't undo this action afterwards.`
+    : undefined
   const {
     isOpen: isDialogOpen,
     onOpen: onDialogOpen,
@@ -40,6 +46,16 @@ export default function StepDeleteButton(props: StepDeleteButtonProps) {
     setShouldWarnOnLeave,
   } = useContext(EditorContext)
 
+  const {
+    cancelRef: cancelUnsavedRef,
+    isWarningOpen,
+    onWarningClose,
+    handleProceed,
+    handleLeave,
+  } = useUnsavedChanges({
+    onProceed: onDialogOpen,
+  })
+
   /**
    * NOTE: refetch test execution steps when deleting a step so that we can
    * check which steps are using variables from steps that have been deleted
@@ -106,8 +122,8 @@ export default function StepDeleteButton(props: StepDeleteButtonProps) {
         <IconButton
           boxSize={isNested ? 6 : 8}
           onClick={(event) => {
-            onDialogOpen()
             event.stopPropagation()
+            handleProceed()
           }}
           variant="clear"
           aria-label="Delete Step"
@@ -128,6 +144,14 @@ export default function StepDeleteButton(props: StepDeleteButtonProps) {
         dialogType="delete"
         onClick={onDelete}
         isLoading={isDeletingStep || isCreatingStep}
+        customBody={customBody}
+      />
+
+      <UnsavedChangesAlert
+        cancelRef={cancelUnsavedRef}
+        isOpen={isWarningOpen}
+        onClose={onWarningClose}
+        onLeave={handleLeave}
       />
     </>
   )

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

@@ -239,7 +239,11 @@ export default function FlowStep(
               />
               <StepCaptionAndDemo app={app} caption={caption} />
               {isDeletable && (
-                <StepDeleteButton isNested={isNested} step={step} />
+                <StepDeleteButton
+                  isNested={isNested}
+                  step={step}
+                  caption={caption}
+                />
               )}
             </Flex>
           </Flex>

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

@@ -20,29 +20,36 @@ interface MenuAlertDialogProps {
   dialogHeader: AlertHeaderType
   onClick: (() => void) | MouseEventHandler
   isLoading: boolean
+  customBody?: string
 }
 
 interface AlertDialogContent {
   header: string
   body: string
   buttonText: string
+  customBody?: string
 }
 
 function getAlertDialogContent(
   dialogHeader: AlertHeaderType,
   dialogType: AlertDialogType,
+  customBody?: string,
 ): AlertDialogContent {
   switch (dialogType) {
     case 'delete':
       return {
         header: `Delete ${dialogHeader}`,
-        body: `Are you sure you want to delete this ${dialogHeader?.toLowerCase()}? You can't undo this action afterwards.`,
+        body:
+          customBody ??
+          `Are you sure you want to delete this ${dialogHeader?.toLowerCase()}? You can't undo this action afterwards.`,
         buttonText: 'Delete',
       }
     case 'duplicate':
       return {
         header: 'Duplicate Pipe',
-        body: `You'll need to replace the data in every step and test each step in your duplicated pipe before publishing it.`,
+        body:
+          customBody ??
+          `You'll need to replace the data in every step and test each step in your duplicated pipe before publishing it.`,
         buttonText: 'Duplicate',
       }
   }
@@ -57,10 +64,12 @@ export default function MenuAlertDialog(props: MenuAlertDialogProps) {
     dialogType,
     onClick,
     isLoading,
+    customBody,
   } = props
   const { header, body, buttonText } = getAlertDialogContent(
     dialogHeader,
     dialogType,
+    customBody,
   )
 
   return (