fix(next): respect collection-level live preview config (#13036)

Fixes #13035.

We broke collection-level live preview configs in #12860.

Author: jacobsfletch

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

@@ -6,6 +6,7 @@ import type {
   DocumentViewServerProps,
   DocumentViewServerPropsOnly,
   EditViewComponent,
+  LivePreviewConfig,
   PayloadComponent,
   RenderDocumentVersionsProperties,
 } from 'payload'
@@ -91,7 +92,6 @@ export const renderDocument = async ({
       payload: {
         config,
         config: {
-          admin: { livePreview: livePreviewConfig },
           routes: { admin: adminRoute, api: apiRoute },
           serverURL,
         },
@@ -329,6 +329,12 @@ export const renderDocument = async ({
     viewType,
   }
 
+  const livePreviewConfig: LivePreviewConfig = {
+    ...(config.admin.livePreview || {}),
+    ...(collectionConfig?.admin?.livePreview || {}),
+    ...(globalConfig?.admin?.livePreview || {}),
+  }
+
   const livePreviewURL =
     typeof livePreviewConfig?.url === 'function'
       ? await livePreviewConfig.url({

packages/ui/src/providers/LivePreview/index.tsx

@@ -226,6 +226,13 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({
     )
   }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])
 
+  const isLivePreviewEnabled = Boolean(
+    operation !== 'create' &&
+      ((collectionSlug && config?.admin?.livePreview?.collections?.includes(collectionSlug)) ||
+        (globalSlug && config.admin?.livePreview?.globals?.includes(globalSlug)) ||
+        entityConfig?.admin?.livePreview),
+  )
+
   return (
     <LivePreviewContext
       value={{
@@ -235,13 +242,7 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({
         fieldSchemaJSON,
         iframeHasLoaded,
         iframeRef,
-        isLivePreviewEnabled: Boolean(
-          (operation !== 'create' &&
-            collectionSlug &&
-            config?.admin?.livePreview?.collections?.includes(collectionSlug)) ||
-            (globalSlug && config.admin?.livePreview?.globals?.includes(globalSlug)) ||
-            entityConfig?.admin?.livePreview,
-        ),
+        isLivePreviewEnabled,
         isLivePreviewing,
         isPopupOpen,
         listeningForMessages,

test/_community/payload-types.ts

@@ -203,6 +203,13 @@ export interface User {
   hash?: string | null;
   loginAttempts?: number | null;
   lockUntil?: string | null;
+  sessions?:
+    | {
+        id: string;
+        createdAt?: string | null;
+        expiresAt: string;
+      }[]
+    | null;
   password?: string | null;
 }
 /**
@@ -341,6 +348,13 @@ export interface UsersSelect<T extends boolean = true> {
   hash?: T;
   loginAttempts?: T;
   lockUntil?: T;
+  sessions?:
+    | T
+    | {
+        id?: T;
+        createdAt?: T;
+        expiresAt?: T;
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema

test/helpers.ts

@@ -248,7 +248,7 @@ export async function saveDocHotkeyAndAssert(page: Page): Promise<void> {
 
 export async function saveDocAndAssert(
   page: Page,
-  selector: '#access-save' | '#action-publish' | '#action-save-draft' | string = '#action-save',
+  selector: '#action-publish' | '#action-save' | '#action-save-draft' | string = '#action-save',
   expectation: 'error' | 'success' = 'success',
 ): Promise<void> {
   await wait(500) // TODO: Fix this

test/live-preview/collections/Categories.ts

@@ -2,7 +2,7 @@ import type { CollectionConfig } from 'payload'
 
 import { categoriesSlug } from '../shared.js'
 
-const Categories: CollectionConfig = {
+export const Categories: CollectionConfig = {
   slug: categoriesSlug,
   admin: {
     useAsTitle: 'title',
@@ -17,5 +17,3 @@ const Categories: CollectionConfig = {
     },
   ],
 }
-
-export default Categories

test/live-preview/collections/CollectionLevelConfig.ts

@@ -0,0 +1,23 @@
+import type { CollectionConfig } from 'payload'
+
+import { collectionLevelConfigSlug } from '../shared.js'
+
+export const CollectionLevelConfig: CollectionConfig = {
+  slug: collectionLevelConfigSlug,
+  admin: {
+    description: "Live Preview is enabled on this collection's own config, not the root config.",
+    useAsTitle: 'title',
+    livePreview: {
+      url: 'http://localhost:3000/live-preview',
+    },
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+  ],
+}

test/live-preview/config.ts

@@ -3,7 +3,8 @@ import path from 'path'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
-import Categories from './collections/Categories.js'
+import { Categories } from './collections/Categories.js'
+import { CollectionLevelConfig } from './collections/CollectionLevelConfig.js'
 import { Media } from './collections/Media.js'
 import { Pages } from './collections/Pages.js'
 import { Posts } from './collections/Posts.js'
@@ -44,7 +45,17 @@ export default buildConfigWithDefaults({
   },
   cors: ['http://localhost:3000', 'http://localhost:3001'],
   csrf: ['http://localhost:3000', 'http://localhost:3001'],
-  collections: [Users, Pages, Posts, SSR, SSRAutosave, Tenants, Categories, Media],
+  collections: [
+    Users,
+    Pages,
+    Posts,
+    SSR,
+    SSRAutosave,
+    Tenants,
+    Categories,
+    Media,
+    CollectionLevelConfig,
+  ],
   globals: [Header, Footer],
   onInit: seed,
   typescript: {

test/live-preview/e2e.spec.ts

@@ -27,6 +27,7 @@ import {
   toggleLivePreview,
 } from './helpers.js'
 import {
+  collectionLevelConfigSlug,
   desktopBreakpoint,
   mobileBreakpoint,
   pagesSlug,
@@ -101,6 +102,22 @@ describe('Live Preview', () => {
     await expect(page.locator('iframe.live-preview-iframe')).toBeHidden()
   })
 
+  test('collection - does not enable live preview is collections that are not configured', async () => {
+    const usersURL = new AdminUrlUtil(serverURL, 'users')
+    await navigateToDoc(page, usersURL)
+    const toggler = page.locator('#live-preview-toggler')
+    await expect(toggler).toBeHidden()
+  })
+
+  test('collection - respect collection-level live preview config', async () => {
+    const collURL = new AdminUrlUtil(serverURL, collectionLevelConfigSlug)
+    await page.goto(collURL.create)
+    await page.locator('#field-title').fill('Collection Level Config')
+    await saveDocAndAssert(page)
+    await toggleLivePreview(page)
+    await expect(page.locator('iframe.live-preview-iframe')).toBeVisible()
+  })
+
   test('saves live preview state to preferences and loads it on next visit', async () => {
     await deletePreferences({
       payload,

test/live-preview/payload-types.ts

@@ -75,6 +75,7 @@ export interface Config {
     tenants: Tenant;
     categories: Category;
     media: Media;
+    'collection-level-config': CollectionLevelConfig;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
@@ -89,6 +90,7 @@ export interface Config {
     tenants: TenantsSelect<false> | TenantsSelect<true>;
     categories: CategoriesSelect<false> | CategoriesSelect<true>;
     media: MediaSelect<false> | MediaSelect<true>;
+    'collection-level-config': CollectionLevelConfigSelect<false> | CollectionLevelConfigSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
     'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
@@ -146,6 +148,13 @@ export interface User {
   hash?: string | null;
   loginAttempts?: number | null;
   lockUntil?: string | null;
+  sessions?:
+    | {
+        id: string;
+        createdAt?: string | null;
+        expiresAt: string;
+      }[]
+    | null;
   password?: string | null;
 }
 /**
@@ -834,6 +843,18 @@ export interface SsrAutosave {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * Live Preview is enabled on this collection's own config, not the root config.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collection-level-config".
+ */
+export interface CollectionLevelConfig {
+  id: string;
+  title?: string | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents".
@@ -872,6 +893,10 @@ export interface PayloadLockedDocument {
     | ({
         relationTo: 'media';
         value: string | Media;
+      } | null)
+    | ({
+        relationTo: 'collection-level-config';
+        value: string | CollectionLevelConfig;
       } | null);
   globalSlug?: string | null;
   user: {
@@ -929,6 +954,13 @@ export interface UsersSelect<T extends boolean = true> {
   hash?: T;
   loginAttempts?: T;
   lockUntil?: T;
+  sessions?:
+    | T
+    | {
+        id?: T;
+        createdAt?: T;
+        expiresAt?: T;
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -1395,6 +1427,15 @@ export interface MediaSelect<T extends boolean = true> {
   focalX?: T;
   focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collection-level-config_select".
+ */
+export interface CollectionLevelConfigSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents_select".

test/live-preview/shared.ts

@@ -5,6 +5,7 @@ export const ssrAutosavePagesSlug = 'ssr-autosave'
 export const postsSlug = 'posts'
 export const mediaSlug = 'media'
 export const categoriesSlug = 'categories'
+export const collectionLevelConfigSlug = 'collection-level-config'
 export const usersSlug = 'users'
 
 export const mobileBreakpoint = {