feat: allow client components to also be used as custom collection views (#16312)

Allows client components to also be used as custom collection views,
bringing it inline with internal views.

A continuation of #16243

Author: paulpopus

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

@@ -282,7 +282,11 @@ export const RootPage = async ({
     clientProps: {
       browseByFolderSlugs,
       clientConfig,
+      collectionSlug: collectionConfig?.slug,
+      docID: routeParams.id,
       documentSubViewType,
+      folderID,
+      globalSlug: globalConfig?.slug,
       viewType,
     } satisfies AdminViewClientProps,
     Component: DefaultView.payloadComponent,

packages/payload/src/admin/views/index.ts

@@ -34,7 +34,11 @@ export type AdminViewConfig = {
 export type AdminViewClientProps = {
   browseByFolderSlugs?: SanitizedCollectionConfig['slug'][]
   clientConfig: ClientConfig
+  collectionSlug?: SanitizedCollectionConfig['slug']
+  docID?: number | string
   documentSubViewType?: DocumentSubViewTypes
+  folderID?: number | string
+  globalSlug?: SanitizedGlobalConfig['slug']
   viewType: ViewTypes
 }
 

test/admin/collections/CustomCollectionView.ts

@@ -12,6 +12,11 @@ export const CustomCollectionView: CollectionConfig = {
           path: '/grid',
           exact: true,
         },
+        gridClient: {
+          Component: '/components/views/CustomCollectionView/Client.js#CustomCollectionViewClient',
+          path: '/grid-client',
+          exact: true,
+        },
       },
     },
   },

test/admin/components/views/CustomCollectionView/Client.tsx

@@ -0,0 +1,37 @@
+'use client'
+import type { AdminViewClientProps } from 'payload'
+
+import { useConfig } from '@payloadcms/ui'
+import React from 'react'
+
+import { customCollectionViewClientTitle } from '../../../shared.js'
+
+export function CustomCollectionViewClient({ collectionSlug }: AdminViewClientProps) {
+  const { getEntityConfig } = useConfig()
+
+  if (!collectionSlug) {
+    return null
+  }
+
+  const clientCollectionConfig = getEntityConfig({ collectionSlug })
+
+  if (!clientCollectionConfig) {
+    return null
+  }
+
+  const { labels } = clientCollectionConfig
+
+  return (
+    <div
+      style={{
+        marginTop: 'calc(var(--base) * 2)',
+        paddingLeft: 'var(--gutter-h)',
+        paddingRight: 'var(--gutter-h)',
+      }}
+    >
+      <h1 id="custom-collection-view-client-title">{customCollectionViewClientTitle}</h1>
+      <p id="custom-collection-view-client-slug">{clientCollectionConfig.slug}</p>
+      <p id="custom-collection-view-client-label">{String(labels?.plural)}</p>
+    </div>
+  )
+}

test/admin/e2e/general/e2e.spec.ts

@@ -783,6 +783,22 @@ describe('General', () => {
         'Custom Collection View',
       )
     })
+
+    test('should render custom collection view as a client component', async () => {
+      await page.goto(
+        formatAdminURL({
+          adminRoute,
+          path: '/collections/custom-collection-view/grid-client',
+          serverURL,
+        }),
+      )
+      await expect(page.locator('h1#custom-collection-view-client-title')).toContainText(
+        'Custom Collection View (Client)',
+      )
+      await expect(page.locator('#custom-collection-view-client-slug')).toContainText(
+        'custom-collection-view',
+      )
+    })
   })
 
   describe('header actions', () => {

test/admin/shared.ts

@@ -20,6 +20,8 @@ export const customViewTitle = 'Custom View'
 
 export const customCollectionViewTitle = 'Custom Collection View'
 
+export const customCollectionViewClientTitle = 'Custom Collection View (Client)'
+
 export const customParamViewTitle = 'Custom Param View'
 
 export const customNestedViewTitle = 'Custom Nested View'