refactor: extract shared MCP authorizer dialog chrome into authorizerUi.tsx

[Pratham-Mishra04]

Summary

Extracts the shared visual building blocks used across the MCP client authorization dialogs (OAuth2Authorizer, MCPHeadersAuthorizer, and the token-exchange "Re-verify as me" dialog) into a single authorizerUi.tsx module. Previously, OAuth2Authorizer had its own inline IconWrap, InfoBox, and StepDots components, while MCPHeadersAuthorizer used a divergent ad-hoc layout. This consolidation ensures all three flows share the same dialog chrome and prevents them from drifting apart visually over time.

Changes

• Added authorizerUi.tsx exporting IconWrap, InfoBox, StepDots, and the UiVariant type, covering all tint variants (muted, info, success, danger, warning).
• Removed the duplicate inline implementations of IconWrap, InfoBox, and StepDots from oauth2Authorizer.tsx and replaced them with imports from authorizerUi.tsx. The STATUS_ICON map now drives icon and variant selection declaratively instead of via a switch-style component.
• Rebuilt MCPHeadersAuthorizer's dialog layout to match the bordered icon-header + InfoBox body structure used by OAuth2Authorizer, including a STATUS_ICON map, titles/subtitles records, and a proper failed-state retry footer with a Close button alongside Retry.
• Removed the auto-open popup behavior for non-per-user OAuth flows. Both auth types now start on the confirm step and only open the popup from a direct user click, avoiding silent popup-blocking when window.open() is called outside a user-activation context.
• The token-exchange dialog in mcpClientsTable.tsx now stays open with a spinner while the verify call is in flight, rather than closing immediately on "Continue" and leaving no visible feedback until the toast arrives. The cancel and confirm buttons are disabled during the in-flight state, and the actions menu button is also disabled while a verify is pending.
• Token-exchange rows in the per-user-auth state that previously rendered null now render a - placeholder, consistent with other empty cells in the table.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

1. Open an MCP server configured with shared OAuth and trigger the authorization dialog — confirm the icon header, info box, and step dots render correctly across the confirm → polling → success/failed states.
2. Open an MCP server configured with per-user OAuth and walk through the same flow.
3. Open an MCP server configured with per-user headers and walk through confirm → input → testing → success and confirm → input → testing → failed (with retry).
4. Trigger the token-exchange "Re-verify as me" dialog, click Continue, and verify the dialog remains open with a spinner until the backend call resolves before closing.
5. Verify the cancel and confirm buttons are non-interactive while the verify call is in flight.

cd ui
pnpm i || npm i
pnpm build || npm run build

Breaking changes

• Yes
• No

Related issues

Security considerations

No new auth paths introduced. The popup-blocking fix ensures window.open() is only called from a direct user gesture, which is the correct browser security model for OAuth popups.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx`:
- Around line 670-695: Update the DialogContent usage in the exchange
verification dialog to set showCloseButton to false whenever
exchangeVerifyClient.config.client_id is included in verifyingExchangeClients,
while preserving the close button when verification is inactive.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 4b35009a-657e-4973-a9cc-29ad81d4651f

📥 Commits

Reviewing files that changed from the base of the PR and between 8bba70c and 7a8136b.

📒 Files selected for processing (4)

• ui/app/workspace/mcp-registry/views/authorizerUi.tsx
• ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx
• ui/app/workspace/mcp-registry/views/mcpHeadersAuthorizer.tsx
• ui/app/workspace/mcp-registry/views/oauth2Authorizer.tsx

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[Pratham-Mishra04]

Merge activity

• Aug 8, 10:33 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Aug 8, 10:53 AM UTC: Graphite rebased this pull request as part of a merge.
• Aug 8, 10:54 AM UTC: @Pratham-Mishra04 merged this pull request with Graphite.

The base branch was changed.