console: redesign connect modal as MCP-first connect drawer

[leedqin]

Motivation

Implements the Improved Connect Modal Linear project (CNS-124, with CNS-125, CNS-126, CNS-127, CNS-128, CNS-129): make it easier for customers to get connection instructions through the console. Follows the design prototype at https://connect-modal-eight.vercel.app/.

What changes

The connect modal becomes a right-side drawer ("Connect to Materialize") with three method tabs:

• MCP Server (default): numbered steps to pick a server (Developer for troubleshooting and observability, Agent for querying data products), connect a client, and optionally install agent skills. The client dropdown covers Claude Code, Cursor, Claude Desktop, VS Code, Windsurf, Codex CLI, and a generic option, each generating the right config format (CLI command, mcpServers JSON with the config file path, or TOML for Codex). Cursor and VS Code additionally get one-click install buttons via their cursor:// and vscode:mcp/install URL handlers. OAuth is the default flow where the environment supports it (existing 26.30.0 gate), with a "Use a token instead" toggle that injects a Basic auth header into the snippets. Install links are only generated for the OAuth flow so tokens never end up in URLs.
• External tools: copyable Host, Port, Database, and User rows plus an inline create-app-password flow (name it, create it, copy it once). The created password is substituted into the DBeaver, dbt, and .env snippets below.
• Terminal: the psql one-liner, preserving the existing user encoding, sslmode, and cluster option behavior.

The three previous modal variants (cloud ConnectModal, OidcConnectModal, PasswordConnectModal) and the unreferenced McpConnectModal are deleted and replaced by one ConnectDrawer driven by appConfig.mode, OIDC availability, and the environment gate. Self-managed OIDC surfaces the ID token as the password. Pure snippet and deep link builders live in connectOptions.ts.

The App Passwords page per-row Connect button opens the same drawer pinned to the service account user, with password creation hidden.

Deviations from the design mock

• Snippets derive SSL from the deployment (cloud requires it, self-managed follows environmentdScheme) instead of hardcoding require.
• The cloud token flow keeps the existing base64 app-password command and service account guidance from the old MCP instructions.
• Self-managed OIDC gets an ID token password row, which the mock did not model.
• The old modal's intro sentence with docs and support links is dropped per the design. Shout if it should come back.

Testing

• New unit tests for all snippet builders and deep links (connectOptions.test.ts) and for drawer behavior across tabs, client switching, server switching, and app password creation with MSW (ConnectDrawer.test.tsx).
• The dormant e2e helper connectRegionPostgres keeps working: the connect-menu-button test id, the "External tools" button name, and the Host, Port, and Database aria-labels are all preserved.

🤖 Generated with Claude Code