IntegrationsSettings.tsx69 lines · main
1import { Admonition } from 'ui-patterns'
2
3import { AWSPrivateLinkSection } from './AWSPrivateLink/AWSPrivateLinkSection'
4import { GitHubSection } from './GithubIntegration/GithubSection'
5import { VercelSection } from './VercelIntegration/VercelSection'
6import { SidePanelVercelProjectLinker } from '@/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker'
7import { ScaffoldContainer, ScaffoldDivider } from '@/components/layouts/Scaffold'
8import { InlineLink } from '@/components/ui/InlineLink'
9import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
10import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
11import { BASE_PATH } from '@/lib/constants'
12
13export const IntegrationImageHandler = ({ title }: { title: 'vercel' | 'github' | 'aws' }) => {
14 return (
15 <img
16 className="border rounded-lg shadow-sm w-full sm:w-48 mt-6 border-body"
17 src={`${BASE_PATH}/img/integrations/covers/${title}-cover.png`}
18 alt={`${title} cover`}
19 />
20 )
21}
22
23export const IntegrationSettings = () => {
24 const { data: project } = useSelectedProjectQuery()
25 const isBranch = project?.parent_project_ref !== undefined
26
27 const showVercelIntegration = useIsFeatureEnabled('integrations:vercel')
28 const showAWSPrivateLinkFeature = useIsFeatureEnabled('integrations:aws_private_link')
29 // PrivateLink is not available in eu-central-2 (Zurich) until Feb 2026
30 const isPrivateLinkUnsupportedRegion = project?.region === 'eu-central-2'
31 const showAWSPrivateLink = showAWSPrivateLinkFeature && !isPrivateLinkUnsupportedRegion
32
33 return (
34 <>
35 {isBranch && (
36 <ScaffoldContainer>
37 <Admonition
38 type="default"
39 className="mt-6"
40 title="You are currently on a preview branch of your project"
41 >
42 To adjust your project's integration settings, you may return to your{' '}
43 <InlineLink href={`/project/${project.parent_project_ref}/settings/integrations`}>
44 main branch
45 </InlineLink>
46 .
47 </Admonition>
48 </ScaffoldContainer>
49 )}
50
51 <GitHubSection />
52
53 {showVercelIntegration && (
54 <>
55 <ScaffoldDivider />
56 <VercelSection isProjectScoped={true} />
57 <SidePanelVercelProjectLinker />
58 </>
59 )}
60
61 {showAWSPrivateLink && (
62 <>
63 <ScaffoldDivider />
64 <AWSPrivateLinkSection />
65 </>
66 )}
67 </>
68 )
69}