From ca8c6f69c3dff0e9eceefe09003ba4c3911ef4a3 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Sun, 16 Mar 2025 03:17:02 -0400 Subject: [PATCH] Localize the MCP tab --- .../src/components/mcp/McpEnabledToggle.tsx | 7 +- webview-ui/src/components/mcp/McpToolRow.tsx | 8 +- webview-ui/src/components/mcp/McpView.tsx | 80 ++++++++++--------- .../mcp/__tests__/McpToolRow.test.tsx | 14 ++++ webview-ui/src/i18n/locales/ar/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/ca/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/cs/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/de/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/en/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/es/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/fr/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/hi/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/hu/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/it/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/ja/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/ko/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/pl/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/pt-BR/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/pt/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/ru/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/tr/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/zh-CN/mcp.json | 51 ++++++++++++ webview-ui/src/i18n/locales/zh-TW/mcp.json | 51 ++++++++++++ 23 files changed, 1034 insertions(+), 44 deletions(-) create mode 100644 webview-ui/src/i18n/locales/ar/mcp.json create mode 100644 webview-ui/src/i18n/locales/ca/mcp.json create mode 100644 webview-ui/src/i18n/locales/cs/mcp.json create mode 100644 webview-ui/src/i18n/locales/de/mcp.json create mode 100644 webview-ui/src/i18n/locales/en/mcp.json create mode 100644 webview-ui/src/i18n/locales/es/mcp.json create mode 100644 webview-ui/src/i18n/locales/fr/mcp.json create mode 100644 webview-ui/src/i18n/locales/hi/mcp.json create mode 100644 webview-ui/src/i18n/locales/hu/mcp.json create mode 100644 webview-ui/src/i18n/locales/it/mcp.json create mode 100644 webview-ui/src/i18n/locales/ja/mcp.json create mode 100644 webview-ui/src/i18n/locales/ko/mcp.json create mode 100644 webview-ui/src/i18n/locales/pl/mcp.json create mode 100644 webview-ui/src/i18n/locales/pt-BR/mcp.json create mode 100644 webview-ui/src/i18n/locales/pt/mcp.json create mode 100644 webview-ui/src/i18n/locales/ru/mcp.json create mode 100644 webview-ui/src/i18n/locales/tr/mcp.json create mode 100644 webview-ui/src/i18n/locales/zh-CN/mcp.json create mode 100644 webview-ui/src/i18n/locales/zh-TW/mcp.json diff --git a/webview-ui/src/components/mcp/McpEnabledToggle.tsx b/webview-ui/src/components/mcp/McpEnabledToggle.tsx index 9e7831ea2ba..967c06e829c 100644 --- a/webview-ui/src/components/mcp/McpEnabledToggle.tsx +++ b/webview-ui/src/components/mcp/McpEnabledToggle.tsx @@ -1,10 +1,12 @@ import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" import { FormEvent } from "react" import { useExtensionState } from "../../context/ExtensionStateContext" +import { useAppTranslation } from "../../i18n/TranslationContext" import { vscode } from "../../utils/vscode" const McpEnabledToggle = () => { const { mcpEnabled, setMcpEnabled } = useExtensionState() + const { t } = useAppTranslation() const handleChange = (e: Event | FormEvent) => { const target = ("target" in e ? e.target : null) as HTMLInputElement | null @@ -16,7 +18,7 @@ const McpEnabledToggle = () => { return (
- Enable MCP Servers + {t("mcp:enableToggle.title")}

{ marginTop: "5px", color: "var(--vscode-descriptionForeground)", }}> - When enabled, Roo will be able to interact with MCP servers for advanced functionality. If you're not - using MCP, you can disable this to reduce Roo's token usage. + {t("mcp:enableToggle.description")}

) diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx index 20fc1acbf0d..9f04ce1a2f9 100644 --- a/webview-ui/src/components/mcp/McpToolRow.tsx +++ b/webview-ui/src/components/mcp/McpToolRow.tsx @@ -1,5 +1,6 @@ import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" import { McpTool } from "../../../../src/shared/mcp" +import { useAppTranslation } from "../../i18n/TranslationContext" import { vscode } from "../../utils/vscode" type McpToolRowProps = { @@ -9,6 +10,7 @@ type McpToolRowProps = { } const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => { + const { t } = useAppTranslation() const handleAlwaysAllowChange = () => { if (!serverName) return @@ -36,7 +38,7 @@ const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => { {serverName && alwaysAllowMcp && ( - Always allow + {t("mcp:tool.alwaysAllow")} )} @@ -64,7 +66,7 @@ const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => { }}>
- Parameters + {t("mcp:tool.parameters")}
{Object.entries(tool.inputSchema.properties as Record).map( ([paramName, schema]) => { @@ -98,7 +100,7 @@ const McpToolRow = ({ tool, serverName, alwaysAllowMcp }: McpToolRowProps) => { overflowWrap: "break-word", wordBreak: "break-word", }}> - {schema.description || "No description"} + {schema.description || t("mcp:tool.noDescription")} ) diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx index ce37a4c09d8..97111e1332d 100644 --- a/webview-ui/src/components/mcp/McpView.tsx +++ b/webview-ui/src/components/mcp/McpView.tsx @@ -14,6 +14,8 @@ import { vscode } from "@/utils/vscode" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui" import { useExtensionState } from "../../context/ExtensionStateContext" +import { useAppTranslation } from "../../i18n/TranslationContext" +import { Trans } from "react-i18next" import { Tab, TabContent, TabHeader } from "../common/Tab" import McpToolRow from "./McpToolRow" import McpResourceRow from "./McpResourceRow" @@ -31,12 +33,13 @@ const McpView = ({ onDone }: McpViewProps) => { enableMcpServerCreation, setEnableMcpServerCreation, } = useExtensionState() + const { t } = useAppTranslation() return ( -

MCP Servers

- Done +

{t("mcp:title")}

+ {t("mcp:done")}
@@ -47,17 +50,16 @@ const McpView = ({ onDone }: McpViewProps) => { marginBottom: "10px", marginTop: "5px", }}> - The{" "} - - Model Context Protocol - {" "} - enables communication with locally running MCP servers that provide additional tools and resources - to extend Roo's capabilities. You can use{" "} - - community-made servers - {" "} - or ask Roo to create new tools specific to your workflow (e.g., "add a tool that gets the latest npm - docs"). + + + Model Context Protocol + + + community-made servers + + @@ -71,7 +73,7 @@ const McpView = ({ onDone }: McpViewProps) => { setEnableMcpServerCreation(e.target.checked) vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked }) }}> - Enable MCP Server Creation + {t("mcp:enableServerCreation.title")}

{ marginTop: "5px", color: "var(--vscode-descriptionForeground)", }}> - When enabled, Roo can help you create new MCP servers via commands like "add a new tool - to...". If you don't need to create MCP servers you can disable this to reduce Roo's - token usage. + {t("mcp:enableServerCreation.description")}

@@ -103,7 +103,7 @@ const McpView = ({ onDone }: McpViewProps) => { vscode.postMessage({ type: "openMcpSettings" }) }}> - Edit MCP Settings + {t("mcp:editSettings")} @@ -114,6 +114,7 @@ const McpView = ({ onDone }: McpViewProps) => { } const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowMcp?: boolean }) => { + const { t } = useAppTranslation() const [isExpanded, setIsExpanded] = useState(false) const [showDeleteConfirm, setShowDeleteConfirm] = useState(false) const [timeoutValue, setTimeoutValue] = useState(() => { @@ -122,14 +123,14 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM }) const timeoutOptions = [ - { value: 15, label: "15 seconds" }, - { value: 30, label: "30 seconds" }, - { value: 60, label: "1 minute" }, - { value: 300, label: "5 minutes" }, - { value: 600, label: "10 minutes" }, - { value: 900, label: "15 minutes" }, - { value: 1800, label: "30 minutes" }, - { value: 3600, label: "60 minutes" }, + { value: 15, label: t("mcp:networkTimeout.options.15seconds") }, + { value: 30, label: t("mcp:networkTimeout.options.30seconds") }, + { value: 60, label: t("mcp:networkTimeout.options.1minute") }, + { value: 300, label: t("mcp:networkTimeout.options.5minutes") }, + { value: 600, label: t("mcp:networkTimeout.options.10minutes") }, + { value: 900, label: t("mcp:networkTimeout.options.15minutes") }, + { value: 1800, label: t("mcp:networkTimeout.options.30minutes") }, + { value: 3600, label: t("mcp:networkTimeout.options.60minutes") }, ] const getStatusColor = () => { @@ -291,7 +292,9 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM onClick={handleRestart} disabled={server.status === "connecting"} style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}> - {server.status === "connecting" ? "Retrying..." : "Retry Connection"} + {server.status === "connecting" + ? t("mcp:serverStatus.retrying") + : t("mcp:serverStatus.retryConnection")} ) : ( @@ -304,9 +307,11 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM borderRadius: "0 0 4px 4px", }}> - Tools ({server.tools?.length || 0}) + + {t("mcp:tabs.tools")} ({server.tools?.length || 0}) + - Resources ( + {t("mcp:tabs.resources")} ( {[...(server.resourceTemplates || []), ...(server.resources || [])].length || 0}) @@ -325,7 +330,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM ) : (
- No tools found + {t("mcp:emptyState.noTools")}
)} @@ -346,7 +351,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM ) : (
- No resources found + {t("mcp:emptyState.noResources")}
)} @@ -361,7 +366,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM gap: "10px", marginBottom: "8px", }}> - Network Timeout + {t("mcp:networkTimeout.label")}