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

Change onOAuthChange to pass all OAuth fields together

Browse source 
Replace onOAuthChange(field, value) with onOAuthChange(oauth) where
oauth is { clientId, clientSecret, scopes }. Each keystroke now
reports the full OAuth state, not just the single field that changed.
This lets the consumer see the complete picture on every change.

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

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

@ -95,17 +95,14 @@ function InteractiveRender(args: ServerSettingsFormProps) {
settings: { ...args.settings, [field]: value }, settings: { ...args.settings, [field]: value },
}); });
}} }}
onOAuthChange={(field, value) => { onOAuthChange={(oauth) => {
args.onOAuthChange(field, value); args.onOAuthChange(oauth);
const fieldMap: Record<string, string> = {
clientId: "oauthClientId",
clientSecret: "oauthClientSecret",
scopes: "oauthScopes",
};
updateArgs({ updateArgs({
settings: { settings: {
...args.settings, ...args.settings,
[fieldMap[field] ?? field]: value, oauthClientId: oauth.clientId,
oauthClientSecret: oauth.clientSecret,
oauthScopes: oauth.scopes,
}, },
}); });
}} }}

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

@ -30,7 +30,13 @@ export interface ServerSettingsFormProps {
onRemoveMetadata: (index: number) => void; onRemoveMetadata: (index: number) => void;
onMetadataChange: (index: number, key: string, value: string) => void; onMetadataChange: (index: number, key: string, value: string) => void;
onTimeoutChange: (field: string, value: number) => void; onTimeoutChange: (field: string, value: number) => void;
onOAuthChange: (field: string, value: string) => void; onOAuthChange: (oauth: OAuthSettings) => void;
}
export interface OAuthSettings {
clientId: string;
clientSecret: string;
scopes: string;
} }
const CONNECTION_MODE_OPTIONS = [ const CONNECTION_MODE_OPTIONS = [
@ -113,6 +119,14 @@ export function ServerSettingsForm({
onTimeoutChange(field, numValue); onTimeoutChange(field, numValue);
}; };
function currentOAuth(): OAuthSettings {
return {
clientId: settings.oauthClientId ?? "",
clientSecret: settings.oauthClientSecret ?? "",
scopes: settings.oauthScopes ?? "",
};
}
return ( return (
<Accordion <Accordion
multiple multiple
@ -217,20 +231,33 @@ export function ServerSettingsForm({
<TextInput <TextInput
label="Client ID" label="Client ID"
value={settings.oauthClientId ?? ""} value={settings.oauthClientId ?? ""}
onChange={(e) => onOAuthChange("clientId", e.currentTarget.value)} onChange={(e) =>
onOAuthChange({
...currentOAuth(),
clientId: e.currentTarget.value,
})
}
/> />
<TextInput <TextInput
label="Client Secret" label="Client Secret"
value={settings.oauthClientSecret ?? ""} value={settings.oauthClientSecret ?? ""}
type="password" type="password"
onChange={(e) => onChange={(e) =>
onOAuthChange("clientSecret", e.currentTarget.value) onOAuthChange({
...currentOAuth(),
clientSecret: e.currentTarget.value,
})
} }
/> />
<TextInput <TextInput
label="Scopes" label="Scopes"
value={settings.oauthScopes ?? ""} value={settings.oauthScopes ?? ""}
onChange={(e) => onOAuthChange("scopes", e.currentTarget.value)} onChange={(e) =>
onOAuthChange({
...currentOAuth(),
scopes: e.currentTarget.value,
})
}
/> />
</Stack> </Stack>
</Accordion.Panel> </Accordion.Panel>

16
clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
View file

@ -5,6 +5,7 @@ import { ListToggle } from "../../elements/ListToggle/ListToggle";
import { import {
ServerSettingsForm, ServerSettingsForm,
type ServerSettingsSection, type ServerSettingsSection,
type OAuthSettings,
} from "../ServerSettingsForm/ServerSettingsForm"; } from "../ServerSettingsForm/ServerSettingsForm";
const ALL_SECTIONS: ServerSettingsSection[] = [ const ALL_SECTIONS: ServerSettingsSection[] = [
@ -88,14 +89,13 @@ export function ServerSettingsModal({
onSettingsChange({ ...settings, [field]: value }); onSettingsChange({ ...settings, [field]: value });
} }
function handleOAuthChange(field: string, value: string) { function handleOAuthChange(oauth: OAuthSettings) {
const oauthFieldMap: Record<string, string> = { onSettingsChange({
clientId: "oauthClientId", ...settings,
clientSecret: "oauthClientSecret", oauthClientId: oauth.clientId,
scopes: "oauthScopes", oauthClientSecret: oauth.clientSecret,
}; oauthScopes: oauth.scopes,
const settingsKey = oauthFieldMap[field] ?? field; });
onSettingsChange({ ...settings, [settingsKey]: value });
} }
return ( return (