fix(ui): filtering on hasMany fields (#12579)

Author: JarrodMFlesch

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

@@ -1,5 +1,5 @@
 'use client'
-const boolean = [
+const equalsOperators = [
   {
     label: 'equals',
     value: 'equals',
@@ -10,8 +10,7 @@ const boolean = [
   },
 ]
 
-const base = [
-  ...boolean,
+export const arrayOperators = [
   {
     label: 'isIn',
     value: 'in',
@@ -26,6 +25,8 @@ const base = [
   },
 ]
 
+const base = [...equalsOperators, ...arrayOperators]
+
 const numeric = [
   ...base,
   {
@@ -47,7 +48,7 @@ const numeric = [
 ]
 
 const geo = [
-  ...boolean,
+  ...equalsOperators,
   {
     label: 'exists',
     value: 'exists',
@@ -91,7 +92,7 @@ const fieldTypeConditions: {
 } = {
   checkbox: {
     component: 'Text',
-    operators: boolean,
+    operators: equalsOperators,
   },
   code: {
     component: 'Text',

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

@@ -10,7 +10,7 @@ import type { ReducedField } from './types.js'
 
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'
 import { combineFieldLabel } from '../../utilities/combineFieldLabel.js'
-import fieldTypes from './field-types.js'
+import fieldTypes, { arrayOperators } from './field-types.js'
 
 type ReduceFieldOptionsArgs = {
   fields: ClientField[]
@@ -170,7 +170,10 @@ export const reduceFields = ({
     if (typeof fieldTypes[field.type] === 'object') {
       const operatorKeys = new Set()
 
-      const operators = fieldTypes[field.type].operators.reduce((acc, operator) => {
+      const fieldOperators =
+        'hasMany' in field && field.hasMany ? arrayOperators : fieldTypes[field.type].operators
+
+      const operators = fieldOperators.reduce((acc, operator) => {
         if (!operatorKeys.has(operator.value)) {
           operatorKeys.add(operator.value)
           const operatorKey = `operators:${operator.label}` as ClientTranslationKeys