From a37abd16ac6ad146eb1e1343c36aba53e43cc766 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Tue, 24 Sep 2024 13:48:21 -0600
Subject: [PATCH] fix(ui): published, draft and changed labels should now be
 correctly displayed (#8382)

Fixes the issue where the published or changed document is always shown
as "Changed" instead of "Published" or "Draft"


![image](https://github.com/user-attachments/assets/05581b73-0e17-4b41-96a8-007c8b6161f2)


Statuses:
- Published - when the current version is also the published version
- Changed - when the current version is a draft version but a published
version exists
- Draft - when the current version is a draft and no published versions
exist

---------

Co-authored-by: Jessica Chowdhury <jessica@trbl.design>
---
 packages/payload/src/versions/types.ts           |  1 +
 packages/ui/src/elements/PublishButton/index.tsx |  3 ++-
 packages/ui/src/elements/Status/index.tsx        | 12 ++++++++++--
 test/versions/e2e.spec.ts                        | 12 +++++++++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/payload/src/versions/types.ts b/packages/payload/src/versions/types.ts
index bf0b7bf20..a49c16ab1 100644
--- a/packages/payload/src/versions/types.ts
+++ b/packages/payload/src/versions/types.ts
@@ -36,6 +36,7 @@ export type TypeWithVersion<T> = {
   createdAt: string
   id: string
   parent: number | string
+  publishedLocale?: string
   snapshot?: boolean
   updatedAt: string
   version: T
diff --git a/packages/ui/src/elements/PublishButton/index.tsx b/packages/ui/src/elements/PublishButton/index.tsx
index 5cba012f0..c1765e68b 100644
--- a/packages/ui/src/elements/PublishButton/index.tsx
+++ b/packages/ui/src/elements/PublishButton/index.tsx
@@ -43,7 +43,8 @@ export const DefaultPublishButton: React.FC<{ label?: string }> = ({ label: labe
   const { code } = useLocale()
   const label = labelProp || t('version:publishChanges')
 
-  const hasNewerVersions = unpublishedVersions?.totalDocs > 0
+  const hasNewerVersions =
+    unpublishedVersions?.totalDocs > 0 && unpublishedVersions?.docs[0]?.version?._status === 'draft'
   const canPublish = hasPublishPermission && (modified || hasNewerVersions || !publishedDoc)
   const operation = useOperation()
 
diff --git a/packages/ui/src/elements/Status/index.tsx b/packages/ui/src/elements/Status/index.tsx
index 781211002..b5e3046e6 100644
--- a/packages/ui/src/elements/Status/index.tsx
+++ b/packages/ui/src/elements/Status/index.tsx
@@ -41,14 +41,22 @@ export const Status: React.FC = () => {
 
   let statusToRender: 'changed' | 'draft' | 'published'
 
-  if (unpublishedVersions?.docs?.length > 0 && publishedDoc) {
+  const isChangedFromPublished = unpublishedVersions?.docs?.[0]?.version?._status === 'draft'
+
+  if (unpublishedVersions?.docs?.length > 0 && isChangedFromPublished && publishedDoc) {
     statusToRender = 'changed'
   } else if (!publishedDoc) {
     statusToRender = 'draft'
-  } else if (publishedDoc && unpublishedVersions?.docs?.length <= 1) {
+  } else if (publishedDoc && unpublishedVersions?.docs?.length <= 2) {
     statusToRender = 'published'
   }
 
+  const lastVersion = unpublishedVersions?.docs?.[0]
+
+  if (lastVersion && lastVersion.publishedLocale) {
+    statusToRender = locale === lastVersion.publishedLocale ? 'published' : 'draft'
+  }
+
   const performAction = useCallback(
     async (action: 'revert' | 'unpublish') => {
       let url
diff --git a/test/versions/e2e.spec.ts b/test/versions/e2e.spec.ts
index c92c1a0b8..6b3bc8ca0 100644
--- a/test/versions/e2e.spec.ts
+++ b/test/versions/e2e.spec.ts
@@ -647,7 +647,7 @@ describe('versions', () => {
 
       await textField.fill('spanish published')
       await saveDocAndAssert(page)
-      await expect(status).toContainText('Changed')
+      await expect(status).toContainText('Published')
 
       await textField.fill('spanish draft')
       await saveDocAndAssert(page, '#action-save-draft')
@@ -662,6 +662,16 @@ describe('versions', () => {
       await expect(publishSpecificLocale).toContainText('English')
       await publishSpecificLocale.click()
 
+      await wait(500)
+
+      await expect(async () => {
+        await expect(
+          page.locator('.payload-toast-item:has-text("Updated successfully.")'),
+        ).toBeVisible()
+      }).toPass({
+        timeout: POLL_TOPASS_TIMEOUT,
+      })
+
       id = await page.locator('.id-label').getAttribute('title')
 
       const data = await payload.find({