console: redesign connect modal as MCP-first connect drawer - #38163
Closed
leedqin wants to merge 3 commits into
Closed
console: redesign connect modal as MCP-first connect drawer#38163leedqin wants to merge 3 commits into
leedqin wants to merge 3 commits into
Conversation
Replaces the connect modal with a side drawer implementing the new connect designs (Linear: Improved Connect Modal, CNS-124). The drawer has three method tabs: MCP Server (default), External tools, and Terminal. The MCP tab walks through choosing the Developer or Agent server, connecting a client (Claude Code, Cursor, Claude Desktop, VS Code, Windsurf, Codex CLI, or other) with per-client config snippets and one-click install deep links for Cursor and VS Code, and installing agent skills. The External tools tab shows copyable connection details with inline app password creation and DBeaver, dbt, and .env snippets. The Terminal tab shows the psql command. The three previous modal variants (cloud, self-managed OIDC, self-managed password) and the unused McpConnectModal are replaced by one ConnectDrawer driven by appConfig.mode, OIDC availability, and the existing 26.30.0 OAuth environment gate. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Restructures the MCP tab into one step per concern: choose server, select client, acquire a credential (token flow only), then the client-specific install step titled by where the config goes. The generated app password is substituted into the command directly, shown masked, instead of a separate copy box. Removes the service account note and the agent access scoping note. The OAuth sign-in hint is now client-specific, one sentence per client in the registry. External tools: connection detail boxes no longer overflow the drawer width, the create button reads Create new password, the name input starts empty with a placeholder and helper text so it reads as naming rather than entering a password, and created passwords render masked in the tool snippets while copying the real value. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
leedqin
force-pushed
the
connect-modal-redesign
branch
from
August 17, 2026 17:23
68ac230 to
42a3abc
Compare
Verifies each client's remote MCP config schema against its docs and fixes the generated snippets. VS Code roots at "servers" with an explicit "type": "http", otherwise it treats the entry as a stdio command. Windsurf uses "serverUrl". Claude Desktop's config file only launches local stdio servers, so the OAuth flow now shows the server URL to add as a custom connector under Settings > Connectors, and the token flow proxies through mcp-remote. The Codex sign-in hint now names the actual command, codex mcp login <server>.
Contributor
Author
|
Superseded by #38257 (same branch, moved to a fork head). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
mcpServersJSON with the config file path, or TOML for Codex). Cursor and VS Code additionally get one-click install buttons via theircursor://andvscode:mcp/installURL 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.The three previous modal variants (cloud
ConnectModal,OidcConnectModal,PasswordConnectModal) and the unreferencedMcpConnectModalare deleted and replaced by oneConnectDrawerdriven byappConfig.mode, OIDC availability, and the environment gate. Self-managed OIDC surfaces the ID token as the password. Pure snippet and deep link builders live inconnectOptions.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
environmentdScheme) instead of hardcodingrequire.Testing
connectOptions.test.ts) and for drawer behavior across tabs, client switching, server switching, and app password creation with MSW (ConnectDrawer.test.tsx).connectRegionPostgreskeeps working: theconnect-menu-buttontest id, the "External tools" button name, and the Host, Port, and Database aria-labels are all preserved.🤖 Generated with Claude Code