fix(ui): ensures admin.disableListFilter is disabled despite url search params (#9874)

Continuation of #9846 and partial fix for #9774. When setting
`admin.disableListFilter` retroactively, it remains active within the
list filter controls. Same for when the URL search query contains one of
these fields, except this will actually display the _wrong_ field,
falling back to the _first_ field from the config. The fix is to
properly disable the condition for this field if it's an active filter,
while still preventing it from ever rendering as an option within the
field selector itself.

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

@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import type { FieldCondition } from '../types.js'
 
@@ -64,6 +64,11 @@ export const Condition: React.FC<Props> = (props) => {
     RenderedFilter,
     updateCondition,
   } = props
+
+  const options = useMemo(() => {
+    return fields.filter(({ field }) => !field.admin.disableListFilter)
+  }, [fields])
+
   const [internalField, setInternalField] = useState<FieldCondition>(() =>
     fields.find((field) => fieldName === field.value),
   )
@@ -113,25 +118,34 @@ export const Condition: React.FC<Props> = (props) => {
     valueOptions = internalField.field.options
   }
 
+  const disabled =
+    (!internalField?.value && typeof internalField?.value !== 'number') ||
+    internalField?.field?.admin?.disableListFilter
+
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__inputs`}>
           <div className={`${baseClass}__field`}>
             <ReactSelect
+              disabled={disabled}
               isClearable={false}
               onChange={(field: Option) => {
                 setInternalField(fields.find((f) => f.value === field.value))
                 setInternalOperatorOption(undefined)
                 setInternalQueryValue(undefined)
               }}
-              options={fields}
-              value={fields.find((field) => internalField?.value === field.value) || fields[0]}
+              options={options}
+              value={
+                fields.find((field) => internalField?.value === field.value) || {
+                  value: internalField?.value,
+                }
+              }
             />
           </div>
           <div className={`${baseClass}__operator`}>
             <ReactSelect
-              disabled={!internalField?.value && typeof internalField?.value !== 'number'}
+              disabled={disabled}
               isClearable={false}
               onChange={(operator: Option<Operator>) => {
                 setInternalOperatorOption(operator.value)
@@ -148,7 +162,7 @@ export const Condition: React.FC<Props> = (props) => {
             {RenderedFilter || (
               <DefaultFilter
                 booleanSelect={booleanSelect}
-                disabled={!internalOperatorOption}
+                disabled={!internalOperatorOption || internalField?.field?.admin?.disableListFilter}
                 internalField={internalField}
                 onChange={setInternalQueryValue}
                 operator={internalOperatorOption}

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

@@ -29,7 +29,7 @@ export const reduceClientFields = ({
   pathPrefix,
 }: ReduceClientFieldsArgs): FieldCondition[] => {
   return fields.reduce((reduced, field) => {
-    if (field.admin?.disableListFilter || (fieldIsHiddenOrDisabled(field) && !fieldIsID(field))) {
+    if (fieldIsHiddenOrDisabled(field) && !fieldIsID(field)) {
       return reduced
     }
 

packages/ui/src/providers/ListQuery/index.tsx

@@ -124,17 +124,19 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
       }
     },
     [
-      modifySearchParams,
       currentQuery?.page,
       currentQuery?.limit,
+      currentQuery?.search,
       currentQuery?.sort,
       currentQuery?.where,
-      currentQuery?.search,
       preferenceKey,
-      router,
-      setPreference,
+      defaultLimit,
+      defaultSort,
+      modifySearchParams,
       onQueryChange,
       onQueryChangeFromProps,
+      setPreference,
+      router,
     ],
   )