Simplify, strengthen and make consistent filter drawer validation logic

packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte

@@ -20,6 +20,8 @@
   import { createEventDispatcher, onMount } from "svelte"
 
   const dispatch = createEventDispatcher()
+  const { OperatorOptions } = Constants
+  const { getValidOperatorsForType } = LuceneUtils
 
   export let schemaFields
   export let filters = []
@@ -45,7 +47,7 @@
       {
         id: generate(),
         field: null,
-        operator: Constants.OperatorOptions.Equals.value,
+        operator: OperatorOptions.Equals.value,
         value: null,
         valueType: "Value",
       },
@@ -66,73 +68,60 @@
     return schemaFields.find(field => field.name === filter.field)
   }
 
-  const onFieldChange = (expression, field) => {
+  const validateTypes = filter => {
-    // Update the field types
+    // Update type based on field
-    expression.type = enrichedSchemaFields.find(x => x.name === field)?.type
+    const fieldSchema = enrichedSchemaFields.find(x => x.name === filter.field)
-    expression.externalType = getSchema(expression)?.externalType
+    filter.type = fieldSchema?.type
 
-    // Ensure a valid operator is set
+    // Update external type based on field
-    const validOperators = LuceneUtils.getValidOperatorsForType(
+    filter.externalType = getSchema(filter)?.externalType
-      expression.type
-    ).map(x => x.value)
-    if (!validOperators.includes(expression.operator)) {
-      expression.operator =
-        validOperators[0] ?? Constants.OperatorOptions.Equals.value
-      onOperatorChange(expression, expression.operator)
   }
 
-    // if changed to an array, change default value to empty array
+  const validateOperator = filter => {
-    const idx = filters.findIndex(x => x.id === expression.id)
+    // Ensure a valid operator is selected
-    if (expression.type === "array") {
+    const operators = getValidOperatorsForType(filter.type).map(x => x.value)
-      filters[idx].value = []
+    if (!operators.includes(filter.operator)) {
-    } else {
+      filter.operator = operators[0] ?? OperatorOptions.Equals.value
-      filters[idx].value = null
-    }
     }
 
-  const onOperatorChange = (expression, operator) => {
+    // Update the noValue flag if the operator does not take a value
     const noValueOptions = [
-      Constants.OperatorOptions.Empty.value,
+      OperatorOptions.Empty.value,
-      Constants.OperatorOptions.NotEmpty.value,
+      OperatorOptions.NotEmpty.value,
     ]
-    expression.noValue = noValueOptions.includes(operator)
+    filter.noValue = noValueOptions.includes(filter.operator)
-    if (expression.noValue) {
-      expression.value = null
   }
-    if (
+
-      operator === Constants.OperatorOptions.In.value &&
+  const validateValue = filter => {
-      !Array.isArray(expression.value) &&
+    // Check if the operator allows a value at all
-      expression.valueType === "Value"
+    if (filter.noValue) {
-    ) {
+      filter.value = null
-      if (expression.value) {
+      return
-        expression.value = [expression.value]
-      } else {
-        expression.value = []
     }
-    } else if (
+
-      operator !== Constants.OperatorOptions.In.value &&
+    // Ensure array values are properly set and cleared
-      Array.isArray(expression.value)
+    if (Array.isArray(filter.value)) {
-    ) {
+      if (filter.valueType !== "Value" || filter.type !== "array") {
-      expression.value = null
+        filter.value = null
+      }
+    } else if (filter.type === "array" && filter.valueType === "Value") {
+      filter.value = []
     }
   }
 
-  const onValueTypeChange = (expression, valueType) => {
+  const onFieldChange = filter => {
-    if (Array.isArray(expression.value) && valueType === "Binding") {
+    validateTypes(filter)
-      expression.value = null
+    validateOperator(filter)
-    } else if (
+    validateValue(filter)
-      expression.operator === Constants.OperatorOptions.In.value &&
-      !Array.isArray(expression.value) &&
-      valueType === "Value"
-    ) {
-      if (typeof expression.value === "string") {
-        expression.value = expression.value.split(",")
-      } else if (expression.value) {
-        expression.value = [expression.value]
-      } else {
-        expression.value = []
   }
+
+  const onOperatorChange = filter => {
+    validateOperator(filter)
+    validateValue(filter)
   }
+
+  const onValueTypeChange = filter => {
+    validateValue(filter)
   }
 
   const getFieldOptions = field => {
@@ -177,24 +166,24 @@
               <Select
                 bind:value={filter.field}
                 options={fieldOptions}
-                on:change={e => onFieldChange(filter, e.detail)}
+                on:change={() => onFieldChange(filter)}
                 placeholder="Column"
               />
               <Select
                 disabled={!filter.field}
-                options={LuceneUtils.getValidOperatorsForType(filter.type)}
+                options={getValidOperatorsForType(filter.type)}
                 bind:value={filter.operator}
-                on:change={e => onOperatorChange(filter, e.detail)}
+                on:change={() => onOperatorChange(filter)}
                 placeholder={null}
               />
               <Select
                 disabled={filter.noValue || !filter.field}
                 options={valueTypeOptions}
                 bind:value={filter.valueType}
+                on:change={() => onValueTypeChange(filter)}
                 placeholder={null}
-                on:change={e => onValueTypeChange(filter, e.detail)}
               />
-              {#if filter.valueType === "Binding"}
+              {#if filter.field && filter.valueType === "Binding"}
                 <DrawerBindableInput
                   disabled={filter.noValue}
                   title={`Value for "${filter.field}"`}
@@ -275,7 +264,7 @@
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
     align-items: center;
-    grid-template-columns: 1fr 120px 120px 1fr auto auto;
+    grid-template-columns: 1fr 150px 120px 1fr 16px 16px;
   }
 
   .filter-label {