fix: show ConfirmationModal animation in some places

Author: Elessar1802

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -21,8 +21,9 @@ import { ComponentSizeType } from '@Shared/constants'
 import { ConfirmationModalBodyProps, ConfirmationModalProps } from './types'
 import { getPrimaryButtonStyleFromVariant, getConfirmationLabel, getIconFromVariant } from './utils'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
-import './confirmationModal.scss'
 import { Backdrop } from '../Backdrop'
+import { useConfirmationModalContext } from './ConfirmationModalContext'
+import './confirmationModal.scss'
 
 const ConfirmationModalBody = ({
     title,
@@ -156,14 +157,40 @@ const ConfirmationModalBody = ({
     )
 }
 
-const ConfirmationModal = ({ showConfirmationModal, ...props }: ConfirmationModalProps) => (
-    <AnimatePresence>{showConfirmationModal ? <ConfirmationModalBody {...props} /> : null}</AnimatePresence>
-)
+/**
+ * NOTE: In some cases, we use a boolean useState to render Modals.
+ * This approach can cause issues with the animation of ConfirmationModals,
+ * as the animation requires the ConfirmationModal to remain mounted,
+ * and only toggle the showConfirmationModal prop to true when it needs to be displayed.
+ * This implementation serves as a workaround to allow modals to function as required.
+ *
+ * Please see NodeActionMenu.tsx as an example of why this is required
+ */
+export const BaseConfirmationModal = () => {
+    const { props } = useConfirmationModalContext()
 
-const WrapWithShortcutProvider = (props: ConfirmationModalProps) => (
-    <UseRegisterShortcutProvider ignoreTags={['button']}>
-        <ConfirmationModal {...props} />
-    </UseRegisterShortcutProvider>
-)
+    return (
+        <UseRegisterShortcutProvider ignoreTags={['button']}>
+            <AnimatePresence>{props && <ConfirmationModalBody {...props} />}</AnimatePresence>
+        </UseRegisterShortcutProvider>
+    )
+}
+
+const ConfirmationModal = ({ showConfirmationModal, ...props }: ConfirmationModalProps) => {
+    const { setProps } = useConfirmationModalContext()
+
+    useEffect(() => {
+        setProps(showConfirmationModal ? props : null)
+    }, [showConfirmationModal])
+
+    useEffect(
+        () => () => {
+            setProps(null)
+        },
+        [],
+    )
+
+    return null
+}
 
-export default WrapWithShortcutProvider
+export default ConfirmationModal

src/Shared/Components/ConfirmationModal/ConfirmationModalContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, PropsWithChildren, useContext, useMemo, 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 value = useMemo(() => ({ props, setProps }), [props])
+
+    return <ConfirmationModalContext.Provider value={value}>{children}</ConfirmationModalContext.Provider>
+}
+
+export const useConfirmationModalContext = () => useContext(ConfirmationModalContext)

src/Shared/Components/ConfirmationModal/index.tsx

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-export { default as ConfirmationModal } from './ConfirmationModal'
+export { default as ConfirmationModal, BaseConfirmationModal } from './ConfirmationModal'
 export { DeleteConfirmationModal } from './DeleteConfirmationModal'
 export { ForceDeleteConfirmationModal } from './ForceDeleteConfirmationModal'
 export { CannotDeleteModal } from './CannotDeleteModal'
 export { ConfirmationModalVariantType, type ConfirmationModalProps } from './types'
+export { ConfirmationModalProvider } from './ConfirmationModalContext'

src/Shared/Components/ConfirmationModal/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren, ReactElement, ReactNode, SyntheticEvent } from 'react'
+import { Dispatch, PropsWithChildren, ReactElement, ReactNode, SetStateAction, SyntheticEvent } from 'react'
 import { ButtonProps } from '../Button'
 
 export enum ConfirmationModalVariantType {
@@ -181,3 +181,8 @@ export interface ForceDeleteConfirmationProps
             Pick<DeleteConfirmationModalProps, 'onDelete' | 'showConfirmationModal' | 'closeConfirmationModal'>
         >,
         Partial<Pick<ConfirmationModalProps, 'title' | 'subtitle'>> {}
+
+export interface ConfirmationModalContextType {
+    props: Omit<ConfirmationModalProps, 'showConfirmationModal'> | null
+    setProps: Dispatch<SetStateAction<ConfirmationModalContextType['props']>>
+}