mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny White
476d4a5851
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral
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 className="w-min">
|
|
<Link href={DASHBOARD_SETTINGS_URL}>
|
|
{isQueueOperationsEnabled ? 'View' : 'Enable in'} preferences
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</BannerCard>
|
|
)
|
|
}
|