chore: simplifies serverSideProps on document views

packages/next/src/utilities/initPage.ts

@@ -41,8 +41,10 @@ export const initPage = async ({
   })
 
   const routeSegments = route.replace(payload.config.routes.admin, '').split('/').filter(Boolean)
-  const collectionSlug = routeSegments[0] === 'collections' ? routeSegments[1] : undefined
-  const globalSlug = routeSegments[0] === 'globals' ? routeSegments[1] : undefined
+  const [entityType, entitySlug, createOrID] = routeSegments
+  const collectionSlug = entityType === 'collections' ? entitySlug : undefined
+  const globalSlug = entityType === 'globals' ? entitySlug : undefined
+  const docID = collectionSlug && createOrID !== 'create' ? createOrID : undefined
 
   const { collections, globals, localization, routes } = payload.config
 
@@ -95,6 +97,7 @@ export const initPage = async ({
   return {
     collectionConfig,
     cookies,
+    docID,
     globalConfig,
     locale,
     permissions,

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

@@ -1,7 +1,5 @@
 'use client'
 
-import type { EditViewProps } from 'payload/types'
-
 import {
   Checkbox,
   CopyToClipboard,
@@ -28,10 +26,8 @@ import './index.scss'
 
 const baseClass = 'query-inspector'
 
-export const APIViewClient: React.FC<EditViewProps> = (props) => {
-  const { collectionSlug, globalSlug } = props
-
-  const { id, initialData } = useDocumentInfo()
+export const APIViewClient: React.FC = () => {
+  const { id, collectionSlug, globalSlug, initialData } = useDocumentInfo()
 
   const searchParams = useSearchParams()
   const { i18n } = useTranslation()

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

@@ -2,13 +2,8 @@ import type { ServerSideEditViewProps } from 'payload/types'
 
 import React from 'react'
 
-import { sanitizeEditViewProps } from '../Edit/sanitizeEditViewProps'
 import { APIViewClient } from './index.client'
 
-export const APIView: React.FC<ServerSideEditViewProps> = async (props) => {
-  // Perform server-side logic here, but no need to fetch data, etc.
-  // The `Document` component is a wrapper around all edit views, including this one
-  // It sets up the document info context for the client to subscribe to
-  const clientSideProps = sanitizeEditViewProps(props)
-  return <APIViewClient {...clientSideProps} />
+export const APIView: React.FC<ServerSideEditViewProps> = () => {
+  return <APIViewClient />
 }

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

@@ -83,19 +83,10 @@ export const Account: React.FC<AdminViewProps> = async ({ initPageResult, search
       req,
     })
 
-    const componentProps: ServerSideEditViewProps = {
-      id: user?.id,
-      action: `${serverURL}${api}/${userSlug}/${data?.id}?locale=${locale.code}`,
-      apiURL: `${serverURL}${api}/${userSlug}/${data?.id}?locale=${locale.code}`,
-      collectionSlug: userSlug,
-      data,
-      docPermissions: collectionPermissions,
-      docPreferences,
-      hasSavePermission: collectionPermissions?.update?.permission,
+    const serverSideProps: ServerSideEditViewProps = {
       initPageResult,
-      initialState,
+      routeSegments: [],
       searchParams,
-      updatedAt: '', // TODO
     }
 
     return (
@@ -118,7 +109,7 @@ export const Account: React.FC<AdminViewProps> = async ({ initPageResult, search
             typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
           }
           DefaultComponent={EditView}
-          componentProps={componentProps}
+          componentProps={serverSideProps}
         />
       </Fragment>
     )

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

@@ -4,7 +4,6 @@ import type {
   DocumentPreferences,
   Document as DocumentType,
   Field,
-  SanitizedConfig,
   ServerSideEditViewProps,
 } from 'payload/types'
 import type { DocumentPermissions } from 'payload/types'
@@ -38,6 +37,7 @@ export const Document: React.FC<AdminViewProps> = async ({
 }) => {
   const {
     collectionConfig,
+    docID: id,
     globalConfig,
     locale,
     permissions,
@@ -57,11 +57,8 @@ export const Document: React.FC<AdminViewProps> = async ({
   } = initPageResult
 
   const segments = Array.isArray(params?.segments) ? params.segments : []
-  const [entityType, entitySlug, createOrID] = segments
-  const collectionSlug = entityType === 'collections' ? entitySlug : undefined
-  const globalSlug = entityType === 'globals' ? entitySlug : undefined
-  const isCreating = createOrID === 'create'
-  const id = (collectionSlug && !isCreating && createOrID) || undefined
+  const collectionSlug = collectionConfig?.slug || undefined
+  const globalSlug = globalConfig?.slug || undefined
 
   const isEditing = Boolean(globalSlug || (collectionSlug && !!id))
 
@@ -180,23 +177,10 @@ export const Document: React.FC<AdminViewProps> = async ({
     uploadEdits: undefined,
   }
 
-  const componentProps: ServerSideEditViewProps = {
-    id,
-    action: `${action}?${queryString.stringify(formQueryParams)}`,
-    apiURL,
-    canAccessAdmin: permissions?.canAccessAdmin,
-    collectionSlug,
-    data,
-    docPermissions,
-    docPreferences,
-    globalSlug,
-    hasSavePermission,
+  const serverSideProps: ServerSideEditViewProps = {
     initPageResult,
-    initialState,
-    isEditing,
-    params,
+    routeSegments: segments,
     searchParams,
-    updatedAt: data?.updatedAt?.toString(),
   }
 
   return (
@@ -226,7 +210,7 @@ export const Document: React.FC<AdminViewProps> = async ({
           <RenderCustomComponent
             CustomComponent={typeof CustomView === 'function' ? CustomView : undefined}
             DefaultComponent={DefaultView}
-            componentProps={componentProps}
+            componentProps={serverSideProps}
           />
         </FormQueryParamsProvider>
       </EditDepthProvider>

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

@@ -1,7 +1,5 @@
 'use client'
 
-import type { EditViewProps } from 'payload/types'
-
 import {
   LoadingOverlay,
   SetViewActions,
@@ -13,7 +11,7 @@ import { useRouter } from 'next/navigation'
 import React, { Fragment, useEffect } from 'react'
 import { useCallback } from 'react'
 
-export const EditViewClient: React.FC<EditViewProps> = () => {
+export const EditViewClient: React.FC = () => {
   const { id, collectionSlug, getDocPermissions, getVersions, globalSlug, setDocumentInfo } =
     useDocumentInfo()
 

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

@@ -3,12 +3,7 @@ import type { ServerSideEditViewProps } from 'payload/types'
 import React from 'react'
 
 import { EditViewClient } from './index.client'
-import { sanitizeEditViewProps } from './sanitizeEditViewProps'
 
-export const EditView: React.FC<ServerSideEditViewProps> = (props) => {
-  // Perform server-side logic here, but no need to fetch data, etc.
-  // The `Document` component is a wrapper around all edit views, including this one
-  // It sets up the document info context for the client to subscribe to
-  const clientSideProps = sanitizeEditViewProps(props)
-  return <EditViewClient {...clientSideProps} />
+export const EditView: React.FC<ServerSideEditViewProps> = () => {
+  return <EditViewClient />
 }

packages/next/src/views/Edit/sanitizeEditViewProps.ts

@@ -5,6 +5,5 @@ export const sanitizeEditViewProps = (props: ServerSideEditViewProps) => {
   delete clientSideProps.initPageResult.req
   delete clientSideProps.initPageResult.collectionConfig
   delete clientSideProps.initPageResult.globalConfig
-  delete clientSideProps.searchParams
   return clientSideProps as EditViewProps
 }

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

@@ -1,6 +1,5 @@
 'use client'
 import type { LivePreviewConfig } from 'payload/config'
-import type { EditViewProps } from 'payload/types'
 
 import { DndContext } from '@dnd-kit/core'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -11,7 +10,7 @@ import { customCollisionDetection } from './collisionDetection'
 import { LivePreviewContext } from './context'
 import { sizeReducer } from './sizeReducer'
 
-export type LivePreviewProviderProps = EditViewProps & {
+export type LivePreviewProviderProps = {
   appIsReady?: boolean
   breakpoints?: LivePreviewConfig['breakpoints']
   children: React.ReactNode

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FormProps } from '@payloadcms/ui'
 import type { LivePreviewConfig } from 'payload/config'
-import type { Data, EditViewProps } from 'payload/types'
+import type { Data } from 'payload/types'
 
 import {
   DocumentControls,
@@ -198,15 +198,14 @@ const PreviewView: React.FC = (props) => {
   )
 }
 
-export const LivePreviewClient: React.FC<
-  EditViewProps & {
+export const LivePreviewClient: React.FC<{
   breakpoints: LivePreviewConfig['breakpoints']
   initialData: Data
   livePreviewConfig: LivePreviewConfig
   url: string
-  }
-> = (props) => {
-  const { breakpoints, collectionSlug, globalSlug, url } = props
+}> = (props) => {
+  const { breakpoints, url } = props
+  const { collectionSlug, globalSlug } = useDocumentInfo()
 
   const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({
     eventType: 'payload-live-preview',
@@ -221,7 +220,6 @@ export const LivePreviewClient: React.FC<
     <Fragment>
       <SetViewActions actions={componentMap?.actionsMap?.Edit?.LivePreview} />
       <LivePreviewProvider
-        {...props}
         breakpoints={breakpoints}
         isPopupOpen={isPopupOpen}
         openPopupWindow={openPopupWindow}

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

@@ -23,7 +23,7 @@ export const LivePreviewView: React.FC = async (props: ServerSideEditViewProps)
   } = initPageResult
 
   // TODO(JAKE): not sure what `data` is or what it should be
-  const { data = {} } = props
+  const data = 'data' in props ? props.data : {}
 
   let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig
 
@@ -62,15 +62,11 @@ export const LivePreviewView: React.FC = async (props: ServerSideEditViewProps)
       : livePreviewConfig?.url
 
   return (
-    <React.Fragment>
     <LivePreviewClient
       breakpoints={breakpoints}
-        collectionSlug={collectionConfig?.slug}
-        globalSlug={globalConfig?.slug}
       initialData={data}
       livePreviewConfig={livePreviewConfig}
       url={url}
     />
-    </React.Fragment>
   )
 }

packages/next/src/views/Version/Default/index.tsx

@@ -7,6 +7,7 @@ import {
   formatDate,
   useComponentMap,
   useConfig,
+  useDocumentInfo,
   usePayloadAPI,
   useTranslation,
 } from '@payloadcms/ui'
@@ -26,11 +27,8 @@ import './index.scss'
 const baseClass = 'view-version'
 
 export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
-  id,
-  collectionSlug,
   doc,
   docPermissions,
-  globalSlug,
   initialComparisonDoc,
   localeOptions,
   mostRecentDoc,
@@ -40,6 +38,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
   const config = useConfig()
 
   const { i18n } = useTranslation()
+  const { id, collectionSlug, globalSlug } = useDocumentInfo()
 
   const { getComponentMap, getFieldMap } = useComponentMap()
 

packages/next/src/views/Version/Default/types.ts

@@ -1,6 +1,6 @@
 import type { Option } from '@payloadcms/ui'
-import type { CollectionPermission, GlobalPermission, Permissions, User } from 'payload/auth'
-import type { Document, SanitizedCollectionConfig } from 'payload/types'
+import type { CollectionPermission, GlobalPermission } from 'payload/auth'
+import type { Document } from 'payload/types'
 
 export type CompareOption = {
   label: string
@@ -10,16 +10,11 @@ export type CompareOption = {
 }
 
 export type DefaultVersionsViewProps = {
-  collectionSlug?: SanitizedCollectionConfig['slug']
   doc: Document
   docPermissions: CollectionPermission | GlobalPermission
-  globalSlug?: SanitizedCollectionConfig['slug']
-  id?: number | string
   initialComparisonDoc: Document
   localeOptions: Option[]
   mostRecentDoc: Document
-  permissions: Permissions
   publishedDoc: Document
-  user: User
   versionID?: string
 }

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

@@ -8,17 +8,18 @@ import React from 'react'
 import { DefaultVersionView } from './Default'
 
 export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
-  const { initPageResult, params } = props
+  const { initPageResult, routeSegments } = props
 
   const {
     collectionConfig,
+    docID: id,
     globalConfig,
     permissions,
-    req: { payload, payload: { config } = {}, user } = {},
+    req: { payload, payload: { config } = {} } = {},
   } = initPageResult
 
   // /entityType/:entitySlug/:id/versions/:versionID
-  const [entityType, entitySlug, id, versions, versionID] = params.segments
+  const [entityType, entitySlug, docID, versions, versionID] = routeSegments
 
   const collectionSlug = collectionConfig?.slug
   const globalSlug = globalConfig?.slug
@@ -108,17 +109,12 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
 
   return (
     <DefaultVersionView
-      collectionSlug={collectionSlug}
       doc={doc}
       docPermissions={docPermissions}
-      globalSlug={globalSlug}
-      id={id}
       initialComparisonDoc={mostRecentDoc}
       localeOptions={localeOptions}
       mostRecentDoc={mostRecentDoc}
-      permissions={permissions}
       publishedDoc={publishedDoc}
-      user={user}
       versionID={versionID}
     />
   )

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

@@ -10,6 +10,7 @@ import {
   SetViewActions,
   Table,
   useComponentMap,
+  useDocumentInfo,
   usePayloadAPI,
   useTranslation,
 } from '@payloadcms/ui'
@@ -18,26 +19,15 @@ import React, { Fragment, useEffect, useRef } from 'react'
 
 export const VersionsViewClient: React.FC<{
   baseClass: string
-  collectionSlug?: string
   columns: Column[]
   fetchURL: string
-  globalSlug?: string
-  id?: number | string
   initialData: PaginatedDocs
   paginationLimits?: SanitizedCollectionConfig['admin']['pagination']['limits']
 }> = (props) => {
-  const {
-    id,
-    baseClass,
-    collectionSlug,
-    columns,
-    fetchURL,
-    globalSlug,
-    initialData,
-    paginationLimits,
-  } = props
+  const { baseClass, columns, fetchURL, initialData, paginationLimits } = props
 
   const { getComponentMap } = useComponentMap()
+  const { id, collectionSlug, globalSlug } = useDocumentInfo()
 
   const componentMap = getComponentMap({
     collectionSlug,

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

@@ -5,7 +5,6 @@ import { notFound } from 'next/navigation'
 import React from 'react'
 
 import { SetStepNav } from '../Edit/Default/SetStepNav'
-import { sanitizeEditViewProps } from '../Edit/sanitizeEditViewProps'
 import { buildVersionColumns } from './buildColumns'
 import { VersionsViewClient } from './index.client'
 import './index.scss'
@@ -13,10 +12,11 @@ import './index.scss'
 export const baseClass = 'versions'
 
 export const VersionsView: React.FC<ServerSideEditViewProps> = async (props) => {
-  const { id, initPageResult, searchParams } = props
+  const { initPageResult, searchParams } = props
 
   const {
     collectionConfig,
+    docID: id,
     globalConfig,
     req: {
       i18n,
@@ -94,8 +94,6 @@ export const VersionsView: React.FC<ServerSideEditViewProps> = async (props) =>
       ? `${serverURL}${apiRoute}/globals/${globalSlug}/versions`
       : ''
 
-  const clientSideProps = sanitizeEditViewProps(props)
-
   return (
     <React.Fragment>
       <SetStepNav
@@ -109,11 +107,9 @@ export const VersionsView: React.FC<ServerSideEditViewProps> = async (props) =>
       <main className={baseClass}>
         <Gutter className={`${baseClass}__wrap`}>
           <VersionsViewClient
-            {...clientSideProps}
             baseClass={baseClass}
             columns={columns}
             fetchURL={fetchURL}
-            id={id}
             initialData={versionsData}
             paginationLimits={collectionConfig?.admin?.pagination?.limits}
           />

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

@@ -1,11 +1,9 @@
 import type { Translations } from '@payloadcms/translations'
 
-import type { DocumentPermissions, Permissions, User } from '../../auth'
+import type { Permissions, User } from '../../auth'
 import type { SanitizedCollectionConfig } from '../../collections/config/types'
 import type { SanitizedGlobalConfig } from '../../globals/config/types'
-import type { DocumentPreferences } from '../../preferences/types'
 import type { PayloadRequest } from '../../types'
-import type { Data, FormState } from '../types'
 
 export type AdminViewConfig = {
   Component: AdminViewComponent
@@ -33,6 +31,7 @@ export type EditViewProps = {
 export type InitPageResult = {
   collectionConfig?: SanitizedCollectionConfig
   cookies: Map<string, string>
+  docID?: string
   globalConfig?: SanitizedGlobalConfig
   locale: Locale
   permissions: Permissions
@@ -40,22 +39,8 @@ export type InitPageResult = {
   translations: Translations
 }
 
-export type ServerSideEditViewProps = EditViewProps & {
-  action?: string
-  apiURL: string
-  canAccessAdmin?: boolean
-  data: Data
-  disableActions?: boolean
-  disableLeaveWithoutSaving?: boolean
-  docPermissions: DocumentPermissions
-  docPreferences: DocumentPreferences
-  hasSavePermission?: boolean
-  id?: string
+export type ServerSideEditViewProps = {
   initPageResult: InitPageResult
-  initialState?: FormState
-  isEditing?: boolean
-  params?: { [key: string]: string | string[] }
+  routeSegments: string[]
   searchParams: { [key: string]: string | string[] | undefined }
-  // isLoading: boolean
-  updatedAt: string
 }