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

feat: enum support in dynamic json form

Browse source
This commit is contained in:
Alex Andru 2025-07-04 19:45:55 +02:00
commit efd5f8a17c
1 changed files with 110 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

52
client/src/components/DynamicJsonForm.tsx
View file

@ -15,10 +15,10 @@ interface DynamicJsonFormProps {
const isSimpleObject = (schema: JsonSchemaType): boolean => {
const supportedTypes = ["string", "number", "integer", "boolean", "null"];
if (supportedTypes.includes(schema.type)) return true;
if (schema.type && supportedTypes.includes(schema.type)) return true;
if (schema.type === "object") {
return Object.values(schema.properties ?? {}).every((prop) =>
supportedTypes.includes(prop.type),
return Object.values(schema.properties ?? {}).every(
(prop) => prop.type && supportedTypes.includes(prop.type),
);
}
if (schema.type === "array") {
@ -178,6 +178,41 @@ const DynamicJsonForm = ({
switch (propSchema.type) {
case "string": {
if (
propSchema.oneOf &&
propSchema.oneOf.every(
(option) =>
typeof option.const === "string" &&
typeof option.title === "string",
)
) {
return (
<select
value={(currentValue as string) ?? ""}
onChange={(e) => {
const val = e.target.value;
if (!val && !isRequired) {
handleFieldChange(path, undefined);
} else {
handleFieldChange(path, val);
}
}}
required={isRequired}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
>
<option value="">Select an option...</option>
{propSchema.oneOf.map((option) => (
<option
key={option.const as string}
value={option.const as string}
>
{option.title as string}
</option>
))}
</select>
);
}
if (propSchema.enum) {
return (
<select
@ -194,9 +229,9 @@ const DynamicJsonForm = ({
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
>
<option value="">Select an option...</option>
{propSchema.enum.map((option, index) => (
{propSchema.enum.map((option) => (
<option key={option} value={option}>
{propSchema.enumNames?.[index] || option}
{option}
</option>
))}
</select>
@ -233,6 +268,9 @@ const DynamicJsonForm = ({
}}
placeholder={propSchema.description}
required={isRequired}
minLength={propSchema.minLength}
maxLength={propSchema.maxLength}
pattern={propSchema.pattern}
/>
);
}
@ -255,6 +293,8 @@ const DynamicJsonForm = ({
}}
placeholder={propSchema.description}
required={isRequired}
min={propSchema.minimum}
max={propSchema.maximum}
/>
);
@ -277,6 +317,8 @@ const DynamicJsonForm = ({
}}
placeholder={propSchema.description}
required={isRequired}
min={propSchema.minimum}
max={propSchema.maximum}
/>
);