fix(tables): isolate flagged view interactions

Author: j15z

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.test.tsx

@@ -82,6 +82,7 @@ describe('SortDropdown', () => {
             active: { column: 'name', direction: 'asc' },
             onSort,
             onClear,
+            keepOpenOnSelect: true,
           }}
         />
       )
@@ -98,4 +99,28 @@ describe('SortDropdown', () => {
     expect(onOpenChange).not.toHaveBeenCalledWith(false)
     expect(document.body.querySelectorAll('[role="menuitem"]')).toHaveLength(2)
   })
+
+  it('keeps the legacy close-on-select behavior by default', () => {
+    const onOpenChange = vi.fn()
+    const onSort = vi.fn()
+    act(() => {
+      root.render(
+        <SortDropdown
+          open
+          onOpenChange={onOpenChange}
+          config={{
+            options: [{ id: 'name', label: 'Name', icon: ColumnIcon }],
+            active: null,
+            onSort,
+          }}
+        />
+      )
+    })
+
+    const item = document.body.querySelector<HTMLElement>('[role="menuitem"]')
+    act(() => item?.click())
+
+    expect(onSort).toHaveBeenCalledWith('name', 'desc')
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
 })

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

@@ -48,6 +48,7 @@ export interface SortConfig {
   active: { column: string; direction: SortDirection } | null
   onSort: (column: string, direction: SortDirection) => void
   onClear?: () => void
+  keepOpenOnSelect?: boolean
 }
 
 export interface FilterTag {
@@ -283,7 +284,7 @@ export const SortDropdown = memo(function SortDropdown({
   open,
   onOpenChange,
 }: SortDropdownProps) {
-  const { options, active, onSort, onClear } = config
+  const { options, active, onSort, onClear, keepOpenOnSelect = false } = config
 
   return (
     <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
@@ -301,7 +302,7 @@ export const SortDropdown = memo(function SortDropdown({
           <>
             <DropdownMenuItem
               onSelect={(event) => {
-                event.preventDefault()
+                if (keepOpenOnSelect) event.preventDefault()
                 onClear()
               }}
             >
@@ -320,7 +321,7 @@ export const SortDropdown = memo(function SortDropdown({
             <DropdownMenuItem
               key={option.id}
               onSelect={(event) => {
-                event.preventDefault()
+                if (keepOpenOnSelect) event.preventDefault()
                 if (isActive) {
                   onSort(option.id, active.direction === 'asc' ? 'desc' : 'asc')
                 } else {

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

@@ -26,10 +26,20 @@ afterEach(() => {
 
 function renderFilter(
   onChange: (filter: TablePredicate | null) => void,
-  filter: TablePredicate | null = null
+  filter: TablePredicate | null = null,
+  autoApply = true,
+  onClose: () => void = vi.fn()
 ) {
   act(() => {
-    root.render(<TableFilter columns={COLUMNS} filter={filter} onChange={onChange} />)
+    root.render(
+      <TableFilter
+        columns={COLUMNS}
+        filter={filter}
+        autoApply={autoApply}
+        onChange={onChange}
+        onClose={onClose}
+      />
+    )
   })
 }
 
@@ -106,6 +116,25 @@ describe('TableFilter', () => {
     expect(container.textContent).not.toContain('Clear filters')
   })
 
+  it('keeps the legacy Apply flow while automatic view saves are disabled', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange, null, false)
+    const input = valueInput()
+
+    act(() => typeInto(input, 'Ada'))
+    act(() => input?.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+
+    expect(onChange).not.toHaveBeenCalled()
+    const applyButton = Array.from(container.querySelectorAll('button')).find(
+      (button) => button.textContent?.trim() === 'Apply filter'
+    )
+    act(() => applyButton?.click())
+
+    expect(onChange).toHaveBeenCalledWith({
+      all: [{ field: 'col-name', op: 'eq', value: 'Ada' }],
+    })
+  })
+
   it('clears the active filter as soon as its last rule is removed', () => {
     const onChange = vi.fn()
     renderFilter(onChange, {
@@ -174,10 +203,12 @@ describe('TableFilter', () => {
   it('does not autosave when columns refresh without a user edit', () => {
     const onChange = vi.fn()
     act(() => {
-      root.render(<TableFilter columns={COLUMNS} filter={null} onChange={onChange} />)
+      root.render(<TableFilter columns={COLUMNS} filter={null} autoApply onChange={onChange} />)
     })
     act(() => {
-      root.render(<TableFilter columns={[...COLUMNS]} filter={null} onChange={onChange} />)
+      root.render(
+        <TableFilter columns={[...COLUMNS]} filter={null} autoApply onChange={onChange} />
+      )
     })
 
     expect(onChange).not.toHaveBeenCalled()

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { Button, ChipDropdown, ChipInput } from '@sim/emcn'
+import { Button, ChipDropdown, ChipInput, cn } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import type { ColumnDefinition, FilterRule, TablePredicate } from '@/lib/table'
@@ -43,10 +43,18 @@ function isCompleteRule(rule: FilterRule): boolean {
 interface TableFilterProps {
   columns: ColumnDefinition[]
   filter: TablePredicate | null
+  autoApply?: boolean
   onChange: (filter: TablePredicate | null) => void
+  onClose?: () => void
 }
 
-export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
+export function TableFilter({
+  columns,
+  filter,
+  autoApply = false,
+  onChange,
+  onClose,
+}: TableFilterProps) {
   const lastAppliedFilterRef = useRef<string | undefined>(undefined)
   const [rules, setRules] = useState<FilterRule[]>(() => {
     const fromFilter = predicateToFilterRules(filter)
@@ -67,6 +75,7 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
       const nextRules = update(rulesRef.current)
       rulesRef.current = nextRules
       setRules(nextRules)
+      if (!autoApply) return
 
       const deferredRule = nextRules.find((rule) => rule.id === deferIncompleteRuleId)
       if (deferredRule && !isCompleteRule(deferredRule)) return
@@ -77,7 +86,7 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
       lastAppliedFilterRef.current = signature
       onChange(nextFilter)
     },
-    [columns, onChange]
+    [autoApply, columns, onChange]
   )
 
   // `value` is the filter field key (column id); `label` is what the user sees.
@@ -97,12 +106,26 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
 
   const handleRemove = useCallback(
     (id: string) => {
+      if (!autoApply) {
+        const nextRules = rulesRef.current.filter((rule) => rule.id !== id)
+        if (nextRules.length > 0) {
+          rulesRef.current = nextRules
+          setRules(nextRules)
+          return
+        }
+        const resetRules = [createRule(columns)]
+        rulesRef.current = resetRules
+        setRules(resetRules)
+        onChange(null)
+        onClose?.()
+        return
+      }
       applyRules((current) => {
         const next = current.filter((rule) => rule.id !== id)
         return next.length > 0 ? next : [createRule(columns)]
       })
     },
-    [applyRules, columns]
+    [applyRules, autoApply, columns, onChange, onClose]
   )
 
   const handleUpdate = useCallback(
@@ -156,6 +179,17 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
     [applyRules, columnById]
   )
 
+  const handleApply = useCallback(() => {
+    onChange(toAppliedPredicate(rulesRef.current, columns))
+  }, [columns, onChange])
+
+  const handleClear = () => {
+    const resetRules = [createRule(columns)]
+    rulesRef.current = resetRules
+    setRules(resetRules)
+    onChange(null)
+  }
+
   return (
     <div className='border-[var(--border)] border-b bg-[var(--bg)] px-4 py-2'>
       <div className='flex flex-col gap-1'>
@@ -169,11 +203,13 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
             onUpdate={handleUpdate}
             onColumnChange={handleColumnChange}
             onRemove={handleRemove}
+            autoApply={autoApply}
+            onApply={handleApply}
             onToggleLogical={handleToggleLogical}
           />
         ))}
 
-        <div className='mt-1 flex items-center'>
+        <div className={cn('mt-1 flex items-center', !autoApply && 'justify-between')}>
           <Button
             variant='ghost'
             size='sm'
@@ -183,6 +219,23 @@ export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
             <Plus className='mr-1 size-[10px]' />
             Add filter
           </Button>
+          {!autoApply && (
+            <div className='flex items-center gap-1.5'>
+              {filter !== null && (
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleClear}
+                  className='px-2 py-1 text-[var(--text-secondary)] text-xs'
+                >
+                  Clear filters
+                </Button>
+              )}
+              <Button variant='default' size='sm' onClick={handleApply} className='text-xs'>
+                Apply filter
+              </Button>
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -197,6 +250,8 @@ interface FilterRuleRowProps {
   onUpdate: (id: string, field: keyof FilterRule, value: string) => void
   onColumnChange: (id: string, columnId: string) => void
   onRemove: (id: string) => void
+  autoApply: boolean
+  onApply: () => void
   onToggleLogical: (id: string) => void
 }
 
@@ -208,6 +263,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
   onUpdate,
   onColumnChange,
   onRemove,
+  autoApply,
+  onApply,
   onToggleLogical,
 }: FilterRuleRowProps) {
   // Keep a stale column id selectable/visible (e.g. after the column was
@@ -281,11 +338,21 @@ const FilterRuleRow = memo(function FilterRuleRow({
           matchTriggerWidth={false}
           className='min-w-[100px] flex-1'
         />
-      ) : (
+      ) : autoApply ? (
         <FilterValueInput
           value={rule.value}
           onCommit={(value) => onUpdate(rule.id, 'value', value)}
         />
+      ) : (
+        <ChipInput
+          value={rule.value}
+          onChange={(event) => onUpdate(rule.id, 'value', event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onApply()
+          }}
+          placeholder='Enter a value'
+          className='flex-1'
+        />
       )}
 
       <Button

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

@@ -119,8 +119,8 @@ interface TableProps {
   tableLocksEnabled?: boolean
   /**
    * Resolved `table-views` flag. Server-only to resolve for the same reason.
-   * Defaults to `false` so the embedded mothership table — which has no server
-   * context to resolve it — stays on today's Filter/Sort bar.
+   * Defaults to `false` so any caller that has not resolved the flag stays on
+   * today's Filter/Sort behavior.
    */
   viewsEnabled?: boolean
 }
@@ -1177,8 +1177,9 @@ export function Table({
       active: sortColumn ? { column: sortColumn, direction: sortDirection } : null,
       onSort: handleSortColumn,
       onClear: handleClearSort,
+      keepOpenOnSelect: viewsEnabled,
     }),
-    [columnOptions, sortColumn, sortDirection, handleSortColumn, handleClearSort]
+    [columnOptions, sortColumn, sortDirection, handleSortColumn, handleClearSort, viewsEnabled]
   )
 
   const handleFilterChange = useCallback(
@@ -1530,7 +1531,9 @@ export function Table({
           key={filterSeed}
           columns={columns}
           filter={effectiveFilter}
+          autoApply={viewsEnabled}
           onChange={handleFilterChange}
+          onClose={() => setFilterOpen(false)}
         />
       )}
       <SaveViewModal

apps/sim/lib/core/config/feature-flags.ts

@@ -136,11 +136,10 @@ const FEATURE_FLAGS = {
   'table-views': {
     description:
       'Saved table views (named filter/sort/column-visibility presets) plus the column show/hide ' +
-      'menu, in the table-detail options bar. UI-only gate: resolved in the table page (server) ' +
-      "and passed down, so the table falls back to today's Filter/Sort bar when off. The routes " +
-      'and the table_views table ship ungated — they are inert with no UI to call them, and a view ' +
-      'saved during a rollout must survive the flag being toggled back off. Embedded (mothership) ' +
-      'tables render without views regardless, since no server context resolves the flag there. ' +
+      'menu. UI-only gate: resolved server-side for table-detail and embedded tables, then passed ' +
+      "down so both surfaces fall back to today's Filter/Sort behavior when off. The routes and " +
+      'the table_views table ship ungated, and new or forked tables still seed their view data, so ' +
+      'a saved view survives the flag being toggled off and can be restored when it is re-enabled. ' +
       'Off-AppConfig falls back to TABLE_VIEWS.',
     fallback: 'TABLE_VIEWS',
   },