refactor(frontend): remove MCP import functionality for v3.7.0
Auto-migration at startup is sufficient for upgrading from v3.6.x. Manual import adds unnecessary complexity since: - Gemini MCP support launches with v3.7.0 (no legacy data) - Existing Claude/Codex MCP configs are auto-migrated on first run - All MCP management should happen within CC Switch Changes: - Remove McpImportDialog component - Remove "Import" button from UnifiedMcpPanel - Remove import-related i18n translations (en/zh) - Simplify user experience with single management interface Note: Backend import commands (import_mcp_from_*) remain for backward compatibility but are no longer exposed in UI.
This commit is contained in:
@@ -1,178 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { Download, FileJson, FileCode, Sparkles } from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogFooter,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { mcpApi } from "@/lib/api";
|
|
||||||
import type { AppId } from "@/lib/api/types";
|
|
||||||
|
|
||||||
interface McpImportDialogProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onImportComplete?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* MCP 导入对话框
|
|
||||||
* 支持从 Claude/Codex/Gemini 的 live 配置导入 MCP 服务器
|
|
||||||
*/
|
|
||||||
const McpImportDialog: React.FC<McpImportDialogProps> = ({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
onImportComplete,
|
|
||||||
}) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [importing, setImporting] = useState(false);
|
|
||||||
const [selectedSource, setSelectedSource] = useState<AppId | null>(null);
|
|
||||||
|
|
||||||
const handleImport = async (source: AppId) => {
|
|
||||||
setImporting(true);
|
|
||||||
setSelectedSource(source);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
switch (source) {
|
|
||||||
case "claude":
|
|
||||||
count = await mcpApi.importFromClaude();
|
|
||||||
break;
|
|
||||||
case "codex":
|
|
||||||
count = await mcpApi.importFromCodex();
|
|
||||||
break;
|
|
||||||
case "gemini":
|
|
||||||
count = await mcpApi.importFromGemini();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (count > 0) {
|
|
||||||
toast.success(t("mcp.unifiedPanel.import.success", { count }));
|
|
||||||
onImportComplete?.();
|
|
||||||
onOpenChange(false);
|
|
||||||
} else {
|
|
||||||
toast.info(t("mcp.unifiedPanel.import.noServersFound"));
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
toast.error(t("common.error"), {
|
|
||||||
description: String(error),
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setImporting(false);
|
|
||||||
setSelectedSource(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const importSources = [
|
|
||||||
{
|
|
||||||
id: "claude" as AppId,
|
|
||||||
name: t("mcp.unifiedPanel.apps.claude"),
|
|
||||||
description: t("mcp.unifiedPanel.import.fromClaudeDesc"),
|
|
||||||
icon: FileJson,
|
|
||||||
color: "text-blue-600 dark:text-blue-400",
|
|
||||||
bgColor: "bg-blue-100 dark:bg-blue-900/30",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "codex" as AppId,
|
|
||||||
name: t("mcp.unifiedPanel.apps.codex"),
|
|
||||||
description: t("mcp.unifiedPanel.import.fromCodexDesc"),
|
|
||||||
icon: FileCode,
|
|
||||||
color: "text-green-600 dark:text-green-400",
|
|
||||||
bgColor: "bg-green-100 dark:bg-green-900/30",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "gemini" as AppId,
|
|
||||||
name: t("mcp.unifiedPanel.apps.gemini"),
|
|
||||||
description: t("mcp.unifiedPanel.import.fromGeminiDesc"),
|
|
||||||
icon: Sparkles,
|
|
||||||
color: "text-purple-600 dark:text-purple-400",
|
|
||||||
bgColor: "bg-purple-100 dark:bg-purple-900/30",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{t("mcp.unifiedPanel.import.title")}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="space-y-4 py-4">
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{t("mcp.unifiedPanel.import.description")}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{importSources.map((source) => {
|
|
||||||
const Icon = source.icon;
|
|
||||||
const isImporting = importing && selectedSource === source.id;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={source.id}
|
|
||||||
type="button"
|
|
||||||
onClick={() => handleImport(source.id)}
|
|
||||||
disabled={importing}
|
|
||||||
className={`w-full p-4 rounded-lg border-2 transition-all duration-200 text-left ${
|
|
||||||
importing && selectedSource !== source.id
|
|
||||||
? "opacity-50 cursor-not-allowed"
|
|
||||||
: "hover:border-gray-400 dark:hover:border-gray-500 cursor-pointer"
|
|
||||||
} ${
|
|
||||||
isImporting
|
|
||||||
? "border-blue-500 dark:border-blue-400"
|
|
||||||
: "border-gray-200 dark:border-gray-700"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div
|
|
||||||
className={`flex-shrink-0 w-12 h-12 rounded-lg ${source.bgColor} flex items-center justify-center`}
|
|
||||||
>
|
|
||||||
<Icon className={`w-6 h-6 ${source.color}`} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
|
|
||||||
{source.name}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
||||||
{source.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isImporting ? (
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<Download className="w-5 h-5 text-gray-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
disabled={importing}
|
|
||||||
>
|
|
||||||
{t("common.cancel")}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default McpImportDialog;
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useMemo, useState } from "react";
|
import React, { useMemo, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Plus, Server, Check, RefreshCw, Download } from "lucide-react";
|
import { Plus, Server, Check, RefreshCw } from "lucide-react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
@@ -14,7 +14,6 @@ import { useAllMcpServers, useToggleMcpApp, useSyncAllMcpServers } from "@/hooks
|
|||||||
import type { McpServer } from "@/types";
|
import type { McpServer } from "@/types";
|
||||||
import type { AppId } from "@/lib/api/types";
|
import type { AppId } from "@/lib/api/types";
|
||||||
import McpFormModal from "./McpFormModal";
|
import McpFormModal from "./McpFormModal";
|
||||||
import McpImportDialog from "./McpImportDialog";
|
|
||||||
import { ConfirmDialog } from "../ConfirmDialog";
|
import { ConfirmDialog } from "../ConfirmDialog";
|
||||||
import { useDeleteMcpServer } from "@/hooks/useMcp";
|
import { useDeleteMcpServer } from "@/hooks/useMcp";
|
||||||
import { Edit3, Trash2 } from "lucide-react";
|
import { Edit3, Trash2 } from "lucide-react";
|
||||||
@@ -37,7 +36,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||||
const [isImportOpen, setIsImportOpen] = useState(false);
|
|
||||||
const [editingId, setEditingId] = useState<string | null>(null);
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
const [confirmDialog, setConfirmDialog] = useState<{
|
const [confirmDialog, setConfirmDialog] = useState<{
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
@@ -47,7 +45,7 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
|
|||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
// Queries and Mutations
|
// Queries and Mutations
|
||||||
const { data: serversMap, isLoading, refetch } = useAllMcpServers();
|
const { data: serversMap, isLoading } = useAllMcpServers();
|
||||||
const toggleAppMutation = useToggleMcpApp();
|
const toggleAppMutation = useToggleMcpApp();
|
||||||
const deleteServerMutation = useDeleteMcpServer();
|
const deleteServerMutation = useDeleteMcpServer();
|
||||||
const syncAllMutation = useSyncAllMcpServers();
|
const syncAllMutation = useSyncAllMcpServers();
|
||||||
@@ -128,11 +126,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
|
|||||||
setEditingId(null);
|
setEditingId(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleImportComplete = () => {
|
|
||||||
// Refresh the servers list after import
|
|
||||||
refetch();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
@@ -141,15 +134,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
|
|||||||
<div className="flex items-center justify-between pr-8">
|
<div className="flex items-center justify-between pr-8">
|
||||||
<DialogTitle>{t("mcp.unifiedPanel.title")}</DialogTitle>
|
<DialogTitle>{t("mcp.unifiedPanel.title")}</DialogTitle>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsImportOpen(true)}
|
|
||||||
>
|
|
||||||
<Download size={16} />
|
|
||||||
{t("mcp.unifiedPanel.import.button")}
|
|
||||||
</Button>
|
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -247,13 +231,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Import Dialog */}
|
|
||||||
<McpImportDialog
|
|
||||||
open={isImportOpen}
|
|
||||||
onOpenChange={setIsImportOpen}
|
|
||||||
onImportComplete={handleImportComplete}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Confirm Dialog */}
|
{/* Confirm Dialog */}
|
||||||
{confirmDialog && (
|
{confirmDialog && (
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|||||||
@@ -455,16 +455,6 @@
|
|||||||
"claude": "Claude",
|
"claude": "Claude",
|
||||||
"codex": "Codex",
|
"codex": "Codex",
|
||||||
"gemini": "Gemini"
|
"gemini": "Gemini"
|
||||||
},
|
|
||||||
"import": {
|
|
||||||
"title": "Import MCP Servers",
|
|
||||||
"button": "Import",
|
|
||||||
"description": "Import MCP servers from existing application configuration files. Imported servers will automatically enable the corresponding application.",
|
|
||||||
"fromClaudeDesc": "Import MCP servers from ~/.claude/claude.json or ~/.claude/settings.json",
|
|
||||||
"fromCodexDesc": "Import MCP servers from ~/.codex/config.toml",
|
|
||||||
"fromGeminiDesc": "Import MCP servers from Gemini configuration file",
|
|
||||||
"success": "Successfully imported {{count}} server(s)",
|
|
||||||
"noServersFound": "No servers found to import"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"userLevelPath": "User-level MCP path",
|
"userLevelPath": "User-level MCP path",
|
||||||
|
|||||||
@@ -455,16 +455,6 @@
|
|||||||
"claude": "Claude",
|
"claude": "Claude",
|
||||||
"codex": "Codex",
|
"codex": "Codex",
|
||||||
"gemini": "Gemini"
|
"gemini": "Gemini"
|
||||||
},
|
|
||||||
"import": {
|
|
||||||
"title": "导入 MCP 服务器",
|
|
||||||
"button": "导入",
|
|
||||||
"description": "从已有的应用配置文件中导入 MCP 服务器。导入的服务器将自动启用对应的应用。",
|
|
||||||
"fromClaudeDesc": "从 ~/.claude/claude.json 或 ~/.claude/settings.json 导入 MCP 服务器",
|
|
||||||
"fromCodexDesc": "从 ~/.codex/config.toml 导入 MCP 服务器",
|
|
||||||
"fromGeminiDesc": "从 Gemini 配置文件导入 MCP 服务器",
|
|
||||||
"success": "成功导入 {{count}} 个服务器",
|
|
||||||
"noServersFound": "未找到可导入的服务器"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"userLevelPath": "用户级 MCP 配置路径",
|
"userLevelPath": "用户级 MCP 配置路径",
|
||||||
|
|||||||
Reference in New Issue
Block a user