fix: DeleteConfirmation close on cannot delete modal open

Author: Elessar1802

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -17,13 +17,15 @@
 import { ButtonHTMLAttributes, ChangeEvent, cloneElement, useCallback, useEffect, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { CustomInput, noop, stopPropagation, useRegisterShortcut, UseRegisterShortcutProvider } from '@Common/index'
-import { ComponentSizeType } from '@Shared/constants'
+import { ComponentSizeType, DEFAULT_ROUTE_PROMPT_MESSAGE } from '@Shared/constants'
+import { usePrompt } from '@Shared/Hooks'
+import { Prompt } from 'react-router-dom'
 import { ConfirmationModalBodyProps, ConfirmationModalProps } from './types'
 import { getPrimaryButtonStyleFromVariant, getConfirmationLabel, getIconFromVariant } from './utils'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Backdrop } from '../Backdrop'
-import { useConfirmationModalContext } from './ConfirmationModalContext'
 import './confirmationModal.scss'
+import { useConfirmationModalContext } from './ConfirmationModalContext'
 
 const ConfirmationModalBody = ({
     title,
@@ -167,30 +169,48 @@ const ConfirmationModalBody = ({
  * Please see NodeActionMenu.tsx as an example of why this is required
  */
 export const BaseConfirmationModal = () => {
-    const { props } = useConfirmationModalContext()
+    const { modalKey, settersRef } = useConfirmationModalContext()
+    const [confirmationProps, setConfirmationProps] = useState<ConfirmationModalProps | null>(null)
+    const apiCallInProgress = modalKey && (confirmationProps?.buttonConfig.primaryButtonConfig.isLoading ?? false)
+
+    usePrompt({ shouldPrompt: apiCallInProgress })
+
+    useEffect(() => {
+        settersRef.current = {
+            setProps: setConfirmationProps,
+        }
+    }, [])
 
     return (
         <UseRegisterShortcutProvider ignoreTags={['button']}>
-            <AnimatePresence>{props && <ConfirmationModalBody {...props} />}</AnimatePresence>
+            <Prompt when={apiCallInProgress} message={DEFAULT_ROUTE_PROMPT_MESSAGE} />
+            <AnimatePresence>{!!modalKey && <ConfirmationModalBody {...confirmationProps} />}</AnimatePresence>
         </UseRegisterShortcutProvider>
     )
 }
 
 const ConfirmationModal = (props: ConfirmationModalProps) => {
-    const { props: currentProps, setProps } = useConfirmationModalContext()
+    const { setModalKey, settersRef } = useConfirmationModalContext()
 
     useEffect(() => {
-        if (currentProps) {
-            throw new Error('Only one ConfirmationModal can be rendered at a time')
-        }
-
-        setProps(props)
+        const dateString = new Date().toISOString()
+        setModalKey(dateString)
 
         return () => {
-            setProps(null)
+            setModalKey((prev) => {
+                if (prev === dateString) {
+                    return ''
+                }
+
+                return prev
+            })
         }
     }, [])
 
+    useEffect(() => {
+        settersRef.current.setProps(props)
+    })
+
     return null
 }
 

src/Shared/Components/ConfirmationModal/ConfirmationModalContext.tsx

@@ -1,12 +1,13 @@
-import { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import { createContext, PropsWithChildren, useContext, useMemo, useRef, useState } from 'react'
 import { ConfirmationModalContextType } from './types'
 
 export const ConfirmationModalContext = createContext<ConfirmationModalContextType>(null)
 
 export const ConfirmationModalProvider = ({ children }: PropsWithChildren<{}>) => {
-    const [props, setProps] = useState<ConfirmationModalContextType['props']>(null)
+    const settersRef = useRef<ConfirmationModalContextType['settersRef']['current']>(null)
+    const [modalKey, setModalKey] = useState('')
 
-    const value = useMemo(() => ({ props, setProps }), [props])
+    const value = useMemo(() => ({ modalKey, setModalKey, settersRef }), [modalKey])
 
     return <ConfirmationModalContext.Provider value={value}>{children}</ConfirmationModalContext.Provider>
 }

src/Shared/Components/ConfirmationModal/DeleteConfirmationModal.tsx

@@ -21,7 +21,6 @@ import { showError, stopPropagation } from '@Common/Helper'
 import { ConfirmationModalVariantType, DeleteConfirmationModalProps } from './types'
 import ConfirmationModal from './ConfirmationModal'
 import { CannotDeleteModal } from './CannotDeleteModal'
-import { ForceDeleteConfirmationModal } from './ForceDeleteConfirmationModal'
 
 export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = ({
     title,
@@ -41,7 +40,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
     children,
 }: DeleteConfirmationModalProps) => {
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
-    const [showForceDeleteModal, setForceDeleteModal] = useState(false)
     const [cannotDeleteText, setCannotDeleteText] = useState(renderCannotDeleteConfirmationSubTitle)
     const [isLoading, setLoading] = useState(isDeleting)
 
@@ -69,7 +67,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
                 ) {
                     setCannotDeleteText(serverError.errors[0].userMessage as string)
                 }
-                closeConfirmationModal()
             } else if (typeof onError === 'function') {
                 onError(serverError)
             } else {
@@ -79,9 +76,10 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
         }
     }
 
-    const handleCloseCannotDeleteModal = () => setCannotDeleteDialogModal(false)
-
-    const handleCloseForceDeleteModal = () => setForceDeleteModal(false)
+    const handleCloseCannotDeleteModal = () => {
+        setCannotDeleteDialogModal(false)
+        closeConfirmationModal()
+    }
 
     const renderCannotDeleteDialogModal = () => (
         <CannotDeleteModal
@@ -92,15 +90,6 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
         />
     )
 
-    const renderForceDeleteModal = () => (
-        <ForceDeleteConfirmationModal
-            title={title}
-            subtitle={subtitle}
-            onDelete={onDelete}
-            closeConfirmationModal={handleCloseForceDeleteModal}
-        />
-    )
-
     const renderDeleteModal = () => (
         <ConfirmationModal
             variant={ConfirmationModalVariantType.delete}
@@ -110,12 +99,13 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
                 secondaryButtonConfig: {
                     text: 'Cancel',
                     onClick: closeConfirmationModal,
+                    disabled: isDeleting || isLoading,
                 },
                 primaryButtonConfig: {
                     text: primaryButtonText,
                     onClick: handleDelete,
                     isLoading: isDeleting || isLoading,
-                    disabled: isLoading || disabled,
+                    disabled,
                 },
             }}
             handleClose={closeConfirmationModal}
@@ -127,9 +117,8 @@ export const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = (
 
     return (
         <>
-            {renderDeleteModal()}
+            {!showCannotDeleteDialogModal && renderDeleteModal()}
             {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
-            {showForceDeleteModal && renderForceDeleteModal()}
         </>
     )
 }

src/Shared/Components/ConfirmationModal/types.ts

@@ -14,7 +14,15 @@
  * limitations under the License.
  */
 
-import { Dispatch, PropsWithChildren, ReactElement, ReactNode, SetStateAction, SyntheticEvent } from 'react'
+import {
+    Dispatch,
+    MutableRefObject,
+    PropsWithChildren,
+    ReactElement,
+    ReactNode,
+    SetStateAction,
+    SyntheticEvent,
+} from 'react'
 import { ButtonProps } from '../Button'
 
 export enum ConfirmationModalVariantType {
@@ -173,6 +181,9 @@ export interface ForceDeleteConfirmationProps
         Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle'>> {}
 
 export interface ConfirmationModalContextType {
-    props: ConfirmationModalProps | null
-    setProps: Dispatch<SetStateAction<ConfirmationModalContextType['props']>>
+    settersRef: MutableRefObject<{
+        setProps: Dispatch<SetStateAction<ConfirmationModalProps>>
+    }>
+    modalKey: string
+    setModalKey: Dispatch<SetStateAction<ConfirmationModalContextType['modalKey']>>
 }

src/Shared/Components/UnsavedChangesDialog/UnsavedChangesDialog.component.tsx

@@ -17,25 +17,24 @@
 import { ConfirmationModal, ConfirmationModalVariantType } from '../ConfirmationModal'
 import { UnsavedChangesDialogProps } from './types'
 
-const UnsavedChangesDialog = ({ showUnsavedChangesDialog, handleClose, handleProceed }: UnsavedChangesDialogProps) =>
-    showUnsavedChangesDialog && (
-        <ConfirmationModal
-            handleClose={handleClose}
-            variant={ConfirmationModalVariantType.warning}
-            shouldCloseOnEscape={false}
-            title="Unsaved changes available"
-            subtitle="Unsaved changes will be lost, are you sure you want to close the window?"
-            buttonConfig={{
-                primaryButtonConfig: {
-                    onClick: handleProceed,
-                    text: 'Discard changes',
-                },
-                secondaryButtonConfig: {
-                    onClick: handleClose,
-                    text: 'Cancel',
-                },
-            }}
-        />
-    )
+const UnsavedChangesDialog = ({ handleClose, handleProceed }: UnsavedChangesDialogProps) => (
+    <ConfirmationModal
+        handleClose={handleClose}
+        variant={ConfirmationModalVariantType.warning}
+        shouldCloseOnEscape={false}
+        title="Unsaved changes available"
+        subtitle="Unsaved changes will be lost, are you sure you want to close the window?"
+        buttonConfig={{
+            primaryButtonConfig: {
+                onClick: handleProceed,
+                text: 'Discard changes',
+            },
+            secondaryButtonConfig: {
+                onClick: handleClose,
+                text: 'Cancel',
+            },
+        }}
+    />
+)
 
 export default UnsavedChangesDialog

src/Shared/Components/UnsavedChangesDialog/types.ts

@@ -15,7 +15,6 @@
  */
 
 export interface UnsavedChangesDialogProps {
-    showUnsavedChangesDialog: boolean
     handleProceed: () => void
     handleClose: () => void
 }