diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx index 999a763bc1..831aae1095 100644 --- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx +++ b/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() diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx index ffefc4eb0c..3083842b1e 100644 --- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx +++ b/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]: , [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.UI_PREVIEW_FLOATING_MOBILE_TOOLBAR]: , diff --git a/apps/studio/components/interfaces/App/FeaturePreview/TableFilterBarPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/TableFilterBarPreview.tsx deleted file mode 100644 index 686ea6be13..0000000000 --- a/apps/studio/components/interfaces/App/FeaturePreview/TableFilterBarPreview.tsx +++ /dev/null @@ -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 ( -
-

- An intuitive new way to filter your table data in the{' '} - Table Editor. 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. -

- table-filter-bar-preview -
-

Enabling this preview will:

-
    -
  • Replace the existing filter input with a new visual filter bar
  • -
  • - Add support for date filtering with preset ranges (Today, Yesterday, Last 7 days, etc.) -
  • -
-
-
- ) -} diff --git a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts index 41c7dafd4c..f92dbcd3fb 100644 --- a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts +++ b/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', diff --git a/apps/studio/public/img/previews/table-filter-bar-preview.png b/apps/studio/public/img/previews/table-filter-bar-preview.png deleted file mode 100644 index 7b585b29e9..0000000000 Binary files a/apps/studio/public/img/previews/table-filter-bar-preview.png and /dev/null differ diff --git a/e2e/studio/features/filter-bar.spec.ts b/e2e/studio/features/filter-bar.spec.ts index 66bdc76f29..345441fd87 100644 --- a/e2e/studio/features/filter-bar.spec.ts +++ b/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({ diff --git a/e2e/studio/features/table-editor.spec.ts b/e2e/studio/features/table-editor.spec.ts index c030b6c689..5d061129a4 100644 --- a/e2e/studio/features/table-editor.spec.ts +++ b/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' diff --git a/e2e/studio/utils/filter-bar-helpers.ts b/e2e/studio/utils/filter-bar-helpers.ts index 140e5e0029..6440e430e6 100644 --- a/e2e/studio/utils/filter-bar-helpers.ts +++ b/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 } diff --git a/packages/common/constants/local-storage.ts b/packages/common/constants/local-storage.ts index f94fcef69d..34ae866c28 100644 --- a/packages/common/constants/local-storage.ts +++ b/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,