mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Danny White
10e9cdd1f4
## What kind of change does this PR introduce? UI updates to platform webhooks. ## What is the new behavior? - `Webhooks` icon on empty state - Better text wrapping/overflow handling on table - Clearer endpoint deletion dialog | After | | --- | | <img width="1024" height="563" alt="Webhooks Toolshed Supabase-A3AF1CE1-B489-450F-9FD7-AE1B1BC0C999" src="https://github.com/user-attachments/assets/6606922d-fd39-400e-bc2d-99806755fc09" /> | | <img width="1024" height="563" alt="Webhooks Toolshed Supabase-00EF8F02-A3F2-477C-ADDB-68996D6C16E3" src="https://github.com/user-attachments/assets/705a1d78-4366-4ea4-b538-99eb368a3997" /> | | <img width="1024" height="563" alt="Webhooks Toolshed Supabase-902AC0EC-D0D2-471A-B241-C90FA8F50883" src="https://github.com/user-attachments/assets/97ff1267-b31b-442f-ad14-62b0bd24ac46" /> |
83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import { DocsButton } from 'components/ui/DocsButton'
|
|
import Link from 'next/link'
|
|
import { ReactNode } from 'react'
|
|
import {
|
|
Badge,
|
|
BreadcrumbItem_Shadcn_ as BreadcrumbItem,
|
|
BreadcrumbLink_Shadcn_ as BreadcrumbLink,
|
|
BreadcrumbList_Shadcn_ as BreadcrumbList,
|
|
BreadcrumbPage_Shadcn_ as BreadcrumbPage,
|
|
BreadcrumbSeparator_Shadcn_ as BreadcrumbSeparator,
|
|
Button,
|
|
} from 'ui'
|
|
import {
|
|
PageHeader,
|
|
PageHeaderAside,
|
|
PageHeaderBreadcrumb,
|
|
PageHeaderDescription,
|
|
PageHeaderMeta,
|
|
PageHeaderSummary,
|
|
PageHeaderTitle,
|
|
} from 'ui-patterns/PageHeader'
|
|
|
|
interface PlatformWebhooksHeaderProps {
|
|
hasSelectedEndpoint: boolean
|
|
headerTitle: string
|
|
headerDescription: string
|
|
endpointStatus?: 'enabled' | 'disabled'
|
|
endpointActions?: ReactNode
|
|
webhooksHref: string
|
|
scopeLabel: string
|
|
}
|
|
|
|
export const PlatformWebhooksHeader = ({
|
|
hasSelectedEndpoint,
|
|
headerTitle,
|
|
headerDescription,
|
|
endpointStatus,
|
|
endpointActions,
|
|
webhooksHref,
|
|
scopeLabel,
|
|
}: PlatformWebhooksHeaderProps) => {
|
|
return (
|
|
<PageHeader size="default" className="pb-6">
|
|
{hasSelectedEndpoint && (
|
|
<PageHeaderBreadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<Link href={webhooksHref}>{scopeLabel}</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Endpoint</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</PageHeaderBreadcrumb>
|
|
)}
|
|
<PageHeaderMeta>
|
|
<PageHeaderSummary className="min-w-0">
|
|
<PageHeaderTitle className="min-w-0 w-full">
|
|
<span className="flex w-full min-w-0 items-center gap-2">
|
|
<span className="block min-w-0 truncate leading-tight">{headerTitle}</span>
|
|
{hasSelectedEndpoint && endpointStatus && (
|
|
<Badge
|
|
className="shrink-0 self-center"
|
|
variant={endpointStatus === 'enabled' ? 'success' : 'default'}
|
|
>
|
|
{endpointStatus === 'enabled' ? 'Enabled' : 'Disabled'}
|
|
</Badge>
|
|
)}
|
|
</span>
|
|
</PageHeaderTitle>
|
|
<PageHeaderDescription>{headerDescription}</PageHeaderDescription>
|
|
</PageHeaderSummary>
|
|
<PageHeaderAside>
|
|
{hasSelectedEndpoint ? endpointActions : <DocsButton href="https://supabase.com/docs" />}
|
|
</PageHeaderAside>
|
|
</PageHeaderMeta>
|
|
</PageHeader>
|
|
)
|
|
}
|