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"
/>
This commit is contained in:
Joshen Lim authored and GitHub committed 2026-03-03 18:14:34 +08:00
1 parent efdf6d188b
commit f363d69bc3
2 files changed
+17 -1

No files matched your search

@@ -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 (
@@ -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) {