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("");
|
setConfigError("");
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
@@ -361,13 +359,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// JSON mode
|
// JSON mode
|
||||||
const jsonError = validateJsonConfig(formConfig);
|
|
||||||
setConfigError(jsonError);
|
|
||||||
if (jsonError) {
|
|
||||||
toast.error(t("mcp.error.jsonInvalid"), { duration: 3000 });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!formConfig.trim()) {
|
if (!formConfig.trim()) {
|
||||||
// Empty configuration
|
// Empty configuration
|
||||||
serverSpec = {
|
serverSpec = {
|
||||||
@@ -377,9 +368,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
|||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
serverSpec = JSON.parse(formConfig) as McpServerSpec;
|
// 使用智能解析器,支持带外层键的格式
|
||||||
|
const result = parseSmartMcpJson(formConfig);
|
||||||
|
serverSpec = result.config as McpServerSpec;
|
||||||
} catch (e: any) {
|
} 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 });
|
toast.error(t("mcp.error.jsonInvalid"), { duration: 4000 });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* 格式化 JSON 字符串
|
* 格式化 JSON 字符串
|
||||||
* @param value - 原始 JSON 字符串
|
* @param value - 原始 JSON 字符串(支持带键名包装的格式)
|
||||||
* @returns 格式化后的 JSON 字符串(2 空格缩进)
|
* @returns 格式化后的 JSON 字符串(2 空格缩进)
|
||||||
* @throws 如果 JSON 格式无效
|
* @throws 如果 JSON 格式无效
|
||||||
*/
|
*/
|
||||||
@@ -9,8 +9,9 @@ export function formatJSON(value: string): string {
|
|||||||
if (!trimmed) {
|
if (!trimmed) {
|
||||||
return "";
|
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