fix(ui): use server response when resetting form after unpublish

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

@@ -23,7 +23,6 @@ export function UnpublishButton({
   const {
     id,
     collectionSlug,
-    data: dataFromProps,
     globalSlug,
     hasPublishedDoc,
     hasPublishPermission,
@@ -102,10 +101,18 @@ export function UnpublishButton({
           })
 
           if (res.status === 200) {
-            void resetForm({
-              ...(dataFromProps || {}),
-              _status: 'draft',
-            })
+            const json = await res.json()
+            let data
+
+            if (globalSlug) {
+              data = json.result
+            } else if (collectionSlug) {
+              data = json.doc
+            }
+
+            if (data) {
+              void resetForm(data)
+            }
 
             toast.success(t('version:unpublishedSuccessfully'))
             if (!unpublishAll) {
@@ -136,7 +143,6 @@ export function UnpublishButton({
       })
     },
     [
-      dataFromProps,
       resetForm,
       collectionSlug,
       globalSlug,

test/versions/collections/UnpublishHookFormReset.ts

@@ -0,0 +1,38 @@
+import type { CollectionConfig } from 'payload'
+
+import { unpublishHookFormResetSlug } from '../slugs.js'
+
+const UnpublishHookFormReset: CollectionConfig = {
+  slug: unpublishHookFormResetSlug,
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'note',
+      type: 'text',
+      label: 'Note',
+    },
+  ],
+  hooks: {
+    beforeChange: [
+      ({ data, originalDoc }) => {
+        if (data?._status === 'draft' && originalDoc?._status === 'published') {
+          data.note = null
+        }
+
+        return data
+      },
+    ],
+  },
+  versions: {
+    drafts: true,
+  },
+}
+
+export default UnpublishHookFormReset

test/versions/config.ts

@@ -28,6 +28,7 @@ import { Media } from './collections/Media.js'
 import { Media2 } from './collections/Media2.js'
 import Posts from './collections/Posts.js'
 import { TextCollection } from './collections/Text.js'
+import UnpublishHookFormReset from './collections/UnpublishHookFormReset.js'
 import VersionPosts from './collections/Versions.js'
 import AutosaveGlobal from './globals/Autosave.js'
 import AutosaveWithDraftButtonGlobal from './globals/AutosaveWithDraftButton.js'
@@ -64,6 +65,7 @@ export default buildConfigWithDefaults({
     DraftsWithCustomUnpublish,
     DraftsWithValidate,
     ErrorOnUnpublish,
+    UnpublishHookFormReset,
     LocalizedPosts,
     VersionPosts,
     CustomIDs,

test/versions/e2e.spec.ts

@@ -83,6 +83,7 @@ import {
   postCollectionSlug,
   simpleDraftGlobalSlug,
   textCollectionSlug,
+  unpublishHookFormResetSlug,
   versionCollectionSlug,
 } from './slugs.js'
 
@@ -814,6 +815,47 @@ describe('Versions', () => {
       ).toBeVisible()
     })
 
+    test('collections — should reset form with server data after unpublish when beforeChange hook modifies fields', async () => {
+      const unpublishHookFormResetURL = new AdminUrlUtil(serverURL, unpublishHookFormResetSlug)
+
+      const publishedDoc = await payload.create({
+        collection: unpublishHookFormResetSlug,
+        data: {
+          _status: 'published',
+          title: 'unpublish hook form reset test',
+          note: 'published note',
+        },
+      })
+
+      await page.goto(unpublishHookFormResetURL.edit(String(publishedDoc.id)))
+
+      await expect(page.locator('#field-note')).toHaveValue('published note')
+
+      await openDocControls(page)
+      await page.locator('#action-unpublish').click()
+      await page.locator('[id^="confirm-un-publish-"] [data-dialog-action="confirm"]').click()
+      await expect(page.locator('.payload-toast-item')).toBeVisible()
+
+      await expect(page.locator('#field-note')).toHaveValue('')
+
+      const { docs } = await payload.find({
+        collection: unpublishHookFormResetSlug,
+        where: {
+          id: {
+            equals: publishedDoc.id,
+          },
+        },
+        depth: 0,
+      })
+
+      expect(docs[0]?.note).toBeNull()
+
+      await payload.delete({
+        collection: unpublishHookFormResetSlug,
+        id: publishedDoc.id,
+      })
+    })
+
     test('collections — should render custom unpublish button', async () => {
       const publishedDoc = await payload.create({
         collection: draftWithCustomUnpublishSlug,

test/versions/payload-types.ts

@@ -62,24 +62,24 @@ export type SupportedTimezones =
   | 'Pacific/Fiji';
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "LexicalNodes_F50D3E7C".
+ * via the `definition` "LexicalNodes_A64963B0".
  */
-export type LexicalNodes_F50D3E7C =
+export type LexicalNodes_A64963B0 =
   | SerializedTextNode
   | SerializedTabNode
   | SerializedLineBreakNode
-  | SerializedParagraphNode<LexicalNodes_F50D3E7C>
+  | SerializedParagraphNode<LexicalNodes_A64963B0>
   | SerializedBlockNode<MyBlock>
-  | SerializedHeadingNode<LexicalNodes_F50D3E7C>
+  | SerializedHeadingNode<LexicalNodes_A64963B0>
   | SerializedUploadNode<'draft-with-upload'>
   | SerializedUploadNode<'draft-with-upload-cloud-storage'>
   | SerializedUploadNode<'media', LexicalUploadFields_1AB4670B>
   | SerializedUploadNode<'media2'>
-  | SerializedQuoteNode<LexicalNodes_F50D3E7C>
-  | SerializedListNode<LexicalNodes_F50D3E7C>
-  | SerializedListItemNode<LexicalNodes_F50D3E7C>
-  | SerializedAutoLinkNode<LexicalNodes_F50D3E7C, LexicalLinkFields_0A7E9EC0>
-  | SerializedLinkNode<LexicalNodes_F50D3E7C, LexicalLinkFields_0A7E9EC0>
+  | SerializedQuoteNode<LexicalNodes_A64963B0>
+  | SerializedListNode<LexicalNodes_A64963B0>
+  | SerializedListItemNode<LexicalNodes_A64963B0>
+  | SerializedAutoLinkNode<LexicalNodes_A64963B0, LexicalLinkFields_0A7E9EC0>
+  | SerializedLinkNode<LexicalNodes_A64963B0, LexicalLinkFields_0A7E9EC0>
   | SerializedRelationshipNode<
       | 'disable-publish'
       | 'posts'
@@ -94,6 +94,7 @@ export type LexicalNodes_F50D3E7C =
       | 'drafts-with-custom-unpublish'
       | 'draft-with-validate-posts'
       | 'error-on-unpublish'
+      | 'unpublish-hook-form-reset'
       | 'localized-posts'
       | 'version-posts'
       | 'custom-ids'
@@ -127,6 +128,7 @@ export interface Config {
     'drafts-with-custom-unpublish': DraftsWithCustomUnpublish;
     'draft-with-validate-posts': DraftWithValidatePost;
     'error-on-unpublish': ErrorOnUnpublish;
+    'unpublish-hook-form-reset': UnpublishHookFormReset;
     'localized-posts': LocalizedPost;
     'version-posts': VersionPost;
     'custom-ids': CustomId;
@@ -159,6 +161,7 @@ export interface Config {
     'drafts-with-custom-unpublish': DraftsWithCustomUnpublishSelect<false> | DraftsWithCustomUnpublishSelect<true>;
     'draft-with-validate-posts': DraftWithValidatePostsSelect<false> | DraftWithValidatePostsSelect<true>;
     'error-on-unpublish': ErrorOnUnpublishSelect<false> | ErrorOnUnpublishSelect<true>;
+    'unpublish-hook-form-reset': UnpublishHookFormResetSelect<false> | UnpublishHookFormResetSelect<true>;
     'localized-posts': LocalizedPostsSelect<false> | LocalizedPostsSelect<true>;
     'version-posts': VersionPostsSelect<false> | VersionPostsSelect<true>;
     'custom-ids': CustomIdsSelect<false> | CustomIdsSelect<true>;
@@ -268,7 +271,7 @@ export interface AutosavePost {
   title: string;
   relationship?: (string | null) | Post;
   computedTitle?: string | null;
-  richText?: LexicalRichText<LexicalNodes_F50D3E7C> | null;
+  richText?: LexicalRichText<LexicalNodes_A64963B0> | null;
   json?:
     | {
         [k: string]: unknown;
@@ -435,6 +438,18 @@ export interface ErrorOnUnpublish {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "unpublish-hook-form-reset".
+ */
+export interface UnpublishHookFormReset {
+  id: string;
+  title: string;
+  note?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "localized-posts".
@@ -566,8 +581,8 @@ export interface Diff {
       )[]
     | null;
   zeroDepthRelationship?: (string | null) | User;
-  richtext?: LexicalRichText<LexicalNodes_F50D3E7C> | null;
-  richtextWithCustomDiff?: LexicalRichText<LexicalNodes_F50D3E7C> | null;
+  richtext?: LexicalRichText<LexicalNodes_A64963B0> | null;
+  richtextWithCustomDiff?: LexicalRichText<LexicalNodes_A64963B0> | null;
   textInRow?: string | null;
   textCannotRead?: string | null;
   select?: ('option1' | 'option2') | null;
@@ -957,6 +972,10 @@ export interface PayloadLockedDocument {
         relationTo: 'error-on-unpublish';
         value: string | ErrorOnUnpublish;
       } | null)
+    | ({
+        relationTo: 'unpublish-hook-form-reset';
+        value: string | UnpublishHookFormReset;
+      } | null)
     | ({
         relationTo: 'localized-posts';
         value: string | LocalizedPost;
@@ -1221,6 +1240,17 @@ export interface ErrorOnUnpublishSelect<T extends boolean = true> {
   createdAt?: T;
   _status?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "unpublish-hook-form-reset_select".
+ */
+export interface UnpublishHookFormResetSelect<T extends boolean = true> {
+  title?: T;
+  note?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  _status?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "localized-posts_select".

test/versions/slugs.ts

@@ -29,6 +29,8 @@ export const versionCollectionSlug = 'version-posts'
 export const disablePublishSlug = 'disable-publish'
 export const errorOnUnpublishSlug = 'error-on-unpublish'
 
+export const unpublishHookFormResetSlug = 'unpublish-hook-form-reset'
+
 export const disablePublishGlobalSlug = 'disable-publish-global'
 
 export const textCollectionSlug = 'text'