feat: optionally exclude collection documents from appearing in browse-by-folder (#12654)

Adds configurations for browse-by-folder document results. This PR
**does NOT** allow for filtering out folders on a per collection basis.
That will be addressed in a future PR 👍

### Disable browse-by-folder all together
```ts
type RootFoldersConfiguration = {
  /**
   * If true, the browse by folder view will be enabled
   *
   * @default true
   */
  browseByFolder?: boolean
  // ...rest of type
}
```

### Remove document types from appearing in the browse by folder view
```ts
type CollectionFoldersConfiguration =
  | boolean
  | {
      /**
       * If true, the collection documents will be included in the browse by folder view
       *
       * @default true
       */
      browseByFolder?: boolean
    }
```

### Misc
Fixes #12631 where adding
folders.collectionOverrides was being set on the client config - it
should be omitted.

Fixes an issue where `baseListFilters` were not being respected.

Author: JarrodMFlesch

docs/folders/overview.mdx

@@ -23,6 +23,12 @@ On the payload config, you can configure the following settings under the `folde
 // Type definition
 
 type RootFoldersConfiguration = {
+  /**
+   * If true, the browse by folder view will be enabled
+   *
+   * @default true
+   */
+  browseByFolder?: boolean
   /**
    * An array of functions to be ran when the folder collection is initialized
    * This allows plugins to modify the collection configuration
@@ -82,7 +88,16 @@ To enable folders on a collection, you need to set the `admin.folders` property
 ```ts
 // Type definition
 
-type CollectionFoldersConfiguration = boolean
+type CollectionFoldersConfiguration =
+  | boolean
+  | {
+      /**
+       * If true, the collection will be included in the browse by folder view
+       *
+       * @default true
+       */
+      browseByFolder?: boolean
+    }
 ```
 
 ```ts

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

@@ -23,20 +23,11 @@ export const DefaultNavClient: React.FC<{
       admin: {
         routes: { browseByFolder: foldersRoute },
       },
-      collections,
+      folders,
       routes: { admin: adminRoute },
     },
   } = useConfig()
 
-  const [folderCollectionSlugs] = React.useState<string[]>(() => {
-    return collections.reduce<string[]>((acc, collection) => {
-      if (collection.folders) {
-        acc.push(collection.slug)
-      }
-      return acc
-    }, [])
-  })
-
   const { i18n } = useTranslation()
 
   const folderURL = formatAdminURL({
@@ -48,7 +39,7 @@ export const DefaultNavClient: React.FC<{
 
   return (
     <Fragment>
-      {folderCollectionSlugs.length > 0 && <BrowseByFolderButton active={viewingRootFolderView} />}
+      {folders && folders.browseByFolder && <BrowseByFolderButton active={viewingRootFolderView} />}
       {groups.map(({ entities, label }, key) => {
         return (
           <NavGroup isOpen={navPreferences?.groups?.[label]?.open} key={key} label={label}>

packages/next/src/views/BrowseByFolder/buildView.tsx

@@ -3,13 +3,15 @@ import type {
   BuildCollectionFolderViewResult,
   FolderListViewServerPropsOnly,
   ListQuery,
+  Where,
 } from 'payload'
 
 import { DefaultBrowseByFolderView, FolderProvider, HydrateAuthProvider } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
 import { formatAdminURL } from '@payloadcms/ui/shared'
 import { redirect } from 'next/navigation.js'
 import { getFolderData } from 'payload'
+import { buildFolderWhereConstraints } from 'payload/shared'
 import React from 'react'
 
 import { getPreferences } from '../../utilities/getPreferences.js'
@@ -29,10 +31,10 @@ export const buildBrowseByFolderView = async (
   args: BuildFolderViewArgs,
 ): Promise<BuildCollectionFolderViewResult> => {
   const {
+    browseByFolderSlugs: browseByFolderSlugsFromArgs = [],
     disableBulkDelete,
     disableBulkEdit,
     enableRowSelections,
-    folderCollectionSlugs,
     folderID,
     initPageResult,
     isInDrawer,
@@ -54,30 +56,83 @@ export const buildBrowseByFolderView = async (
     visibleEntities,
   } = initPageResult
 
-  const collections = folderCollectionSlugs.filter(
+  const browseByFolderSlugs = browseByFolderSlugsFromArgs.filter(
     (collectionSlug) =>
       permissions?.collections?.[collectionSlug]?.read &&
       visibleEntities.collections.includes(collectionSlug),
   )
 
-  if (!collections.length) {
+  if (config.folders === false || config.folders.browseByFolder === false) {
     throw new Error('not-found')
   }
 
   const query = queryFromArgs || queryFromReq
   const selectedCollectionSlugs: string[] =
     Array.isArray(query?.relationTo) && query.relationTo.length
-      ? query.relationTo
-      : [...folderCollectionSlugs, config.folders.slug]
+      ? query.relationTo.filter(
+          (slug) =>
+            browseByFolderSlugs.includes(slug) || (config.folders && slug === config.folders.slug),
+        )
+      : [...browseByFolderSlugs, config.folders.slug]
 
   const {
     routes: { admin: adminRoute },
   } = config
 
+  const folderCollectionConfig = payload.collections[config.folders.slug].config
+
+  const browseByFolderPreferences = await getPreferences<{ viewPreference: string }>(
+    'browse-by-folder',
+    payload,
+    user.id,
+    user.collection,
+  )
+
+  let documentWhere: undefined | Where = undefined
+  let folderWhere: undefined | Where = undefined
+  // if folderID, dont make a documentWhere since it only queries root folders
+  for (const collectionSlug of selectedCollectionSlugs) {
+    if (collectionSlug === config.folders.slug) {
+      const folderCollectionConstraints = await buildFolderWhereConstraints({
+        collectionConfig: folderCollectionConfig,
+        folderID,
+        localeCode: fullLocale?.code,
+        req: initPageResult.req,
+        search: typeof query?.search === 'string' ? query.search : undefined,
+      })
+
+      if (folderCollectionConstraints) {
+        folderWhere = folderCollectionConstraints
+      }
+    } else if (folderID) {
+      if (!documentWhere) {
+        documentWhere = {
+          or: [],
+        }
+      }
+
+      const collectionConfig = payload.collections[collectionSlug].config
+      if (collectionConfig.folders && collectionConfig.folders.browseByFolder === true) {
+        const collectionConstraints = await buildFolderWhereConstraints({
+          collectionConfig,
+          folderID,
+          localeCode: fullLocale?.code,
+          req: initPageResult.req,
+          search: typeof query?.search === 'string' ? query.search : undefined,
+        })
+
+        if (collectionConstraints) {
+          documentWhere.or.push(collectionConstraints)
+        }
+      }
+    }
+  }
+
   const { breadcrumbs, documents, subfolders } = await getFolderData({
+    documentWhere,
     folderID,
+    folderWhere,
     req: initPageResult.req,
-    search: query?.search as string,
   })
 
   const resolvedFolderID = breadcrumbs[breadcrumbs.length - 1]?.id
@@ -96,13 +151,6 @@ export const buildBrowseByFolderView = async (
     )
   }
 
-  const browseByFolderPreferences = await getPreferences<{ viewPreference: string }>(
-    'browse-by-folder',
-    payload,
-    user.id,
-    user.collection,
-  )
-
   const serverProps: Omit<FolderListViewServerPropsOnly, 'collectionConfig' | 'listPreferences'> = {
     documents,
     i18n,
@@ -125,7 +173,7 @@ export const buildBrowseByFolderView = async (
 
   // documents cannot be created without a parent folder in this view
   const hasCreatePermissionCollectionSlugs = folderID
-    ? [config.folders.slug, ...folderCollectionSlugs]
+    ? [config.folders.slug, ...browseByFolderSlugs]
     : [config.folders.slug]
 
   return {
@@ -134,7 +182,8 @@ export const buildBrowseByFolderView = async (
         breadcrumbs={breadcrumbs}
         documents={documents}
         filteredCollectionSlugs={selectedCollectionSlugs}
-        folderCollectionSlugs={folderCollectionSlugs}
+        folderCollectionSlugs={browseByFolderSlugs}
+        folderFieldName={config.folders.fieldName}
         folderID={folderID}
         subfolders={subfolders}
       >

packages/next/src/views/CollectionFolders/buildView.tsx

@@ -8,9 +8,10 @@ import type {
 
 import { DefaultCollectionFolderView, FolderProvider, HydrateAuthProvider } from '@payloadcms/ui'
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
-import { formatAdminURL, mergeListSearchAndWhere } from '@payloadcms/ui/shared'
+import { formatAdminURL } from '@payloadcms/ui/shared'
 import { redirect } from 'next/navigation.js'
-import { getFolderData, parseDocumentID } from 'payload'
+import { getFolderData } from 'payload'
+import { buildFolderWhereConstraints } from 'payload/shared'
 import React from 'react'
 
 import { getPreferences } from '../../utilities/getPreferences.js'
@@ -37,7 +38,6 @@ export const buildCollectionFolderView = async (
     disableBulkDelete,
     disableBulkEdit,
     enableRowSelections,
-    folderCollectionSlugs,
     folderID,
     initPageResult,
     isInDrawer,
@@ -69,51 +69,58 @@ export const buildCollectionFolderView = async (
   if (collectionConfig) {
     const query = queryFromArgs || queryFromReq
 
-    const collectionFolderPreferences = await getPreferences<{ viewPreference: string }>(
-      `${collectionSlug}-collection-folder`,
-      payload,
-      user.id,
-      user.collection,
-    )
+    const collectionFolderPreferences = await getPreferences<{
+      sort?: string
+      viewPreference: string
+    }>(`${collectionSlug}-collection-folder`, payload, user.id, user.collection)
+
+    const sortPreference = collectionFolderPreferences?.value.sort
 
     const {
       routes: { admin: adminRoute },
     } = config
 
     if (
       (!visibleEntities.collections.includes(collectionSlug) && !overrideEntityVisibility) ||
-      !folderCollectionSlugs.includes(collectionSlug)
+      !config.folders
     ) {
       throw new Error('not-found')
     }
 
-    const whereConstraints = [
-      mergeListSearchAndWhere({
-        collectionConfig,
-        search: typeof query?.search === 'string' ? query.search : undefined,
-        where: (query?.where as Where) || undefined,
-      }),
-    ]
-
-    if (folderID) {
-      whereConstraints.push({
-        [config.folders.fieldName]: {
-          equals: parseDocumentID({ id: folderID, collectionSlug, payload }),
-        },
-      })
-    } else {
-      whereConstraints.push({
-        [config.folders.fieldName]: {
-          exists: false,
-        },
-      })
+    let folderWhere: undefined | Where
+    const folderCollectionConfig = payload.collections[config.folders.slug].config
+    const folderCollectionConstraints = await buildFolderWhereConstraints({
+      collectionConfig: folderCollectionConfig,
+      folderID,
+      localeCode: fullLocale?.code,
+      req: initPageResult.req,
+      search: typeof query?.search === 'string' ? query.search : undefined,
+      sort: sortPreference,
+    })
+
+    if (folderCollectionConstraints) {
+      folderWhere = folderCollectionConstraints
+    }
+
+    let documentWhere: undefined | Where
+    const collectionConstraints = await buildFolderWhereConstraints({
+      collectionConfig,
+      folderID,
+      localeCode: fullLocale?.code,
+      req: initPageResult.req,
+      search: typeof query?.search === 'string' ? query.search : undefined,
+      sort: sortPreference,
+    })
+    if (collectionConstraints) {
+      documentWhere = collectionConstraints
     }
 
     const { breadcrumbs, documents, subfolders } = await getFolderData({
       collectionSlug,
+      documentWhere,
       folderID,
+      folderWhere,
       req: initPageResult.req,
-      search: query?.search as string,
     })
 
     const resolvedFolderID = breadcrumbs[breadcrumbs.length - 1]?.id
@@ -175,7 +182,8 @@ export const buildCollectionFolderView = async (
           breadcrumbs={breadcrumbs}
           collectionSlug={collectionSlug}
           documents={documents}
-          folderCollectionSlugs={folderCollectionSlugs}
+          folderCollectionSlugs={[collectionSlug]}
+          folderFieldName={config.folders.fieldName}
           folderID={folderID}
           search={search}
           subfolders={subfolders}