Show required OAuth scopes on each endpoint

The API I am documenting has a lot of scopes available. However, a single endpoint usually only requires one scope. Currently a padlock is displayed on each endpoint and clicking it opens the Available authorizations modal where all scopes the API has are displayed.

It would be great to know which individual scopes are required per endpoint.

I have checked my source swagger json and this information is there on a per endpoint basis. Here is a subset of my swagger json to show the relevant sections:

{
  "swagger": "2.0",
  "info": {
    "description": "Api Documentation",
    "version": "1.0",
    "title": "Api Documentation",
    "termsOfService": "urn:tos",
    "contact": {},
    "license": {
      "name": "Apache 2.0",
      "url": "http://www.apache.org/licenses/LICENSE-2.0"
    }
  },
  "paths": {
    "/v1/organisations/{id}": {
      "get": {
        "summary": "Get a single Organisation",
        "operationId": "getByIdUsingGET",
        "security": [
          {
            "Auth0": [
              "get:organisation"
            ]
          }
        ],
        "deprecated": false
      }
    }
  },
  "securityDefinitions": {
    "Auth0": {
      "type": "oauth2",
      "tokenUrl": "https://xxxxxxxxx/oauth/token",
      "flow": "application",
      "scopes": {
        "create:organisation": "Create an Organisation",
        "get:organisation": "Get a single Organisation",
        "list:organisation": "List Organisations",
        "update:organisation": "Update an Organisations",
        "delete:organisation": "Delete an Organisations",
      }
    }
  }
}

[Akridian]

Is there any chances to get this functionality in future?

[lephuongbg]

We came up with a plugin that do the job well enough for us:

// Remember to include React either through script tag in browser environment:
//     <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
// or through import with webpack/babel:
//     import React from 'react'
const h = React.createElement
SwaggerUIBundle({
    // ...
    presets: [
        system => {
            // Variable to capture the security prop of OperationSummary
            // then pass it to authorizeOperationBtn
            let currentSecurity
            return {
                wrapComponents: {
                    // Wrap OperationSummary component to get its prop
                    OperationSummary: Original => props => {
                        const security = props.operationProps.get('security')
                        currentSecurity = security.toJS()
                        return h(Original, props)
                    },
                    // Wrap the padlock button to show the
                    // scopes required for current operation
                    authorizeOperationBtn: Original =>
                        function (props) {
                            return h('div', {}, [
                                ...(currentSecurity || []).map(scheme => {
                                    const schemeName = Object.keys(scheme)[0]
                                    if (!scheme[schemeName].length) return null

                                    const scopes = scheme[schemeName].flatMap(scope => [
                                        h('code', null, scope),
                                        ', ',
                                    ])
                                    scopes.pop()
                                    return h('span', null, [schemeName, '(', ...scopes, ')'])
                                }),
                                h(Original, props),
                            ])
                        },
                },
            }
        },
    ]
})