mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 18:00:20 -04:00
Ali Waseem
6be596ea34
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? - Remove queue operations from feature preview into settings - Refactor dashboard settings - Resolves DEPR-434 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Dashboard settings panel in Account preferences with toggles for Inline Editor and Queue Operations; “Dashboard” added to project Configuration. * **Removed** * Old Inline Editor settings UI and the Queue Operations feature-preview UI removed. * **Refactor** * Consolidated dashboard preferences into a single settings surface; banners and actions now navigate to preferences; account/preferences layouts and back-navigation behavior adjusted for platform vs self-hosted. * **Tests** * Added tests for settings UI, menu generation, redirects, and local-storage. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
import { LOCAL_STORAGE_KEYS } from 'common'
|
|
import { useParams } from 'common/hooks'
|
|
import Link from 'next/link'
|
|
import { Badge, Button, Card, CardContent, CardHeader } from 'ui'
|
|
|
|
import { BannerCard } from '../BannerCard'
|
|
import { useBannerStack } from '../BannerStackProvider'
|
|
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
|
|
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
|
|
|
|
const DASHBOARD_SETTINGS_URL = '/account/me#dashboard'
|
|
|
|
export const BannerTableEditorQueueOperations = () => {
|
|
const { ref } = useParams()
|
|
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">
|
|
New
|
|
</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 asChild type="default" className="w-min">
|
|
<Link href={DASHBOARD_SETTINGS_URL}>
|
|
{isQueueOperationsEnabled ? 'View' : 'Enable in'} preferences
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</BannerCard>
|
|
)
|
|
}
|