Add dropdowns to sandbox UI in place of text boxes when choices are constrained.

[vengroff]

Many APIs have args that are in some sense strings but what they actually accept is essetially an enumerated type with only a fixed set of accepted values. In some cases they might accept a list of these items. In the sandbox, these appear as text fields. It would be more convenient for users, especially those trying out an API in the sandbox for the first time, if these were drop downs or multi-selects populated with the allowed values.

For reference, the sandbox-like feature that FastAPI generates in their docs pages does this. Examples look like the following:

In contrast, the zudoku sandbox for the same API that is shown in the first image above produces this:

A drop down instead of a text box here would be great.

The code that generates the text input can be found at https://github.com/zuplo/zudoku/blob/main/packages/zudoku/src/lib/plugins/openapi/playground/QueryParams.tsx#L83. It would be great if this could be extended to use metadata from the OpenAPI spec to populate drop downs or multi-selects as appropriate.

[linear]

ZUP-3767 Add dropdowns to sandbox UI in place of text boxes when choices are constrained.

[vengroff]

Here are the relevant bits of the OpenAPI spec for the API shown above where the enum is defined and used:

      "RangeFuelType": {
        "type": "string",
        "enum": [
          "natural_gas",
          "propane"
        ],
        "title": "RangeFuelType",
        "description": "Fuel types inputs that the range upgrade API supports.\n\nNote that we do not support electricity as the input because we are modeling\nupgrading to electric, and so upgrading from electric would produce no\nchange."
      },

and

        "parameters": [
         {
           "name": "current_fuel",
           "in": "query",
           "required": true,
           "schema": {
             "$ref": "#/components/schemas/RangeFuelType",
             "title": "Current Range Fuel",
             "description": "The fuel used by the current range."
           },
           "description": "The fuel used by the current range."
         },

[arian0zen]

@mosch @AdrianMachado
am working on this one as well!

[vengroff]

@mosch @AdrianMachado am working on this one as well!

So this is work in progress? If so, that's awesome. Any ETA?

[arian0zen]

@mosch @AdrianMachado am working on this one as well!

So this is work in progress? If so, that's awesome. Any ETA?

I just started with this one.. it might take some time..
I will update here with an ETA soon!

[vengroff]

Thank you.

[arian0zen]

Thank you.

Heyy, just wanted to update as I said before! I shall be able to add a PR for this within next 2 days!

[vengroff]

Excellent!

[arian0zen]

added the PR #306

🎥 Watch the Demo