mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Danny White
611ad867be
## What kind of change does this PR introduce? Chore ## What is the current behavior? Endpoints have no (public) unique identifier, making it hard to distinguish in UI. ## What is the new behavior? Endpoints now have a name field. This is optional but strongly encouraged: - No _(Optional)_ on label - Autogenerated name Removing an endpoint name makes corresponding UI fall back the URL. | Before | After | | --- | --- | | <img width="1234" height="629" alt="Settings Oldie 2 Toolshed Supabase-CF557DE5-FA03-40E7-938E-2CC87F27C9A5" src="https://github.com/user-attachments/assets/4b55fcb7-f8bc-4b85-a374-9ee62e452cb0" /> | <img width="1234" height="629" alt="Settings Oldie 2 Toolshed Supabase-74BBF142-DEC0-4626-B614-B05EBB2AC0EF" src="https://github.com/user-attachments/assets/7ff40a91-c71a-4e20-85f8-0837d62202aa" /> | | <img width="1234" height="629" alt="Settings Oldie 2 Toolshed Supabase-32A4B56C-61F5-4C1C-81DD-C455835E075F" src="https://github.com/user-attachments/assets/f732ca50-2c60-4fbc-99c7-53afb5c34682" /> | <img width="1234" height="629" alt="Settings Oldie 2 Toolshed Supabase-29987973-9616-4409-9DF1-B9581112D4C3" src="https://github.com/user-attachments/assets/0cf1db9a-fe84-4140-a2fc-bf10cf295c3b" /> |
94 lines
2.8 KiB
TypeScript
94 lines
2.8 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" />
|
|
<Button asChild type="default">
|
|
<a target="_blank" rel="noopener noreferrer" href="https://supabase.com">
|
|
Leave feedback
|
|
</a>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</PageHeaderAside>
|
|
</PageHeaderMeta>
|
|
</PageHeader>
|
|
)
|
|
}
|