fix(ui): autosave hooks are not reflected in form state (#13416)

Fixes #10515. Needed for #12956.

Hooks run within autosave are not reflected in form state.

Similar to #10268, but for autosave events.

For example, if you are using a computed value, like this:

```ts
[
  // ...
  {
    name: 'title',
    type: 'text',
  },
  {
    name: 'computedTitle',
    type: 'text',
    hooks: {
      beforeChange: [({ data }) => data?.title],
    },
  },
]
```

In the example above, when an autosave event is triggered after changing
the `title` field, we expect the `computedTitle` field to match. But
although this takes place on the database level, the UI does not reflect
this change unless you refresh the page or navigate back and forth.

Here's an example:

Before:


https://github.com/user-attachments/assets/c8c68a78-9957-45a8-a710-84d954d15bcc

After:


https://github.com/user-attachments/assets/16cb87a5-83ca-4891-b01f-f5c4b0a34362

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210561273449855

Author: jacobsfletch

docs/admin/react-hooks.mdx

@@ -739,7 +739,7 @@ The `useDocumentInfo` hook provides information about the current document being
 | **`lastUpdateTime`**               | Timestamp of the last update to the document.                                                                                                    |
 | **`mostRecentVersionIsAutosaved`** | Whether the most recent version is an autosaved version.                                                                                         |
 | **`preferencesKey`**               | The `preferences` key to use when interacting with document-level user preferences. [More details](./preferences).                               |
-| **`savedDocumentData`**            | The saved data of the document.                                                                                                                  |
+| **`data`**                         | The saved data of the document.                                                                                                                  |
 | **`setDocFieldPreferences`**       | Method to set preferences for a specific field. [More details](./preferences).                                                                   |
 | **`setDocumentTitle`**             | Method to set the document title.                                                                                                                |
 | **`setHasPublishedDoc`**           | Method to update whether the document has been published.                                                                                        |

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

@@ -5,7 +5,6 @@ import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
 import { dequal } from 'dequal/lite'
 import { reduceFieldsToValues, versionDefaults } from 'payload/shared'
 import React, { useDeferredValue, useEffect, useRef, useState } from 'react'
-import { toast } from 'sonner'
 
 import {
   useAllFormFields,
@@ -17,13 +16,11 @@ import { useDebounce } from '../../hooks/useDebounce.js'
 import { useEffectEvent } from '../../hooks/useEffectEvent.js'
 import { useQueues } from '../../hooks/useQueues.js'
 import { useConfig } from '../../providers/Config/index.js'
-import { useDocumentEvents } from '../../providers/DocumentEvents/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'
 import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'
-import { useDocumentDrawerContext } from '../DocumentDrawer/Provider.js'
 import { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'
 import './index.scss'
 
@@ -51,16 +48,11 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
     incrementVersionCount,
     lastUpdateTime,
     mostRecentVersionIsAutosaved,
-    setLastUpdateTime,
     setMostRecentVersionIsAutosaved,
     setUnpublishedVersionCount,
-    updateSavedDocumentData,
   } = useDocumentInfo()
 
-  const { onSave: onSaveFromDocumentDrawer } = useDocumentDrawerContext()
-
-  const { reportUpdate } = useDocumentEvents()
-  const { dispatchFields, isValid, setBackgroundProcessing, setIsValid } = useForm()
+  const { isValid, setBackgroundProcessing, submit } = useForm()
 
   const [formState] = useAllFormFields()
   const modified = useFormModified()
@@ -151,118 +143,38 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
             method = 'POST'
           }
 
-          if (url) {
-            if (modifiedRef.current) {
-              const { data, valid } = reduceFieldsToValuesWithValidation(formStateRef.current, true)
-
-              data._status = 'draft'
-
-              const skipSubmission =
-                submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate
-
-              if (!skipSubmission) {
-                let res
-
-                try {
-                  res = await fetch(url, {
-                    body: JSON.stringify(data),
-                    credentials: 'include',
-                    headers: {
-                      'Accept-Language': i18n.language,
-                      'Content-Type': 'application/json',
-                    },
-                    method,
-                  })
-                } catch (_err) {
-                  // Swallow Error
-                }
-
-                const newDate = new Date()
-                // We need to log the time in order to figure out if we need to trigger the state off later
-                endTimestamp = newDate.getTime()
-
-                const json = await res.json()
-
-                if (res.status === 200) {
-                  setLastUpdateTime(newDate.getTime())
-
-                  reportUpdate({
-                    id,
-                    entitySlug,
-                    updatedAt: newDate.toISOString(),
-                  })
-
-                  // if onSaveFromDocumentDrawer is defined, call it
-                  if (typeof onSaveFromDocumentDrawer === 'function') {
-                    void onSaveFromDocumentDrawer({
-                      ...json,
-                      operation: 'update',
-                    })
-                  }
-
-                  if (!mostRecentVersionIsAutosaved) {
-                    incrementVersionCount()
-                    setMostRecentVersionIsAutosaved(true)
-                    setUnpublishedVersionCount((prev) => prev + 1)
-                  }
-                }
-
-                if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {
-                  if (Array.isArray(json.errors)) {
-                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(
-                      ([fieldErrs, nonFieldErrs], err) => {
-                        const newFieldErrs = []
-                        const newNonFieldErrs = []
-
-                        if (err?.message) {
-                          newNonFieldErrs.push(err)
-                        }
-
-                        if (Array.isArray(err?.data)) {
-                          err.data.forEach((dataError) => {
-                            if (dataError?.field) {
-                              newFieldErrs.push(dataError)
-                            } else {
-                              newNonFieldErrs.push(dataError)
-                            }
-                          })
-                        }
-
-                        return [
-                          [...fieldErrs, ...newFieldErrs],
-                          [...nonFieldErrs, ...newNonFieldErrs],
-                        ]
-                      },
-                      [[], []],
-                    )
-
-                    dispatchFields({
-                      type: 'ADD_SERVER_ERRORS',
-                      errors: fieldErrors,
-                    })
-
-                    nonFieldErrors.forEach((err) => {
-                      toast.error(err.message || i18n.t('error:unknown'))
-                    })
-
-                    setIsValid(false)
-                    hideIndicator()
-                    return
-                  }
-                } else {
-                  // If it's not an error then we can update the document data inside the context
-                  const document = json?.doc || json?.result
-
-                  // Manually update the data since this function doesn't fire the `submit` function from useForm
-                  if (document) {
-                    setIsValid(true)
-                    updateSavedDocumentData(document)
-                  }
-                }
-
-                hideIndicator()
-              }
+          const { valid } = reduceFieldsToValuesWithValidation(formStateRef.current, true)
+
+          const skipSubmission =
+            submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate
+
+          if (!skipSubmission && modifiedRef.current && url) {
+            const result = await submit({
+              action: url,
+              context: {
+                incrementVersionCount: false,
+              },
+              disableFormWhileProcessing: false,
+              disableSuccessStatus: true,
+              method,
+              overrides: {
+                _status: 'draft',
+              },
+              skipValidation: versionsConfig?.drafts && !versionsConfig?.drafts?.validate,
+            })
+
+            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {
+              incrementVersionCount()
+              setMostRecentVersionIsAutosaved(true)
+              setUnpublishedVersionCount((prev) => prev + 1)
             }
+
+            const newDate = new Date()
+
+            // We need to log the time in order to figure out if we need to trigger the state off later
+            endTimestamp = newDate.getTime()
+
+            hideIndicator()
           }
         }
       },

packages/ui/src/elements/DocumentDrawer/Provider.tsx

@@ -20,6 +20,11 @@ export type DocumentDrawerContextProps = {
   }) => Promise<void> | void
   readonly onSave?: (args: {
     collectionConfig?: ClientCollectionConfig
+    /**
+     * @experimental - Note: this property is experimental and may change in the future. Use as your own discretion.
+     * If you want to pass additional data to the onSuccess callback, you can use this context object.
+     */
+    context?: Record<string, unknown>
     doc: TypeWithID
     operation: 'create' | 'update'
     result: Data

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

@@ -161,7 +161,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
 
   const { t } = useTranslation()
   const { setModified } = useForm()
-  const { id, docPermissions, savedDocumentData, setUploadStatus } = useDocumentInfo()
+  const { id, data, docPermissions, setUploadStatus } = useDocumentInfo()
   const isFormSubmitting = useFormProcessing()
   const { errorMessage, setValue, showError, value } = useField<File>({
     path: 'file',
@@ -349,7 +349,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
 
   const acceptMimeTypes = uploadConfig.mimeTypes?.join(', ')
 
-  const imageCacheTag = uploadConfig?.cacheTags && savedDocumentData?.updatedAt
+  const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt
 
   useEffect(() => {
     const handleControlFileUrl = async () => {
@@ -375,11 +375,11 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
   return (
     <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>
       <FieldError message={errorMessage} showError={showError} />
-      {savedDocumentData && savedDocumentData.filename && !removedFile && (
+      {data && data.filename && !removedFile && (
         <FileDetails
           collectionSlug={collectionSlug}
           customUploadActions={customActions}
-          doc={savedDocumentData}
+          doc={data}
           enableAdjustments={showCrop || showFocalPoint}
           handleRemove={canRemoveUpload ? handleFileRemoval : undefined}
           hasImageSizes={hasImageSizes}
@@ -388,7 +388,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
           uploadConfig={uploadConfig}
         />
       )}
-      {((!uploadConfig.hideFileInputOnCreate && !savedDocumentData?.filename) || removedFile) && (
+      {((!uploadConfig.hideFileInputOnCreate && !data?.filename) || removedFile) && (
         <div className={`${baseClass}__upload`}>
           {!value && !showUrlInput && (
             <Dropzone onChange={handleFileSelection}>
@@ -506,7 +506,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                 <UploadActions
                   customActions={customActions}
                   enableAdjustments={showCrop || showFocalPoint}
-                  enablePreviewSizes={hasImageSizes && savedDocumentData?.filename && !removedFile}
+                  enablePreviewSizes={hasImageSizes && data?.filename && !removedFile}
                   mimeType={value.type}
                 />
               </div>
@@ -523,17 +523,17 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
           )}
         </div>
       )}
-      {(value || savedDocumentData?.filename) && (
+      {(value || data?.filename) && (
         <EditDepthProvider>
           <Drawer Header={null} slug={editDrawerSlug}>
             <EditUpload
-              fileName={value?.name || savedDocumentData?.filename}
-              fileSrc={savedDocumentData?.url || fileSrc}
+              fileName={value?.name || data?.filename}
+              fileSrc={data?.url || fileSrc}
               imageCacheTag={imageCacheTag}
               initialCrop={uploadEdits?.crop ?? undefined}
               initialFocalPoint={{
-                x: uploadEdits?.focalPoint?.x || savedDocumentData?.focalX || 50,
-                y: uploadEdits?.focalPoint?.y || savedDocumentData?.focalY || 50,
+                x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
+                y: uploadEdits?.focalPoint?.y || data?.focalY || 50,
               }}
               onSave={onEditsSave}
               showCrop={showCrop}
@@ -542,18 +542,14 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
           </Drawer>
         </EditDepthProvider>
       )}
-      {savedDocumentData && hasImageSizes && (
+      {data && hasImageSizes && (
         <Drawer
           className={`${baseClass}__previewDrawer`}
           hoverTitle
           slug={sizePreviewSlug}
-          title={t('upload:sizesFor', { label: savedDocumentData.filename })}
+          title={t('upload:sizesFor', { label: data.filename })}
         >
-          <PreviewSizes
-            doc={savedDocumentData}
-            imageCacheTag={imageCacheTag}
-            uploadConfig={uploadConfig}
-          />
+          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig} />
         </Drawer>
       )}
     </div>