feat(ui): ask before closing doc drawer with edits (#14324)

Fixes #13947

This change will present the leave without saving modal when a user has
edits on a document in a drawer and then attempts to close the drawer.

Author: JarrodMFlesch

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

@@ -1,23 +1,38 @@
 'use client'
 
+import { useCallback } from 'react'
+
 import { Gutter } from '../../../elements/Gutter/index.js'
 import { useModal } from '../../../elements/Modal/index.js'
 import { RenderTitle } from '../../../elements/RenderTitle/index.js'
+import { useFormModified } from '../../../forms/Form/index.js'
 import { XIcon } from '../../../icons/X/index.js'
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'
 import { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import { IDLabel } from '../../IDLabel/index.js'
+import { LeaveWithoutSavingModal } from '../../LeaveWithoutSaving/index.js'
 import { documentDrawerBaseClass } from '../index.js'
 import './index.scss'
 
+const leaveWithoutSavingModalSlug = 'leave-without-saving-doc-drawer'
+
 export const DocumentDrawerHeader: React.FC<{
   AfterHeader?: React.ReactNode
   drawerSlug: string
   showDocumentID?: boolean
 }> = ({ AfterHeader, drawerSlug, showDocumentID = true }) => {
-  const { closeModal } = useModal()
+  const { closeModal, openModal } = useModal()
   const { t } = useTranslation()
+  const isModified = useFormModified()
+
+  const handleOnClose = useCallback(() => {
+    if (isModified) {
+      openModal(leaveWithoutSavingModalSlug)
+    } else {
+      closeModal(drawerSlug)
+    }
+  }, [isModified, openModal, closeModal, drawerSlug])
 
   return (
     <Gutter className={`${documentDrawerBaseClass}__header`}>
@@ -28,7 +43,7 @@ export const DocumentDrawerHeader: React.FC<{
         <button
           aria-label={t('general:close')}
           className={`${documentDrawerBaseClass}__header-close`}
-          onClick={() => closeModal(drawerSlug)}
+          onClick={handleOnClose}
           type="button"
         >
           <XIcon />
@@ -38,6 +53,11 @@ export const DocumentDrawerHeader: React.FC<{
       {AfterHeader ? (
         <div className={`${documentDrawerBaseClass}__after-header`}>{AfterHeader}</div>
       ) : null}
+
+      <LeaveWithoutSavingModal
+        modalSlug={leaveWithoutSavingModalSlug}
+        onConfirm={() => closeModal(drawerSlug)}
+      />
     </Gutter>
   )
 }

packages/ui/src/elements/LeaveWithoutSaving/index.tsx

@@ -10,40 +10,46 @@ import { ConfirmationModal } from '../ConfirmationModal/index.js'
 import { useModal } from '../Modal/index.js'
 import { usePreventLeave } from './usePreventLeave.js'
 
-const modalSlug = 'leave-without-saving'
-
 type LeaveWithoutSavingProps = {
+  disablePreventLeave?: boolean
+  modalSlug?: string
   onConfirm?: () => Promise<void> | void
   onPrevent?: (nextHref: null | string) => void
 }
 
-export const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({ onConfirm, onPrevent }) => {
+const leaveWithoutSavingModalSlug = 'leave-without-saving'
+
+export const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({
+  disablePreventLeave = false,
+  onConfirm,
+  onPrevent,
+}) => {
+  const modalSlug = leaveWithoutSavingModalSlug
   const { closeModal, openModal } = useModal()
   const modified = useFormModified()
   const { isValid } = useForm()
   const { user } = useAuth()
   const [hasAccepted, setHasAccepted] = React.useState(false)
-  const { t } = useTranslation()
 
-  const prevent = Boolean((modified || !isValid) && user)
+  const prevent = !disablePreventLeave && Boolean((modified || !isValid) && user)
 
   const handlePrevent = useCallback(() => {
     const activeHref = (document.activeElement as HTMLAnchorElement)?.href || null
     if (onPrevent) {
       onPrevent(activeHref)
     }
     openModal(modalSlug)
-  }, [openModal, onPrevent])
+  }, [openModal, onPrevent, modalSlug])
 
   const handleAccept = useCallback(() => {
     closeModal(modalSlug)
-  }, [closeModal])
+  }, [closeModal, modalSlug])
 
   usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent: handlePrevent, prevent })
 
   const onCancel: OnCancel = useCallback(() => {
     closeModal(modalSlug)
-  }, [closeModal])
+  }, [closeModal, modalSlug])
 
   const handleConfirm = useCallback(async () => {
     if (onConfirm) {
@@ -56,6 +62,22 @@ export const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({ onConfir
     setHasAccepted(true)
   }, [onConfirm])
 
+  return (
+    <LeaveWithoutSavingModal modalSlug={modalSlug} onCancel={onCancel} onConfirm={handleConfirm} />
+  )
+}
+
+export const LeaveWithoutSavingModal = ({
+  modalSlug,
+  onCancel,
+  onConfirm,
+}: {
+  modalSlug: string
+  onCancel?: OnCancel
+  onConfirm: () => Promise<void> | void
+}) => {
+  const { t } = useTranslation()
+
   return (
     <ConfirmationModal
       body={t('general:changesNotSaved')}
@@ -64,7 +86,7 @@ export const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({ onConfir
       heading={t('general:leaveWithoutSaving')}
       modalSlug={modalSlug}
       onCancel={onCancel}
-      onConfirm={handleConfirm}
+      onConfirm={onConfirm}
     />
   )
 }

packages/ui/src/elements/LeaveWithoutSaving/usePreventLeave.tsx

@@ -143,8 +143,10 @@ export const usePreventLeave = ({
       }
     }
 
-    // Add the global click event listener
-    document.addEventListener('click', handleClick, true)
+    if (prevent) {
+      // Add the global click event listener
+      document.addEventListener('click', handleClick, true)
+    }
 
     // Clean up the global click event listener when the component is unmounted
     return () => {

packages/ui/src/views/Edit/index.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable react-compiler/react-compiler -- TODO: fix */
 'use client'
 
 import type { ClientUser, DocumentViewClientProps } from 'payload'
 
+import { useModal } from '@faceless-ui/modal'
 import { useRouter, useSearchParams } from 'next/navigation.js'
 import { formatAdminURL } from 'payload/shared'
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -112,6 +112,7 @@ export function DefaultEditView({
     onRestore,
     onSave: onSaveFromContext,
   } = useDocumentDrawerContext()
+  const { closeModal } = useModal()
 
   const isInDrawer = Boolean(drawerSlug)
 
@@ -175,18 +176,20 @@ export function DefaultEditView({
       (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave),
   )
 
-  const preventLeaveWithoutSaving =
-    typeof disableLeaveWithoutSaving !== 'undefined' ? !disableLeaveWithoutSaving : !autosaveEnabled
-
   const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false)
   const [showTakeOverModal, setShowTakeOverModal] = useState(false)
 
   const [editSessionStartTime, setEditSessionStartTime] = useState(Date.now())
 
   const lockExpiryTime = lastUpdateTime + lockDurationInMilliseconds
-
   const isLockExpired = Date.now() > lockExpiryTime
 
+  const preventLeaveWithoutSaving =
+    !isReadOnlyForIncomingUser &&
+    (typeof disableLeaveWithoutSaving !== 'undefined'
+      ? !disableLeaveWithoutSaving
+      : !autosaveEnabled)
+
   const schemaPathSegments = useMemo(() => [entitySlug], [entitySlug])
 
   const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(() => {
@@ -253,16 +256,14 @@ export function DefaultEditView({
         nextPath.includes(path),
       )
 
-      // Only retain the lock if the user is still viewing the document
-      if (!isInternalView) {
-        if (isLockOwnedByCurrentUser) {
-          try {
-            await unlockDocument(id, collectionSlug ?? globalSlug)
-            setDocumentIsLocked(false)
-            setCurrentEditor(null)
-          } catch (err) {
-            console.error('Failed to unlock before leave', err) // eslint-disable-line no-console
-          }
+      // Remove the lock if the user is navigating away from the document view they have locked
+      if (isLockOwnedByCurrentUser && !isInternalView) {
+        try {
+          await unlockDocument(id, collectionSlug ?? globalSlug)
+          setDocumentIsLocked(false)
+          setCurrentEditor(null)
+        } catch (err) {
+          console.error('Failed to unlock before leave', err) // eslint-disable-line no-console
         }
       }
     }
@@ -577,7 +578,7 @@ export function DefaultEditView({
               }}
             />
           )}
-          {!isReadOnlyForIncomingUser && preventLeaveWithoutSaving && (
+          {preventLeaveWithoutSaving && (
             <LeaveWithoutSaving onConfirm={handleLeaveConfirm} onPrevent={handlePrevent} />
           )}
           {!isInDrawer && (
@@ -675,6 +676,7 @@ export function DefaultEditView({
                           readOnly={!hasSavePermission}
                           requirePassword={!id}
                           setValidateBeforeSubmit={setValidateBeforeSubmit}
+                          // eslint-disable-next-line react-compiler/react-compiler
                           useAPIKey={auth.useAPIKey}
                           username={data?.username}
                           verify={auth.verify}

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

@@ -49,13 +49,15 @@ const description = 'Description'
 
 let payload: PayloadTestSDK<Config>
 
-import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
-import { openNav } from 'helpers/e2e/toggleNav.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
 
+import { navigateToDoc } from '../../../helpers/e2e/navigateToDoc.js'
+import { selectInput } from '../../../helpers/e2e/selectInput.js'
+import { openDocDrawer } from '../../../helpers/e2e/toggleDocDrawer.js'
+import { openNav } from '../../../helpers/e2e/toggleNav.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 const filename = fileURLToPath(import.meta.url)
@@ -805,6 +807,43 @@ describe('Document View', () => {
       await expect(customEditMenuItem).toHaveAttribute('href', `/custom-action?id=${docId}`)
     })
   })
+
+  describe('save before leaving modal', () => {
+    test('should prompt in drawer with edits', async () => {
+      await page.goto(postsUrl.create)
+      await page.locator('#field-title').fill('sean')
+      await saveDocAndAssert(page)
+
+      await page.goto(postsUrl.create)
+      await page.locator('#field-title').fill('heros')
+      await selectInput({
+        multiSelect: false,
+        option: 'sean',
+        filter: 'sean',
+        selectLocator: page.locator('#field-relationship'),
+        selectType: 'relationship',
+      })
+      await saveDocAndAssert(page)
+      await openDocDrawer({
+        page,
+        selector: '#field-relationship button.relationship--single-value__drawer-toggler',
+      })
+      const editModal = page.locator('.drawer--is-open .collection-edit')
+      await editModal.locator('#field-title').fill('new sean')
+
+      // Attempt to close the drawer
+      const closeButton = editModal.locator('button.doc-drawer__header-close')
+      await closeButton.click()
+
+      const leaveModal = page.locator('#leave-without-saving-doc-drawer')
+      await expect(leaveModal).toBeVisible()
+      await leaveModal.locator('#confirm-cancel').click()
+      await expect(editModal).toBeVisible()
+      await closeButton.click()
+      await leaveModal.locator('#confirm-action').click()
+      await expect(editModal).toBeHidden()
+    })
+  })
 })
 
 async function createPost(overrides?: Partial<Post>): Promise<Post> {