From 06733d949bc345b2cfc41b76be5e0ba35832c246 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Thu, 2 Jan 2025 21:58:26 -0800
Subject: [PATCH] Add back to the settings page as well

---
 .../src/components/mcp/McpEnabledToggle.tsx   | 29 +++++++++++++++++++
 webview-ui/src/components/mcp/McpView.tsx     | 22 ++------------
 .../src/components/settings/SettingsView.tsx  |  5 ++++
 3 files changed, 37 insertions(+), 19 deletions(-)
 create mode 100644 webview-ui/src/components/mcp/McpEnabledToggle.tsx

diff --git a/webview-ui/src/components/mcp/McpEnabledToggle.tsx b/webview-ui/src/components/mcp/McpEnabledToggle.tsx
new file mode 100644
index 0000000..75baa9f
--- /dev/null
+++ b/webview-ui/src/components/mcp/McpEnabledToggle.tsx
@@ -0,0 +1,29 @@
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+
+const McpEnabledToggle = () => {
+	const { mcpEnabled, setMcpEnabled } = useExtensionState()
+
+	return (
+		<div style={{ marginBottom: "20px" }}>
+			<VSCodeCheckbox
+				checked={mcpEnabled}
+				onChange={(e: any) => {
+					setMcpEnabled(e.target.checked)
+					vscode.postMessage({ type: "mcpEnabled", bool: 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. If you're not using MCP, you can disable this to reduce Cline's token usage.
+			</p>
+		</div>
+	)
+}
+
+export default McpEnabledToggle
\ No newline at end of file
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 1f1c602..ea2ea2b 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -1,6 +1,5 @@
 import {
 	VSCodeButton,
-	VSCodeCheckbox,
 	VSCodeLink,
 	VSCodePanels,
 	VSCodePanelTab,
@@ -12,13 +11,14 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { McpServer } from "../../../../src/shared/mcp"
 import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
+import McpEnabledToggle from "./McpEnabledToggle"
 
 type McpViewProps = {
 	onDone: () => void
 }
 
 const McpView = ({ onDone }: McpViewProps) => {
-	const { mcpServers: servers, alwaysAllowMcp, mcpEnabled, setMcpEnabled } = useExtensionState()
+	const { mcpServers: servers, alwaysAllowMcp, mcpEnabled } = useExtensionState()
 	// const [servers, setServers] = useState<McpServer[]>([
 	// 	// Add some mock servers for testing
 	// 	{
@@ -123,23 +123,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 					npm docs").
 				</div>
 
-				<div style={{ marginBottom: "20px" }}>
-					<VSCodeCheckbox
-						checked={mcpEnabled}
-						onChange={(e: any) => {
-							setMcpEnabled(e.target.checked)
-							vscode.postMessage({ type: "mcpEnabled", bool: 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. If you're not using MCP, you can disable this to reduce Cline's token usage.
-					</p>
-				</div>
+				<McpEnabledToggle />
 
 				{mcpEnabled && (
 					<>
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 7ac1563..16c0a3c 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -4,6 +4,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
+import McpEnabledToggle from "../mcp/McpEnabledToggle"
 
 const IS_DEV = false // FIXME: use flags when packaging
 
@@ -48,6 +49,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setScreenshotQuality,
 		terminalOutputLineLimit,
 		setTerminalOutputLineLimit,
+		mcpEnabled,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -79,6 +81,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 			vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs })
 			vscode.postMessage({ type: "screenshotQuality", value: screenshotQuality ?? 75 })
 			vscode.postMessage({ type: "terminalOutputLineLimit", value: terminalOutputLineLimit ?? 500 })
+			vscode.postMessage({ type: "mcpEnabled", bool: mcpEnabled })
 			onDone()
 		}
 	}
@@ -211,6 +214,8 @@ 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.
 					</p>
+
+					<McpEnabledToggle />
 				</div>
 
 				<div style={{ marginBottom: 5 }}>