Files
supabase/apps/studio/components/interfaces/Database/Replication/ErrorDetailsDialog.tsx
T
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## 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
2026-09-11 17:05:26 +10:00

70 lines
1.8 KiB
TypeScript

import {
Button,
cn,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogSection,
DialogSectionSeparator,
DialogTitle,
} from 'ui'
import { CodeBlock } from 'ui-patterns/CodeBlock'
interface ErrorDetailsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
tableName: string
reason: string
solution?: string
}
export const ErrorDetailsDialog = ({
open,
onOpenChange,
tableName,
reason,
solution,
}: ErrorDetailsDialogProps) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent size="xlarge" aria-describedby={undefined}>
<DialogHeader>
<DialogTitle>
Replication error on <code className="text-code-inline">{tableName}</code>
</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="p-0!">
<div className="px-4 py-3">
<p className="text-sm text-foreground-light">
The following error occurred during replication:
</p>
</div>
<CodeBlock
hideLineNumbers
wrapLines={false}
wrapperClassName={cn(
'[&_pre]:px-4 [&_pre]:py-3 [&>pre]:border-x-0 [&>pre]:rounded-none'
)}
language="bash"
value={reason}
className="[&_code]:text-xs [&_code]:text-foreground [&_span]:text-foreground!"
/>
{solution && (
<div className="px-4 py-3">
<p className="text-sm">{solution}</p>
</div>
)}
</DialogSection>
<DialogFooter>
<DialogClose>
<Button>Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}