mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Joshen Lim
50eea124e7
## Context Small improvements from this PR: https://github.com/supabase/supabase/pull/45373 - Fix feature preview badge alignment - Before: <img width="341" height="75" alt="image" src="https://github.com/user-attachments/assets/e6e2f727-fc75-4f70-b9cd-94d67aed8c5d" /> - After: <img width="365" height="64" alt="image" src="https://github.com/user-attachments/assets/3d6e5e5d-c285-48f4-8f8f-251c23101e41" /> - Shift feature preview badge for policies into tester side panel <img width="640" height="93" alt="image" src="https://github.com/user-attachments/assets/3efb73a7-f7f5-4ae0-8560-d1e0ba989626" /> - Realised that advisor settings wasn't set up to be behind the feature preview - Fixing that in this PR <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added preview badge indicator to the RLS Tester feature * **Style** * Improved spacing and layout alignment across authentication, database access, webhook, logging, and advisor interface components * Enhanced badge component styling for better vertical alignment <!-- end of auto-generated comment: release notes by coderabbit.ai -->
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
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,
|
|
} from 'ui'
|
|
import {
|
|
PageHeader,
|
|
PageHeaderAside,
|
|
PageHeaderBreadcrumb,
|
|
PageHeaderDescription,
|
|
PageHeaderMeta,
|
|
PageHeaderSummary,
|
|
PageHeaderTitle,
|
|
} from 'ui-patterns/PageHeader'
|
|
|
|
import { DocsButton } from '@/components/ui/DocsButton'
|
|
import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
|
|
|
|
interface PlatformWebhooksHeaderProps {
|
|
hasSelectedEndpoint: boolean
|
|
headerTitle: string
|
|
headerDescription: string
|
|
endpointStatus?: 'enabled' | 'disabled'
|
|
endpointActions?: ReactNode
|
|
webhooksHref: string
|
|
scopeLabel: string
|
|
featureKey: string
|
|
}
|
|
|
|
export const PlatformWebhooksHeader = ({
|
|
hasSelectedEndpoint,
|
|
headerTitle,
|
|
headerDescription,
|
|
endpointStatus,
|
|
endpointActions,
|
|
webhooksHref,
|
|
scopeLabel,
|
|
featureKey,
|
|
}: 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-x-4">
|
|
<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>
|
|
)}
|
|
{!hasSelectedEndpoint && <FeaturePreviewBadge featureKey={featureKey} />}
|
|
</span>
|
|
</PageHeaderTitle>
|
|
<PageHeaderDescription>{headerDescription}</PageHeaderDescription>
|
|
</PageHeaderSummary>
|
|
<PageHeaderAside>
|
|
{hasSelectedEndpoint ? endpointActions : <DocsButton href="https://supabase.com/docs" />}
|
|
</PageHeaderAside>
|
|
</PageHeaderMeta>
|
|
</PageHeader>
|
|
)
|
|
}
|