Merge branch 'feat/add-resource-link-support' of https://github.com/nandsha/mcp-inspector into feat/add-resource-link-support
This commit is contained in:
Nandha Reddy
commit
7c9cfa2113
26 changed files with 1047 additions and 181 deletions
6
.github/workflows/e2e_tests.yml
vendored
6
.github/workflows/e2e_tests.yml
vendored
|
|
@ -21,8 +21,10 @@ jobs:
|
|||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
id: setup_node
|
||||
with:
|
||||
node-version: 18
|
||||
node-version-file: package.json
|
||||
cache: npm
|
||||
|
||||
# Cache Playwright browsers
|
||||
- name: Cache Playwright browsers
|
||||
|
|
@ -69,7 +71,7 @@ jobs:
|
|||
job-summary: true
|
||||
icon-style: "emojis"
|
||||
custom-info: |
|
||||
**Test Environment:** Ubuntu Latest, Node.js 18
|
||||
**Test Environment:** Ubuntu Latest, Node.js ${{ steps.setup_node.outputs.node-version }}
|
||||
**Browsers:** Chromium, Firefox
|
||||
|
||||
📊 [View Detailed HTML Report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) (download artifacts)
|
||||
|
|
|
|||
4
.github/workflows/main.yml
vendored
4
.github/workflows/main.yml
vendored
|
|
@ -19,7 +19,7 @@ jobs:
|
|||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18
|
||||
node-version-file: package.json
|
||||
cache: npm
|
||||
|
||||
# Working around https://github.com/npm/cli/issues/4828
|
||||
|
|
@ -53,7 +53,7 @@ jobs:
|
|||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18
|
||||
node-version-file: package.json
|
||||
cache: npm
|
||||
registry-url: "https://registry.npmjs.org"
|
||||
|
||||
|
|
|
|||
1
.node-version
Normal file
1
.node-version
Normal file
|
|
@ -0,0 +1 @@
|
|||
22.x.x
|
||||
|
|
@ -7,7 +7,7 @@ Thanks for your interest in contributing! This guide explains how to get involve
|
|||
1. Fork the repository and clone it locally
|
||||
2. Install dependencies with `npm install`
|
||||
3. Run `npm run dev` to start both client and server in development mode
|
||||
4. Use the web UI at http://127.0.0.1:6274 to interact with the inspector
|
||||
4. Use the web UI at http://localhost:6274 to interact with the inspector
|
||||
|
||||
## Development Process & Pull Requests
|
||||
|
||||
|
|
|
|||
|
|
@ -168,20 +168,20 @@ DANGEROUSLY_OMIT_AUTH=true npm start
|
|||
|
||||
#### Local-only Binding
|
||||
|
||||
By default, the MCP Inspector proxy server binds only to `127.0.0.1` (localhost) to prevent network access. This ensures the server is not accessible from other devices on the network. If you need to bind to all interfaces for development purposes, you can override this with the `HOST` environment variable:
|
||||
By default, both the MCP Inspector proxy server and client bind only to `localhost` to prevent network access. This ensures they are not accessible from other devices on the network. If you need to bind to all interfaces for development purposes, you can override this with the `HOST` environment variable:
|
||||
|
||||
```bash
|
||||
HOST=0.0.0.0 npm start
|
||||
```
|
||||
|
||||
**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes.
|
||||
**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes and both services to network access.
|
||||
|
||||
#### DNS Rebinding Protection
|
||||
|
||||
To prevent DNS rebinding attacks, the MCP Inspector validates the `Origin` header on incoming requests. By default, only requests from the client origin are allowed (respects `CLIENT_PORT` if set, defaulting to port 6274). You can configure additional allowed origins by setting the `ALLOWED_ORIGINS` environment variable (comma-separated list):
|
||||
|
||||
```bash
|
||||
ALLOWED_ORIGINS=http://localhost:6274,http://127.0.0.1:6274,http://localhost:8000 npm start
|
||||
ALLOWED_ORIGINS=http://localhost:6274,http://localhost:8000 npm start
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import open from "open";
|
||||
import { join, dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import handler from "serve-handler";
|
||||
|
|
@ -39,19 +40,23 @@ const server = http.createServer((request, response) => {
|
|||
return handler(request, response, handlerOptions);
|
||||
});
|
||||
|
||||
const port = process.env.PORT || 6274;
|
||||
const port = parseInt(process.env.CLIENT_PORT || "6274", 10);
|
||||
const host = process.env.HOST || "localhost";
|
||||
server.on("listening", () => {
|
||||
console.log(
|
||||
`🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
|
||||
);
|
||||
const url = process.env.INSPECTOR_URL || `http://${host}:${port}`;
|
||||
console.log(`\n🚀 MCP Inspector is up and running at:\n ${url}\n`);
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
console.log(`🌐 Opening browser...`);
|
||||
open(url);
|
||||
}
|
||||
});
|
||||
server.on("error", (err) => {
|
||||
if (err.message.includes(`EADDRINUSE`)) {
|
||||
console.error(
|
||||
`❌ MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
|
||||
`❌ MCP Inspector PORT IS IN USE at http://${host}:${port} ❌ `,
|
||||
);
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
server.listen(port);
|
||||
server.listen(port, host);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,26 @@ import { fileURLToPath } from "url";
|
|||
import { randomBytes } from "crypto";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
|
||||
|
||||
function delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms, true));
|
||||
}
|
||||
|
||||
function getClientUrl(port, authDisabled, sessionToken, serverPort) {
|
||||
const host = process.env.HOST || "localhost";
|
||||
const baseUrl = `http://${host}:${port}`;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
|
||||
params.set("MCP_PROXY_PORT", serverPort);
|
||||
}
|
||||
if (!authDisabled) {
|
||||
params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
|
||||
}
|
||||
return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
|
||||
}
|
||||
|
||||
async function startDevServer(serverOptions) {
|
||||
const { SERVER_PORT, CLIENT_PORT, sessionToken, envVars, abort } =
|
||||
serverOptions;
|
||||
|
|
@ -23,8 +38,8 @@ async function startDevServer(serverOptions) {
|
|||
cwd: resolve(__dirname, "../..", "server"),
|
||||
env: {
|
||||
...process.env,
|
||||
PORT: SERVER_PORT,
|
||||
CLIENT_PORT: CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
MCP_PROXY_TOKEN: sessionToken,
|
||||
MCP_ENV_VARS: JSON.stringify(envVars),
|
||||
},
|
||||
|
|
@ -82,8 +97,8 @@ async function startProdServer(serverOptions) {
|
|||
{
|
||||
env: {
|
||||
...process.env,
|
||||
PORT: SERVER_PORT,
|
||||
CLIENT_PORT: CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
MCP_PROXY_TOKEN: sessionToken,
|
||||
MCP_ENV_VARS: JSON.stringify(envVars),
|
||||
},
|
||||
|
|
@ -99,30 +114,40 @@ async function startProdServer(serverOptions) {
|
|||
}
|
||||
|
||||
async function startDevClient(clientOptions) {
|
||||
const { CLIENT_PORT, authDisabled, sessionToken, abort, cancelled } =
|
||||
clientOptions;
|
||||
const {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
cancelled,
|
||||
} = clientOptions;
|
||||
const clientCommand = "npx";
|
||||
const clientArgs = ["vite", "--port", CLIENT_PORT];
|
||||
const host = process.env.HOST || "localhost";
|
||||
const clientArgs = ["vite", "--port", CLIENT_PORT, "--host", host];
|
||||
|
||||
const client = spawn(clientCommand, clientArgs, {
|
||||
cwd: resolve(__dirname, ".."),
|
||||
env: { ...process.env, PORT: CLIENT_PORT },
|
||||
env: { ...process.env, CLIENT_PORT },
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
});
|
||||
|
||||
// Auto-open browser after vite starts
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
const url = authDisabled
|
||||
? `http://127.0.0.1:${CLIENT_PORT}`
|
||||
: `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
|
||||
const url = getClientUrl(
|
||||
CLIENT_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
SERVER_PORT,
|
||||
);
|
||||
|
||||
// Give vite time to start before opening browser
|
||||
setTimeout(() => {
|
||||
// Give vite time to start before opening or logging the URL
|
||||
setTimeout(() => {
|
||||
console.log(`\n🚀 MCP Inspector is up and running at:\n ${url}\n`);
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
console.log("🌐 Opening browser...");
|
||||
open(url);
|
||||
console.log(`\n🔗 Opening browser at: ${url}\n`);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
await new Promise((resolve) => {
|
||||
client.subscribe({
|
||||
|
|
@ -139,7 +164,14 @@ async function startDevClient(clientOptions) {
|
|||
}
|
||||
|
||||
async function startProdClient(clientOptions) {
|
||||
const { CLIENT_PORT, authDisabled, sessionToken, abort } = clientOptions;
|
||||
const {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
cancelled,
|
||||
} = clientOptions;
|
||||
const inspectorClientPath = resolve(
|
||||
__dirname,
|
||||
"../..",
|
||||
|
|
@ -148,16 +180,19 @@ async function startProdClient(clientOptions) {
|
|||
"client.js",
|
||||
);
|
||||
|
||||
// Auto-open browser with token
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
const url = authDisabled
|
||||
? `http://127.0.0.1:${CLIENT_PORT}`
|
||||
: `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
|
||||
open(url);
|
||||
}
|
||||
const url = getClientUrl(
|
||||
CLIENT_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
SERVER_PORT,
|
||||
);
|
||||
|
||||
await spawnPromise("node", [inspectorClientPath], {
|
||||
env: { ...process.env, PORT: CLIENT_PORT },
|
||||
env: {
|
||||
...process.env,
|
||||
CLIENT_PORT,
|
||||
INSPECTOR_URL: url,
|
||||
},
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
});
|
||||
|
|
@ -204,7 +239,7 @@ async function main() {
|
|||
}
|
||||
|
||||
const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
|
||||
const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
|
||||
const SERVER_PORT = process.env.SERVER_PORT ?? DEFAULT_MCP_PROXY_LISTEN_PORT;
|
||||
|
||||
console.log(
|
||||
isDev
|
||||
|
|
@ -249,6 +284,7 @@ async function main() {
|
|||
try {
|
||||
const clientOptions = {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>MCP Inspector</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="root" class="w-full"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
#root {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ import { z } from "zod";
|
|||
import "./App.css";
|
||||
import AuthDebugger from "./components/AuthDebugger";
|
||||
import ConsoleTab from "./components/ConsoleTab";
|
||||
import HistoryAndNotifications from "./components/History";
|
||||
import HistoryAndNotifications from "./components/HistoryAndNotifications";
|
||||
import PingTab from "./components/PingTab";
|
||||
import PromptsTab, { Prompt } from "./components/PromptsTab";
|
||||
import ResourcesTab from "./components/ResourcesTab";
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import JsonEditor from "./JsonEditor";
|
|||
import { updateValueAtPath } from "@/utils/jsonUtils";
|
||||
import { generateDefaultValue } from "@/utils/schemaUtils";
|
||||
import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
|
||||
import { useToast } from "@/lib/hooks/useToast";
|
||||
import { CheckCheck, Copy } from "lucide-react";
|
||||
|
||||
interface DynamicJsonFormProps {
|
||||
schema: JsonSchemaType;
|
||||
|
|
@ -16,10 +18,39 @@ interface DynamicJsonFormProps {
|
|||
const isSimpleObject = (schema: JsonSchemaType): boolean => {
|
||||
const supportedTypes = ["string", "number", "integer", "boolean", "null"];
|
||||
if (supportedTypes.includes(schema.type)) return true;
|
||||
if (schema.type !== "object") return false;
|
||||
return Object.values(schema.properties ?? {}).every((prop) =>
|
||||
supportedTypes.includes(prop.type),
|
||||
);
|
||||
if (schema.type === "object") {
|
||||
return Object.values(schema.properties ?? {}).every((prop) =>
|
||||
supportedTypes.includes(prop.type),
|
||||
);
|
||||
}
|
||||
if (schema.type === "array") {
|
||||
return !!schema.items && isSimpleObject(schema.items);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
|
||||
if ("default" in schema && schema.default !== undefined) {
|
||||
return schema.default;
|
||||
}
|
||||
|
||||
switch (schema.type) {
|
||||
case "string":
|
||||
return "";
|
||||
case "number":
|
||||
case "integer":
|
||||
return 0;
|
||||
case "boolean":
|
||||
return false;
|
||||
case "array":
|
||||
return [];
|
||||
case "object":
|
||||
return {};
|
||||
case "null":
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const DynamicJsonForm = ({
|
||||
|
|
@ -31,6 +62,9 @@ const DynamicJsonForm = ({
|
|||
const isOnlyJSON = !isSimpleObject(schema);
|
||||
const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
|
||||
const [jsonError, setJsonError] = useState<string>();
|
||||
const [copiedJson, setCopiedJson] = useState<boolean>(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Store the raw JSON string to allow immediate feedback during typing
|
||||
// while deferring parsing until the user stops typing
|
||||
const [rawJsonValue, setRawJsonValue] = useState<string>(
|
||||
|
|
@ -113,6 +147,8 @@ const DynamicJsonForm = ({
|
|||
currentValue: JsonValue,
|
||||
path: string[] = [],
|
||||
depth: number = 0,
|
||||
parentSchema?: JsonSchemaType,
|
||||
propertyName?: string,
|
||||
) => {
|
||||
if (
|
||||
depth >= maxDepth &&
|
||||
|
|
@ -122,7 +158,8 @@ const DynamicJsonForm = ({
|
|||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(
|
||||
currentValue ?? generateDefaultValue(propSchema),
|
||||
currentValue ??
|
||||
generateDefaultValue(propSchema, propertyName, parentSchema),
|
||||
null,
|
||||
2,
|
||||
)}
|
||||
|
|
@ -140,6 +177,10 @@ const DynamicJsonForm = ({
|
|||
);
|
||||
}
|
||||
|
||||
// Check if this property is required in the parent schema
|
||||
const isRequired =
|
||||
parentSchema?.required?.includes(propertyName || "") ?? false;
|
||||
|
||||
switch (propSchema.type) {
|
||||
case "string":
|
||||
return (
|
||||
|
|
@ -148,16 +189,11 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as string) ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required fields by setting undefined
|
||||
// This preserves the distinction between empty string and unset
|
||||
if (!val && !propSchema.required) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
handleFieldChange(path, val);
|
||||
}
|
||||
// Always allow setting string values, including empty strings
|
||||
handleFieldChange(path, val);
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
|
|
@ -167,9 +203,7 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as number)?.toString() ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required number fields
|
||||
// This preserves the distinction between 0 and unset
|
||||
if (!val && !propSchema.required) {
|
||||
if (!val && !isRequired) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
const num = Number(val);
|
||||
|
|
@ -179,7 +213,7 @@ const DynamicJsonForm = ({
|
|||
}
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "integer":
|
||||
|
|
@ -190,9 +224,7 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as number)?.toString() ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required integer fields
|
||||
// This preserves the distinction between 0 and unset
|
||||
if (!val && !propSchema.required) {
|
||||
if (!val && !isRequired) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
const num = Number(val);
|
||||
|
|
@ -203,7 +235,7 @@ const DynamicJsonForm = ({
|
|||
}
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "boolean":
|
||||
|
|
@ -213,9 +245,135 @@ const DynamicJsonForm = ({
|
|||
checked={(currentValue as boolean) ?? false}
|
||||
onChange={(e) => handleFieldChange(path, e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "object":
|
||||
if (!propSchema.properties) {
|
||||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(currentValue ?? {}, null, 2)}
|
||||
onChange={(newValue) => {
|
||||
try {
|
||||
const parsed = JSON.parse(newValue);
|
||||
handleFieldChange(path, parsed);
|
||||
setJsonError(undefined);
|
||||
} catch (err) {
|
||||
setJsonError(
|
||||
err instanceof Error ? err.message : "Invalid JSON",
|
||||
);
|
||||
}
|
||||
}}
|
||||
error={jsonError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2 border rounded p-3">
|
||||
{Object.entries(propSchema.properties).map(([key, subSchema]) => (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
{key}
|
||||
{propSchema.required?.includes(key) && (
|
||||
<span className="text-red-500 ml-1">*</span>
|
||||
)}
|
||||
</label>
|
||||
{renderFormFields(
|
||||
subSchema as JsonSchemaType,
|
||||
(currentValue as Record<string, JsonValue>)?.[key],
|
||||
[...path, key],
|
||||
depth + 1,
|
||||
propSchema,
|
||||
key,
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
case "array": {
|
||||
const arrayValue = Array.isArray(currentValue) ? currentValue : [];
|
||||
if (!propSchema.items) return null;
|
||||
|
||||
// If the array items are simple, render as form fields, otherwise use JSON editor
|
||||
if (isSimpleObject(propSchema.items)) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{propSchema.description && (
|
||||
<p className="text-sm text-gray-600">
|
||||
{propSchema.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{propSchema.items?.description && (
|
||||
<p className="text-sm text-gray-500">
|
||||
Items: {propSchema.items.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{arrayValue.map((item, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
{renderFormFields(
|
||||
propSchema.items as JsonSchemaType,
|
||||
item,
|
||||
[...path, index.toString()],
|
||||
depth + 1,
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newArray = [...arrayValue];
|
||||
newArray.splice(index, 1);
|
||||
handleFieldChange(path, newArray);
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const defaultValue = getArrayItemDefault(
|
||||
propSchema.items as JsonSchemaType,
|
||||
);
|
||||
handleFieldChange(path, [...arrayValue, defaultValue]);
|
||||
}}
|
||||
title={
|
||||
propSchema.items?.description
|
||||
? `Add new ${propSchema.items.description}`
|
||||
: "Add new item"
|
||||
}
|
||||
>
|
||||
Add Item
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// For complex arrays, fall back to JSON editor
|
||||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(currentValue ?? [], null, 2)}
|
||||
onChange={(newValue) => {
|
||||
try {
|
||||
const parsed = JSON.parse(newValue);
|
||||
handleFieldChange(path, parsed);
|
||||
setJsonError(undefined);
|
||||
} catch (err) {
|
||||
setJsonError(
|
||||
err instanceof Error ? err.message : "Invalid JSON",
|
||||
);
|
||||
}
|
||||
}}
|
||||
error={jsonError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -246,19 +404,64 @@ const DynamicJsonForm = ({
|
|||
}
|
||||
}, [shouldUseJsonMode, isJsonMode]);
|
||||
|
||||
const handleCopyJson = useCallback(() => {
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(
|
||||
JSON.stringify(value, null, 2) ?? "[]",
|
||||
);
|
||||
setCopiedJson(true);
|
||||
|
||||
toast({
|
||||
title: "JSON copied",
|
||||
description:
|
||||
"The JSON data has been successfully copied to your clipboard.",
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setCopiedJson(false);
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
copyToClipboard();
|
||||
}, [toast, value]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-end space-x-2">
|
||||
{isJsonMode && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={formatJson}
|
||||
>
|
||||
Format JSON
|
||||
</Button>
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCopyJson}
|
||||
>
|
||||
{copiedJson ? (
|
||||
<CheckCheck className="h-4 w-4 mr-2" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Copy JSON
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={formatJson}
|
||||
>
|
||||
Format JSON
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isOnlyJSON && (
|
||||
<Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
|
||||
{isJsonMode ? "Switch to Form" : "Switch to JSON"}
|
||||
|
|
|
|||
155
client/src/components/HistoryAndNotifications.tsx
Normal file
155
client/src/components/HistoryAndNotifications.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { useState } from "react";
|
||||
import JsonView from "./JsonView";
|
||||
|
||||
const HistoryAndNotifications = ({
|
||||
requestHistory,
|
||||
serverNotifications,
|
||||
}: {
|
||||
requestHistory: Array<{ request: string; response?: string }>;
|
||||
serverNotifications: ServerNotification[];
|
||||
}) => {
|
||||
const [expandedRequests, setExpandedRequests] = useState<{
|
||||
[key: number]: boolean;
|
||||
}>({});
|
||||
const [expandedNotifications, setExpandedNotifications] = useState<{
|
||||
[key: number]: boolean;
|
||||
}>({});
|
||||
|
||||
const toggleRequestExpansion = (index: number) => {
|
||||
setExpandedRequests((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
const toggleNotificationExpansion = (index: number) => {
|
||||
setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card overflow-hidden flex h-full">
|
||||
<div className="flex-1 overflow-y-auto p-4 border-r">
|
||||
<h2 className="text-lg font-semibold mb-4">History</h2>
|
||||
{requestHistory.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
No history yet
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{requestHistory
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((request, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleRequestExpansion(requestHistory.length - 1 - index)
|
||||
}
|
||||
>
|
||||
<span className="font-mono">
|
||||
{requestHistory.length - index}.{" "}
|
||||
{JSON.parse(request.request).method}
|
||||
</span>
|
||||
<span>
|
||||
{expandedRequests[requestHistory.length - 1 - index]
|
||||
? "▼"
|
||||
: "▶"}
|
||||
</span>
|
||||
</div>
|
||||
{expandedRequests[requestHistory.length - 1 - index] && (
|
||||
<>
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-blue-600">
|
||||
Request:
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<JsonView
|
||||
data={request.request}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
{request.response && (
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-green-600">
|
||||
Response:
|
||||
</span>
|
||||
</div>
|
||||
<JsonView
|
||||
data={request.response}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
|
||||
{serverNotifications.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
No notifications yet
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{serverNotifications
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((notification, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleNotificationExpansion(
|
||||
serverNotifications.length - 1 - index,
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="font-mono">
|
||||
{serverNotifications.length - index}.{" "}
|
||||
{notification.method}
|
||||
</span>
|
||||
<span>
|
||||
{expandedNotifications[
|
||||
serverNotifications.length - 1 - index
|
||||
]
|
||||
? "▼"
|
||||
: "▶"}
|
||||
</span>
|
||||
</div>
|
||||
{expandedNotifications[
|
||||
serverNotifications.length - 1 - index
|
||||
] && (
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-purple-600">
|
||||
Details:
|
||||
</span>
|
||||
</div>
|
||||
<JsonView
|
||||
data={JSON.stringify(notification, null, 2)}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryAndNotifications;
|
||||
|
|
@ -98,12 +98,12 @@ const PromptsTab = ({
|
|||
setPromptArgs({});
|
||||
}}
|
||||
renderItem={(prompt) => (
|
||||
<>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="flex-1">{prompt.name}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
<span className="text-sm text-gray-500 text-left">
|
||||
{prompt.description}
|
||||
</span>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
title="Prompts"
|
||||
buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { TabsContent } from "@/components/ui/tabs";
|
|||
import { Textarea } from "@/components/ui/textarea";
|
||||
import DynamicJsonForm from "./DynamicJsonForm";
|
||||
import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
|
||||
import { generateDefaultValue } from "@/utils/schemaUtils";
|
||||
import { generateDefaultValue, isPropertyRequired } from "@/utils/schemaUtils";
|
||||
import {
|
||||
CompatibilityCallToolResult,
|
||||
ListToolsResult,
|
||||
|
|
@ -48,7 +48,11 @@ const ToolsTab = ({
|
|||
selectedTool?.inputSchema.properties ?? [],
|
||||
).map(([key, value]) => [
|
||||
key,
|
||||
generateDefaultValue(value as JsonSchemaType),
|
||||
generateDefaultValue(
|
||||
value as JsonSchemaType,
|
||||
key,
|
||||
selectedTool?.inputSchema as JsonSchemaType,
|
||||
),
|
||||
]);
|
||||
setParams(Object.fromEntries(params));
|
||||
}, [selectedTool]);
|
||||
|
|
@ -92,6 +96,9 @@ const ToolsTab = ({
|
|||
{Object.entries(selectedTool.inputSchema.properties ?? []).map(
|
||||
([key, value]) => {
|
||||
const prop = value as JsonSchemaType;
|
||||
const inputSchema =
|
||||
selectedTool.inputSchema as JsonSchemaType;
|
||||
const required = isPropertyRequired(key, inputSchema);
|
||||
return (
|
||||
<div key={key}>
|
||||
<Label
|
||||
|
|
@ -99,6 +106,9 @@ const ToolsTab = ({
|
|||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{key}
|
||||
{required && (
|
||||
<span className="text-red-500 ml-1">*</span>
|
||||
)}
|
||||
</Label>
|
||||
{prop.type === "boolean" ? (
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
|
|
@ -163,12 +173,13 @@ const ToolsTab = ({
|
|||
name={key}
|
||||
placeholder={prop.description}
|
||||
value={(params[key] as string) ?? ""}
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setParams({
|
||||
...params,
|
||||
[key]: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
[key]: value === "" ? "" : Number(value),
|
||||
});
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
256
client/src/components/__tests__/DynamicJsonForm.array.test.tsx
Normal file
256
client/src/components/__tests__/DynamicJsonForm.array.test.tsx
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, expect, jest } from "@jest/globals";
|
||||
import DynamicJsonForm from "../DynamicJsonForm";
|
||||
import type { JsonSchemaType } from "@/utils/jsonUtils";
|
||||
|
||||
describe("DynamicJsonForm Array Fields", () => {
|
||||
const renderSimpleArrayForm = (props = {}) => {
|
||||
const defaultProps = {
|
||||
schema: {
|
||||
type: "array" as const,
|
||||
description: "Test array field",
|
||||
items: {
|
||||
type: "string" as const,
|
||||
description: "Array item",
|
||||
},
|
||||
} satisfies JsonSchemaType,
|
||||
value: [],
|
||||
onChange: jest.fn(),
|
||||
};
|
||||
return render(<DynamicJsonForm {...defaultProps} {...props} />);
|
||||
};
|
||||
|
||||
const renderComplexArrayForm = (props = {}) => {
|
||||
const defaultProps = {
|
||||
schema: {
|
||||
type: "array" as const,
|
||||
description: "Test complex array field",
|
||||
items: {
|
||||
type: "object" as const,
|
||||
properties: {
|
||||
nested: { type: "object" as const },
|
||||
},
|
||||
},
|
||||
} satisfies JsonSchemaType,
|
||||
value: [],
|
||||
onChange: jest.fn(),
|
||||
};
|
||||
return render(<DynamicJsonForm {...defaultProps} {...props} />);
|
||||
};
|
||||
|
||||
describe("Simple Array Rendering", () => {
|
||||
it("should render form fields for simple array items", () => {
|
||||
renderSimpleArrayForm({ value: ["item1", "item2"] });
|
||||
|
||||
// Should show array description
|
||||
expect(screen.getByText("Test array field")).toBeDefined();
|
||||
expect(screen.getByText("Items: Array item")).toBeDefined();
|
||||
|
||||
// Should show input fields for each item
|
||||
const inputs = screen.getAllByRole("textbox");
|
||||
expect(inputs).toHaveLength(2);
|
||||
expect(inputs[0]).toHaveProperty("value", "item1");
|
||||
expect(inputs[1]).toHaveProperty("value", "item2");
|
||||
|
||||
// Should show remove buttons
|
||||
const removeButtons = screen.getAllByText("Remove");
|
||||
expect(removeButtons).toHaveLength(2);
|
||||
|
||||
// Should show add button
|
||||
expect(screen.getByText("Add Item")).toBeDefined();
|
||||
});
|
||||
|
||||
it("should add new items when Add Item button is clicked", () => {
|
||||
const onChange = jest.fn();
|
||||
renderSimpleArrayForm({ value: ["item1"], onChange });
|
||||
|
||||
const addButton = screen.getByText("Add Item");
|
||||
fireEvent.click(addButton);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(["item1", ""]);
|
||||
});
|
||||
|
||||
it("should remove items when Remove button is clicked", () => {
|
||||
const onChange = jest.fn();
|
||||
renderSimpleArrayForm({ value: ["item1", "item2"], onChange });
|
||||
|
||||
const removeButtons = screen.getAllByText("Remove");
|
||||
fireEvent.click(removeButtons[0]);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(["item2"]);
|
||||
});
|
||||
|
||||
it("should update item values when input changes", () => {
|
||||
const onChange = jest.fn();
|
||||
renderSimpleArrayForm({ value: ["item1"], onChange });
|
||||
|
||||
const input = screen.getByRole("textbox");
|
||||
fireEvent.change(input, { target: { value: "updated item" } });
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(["updated item"]);
|
||||
});
|
||||
|
||||
it("should handle empty arrays", () => {
|
||||
renderSimpleArrayForm({ value: [] });
|
||||
|
||||
// Should show description and add button but no items
|
||||
expect(screen.getByText("Test array field")).toBeDefined();
|
||||
expect(screen.getByText("Add Item")).toBeDefined();
|
||||
expect(screen.queryByText("Remove")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Complex Array Fallback", () => {
|
||||
it("should render JSON editor for complex arrays", () => {
|
||||
renderComplexArrayForm();
|
||||
|
||||
// Should render as JSON editor (textarea)
|
||||
const textarea = screen.getByRole("textbox");
|
||||
expect(textarea).toHaveProperty("type", "textarea");
|
||||
|
||||
// Should not show form-specific array controls
|
||||
expect(screen.queryByText("Add Item")).toBeNull();
|
||||
expect(screen.queryByText("Remove")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Array Type Detection", () => {
|
||||
it("should detect string arrays as simple", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "string" as const },
|
||||
};
|
||||
renderSimpleArrayForm({ schema, value: ["test"] });
|
||||
|
||||
// Should render form fields, not JSON editor
|
||||
expect(screen.getByRole("textbox")).not.toHaveProperty(
|
||||
"type",
|
||||
"textarea",
|
||||
);
|
||||
});
|
||||
|
||||
it("should detect number arrays as simple", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "number" as const },
|
||||
};
|
||||
renderSimpleArrayForm({ schema, value: [1, 2] });
|
||||
|
||||
// Should render form fields (number inputs)
|
||||
const inputs = screen.getAllByRole("spinbutton");
|
||||
expect(inputs).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should detect boolean arrays as simple", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "boolean" as const },
|
||||
};
|
||||
renderSimpleArrayForm({ schema, value: [true, false] });
|
||||
|
||||
// Should render form fields (checkboxes)
|
||||
const checkboxes = screen.getAllByRole("checkbox");
|
||||
expect(checkboxes).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should detect simple object arrays as simple", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: {
|
||||
type: "object" as const,
|
||||
properties: {
|
||||
name: { type: "string" as const },
|
||||
age: { type: "number" as const },
|
||||
},
|
||||
},
|
||||
};
|
||||
renderSimpleArrayForm({ schema, value: [{ name: "John", age: 30 }] });
|
||||
|
||||
// Should render form fields for simple objects
|
||||
expect(screen.getByText("Add Item")).toBeDefined();
|
||||
expect(screen.getByText("Remove")).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Array with Different Item Types", () => {
|
||||
it("should handle integer array items", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "integer" as const },
|
||||
};
|
||||
const onChange = jest.fn();
|
||||
renderSimpleArrayForm({ schema, value: [1, 2], onChange });
|
||||
|
||||
const inputs = screen.getAllByRole("spinbutton");
|
||||
expect(inputs).toHaveLength(2);
|
||||
expect(inputs[0]).toHaveProperty("value", "1");
|
||||
expect(inputs[1]).toHaveProperty("value", "2");
|
||||
|
||||
// Test adding new integer item
|
||||
const addButton = screen.getByText("Add Item");
|
||||
fireEvent.click(addButton);
|
||||
expect(onChange).toHaveBeenCalledWith([1, 2, 0]);
|
||||
});
|
||||
|
||||
it("should handle boolean array items", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "boolean" as const },
|
||||
};
|
||||
const onChange = jest.fn();
|
||||
renderSimpleArrayForm({ schema, value: [true, false], onChange });
|
||||
|
||||
const checkboxes = screen.getAllByRole("checkbox");
|
||||
expect(checkboxes).toHaveLength(2);
|
||||
expect(checkboxes[0]).toHaveProperty("checked", true);
|
||||
expect(checkboxes[1]).toHaveProperty("checked", false);
|
||||
|
||||
// Test adding new boolean item
|
||||
const addButton = screen.getByText("Add Item");
|
||||
fireEvent.click(addButton);
|
||||
expect(onChange).toHaveBeenCalledWith([true, false, false]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Array Item Descriptions", () => {
|
||||
it("should show item description when available", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
description: "List of names",
|
||||
items: {
|
||||
type: "string" as const,
|
||||
description: "Person name",
|
||||
},
|
||||
};
|
||||
renderSimpleArrayForm({ schema });
|
||||
|
||||
expect(screen.getByText("List of names")).toBeDefined();
|
||||
expect(screen.getByText("Items: Person name")).toBeDefined();
|
||||
});
|
||||
|
||||
it("should use item description in add button title", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: {
|
||||
type: "string" as const,
|
||||
description: "Email address",
|
||||
},
|
||||
};
|
||||
renderSimpleArrayForm({ schema });
|
||||
|
||||
const addButton = screen.getByText("Add Item");
|
||||
expect(addButton).toHaveProperty("title", "Add new Email address");
|
||||
});
|
||||
|
||||
it("should use default title when no item description", () => {
|
||||
const schema = {
|
||||
type: "array" as const,
|
||||
items: { type: "string" as const },
|
||||
};
|
||||
renderSimpleArrayForm({ schema });
|
||||
|
||||
const addButton = screen.getByText("Add Item");
|
||||
expect(addButton).toHaveProperty("title", "Add new item");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -117,8 +117,11 @@ describe("DynamicJsonForm Complex Fields", () => {
|
|||
const input = screen.getByRole("textbox");
|
||||
expect(input).toHaveProperty("type", "textarea");
|
||||
const buttons = screen.getAllByRole("button");
|
||||
expect(buttons).toHaveLength(1);
|
||||
expect(buttons[0]).toHaveProperty("textContent", "Format JSON");
|
||||
expect(buttons).toHaveLength(2); // Copy JSON + Format JSON
|
||||
const copyButton = screen.getByRole("button", { name: /copy json/i });
|
||||
const formatButton = screen.getByRole("button", { name: /format json/i });
|
||||
expect(copyButton).toBeTruthy();
|
||||
expect(formatButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should pass changed values to onChange", () => {
|
||||
|
|
@ -137,3 +140,72 @@ describe("DynamicJsonForm Complex Fields", () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("DynamicJsonForm Copy JSON Functionality", () => {
|
||||
const mockWriteText = jest.fn(() => Promise.resolve());
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
Object.assign(navigator, {
|
||||
clipboard: {
|
||||
writeText: mockWriteText,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const renderFormInJsonMode = (props = {}) => {
|
||||
const defaultProps = {
|
||||
schema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
nested: { oneOf: [{ type: "string" }, { type: "integer" }] },
|
||||
},
|
||||
} as unknown as JsonSchemaType,
|
||||
value: { nested: "test value" },
|
||||
onChange: jest.fn(),
|
||||
};
|
||||
return render(<DynamicJsonForm {...defaultProps} {...props} />);
|
||||
};
|
||||
|
||||
describe("Copy JSON Button", () => {
|
||||
it("should render Copy JSON button when in JSON mode", () => {
|
||||
renderFormInJsonMode();
|
||||
|
||||
const copyButton = screen.getByRole("button", { name: "Copy JSON" });
|
||||
expect(copyButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should not render Copy JSON button when not in JSON mode", () => {
|
||||
const simpleSchema = {
|
||||
type: "string" as const,
|
||||
description: "Test string field",
|
||||
};
|
||||
|
||||
render(
|
||||
<DynamicJsonForm
|
||||
schema={simpleSchema}
|
||||
value="test"
|
||||
onChange={jest.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const copyButton = screen.queryByRole("button", { name: "Copy JSON" });
|
||||
expect(copyButton).toBeNull();
|
||||
});
|
||||
|
||||
it("should copy JSON to clipboard when clicked", async () => {
|
||||
const testValue = { nested: "test value", number: 42 };
|
||||
|
||||
renderFormInJsonMode({ value: testValue });
|
||||
|
||||
const copyButton = screen.getByRole("button", { name: "Copy JSON" });
|
||||
fireEvent.click(copyButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockWriteText).toHaveBeenCalledWith(
|
||||
JSON.stringify(testValue, null, 2),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
226
client/src/components/__tests__/HistoryAndNotifications.test.tsx
Normal file
226
client/src/components/__tests__/HistoryAndNotifications.test.tsx
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, expect, jest } from "@jest/globals";
|
||||
import HistoryAndNotifications from "../HistoryAndNotifications";
|
||||
import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
|
||||
|
||||
// Mock JsonView component
|
||||
jest.mock("../JsonView", () => {
|
||||
return function JsonView({ data }: { data: string }) {
|
||||
return <div data-testid="json-view">{data}</div>;
|
||||
};
|
||||
});
|
||||
|
||||
describe("HistoryAndNotifications", () => {
|
||||
const mockRequestHistory = [
|
||||
{
|
||||
request: JSON.stringify({ method: "test/method1", params: {} }),
|
||||
response: JSON.stringify({ result: "success" }),
|
||||
},
|
||||
{
|
||||
request: JSON.stringify({ method: "test/method2", params: {} }),
|
||||
response: JSON.stringify({ result: "success" }),
|
||||
},
|
||||
];
|
||||
|
||||
const mockNotifications: ServerNotification[] = [
|
||||
{
|
||||
method: "notifications/message",
|
||||
params: {
|
||||
level: "info" as const,
|
||||
message: "First notification",
|
||||
},
|
||||
},
|
||||
{
|
||||
method: "notifications/progress",
|
||||
params: {
|
||||
progressToken: "test-token",
|
||||
progress: 50,
|
||||
message: "Second notification",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
it("renders history and notifications sections", () => {
|
||||
render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={mockRequestHistory}
|
||||
serverNotifications={mockNotifications}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("History")).toBeTruthy();
|
||||
expect(screen.getByText("Server Notifications")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("displays request history items with correct numbering", () => {
|
||||
render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={mockRequestHistory}
|
||||
serverNotifications={[]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Items should be numbered in reverse order (newest first)
|
||||
expect(screen.getByText("2. test/method2")).toBeTruthy();
|
||||
expect(screen.getByText("1. test/method1")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("displays server notifications with correct numbering", () => {
|
||||
render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={[]}
|
||||
serverNotifications={mockNotifications}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Items should be numbered in reverse order (newest first)
|
||||
expect(screen.getByText("2. notifications/progress")).toBeTruthy();
|
||||
expect(screen.getByText("1. notifications/message")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("expands and collapses request items when clicked", () => {
|
||||
render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={mockRequestHistory}
|
||||
serverNotifications={[]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const firstRequestHeader = screen.getByText("2. test/method2");
|
||||
|
||||
// Initially collapsed - should show ▶ arrows (there are multiple)
|
||||
expect(screen.getAllByText("▶")).toHaveLength(2);
|
||||
expect(screen.queryByText("Request:")).toBeNull();
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(firstRequestHeader);
|
||||
|
||||
// Should now be expanded - one ▼ and one ▶
|
||||
expect(screen.getByText("▼")).toBeTruthy();
|
||||
expect(screen.getAllByText("▶")).toHaveLength(1);
|
||||
expect(screen.getByText("Request:")).toBeTruthy();
|
||||
expect(screen.getByText("Response:")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("expands and collapses notification items when clicked", () => {
|
||||
render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={[]}
|
||||
serverNotifications={mockNotifications}
|
||||
/>,
|
||||
);
|
||||
|
||||
const firstNotificationHeader = screen.getByText(
|
||||
"2. notifications/progress",
|
||||
);
|
||||
|
||||
// Initially collapsed
|
||||
expect(screen.getAllByText("▶")).toHaveLength(2);
|
||||
expect(screen.queryByText("Details:")).toBeNull();
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(firstNotificationHeader);
|
||||
|
||||
// Should now be expanded
|
||||
expect(screen.getByText("▼")).toBeTruthy();
|
||||
expect(screen.getAllByText("▶")).toHaveLength(1);
|
||||
expect(screen.getByText("Details:")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("maintains expanded state when new notifications are added", () => {
|
||||
const { rerender } = render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={[]}
|
||||
serverNotifications={mockNotifications}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Find and expand the older notification (should be "1. notifications/message")
|
||||
const olderNotificationHeader = screen.getByText(
|
||||
"1. notifications/message",
|
||||
);
|
||||
fireEvent.click(olderNotificationHeader);
|
||||
|
||||
// Verify it's expanded
|
||||
expect(screen.getByText("Details:")).toBeTruthy();
|
||||
|
||||
// Add a new notification at the beginning (simulating real behavior)
|
||||
const newNotifications: ServerNotification[] = [
|
||||
{
|
||||
method: "notifications/resources/updated",
|
||||
params: { uri: "file://test.txt" },
|
||||
},
|
||||
...mockNotifications,
|
||||
];
|
||||
|
||||
// Re-render with new notifications
|
||||
rerender(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={[]}
|
||||
serverNotifications={newNotifications}
|
||||
/>,
|
||||
);
|
||||
|
||||
// The original notification should still be expanded
|
||||
// It's now numbered as "2. notifications/message" due to the new item
|
||||
expect(screen.getByText("3. notifications/progress")).toBeTruthy();
|
||||
expect(screen.getByText("2. notifications/message")).toBeTruthy();
|
||||
expect(screen.getByText("1. notifications/resources/updated")).toBeTruthy();
|
||||
|
||||
// The originally expanded notification should still show its details
|
||||
expect(screen.getByText("Details:")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("maintains expanded state when new requests are added", () => {
|
||||
const { rerender } = render(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={mockRequestHistory}
|
||||
serverNotifications={[]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Find and expand the older request (should be "1. test/method1")
|
||||
const olderRequestHeader = screen.getByText("1. test/method1");
|
||||
fireEvent.click(olderRequestHeader);
|
||||
|
||||
// Verify it's expanded
|
||||
expect(screen.getByText("Request:")).toBeTruthy();
|
||||
expect(screen.getByText("Response:")).toBeTruthy();
|
||||
|
||||
// Add a new request at the beginning
|
||||
const newRequestHistory = [
|
||||
{
|
||||
request: JSON.stringify({ method: "test/new_method", params: {} }),
|
||||
response: JSON.stringify({ result: "new success" }),
|
||||
},
|
||||
...mockRequestHistory,
|
||||
];
|
||||
|
||||
// Re-render with new request history
|
||||
rerender(
|
||||
<HistoryAndNotifications
|
||||
requestHistory={newRequestHistory}
|
||||
serverNotifications={[]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// The original request should still be expanded
|
||||
// It's now numbered as "2. test/method1" due to the new item
|
||||
expect(screen.getByText("3. test/method2")).toBeTruthy();
|
||||
expect(screen.getByText("2. test/method1")).toBeTruthy();
|
||||
expect(screen.getByText("1. test/new_method")).toBeTruthy();
|
||||
|
||||
// The originally expanded request should still show its details
|
||||
expect(screen.getByText("Request:")).toBeTruthy();
|
||||
expect(screen.getByText("Response:")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("displays empty state messages when no data is available", () => {
|
||||
render(
|
||||
<HistoryAndNotifications requestHistory={[]} serverNotifications={[]} />,
|
||||
);
|
||||
|
||||
expect(screen.getByText("No history yet")).toBeTruthy();
|
||||
expect(screen.getByText("No notifications yet")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -111,6 +111,27 @@ describe("ToolsTab", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("should allow typing negative numbers", async () => {
|
||||
renderToolsTab({
|
||||
selectedTool: mockTools[0],
|
||||
});
|
||||
|
||||
const input = screen.getByRole("spinbutton") as HTMLInputElement;
|
||||
|
||||
// Complete the negative number
|
||||
fireEvent.change(input, { target: { value: "-42" } });
|
||||
expect(input.value).toBe("-42");
|
||||
|
||||
const submitButton = screen.getByRole("button", { name: /run tool/i });
|
||||
await act(async () => {
|
||||
fireEvent.click(submitButton);
|
||||
});
|
||||
|
||||
expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[0].name, {
|
||||
num: -42,
|
||||
});
|
||||
});
|
||||
|
||||
it("should disable button and change text while tool is running", async () => {
|
||||
// Create a promise that we can resolve later
|
||||
let resolvePromise: ((value: unknown) => void) | undefined;
|
||||
|
|
|
|||
|
|
@ -11,72 +11,68 @@ import type { Tool } from "@modelcontextprotocol/sdk/types.js";
|
|||
|
||||
describe("generateDefaultValue", () => {
|
||||
test("generates default string", () => {
|
||||
expect(generateDefaultValue({ type: "string", required: true })).toBe("");
|
||||
const parentSchema = { type: "object" as const, required: ["testProp"] };
|
||||
expect(
|
||||
generateDefaultValue({ type: "string" }, "testProp", parentSchema),
|
||||
).toBe("");
|
||||
});
|
||||
|
||||
test("generates default number", () => {
|
||||
expect(generateDefaultValue({ type: "number", required: true })).toBe(0);
|
||||
const parentSchema = { type: "object" as const, required: ["testProp"] };
|
||||
expect(
|
||||
generateDefaultValue({ type: "number" }, "testProp", parentSchema),
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test("generates default integer", () => {
|
||||
expect(generateDefaultValue({ type: "integer", required: true })).toBe(0);
|
||||
const parentSchema = { type: "object" as const, required: ["testProp"] };
|
||||
expect(
|
||||
generateDefaultValue({ type: "integer" }, "testProp", parentSchema),
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test("generates default boolean", () => {
|
||||
expect(generateDefaultValue({ type: "boolean", required: true })).toBe(
|
||||
false,
|
||||
);
|
||||
const parentSchema = { type: "object" as const, required: ["testProp"] };
|
||||
expect(
|
||||
generateDefaultValue({ type: "boolean" }, "testProp", parentSchema),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
test("generates default array", () => {
|
||||
expect(generateDefaultValue({ type: "array", required: true })).toEqual([]);
|
||||
expect(generateDefaultValue({ type: "array" })).toEqual([]);
|
||||
});
|
||||
|
||||
test("generates default empty object", () => {
|
||||
expect(generateDefaultValue({ type: "object", required: true })).toEqual(
|
||||
{},
|
||||
);
|
||||
expect(generateDefaultValue({ type: "object" })).toEqual({});
|
||||
});
|
||||
|
||||
test("generates default null for unknown types", () => {
|
||||
// @ts-expect-error Testing with invalid type
|
||||
expect(generateDefaultValue({ type: "unknown", required: true })).toBe(
|
||||
null,
|
||||
);
|
||||
expect(generateDefaultValue({ type: "unknown" })).toBe(undefined);
|
||||
});
|
||||
|
||||
test("generates empty array for non-required array", () => {
|
||||
expect(generateDefaultValue({ type: "array", required: false })).toEqual(
|
||||
[],
|
||||
);
|
||||
expect(generateDefaultValue({ type: "array" })).toEqual([]);
|
||||
});
|
||||
|
||||
test("generates empty object for non-required object", () => {
|
||||
expect(generateDefaultValue({ type: "object", required: false })).toEqual(
|
||||
{},
|
||||
);
|
||||
expect(generateDefaultValue({ type: "object" })).toEqual({});
|
||||
});
|
||||
|
||||
test("generates null for non-required primitive types", () => {
|
||||
expect(generateDefaultValue({ type: "string", required: false })).toBe(
|
||||
undefined,
|
||||
);
|
||||
expect(generateDefaultValue({ type: "number", required: false })).toBe(
|
||||
undefined,
|
||||
);
|
||||
expect(generateDefaultValue({ type: "boolean", required: false })).toBe(
|
||||
undefined,
|
||||
);
|
||||
test("generates undefined for non-required primitive types", () => {
|
||||
expect(generateDefaultValue({ type: "string" })).toBe(undefined);
|
||||
expect(generateDefaultValue({ type: "number" })).toBe(undefined);
|
||||
expect(generateDefaultValue({ type: "boolean" })).toBe(undefined);
|
||||
});
|
||||
|
||||
test("generates object with properties", () => {
|
||||
const schema: JsonSchemaType = {
|
||||
type: "object",
|
||||
required: true,
|
||||
required: ["name", "age", "isActive"],
|
||||
properties: {
|
||||
name: { type: "string", required: true },
|
||||
age: { type: "number", required: true },
|
||||
isActive: { type: "boolean", required: true },
|
||||
name: { type: "string" },
|
||||
age: { type: "number" },
|
||||
isActive: { type: "boolean" },
|
||||
},
|
||||
};
|
||||
expect(generateDefaultValue(schema)).toEqual({
|
||||
|
|
@ -89,18 +85,18 @@ describe("generateDefaultValue", () => {
|
|||
test("handles nested objects", () => {
|
||||
const schema: JsonSchemaType = {
|
||||
type: "object",
|
||||
required: true,
|
||||
required: ["user"],
|
||||
properties: {
|
||||
user: {
|
||||
type: "object",
|
||||
required: true,
|
||||
required: ["name", "address"],
|
||||
properties: {
|
||||
name: { type: "string", required: true },
|
||||
name: { type: "string" },
|
||||
address: {
|
||||
type: "object",
|
||||
required: true,
|
||||
required: ["city"],
|
||||
properties: {
|
||||
city: { type: "string", required: true },
|
||||
city: { type: "string" },
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,12 +4,27 @@ import {
|
|||
DEFAULT_INSPECTOR_CONFIG,
|
||||
} from "@/lib/constants";
|
||||
|
||||
const getSearchParam = (key: string): string | null => {
|
||||
try {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const getMCPProxyAddress = (config: InspectorConfig): string => {
|
||||
const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value as string;
|
||||
let proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value as string;
|
||||
if (proxyFullAddress) {
|
||||
proxyFullAddress = proxyFullAddress.replace(/\/+$/, "");
|
||||
return proxyFullAddress;
|
||||
}
|
||||
return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
|
||||
|
||||
// Check for proxy port from query params, fallback to default
|
||||
const proxyPort =
|
||||
getSearchParam("MCP_PROXY_PORT") || DEFAULT_MCP_PROXY_LISTEN_PORT;
|
||||
|
||||
return `${window.location.protocol}//${window.location.hostname}:${proxyPort}`;
|
||||
};
|
||||
|
||||
export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
|
||||
|
|
@ -40,15 +55,6 @@ export const getMCPProxyAuthToken = (
|
|||
};
|
||||
};
|
||||
|
||||
const getSearchParam = (key: string): string | null => {
|
||||
try {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const getInitialTransportType = ():
|
||||
| "stdio"
|
||||
| "sse"
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue