mirror of
https://github.com/supabase/supabase.git
synced 2026-06-15 08:05:21 +08:00
e92f13f11a
<img width="1521" height="967" alt="image" src="https://github.com/user-attachments/assets/8d7bed1f-3ed8-4311-bd4b-92345ae02a52" /> Updates project settings integration page to more aligned with our updated layout guidance (as defined in layout.mdx in design system). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined the integrations settings page layout and visual design across AWS PrivateLink, GitHub, and Vercel integration sections for improved consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
95 lines
6.0 KiB
TypeScript
95 lines
6.0 KiB
TypeScript
import { Card } from 'ui'
|
|
import { Admonition } from 'ui-patterns'
|
|
|
|
import { AWSPrivateLinkSection } from './AWSPrivateLink/AWSPrivateLinkSection'
|
|
import { GitHubSection } from './GithubIntegration/GithubSection'
|
|
import { VercelSection } from './VercelIntegration/VercelSection'
|
|
import { SidePanelVercelProjectLinker } from '@/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker'
|
|
import { InlineLink } from '@/components/ui/InlineLink'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
export const IntegrationImageHandler = ({ title }: { title: 'vercel' | 'github' | 'aws' }) => {
|
|
return (
|
|
<img
|
|
className="border rounded-lg shadow-sm w-full sm:w-48 border-body"
|
|
src={`${BASE_PATH}/img/integrations/covers/${title}-cover.png`}
|
|
alt={`${title} cover`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const INTEGRATION_ICONS: Record<
|
|
'vercel' | 'github' | 'aws',
|
|
(className: string) => React.ReactNode
|
|
> = {
|
|
github: (className) => (
|
|
<svg className={className} viewBox="0 0 32.58 31.77" fill="currentColor" aria-hidden>
|
|
<path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z" />
|
|
</svg>
|
|
),
|
|
vercel: (className) => (
|
|
<svg className={className} viewBox="0 0 512 512" fill="currentColor" aria-hidden>
|
|
<path fillRule="evenodd" d="M256,48,496,464H16Z" />
|
|
</svg>
|
|
),
|
|
aws: (className) => (
|
|
<svg className={className} viewBox="0 0 304 182" fill="currentColor" aria-hidden>
|
|
<path d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9Q59.2 94.7 41.5 94.7c-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1Q28.75 5 36.1 3.2C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7m80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3q-.9 3-2.1 3.9c-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1s-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1q.9 0 1.8.3c.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5q0-6.3 2.7-11.1c1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6q2.7.9 4.2 1.8c1.4.8 2.4 1.6 3 2.5q.9 1.2.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2q-8.55-3.9-19.2-3.9c-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1" />
|
|
<path d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6" />
|
|
<path d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5" />
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
export const IntegrationSectionIcon = ({ title }: { title: 'vercel' | 'github' | 'aws' }) => {
|
|
return (
|
|
<div className="shrink-0 text-foreground-light">
|
|
<Card className="flex h-14 w-14 shrink-0 items-center justify-center p-0">
|
|
{INTEGRATION_ICONS[title]('h-5 w-5')}
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const IntegrationSettings = () => {
|
|
const { data: project } = useSelectedProjectQuery()
|
|
const isBranch = project?.parent_project_ref !== undefined
|
|
|
|
const showVercelIntegration = useIsFeatureEnabled('integrations:vercel')
|
|
const showAWSPrivateLinkFeature = useIsFeatureEnabled('integrations:aws_private_link')
|
|
// PrivateLink is not available in eu-central-2 (Zurich) until Feb 2026
|
|
const isPrivateLinkUnsupportedRegion = project?.region === 'eu-central-2'
|
|
const showAWSPrivateLink = showAWSPrivateLinkFeature && !isPrivateLinkUnsupportedRegion
|
|
|
|
return (
|
|
<>
|
|
{isBranch && (
|
|
<Admonition
|
|
type="default"
|
|
className="mb-6"
|
|
title="You are currently on a preview branch of your project"
|
|
>
|
|
To adjust your project's integration settings, you may return to your{' '}
|
|
<InlineLink href={`/project/${project.parent_project_ref}/settings/integrations`}>
|
|
main branch
|
|
</InlineLink>
|
|
.
|
|
</Admonition>
|
|
)}
|
|
|
|
<GitHubSection />
|
|
|
|
{showVercelIntegration && (
|
|
<>
|
|
<VercelSection isProjectScoped={true} />
|
|
<SidePanelVercelProjectLinker />
|
|
</>
|
|
)}
|
|
|
|
{showAWSPrivateLink && <AWSPrivateLinkSection />}
|
|
</>
|
|
)
|
|
}
|