From f363d69bc37e22763aaa3d1a2e676e57f2d6cf90 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 3 Mar 2026 18:14:34 +0800
Subject: [PATCH] Persist dismissal of table filter bar banner if already
 enabled or enabling feature preview (#43323)

## Context

Persists the dismissal of the table filter banner promo if
- Already enabled
- After enabling feature preview

<img width="588" height="512" alt="image"
src="https://github.com/user-attachments/assets/97433c5a-cb9e-47b1-9971-f368f9c1688d"
/>
---
 .../App/FeaturePreview/FeaturePreviewModal.tsx      | 13 +++++++++++++
 .../layouts/TableEditorLayout/TableEditorLayout.tsx |  5 ++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index 106f6ea8d15..2c4c5f7a2ba 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -29,6 +29,7 @@ import { QueueOperationsPreview } from './QueueOperationsPreview'
 import { TableFilterBarPreview } from './TableFilterBarPreview'
 import { UnifiedLogsPreview } from './UnifiedLogsPreview'
 import { useFeaturePreviews } from './useFeaturePreviews'
+import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
 
 const FEATURE_PREVIEW_KEY_TO_CONTENT: {
   [key: string]: ReactNode
@@ -56,6 +57,11 @@ export const FeaturePreviewModal = () => {
   const featurePreviewContext = useFeaturePreviewContext()
   const { mutate: sendEvent } = useSendEventMutation()
 
+  const [isDismissedTableFilterBar, setIsDismissedTableFilterBar] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.TABLE_EDITOR_NEW_FILTER_BANNER_DISMISSED(ref ?? ''),
+    false
+  )
+
   const { flags, onUpdateFlag } = featurePreviewContext
   const selectedFeature =
     featurePreviews.find((preview) => preview.key === selectedFeatureKey) ?? featurePreviews[0]
@@ -72,6 +78,13 @@ export const FeaturePreviewModal = () => {
       properties: { feature: selectedFeature.key },
       groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
     })
+
+    if (
+      selectedFeature.key === LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR &&
+      !isDismissedTableFilterBar
+    ) {
+      setIsDismissedTableFilterBar(true)
+    }
   }
 
   return (
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
index d2b622044a4..3ed0b57989c 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
@@ -6,6 +6,7 @@ import { PropsWithChildren, useEffect } from 'react'
 
 import { ProjectLayoutWithAuth } from '../ProjectLayout'
 import { SaveQueueActionBar } from '@/components/grid/components/footer/operations/SaveQueueActionBar'
+import { useIsTableFilterBarEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { BannerTableEditorFilter } from '@/components/ui/BannerStack/Banners/BannerTableEditorFilter'
 import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
 import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
@@ -15,6 +16,7 @@ const TABLE_EDITOR_NEW_FILTER_BANNER_ID = 'table-editor-new-filter-banner'
 export const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
   const { ref } = useParams()
   const { addBanner, dismissBanner } = useBannerStack()
+  const isTableFilterBarEnabled = useIsTableFilterBarEnabled()
 
   const [isTableEditorNewFilterBannerDismissed] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.TABLE_EDITOR_NEW_FILTER_BANNER_DISMISSED(ref ?? ''),
@@ -29,7 +31,7 @@ export const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
   useEffect(() => {
     if (!isPermissionsLoaded) return
 
-    if (canReadTables && !isTableEditorNewFilterBannerDismissed) {
+    if (canReadTables && !isTableEditorNewFilterBannerDismissed && !isTableFilterBarEnabled) {
       addBanner({
         id: TABLE_EDITOR_NEW_FILTER_BANNER_ID,
         priority: 2,
@@ -49,6 +51,7 @@ export const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
     canReadTables,
     isPermissionsLoaded,
     isTableEditorNewFilterBannerDismissed,
+    isTableFilterBarEnabled,
   ])
 
   if (isPermissionsLoaded && !canReadTables) {