fix(tables): preserve OR boundaries when rules drop

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.test.tsx

@@ -235,4 +235,59 @@ describe('TableFilter', () => {
       ],
     })
   })
+
+  it('preserves an OR boundary when its first rule is cleared', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange, {
+      any: [
+        { all: [{ field: 'col-name', op: 'eq', value: 'Ada' }] },
+        {
+          all: [
+            { field: 'col-name', op: 'eq', value: 'Grace' },
+            { field: 'col-name', op: 'eq', value: 'Linus' },
+          ],
+        },
+      ],
+    })
+
+    const inputs = container.querySelectorAll<HTMLInputElement>(
+      'input[placeholder="Enter a value"]'
+    )
+    act(() => typeInto(inputs[1], ''))
+    act(() => inputs[1]?.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+
+    expect(onChange).toHaveBeenCalledWith({
+      any: [
+        { all: [{ field: 'col-name', op: 'eq', value: 'Ada' }] },
+        { all: [{ field: 'col-name', op: 'eq', value: 'Linus' }] },
+      ],
+    })
+  })
+
+  it('preserves an OR boundary when its first rule is removed', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange, {
+      any: [
+        { all: [{ field: 'col-name', op: 'eq', value: 'Ada' }] },
+        {
+          all: [
+            { field: 'col-name', op: 'eq', value: 'Grace' },
+            { field: 'col-name', op: 'eq', value: 'Linus' },
+          ],
+        },
+      ],
+    })
+
+    const removeButtons = container.querySelectorAll<HTMLButtonElement>(
+      'button[aria-label="Remove filter"]'
+    )
+    act(() => removeButtons[1]?.click())
+
+    expect(onChange).toHaveBeenCalledWith({
+      any: [
+        { all: [{ field: 'col-name', op: 'eq', value: 'Ada' }] },
+        { all: [{ field: 'col-name', op: 'eq', value: 'Linus' }] },
+      ],
+    })
+  })
 })

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx

@@ -30,9 +30,12 @@ function selectFilterOperators(column: ColumnDefinition | undefined): Set<string
 
 function toAppliedPredicate(
   rules: FilterRule[],
-  columns: ColumnDefinition[]
+  columns: ColumnDefinition[],
+  preserveIncompleteBoundaries = false
 ): TablePredicate | null {
-  const validRules = rules.filter(isCompleteRule)
+  const validRules = preserveIncompleteBoundaries
+    ? rules.map((rule) => (isCompleteRule(rule) ? rule : { ...rule, column: '' }))
+    : rules.filter(isCompleteRule)
   return filterRulesToPredicate(validRules, columns)
 }
 
@@ -80,7 +83,7 @@ export function TableFilter({
       const deferredRule = nextRules.find((rule) => rule.id === deferIncompleteRuleId)
       if (deferredRule && !isCompleteRule(deferredRule)) return
 
-      const nextFilter = toAppliedPredicate(nextRules, columns)
+      const nextFilter = toAppliedPredicate(nextRules, columns, true)
       const signature = JSON.stringify(nextFilter)
       if (signature === lastAppliedFilterRef.current) return
       lastAppliedFilterRef.current = signature
@@ -121,7 +124,12 @@ export function TableFilter({
         return
       }
       applyRules((current) => {
+        const removedIndex = current.findIndex((rule) => rule.id === id)
+        const removedRule = current[removedIndex]
         const next = current.filter((rule) => rule.id !== id)
+        if (removedRule?.logicalOperator === 'or' && removedIndex < next.length) {
+          next[removedIndex] = { ...next[removedIndex], logicalOperator: 'or' }
+        }
         return next.length > 0 ? next : [createRule(columns)]
       })
     },