How to hide server descriptions in Swagger UI?

Question

I have an OpenAPI 3.0 definition with multiple servers:

servers:
- url: https://development.gigantic-server.com/v1
  description: Development server
- url: https://staging.gigantic-server.com/v1
  description: Staging server
- url: https://api.gigantic-server.com/v1
  description: Production server

When this definition is rendered in Swagger UI, the "Servers" dropdown shows the description of each server:

Is it possible to hide the server descriptions from this dropdown?

Answer 1

They haven't provided any option to replace this server's description in another place, but they have mentioned the description is optional in swagger specification of object representing a Server.

Swagger UI have not provided any rendering option for this.

The best use of description is define in a single word, like production, development, api, staging, etc..

If you really don't want in dropdown then you can remove it from your server list.

servers:
- url: https://development.gigantic-server.com/v1
- url: https://staging.gigantic-server.com/v1
- url: https://api.gigantic-server.com/v1

---

This part i am writing for your information, about how to use oas-servers,

I observed your server urls, these can be easily define in single url, how? using server variables.

servers:
- url: https://{environment}.gigantic-server.com/{version}
  variables: 
    environment:
      enum:
        - 'development'
        - 'staging'
        - 'api'
    version:
      enum:
        - 'v1'

Hope this help.

Answer 2

Swagger UI always displays the server description if it's provided, this is hard-coded:
https://github.com/swagger-api/swagger-ui/blob/master/src/core/plugins/oas3/components/servers.jsx#L125

As a workaround you can modify the API definition dynamically after it's loaded and remove server descriptions. To do that, edit your Swagger UI's swagger-initializer.js or index.html file and add the following onComplete function to the SwaggerUIBundle initialization code:

  const ui = SwaggerUIBundle({
    url: "https://path/to/your/openapi.json",
    ...

    onComplete: function() {
      let spec = ui.specSelectors.specJson().toJS();
      let servers = spec.servers || [];

      for (let i in servers) {
        servers[i].description = ""
      }

      ui.specActions.updateJsonSpec(spec);
    }
  })