fix(ui): doc drawer leave without saving modal

DocumentDrawer also closes via the side "overlay" button and by pressing the Esc key - extend change from #14324 to trigger the leave without saving modal when closing via keyboard Esc key or via the `close-drawer` button.

Author: ACDR

packages/ui/src/elements/DocumentDrawer/DrawerHeader/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { Gutter } from '../../../elements/Gutter/index.js'
 import { useModal } from '../../../elements/Modal/index.js'
@@ -22,7 +22,7 @@ export const DocumentDrawerHeader: React.FC<{
   drawerSlug: string
   showDocumentID?: boolean
 }> = ({ AfterHeader, drawerSlug, showDocumentID = true }) => {
-  const { closeModal, openModal } = useModal()
+  const { closeModal, isModalOpen, openModal } = useModal()
   const { t } = useTranslation()
   const isModified = useFormModified()
 
@@ -34,6 +34,42 @@ export const DocumentDrawerHeader: React.FC<{
     }
   }, [isModified, openModal, closeModal, drawerSlug])
 
+  useEffect(() => {
+    if (!isModified) {
+      return
+    }
+
+    const drawerCloseButton = document.getElementById(`close-drawer__${drawerSlug}`)
+
+    const handleDrawerCloseClick = (event: MouseEvent) => {
+      if (isModalOpen(leaveWithoutSavingModalSlug)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      handleOnClose()
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || isModalOpen(leaveWithoutSavingModalSlug)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      handleOnClose()
+    }
+
+    drawerCloseButton?.addEventListener('click', handleDrawerCloseClick, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+
+    return () => {
+      drawerCloseButton?.removeEventListener('click', handleDrawerCloseClick, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [drawerSlug, handleOnClose, isModalOpen, isModified])
+
   return (
     <Gutter className={`${documentDrawerBaseClass}__header`}>
       <div className={`${documentDrawerBaseClass}__header-content`}>

test/admin/e2e/document-view/e2e.spec.ts

@@ -911,7 +911,16 @@ describe('Document View', () => {
       await expect(leaveModal).toBeVisible()
       await leaveModal.locator('#confirm-cancel').click()
       await expect(editModal).toBeVisible()
-      await closeButton.click()
+
+      const gutterCloseButton = page.locator('.drawer--is-open > .drawer__close')
+      await gutterCloseButton.click()
+      await expect(leaveModal).toBeVisible()
+      await leaveModal.locator('#confirm-cancel').click()
+      await expect(editModal).toBeVisible()
+
+      await page.keyboard.press('Escape')
+      await expect(leaveModal).toBeVisible()
+
       await leaveModal.locator('#confirm-action').click()
       await expect(editModal).toBeHidden()
     })