fix(mcp): improve format/submit UX and fix validation errors
Fixes two critical issues with the MCP JSON input:
1. Format button failed with wrapped format like "server": {...}
2. Submit button failed despite input validation passing
Changes:
- Updated formatJSON to use smart parser (supports wrapped format)
- Simplified submit validation logic (removed redundant validateJsonConfig call)
- Improved UX: input preserves original format, cleanup happens on format/submit
* Prevents confusing "instant disappearance" when pasting wrapped JSON
* Auto-fills ID/Name fields while keeping input unchanged
* Format button now strips wrapper key and formats cleanly
* Submit button correctly extracts config regardless of format
Code quality:
- Reduced code by 5 lines (20 changes, 11 insertions, 16 deletions)
- Consistent use of parseSmartMcpJson across all JSON operations
- No type errors introduced
This commit is contained in:
@@ -265,10 +265,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
||||
}
|
||||
}
|
||||
|
||||
// 如果智能解析提取了配置(格式转换),自动格式化输入框内容
|
||||
if (result.id && result.formattedConfig !== value.trim()) {
|
||||
setFormConfig(result.formattedConfig);
|
||||
}
|
||||
// 不在输入时自动格式化,保持用户输入的原样
|
||||
// 格式清理将在提交时进行
|
||||
|
||||
setConfigError("");
|
||||
} catch (err: any) {
|
||||
@@ -361,13 +359,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
||||
}
|
||||
} else {
|
||||
// JSON mode
|
||||
const jsonError = validateJsonConfig(formConfig);
|
||||
setConfigError(jsonError);
|
||||
if (jsonError) {
|
||||
toast.error(t("mcp.error.jsonInvalid"), { duration: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formConfig.trim()) {
|
||||
// Empty configuration
|
||||
serverSpec = {
|
||||
@@ -377,9 +368,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
||||
};
|
||||
} else {
|
||||
try {
|
||||
serverSpec = JSON.parse(formConfig) as McpServerSpec;
|
||||
// 使用智能解析器,支持带外层键的格式
|
||||
const result = parseSmartMcpJson(formConfig);
|
||||
serverSpec = result.config as McpServerSpec;
|
||||
} catch (e: any) {
|
||||
setConfigError(t("mcp.error.jsonInvalid"));
|
||||
const errorMessage = e?.message || String(e);
|
||||
setConfigError(t("mcp.error.jsonInvalid") + ": " + errorMessage);
|
||||
toast.error(t("mcp.error.jsonInvalid"), { duration: 4000 });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* 格式化 JSON 字符串
|
||||
* @param value - 原始 JSON 字符串
|
||||
* @param value - 原始 JSON 字符串(支持带键名包装的格式)
|
||||
* @returns 格式化后的 JSON 字符串(2 空格缩进)
|
||||
* @throws 如果 JSON 格式无效
|
||||
*/
|
||||
@@ -9,8 +9,9 @@ export function formatJSON(value: string): string {
|
||||
if (!trimmed) {
|
||||
return "";
|
||||
}
|
||||
const parsed = JSON.parse(trimmed);
|
||||
return JSON.stringify(parsed, null, 2);
|
||||
// 使用智能解析器来处理可能的片段格式
|
||||
const result = parseSmartMcpJson(trimmed);
|
||||
return result.formattedConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user