Add ServerSettingsModal group, revert form to controlled component

Revert ServerSettingsForm to a controlled component with
expandedSections/onExpandedSectionsChange props. The form is a
dumb component — accordion state belongs to its container.

Create ServerSettingsModal group that manages:
- Accordion expand/collapse state with ListToggle expand-all button
- Add/remove/edit header pairs
- Add/remove/edit metadata pairs
- Connection mode, timeout, and OAuth changes
- All changes flow through a single onSettingsChange callback

Update ServerSettingsForm stories with useState render functions
so accordion sections are interactive.

Update UnconnectedView WithSettingsModal story to use the new
ServerSettingsModal component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-21 17:13:57 -04:00
commit a6fc900271

View file

@ -0,0 +1,62 @@
import { useState } from "react";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { ServerSettingsModal } from "./ServerSettingsModal";
const initialSettings: InspectorServerSettings = {
connectionMode: "proxy",
headers: [
{ key: "Authorization", value: "Bearer token-abc-123" },
{ key: "X-Request-Id", value: "req-456" },
],
metadata: [{ key: "userId", value: "user-789" }],
connectionTimeout: 30000,
requestTimeout: 60000,
oauthClientId: "my-client-id",
oauthClientSecret: "super-secret-value",
oauthScopes: "read write",
};
function InteractiveModal({
startSettings,
}: {
startSettings: InspectorServerSettings;
}) {
const [settings, setSettings] =
useState<InspectorServerSettings>(startSettings);
return (
<ServerSettingsModal
opened
settings={settings}
onClose={() => {}}
onSettingsChange={setSettings}
/>
);
}
const meta: Meta<typeof ServerSettingsModal> = {
title: "Groups/ServerSettingsModal",
component: ServerSettingsModal,
};
export default meta;
type Story = StoryObj<typeof ServerSettingsModal>;
export const FullyConfigured: Story = {
render: () => <InteractiveModal startSettings={initialSettings} />,
};
export const EmptySettings: Story = {
render: () => (
<InteractiveModal
startSettings={{
connectionMode: "proxy",
headers: [],
metadata: [],
connectionTimeout: 30000,
requestTimeout: 60000,
}}
/>
),
};