Files
Ali Waseem cedc4c8187 feat: Add Server lib to connect w/ ability to copy env (#47056)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Introduced a new library called Superbase/Server. To help developers
using third party API frameworks, we want to make it easier than ever to
install and use as needed.
- One click copy
- Custom prompt to get started
- Validated API key permissions to ensure we don't leak secrets to other
users in your org/project

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

## New Features
- Added a **Server** connection mode end-to-end, including mode-specific
prompting and steps for installing **`@supabase/server`** and setting
required variables.
- Added a server **.env** panel with per-variable copy, **“Copy all
variables”**, and permission-aware secret reveal/copy.

## Improvements
- Updated connection UI layouts (mode selector grid and conditional
config section).
- Improved prompt copying to use mode-specific prompt text when
available.

## Tests
- Added UI tests for server env rendering, secret reveal/copy,
**copy-all** behavior, and permission-restricted scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-18 08:41:11 -06:00

61 lines
1.4 KiB
TypeScript

import { Box, Cable, Database, KeyRound, Server, 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: 'server',
mode: 'server',
heading: 'Server',
subheading: 'Build APIs',
icon: <Server 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,
},
]