chore(next): custom views (#4748)

packages/dev/src/app/(payload)/admin/(dashboard)/collections/[collection]/(document)/create/page.tsx → packages/dev/src/app/(payload)/admin/(dashboard)/collections/[collection]/[...segments]/page.tsx

@@ -1,12 +1,12 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 // import { CollectionList } from '@payloadcms/next/pages/CollectionList'
-import { CollectionEdit } from '@payloadcms/next/pages/CollectionEdit'
+import { Document } from '@payloadcms/next/pages/Document'
 import config from 'payload-config'
 
 export default ({ params, searchParams }) =>
-  CollectionEdit({
-    collectionSlug: params.collection,
+  Document({
+    params,
     searchParams,
     config,
   })

packages/dev/src/app/(payload)/admin/(dashboard)/globals/[global]/api/page.tsx → packages/dev/src/app/(payload)/admin/(dashboard)/globals/[global]/[[...segments]]/page.tsx

@@ -1,11 +1,11 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { APIView } from '@payloadcms/next/pages/API'
+import { Document } from '@payloadcms/next/pages/Document'
 import config from 'payload-config'
 
 export default ({ params, searchParams }) =>
-  APIView({
-    globalSlug: params.global,
+  Document({
     config,
+    params,
     searchParams,
   })

packages/dev/src/collections/Pages/CustomView.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const CustomView: React.FC = async (props) => {
+  return <div>CustomView</div>
+}

packages/dev/src/collections/Pages.ts → packages/dev/src/collections/Pages/index.ts

@@ -1,9 +1,24 @@
 import { CollectionConfig } from 'payload/types'
+import { CustomView } from './CustomView'
 
 export const Pages: CollectionConfig = {
   slug: 'pages',
   admin: {
     useAsTitle: 'title',
+    components: {
+      views: {
+        Edit: {
+          Custom: {
+            path: '/custom',
+            Component: CustomView,
+            Tab: {
+              label: 'Custom View',
+              href: '/custom',
+            },
+          },
+        },
+      },
+    },
   },
   versions: {
     drafts: true,

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

@@ -3,11 +3,11 @@ import { headers, cookies } from 'next/headers'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider } from '@payloadcms/ui/providers'
 import { SanitizedConfig } from 'payload/types'
-import { deepMerge } from 'payload/utilities'
-import { createClientConfig } from '../../createClientConfig'
-import { getRequestLanguage } from '../../utilities/getRequestLanguage'
+import { createClientConfig } from '../../utilities/createClientConfig'
 
 import '@payloadcms/ui/scss/app.scss'
+import { getRequestLanguage } from '../../utilities/getRequestLanguage'
+import { deepMerge } from 'payload/utilities'
 
 export const metadata = {
   title: 'Next.js',

packages/next/src/pages/API/index.tsx

@@ -8,34 +8,22 @@ import {
   Form,
   Select,
   Number as NumberInput,
+  EditViewProps,
 } from '@payloadcms/ui'
 import './index.scss'
-import { initPage } from '../../utilities/initPage'
-import { Document, SanitizedConfig } from 'payload/types'
 import { RenderJSON } from './RenderJSON'
 
 const baseClass = 'query-inspector'
 
-export const APIView = async ({
-  collectionSlug,
-  globalSlug,
-  id,
-  config: configPromise,
-  searchParams,
-}: {
-  collectionSlug?: string
-  globalSlug?: string
-  id?: string
-  config: Promise<SanitizedConfig>
-  searchParams: { [key: string]: string | string[] | undefined }
-}) => {
-  const { config, payload, user, locale, collectionConfig, globalConfig, i18n } = await initPage({
-    configPromise,
-    redirectUnauthenticatedUser: true,
-    collectionSlug,
-    globalSlug,
-  })
+export const APIView: React.FC<EditViewProps> = async (props) => {
+  const { config, searchParams, locale, data, i18n } = props
 
+  const collectionConfig = 'collectionConfig' in props && props?.collectionConfig
+  const globalConfig = 'globalConfig' in props && props?.globalConfig
+  const id = 'id' in props ? props.id : undefined
+
+  const collectionSlug = collectionConfig?.slug
+  const globalSlug = globalConfig?.slug
   const { depth, draft, authenticated } = searchParams
 
   const {
@@ -50,34 +38,16 @@ export const APIView = async ({
 
   const isEditing = Boolean(globalSlug || (collectionSlug && !!id))
 
-  let data: Document
   let draftsEnabled = false
   let docEndpoint = ''
 
   if (collectionConfig) {
-    try {
-      data = await payload.findByID({
-        collection: collectionSlug,
-        id,
-        depth: 0,
-        user,
-      })
-    } catch (error) {}
-
-    draftsEnabled = Boolean(collectionConfig.versions.drafts)
+    draftsEnabled = Boolean(collectionConfig.versions?.drafts)
     docEndpoint = `/${collectionSlug}/${id}`
   }
 
   if (globalConfig) {
-    try {
-      data = await payload.findGlobal({
-        slug: globalSlug,
-        depth: 0,
-        user,
-      })
-    } catch (error) {}
-
-    draftsEnabled = Boolean(globalConfig.versions.drafts)
+    draftsEnabled = Boolean(globalConfig.versions?.drafts)
     docEndpoint = `/globals/${globalSlug}`
   }
 

packages/next/src/pages/Account/Default/ToggleTheme/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React, { useCallback } from 'react'
-import { useTranslation } from '../../../providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 
 import type { OnChange, Theme } from '@payloadcms/ui'
 import { useTheme, RadioGroupInput } from '@payloadcms/ui'

packages/next/src/pages/Document/getCustomViewByKey.tsx

@@ -0,0 +1,22 @@
+import { AdminViewComponent } from 'payload/config'
+import { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
+
+export const getCustomViewByKey = (
+  views:
+    | SanitizedCollectionConfig['admin']['components']['views']
+    | SanitizedGlobalConfig['admin']['components']['views'],
+  customViewKey: string,
+): AdminViewComponent => {
+  return typeof views?.Edit === 'function'
+    ? views?.Edit
+    : typeof views?.Edit === 'object' &&
+      views?.Edit?.[customViewKey] &&
+      typeof views?.Edit?.[customViewKey] === 'function'
+    ? views?.Edit?.[customViewKey]
+    : views?.Edit?.[customViewKey]
+    ? typeof views?.Edit?.[customViewKey] === 'object' &&
+      'Component' in views?.Edit?.[customViewKey] &&
+      typeof views?.Edit?.[customViewKey].Component === 'function' &&
+      views?.Edit?.[customViewKey].Component
+    : null
+}