IntegrationsSettings.tsx69 lines · main
| 1 | import { Admonition } from 'ui-patterns' |
| 2 | |
| 3 | import { AWSPrivateLinkSection } from './AWSPrivateLink/AWSPrivateLinkSection' |
| 4 | import { GitHubSection } from './GithubIntegration/GithubSection' |
| 5 | import { VercelSection } from './VercelIntegration/VercelSection' |
| 6 | import { SidePanelVercelProjectLinker } from '@/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker' |
| 7 | import { ScaffoldContainer, ScaffoldDivider } from '@/components/layouts/Scaffold' |
| 8 | import { InlineLink } from '@/components/ui/InlineLink' |
| 9 | import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' |
| 10 | import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' |
| 11 | import { BASE_PATH } from '@/lib/constants' |
| 12 | |
| 13 | export 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 | |
| 23 | export 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 | } |