Swagger-ui: Collapse Responses section

Created on 17 Nov 2020  路  1Comment  路  Source: swagger-api/swagger-ui

Is your feature request related to a problem?

I'm using swagger a lot. All day I'm working with multiple micro APIs and have several swagger tabs open.
And one thing that constantly happen is getting confused by the "Responses" section of the endpoint.

I think there is 3 issues:

  • It looks too much like the "Server response" section, especially when there is a response sample.
  • If the API has a lot of response types, it takes a lot of space, when most people using the Swagger UI only care about the actual response, not ALL the possible responses.
  • Also, if the API has a lot of response types, it is not always easy to find where the actual response ends, and the list of possible responses start ("Responses" title is small, with no clear separator).

This is a UX issue, as several times I'm just confused by what is displayed and I need to look harder and take a few seconds to understand what is displayed (and complain mentally ^^).

Describe the solution you'd like

Possible solutions would be:

  • to make the "Responses" section collapsible, and collapsed by default (most users don't care)
  • make the "Responses" section more visually different from the actual response. Today, the main difference is that one has "Server response" instead of "Responses" as a title, and column headers are "Code / Details" instead of "Code / Description". I'm thinking : different background color, a border, a more visible separator between the "Server response" section and the "Responses" section...

Both would be very useful but a collapsible "Responses" section would help a lot and not disrupt too much the UI.

Additional context

Few examples of the issue :
The "default" display (before running) looks too much as if there was already a 200 response.
The first thing you see is "Responses" / "200" / "Successful operation", it is quite easy to be confused, and you may need a couple of seconds to process.
image

The actual response has mostly 2 differences : the title ("Server response" instead of "Responses"), and the curl/request url
But it is not enough to make it visually stand out.
image

Moreover, the difference between the actual response and the examples is not visible enough (I shrank the response bodies for the screenshot) :
image

style & presentation user experience

Most helpful comment

make the "Responses" section more visually different from the actual response

This is discussed in #6548

>All comments

make the "Responses" section more visually different from the actual response

This is discussed in #6548

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fehguy picture fehguy  路  3Comments

ankon picture ankon  路  4Comments

andrecarlucci picture andrecarlucci  路  3Comments

deepumi picture deepumi  路  3Comments

MartinMuzatko picture MartinMuzatko  路  4Comments