Files
supabase/apps/studio/components/interfaces/ConnectSheet/DirectConnectionExamples.tsx
Saxon Fletcher b9a09d8612 Connect sheet content structure (#42373)
This is part two of a [PR
breakdown](https://github.com/supabase/supabase/pull/42276) that
introduces our connect schema and how content is retrieved. This focuses
on the Framework tab to start.

Fields are generated and content is rendered using a connect.schema
file. This schema file defines modes, fields and steps. Each mode has a
set of fields. Each field can be dependent on another field. The steps
generated are then based off the values of the modes and fields. Each
step can also render varying content dynamically using a template
{{framework}}/{{frameworkVariant}}/{{library}} which just replaces those
values with what's in state (fields selected).

[Part one needs to be merged
first.](https://github.com/supabase/supabase/pull/42367)

The next stage will add back all other tabs and content.

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

* **New Features**
* New Connect Sheet UI to guide app-to-project connections with dynamic
configuration and copyable connection parameters.
* Multi-framework & mobile support with ready-to-use code examples,
install commands, and step-by-step setup for 20+ frameworks.
* Multiple PostgreSQL connection methods (direct, transaction, session)
with safe/masked connection previews.
  * Copy-prompt that aggregates step content and code for easy sharing.
* **UI**
* Multi-file code viewer with tabbed code blocks and added syntax
support (Swift, TOML, HTML).
* **Tests**
  * Comprehensive unit tests for resolver and state logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-11 13:32:45 +08:00

154 lines
3.5 KiB
TypeScript

export type Example = {
installCommands?: string[]
postInstallCommands?: string[]
files?: {
name: string
content: string
}[]
}
const examples = {
nodejs: {
installCommands: ['npm install postgres'],
files: [
{
name: 'db.js',
content: `import postgres from 'postgres'
const connectionString = process.env.DATABASE_URL
const sql = postgres(connectionString)
export default sql`,
},
],
},
golang: {
installCommands: ['go get github.com/jackc/pgx/v5'],
files: [
{
name: 'main.go',
content: `package main
import (
"context"
"log"
"os"
"github.com/jackc/pgx/v5"
)
func main() {
conn, err := pgx.Connect(context.Background(), os.Getenv("DATABASE_URL"))
if err != nil {
log.Fatalf("Failed to connect to the database: %v", err)
}
defer conn.Close(context.Background())
// Example query to test connection
var version string
if err := conn.QueryRow(context.Background(), "SELECT version()").Scan(&version); err != nil {
log.Fatalf("Query failed: %v", err)
}
log.Println("Connected to:", version)
}`,
},
],
},
dotnet: {
installCommands: [
'dotnet add package Microsoft.Extensions.Configuration.Json --version YOUR_DOTNET_VERSION',
],
postInstallCommands: [
'dotnet add package Microsoft.Extensions.Configuration.Json --version YOUR_DOTNET_VERSION',
],
},
python: {
installCommands: ['pip install python-dotenv psycopg2'],
files: [
{
name: 'main.py',
content: `import psycopg2
from dotenv import load_dotenv
import os
# Load environment variables from .env
load_dotenv()
# Fetch variables
USER = os.getenv("user")
PASSWORD = os.getenv("password")
HOST = os.getenv("host")
PORT = os.getenv("port")
DBNAME = os.getenv("dbname")
# Connect to the database
try:
connection = psycopg2.connect(
user=USER,
password=PASSWORD,
host=HOST,
port=PORT,
dbname=DBNAME
)
print("Connection successful!")
# Create a cursor to execute SQL queries
cursor = connection.cursor()
# Example query
cursor.execute("SELECT NOW();")
result = cursor.fetchone()
print("Current Time:", result)
# Close the cursor and connection
cursor.close()
connection.close()
print("Connection closed.")
except Exception as e:
print(f"Failed to connect: {e}")`,
},
],
},
sqlalchemy: {
installCommands: ['pip install python-dotenv sqlalchemy psycopg2'],
files: [
{
name: 'main.py',
content: `from sqlalchemy import create_engine
# from sqlalchemy.pool import NullPool
from dotenv import load_dotenv
import os
# Load environment variables from .env
load_dotenv()
# Fetch variables
USER = os.getenv("user")
PASSWORD = os.getenv("password")
HOST = os.getenv("host")
PORT = os.getenv("port")
DBNAME = os.getenv("dbname")
# Construct the SQLAlchemy connection string
DATABASE_URL = f"postgresql+psycopg2://{USER}:{PASSWORD}@{HOST}:{PORT}/{DBNAME}?sslmode=require"
# Create the SQLAlchemy engine
engine = create_engine(DATABASE_URL)
# If using Transaction Pooler or Session Pooler, we want to ensure we disable SQLAlchemy client side pooling -
# https://docs.sqlalchemy.org/en/20/core/pooling.html#switching-pool-implementations
# engine = create_engine(DATABASE_URL, poolclass=NullPool)
# Test the connection
try:
with engine.connect() as connection:
print("Connection successful!")
except Exception as e:
print(f"Failed to connect: {e}")`,
},
],
},
}
export default examples