mirror of
https://github.com/supabase/supabase.git
synced 2026-05-11 19:26:38 +08:00
ae66a6a9c0
<img width="1289" height="863" alt="image" src="https://github.com/user-attachments/assets/d661f107-b358-4894-8531-80441d60ab91" /> GitHub integration is now available on the free plan and so we'd like to start promoting code-first workflows as much as possible. One way to do that is to set the tone straight away by asking a user to connecting their GitHub repository to a project as part of project creation. This PR: - decouples GitHub connection and repo selection into a separate component we can make use of in integration settings and project creation. - Adds new GitHub fields to project creation form and sends them off to project creation endpoint - Pre-fills project name based on repo selection To test locally: - Ensure you have GitHub integration set up locally (using ngrok etc) - Ensure you are on the connected platform branch - Open create a new project page - Connect GitHub as part of the creation form and select a repo - Create the project and wait for status to be healthy - Check project settings integrations page and ensure repo is connected Note: - this requires changes on the management api end to accept new GitHub fields - it might make sense to pull out GitHub connection/authorization from GitHub repository selection but in the current state they are tied together. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * GitHub repository selection now available during project creation with integrated authorization flow * GitHub connection status and compute availability indicators now displayed on project dashboard * Project name auto-populates from selected GitHub repository name when available <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
import { ArrowRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { cn, HoverCard, HoverCardContent, HoverCardTrigger, Separator } from 'ui'
|
|
|
|
import { ServerLightGrid } from './ServerLightGrid'
|
|
import { DOCS_URL } from '@/lib/constants'
|
|
|
|
interface HighAvailabilityBadgeProps {
|
|
size?: 'default' | 'small'
|
|
}
|
|
|
|
export function HighAvailabilityBadge({ size = 'default' }: HighAvailabilityBadgeProps) {
|
|
return (
|
|
<HoverCard openDelay={200} closeDelay={100}>
|
|
<HoverCardTrigger asChild>
|
|
<div
|
|
className={cn(
|
|
'relative inline-flex items-center justify-center overflow-hidden rounded-md text-center font-mono uppercase',
|
|
'cursor-default whitespace-nowrap font-medium tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] py-[3px]',
|
|
'transition-all',
|
|
'border border-purple-700 dark:border-purple-600/50',
|
|
'bg-purple-400 text-purple-1100 dark:bg-purple-100'
|
|
)}
|
|
>
|
|
{size === 'small' ? 'HA' : 'High Availability'}
|
|
<span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-white/35 to-transparent blur-md" />
|
|
</div>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent side="bottom" align="start" className="w-72 overflow-hidden p-0">
|
|
<div className="h-24 bg-surface-75">
|
|
<ServerLightGrid />
|
|
</div>
|
|
<Separator />
|
|
<div className="flex flex-col gap-1 p-3 px-5">
|
|
<p className="text-sm text-foreground-light">
|
|
Driven by <span className="text-foreground">Multigres</span>, a horizontally scalable
|
|
Postgres architecture that supports highly-available and globally distributed
|
|
deployments.
|
|
</p>
|
|
<Link
|
|
href={`${DOCS_URL}/guides/deployment/high-availability`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-1 inline-flex items-center gap-1 text-xs text-foreground-lighter transition-colors hover:text-foreground"
|
|
>
|
|
Read more
|
|
<ArrowRight size={12} strokeWidth={1.5} />
|
|
</Link>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|