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

Internalize accordion state in ServerSettingsForm

Browse source 
Move expandedSections/onExpandedSectionsChange from props to internal
useState. The accordion open/close is local display logic, not parent
state. Add optional defaultExpandedSections prop for initial state.

Simplify UnconnectedView WithSettingsModal story — no longer needs
external state management for accordion sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-21 17:00:25 -04:00
commit adb909daf6
2 changed files with 11 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,8 +15,6 @@ const meta: Meta<typeof ServerSettingsForm> = {
title: "Groups/ServerSettingsForm",
component: ServerSettingsForm,
args: {
expandedSections: ["connectionMode"],
onExpandedSectionsChange: fn(),
onConnectionModeChange: fn(),
onAddHeader: fn(),
onRemoveHeader: fn(),

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

@ -1,3 +1,4 @@
import { useState } from "react";
import {
Accordion,
ActionIcon,
@ -20,8 +21,7 @@ export type ServerSettingsSection =
export interface ServerSettingsFormProps {
settings: InspectorServerSettings;
expandedSections: ServerSettingsSection[];
onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void;
defaultExpandedSections?: ServerSettingsSection[];
onConnectionModeChange: (mode: "proxy" | "direct") => void;
onAddHeader: () => void;
onRemoveHeader: (index: number) => void;
@ -95,8 +95,7 @@ function KeyValueRows({
export function ServerSettingsForm({
settings,
expandedSections,
onExpandedSectionsChange,
defaultExpandedSections = ["connectionMode"],
onConnectionModeChange,
onAddHeader,
onRemoveHeader,
@ -107,6 +106,10 @@ export function ServerSettingsForm({
onTimeoutChange,
onOAuthChange,
}: ServerSettingsFormProps) {
const [expandedSections, setExpandedSections] = useState<
ServerSettingsSection[]
>(defaultExpandedSections);
const handleTimeoutChange = (field: string) => (value: number | string) => {
const numValue =
typeof value === "string" ? parseInt(value, 10) || 0 : value;
@ -118,7 +121,7 @@ export function ServerSettingsForm({
multiple
value={expandedSections}
onChange={(value) =>
onExpandedSectionsChange(value as ServerSettingsSection[])
setExpandedSections(value as ServerSettingsSection[])
}
variant="separated"
>