chore: make new table filter bar the default (#44910)

## Summary
- Makes the new table filter bar the permanent default by hardcoding
`useIsTableFilterBarEnabled` to return `true`
- Removes the feature preview toggle (opt-out) from the preview modal
- Cleans up E2E tests: removes old filter UI test, removes
`enableFilterBar` helper, fixes race condition in column-drop test
- Old filter code paths are left in place for a follow-up cleanup PR

Closes FE-2819

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Removed the table filter bar preview and its opt-in/local-storage
preview key.
  * Cleared preview content from the feature preview modal.

* **Tests**
* Removed the UI filtering e2e test and associated preview opt-in
helper.
* Updated filter-bar e2e flows to adjust navigation/wait behavior (added
explicit waits, removed redundant reloads).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -118,10 +118,8 @@ export const useIsJitDbAccessEnabled = () => {
   return jitDbAccessEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_JIT_DB_ACCESS]
 }
 
-export const useIsTableFilterBarEnabled = () => {
-  const { flags } = useFeaturePreviewContext()
-  return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR]
-}
+// [Joshen] Temporarily leaving this in, will eventually clean up this flag + old Header component completely
+export const useIsTableFilterBarEnabled = () => true
 
 export const useIsFloatingMobileToolbarEnabled = () => {
   const { flags } = useFeaturePreviewContext()

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -29,7 +29,6 @@ import { FloatingMobileToolbarPreview } from './FloatingMobileToolbarPreview'
 import { JitDbAccessPreview } from './JitDbAccessPreview'
 import { PgDeltaDiffPreview } from './PgDeltaDiffPreview'
 import { PlatformWebhooksPreview } from './PlatformWebhooksPreview'
-import { TableFilterBarPreview } from './TableFilterBarPreview'
 import { UnifiedLogsPreview } from './UnifiedLogsPreview'
 import { FeaturePreview, useFeaturePreviews } from './useFeaturePreviews'
 import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
@@ -43,7 +42,6 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]: <AdvisorRulesPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]: <CLSPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]: <UnifiedLogsPreview />,
-  [LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR]: <TableFilterBarPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_PLATFORM_WEBHOOKS]: <PlatformWebhooksPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_JIT_DB_ACCESS]: <JitDbAccessPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_FLOATING_MOBILE_TOOLBAR]: <FloatingMobileToolbarPreview />,

apps/studio/components/interfaces/App/FeaturePreview/TableFilterBarPreview.tsx

@@ -1,37 +0,0 @@
-import { useParams } from 'common'
-import Image from 'next/image'
-
-import { InlineLink } from '@/components/ui/InlineLink'
-import { BASE_PATH } from '@/lib/constants'
-
-export const TableFilterBarPreview = () => {
-  const { ref = '_' } = useParams()
-
-  return (
-    <div className="flex flex-col gap-2">
-      <p className="text-foreground-light text-sm mb-4">
-        An intuitive new way to filter your table data in the{' '}
-        <InlineLink href={`/project/${ref}/editor`}>Table Editor</InlineLink>. Build complex filters
-        visually with support for multiple data types (strings, numbers, dates, booleans) and
-        operators. The new interface makes it easier to understand and modify your filters at a
-        glance.
-      </p>
-      <Image
-        src={`${BASE_PATH}/img/previews/table-filter-bar-preview.png`}
-        width={1296}
-        height={900}
-        alt="table-filter-bar-preview"
-        className="rounded border"
-      />
-      <div className="space-y-2 !mt-4">
-        <p className="text-sm">Enabling this preview will:</p>
-        <ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
-          <li>Replace the existing filter input with a new visual filter bar</li>
-          <li>
-            Add support for date filtering with preset ranges (Today, Yesterday, Last 7 days, etc.)
-          </li>
-        </ul>
-      </div>
-    </div>
-  )
-}

apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts

@@ -77,15 +77,6 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
       isPlatformOnly: false,
       isDefaultOptIn: false,
     },
-    {
-      key: LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR,
-      name: 'New Table Filter Bar',
-      discussionsUrl: 'https://github.com/orgs/supabase/discussions/42461',
-      enabled: true,
-      isNew: true,
-      isPlatformOnly: false,
-      isDefaultOptIn: true,
-    },
     {
       key: LOCAL_STORAGE_KEYS.UI_PREVIEW_FLOATING_MOBILE_TOOLBAR,
       name: 'Floating Mobile Toolbar',

e2e/studio/features/filter-bar.spec.ts

@@ -1128,6 +1128,8 @@ test.describe('Filter Bar', () => {
 
         await query(`ALTER TABLE ${tableName} DROP COLUMN first_name`)
 
+        // Wait for the filter bar's debounced URL sync (500ms) before reloading
+        await page.waitForURL(/filter=/, { timeout: 5000 })
         await page.reload({ waitUntil: 'networkidle' })
 
         await expect(page.getByText('No results found — check your filter values')).toBeVisible({

e2e/studio/features/table-editor.spec.ts

@@ -415,56 +415,6 @@ testRunner('table editor', () => {
     await page.getByRole('button', { name: 'Close' }).first().click()
   })
 
-  test('filtering rows works as expected', async ({ page, ref }) => {
-    const tableName = 'pw_table_filtering'
-    const colName = 'pw_column'
-
-    await using _ = await withSetupCleanup(
-      async () => {
-        await createTableWithRLS(tableName, 'pw_column')
-      },
-      async () => {
-        await dropTable(tableName)
-      }
-    )
-    // Disable the new filter bar for this test since it uses the old filter UI
-    await page.goto(toUrl(`/project/${ref}/editor?schema=public`))
-    await page.evaluate(() => {
-      localStorage.setItem('supabase-ui-table-filter-bar', 'false')
-    })
-    await page.goto(toUrl(`/project/${ref}/editor?schema=public`))
-    await page.getByRole('button', { name: `View ${tableName}`, exact: true }).click()
-    await page.waitForURL(/\/editor\/\d+\?schema=public$/)
-
-    for (const value of ['789', '456', '123']) {
-      await page.getByTestId('table-editor-insert-new-row').click()
-      await page.getByRole('menuitem', { name: 'Insert row Insert a new row' }).click()
-      await page.getByTestId(`${colName}-input`).fill(value)
-      const apiPromise = waitForApiResponse(page, 'pg-meta', ref, 'query?key=', { method: 'POST' })
-      await page.getByTestId('action-bar-save-row').click()
-      await apiPromise
-    }
-
-    await page.getByRole('button', { name: 'Filter', exact: true }).click()
-    await page.getByRole('button', { name: 'Add filter' }).click()
-    await page.getByRole('dialog').getByRole('button', { name: 'id', exact: true }).click()
-    await page.getByRole('menuitem', { name: colName }).click()
-    await page.getByRole('textbox', { name: 'Enter a value' }).fill('789')
-    const waitForFilterApply = createApiResponseWaiter(
-      page,
-      'pg-meta',
-      ref,
-      'query?key=table-rows-'
-    )
-    await page.getByRole('button', { name: 'Apply filter' }).click()
-    await waitForFilterApply
-    await page.waitForTimeout(500)
-    await page.getByRole('button', { name: 'Filtered by 1 rule' }).click({ force: true })
-    await expect(page.getByRole('gridcell', { name: '789' })).toBeVisible()
-    await expect(page.getByRole('gridcell', { name: '456' })).not.toBeVisible()
-    await expect(page.getByRole('gridcell', { name: '123' })).not.toBeVisible()
-  })
-
   test('view table definition works as expected', async ({ page, ref }) => {
     const tableName = 'pw_table_definition'
     const colName = 'pw_column'

e2e/studio/utils/filter-bar-helpers.ts

@@ -2,14 +2,6 @@ import { expect, Page } from '@playwright/test'
 
 import { createApiResponseWaiter, waitForTableToLoad } from './wait-for-response.js'
 
-const FILTER_BAR_KEY = 'supabase-ui-table-filter-bar'
-
-export async function enableFilterBar(page: Page) {
-  await page.evaluate((key) => {
-    localStorage.setItem(key, 'true')
-  }, FILTER_BAR_KEY)
-}
-
 export function getFilterBarInput(page: Page) {
   return page.getByTestId('filter-bar-freeform-input')
 }
@@ -95,8 +87,4 @@ export async function setupFilterBarPage(page: Page, ref: string, editorUrl: str
   const loadPromise = waitForTableToLoad(page, ref)
   await page.goto(editorUrl)
   await loadPromise
-  await enableFilterBar(page)
-  const reloadPromise = waitForTableToLoad(page, ref)
-  await page.reload({ waitUntil: 'networkidle' })
-  await reloadPromise
 }

packages/common/constants/local-storage.ts

@@ -21,7 +21,6 @@ export const LOCAL_STORAGE_KEYS = {
   UI_ONBOARDING_NEW_PAGE_SHOWN: 'supabase-ui-onboarding-new-page-shown',
   UI_PREVIEW_ADVISOR_RULES: 'supabase-ui-advisor-rules',
   UI_PREVIEW_QUEUE_OPERATIONS: 'supabase-ui-queue-operations',
-  UI_PREVIEW_TABLE_FILTER_BAR: 'supabase-ui-table-filter-bar',
   UI_PREVIEW_PG_DELTA_DIFF: 'supabase-ui-pg-delta-diff',
   UI_PREVIEW_FLOATING_MOBILE_TOOLBAR: 'supabase-ui-floating-mobile-toolbar',
   UI_PREVIEW_PLATFORM_WEBHOOKS: 'supabase-ui-platform-webhooks',
@@ -153,7 +152,6 @@ const LOCAL_STORAGE_KEYS_ALLOWLIST = [
   LOCAL_STORAGE_KEYS.UI_PREVIEW_QUEUE_OPERATIONS,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS,
-  LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_PLATFORM_WEBHOOKS,
   LOCAL_STORAGE_KEYS.UI_PREVIEW_JIT_DB_ACCESS,
   LOCAL_STORAGE_KEYS.LAST_SIGN_IN_METHOD,