Files
Saxon FletcherandJoshen Lim 0d761b0434 Connect sheet final content (#42374)
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>

This is the third and final PR to complete the new connect sheet. 

First: https://github.com/supabase/supabase/pull/42367

Second: https://github.com/supabase/supabase/pull/42373

This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.

To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs

* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates

* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors

* **Chores**
  * ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 22:14:18 +08:00

63 lines
2.1 KiB
TypeScript

import { IS_PLATFORM } from 'lib/constants'
import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
const ContentFile = ({ connectionStringPooler }: StepContentProps) => {
const files = [
{
name: '.env.local',
language: 'bash',
code:
connectionStringPooler.ipv4SupportedForDedicatedPooler &&
connectionStringPooler.transactionDedicated
? `
# Connect to Supabase via connection pooling.
DATABASE_URL="${connectionStringPooler.transactionDedicated}?pgbouncer=true"
# Direct connection to the database. Used for migrations.
DIRECT_URL="${connectionStringPooler.sessionDedicated}"
`
: connectionStringPooler.transactionDedicated &&
!connectionStringPooler.ipv4SupportedForDedicatedPooler
? `
# Connect to Supabase via Shared Connection Pooler
DATABASE_URL="${connectionStringPooler.transactionShared}?pgbouncer=true"
# Direct connection to the database through Shared Pooler (supports IPv4/IPv6). Used for migrations.
DIRECT_URL="${connectionStringPooler.sessionShared}"
# If your network supports IPv6 or you purchased IPv4 addon, use dedicated pooler
# DATABASE_URL="${connectionStringPooler.transactionDedicated}?pgbouncer=true"
# DIRECT_URL="${connectionStringPooler.sessionDedicated}"
`
: `
# Connect to Supabase ${IS_PLATFORM ? 'via connection pooling' : ''}
DATABASE_URL="${IS_PLATFORM ? `${connectionStringPooler.transactionShared}?pgbouncer=true` : connectionStringPooler.direct}"
# Direct connection to the database. Used for migrations
DIRECT_URL="${IS_PLATFORM ? connectionStringPooler.sessionShared : connectionStringPooler.direct}"
`,
},
{
name: 'prisma/schema.prisma',
language: 'bash',
code: `
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
directUrl = env("DIRECT_URL")
}
`,
},
]
return <MultipleCodeBlock files={files} />
}
export default ContentFile