fix(ui): relationship filterOptions not applied within the list view (#11008)

Fixes #10440. When `filterOptions` are set on a relationship field,
those same filters are not applied to the `Filter` component within the
list view. This is because `filterOptions` is not being thread into the
`RelationshipFilter` component responsible for populating the available
options.

To do this, we first need to be resolve the filter options on the server
as they accept functions. Once resolved, they can be prop-drilled into
the proper component and appended onto the client-side "where" query.

Reliant on #11080.

Author: jacobsfletch

docs/fields/relationship.mdx

@@ -136,21 +136,19 @@ Note: If `sortOptions` is not defined, the default sorting behavior of the Relat
 
 ## Filtering relationship options
 
-Options can be dynamically limited by supplying a [query constraint](/docs/queries/overview), which will be used both
-for validating input and filtering available relationships in the UI.
-
-The `filterOptions` property can either be a `Where` query, or a function returning `true` to not filter, `false` to
-prevent all, or a `Where` query. When using a function, it will be
-called with an argument object with the following properties:
-
-| Property      | Description                                                                                           |
-| ------------- | ----------------------------------------------------------------------------------------------------- |
-| `relationTo`  | The collection `slug` to filter against, limited to this field's `relationTo` property                |
-| `data`        | An object containing the full collection or global document currently being edited                    |
-| `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field |
-| `id`          | The `id` of the current document being edited. `id` is `undefined` during the `create` operation      |
-| `user`        | An object containing the currently authenticated user                                                 |
-| `req`         | The Payload Request, which contains references to `payload`, `user`, `locale`, and more.              |
+Options can be dynamically limited by supplying a [query constraint](/docs/queries/overview), which will be used both for validating input and filtering available relationships in the UI.
+
+The `filterOptions` property can either be a `Where` query, or a function returning `true` to not filter, `false` to prevent all, or a `Where` query. When using a function, it will be called with an argument object with the following properties:
+
+| Property      | Description                                                                                                                                                                              |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blockData`        | The data of the nearest parent block. Will be `undefined` if the field is not within a block or when called on a `Filter` component within the list view.                           |
+| `data`        | An object containing the full collection or global document currently being edited. Will be an empty object when called on a `Filter` component within the list view.                    |
+| `id`          | The `id` of the current document being edited. Will be `undefined` during the `create` operation or when called on a `Filter` component within the list view.                            |
+| `relationTo`  | The collection `slug` to filter against, limited to this field's `relationTo` property.                                                                                                  |
+| `req`         | The Payload Request, which contains references to `payload`, `user`, `locale`, and more.                                                                                                 |
+| `siblingData` | An object containing document data that is scoped to only fields within the same parent of this field. Will be an emprt object when called on a `Filter` component within the list view. |
+| `user`        | An object containing the currently authenticated user.                                                                                                                                   |
 
 ## Example
 

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

@@ -15,6 +15,7 @@ import { isNumber } from 'payload/shared'
 import React, { Fragment } from 'react'
 
 import { renderListViewSlots } from './renderListViewSlots.js'
+import { resolveAllFilterOptions } from './resolveAllFilterOptions.js'
 
 export { generateListMetadata } from './meta.js'
 
@@ -149,6 +150,11 @@ export const renderListView = async (
 
     const renderedFilters = renderFilters(collectionConfig.fields, req.payload.importMap)
 
+    const resolvedFilterOptions = await resolveAllFilterOptions({
+      collectionConfig,
+      req,
+    })
+
     const staticDescription =
       typeof collectionConfig.admin.description === 'function'
         ? collectionConfig.admin.description({ t: i18n.t })
@@ -192,6 +198,7 @@ export const renderListView = async (
       enableRowSelections,
       listPreferences,
       renderedFilters,
+      resolvedFilterOptions,
       Table,
     }
 

packages/next/src/views/List/resolveAllFilterOptions.ts

@@ -0,0 +1,37 @@
+import type { CollectionConfig, PayloadRequest, ResolvedFilterOptions } from 'payload'
+
+import { resolveFilterOptions } from '@payloadcms/ui/rsc'
+import { fieldIsHiddenOrDisabled } from 'payload/shared'
+
+export const resolveAllFilterOptions = async ({
+  collectionConfig,
+  req,
+}: {
+  collectionConfig: CollectionConfig
+  req: PayloadRequest
+}): Promise<Map<string, ResolvedFilterOptions>> => {
+  const resolvedFilterOptions = new Map<string, ResolvedFilterOptions>()
+
+  await Promise.all(
+    collectionConfig.fields.map(async (field) => {
+      if (fieldIsHiddenOrDisabled(field)) {
+        return
+      }
+
+      if ('name' in field && 'filterOptions' in field && field.filterOptions) {
+        const options = await resolveFilterOptions(field.filterOptions, {
+          id: undefined,
+          blockData: undefined,
+          data: {}, // use empty object to prevent breaking queries when accessing properties of data
+          relationTo: field.relationTo,
+          req,
+          siblingData: {}, // use empty object to prevent breaking queries when accessing properties of data
+          user: req.user,
+        })
+        resolvedFilterOptions.set(field.name, options)
+      }
+    }),
+  )
+
+  return resolvedFilterOptions
+}

packages/payload/src/fields/config/types.ts

@@ -269,15 +269,15 @@ export type Condition<TData extends TypeWithID = any, TSiblingData = any> = (
 
 export type FilterOptionsProps<TData = any> = {
   /**
-   * The data of the nearest parent block. If the field is not within a block, `blockData` will be equal to `undefined`.
+   * The data of the nearest parent block. Will be `undefined` if the field is not within a block or when called on a `Filter` component within the list view.
    */
   blockData: TData
   /**
-   * An object containing the full collection or global document currently being edited.
+   * An object containing the full collection or global document currently being edited. Will be an empty object when called on a `Filter` component within the list view.
    */
   data: TData
   /**
-   * The `id` of the current document being edited. `id` is undefined during the `create` operation.
+   * The `id` of the current document being edited. Will be undefined during the `create` operation or when called on a `Filter` component within the list view.
    */
   id: number | string
   /**
@@ -286,7 +286,7 @@ export type FilterOptionsProps<TData = any> = {
   relationTo: CollectionSlug
   req: PayloadRequest
   /**
-   * An object containing document data that is scoped to only fields within the same parent of this field.
+   * An object containing document data that is scoped to only fields within the same parent of this field. Will be an empty object when called on a `Filter` component within the list view.
    */
   siblingData: unknown
   /**

packages/payload/src/types/index.ts

@@ -239,3 +239,5 @@ export type TransformGlobalWithSelect<
   : DataFromGlobalSlug<TSlug>
 
 export type PopulateType = Partial<TypedCollectionSelect>
+
+export type ResolvedFilterOptions = { [collection: string]: Where }

packages/ui/src/elements/ListControls/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ClientCollectionConfig, Where } from 'payload'
+import type { ClientCollectionConfig, ResolvedFilterOptions, Where } from 'payload'
 
 import { useWindowInfo } from '@faceless-ui/window-info'
 import { getTranslation } from '@payloadcms/translations'
@@ -20,8 +20,8 @@ import { SearchFilter } from '../SearchFilter/index.js'
 import { UnpublishMany } from '../UnpublishMany/index.js'
 import { WhereBuilder } from '../WhereBuilder/index.js'
 import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'
-import './index.scss'
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'
+import './index.scss'
 
 const baseClass = 'list-controls'
 
@@ -37,6 +37,7 @@ export type ListControlsProps = {
   readonly handleSortChange?: (sort: string) => void
   readonly handleWhereChange?: (where: Where) => void
   readonly renderedFilters?: Map<string, React.ReactNode>
+  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>
 }
 
 /**
@@ -54,6 +55,7 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
     enableColumns = true,
     enableSort = false,
     renderedFilters,
+    resolvedFilterOptions,
   } = props
 
   const { handleSearchChange, query } = useListQuery()
@@ -214,6 +216,7 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
           collectionSlug={collectionConfig.slug}
           fields={collectionConfig?.fields}
           renderedFilters={renderedFilters}
+          resolvedFilterOptions={resolvedFilterOptions}
         />
       </AnimateHeight>
       {enableSort && (

packages/ui/src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx

@@ -1,4 +1,10 @@
-import type { Operator, Option, SelectFieldClient, TextFieldClient } from 'payload'
+import type {
+  Operator,
+  Option,
+  ResolvedFilterOptions,
+  SelectFieldClient,
+  TextFieldClient,
+} from 'payload'
 
 import React from 'react'
 
@@ -13,6 +19,7 @@ import { Text } from '../Text/index.js'
 type Props = {
   booleanSelect: boolean
   disabled: boolean
+  filterOptions: ResolvedFilterOptions
   internalField: ReducedField
   onChange: React.Dispatch<React.SetStateAction<string>>
   operator: Operator
@@ -23,6 +30,7 @@ type Props = {
 export const DefaultFilter: React.FC<Props> = ({
   booleanSelect,
   disabled,
+  filterOptions,
   internalField,
   onChange,
   operator,
@@ -73,6 +81,7 @@ export const DefaultFilter: React.FC<Props> = ({
         <RelationshipFilter
           disabled={disabled}
           field={internalField.field}
+          filterOptions={filterOptions}
           onChange={onChange}
           operator={operator}
           value={value}

packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx

@@ -23,6 +23,7 @@ export const RelationshipFilter: React.FC<Props> = (props) => {
   const {
     disabled,
     field: { admin: { isSortable } = {}, hasMany, relationTo },
+    filterOptions,
     onChange,
     value,
   } = props
@@ -104,6 +105,10 @@ export const RelationshipFilter: React.FC<Props> = (props) => {
           where,
         }
 
+        if (filterOptions && filterOptions?.[relationSlug]) {
+          query.where.and.push(filterOptions[relationSlug])
+        }
+
         if (debouncedSearch) {
           query.where.and.push({
             [fieldToSearch]: {

packages/ui/src/elements/WhereBuilder/Condition/Relationship/types.ts

@@ -1,10 +1,16 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ClientCollectionConfig, PaginatedDocs, RelationshipFieldClient } from 'payload'
+import type {
+  ClientCollectionConfig,
+  PaginatedDocs,
+  RelationshipFieldClient,
+  ResolvedFilterOptions,
+} from 'payload'
 
 import type { DefaultFilterProps } from '../types.js'
 
 export type Props = {
   readonly field: RelationshipFieldClient
+  readonly filterOptions: ResolvedFilterOptions
 } & DefaultFilterProps
 
 export type Option = {

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -7,6 +7,7 @@ export type Props = {
   readonly addCondition: AddCondition
   readonly andIndex: number
   readonly fieldName: string
+  readonly filterOptions: ResolvedFilterOptions
   readonly operator: Operator
   readonly orIndex: number
   readonly reducedFields: ReducedField[]
@@ -16,7 +17,7 @@ export type Props = {
   readonly value: string
 }
 
-import type { Operator, Option as PayloadOption } from 'payload'
+import type { Operator, Option as PayloadOption, ResolvedFilterOptions } from 'payload'
 
 import type { Option } from '../../ReactSelect/index.js'
 
@@ -35,6 +36,7 @@ export const Condition: React.FC<Props> = (props) => {
     addCondition,
     andIndex,
     fieldName,
+    filterOptions,
     operator,
     orIndex,
     reducedFields,
@@ -145,6 +147,7 @@ export const Condition: React.FC<Props> = (props) => {
                 disabled={
                   !operator || !reducedField || reducedField?.field?.admin?.disableListFilter
                 }
+                filterOptions={filterOptions}
                 internalField={reducedField}
                 onChange={setInternalValue}
                 operator={operator}