feat: optionally exclude collection documents from appearing in browse-by-folder (payloadcms#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 payloadcms#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}