mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Joshen Lim
18ddfadf86
## Context Similar to how we added a banner for the new table filter bar - mainly to improve visibility for this feature preview as we'd like some feedback from usage <img width="313" height="314" alt="image" src="https://github.com/user-attachments/assets/4cea6383-483a-42cf-b4a5-bb8c3918c00d" /> ## Other changes - Also adding some typing to the `addBanner` and `dismissBanner` - Removed banner for table editor filter bar
76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
import { LOCAL_STORAGE_KEYS } from 'common'
|
|
import { useParams } from 'common/hooks'
|
|
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
|
|
import { Badge, Button, Card, CardContent, CardHeader } from 'ui'
|
|
|
|
import { BannerCard } from '../BannerCard'
|
|
import { useBannerStack } from '../BannerStackProvider'
|
|
import {
|
|
useFeaturePreviewModal,
|
|
useIsQueueOperationsEnabled,
|
|
} from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
|
|
|
|
export const BannerTableEditorQueueOperations = () => {
|
|
const { ref } = useParams()
|
|
const { selectFeaturePreview } = useFeaturePreviewModal()
|
|
const isQueueOperationsEnabled = useIsQueueOperationsEnabled()
|
|
|
|
const { dismissBanner } = useBannerStack()
|
|
const [, setIsDismissed] = useLocalStorageQuery(
|
|
LOCAL_STORAGE_KEYS.TABLE_EDITOR_QUEUE_OPERATIONS_BANNER_DISMISSED(ref ?? ''),
|
|
false
|
|
)
|
|
|
|
return (
|
|
<BannerCard
|
|
onDismiss={() => {
|
|
setIsDismissed(true)
|
|
dismissBanner('table-editor-queue-operations-banner')
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-y-4">
|
|
<div className="flex flex-col gap-y-2 items-start">
|
|
<Badge variant="success" className="-ml-0.5 uppercase inline-flex items-center mb-2">
|
|
Preview
|
|
</Badge>
|
|
<Card className="text-xs w-full">
|
|
<CardHeader className="flex flex-row gap-2 px-2 py-2">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-xs text-foreground ml-0.5">
|
|
<span>name</span>
|
|
<span className="text-foreground-muted mx-1.5">·</span>
|
|
<span>where id = 10</span>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="font-mono text-xs px-2 py-1">
|
|
<div className="flex gap-2 py-0.5">
|
|
<span className="text-destructive select-none font-medium">-</span>
|
|
<span className="text-destructive truncate max-w-full">Red</span>
|
|
</div>
|
|
|
|
<div className="flex gap-2 py-0.5">
|
|
<span className="text-brand-link select-none font-medium">+</span>
|
|
<span className="text-brand-link truncate max-w-full">Blue</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="flex flex-col gap-y-1 mb-2">
|
|
<p className="text-sm font-medium">Queue row edits in Table Editor</p>
|
|
<p className="text-xs text-foreground-lighter text-balance">
|
|
Batch multiple row edits and review them before saving to your database
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="default"
|
|
className="w-min"
|
|
onClick={() => selectFeaturePreview(LOCAL_STORAGE_KEYS.UI_PREVIEW_QUEUE_OPERATIONS)}
|
|
>
|
|
{isQueueOperationsEnabled ? 'View' : 'Enable'} feature preview
|
|
</Button>
|
|
</div>
|
|
</BannerCard>
|
|
)
|
|
}
|