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:
parent
adb909daf6
commit
a6fc900271
1 changed files with 307 additions and 100 deletions
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
};
|
||||
Loading…
Reference in a new issue