Merge pull request #5551 from payloadcms/fix/nav

fix: misc.

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,7 +1,9 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
 import config from '@payload-config'
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundView } from '@payloadcms/next/views/NotFound/index.js'
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views/NotFound/index.js'
 
 type Args = {
   params: {
@@ -12,6 +14,9 @@ type Args = {
   }
 }
 
-const NotFound = ({ params, searchParams }: Args) => NotFoundView({ config, params, searchParams })
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
 
 export default NotFound

packages/next/src/exports/views.ts

@@ -1,3 +1,3 @@
 export { EditView } from '../views/Edit/index.js'
-export { NotFoundView } from '../views/NotFound/index.js'
+export { NotFoundPage } from '../views/NotFound/index.js'
 export { type GenerateViewMetadata, RootPage, generatePageMetadata } from '../views/Root/index.js'

packages/next/src/utilities/initPage.ts

@@ -22,8 +22,8 @@ import { getRequestLanguage } from './getRequestLanguage.js'
 type Args = {
   config: Promise<SanitizedConfig> | SanitizedConfig
   redirectUnauthenticatedUser?: boolean
-  route?: string
-  searchParams?: { [key: string]: string | string[] | undefined }
+  route: string
+  searchParams: { [key: string]: string | string[] | undefined }
 }
 
 export const initPage = async ({
@@ -59,7 +59,7 @@ export const initPage = async ({
   const { collections, globals, localization, routes } = payload.config
 
   if (redirectUnauthenticatedUser && !user && route !== '/login') {
-    if ('redirect' in searchParams) delete searchParams.redirect
+    if (searchParams && 'redirect' in searchParams) delete searchParams.redirect
 
     const stringifiedSearchParams = Object.keys(searchParams ?? {}).length
       ? `?${qs.stringify(searchParams)}`
@@ -81,7 +81,7 @@ export const initPage = async ({
     translations,
   })
 
-  const queryString = `${qs.stringify(searchParams, { addQueryPrefix: true })}`
+  const queryString = `${qs.stringify(searchParams ?? {}, { addQueryPrefix: true })}`
 
   const req = createLocalReq(
     {

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

@@ -1,4 +1,4 @@
-import type { CollectionPermission, GlobalPermission, User } from 'payload/auth'
+import type { CollectionPermission, GlobalPermission } from 'payload/auth'
 import type { EditViewComponent } from 'payload/config'
 import type {
   AdminViewComponent,
@@ -7,13 +7,9 @@ import type {
   SanitizedGlobalConfig,
 } from 'payload/types'
 
-import { isEntityHidden } from 'payload/utilities'
-import React from 'react'
-
 import { APIView as DefaultAPIView } from '../API/index.js'
 import { EditView as DefaultEditView } from '../Edit/index.js'
 import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview/index.js'
-import { NotFoundClient } from '../NotFound/index.client.js'
 import { Unauthorized } from '../Unauthorized/index.js'
 import { VersionView as DefaultVersionView } from '../Version/index.js'
 import { VersionsView as DefaultVersionsView } from '../Versions/index.js'
@@ -26,7 +22,6 @@ export const getViewsFromConfig = ({
   docPermissions,
   globalConfig,
   routeSegments,
-  user,
 }: {
   collectionConfig?: SanitizedCollectionConfig
   config: SanitizedConfig
@@ -34,7 +29,6 @@ export const getViewsFromConfig = ({
   docPermissions: CollectionPermission | GlobalPermission
   globalConfig?: SanitizedGlobalConfig
   routeSegments: string[]
-  user: User
 }): {
   CustomView: EditViewComponent
   DefaultView: EditViewComponent
@@ -74,14 +68,6 @@ export const getViewsFromConfig = ({
       const [collectionEntity, collectionSlug, segment3, segment4, segment5, ...remainingSegments] =
         routeSegments
 
-      const {
-        admin: { hidden },
-      } = collectionConfig
-
-      if (isEntityHidden({ hidden, user })) {
-        return null
-      }
-
       // `../:id`, or `../create`
       switch (routeSegments.length) {
         case 3: {
@@ -151,9 +137,6 @@ export const getViewsFromConfig = ({
                 currentRoute,
                 views,
               })
-
-              if (!CustomView) ErrorView = () => <NotFoundClient />
-
               break
             }
           }
@@ -183,8 +166,6 @@ export const getViewsFromConfig = ({
               currentRoute,
               views,
             })
-
-            if (!CustomView) ErrorView = () => <NotFoundClient />
           }
           break
         }
@@ -204,14 +185,6 @@ export const getViewsFromConfig = ({
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const [globalEntity, globalSlug, segment3, ...remainingSegments] = routeSegments
 
-      const {
-        admin: { hidden },
-      } = globalConfig
-
-      if (isEntityHidden({ hidden, user })) {
-        return null
-      }
-
       switch (routeSegments.length) {
         case 2: {
           if (docPermissions?.read?.permission) {
@@ -285,8 +258,6 @@ export const getViewsFromConfig = ({
               currentRoute,
               views,
             })
-
-            if (!CustomView) ErrorView = () => <NotFoundClient />
           }
           break
         }

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

@@ -9,13 +9,12 @@ import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomCompo
 import { DocumentInfoProvider } from '@payloadcms/ui/providers/DocumentInfo'
 import { EditDepthProvider } from '@payloadcms/ui/providers/EditDepth'
 import { FormQueryParamsProvider } from '@payloadcms/ui/providers/FormQueryParams'
+import { notFound } from 'next/navigation.js'
 import { docAccessOperation } from 'payload/operations'
 import React from 'react'
 
 import type { GenerateEditViewMetadata } from './getMetaBySegment.js'
 
-import { NotFoundClient } from '../NotFound/index.client.js'
-import { NotFoundView } from '../NotFound/index.js'
 import { getMetaBySegment } from './getMetaBySegment.js'
 import { getViewsFromConfig } from './getViewsFromConfig.js'
 
@@ -45,6 +44,7 @@ export const Document: React.FC<AdminViewProps> = async ({
       },
       user,
     },
+    visibleEntities,
   } = initPageResult
 
   const segments = Array.isArray(params?.segments) ? params.segments : []
@@ -56,7 +56,7 @@ export const Document: React.FC<AdminViewProps> = async ({
   let ViewOverride: EditViewComponent
   let CustomView: EditViewComponent
   let DefaultView: EditViewComponent
-  let ErrorView: AdminViewComponent = NotFoundView
+  let ErrorView: AdminViewComponent
 
   let docPermissions: DocumentPermissions
   let hasSavePermission: boolean
@@ -64,6 +64,10 @@ export const Document: React.FC<AdminViewProps> = async ({
   let action: string
 
   if (collectionConfig) {
+    if (!visibleEntities?.collections?.find((visibleSlug) => visibleSlug === collectionSlug)) {
+      notFound()
+    }
+
     try {
       docPermissions = await docAccessOperation({
         id,
@@ -73,7 +77,7 @@ export const Document: React.FC<AdminViewProps> = async ({
         req,
       })
     } catch (error) {
-      return <NotFoundClient />
+      notFound()
     }
 
     action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${id}` : ''}`
@@ -95,7 +99,6 @@ export const Document: React.FC<AdminViewProps> = async ({
         config,
         docPermissions,
         routeSegments: segments,
-        user,
       })
 
       CustomView = collectionViews?.CustomView
@@ -104,11 +107,19 @@ export const Document: React.FC<AdminViewProps> = async ({
     }
 
     if (!CustomView && !DefaultView && !ViewOverride) {
-      return <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
+      if (ErrorView) {
+        return <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
+      }
+
+      notFound()
     }
   }
 
   if (globalConfig) {
+    if (!visibleEntities?.globals?.find((visibleSlug) => visibleSlug === globalSlug)) {
+      notFound()
+    }
+
     docPermissions = permissions?.globals?.[globalSlug]
     hasSavePermission = isEditing && docPermissions?.update?.permission
     action = `${serverURL}${apiRoute}/globals/${globalSlug}`
@@ -126,7 +137,6 @@ export const Document: React.FC<AdminViewProps> = async ({
         docPermissions,
         globalConfig,
         routeSegments: segments,
-        user,
       })
 
       CustomView = globalViews?.CustomView
@@ -134,7 +144,11 @@ export const Document: React.FC<AdminViewProps> = async ({
       ErrorView = globalViews?.ErrorView
 
       if (!CustomView && !DefaultView && !ViewOverride) {
-        return <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
+        if (ErrorView) {
+          return <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
+        }
+
+        notFound()
       }
     }
   }

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

@@ -8,7 +8,7 @@ import { ListQueryProvider } from '@payloadcms/ui/providers/ListQuery'
 import { notFound } from 'next/navigation.js'
 import { createClientCollectionConfig } from 'payload/config'
 import { type AdminViewProps } from 'payload/types'
-import { isEntityHidden, isNumber, mergeListSearchAndWhere } from 'payload/utilities'
+import { isNumber, mergeListSearchAndWhere } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
 import type { DefaultListViewProps, ListPreferences } from './Default/types.js'
@@ -29,6 +29,7 @@ export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searc
       query,
       user,
     },
+    visibleEntities,
   } = initPageResult
 
   const collectionSlug = collectionConfig?.slug
@@ -62,10 +63,10 @@ export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searc
 
   if (collectionConfig) {
     const {
-      admin: { components: { views: { List: CustomList } = {} } = {}, hidden },
+      admin: { components: { views: { List: CustomList } = {} } = {} },
     } = collectionConfig
 
-    if (isEntityHidden({ hidden, user })) {
+    if (!visibleEntities.collections.includes(collectionSlug)) {
       return notFound()
     }
 

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

@@ -1,14 +1,61 @@
-import type { AdminViewComponent } from 'payload/types'
+import type { I18n } from '@payloadcms/translations'
+import type { Metadata } from 'next'
+import type { SanitizedConfig } from 'payload/types'
 
+import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'
 import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
-import React from 'react'
+import React, { Fragment } from 'react'
 
+import { initPage } from '../../utilities/initPage.js'
 import { NotFoundClient } from './index.client.js'
 
-export const NotFoundView: AdminViewComponent = ({ initPageResult }) => {
+export const generatePageMetadata = async ({
+  i18n,
+}: {
+  config: SanitizedConfig
+  i18n: I18n
+  params?: { [key: string]: string | string[] }
+  //eslint-disable-next-line @typescript-eslint/require-await
+}): Promise<Metadata> => {
+  return {
+    title: i18n.t('general:notFound'),
+  }
+}
+
+export type GenerateViewMetadata = (args: {
+  config: SanitizedConfig
+  i18n: I18n
+  params?: { [key: string]: string | string[] }
+}) => Promise<Metadata>
+
+export const NotFoundPage = async ({
+  config: configPromise,
+  searchParams,
+}: {
+  config: Promise<SanitizedConfig>
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}) => {
+  const initPageResult = await initPage({
+    config: configPromise,
+    redirectUnauthenticatedUser: true,
+    route: '/not-found',
+    searchParams,
+  })
+
   return (
-    <DefaultTemplate config={initPageResult?.req?.payload.config}>
-      <NotFoundClient />
-    </DefaultTemplate>
+    <Fragment>
+      <HydrateClientUser permissions={initPageResult.permissions} user={initPageResult.req.user} />
+      <DefaultTemplate
+        config={initPageResult.req.payload.config}
+        visibleEntities={initPageResult.visibleEntities}
+      >
+        <NotFoundClient />
+      </DefaultTemplate>
+    </Fragment>
   )
 }

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

@@ -2,11 +2,10 @@ import type { I18n } from '@payloadcms/translations'
 import type { Metadata } from 'next'
 import type { SanitizedConfig } from 'payload/types'
 
-import { EntityVisibilityProvider } from '@payloadcms/ui/providers/EntityVisibility'
 import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
 import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import { notFound, redirect } from 'next/navigation.js'
-import React from 'react'
+import React, { Fragment } from 'react'
 
 import { initPage } from '../../utilities/initPage.js'
 import { getViewFromConfig } from './getViewFromConfig.js'
@@ -83,13 +82,15 @@ export const RootPage = async ({
   )
 
   return (
-    <EntityVisibilityProvider visibleEntities={initPageResult.visibleEntities}>
+    <Fragment>
       {templateType === 'minimal' && (
         <MinimalTemplate className={templateClassName}>{RenderedView}</MinimalTemplate>
       )}
       {templateType === 'default' && (
-        <DefaultTemplate config={config}>{RenderedView}</DefaultTemplate>
+        <DefaultTemplate config={config} visibleEntities={initPageResult.visibleEntities}>
+          {RenderedView}
+        </DefaultTemplate>
       )}
-    </EntityVisibilityProvider>
+    </Fragment>
   )
 }

packages/payload/src/collections/config/client.ts

@@ -16,7 +16,7 @@ export type ClientCollectionConfig = Omit<
 > & {
   admin: Omit<
     SanitizedCollectionConfig['admin'],
-    ServerOnlyCollectionAdminProperties & 'fields' & 'livePreview'
+    'fields' | 'livePreview' | ServerOnlyCollectionAdminProperties
   > & {
     livePreview?: Omit<LivePreviewConfig, ServerOnlyLivePreviewProperties>
   }

packages/richtext-lexical/src/field/features/relationship/utils/EnabledRelationshipsCondition.tsx

@@ -1,24 +1,28 @@
 import type { ClientUser } from 'payload/auth'
-import type { ClientCollectionConfig } from 'payload/types'
+import type { ClientCollectionConfig, VisibleEntities } from 'payload/types'
 
 import { useAuth } from '@payloadcms/ui/providers/Auth'
 import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility'
 import * as React from 'react'
 
-type options = {
+type Options = {
   uploads: boolean
   user: ClientUser
+  visibleEntities: VisibleEntities
 }
 
 type FilteredCollectionsT = (
   collections: ClientCollectionConfig[],
-  options?: options,
+  options?: Options,
 ) => ClientCollectionConfig[]
+
 const filterRichTextCollections: FilteredCollectionsT = (collections, options) => {
-  return collections.filter(({ admin: { enableRichTextRelationship, hidden }, upload }) => {
-    if (hidden === true || (typeof hidden === 'function' && hidden({ user: options.user }))) {
+  return collections.filter(({ slug, admin: { enableRichTextRelationship }, upload }) => {
+    if (options.visibleEntities.collections.includes(slug)) {
       return false
     }
+
     if (options?.uploads) {
       return enableRichTextRelationship && Boolean(upload) === true
     }
@@ -31,8 +35,12 @@ export const EnabledRelationshipsCondition: React.FC<any> = (props) => {
   const { children, uploads = false, ...rest } = props
   const { collections } = useConfig()
   const { user } = useAuth()
+  const { visibleEntities } = useEntityVisibility()
+
   const [enabledCollectionSlugs] = React.useState(() =>
-    filterRichTextCollections(collections, { uploads, user }).map(({ slug }) => slug),
+    filterRichTextCollections(collections, { uploads, user, visibleEntities }).map(
+      ({ slug }) => slug,
+    ),
   )
 
   if (!enabledCollectionSlugs.length) {

packages/richtext-slate/src/field/elements/EnabledRelationshipsCondition.tsx

@@ -1,26 +1,30 @@
 'use client'
 
 import type { ClientUser } from 'payload/auth'
-import type { ClientCollectionConfig } from 'payload/types'
+import type { ClientCollectionConfig, VisibleEntities } from 'payload/types'
 
 import { useAuth } from '@payloadcms/ui/providers/Auth'
 import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility'
 import * as React from 'react'
 
-type options = {
+type Options = {
   uploads: boolean
   user: ClientUser
+  visibleEntities: VisibleEntities
 }
 
 type FilteredCollectionsT = (
   collections: ClientCollectionConfig[],
-  options?: options,
+  options?: Options,
 ) => ClientCollectionConfig[]
+
 const filterRichTextCollections: FilteredCollectionsT = (collections, options) => {
-  return collections.filter(({ admin: { enableRichTextRelationship, hidden }, upload }) => {
-    if (hidden === true || (typeof hidden === 'function' && hidden({ user: options.user }))) {
+  return collections.filter(({ slug, admin: { enableRichTextRelationship }, upload }) => {
+    if (!options.visibleEntities.collections.includes(slug)) {
       return false
     }
+
     if (options?.uploads) {
       return enableRichTextRelationship && Boolean(upload) === true
     }
@@ -33,8 +37,12 @@ export const EnabledRelationshipsCondition: React.FC<any> = (props) => {
   const { children, uploads = false, ...rest } = props
   const { collections } = useConfig()
   const { user } = useAuth()
+  const { visibleEntities } = useEntityVisibility()
+
   const [enabledCollectionSlugs] = React.useState(() =>
-    filterRichTextCollections(collections, { uploads, user }).map(({ slug }) => slug),
+    filterRichTextCollections(collections, { uploads, user, visibleEntities }).map(
+      ({ slug }) => slug,
+    ),
   )
 
   if (!enabledCollectionSlugs.length) {

packages/ui/src/elements/Nav/index.client.tsx

@@ -3,7 +3,7 @@
 import { getTranslation } from '@payloadcms/translations'
 import { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility'
 import LinkWithDefault from 'next/link.js'
-import React from 'react'
+import React, { Fragment } from 'react'
 
 import type { EntityToGroup } from '../../utilities/groupNavItems.js'
 
@@ -58,7 +58,7 @@ export const DefaultNavClient: React.FC = () => {
   )
 
   return (
-    <div>
+    <Fragment>
       {groups.map(({ entities, label }, key) => {
         return (
           <NavGroup key={key} label={label}>
@@ -102,6 +102,6 @@ export const DefaultNavClient: React.FC = () => {
           </NavGroup>
         )
       })}
-    </div>
+    </Fragment>
   )
 }

packages/ui/src/templates/Default/index.tsx

@@ -1,5 +1,6 @@
-import type { SanitizedConfig } from 'payload/types'
+import type { SanitizedConfig, VisibleEntities } from 'payload/types'
 
+import { EntityVisibilityProvider } from '@payloadcms/ui/providers/EntityVisibility'
 import React from 'react'
 
 import type { NavProps } from '../../elements/Nav/index.js'
@@ -18,12 +19,14 @@ export type DefaultTemplateProps = {
   children?: React.ReactNode
   className?: string
   config: Promise<SanitizedConfig> | SanitizedConfig
+  visibleEntities?: VisibleEntities
 }
 
 export const DefaultTemplate: React.FC<DefaultTemplateProps> = async ({
   children,
   className,
   config: configPromise,
+  visibleEntities,
 }) => {
   const config = await configPromise
 
@@ -40,23 +43,25 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = async ({
   }
 
   return (
-    <div>
-      <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
-        <NavToggler className={`${baseClass}__nav-toggler`}>
-          <NavHamburger />
-        </NavToggler>
-      </div>
-      <Wrapper baseClass={baseClass} className={className}>
-        <RenderCustomComponent
-          CustomComponent={CustomNav}
-          DefaultComponent={DefaultNav}
-          componentProps={navProps}
-        />
-        <div className={`${baseClass}__wrap`}>
-          <AppHeader />
-          {children}
+    <EntityVisibilityProvider visibleEntities={visibleEntities}>
+      <div>
+        <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
+          <NavToggler className={`${baseClass}__nav-toggler`}>
+            <NavHamburger />
+          </NavToggler>
         </div>
-      </Wrapper>
-    </div>
+        <Wrapper baseClass={baseClass} className={className}>
+          <RenderCustomComponent
+            CustomComponent={CustomNav}
+            DefaultComponent={DefaultNav}
+            componentProps={navProps}
+          />
+          <div className={`${baseClass}__wrap`}>
+            <AppHeader />
+            {children}
+          </div>
+        </Wrapper>
+      </div>
+    </EntityVisibilityProvider>
   )
 }