feat: option to show common query parameters (#4245)

* extend getExtensions

Add optional param to getExtensions that can retrieve more stuff

* Add getCommonExtensions

* Trim trailing spaces

* Remove unused parameter

* Move the format inline with the param type

* correction to UnitTest

docs/usage/configuration.md

@@ -58,6 +58,7 @@ Parameter Name | Description
 `maxDisplayedTags` | `Number`. If set, limits the number of tagged operations displayed to at most this many. The default is to show all operations.
 `operationsSorter` | `Function=(a => a)`. Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
 `showExtensions` | `Boolean=false`. Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema.
+`showCommonExtensions` | `Boolean=false`. Controls the display of extensions (`pattern`, `maxLength`, `minLength`, `maximum`, `minimum`) fields and values for Parameters.
 `tagsSorter` | `Function=(a => a)`. Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
 `onComplete` | `Function=NOOP`. Provides a mechanism to be notified when Swagger-UI has finished rendering a newly provided definition.
 

src/core/components/parameter-row.jsx

@@ -3,7 +3,7 @@ import { Map } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
-import { getExtensions } from "core/utils"
+import { getExtensions, getCommonExtensions } from "core/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -82,7 +82,7 @@ export default class ParameterRow extends Component {
 
     let { isOAS3 } = specSelectors
 
-    const { showExtensions } = getConfigs()
+    const { showExtensions, showCommonExtensions } = getConfigs()
 
     // const onChangeWrapper = (value) => onChange(param, value)
     const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -106,15 +106,17 @@ export default class ParameterRow extends Component {
     const ParameterExt = getComponent("ParameterExt")
 
     let paramWithMeta = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
-
+    let format = param.get("format")
     let schema = isOAS3 && isOAS3() ? param.get("schema") : param
     let type = schema.get("type")
     let isFormData = inType === "formData"
     let isFormDataSupported = "FormData" in win
     let required = param.get("required")
     let itemType = schema.getIn(["items", "type"])
+
     let value = paramWithMeta ? paramWithMeta.get("value") : ""
-    let extensions = getExtensions(param)
+    let commonExt = showCommonExtensions ? getCommonExtensions(param) : null
+    let extensions = showExtensions ? getExtensions(param) : null
 
     let paramItems // undefined
     let paramEnum // undefined
@@ -153,11 +155,16 @@ export default class ParameterRow extends Component {
             { param.get("name") }
             { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
           </div>
-          <div className="parameter__type">{ type } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">
+            { type }
+            { itemType && `[${itemType}]` }
+            { format && <span className="prop-format">(${format})</span>}
+          </div>
           <div className="parameter__deprecated">
             { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
           </div>
           <div className="parameter__in">({ param.get("in") })</div>
+          { !showCommonExtensions || !commonExt.size ? null : commonExt.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
           { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
         </td>
 

src/core/index.js

@@ -49,6 +49,7 @@ module.exports = function SwaggerUI(opts) {
     defaultModelExpandDepth: 1,
     defaultModelsExpandDepth: 1,
     showExtensions: false,
+    showCommonExtensions: false,
     supportedSubmitMethods: [
       "get",
       "put",

src/core/utils.js

@@ -712,6 +712,7 @@ export const createDeepLinkPath = (str) => typeof str == "string" || str instanc
 export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
 
 export const getExtensions = (defObj) => defObj.filter((v, k) => /^x-/.test(k))
+export const getCommonExtensions = (defObj) => defObj.filter((v, k) => /^pattern|maxLength|minLength|maximum|minimum/.test(k))
 
 // Deeply strips a specific key from an object.
 //

test/core/utils.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
 import expect from "expect"
-import { fromJS, OrderedMap } from "immutable"
+import { Map, fromJS, OrderedMap } from "immutable"
 import {
   mapToList,
   parseSearch,
@@ -20,6 +20,8 @@ import {
   getAcceptControllingResponse,
   createDeepLinkPath,
   escapeDeepLinkPath,
+  getExtensions,
+  getCommonExtensions,
   sanitizeUrl,
   extractFileNameFromContentDispositionHeader,
   deeplyStripKey
@@ -943,6 +945,24 @@ describe("utils", function() {
     })
   })
 
+  describe("getExtensions", function() {
+    const objTest = Map([[ "x-test", "a"], ["minimum", "b"]])
+    it("does not error on empty array", function() {
+      const result1 = getExtensions([])
+      expect(result1).toEqual([])
+      const result2 = getCommonExtensions([])
+      expect(result2).toEqual([])
+    })
+    it("gets only the x- keys", function() {
+      const result = getExtensions(objTest)
+      expect(result).toEqual(Map([[ "x-test", "a"]]))
+    })
+    it("gets the common keys", function() {
+      const result = getCommonExtensions(objTest, true)
+      expect(result).toEqual(Map([[ "minimum", "b"]]))
+    })
+  })
+  
   describe("deeplyStripKey", function() {
     it("should filter out a specified key", function() {
       const input = {