mirror of
https://github.com/supabase/supabase.git
synced 2026-07-31 19:54:55 -04:00
## What kind of change does this PR introduce? UI bug fix. Resolves FE-3617. ## What is the current behavior? On `/org/[slug]/integrations`, the Vercel section renders full-width and the page uses a mixed layout: GitHub still uses the old Scaffold two-column pattern while `VercelSection` was migrated to `PageSection` without a page container in #46868. ## What is the new behavior? - Migrates `/org/[slug]/integrations` to `PageHeader` + `PageContainer size="small"` + `PageSection`, matching project settings integrations - Puts the Vercel "Install Vercel Integration" CTA in the same dashed card pattern as "Add new project connection" (org + project) - Consolidates GitHub into a shared `GitHubSection` with `isProjectScoped`, mirroring `VercelSection` | Before | After | | --- | --- | | <img width="1728" height="997" alt="Integrations Peels Org Supabase-BEB84402-99AA-4EF2-8B8F-3CAE98FEA33D" src="https://github.com/user-attachments/assets/f52741d5-9c31-4707-a10f-c613e0b80bf4" /> | <img width="1728" height="997" alt="Integrations Freebie Supabase-975CF6FD-135B-4E84-AD0B-B47CD8F2AC73" src="https://github.com/user-attachments/assets/1d665601-a38e-4e6b-b205-fde99efa2237" /> | ## To test - [x] `/org/{slug}/integrations`: GitHub and Vercel sections contained, vertically stacked - [x] Vercel connection tree connectors render correctly when integration is installed - [x] `/project/{ref}/settings/integrations`: no regression - [x] Org keyboard shortcut for add connection still works --------- Co-authored-by: Cursor <[email protected]>
21 lines
730 B
TypeScript
21 lines
730 B
TypeScript
import { SidePanelVercelProjectLinker } from './SidePanelVercelProjectLinker'
|
|
import { GitHubSection } from '@/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection'
|
|
import { VercelSection } from '@/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
|
|
export const IntegrationSettings = () => {
|
|
const showVercelIntegration = useIsFeatureEnabled('integrations:vercel')
|
|
|
|
return (
|
|
<>
|
|
<GitHubSection isProjectScoped={false} />
|
|
{showVercelIntegration && (
|
|
<>
|
|
<VercelSection isProjectScoped={false} />
|
|
<SidePanelVercelProjectLinker />
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|