Skip to content

Commit 8404e74

Browse files
celestial-vaultcelestial-vault
authored
Reorganize Webview MCP Directory Structure (RooCodeInc#2658)
* reorganize directory structure * rename back files to make diff more readable * rename back because it didn't help * rename index files to their component names * fix addLocalServerForm imports
1 parent 9d5772c commit 8404e74

File tree

18 files changed

+250
-272
lines changed

18 files changed

+250
-272
lines changed

‎webview-ui/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import AccountView from "./components/account/AccountView"
99
import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
1010
import { FirebaseAuthProvider } from "./context/FirebaseAuthContext"
1111
import { vscode } from "./utils/vscode"
12-
import McpView from "./components/mcp/McpView"
12+
import McpView from "./components/mcp/configuration/McpConfigurationView"
1313

1414
const AppContent = () => {
1515
const { didHydrateState, showWelcome, shouldShowAnnouncement, telemetrySetting, vscMachineId } = useExtensionState()

‎webview-ui/src/components/account/CreditsHistoryTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { VSCodeDataGrid, VSCodeDataGridRow, VSCodeDataGridCell } from "@vscode/webview-ui-toolkit/react"
22
import { useState } from "react"
3-
import { TabButton } from "../mcp/McpView"
3+
import { TabButton } from "../mcp/configuration/McpConfigurationView"
44
import { UsageTransaction, PaymentTransaction } from "../../../../src/shared/ClineAccount"
55
import { formatDollars, formatTimestamp } from "../../utils/format"
66

‎webview-ui/src/components/chat/ChatRow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ import CodeAccordian, { cleanPathPrefix } from "../common/CodeAccordian"
2323
import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
2424
import MarkdownBlock from "../common/MarkdownBlock"
2525
import Thumbnails from "../common/Thumbnails"
26-
import McpResourceRow from "../mcp/McpResourceRow"
27-
import McpToolRow from "../mcp/McpToolRow"
28-
import McpResponseDisplay from "../mcp/McpResponseDisplay"
26+
import McpToolRow from "../mcp/configuration/tabs/installed/server-row/McpToolRow"
27+
import McpResponseDisplay from "../mcp/chat-display/McpResponseDisplay"
2928
import CreditLimitError from "./CreditLimitError"
3029
import { OptionsButtons } from "./OptionsButtons"
3130
import { highlightMentions } from "./TaskHeader"
3231
import SuccessButton from "../common/SuccessButton"
3332
import TaskFeedbackButtons from "./TaskFeedbackButtons"
33+
import McpResourceRow from "../mcp/configuration/tabs/installed/server-row/McpResourceRow"
3434

3535
const ChatRowContainer = styled.div`
3636
padding: 10px 6px 10px 15px;

‎webview-ui/src/components/mcp/ImagePreview.tsx‎ renamed to ‎webview-ui/src/components/mcp/chat-display/ImagePreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useEffect, useRef } from "react"
2-
import { vscode } from "../../utils/vscode"
1+
import React from "react"
2+
import { vscode } from "../../../utils/vscode"
33
import DOMPurify from "dompurify"
4-
import { getSafeHostname, formatUrlForOpening, checkIfImageUrl } from "./McpRichUtil"
5-
import ChatErrorBoundary from "../chat/ChatErrorBoundary"
4+
import { getSafeHostname, formatUrlForOpening, checkIfImageUrl } from "./utils/mcpRichUtil"
5+
import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
66

77
interface ImagePreviewProps {
88
url: string

‎webview-ui/src/components/mcp/LinkPreview.tsx‎ renamed to ‎webview-ui/src/components/mcp/chat-display/LinkPreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useEffect, useState } from "react"
2-
import { vscode } from "../../utils/vscode"
1+
import React from "react"
2+
import { vscode } from "../../../utils/vscode"
33
import DOMPurify from "dompurify"
4-
import { getSafeHostname, normalizeRelativeUrl } from "./McpRichUtil"
5-
import ChatErrorBoundary from "../chat/ChatErrorBoundary"
4+
import { getSafeHostname, normalizeRelativeUrl } from "./utils/mcpRichUtil"
5+
import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
66

77
interface OpenGraphData {
88
title?: string

‎webview-ui/src/components/mcp/McpResponseDisplay.tsx‎ renamed to ‎webview-ui/src/components/mcp/chat-display/McpResponseDisplay.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
import React, { useEffect, useState, useCallback } from "react"
22
import LinkPreview from "./LinkPreview"
33
import ImagePreview from "./ImagePreview"
4-
import { vscode } from "../../utils/vscode"
5-
import DOMPurify from "dompurify"
64
import styled from "styled-components"
7-
import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
8-
import ChatErrorBoundary from "../chat/ChatErrorBoundary"
9-
import {
10-
safeCreateUrl,
11-
isUrl,
12-
getSafeHostname,
13-
isLocalhostUrl,
14-
normalizeRelativeUrl,
15-
formatUrlForOpening,
16-
checkIfImageUrl,
17-
} from "./McpRichUtil"
5+
import { CODE_BLOCK_BG_COLOR } from "../../common/CodeBlock"
6+
import ChatErrorBoundary from "../../chat/ChatErrorBoundary"
7+
import { isUrl, isLocalhostUrl, formatUrlForOpening, checkIfImageUrl } from "./utils/mcpRichUtil"
188

199
// Maximum number of URLs to process in total, per response
2010
export const MAX_URLS = 50

‎webview-ui/src/components/mcp/McpRichUtil.ts‎ renamed to ‎webview-ui/src/components/mcp/chat-display/utils/mcpRichUtil.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { vscode } from "../../utils/vscode"
1+
import { vscode } from "../../../../utils/vscode"
22

33
// Safely create a URL object with error handling and ensure HTTPS
44
export const safeCreateUrl = (url: string): URL | null => {

‎webview-ui/src/components/mcp/configuration/McpConfigurationView.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
2+
import { useEffect, useState } from "react"
3+
import styled from "styled-components"
4+
import { useExtensionState } from "../../../context/ExtensionStateContext"
5+
import { vscode } from "../../../utils/vscode"
6+
import AddRemoteServerForm from "./tabs/add-server/AddRemoteServerForm"
7+
import McpMarketplaceView from "./tabs/marketplace/McpMarketplaceView"
8+
import InstalledServersView from "./tabs/installed/InstalledServersView"
9+
10+
type McpViewProps = {
11+
onDone: () => void
12+
}
13+
14+
const McpConfigurationView = ({ onDone }: McpViewProps) => {
15+
const { mcpMarketplaceEnabled } = useExtensionState()
16+
const [activeTab, setActiveTab] = useState(mcpMarketplaceEnabled ? "marketplace" : "installed")
17+
18+
const handleTabChange = (tab: string) => {
19+
setActiveTab(tab)
20+
}
21+
22+
useEffect(() => {
23+
if (!mcpMarketplaceEnabled && activeTab === "marketplace") {
24+
// If marketplace is disabled and we're on marketplace tab, switch to installed
25+
setActiveTab("installed")
26+
}
27+
}, [mcpMarketplaceEnabled, activeTab])
28+
29+
useEffect(() => {
30+
if (mcpMarketplaceEnabled) {
31+
vscode.postMessage({ type: "silentlyRefreshMcpMarketplace" })
32+
vscode.postMessage({ type: "fetchLatestMcpServersFromHub" })
33+
}
34+
}, [mcpMarketplaceEnabled])
35+
36+
return (
37+
<div
38+
style={{
39+
position: "fixed",
40+
top: 0,
41+
left: 0,
42+
right: 0,
43+
bottom: 0,
44+
display: "flex",
45+
flexDirection: "column",
46+
}}>
47+
<div
48+
style={{
49+
display: "flex",
50+
justifyContent: "space-between",
51+
alignItems: "center",
52+
padding: "10px 17px 5px 20px",
53+
}}>
54+
<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>MCP Servers</h3>
55+
<VSCodeButton onClick={onDone}>Done</VSCodeButton>
56+
</div>
57+
58+
<div style={{ flex: 1, overflow: "auto" }}>
59+
{/* Tabs container */}
60+
<div
61+
style={{
62+
display: "flex",
63+
gap: "1px",
64+
padding: "0 20px 0 20px",
65+
borderBottom: "1px solid var(--vscode-panel-border)",
66+
}}>
67+
{mcpMarketplaceEnabled && (
68+
<TabButton isActive={activeTab === "marketplace"} onClick={() => handleTabChange("marketplace")}>
69+
Marketplace
70+
</TabButton>
71+
)}
72+
<TabButton isActive={activeTab === "addRemote"} onClick={() => handleTabChange("addRemote")}>
73+
Remote Servers
74+
</TabButton>
75+
<TabButton isActive={activeTab === "installed"} onClick={() => handleTabChange("installed")}>
76+
Installed
77+
</TabButton>
78+
</div>
79+
80+
{/* Content container */}
81+
<div style={{ width: "100%" }}>
82+
{mcpMarketplaceEnabled && activeTab === "marketplace" && <McpMarketplaceView />}
83+
{activeTab === "addRemote" && <AddRemoteServerForm onServerAdded={() => handleTabChange("installed")} />}
84+
{activeTab === "installed" && <InstalledServersView />}
85+
</div>
86+
</div>
87+
</div>
88+
)
89+
}
90+
91+
const StyledTabButton = styled.button<{ isActive: boolean }>`
92+
background: none;
93+
border: none;
94+
border-bottom: 2px solid ${(props) => (props.isActive ? "var(--vscode-foreground)" : "transparent")};
95+
color: ${(props) => (props.isActive ? "var(--vscode-foreground)" : "var(--vscode-descriptionForeground)")};
96+
padding: 8px 16px;
97+
cursor: pointer;
98+
font-size: 13px;
99+
margin-bottom: -1px;
100+
font-family: inherit;
101+
102+
&:hover {
103+
color: var(--vscode-foreground);
104+
}
105+
`
106+
107+
export const TabButton = ({
108+
children,
109+
isActive,
110+
onClick,
111+
}: {
112+
children: React.ReactNode
113+
isActive: boolean
114+
onClick: () => void
115+
}) => (
116+
<StyledTabButton isActive={isActive} onClick={onClick}>
117+
{children}
118+
</StyledTabButton>
119+
)
120+
121+
export default McpConfigurationView

‎webview-ui/src/components/mcp/tabs/AddLocalServerForm.tsx‎ renamed to ‎webview-ui/src/components/mcp/configuration/tabs/add-server/AddLocalServerForm.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2-
3-
import { vscode } from "../../../utils/vscode"
2+
import { vscode } from "../../../../../utils/vscode"
43
import styled from "styled-components"
5-
import { LINKS } from "../../../constants"
4+
import { LINKS } from "../../../../../constants"
65

76
type AddLocalServerFormProps = {
87
onServerAdded: () => void

‎webview-ui/src/components/mcp/tabs/AddRemoteServerForm.tsx‎ renamed to ‎webview-ui/src/components/mcp/configuration/tabs/add-server/AddRemoteServerForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback, useRef, useState } from "react"
2-
import { vscode } from "../../../utils/vscode"
2+
import { vscode } from "../../../../../utils/vscode"
33
import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
44
import { useEvent } from "react-use"
55
import { LINKS } from "@/constants"

0 commit comments

Comments
 (0)