fix(ui): where builder crashing with invalid queries (#14342)

Fixes #14278

Fixes issues with filtering on relationship fields in the list view.

Author: JarrodMFlesch

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

@@ -1,18 +1,27 @@
 'use client'
+import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { DateFilterProps as Props } from './types.js'
 
+import { useTranslation } from '../../../../providers/Translation/index.js'
 import { DatePickerField } from '../../../DatePicker/index.js'
 
 const baseClass = 'condition-value-date'
 
 export const DateFilter: React.FC<Props> = ({ disabled, field: { admin }, onChange, value }) => {
   const { date } = admin || {}
+  const { i18n, t } = useTranslation()
 
   return (
     <div className={baseClass}>
-      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value as Date} />
+      <DatePickerField
+        {...date}
+        onChange={onChange}
+        placeholder={getTranslation(admin.placeholder, i18n) || t('general:enterAValue')}
+        readOnly={disabled}
+        value={value as Date}
+      />
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
 'use client'
+import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { NumberFilterProps as Props } from './types.js'
@@ -12,13 +13,13 @@ const baseClass = 'condition-value-number'
 export const NumberFilter: React.FC<Props> = (props) => {
   const {
     disabled,
-    field: { hasMany },
+    field: { admin, hasMany },
     onChange,
     operator,
     value,
   } = props
 
-  const { t } = useTranslation()
+  const { i18n, t } = useTranslation()
 
   const isMulti = ['in', 'not_in'].includes(operator) || hasMany
 
@@ -63,6 +64,8 @@ export const NumberFilter: React.FC<Props> = (props) => {
     }
   }, [value])
 
+  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')
+
   return isMulti ? (
     <ReactSelect
       disabled={disabled}
@@ -73,15 +76,15 @@ export const NumberFilter: React.FC<Props> = (props) => {
       numberOnly
       onChange={onSelect}
       options={[]}
-      placeholder={t('general:enterAValue')}
+      placeholder={placeholder}
       value={valueToRender || []}
     />
   ) : (
     <input
       className={baseClass}
       disabled={disabled}
       onChange={(e) => onChange(e.target.value)}
-      placeholder={t('general:enterAValue')}
+      placeholder={placeholder}
       type="number"
       value={value as number}
     />

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

@@ -77,6 +77,7 @@ export const Condition: React.FC<Props> = (props) => {
   const updateValue = useEffectEvent(async (debouncedValue) => {
     if (operator) {
       await updateCondition({
+        type: 'value',
         andIndex,
         field: reducedField,
         operator,
@@ -98,6 +99,7 @@ export const Condition: React.FC<Props> = (props) => {
     async (field: Option<string>) => {
       setInternalValue(undefined)
       await updateCondition({
+        type: 'field',
         andIndex,
         field: reducedFields.find((option) => option.value === field.value),
         operator,
@@ -124,6 +126,7 @@ export const Condition: React.FC<Props> = (props) => {
       }
 
       await updateCondition({
+        type: 'operator',
         andIndex,
         field: reducedField,
         operator: operator.value,

packages/ui/src/elements/WhereBuilder/field-types.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+import type { ClientField } from 'payload'
+
 const equalsOperators = [
   {
     label: 'equals',
@@ -19,13 +22,14 @@ export const arrayOperators = [
     label: 'isNotIn',
     value: 'not_in',
   },
-  {
-    label: 'exists',
-    value: 'exists',
-  },
 ]
 
-const base = [...equalsOperators, ...arrayOperators]
+const exists = {
+  label: 'exists',
+  value: 'exists',
+}
+
+const base = [...equalsOperators, ...arrayOperators, exists]
 
 const numeric = [
   ...base,
@@ -49,10 +53,6 @@ const numeric = [
 
 const geo = [
   ...equalsOperators,
-  {
-    label: 'exists',
-    value: 'exists',
-  },
   {
     label: 'near',
     value: 'near',
@@ -84,23 +84,23 @@ const contains = {
   value: 'contains',
 }
 
-const fieldTypeConditions: {
+export const fieldTypeConditions: {
   [key: string]: {
     component: string
     operators: { label: string; value: string }[]
   }
 } = {
   checkbox: {
     component: 'Text',
-    operators: equalsOperators,
+    operators: [...equalsOperators, exists],
   },
   code: {
     component: 'Text',
     operators: [...base, like, notLike, contains],
   },
   date: {
     component: 'Date',
-    operators: [...base, ...numeric],
+    operators: [...numeric, exists],
   },
   email: {
     component: 'Text',
@@ -112,11 +112,11 @@ const fieldTypeConditions: {
   },
   number: {
     component: 'Number',
-    operators: [...base, ...numeric],
+    operators: [...numeric, exists],
   },
   point: {
     component: 'Point',
-    operators: [...geo, within, intersects],
+    operators: [...geo, exists, within, intersects],
   },
   radio: {
     component: 'Select',
@@ -148,4 +148,39 @@ const fieldTypeConditions: {
   },
 }
 
-export default fieldTypeConditions
+export const getValidFieldOperators = ({
+  field,
+  operator,
+}: {
+  field: ClientField
+  operator?: string
+}): {
+  validOperator: string
+  validOperators: {
+    label: string
+    value: string
+  }[]
+} => {
+  let validOperators: {
+    label: string
+    value: string
+  }[] = []
+
+  if (field.type === 'relationship' && Array.isArray(field.relationTo)) {
+    if ('hasMany' in field && field.hasMany) {
+      validOperators = [...equalsOperators, exists]
+    } else {
+      validOperators = [...base]
+    }
+  } else {
+    validOperators = [...fieldTypeConditions[field.type].operators]
+  }
+
+  return {
+    validOperator:
+      operator && validOperators.find(({ value }) => value === operator)
+        ? operator
+        : validOperators[0].value,
+    validOperators,
+  }
+}

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

@@ -13,7 +13,7 @@ import { useTranslation } from '../../providers/Translation/index.js'
 import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'
 import { Button } from '../Button/index.js'
 import { Condition } from './Condition/index.js'
-import fieldTypes from './field-types.js'
+import { fieldTypeConditions, getValidFieldOperators } from './field-types.js'
 import './index.scss'
 
 const baseClass = 'where-builder'
@@ -69,7 +69,7 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
     async ({ andIndex, field, orIndex, relation }) => {
       const newConditions = [...conditions]
 
-      const defaultOperator = fieldTypes[field.field.type].operators[0].value
+      const defaultOperator = fieldTypeConditions[field.field.type].operators[0].value
 
       if (relation === 'and') {
         newConditions[orIndex].and.splice(andIndex, 0, {
@@ -95,30 +95,21 @@ export const WhereBuilder: React.FC<WhereBuilderProps> = (props) => {
   )
 
   const updateCondition: UpdateCondition = React.useCallback(
-    async ({ andIndex, field, operator: incomingOperator, orIndex, value: valueArg }) => {
+    async ({ andIndex, field, operator: incomingOperator, orIndex, value }) => {
       const existingCondition = conditions[orIndex].and[andIndex]
 
-      const defaults = fieldTypes[field.field.type]
-      const operator = incomingOperator || defaults.operators[0].value
-
       if (typeof existingCondition === 'object' && field.value) {
-        const value = valueArg ?? existingCondition?.[operator]
-
-        const valueChanged = value !== existingCondition?.[String(field.value)]?.[String(operator)]
-
-        const operatorChanged =
-          operator !== Object.keys(existingCondition?.[String(field.value)] || {})?.[0]
-
-        if (valueChanged || operatorChanged) {
-          const newRowCondition = {
-            [String(field.value)]: { [operator]: value },
-          }
-
-          const newConditions = [...conditions]
-          newConditions[orIndex].and[andIndex] = newRowCondition
-
-          await handleWhereChange({ or: newConditions })
+        const { validOperator } = getValidFieldOperators({
+          field: field.field,
+          operator: incomingOperator,
+        })
+        const newRowCondition = {
+          [String(field.value)]: { [validOperator]: value },
         }
+
+        const newConditions = [...conditions]
+        newConditions[orIndex].and[andIndex] = newRowCondition
+        await handleWhereChange({ or: newConditions })
       }
     },
     [conditions, handleWhereChange],

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

@@ -71,6 +71,7 @@ export type AddCondition = ({
 }) => Promise<void> | void
 
 export type UpdateCondition = ({
+  type,
   andIndex,
   field,
   operator,
@@ -81,6 +82,7 @@ export type UpdateCondition = ({
   field: ReducedField
   operator: string
   orIndex: number
+  type: 'field' | 'operator' | 'value'
   value: Value
 }) => Promise<void> | void
 

packages/ui/src/utilities/reduceFieldsToOptions.tsx

@@ -7,7 +7,10 @@ import { fieldAffectsData, fieldIsHiddenOrDisabled, fieldIsID, tabHasName } from
 
 import type { ReducedField } from '../elements/WhereBuilder/types.js'
 
-import fieldTypes, { arrayOperators } from '../elements/WhereBuilder/field-types.js'
+import {
+  fieldTypeConditions,
+  getValidFieldOperators,
+} from '../elements/WhereBuilder/field-types.js'
 import { createNestedClientFieldPath } from '../forms/Form/createNestedClientFieldPath.js'
 import { combineFieldLabel } from './combineFieldLabel.js'
 
@@ -199,7 +202,7 @@ export const reduceFieldsToOptions = ({
       return reduced
     }
 
-    if (typeof fieldTypes[field.type] === 'object') {
+    if (typeof fieldTypeConditions[field.type] === 'object') {
       if (
         fieldIsID(field) ||
         fieldPermissions === true ||
@@ -208,10 +211,11 @@ export const reduceFieldsToOptions = ({
       ) {
         const operatorKeys = new Set()
 
-        const fieldOperators =
-          'hasMany' in field && field.hasMany ? arrayOperators : fieldTypes[field.type].operators
+        const { validOperators } = getValidFieldOperators({
+          field,
+        })
 
-        const operators = fieldOperators.reduce((acc, operator) => {
+        const operators = validOperators.reduce((acc, operator) => {
           if (!operatorKeys.has(operator.value)) {
             operatorKeys.add(operator.value)
             const operatorKey = `operators:${operator.label}` as ClientTranslationKeys
@@ -239,7 +243,7 @@ export const reduceFieldsToOptions = ({
           label: formattedLabel,
           plainTextLabel: `${labelPrefix ? labelPrefix + ' > ' : ''}${localizedLabel}`,
           value: fieldPath,
-          ...fieldTypes[field.type],
+          ...fieldTypeConditions[field.type],
           field,
           operators,
         }