mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
65a5e593ca
## What kind of change does this PR introduce? UI ## What is the current behavior? GitHub’s empty state and Integrations icon spacing do not match the PrivateLink list. Add connection has no plus. PrivateLink rows use a kebab instead of click-to-view. ## What is the new behavior? GitHub empty state matches the connections list. **Connect GitHub** is tiny and asks you to connect before choosing a repo. Section icons align. **Add connection** has a plus. PrivateLink rows are clickable; delete stays in the sheet. | Before | After | | --- | --- | | <img width="1456" height="1508" alt="CleanShot 2026-08-14 at 12 48 48@2x" src="https://github.com/user-attachments/assets/27485e35-c24f-478e-8328-aad03ebb1dfb" /> | <img width="1468" height="1494" alt="CleanShot 2026-08-14 at 14 22 19@2x" src="https://github.com/user-attachments/assets/056e3b48-4542-4be5-9b21-4b5abd726e8e" /> | ## Additional context Stacked on #49087. No Vercel card work in this PR. See #49030 for the end state, as it may already include fixes you might propose. ## To test - **Project Settings → Integrations.** Check GitHub, Vercel, and PrivateLink icon alignment. - GitHub not connected: description should say **Connect GitHub to link a repository to this project.** Button should be tiny. - If GitHub has no repo (org page), the empty state should ask you to add a connection. - PrivateLink **Add connection** should show a plus. Click a connection row to view it. No kebab. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * AWS PrivateLink connections now display clearer titles, status, replica details, and database visibility. * GitHub organization integrations now provide improved empty states and clearer connection actions. * Added plus icons to connection buttons. * **Improvements** * Updated GitHub guidance based on authorization and repository selection status. * Standardized connection labels and refined integration page layouts. * Improved AWS integration icon presentation and responsive upgrade prompts. * **Bug Fixes** * Simplified default connection button wording across integrations. * Improved AWS account title fallback behavior when a nickname is unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
import { Admonition, type AdmonitionLayout } from 'ui-patterns/Admonition'
|
|
|
|
import { DocsButton } from './DocsButton'
|
|
import { UpgradePlanButton } from './UpgradePlanButton'
|
|
|
|
interface UpgradeToProProps {
|
|
icon?: ReactNode
|
|
primaryText: string
|
|
secondaryText: string
|
|
plan?: 'Pro' | 'Team' | 'Enterprise'
|
|
addon?: 'pitr' | 'customDomain' | 'ipv4' | 'spendCap' | 'computeSize'
|
|
/** Used in the default message template for request upgrade dialog, e.g: "Upgrade to ..." */
|
|
featureProposition?: string
|
|
/** As an override for the button text in both upgrade + request to upgrade scenario */
|
|
buttonText?: string
|
|
/** Where the upgrade interest is coming from */
|
|
source?: string
|
|
disabled?: boolean
|
|
fullWidth?: boolean
|
|
layout?: AdmonitionLayout
|
|
variant?: 'default' | 'primary'
|
|
className?: string
|
|
docsUrl?: string
|
|
}
|
|
|
|
export const UpgradeToPro = ({
|
|
icon,
|
|
primaryText,
|
|
secondaryText,
|
|
plan: planToUpgrade = 'Pro',
|
|
addon,
|
|
featureProposition,
|
|
buttonText,
|
|
source = 'upgrade',
|
|
disabled = false,
|
|
fullWidth = false,
|
|
layout = 'horizontal',
|
|
variant = 'primary',
|
|
className,
|
|
docsUrl,
|
|
}: UpgradeToProProps) => {
|
|
return (
|
|
<Admonition
|
|
type="default"
|
|
icon={icon}
|
|
layout={layout}
|
|
title={primaryText}
|
|
description={secondaryText}
|
|
className={cn(fullWidth && 'border-0 rounded-none border-b', className)}
|
|
actions={
|
|
<>
|
|
<UpgradePlanButton
|
|
plan={planToUpgrade}
|
|
addon={addon}
|
|
source={source}
|
|
featureProposition={featureProposition}
|
|
disabled={disabled}
|
|
variant={variant}
|
|
>
|
|
{buttonText}
|
|
</UpgradePlanButton>
|
|
{!!docsUrl && <DocsButton href={docsUrl} />}
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|