fix(settings): improve MCP editor layout and controls (#9771)

Co-authored-by: Graham Neubig <neubig@gmail.com>
2025-12-26 05:48:36 +08:00 · 2025-07-20 21:15:45 +02:00 · 2025-07-20 21:15:45 +02:00 · 95bda09cd9
commit 95bda09cd9
parent 1243612694
4 changed files with 84 additions and 95 deletions
--- a/frontend/src/components/features/settings/mcp-settings/mcp-config-editor.tsx
+++ b/frontend/src/components/features/settings/mcp-settings/mcp-config-editor.tsx
@ -32,32 +32,26 @@ export function MCPConfigEditor({ mcpConfig, onChange }: MCPConfigEditorProps) {
          {t(I18nKey.SETTINGS$MCP_DESCRIPTION)}
        </p>
      </div>
-      <div className="flex justify-between items-center mb-4">
-        <div className="flex items-center">
-          <a
-            href="https://docs.all-hands.dev/usage/mcp"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-blue-400 hover:underline mr-3"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {t(I18nKey.COMMON$DOCUMENTATION)}
-          </a>
-          <BrandButton
-            type="button"
-            variant="primary"
-            onClick={() => setIsEditing(!isEditing)}
-          >
-            {isEditing
-              ? t(I18nKey.SETTINGS$MCP_CANCEL)
-              : t(I18nKey.SETTINGS$MCP_EDIT_CONFIGURATION)}
-          </BrandButton>
+      {!isEditing && (
+        <div className="flex justify-between items-center mb-4">
+          <div className="flex items-center">
+            <BrandButton
+              type="button"
+              variant="primary"
+              onClick={() => setIsEditing(true)}
+            >
+              {t(I18nKey.SETTINGS$MCP_EDIT_CONFIGURATION)}
+            </BrandButton>
+          </div>
        </div>
-      </div>
-
+      )}
      <div>
        {isEditing ? (
-          <MCPJsonEditor mcpConfig={mcpConfig} onChange={handleConfigChange} />
+          <MCPJsonEditor
+            mcpConfig={mcpConfig}
+            onChange={handleConfigChange}
+            onCancel={() => setIsEditing(false)}
+          />
        ) : (
          <>
            <div className="flex flex-col gap-6">
--- a/frontend/src/components/features/settings/mcp-settings/mcp-json-editor.tsx
+++ b/frontend/src/components/features/settings/mcp-settings/mcp-json-editor.tsx
@ -1,15 +1,21 @@
 import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, Trans } from "react-i18next";
 import { MCPConfig } from "#/types/settings";
 import { I18nKey } from "#/i18n/declaration";
 import { BrandButton } from "../brand-button";
+import { cn } from "#/utils/utils";

 interface MCPJsonEditorProps {
  mcpConfig?: MCPConfig;
  onChange: (config: MCPConfig) => void;
+  onCancel: () => void;
 }

-export function MCPJsonEditor({ mcpConfig, onChange }: MCPJsonEditorProps) {
+export function MCPJsonEditor({
+  mcpConfig,
+  onChange,
+  onCancel,
+}: MCPJsonEditorProps) {
  const { t } = useTranslation();
  const [configText, setConfigText] = useState(() =>
    mcpConfig
@ -65,11 +71,31 @@ export function MCPJsonEditor({ mcpConfig, onChange }: MCPJsonEditorProps) {

  return (
    <div>
-      <div className="mb-2 text-sm text-gray-400">
-        {t(I18nKey.SETTINGS$MCP_CONFIG_DESCRIPTION)}
-      </div>
+      <p className="mb-2 text-sm text-gray-400">
+        <Trans
+          i18nKey={I18nKey.SETTINGS$MCP_CONFIG_DESCRIPTION}
+          components={{
+            a: (
+              <a
+                href="https://docs.all-hands.dev/usage/mcp"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:underline"
+              >
+                documentation
+              </a>
+            ),
+          }}
+        />
+      </p>
      <textarea
-        className="w-full h-64 p-2 text-sm font-mono bg-base-tertiary rounded-md focus:border-blue-500 focus:outline-hidden"
+        className={cn(
+          "w-full h-64 resize-y p-2 rounded-sm text-sm font-mono",
+          "bg-tertiary border border-[#717888]",
+          "placeholder:italic placeholder:text-tertiary-alt",
+          "focus:outline-none focus:ring-1 focus:ring-primary",
+          "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
+        )}
        value={configText}
        onChange={handleTextChange}
        spellCheck="false"
@ -87,9 +113,12 @@ export function MCPJsonEditor({ mcpConfig, onChange }: MCPJsonEditorProps) {
          }
        </code>
      </div>
-      <div className="mt-4 flex justify-end">
+      <div className="mt-4 flex justify-end gap-3">
+        <BrandButton type="button" variant="secondary" onClick={onCancel}>
+          {t(I18nKey.BUTTON$CANCEL)}
+        </BrandButton>
        <BrandButton type="button" variant="primary" onClick={handleSave}>
-          {t(I18nKey.SETTINGS$MCP_APPLY_CHANGES)}
+          {t(I18nKey.SETTINGS$MCP_CONFIRM_CHANGES)}
        </BrandButton>
      </div>
    </div>
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@ -50,8 +50,7 @@ export enum I18nKey {
  SETTINGS$NAV_MCP = "SETTINGS$NAV_MCP",
  SETTINGS$MCP_CONFIGURATION = "SETTINGS$MCP_CONFIGURATION",
  SETTINGS$MCP_EDIT_CONFIGURATION = "SETTINGS$MCP_EDIT_CONFIGURATION",
-  SETTINGS$MCP_CANCEL = "SETTINGS$MCP_CANCEL",
-  SETTINGS$MCP_APPLY_CHANGES = "SETTINGS$MCP_APPLY_CHANGES",
+  SETTINGS$MCP_CONFIRM_CHANGES = "SETTINGS$MCP_CONFIRM_CHANGES",
  SETTINGS$MCP_CONFIG_DESCRIPTION = "SETTINGS$MCP_CONFIG_DESCRIPTION",
  SETTINGS$MCP_CONFIG_ERROR = "SETTINGS$MCP_CONFIG_ERROR",
  SETTINGS$MCP_CONFIG_EXAMPLE = "SETTINGS$MCP_CONFIG_EXAMPLE",
@ -579,7 +578,6 @@ export enum I18nKey {
  BITBUCKET$TOKEN_LINK_TEXT = "BITBUCKET$TOKEN_LINK_TEXT",
  BITBUCKET$INSTRUCTIONS_LINK_TEXT = "BITBUCKET$INSTRUCTIONS_LINK_TEXT",
  GITLAB$OR_SEE = "GITLAB$OR_SEE",
-  COMMON$DOCUMENTATION = "COMMON$DOCUMENTATION",
  AGENT_ERROR$ERROR_ACTION_NOT_EXECUTED = "AGENT_ERROR$ERROR_ACTION_NOT_EXECUTED",
  DIFF_VIEWER$LOADING = "DIFF_VIEWER$LOADING",
  DIFF_VIEWER$GETTING_LATEST_CHANGES = "DIFF_VIEWER$GETTING_LATEST_CHANGES",
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@ -799,53 +799,37 @@
        "de": "Konfiguration bearbeiten",
        "uk": "Редагувати налаштування"
    },
-    "SETTINGS$MCP_CANCEL": {
-        "en": "Cancel",
-        "ja": "キャンセル",
-        "zh-CN": "取消",
-        "zh-TW": "取消",
-        "ko-KR": "취소",
-        "no": "Avbryt",
-        "it": "Annulla",
-        "pt": "Cancelar",
-        "es": "Cancelar",
-        "ar": "إلغاء",
-        "fr": "Annuler",
-        "tr": "İptal",
-        "de": "Abbrechen",
-        "uk": "Скасувати"
-    },
-    "SETTINGS$MCP_APPLY_CHANGES": {
-        "en": "Apply Changes",
-        "ja": "変更を適用",
-        "zh-CN": "应用更改",
-        "zh-TW": "應用更改",
-        "ko-KR": "변경 사항 적용",
-        "no": "Bruk endringer",
-        "it": "Applica modifiche",
-        "pt": "Aplicar alterações",
-        "es": "Aplicar cambios",
-        "ar": "تطبيق التغييرات",
-        "fr": "Appliquer les modifications",
-        "tr": "Değişiklikleri Uygula",
-        "de": "Änderungen anwenden",
-        "uk": "Застосувати зміни"
+    "SETTINGS$MCP_CONFIRM_CHANGES": {
+        "en": "Confirm Changes",
+        "ja": "変更を確定",
+        "zh-CN": "确认更改",
+        "zh-TW": "確認變更",
+        "ko-KR": "변경 사항 확인",
+        "no": "Bekreft endringer",
+        "it": "Conferma modifiche",
+        "pt": "Confirmar alterações",
+        "es": "Confirmar cambios",
+        "ar": "تأكيد التغييرات",
+        "fr": "Confirmer les modifications",
+        "tr": "Değişiklikleri Onayla",
+        "de": "Änderungen bestätigen",
+        "uk": "Підтвердити зміни"
    },
    "SETTINGS$MCP_CONFIG_DESCRIPTION": {
-        "en": "Edit the JSON configuration for MCP servers below. The configuration must include both sse_servers and stdio_servers arrays.",
-        "ja": "以下のMCPサーバーのJSON設定を編集してください。設定にはsse_serversとstdio_serversの両方の配列を含める必要があります。",
-        "zh-CN": "在下方编辑MCP服务器的JSON配置。配置必须包含sse_servers和stdio_servers数组。",
-        "zh-TW": "在下方編輯MCP服務器的JSON配置。配置必須包含sse_servers和stdio_servers數組。",
-        "ko-KR": "아래에서 MCP 서버의 JSON 구성을 편집하세요. 구성에는 sse_servers와 stdio_servers 배열이 모두 포함되어야 합니다.",
-        "no": "Rediger JSON-konfigurasjonen for MCP-servere nedenfor. Konfigurasjonen må inkludere både sse_servers og stdio_servers-matriser.",
-        "it": "Modifica la configurazione JSON per i server MCP qui sotto. La configurazione deve includere sia gli array sse_servers che stdio_servers.",
-        "pt": "Edite a configuração JSON para servidores MCP abaixo. A configuração deve incluir os arrays sse_servers e stdio_servers.",
-        "es": "Edite la configuración JSON para los servidores MCP a continuación. La configuración debe incluir tanto los arrays sse_servers como stdio_servers.",
-        "ar": "قم بتحرير تكوين JSON لخوادم MCP أدناه. يجب أن يتضمن التكوين كلاً من مصفوفات sse_servers و stdio_servers.",
-        "fr": "Modifiez la configuration JSON pour les serveurs MCP ci-dessous. La configuration doit inclure à la fois les tableaux sse_servers et stdio_servers.",
-        "tr": "Aşağıdaki MCP sunucuları için JSON yapılandırmasını düzenleyin. Yapılandırma hem sse_servers hem de stdio_servers dizilerini içermelidir.",
-        "de": "Bearbeiten Sie die JSON-Konfiguration für MCP-Server unten. Die Konfiguration muss sowohl sse_servers- als auch stdio_servers-Arrays enthalten.",
-        "uk": "Відредагуйте JSON-конфігурацію для серверів MCP нижче. Конфігурація повинна включати масиви sse_servers та stdio_servers."
+    "en": "Edit the JSON configuration for MCP servers below. The configuration must include both sse_servers and stdio_servers arrays. For full configuration details and integration examples, see the <a>documentation</a>.",
+    "ja": "以下のMCPサーバーのJSON設定を編集してください。設定にはsse_serversとstdio_serversの両方の配列を含める必要があります。詳細な設定と統合の例については、<a>ドキュメント</a>を参照してください。",
+    "zh-CN": "在下方编辑MCP服务器的JSON配置。配置必须包含sse_servers和stdio_servers数组。有关完整的配置详情和集成示例，请参阅<a>文档</a>。",
+    "zh-TW": "在下方編輯MCP服務器的JSON配置。配置必須包含sse_servers和stdio_servers數組。有關完整配置詳情與整合範例，請參閱<a>文件</a>。",
+    "ko-KR": "아래에서 MCP 서버의 JSON 구성을 편집하세요. 구성에는 sse_servers와 stdio_servers 배열이 모두 포함되어야 합니다. 전체 구성 세부 정보와 통합 예시는 <a>문서</a>를 참조하세요.",
+    "no": "Rediger JSON-konfigurasjonen for MCP-servere nedenfor. Konfigurasjonen må inkludere både sse_servers og stdio_servers-matriser. For detaljer om konfigurasjon og integrasjon, se <a>dokumentasjonen</a>.",
+    "it": "Modifica la configurazione JSON per i server MCP qui sotto. La configurazione deve includere sia gli array sse_servers che stdio_servers. Per i dettagli completi sulla configurazione e gli esempi di integrazione, vedi la <a>documentazione</a>.",
+    "pt": "Edite a configuração JSON para servidores MCP abaixo. A configuração deve incluir os arrays sse_servers e stdio_servers. Para detalhes completos de configuração e exemplos de integração, veja a <a>documentação</a>.",
+    "es": "Edite la configuración JSON para los servidores MCP a continuación. La configuración debe incluir tanto los arrays sse_servers como stdio_servers. Para ver detalles completos de configuración y ejemplos de integración, consulte la <a>documentación</a>.",
+    "ar": "قم بتحرير تكوين JSON لخوادم MCP أدناه. يجب أن يتضمن التكوين كلاً من مصفوفات sse_servers و stdio_servers. للحصول على تفاصيل التكوين الكاملة وأمثلة التكامل، راجع <a>التوثيق</a>.",
+    "fr": "Modifiez la configuration JSON pour les serveurs MCP ci-dessous. La configuration doit inclure à la fois les tableaux sse_servers et stdio_servers. Pour plus de détails sur la configuration et des exemples d'intégration, voir la <a>documentation</a>.",
+    "tr": "Aşağıdaki MCP sunucuları için JSON yapılandırmasını düzenleyin. Yapılandırma hem sse_servers hem de stdio_servers dizilerini içermelidir. Tam yapılandırma ayrıntıları ve entegrasyon örnekleri için <a>belgeler</a>'e bakın.",
+    "de": "Bearbeiten Sie die JSON-Konfiguration für MCP-Server unten. Die Konfiguration muss sowohl sse_servers- als auch stdio_servers-Arrays enthalten. Weitere Konfigurationsdetails und Integrationsbeispiele finden Sie in der <a>Dokumentation</a>.",
+    "uk": "Відредагуйте JSON-конфігурацію для серверів MCP нижче. Конфігурація повинна включати масиви sse_servers та stdio_servers. Повну інформацію про конфігурацію та приклади інтеграції дивіться в <a>документації</a>."
    },
    "SETTINGS$MCP_CONFIG_ERROR": {
        "en": "Error:",
@ -9263,22 +9247,6 @@
        "de": "oder siehe",
        "uk": "або перегляньте"
    },
-    "COMMON$DOCUMENTATION": {
-        "en": "documentation",
-        "ja": "ドキュメント",
-        "zh-CN": "文档",
-        "zh-TW": "文件",
-        "ko-KR": "문서",
-        "no": "dokumentasjon",
-        "it": "documentazione",
-        "pt": "documentação",
-        "es": "documentación",
-        "ar": "التوثيق",
-        "fr": "documentation",
-        "tr": "belgelendirme",
-        "de": "Dokumentation",
-        "uk": "документація"
-    },
    "AGENT_ERROR$ERROR_ACTION_NOT_EXECUTED": {
        "en": "The action has not been executed. This may have occurred because the user pressed the stop button, or because the runtime system crashed and restarted due to resource constraints. Any previously established system state, dependencies, or environment variables may have been lost.",
        "ja": "アクションは実行されていません。これはユーザーが停止ボタンを押したか、リソース制約によりランタイムシステムがクラッシュして再起動したことが原因かもしれません。以前に確立されたシステム状態、依存関係、または環境変数は失われている可能性があります。",