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

Remove unused fn() from ServerSettingsForm stories

Browse source 
The Storybook config has no addon-actions/addon-essentials, so fn()
calls never produce visible output. The stories are fully interactive
via useState — add/remove/edit headers, metadata, timeouts, OAuth,
and connection mode all work visually in the UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-21 18:13:40 -04:00
commit a3be456f56
1 changed files with 24 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

68
clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
View file

@ -1,7 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js"; import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import type { Meta, StoryObj } from "@storybook/react-vite"; import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { import {
ServerSettingsForm, ServerSettingsForm,
type ServerSettingsSection, type ServerSettingsSection,
@ -15,16 +14,6 @@ const defaultSettings: InspectorServerSettings = {
requestTimeout: 60000, requestTimeout: 60000,
}; };
const onConnectionModeChange = fn();
const onAddHeader = fn();
const onRemoveHeader = fn();
const onHeaderChange = fn();
const onAddMetadata = fn();
const onRemoveMetadata = fn();
const onMetadataChange = fn();
const onTimeoutChange = fn();
const onOAuthChange = fn();
function InteractiveForm({ function InteractiveForm({
startSettings, startSettings,
initialSections = ["connectionMode"], initialSections = ["connectionMode"],
@ -42,58 +31,50 @@ function InteractiveForm({
settings={settings} settings={settings}
expandedSections={expandedSections} expandedSections={expandedSections}
onExpandedSectionsChange={setExpandedSections} onExpandedSectionsChange={setExpandedSections}
onConnectionModeChange={(mode) => { onConnectionModeChange={(mode) =>
setSettings((s) => ({ ...s, connectionMode: mode })); setSettings((s) => ({ ...s, connectionMode: mode }))
onConnectionModeChange(mode); }
}} onAddHeader={() =>
onAddHeader={() => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
headers: [...s.headers, { key: "", value: "" }], headers: [...s.headers, { key: "", value: "" }],
})); }))
onAddHeader(); }
}} onRemoveHeader={(index) =>
onRemoveHeader={(index) => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
headers: s.headers.filter((_, i) => i !== index), headers: s.headers.filter((_, i) => i !== index),
})); }))
onRemoveHeader(index); }
}} onHeaderChange={(index, key, value) =>
onHeaderChange={(index, key, value) => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
headers: s.headers.map((h, i) => (i === index ? { key, value } : h)), headers: s.headers.map((h, i) => (i === index ? { key, value } : h)),
})); }))
onHeaderChange(index, key, value); }
}} onAddMetadata={() =>
onAddMetadata={() => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
metadata: [...s.metadata, { key: "", value: "" }], metadata: [...s.metadata, { key: "", value: "" }],
})); }))
onAddMetadata(); }
}} onRemoveMetadata={(index) =>
onRemoveMetadata={(index) => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
metadata: s.metadata.filter((_, i) => i !== index), metadata: s.metadata.filter((_, i) => i !== index),
})); }))
onRemoveMetadata(index); }
}} onMetadataChange={(index, key, value) =>
onMetadataChange={(index, key, value) => {
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
metadata: s.metadata.map((m, i) => metadata: s.metadata.map((m, i) =>
i === index ? { key, value } : m, i === index ? { key, value } : m,
), ),
})); }))
onMetadataChange(index, key, value); }
}} onTimeoutChange={(field, value) =>
onTimeoutChange={(field, value) => { setSettings((s) => ({ ...s, [field]: value }))
setSettings((s) => ({ ...s, [field]: value })); }
onTimeoutChange(field, value);
}}
onOAuthChange={(field, value) => { onOAuthChange={(field, value) => {
const fieldMap: Record<string, string> = { const fieldMap: Record<string, string> = {
clientId: "oauthClientId", clientId: "oauthClientId",
@ -101,7 +82,6 @@ function InteractiveForm({
scopes: "oauthScopes", scopes: "oauthScopes",
}; };
setSettings((s) => ({ ...s, [fieldMap[field] ?? field]: value })); setSettings((s) => ({ ...s, [fieldMap[field] ?? field]: value }));
onOAuthChange(field, value);
}} }}
/> />
); );