mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
## What kind of change does this PR introduce? UI polish for the Connect sheet: clearer mode selection, wider sheet layout, and step/content chrome across Direct, Server, MCP, and shadcn flows. ## What is the current behavior? - Connect modes use a weak selected state and an awkward grid layout. - The sheet can jump width below the `lg` breakpoint when switching modes. - Direct connection chrome is noisy (reset in a footer, Title Case / mono pooler labels, mismatched copy-button sizes). - Several steps use admonitions or extra tips that repeat footer guidance. - Case-sensitive import of `InlineLink` breaks Linux/Vercel builds. ## What is the new behavior? ### Mode selector and sheet - Stronger selected/hover treatment; comfortable single row that wraps via `@container`. - Empty odd slots use a sunk placeholder cell. - Sheet uses `size="lg"` with `max-w-4xl` and `w-full min-w-0` so width stays stable when switching modes. ### Steps chrome - “Follow these steps” header with a copy-prompt action for coding agents. - Optional steps labelled `(optional)`. - Shared `CodeBlock` for install snippets; MCP feature groups preselect all except Storage. - Server / shadcn tips folded into footers; IPv4 add-on admonition is responsive with an inline Learn more link and a single Enable action. ### Direct connection - Connection string and connection parameters stay one step (same credentials, two formats). - Reset database password lives in the string card title row beside Shared/Dedicated pooler. - Card titles use sans + sentence case (`Shared pooler`, `Connection parameters`); `.env` stays mono. - Icon-only copy buttons match CodeBlock square sizing; row actions sit slightly closer to the right edge (`pr-2`). - Shared pooler toggle copy clarified. | Before | After | | --- | --- | | <img width="390" height="763" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/adca3cc5-94f8-47e5-a4a2-2831790f430a" /> | <img width="390" height="763" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/f03afe58-e654-435e-a821-835f6243ca95" /> | | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/79f08620-7e1e-4246-a70f-801606c0f499" /> | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/fb45e851-955e-46c2-90f1-afecb93d6ac4" /> | | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/eda36d21-bba7-46ab-ad48-134acf93b471" /> | <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/b7b728c6-fc92-46a7-8e3f-2f182c56ece7" /> | ### Test plan - [ ] Open **Connect** and confirm mode cells select/hover clearly; narrow the sheet and confirm wrap + stable width. - [ ] Direct: switch Direct / Transaction / Session; confirm pooler title, reset in title row, parameters table, and percent-encode note. - [ ] Toggle IPv4 shared pooler on Transaction; confirm string updates and admonition/Learn more behaviour when on IPv4-only paths. - [ ] Server: `.env` Copy all / row copy sizing; install command copy. - [ ] MCP / shadcn / Framework: steps still resolve and copy prompt still builds a useful agent prompt. - [ ] Spot-check light/dark and a Linux/Vercel build (InlineLink import casing).
150 lines
3.3 KiB
TypeScript
150 lines
3.3 KiB
TypeScript
export type Example = {
|
|
installCommands?: 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',
|
|
],
|
|
},
|
|
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
|