fix(ui): live-preview-tab should show beforeDocumentControls (#12568)

Author: JarrodMFlesch

packages/next/src/views/LivePreview/index.client.tsx

@@ -71,6 +71,7 @@ const getAbsoluteUrl = (url) => {
 }
 
 const PreviewView: React.FC<Props> = ({
+  BeforeDocumentControls,
   collectionConfig,
   config,
   Description,
@@ -494,6 +495,7 @@ const PreviewView: React.FC<Props> = ({
         />
         <DocumentControls
           apiURL={apiURL}
+          BeforeDocumentControls={BeforeDocumentControls}
           customComponents={{
             PreviewButton,
             PublishButton,
@@ -604,6 +606,7 @@ export const LivePreviewClient: React.FC<
       >
         <PreviewView
           apiRoute={apiRoute}
+          BeforeDocumentControls={props.BeforeDocumentControls}
           collectionConfig={collectionConfig}
           config={config}
           Description={props.Description}

packages/next/src/views/LivePreview/index.tsx

@@ -1,5 +1,11 @@
-import type { DocumentViewServerProps, LivePreviewConfig } from 'payload'
+import type {
+  BeforeDocumentControlsServerPropsOnly,
+  DocumentViewServerProps,
+  LivePreviewConfig,
+  ServerProps,
+} from 'payload'
 
+import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import React from 'react'
 
 import './index.scss'
@@ -12,6 +18,13 @@ export async function LivePreviewView(props: DocumentViewServerProps) {
 
   let livePreviewConfig: LivePreviewConfig = req.payload.config?.admin?.livePreview
 
+  const serverProps: ServerProps = {
+    i18n: req.i18n,
+    payload: req.payload,
+    user: req.user,
+    // TODO: Add remaining serverProps
+  }
+
   if (collectionConfig) {
     livePreviewConfig = {
       ...(livePreviewConfig || {}),
@@ -26,6 +39,10 @@ export async function LivePreviewView(props: DocumentViewServerProps) {
     }
   }
 
+  const BeforeDocumentControls =
+    collectionConfig?.admin?.components?.edit?.beforeDocumentControls ||
+    globalConfig?.admin?.components?.elements?.beforeDocumentControls
+
   const breakpoints: LivePreviewConfig['breakpoints'] = [
     ...(livePreviewConfig?.breakpoints || []),
     {
@@ -54,6 +71,15 @@ export async function LivePreviewView(props: DocumentViewServerProps) {
 
   return (
     <LivePreviewClient
+      BeforeDocumentControls={
+        BeforeDocumentControls
+          ? RenderServerComponent({
+              Component: BeforeDocumentControls,
+              importMap: req.payload.importMap,
+              serverProps: serverProps satisfies BeforeDocumentControlsServerPropsOnly,
+            })
+          : null
+      }
       breakpoints={breakpoints}
       Description={props.Description}
       initialData={doc}

test/live-preview/collections/Pages.ts

@@ -22,6 +22,11 @@ export const Pages: CollectionConfig = {
     useAsTitle: 'title',
     defaultColumns: ['id', 'title', 'slug', 'createdAt'],
     components: {
+      edit: {
+        beforeDocumentControls: [
+          '/components/BeforeDocumentControls/index.js#BeforeDocumentControlsTest',
+        ],
+      },
       views: {
         edit: {
           livePreview: {

test/live-preview/components/BeforeDocumentControls/index.tsx

@@ -0,0 +1,7 @@
+export const BeforeDocumentControlsTest = () => {
+  return (
+    <button aria-label="before-document-controls" type="button">
+      Test
+    </button>
+  )
+}

test/live-preview/e2e.spec.ts

@@ -83,6 +83,13 @@ describe('Live Preview', () => {
     })
   })
 
+  test('collection - should render BeforeDocumentControls', async () => {
+    await goToCollectionLivePreview(page, pagesURLUtil)
+    // locate using aria label "before-document-controls"
+    const beforeDocumentControls = page.locator('button[aria-label="before-document-controls"]')
+    await expect(beforeDocumentControls).toBeVisible()
+  })
+
   test('collection — has route', async () => {
     await goToCollectionLivePreview(page, pagesURLUtil)
     await expect(page.locator('.live-preview')).toBeVisible()