From beed83b231b19090902dd502ff5eab054a67a1a6 Mon Sep 17 00:00:00 2001
From: Jacob Fletcher <jacobsfletch@gmail.com>
Date: Fri, 13 Oct 2023 10:23:26 -0400
Subject: [PATCH] fix: preview button conditions (#3613)

---
 .../elements/DocumentControls/index.tsx       | 20 +---------
 test/admin/config.ts                          | 17 ++++++--
 test/admin/e2e.spec.ts                        | 40 ++++++++++++++++++-
 test/admin/shared.ts                          |  6 +++
 4 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
index 883e1fe9b2..be034ad2d1 100644
--- a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
+++ b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
@@ -55,24 +55,6 @@ export const DocumentControls: React.FC<{
 
   const { i18n, t } = useTranslation('general')
 
-  let showPreviewButton = false
-
-  if (collection) {
-    showPreviewButton =
-      isEditing &&
-      collection?.admin?.preview &&
-      collection?.versions?.drafts &&
-      !collection?.versions?.drafts?.autosave
-  }
-
-  if (global) {
-    showPreviewButton =
-      isEditing &&
-      global?.admin?.preview &&
-      global?.versions?.drafts &&
-      !global?.versions?.drafts?.autosave
-  }
-
   const showDotMenu = Boolean(collection && id && !disableActions)
 
   return (
@@ -165,7 +147,7 @@ export const DocumentControls: React.FC<{
         </div>
         <div className={`${baseClass}__controls-wrapper`}>
           <div className={`${baseClass}__controls`}>
-            {showPreviewButton && (
+            {(collection?.admin?.preview || global?.admin?.preview) && (
               <PreviewButton
                 CustomComponent={
                   collection?.admin?.components?.edit?.PreviewButton ||
diff --git a/test/admin/config.ts b/test/admin/config.ts
index db03212d1f..81e4355205 100644
--- a/test/admin/config.ts
+++ b/test/admin/config.ts
@@ -17,7 +17,15 @@ import CustomEditView from './components/views/CustomEdit'
 import CustomMinimalRoute from './components/views/CustomMinimal'
 import CustomVersionsView from './components/views/CustomVersions'
 import CustomView from './components/views/CustomView'
-import { globalSlug, postsSlug, slugPluralLabel, slugSingularLabel } from './shared'
+import {
+  globalSlug,
+  group1Collection1Slug,
+  group1Collection2Slug,
+  group1GlobalSlug,
+  postsSlug,
+  slugPluralLabel,
+  slugSingularLabel,
+} from './shared'
 
 export interface Post {
   createdAt: Date
@@ -211,7 +219,7 @@ export default buildConfigWithDefaults({
       ],
     },
     {
-      slug: 'group-one-collection-ones',
+      slug: group1Collection1Slug,
       admin: {
         group: 'One',
       },
@@ -223,7 +231,7 @@ export default buildConfigWithDefaults({
       ],
     },
     {
-      slug: 'group-one-collection-twos',
+      slug: group1Collection2Slug,
       admin: {
         group: 'One',
       },
@@ -288,6 +296,7 @@ export default buildConfigWithDefaults({
       },
       admin: {
         group: 'Group',
+        preview: () => 'https://payloadcms.com',
       },
       versions: {
         drafts: true,
@@ -357,7 +366,7 @@ export default buildConfigWithDefaults({
       ],
     },
     {
-      slug: 'group-globals-one',
+      slug: group1GlobalSlug,
       label: 'Group Globals 1',
       admin: {
         group: 'Group',
diff --git a/test/admin/e2e.spec.ts b/test/admin/e2e.spec.ts
index 3682d64337..b892079b15 100644
--- a/test/admin/e2e.spec.ts
+++ b/test/admin/e2e.spec.ts
@@ -17,7 +17,13 @@ import {
 } from '../helpers'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil'
 import { initPayloadE2E } from '../helpers/configHelpers'
-import { globalSlug, postsSlug, slugPluralLabel } from './shared'
+import {
+  globalSlug,
+  group1Collection1Slug,
+  group1GlobalSlug,
+  postsSlug,
+  slugPluralLabel,
+} from './shared'
 
 const { afterEach, beforeAll, beforeEach, describe } = test
 
@@ -149,6 +155,38 @@ describe('admin', () => {
     })
   })
 
+  describe('ui', () => {
+    test('collection - should render preview button when `admin.preview` is set', async () => {
+      const collectionWithPreview = new AdminUrlUtil(serverURL, postsSlug)
+      await page.goto(collectionWithPreview.create)
+      await page.locator('#field-title').fill(title)
+      await saveDocAndAssert(page)
+      await expect(page.locator('.btn.preview-btn')).toBeVisible()
+    })
+
+    test('collection - should not render preview button when `admin.preview` is not set', async () => {
+      const collectionWithoutPreview = new AdminUrlUtil(serverURL, group1Collection1Slug)
+      await page.goto(collectionWithoutPreview.create)
+      await page.locator('#field-title').fill(title)
+      await saveDocAndAssert(page)
+      await expect(page.locator('.btn.preview-btn')).toBeHidden()
+    })
+
+    test('global - should render preview button when `admin.preview` is set', async () => {
+      const globalWithPreview = new AdminUrlUtil(serverURL, globalSlug)
+      await page.goto(globalWithPreview.global(globalSlug))
+      await expect(page.locator('.btn.preview-btn')).toBeVisible()
+    })
+
+    test('global - should not render preview button when `admin.preview` is not set', async () => {
+      const globalWithoutPreview = new AdminUrlUtil(serverURL, group1GlobalSlug)
+      await page.goto(globalWithoutPreview.global(group1GlobalSlug))
+      await page.locator('#field-title').fill(title)
+      await saveDocAndAssert(page)
+      await expect(page.locator('.btn.preview-btn')).toBeHidden()
+    })
+  })
+
   describe('doc titles', () => {
     test('collection - should render fallback titles when creating new', async () => {
       await page.goto(url.create)
diff --git a/test/admin/shared.ts b/test/admin/shared.ts
index bd1aaeee9b..00a7fcaafc 100644
--- a/test/admin/shared.ts
+++ b/test/admin/shared.ts
@@ -1,7 +1,13 @@
 export const postsSlug = 'posts'
 
+export const group1Collection1Slug = 'group-one-collection-ones'
+
+export const group1Collection2Slug = 'group-one-collection-twos'
+
 export const slugSingularLabel = 'Post'
 
 export const slugPluralLabel = 'Posts'
 
 export const globalSlug = 'global'
+
+export const group1GlobalSlug = 'group-globals-one'