pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 04:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move MCP checkbox to the MCP settings screen

Browse Source
This commit is contained in:
Matt Rubens
2025-01-02 21:28:32 -08:00
parent 70f3c041e6
commit 8cb44aa695
2 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
webview-ui/src/components/mcp/McpView.tsx
View File

@@ -1,5 +1,6 @@
import { import {
VSCodeButton, VSCodeButton,
VSCodeCheckbox,
VSCodeLink, VSCodeLink,
VSCodePanels, VSCodePanels,
VSCodePanelTab, VSCodePanelTab,
@@ -17,7 +18,7 @@ type McpViewProps = {
} }
const McpView = ({ onDone }: McpViewProps) => { const McpView = ({ onDone }: McpViewProps) => {
const { mcpServers: servers, alwaysAllowMcp } = useExtensionState() const { mcpServers: servers, alwaysAllowMcp, mcpEnabled, setMcpEnabled } = useExtensionState()
// const [servers, setServers] = useState<McpServer[]>([ // const [servers, setServers] = useState<McpServer[]>([
// // Add some mock servers for testing // // Add some mock servers for testing
// { // {
@@ -106,7 +107,7 @@ const McpView = ({ onDone }: McpViewProps) => {
style={{ style={{
color: "var(--vscode-foreground)", color: "var(--vscode-foreground)",
fontSize: "13px", fontSize: "13px",
marginBottom: "20px", marginBottom: "10px",
marginTop: "5px", marginTop: "5px",
}}> }}>
The{" "} The{" "}
@@ -122,28 +123,50 @@ const McpView = ({ onDone }: McpViewProps) => {
npm docs"). npm docs").
</div> </div>
{/* Server List */} <div style={{ marginBottom: "20px" }}>
{servers.length > 0 && ( <VSCodeCheckbox
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}> checked={mcpEnabled}
{servers.map((server) => ( onChange={(e: any) => {
<ServerRow key={server.name} server={server} alwaysAllowMcp={alwaysAllowMcp} /> setMcpEnabled(e.target.checked)
))} vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked })
</div>
)}
{/* Edit Settings Button */}
<div style={{ marginTop: "10px", width: "100%" }}>
<VSCodeButton
appearance="secondary"
style={{ width: "100%" }}
onClick={() => {
vscode.postMessage({ type: "openMcpSettings" })
}}> }}>
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span> <span style={{ fontWeight: "500" }}>Enable MCP Servers</span>
Edit MCP Settings </VSCodeCheckbox>
</VSCodeButton> <p style={{
fontSize: "12px",
marginTop: "5px",
color: "var(--vscode-descriptionForeground)",
}}>
When enabled, Cline will be able to interact with MCP servers for advanced functionality. If you're not using MCP, you can disable this to reduce Cline's token usage.
</p>
</div> </div>
{mcpEnabled && (
<>
{/* Server List */}
{servers.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{servers.map((server) => (
<ServerRow key={server.name} server={server} alwaysAllowMcp={alwaysAllowMcp} />
))}
</div>
)}
{/* Edit Settings Button */}
<div style={{ marginTop: "10px", width: "100%" }}>
<VSCodeButton
appearance="secondary"
style={{ width: "100%" }}
onClick={() => {
vscode.postMessage({ type: "openMcpSettings" })
}}>
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
Edit MCP Settings
</VSCodeButton>
</div>
</>
)}
{/* Bottom padding */} {/* Bottom padding */}
<div style={{ height: "20px" }} /> <div style={{ height: "20px" }} />
</div> </div>

19
webview-ui/src/components/settings/SettingsView.tsx
View File

@@ -48,8 +48,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
setScreenshotQuality, setScreenshotQuality,
terminalOutputLineLimit, terminalOutputLineLimit,
setTerminalOutputLineLimit, setTerminalOutputLineLimit,
mcpEnabled,
setMcpEnabled,
} = useExtensionState() } = useExtensionState()
const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined) const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined) const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -81,7 +79,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs }) vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs })
vscode.postMessage({ type: "screenshotQuality", value: screenshotQuality ?? 75 }) vscode.postMessage({ type: "screenshotQuality", value: screenshotQuality ?? 75 })
vscode.postMessage({ type: "terminalOutputLineLimit", value: terminalOutputLineLimit ?? 500 }) vscode.postMessage({ type: "terminalOutputLineLimit", value: terminalOutputLineLimit ?? 500 })
vscode.postMessage({ type: "mcpEnabled", bool: mcpEnabled })
onDone() onDone()
} }
} }
@@ -214,21 +211,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
}}> }}>
These instructions are added to the end of the system prompt sent with every request. Custom instructions set in .clinerules and .cursorrules in the working directory are also included. These instructions are added to the end of the system prompt sent with every request. Custom instructions set in .clinerules and .cursorrules in the working directory are also included.
</p> </p>
<div style={{ marginBottom: 5 }}>
<VSCodeCheckbox
checked={mcpEnabled}
onChange={(e: any) => setMcpEnabled(e.target.checked)}>
<span style={{ fontWeight: "500" }}>Enable MCP Servers</span>
</VSCodeCheckbox>
<p style={{
fontSize: "12px",
marginTop: "5px",
color: "var(--vscode-descriptionForeground)",
}}>
When enabled, Cline will be able to interact with MCP servers for advanced functionality.
</p>
</div>
</div> </div>
<div style={{ marginBottom: 5 }}> <div style={{ marginBottom: 5 }}>
@@ -576,7 +558,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
</div> </div>
</div> </div>
{IS_DEV && ( {IS_DEV && (
<> <>
<div style={{ marginTop: "10px", marginBottom: "4px" }}>Debug</div> <div style={{ marginTop: "10px", marginBottom: "4px" }}>Debug</div>