mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.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 variant="default" className="w-min">
|
|
<Link href={DASHBOARD_SETTINGS_URL}>
|
|
{isQueueOperationsEnabled ? 'View' : 'Enable in'} preferences
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</BannerCard>
|
|
)
|
|
}
|