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

Fixes #13035.

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

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 = {