Files
supabase/apps/studio/components/interfaces/ProjectHome/ConnectSection.config.tsx
Pamela Chia edacf2413d chore(studio): ship connect section, remove getting started and experiment plumbing (#44329)
## Summary

The `connectSection` A/B experiment concluded as a true null (no effect
on activation or any downstream metric after 13 days at 50/50, ~153K
mature orgs). Saxon decided to ship the Connect section as the permanent
experience. This PR removes the Getting Started control variant, the old
Connect modal, all experiment flag gating, and related telemetry types.

## Changes

- Delete `GettingStarted/` directory (5 files: section component, types,
utils, progress hook)
- Delete old `Connect.tsx` dialog modal (replaced by ConnectSheet)
- Remove `connectSection` PostHog flag reads from `Home.tsx` and
`LayoutHeader.tsx`
- Remove `getSectionVisibility()` experiment logic and
`ConnectSectionVariant` type
- Remove `getting-started` from `DEFAULT_SECTION_ORDER`
- Always render `<ConnectSheet />` in header (no more conditional with
old `<Connect />` modal)
- Remove `variant` prop from `ConnectSection` component
- Remove 4 getting-started telemetry event interfaces from
`telemetry-constants.ts`
- Update `mergeSectionOrder` tests to reflect new section order

## Testing

Tested on Vercel preview:
- [x] Project homepage shows Connect section for new projects (< 10 days
old)
- [x] Connect section hidden for mature projects (> 10 days old)
- [x] Header Connect button opens ConnectSheet (not old modal)
- [x] Connect tiles open ConnectSheet with correct tab
- [x] Section drag-and-drop still works without getting-started in the
order
- [x] Existing users with `getting-started` in localStorage order don't
break (mergeSectionOrder strips it)

## Linear

- fixes GROWTH-730

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2026-03-30 20:51:09 +08:00

54 lines
1.2 KiB
TypeScript

import { Box, Cable, Database, KeyRound, Sparkles } from 'lucide-react'
import type { ReactNode } from 'react'
import type { ConnectMode } from '../ConnectSheet/Connect.types'
export type ConnectAction = {
id: ConnectMode | 'api_keys'
heading: string
subheading: string
icon: ReactNode
mode?: ConnectMode
href?: string
requiresActiveProject?: boolean
}
export const CONNECT_ACTIONS: ConnectAction[] = [
{
id: 'framework',
mode: 'framework',
heading: 'Framework',
subheading: 'Use a client library',
icon: <Box size={16} strokeWidth={1.5} />,
},
{
id: 'direct',
mode: 'direct',
heading: 'Direct',
subheading: 'Connection string',
icon: <Database size={16} strokeWidth={1.5} />,
},
{
id: 'orm',
mode: 'orm',
heading: 'ORM',
subheading: 'Third-party library',
icon: <Cable size={16} strokeWidth={1.5} />,
},
{
id: 'mcp',
mode: 'mcp',
heading: 'MCP',
subheading: 'Connect your agent',
icon: <Sparkles size={16} strokeWidth={1.5} />,
},
{
id: 'api_keys',
heading: 'API Keys',
subheading: 'Manage project keys',
icon: <KeyRound size={16} strokeWidth={1.5} />,
href: '/project/[ref]/settings/api-keys',
requiresActiveProject: false,
},
]