mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +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>
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { ChevronLeft, X } from 'lucide-react'
|
|
import { Badge } from 'ui'
|
|
|
|
import type { AdvisorItem } from './AdvisorPanel.types'
|
|
import {
|
|
formatItemDate,
|
|
getAdvisorItemSecondaryText,
|
|
getAdvisorPanelItemDisplayTitle,
|
|
severityBadgeVariants,
|
|
severityLabels,
|
|
} from './AdvisorPanel.utils'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface AdvisorPanelHeaderProps {
|
|
selectedItem: AdvisorItem | undefined
|
|
onBack: () => void
|
|
onClose: () => void
|
|
}
|
|
|
|
export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPanelHeaderProps) => {
|
|
const displayTitle = selectedItem ? getAdvisorPanelItemDisplayTitle(selectedItem) : undefined
|
|
const secondaryText = selectedItem ? getAdvisorItemSecondaryText(selectedItem) : undefined
|
|
const metadataText = selectedItem
|
|
? (secondaryText ??
|
|
(selectedItem.createdAt ? formatItemDate(selectedItem.createdAt) : undefined))
|
|
: undefined
|
|
// Only capitalize date strings (e.g. "a few seconds ago"); entity strings
|
|
// like "public.users" must not be case-altered.
|
|
const metadataCapitalize =
|
|
selectedItem !== undefined &&
|
|
secondaryText === undefined &&
|
|
selectedItem.createdAt !== undefined
|
|
|
|
return (
|
|
<div className="border-b px-4 py-3 flex items-center gap-3">
|
|
<ButtonTooltip
|
|
variant="text"
|
|
className="w-7 h-7 p-0 flex justify-center items-center"
|
|
icon={<ChevronLeft size={16} strokeWidth={1.5} aria-hidden={true} />}
|
|
onClick={onBack}
|
|
tooltip={{ content: { side: 'bottom', text: 'Back to list' } }}
|
|
/>
|
|
<div className="flex items-center gap-2 overflow-hidden flex-1">
|
|
<div className="flex-1 flex flex-col">
|
|
<span className="heading-default">{displayTitle}</span>
|
|
{metadataText && (
|
|
<span
|
|
className={`text-xs text-foreground-light${metadataCapitalize ? ' capitalize-sentence' : ''}`}
|
|
>
|
|
{metadataText}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{selectedItem && (
|
|
<Badge variant={severityBadgeVariants[selectedItem.severity]}>
|
|
{severityLabels[selectedItem.severity]}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<ButtonTooltip
|
|
variant="text"
|
|
className="w-7 h-7 p-0"
|
|
icon={<X strokeWidth={1.5} />}
|
|
onClick={onClose}
|
|
tooltip={{ content: { side: 'bottom', text: 'Close Advisor Center' } }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|