modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

refactor: move the JSON-object draft parser into utils

Browse source 
`react-refresh/only-export-components` rejects a non-component export from a
component module, so `parseObjectDraft` could not live beside
`JsonObjectInput`. It is a pure transform, which puts it in `utils` under the
`lib`/`utils` rule anyway.

Also render the metadata hint's inline literals through `<Code>` rather than
markdown backticks, which a Mantine `Text` shows verbatim.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0177mPHAdECD18nLLCTwR5rh
Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
cliffhall 2026-08-23 12:29:27 -04:00
commit 3a64ce7f4e
2 changed files with 101 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

46
clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.test.tsx
View file

@ -4,7 +4,7 @@ import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import type { JsonObject } from "@inspector/core/json/jsonUtils.js";
import { renderWithMantine } from "../../../test/renderWithMantine";
import { JsonObjectInput, parseObjectDraft } from "./JsonObjectInput";
import { JsonObjectInput } from "./JsonObjectInput";
const LABEL = "Payload JSON";
@ -36,50 +36,6 @@ function box() {
return screen.getByLabelText(LABEL) as HTMLTextAreaElement;
}
describe("parseObjectDraft", () => {
it("reads empty text as the empty object rather than an error", () => {
expect(parseObjectDraft("")).toEqual({ ok: true, value: {} });
expect(parseObjectDraft(" \n ")).toEqual({ ok: true, value: {} });
});
it("accepts a JSON object with values of any JSON type", () => {
const result = parseObjectDraft(
'{"s":"a","n":1,"b":true,"z":null,"arr":[1,{"k":2}],"o":{"deep":{"er":1}}}',
);
expect(result).toEqual({
ok: true,
value: {
s: "a",
n: 1,
b: true,
z: null,
arr: [1, { k: 2 }],
o: { deep: { er: 1 } },
},
});
});
it("rejects text that is not JSON", () => {
expect(parseObjectDraft('{"a":')).toEqual({
ok: false,
error: "Not valid JSON — changes are not applied",
});
});
it.each([
["an array", "[1,2]"],
["a string", '"hello"'],
["a number", "42"],
["null", "null"],
])("rejects valid JSON that is not an object: %s", (_label, text) => {
const result = parseObjectDraft(text);
expect(result.ok).toBe(false);
expect(result.ok === false && result.error).toMatch(
/Must be a JSON object/,
);
});
});
describe("JsonObjectInput", () => {
it("opens with the value serialized two-space, nesting intact", () => {
renderWithMantine(<Harness initial={{ a: { b: [1, 2] } }} />);

38
clients/web/src/components/elements/JsonObjectInput/JsonObjectInput.tsx
View file

@ -2,6 +2,7 @@ import { useState } from "react";
import { JsonInput } from "@mantine/core";
import type { JsonObject } from "@inspector/core/json/jsonUtils.js";
import { useValueChange } from "../../../hooks/useValueChange";
import { parseJsonObjectDraft } from "../../../utils/jsonObjectDraft";
const ObjectJsonInput = JsonInput.withProps({
formatOnBlur: true,
@ -15,39 +16,6 @@ function serialize(value: JsonObject): string {
return JSON.stringify(value, null, 2);
}
/** A plain JSON object, i.e. not an array and not a scalar. */
function isJsonObject(value: unknown): value is JsonObject {
return value !== null && typeof value === "object" && !Array.isArray(value);
}
/**
* What a draft's text currently means: the object to emit, or why it can't be.
*
* Empty text is the object `{}` rather than an error — clearing the box is how
* "send no metadata" is spelled, and an empty editor showing a red error would
* read as broken.
*/
type DraftState =
| { ok: true; value: JsonObject }
| { ok: false; error: string };
export function parseObjectDraft(text: string): DraftState {
if (text.trim() === "") return { ok: true, value: {} };
let parsed: unknown;
try {
parsed = JSON.parse(text);
} catch {
return { ok: false, error: "Not valid JSON — changes are not applied" };
}
if (!isJsonObject(parsed)) {
return {
ok: false,
error: "Must be a JSON object (`{ … }`) — changes are not applied",
};
}
return { ok: true, value: parsed };
}
export interface JsonObjectInputProps {
value: JsonObject;
onChange: (value: JsonObject) => void;
@ -92,7 +60,7 @@ export function JsonObjectInput({
// parses to, so an external reset (switching servers, a reloaded catalog)
// reaches the box while an in-progress edit is left alone. Compared through
// canonical JSON because the parent hands back a fresh object each time.
const parsed = parseObjectDraft(draft);
const parsed = parseJsonObjectDraft(draft);
const draftJson = parsed.ok ? serialize(parsed.value) : null;
useValueChange(serialize(value), (next) => {
if (next !== draftJson) setDraft(next);
@ -105,7 +73,7 @@ export function JsonObjectInput({
error={parsed.ok ? undefined : parsed.error}
onChange={(text) => {
setDraft(text);
const result = parseObjectDraft(text);
const result = parseJsonObjectDraft(text);
if (result.ok) onChange(result.value);
}}
/>