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

revert(web): drop custom headers from the manual add form (#1915)

Browse source 
Server Settings already has a Custom Headers editor, so adding one to the
manual add form created a second place to edit the same field. The reporter
had also conditionally withdrawn #1915 — "editing that information from the
server settings dialog is sufficient" once #1848 closed, which it has.

Reverts the add-form editor, the shared KeyValueRows element, the optional
`settings` argument on addServer / updateServer, and the App-level merge
helper. What remains are two defects found while working in
ServerSettingsForm, which this PR now closes instead (#2040): the Custom
Headers hint misstating OAuth precedence, and the key/value rows' missing
accessible names.

Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
cliffhall 2026-08-16 22:57:34 -04:00
commit 4dd8ed4498
4 changed files with 152 additions and 975 deletions
Download patch file Download diff file Expand all files Collapse all files

40
clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.stories.tsx
View file

@ -19,8 +19,8 @@ function InteractiveRender(args: ServerConfigModalProps) {
args.onClose();
updateArgs({ opened: false });
}}
onSubmit={async (id, config, headers) => {
await args.onSubmit(id, config, headers);
onSubmit={async (id, config) => {
await args.onSubmit(id, config);
updateArgs({ opened: false });
}}
/>
@ -134,39 +134,7 @@ export const EditSse: Story = {
const body = within(canvasElement.ownerDocument.body);
const dialog = within(await findDialog(body, "Edit server"));
await expect(await dialog.findByLabelText(/^URL/)).toBeInTheDocument();
// The headers editor starts collapsed to a bare "+ Add Header" control
// when the server has none stored.
await expect(
dialog.getByRole("button", { name: "+ Add Header" }),
).toBeInTheDocument();
await expect(
dialog.queryAllByRole("textbox", { name: /header name/ }),
).toHaveLength(0);
},
};
// Custom headers on the manual form (#1915) — the reason the field exists is a
// cookie routing requests to one developer's branch on a shared dev server.
export const EditSseWithHeaders: Story = {
args: {
mode: "edit",
initialId: "remote",
initialConfig: sseConfig,
initialHeaders: [{ key: "Cookie", value: "branch=feature-x" }],
existingIds: [],
},
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
const dialog = within(await findDialog(body, "Edit server"));
const value = (await dialog.findByRole("textbox", {
name: "header value, Cookie, row 1",
})) as HTMLInputElement;
await expect(value.value).toBe("branch=feature-x");
// Adding a row appends an empty pair, named by position until it is keyed.
await userEvent.click(dialog.getByRole("button", { name: "+ Add Header" }));
await expect(
await dialog.findByRole("textbox", { name: "header name, row 2" }),
).toBeInTheDocument();
// Headers are no longer entered here — they live in ServerSettingsForm.
await expect(dialog.queryByLabelText(/Headers/i)).toBeNull();
},
};

180
clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.test.tsx
View file

@ -66,11 +66,11 @@ describe("ServerConfigModal", () => {
await user.click(screen.getByRole("button", { name: /^Add$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"alpha",
{ type: "stdio", command: "node", args: ["x.js", "--port=3000"] },
[],
);
expect(props.onSubmit).toHaveBeenCalledWith("alpha", {
type: "stdio",
command: "node",
args: ["x.js", "--port=3000"],
});
});
it("requires a command for stdio submission", async () => {
@ -117,7 +117,7 @@ describe("ServerConfigModal", () => {
expect(screen.queryByLabelText(/^Command/)).not.toBeInTheDocument();
});
it("submits an sse config with just the url and no headers", async () => {
it("submits an sse config with just the url (headers move to the settings form)", async () => {
const user = userEvent.setup({ delay: null });
const props = base();
renderWithMantine(
@ -133,11 +133,10 @@ describe("ServerConfigModal", () => {
await user.click(screen.getByRole("button", { name: /^Save$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"remote",
{ type: "sse", url: "https://x.test/sse" },
[],
);
expect(props.onSubmit).toHaveBeenCalledWith("remote", {
type: "sse",
url: "https://x.test/sse",
});
});
it("submits a streamable-http config", async () => {
@ -153,11 +152,10 @@ describe("ServerConfigModal", () => {
);
await user.click(screen.getByRole("button", { name: /^Save$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"http-srv",
{ type: "streamable-http", url: "https://x.test/mcp" },
[],
);
expect(props.onSubmit).toHaveBeenCalledWith("http-srv", {
type: "streamable-http",
url: "https://x.test/mcp",
});
});
it("loads the url from a streamable-http config", () => {
@ -277,11 +275,11 @@ describe("ServerConfigModal", () => {
await user.click(screen.getByRole("button", { name: /^Add$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"alpha",
{ type: "stdio", command: "node", cwd: "/tmp/cwd" },
[],
);
expect(props.onSubmit).toHaveBeenCalledWith("alpha", {
type: "stdio",
command: "node",
cwd: "/tmp/cwd",
});
});
it("clears the Server ID field via its Clear button", async () => {
@ -472,144 +470,4 @@ describe("ServerConfigModal", () => {
await user.click(screen.getByRole("button", { name: /Cancel/ }));
expect(props.onClose).toHaveBeenCalledOnce();
});
describe("custom headers (#1915)", () => {
it("hides the headers section for stdio", () => {
renderWithMantine(<ServerConfigModal {...base()} />);
expect(screen.queryByText("Custom headers")).not.toBeInTheDocument();
});
// Every keystroke re-renders the whole modal, and this case types four
// fields, so it runs several times slower under the coverage project's v8
// instrumentation than in a plain unit run — enough to trip the 5s default.
// The extra ceiling is headroom for the instrumented run, not a hang guard.
const TYPING_HEAVY_TIMEOUT_MS = 20000;
it(
"submits headers added on the manual add form",
async () => {
const user = userEvent.setup({ delay: null });
const props = base();
// Seeded on the http transport rather than driven through the
// Transport select — that select has its own test above, and walking
// its combobox here only added to the cost described above.
renderWithMantine(
<ServerConfigModal
{...props}
initialConfig={{ type: "streamable-http", url: "" }}
/>,
);
await user.type(screen.getByLabelText(/Server ID/i), "remote");
await user.type(screen.getByLabelText(/^URL/), "https://x.test/mcp");
await user.click(screen.getByRole("button", { name: "+ Add Header" }));
await user.type(
screen.getByRole("textbox", { name: /header name, row 1/ }),
"Cookie",
);
await user.type(
screen.getByRole("textbox", { name: /header value, Cookie, row 1/ }),
"branch=feature-x",
);
await user.click(screen.getByRole("button", { name: /^Add$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"remote",
{ type: "streamable-http", url: "https://x.test/mcp" },
[{ key: "Cookie", value: "branch=feature-x" }],
);
},
TYPING_HEAVY_TIMEOUT_MS,
);
it("pre-populates the rows from initialHeaders and submits an edit", async () => {
const user = userEvent.setup({ delay: null });
const props = base();
renderWithMantine(
<ServerConfigModal
{...props}
mode="edit"
initialId="remote"
initialConfig={{ type: "sse", url: "https://x.test/sse" }}
initialHeaders={[{ key: "X-Env", value: "dev" }]}
/>,
);
const valueInput = screen.getByRole("textbox", {
name: /header value, X-Env, row 1/,
});
expect(valueInput).toHaveValue("dev");
await user.type(valueInput, "-2");
await user.click(screen.getByRole("button", { name: /^Save$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"remote",
{ type: "sse", url: "https://x.test/sse" },
[{ key: "X-Env", value: "dev-2" }],
);
});
it("drops blank-key rows and removes a row on X", async () => {
const user = userEvent.setup({ delay: null });
const props = base();
renderWithMantine(
<ServerConfigModal
{...props}
mode="edit"
initialId="remote"
initialConfig={{ type: "sse", url: "https://x.test/sse" }}
initialHeaders={[
{ key: "Keep", value: "1" },
{ key: "Drop", value: "2" },
]}
/>,
);
// An empty row is the form's "still typing" placeholder — it must not
// reach the caller.
await user.click(screen.getByRole("button", { name: "+ Add Header" }));
// Editing one row of several must leave its siblings untouched.
await user.type(
screen.getByRole("textbox", { name: "header value, Keep, row 1" }),
"9",
);
await user.click(
screen.getByRole("button", { name: "Remove header, Drop, row 2" }),
);
await user.click(screen.getByRole("button", { name: /^Save$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"remote",
{ type: "sse", url: "https://x.test/sse" },
[{ key: "Keep", value: "19" }],
);
});
it("submits no headers for stdio even when initialHeaders is set", async () => {
const user = userEvent.setup({ delay: null });
const props = base();
renderWithMantine(
<ServerConfigModal
{...props}
mode="edit"
initialId="local"
initialConfig={{ type: "stdio", command: "node" }}
initialHeaders={[{ key: "X-Env", value: "dev" }]}
/>,
);
await user.click(screen.getByRole("button", { name: /^Save$/ }));
await waitFor(() => expect(props.onSubmit).toHaveBeenCalledOnce());
expect(props.onSubmit).toHaveBeenCalledWith(
"local",
{ type: "stdio", command: "node" },
[],
);
});
});
});

129
clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.tsx
View file

@ -10,10 +10,6 @@ import {
Textarea,
} from "@mantine/core";
import { ClearButton } from "../../elements/ClearButton/ClearButton";
import {
KeyValueRows,
type KeyValuePair,
} from "../../elements/KeyValueRows/KeyValueRows";
import { useValueChange } from "../../../hooks/useValueChange";
import type {
MCPServerConfig,
@ -32,27 +28,11 @@ export interface ServerConfigModalProps {
initialId?: string;
/** When editing or cloning, the existing config to pre-populate. */
initialConfig?: MCPServerConfig;
/**
* Custom HTTP headers already stored for the target server, pre-populated
* when editing or cloning. Headers are not part of `MCPServerConfig` — they
* live on the entry's `settings`, so they arrive (and leave, via `onSubmit`)
* as their own value rather than folded into the config. (#1915)
*/
initialHeaders?: KeyValuePair[];
/** Ids already in use — drives the uniqueness check (caller excludes the
* target id from this list when in 'edit' mode). */
existingIds: string[];
onClose: () => void;
/**
* `headers` carries the edited custom-header rows (blank-key rows already
* dropped). It is always `[]` for stdio, which has no HTTP request to attach
* headers to.
*/
onSubmit: (
id: string,
config: MCPServerConfig,
headers: KeyValuePair[],
) => Promise<void> | void;
onSubmit: (id: string, config: MCPServerConfig) => Promise<void> | void;
}
type TransportChoice = "stdio" | "sse" | "streamable-http";
@ -67,8 +47,6 @@ interface FormState {
cwd: string;
// sse / streamable-http
url: string;
/** Custom HTTP headers — sse / streamable-http only. (#1915) */
headers: KeyValuePair[];
}
// The `string`-valued FormState keys, which all share the same text-input
@ -106,10 +84,6 @@ const EnvTextarea = Textarea.withProps({
minRows: 2,
rightSectionPointerEvents: "auto",
});
const AddHeaderButton = Button.withProps({ size: "xs", variant: "light" });
const HeadersHeader = Group.withProps({ justify: "space-between", gap: "sm" });
const HeadersLabel = Text.withProps({ size: "sm", fw: 500 });
const HeadersHint = Text.withProps({ size: "xs", c: "dimmed" });
const MODE_TITLES: Record<ServerConfigModalMode, string> = {
add: "Add server",
@ -120,14 +94,9 @@ const MODE_TITLES: Record<ServerConfigModalMode, string> = {
function configToFormState(
initialId: string | undefined,
initialConfig: MCPServerConfig | undefined,
initialHeaders: KeyValuePair[] | undefined,
mode: ServerConfigModalMode,
): FormState {
const id = mode === "edit" ? (initialId ?? "") : "";
// Copy the rows rather than aliasing the caller's array — the form mutates
// this list as its own state, and a clone keeps a cancelled edit from
// reaching the entry the caller passed in.
const headers = (initialHeaders ?? []).map((h) => ({ ...h }));
const transport: TransportChoice =
initialConfig?.type === undefined ? "stdio" : initialConfig.type;
if (!initialConfig) {
@ -139,7 +108,6 @@ function configToFormState(
envText: "",
cwd: "",
url: "",
headers,
};
}
if (transport === "stdio") {
@ -154,9 +122,9 @@ function configToFormState(
.join("\n"),
cwd: c.cwd ?? "",
url: "",
headers,
};
}
// sse / streamable-http — custom headers live in ServerSettingsForm now.
const url =
initialConfig.type === "sse" || initialConfig.type === "streamable-http"
? initialConfig.url
@ -169,7 +137,6 @@ function configToFormState(
envText: "",
cwd: "",
url: url ?? "",
headers,
};
}
@ -218,14 +185,13 @@ export function ServerConfigModal({
mode,
initialId,
initialConfig,
initialHeaders,
existingIds,
onClose,
onSubmit,
}: ServerConfigModalProps) {
const initial = useMemo(
() => configToFormState(initialId, initialConfig, initialHeaders, mode),
[initialId, initialConfig, initialHeaders, mode],
() => configToFormState(initialId, initialConfig, mode),
[initialId, initialConfig, mode],
);
const [form, setForm] = useState<FormState>(initial);
const [submitError, setSubmitError] = useState<string | undefined>(undefined);
@ -244,22 +210,6 @@ export function ServerConfigModal({
const clearTextField = (field: TextField) => () =>
setForm((f) => ({ ...f, [field]: "" }));
// Header rows are a pair array rather than a plain string, so they get their
// own handlers instead of riding `setTextField` (which `TextField` excludes
// by type).
const addHeader = () =>
setForm((f) => ({ ...f, headers: [...f.headers, { key: "", value: "" }] }));
const removeHeader = (index: number) =>
setForm((f) => ({
...f,
headers: f.headers.filter((_, i) => i !== index),
}));
const changeHeader = (index: number, key: string, value: string) =>
setForm((f) => ({
...f,
headers: f.headers.map((h, i) => (i === index ? { key, value } : h)),
}));
// Reset the form whenever the modal opens, or whenever `initial` changes
// while it is open. Keying on `opened ? initial : undefined` collapses both
// triggers into one value: it flips to `initial` on open, tracks `initial`
@ -313,9 +263,9 @@ export function ServerConfigModal({
return { ok: false, error: "URL is required for sse / streamable-http." };
}
const base = { url: form.url.trim() };
// Custom headers are persisted under `settings.headers` on the entry, not
// on the config — they leave through `onSubmit`'s third argument, so the
// SSE / streamable-http config here carries only transport fields.
// Custom headers live in ServerSettingsForm now (persisted under
// settings.headers on the entry); the SSE / streamable-http config here
// only carries the canonical transport fields.
const config: MCPServerConfig =
form.transport === "sse"
? { type: "sse", ...base }
@ -338,19 +288,9 @@ export function ServerConfigModal({
setSubmitError(built.error);
return;
}
// Blank-key rows are the form's placeholder for "row being typed" and mean
// nothing on the wire — the persist layer drops them anyway, so drop them
// here too and keep the caller's payload honest. stdio has no HTTP request
// to carry headers, so it always submits none.
const headers =
form.transport === "stdio"
? []
: form.headers
.map((h) => ({ key: h.key.trim(), value: h.value }))
.filter((h) => h.key.length > 0);
setSubmitting(true);
try {
await onSubmit(trimmedId, built.config, headers);
await onSubmit(trimmedId, built.config);
onClose();
} catch (err) {
setSubmitError(err instanceof Error ? err.message : String(err));
@ -472,44 +412,21 @@ export function ServerConfigModal({
/>
</>
) : (
<>
<RequiredTextInput
label="URL"
placeholder="https://example.com/mcp"
value={form.url}
onChange={setTextField("url")}
disabled={submitting}
rightSection={
form.url ? (
<ClearButton
disabled={submitting}
onClick={clearTextField("url")}
/>
) : null
}
/>
<FieldGrid>
<HeadersHeader>
<HeadersLabel>Custom headers</HeadersLabel>
<AddHeaderButton onClick={addHeader} disabled={submitting}>
+ Add Header
</AddHeaderButton>
</HeadersHeader>
<HeadersHint>
Sent with every HTTP request to this server — cookies
included. A custom `Authorization` header takes precedence
over an OAuth access token, so remove it if you configure
OAuth for this server later.
</HeadersHint>
<KeyValueRows
items={form.headers}
entityLabel="header"
disabled={submitting}
onChange={changeHeader}
onRemove={removeHeader}
/>
</FieldGrid>
</>
<RequiredTextInput
label="URL"
placeholder="https://example.com/mcp"
value={form.url}
onChange={setTextField("url")}
disabled={submitting}
rightSection={
form.url ? (
<ClearButton
disabled={submitting}
onClick={clearTextField("url")}
/>
) : null
}
/>
)}
</FieldGrid>

79
clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
View file

@ -13,7 +13,6 @@ import {
TextInput,
} from "@mantine/core";
import { ClearButton } from "../../elements/ClearButton/ClearButton";
import { KeyValueRows } from "../../elements/KeyValueRows/KeyValueRows";
import type { ProtocolEra } from "@modelcontextprotocol/client";
import type {
InspectorServerSettings,
@ -224,6 +223,84 @@ const ClearStoredOAuthHint = Text.withProps({
miw: "12rem",
});
function KeyValueRows({
items,
entityLabel,
onChange,
onRemove,
}: {
items: { key: string; value: string }[];
/**
* Singular noun for one row ("header", "environment variable", …). Used only
* to build each control's `aria-label`: the section heading and the "Key" /
* "Value" placeholders are not programmatically associated with the inputs,
* so without it an assistive technology cannot tell one section's key box
* from another's, and every remove button announces only "X". The row number
* rides along because two rows can carry the same key — mid-edit, or a
* duplicate a server persisted — and a key-only name would leave both rows'
* controls indistinguishable, which is the thing this exists to prevent.
*/
entityLabel: string;
onChange: (index: number, key: string, value: string) => void;
onRemove: (index: number) => void;
}) {
/* v8 ignore next 3 -- unreachable: every caller guards with `length === 0`
and renders an EmptyHint instead, so KeyValueRows is only mounted with
a non-empty list. */
if (items.length === 0) {
return null;
}
return (
<>
{items.map((item, index) => {
const key = item.key.trim();
const rowLabel = key ? `${key}, row ${index + 1}` : `row ${index + 1}`;
return (
<Group key={index} grow>
<ClearableTextInput
placeholder="Key"
aria-label={`${entityLabel} name, ${rowLabel}`}
value={item.key}
onChange={(e) =>
onChange(index, e.currentTarget.value, item.value)
}
rightSection={
item.key ? (
<ClearButton
aria-label={`Clear ${entityLabel} name, ${rowLabel}`}
onClick={() => onChange(index, "", item.value)}
/>
) : null
}
/>
<ClearableTextInput
placeholder="Value"
aria-label={`${entityLabel} value, ${rowLabel}`}
value={item.value}
onChange={(e) => onChange(index, item.key, e.currentTarget.value)}
rightSection={
item.value ? (
<ClearButton
aria-label={`Clear ${entityLabel} value, ${rowLabel}`}
onClick={() => onChange(index, item.key, "")}
/>
) : null
}
/>
<RemoveIcon
aria-label={`Remove ${entityLabel}, ${rowLabel}`}
onClick={() => onRemove(index)}
>
X
</RemoveIcon>
</Group>
);
})}
</>
);
}
// Reserved-key rejection is inline per row (#2018): the reason is passed as the
// key input's `error` **string**, so Mantine renders it in the input's own error
// slot and wires the `aria-describedby` association — a bare boolean would mark