feat(mcp): enhance wizard with title field and optimize placeholders
- Add MCP title field to wizard (required) - Remove working directory (cwd) field and related logic - Update wizard callback to return both title and JSON - Optimize placeholder text for better user guidance: - Command: "npx or uvx" - Args: "arg1\narg2" - Env: "KEY1=value1\nKEY2=value2" - Headers: "Authorization: Bearer your_token_here\n..." - Simplify args label by removing "(one per line)" hint - Update parent component to handle title from wizard
This commit is contained in:
@@ -7,7 +7,7 @@ import { isLinux } from "../../lib/platform";
|
||||
interface McpWizardModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onApply: (json: string) => void;
|
||||
onApply: (title: string, json: string) => void;
|
||||
onNotify?: (
|
||||
message: string,
|
||||
type: "success" | "error",
|
||||
@@ -75,10 +75,10 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [wizardType, setWizardType] = useState<"stdio" | "http">("stdio");
|
||||
const [wizardTitle, setWizardTitle] = useState("");
|
||||
// stdio 字段
|
||||
const [wizardCommand, setWizardCommand] = useState("");
|
||||
const [wizardArgs, setWizardArgs] = useState("");
|
||||
const [wizardCwd, setWizardCwd] = useState("");
|
||||
const [wizardEnv, setWizardEnv] = useState("");
|
||||
// http 字段
|
||||
const [wizardUrl, setWizardUrl] = useState("");
|
||||
@@ -102,10 +102,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
.filter((s) => s.length > 0);
|
||||
}
|
||||
|
||||
if (wizardCwd.trim()) {
|
||||
config.cwd = wizardCwd.trim();
|
||||
}
|
||||
|
||||
if (wizardEnv.trim()) {
|
||||
const env = parseEnvText(wizardEnv);
|
||||
if (Object.keys(env).length > 0) {
|
||||
@@ -129,6 +125,10 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
};
|
||||
|
||||
const handleApply = () => {
|
||||
if (!wizardTitle.trim()) {
|
||||
onNotify?.(t("mcp.error.idRequired"), "error", 3000);
|
||||
return;
|
||||
}
|
||||
if (wizardType === "stdio" && !wizardCommand.trim()) {
|
||||
onNotify?.(t("mcp.error.commandRequired"), "error", 3000);
|
||||
return;
|
||||
@@ -139,16 +139,16 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
}
|
||||
|
||||
const json = generatePreview();
|
||||
onApply(json);
|
||||
onApply(wizardTitle.trim(), json);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// 重置表单
|
||||
setWizardType("stdio");
|
||||
setWizardTitle("");
|
||||
setWizardCommand("");
|
||||
setWizardArgs("");
|
||||
setWizardCwd("");
|
||||
setWizardEnv("");
|
||||
setWizardUrl("");
|
||||
setWizardHeaders("");
|
||||
@@ -247,6 +247,21 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{t("mcp.form.title")} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={wizardTitle}
|
||||
onChange={(e) => setWizardTitle(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("mcp.form.titlePlaceholder")}
|
||||
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stdio 类型字段 */}
|
||||
{wizardType === "stdio" && (
|
||||
<>
|
||||
@@ -280,21 +295,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CWD */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{t("mcp.wizard.cwd")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={wizardCwd}
|
||||
onChange={(e) => setWizardCwd(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={t("mcp.wizard.cwdPlaceholder")}
|
||||
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Env */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
@@ -350,7 +350,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||||
{/* Preview */}
|
||||
{(wizardCommand ||
|
||||
wizardArgs ||
|
||||
wizardCwd ||
|
||||
wizardEnv ||
|
||||
wizardUrl ||
|
||||
wizardHeaders) && (
|
||||
|
||||
Reference in New Issue
Block a user