Merge pull request #3868 from thompsongl/ft/3052-extensions

parameter & operation extensions display

README.md

@@ -165,6 +165,7 @@ deepLinking | If set to `true`, enables dynamic deep linking for tags and operat
 requestInterceptor | MUST be a function.  Function to intercept try-it-out requests.  Accepts one argument requestInterceptor(request) and must return the potentially modified request.
 responseInterceptor | MUST be a function.  Function to intercept try-it-out responses.  Accepts one argument responseInterceptor(response) and must return the potentially modified response.
 showMutatedRequest | If set to `true` (the default), uses the mutated request returned from a rquestInterceptor to produce the curl command in the UI, otherwise the request before the requestInterceptor was applied is used.
+showExtensions | Controls the display of vendor extension (`x-`) fields and values for Operations, Parameters, and Schema. The default is `false`.
 
 ### Plugins
 

src/core/components/array-model.jsx

@@ -7,6 +7,7 @@ export default class ArrayModel extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     required: PropTypes.bool,
@@ -15,7 +16,7 @@ export default class ArrayModel extends Component {
   }
 
   render(){
-    let { getComponent, schema, depth, expandDepth, name } = this.props
+    let { getComponent, getConfigs, schema, depth, expandDepth, name } = this.props
     let description = schema.get("description")
     let items = schema.get("items")
     let title = schema.get("title") || name
@@ -46,7 +47,7 @@ export default class ArrayModel extends Component {
             !description ? null :
               <Markdown source={ description } />
           }
-          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } getConfigs={ getConfigs } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
         ]
       </ModelCollapse>
     </span>

src/core/components/model-example.jsx

@@ -52,6 +52,7 @@ export default class ModelExample extends React.Component {
         {
           !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                      getComponent={ getComponent }
+                                                     getConfigs={ getConfigs }
                                                      specSelectors={ specSelectors }
                                                      expandDepth={ defaultModelExpandDepth } />
 

src/core/components/model-wrapper.jsx

@@ -6,18 +6,17 @@ export default class ModelComponent extends Component {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     expandDepth: PropTypes.number
   }
 
   render(){
-    let { getComponent } = this.props
+    let { getComponent, getConfigs } = this.props
     const Model = getComponent("Model")
 
     return <div className="model-box">
-      <Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+      <Model { ...this.props } getConfigs={ getConfigs } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
     </div>
   }
 }
-
-

src/core/components/model.jsx

@@ -6,6 +6,7 @@ export default class Model extends PureComponent {
   static propTypes = {
     schema: ImPropTypes.orderedMap.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -30,7 +31,7 @@ export default class Model extends PureComponent {
   }
 
   render () {
-    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
@@ -54,6 +55,7 @@ export default class Model extends PureComponent {
       case "object":
         return <ObjectModel
           className="object" { ...this.props }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -61,6 +63,7 @@ export default class Model extends PureComponent {
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}
@@ -73,6 +76,7 @@ export default class Model extends PureComponent {
         return <PrimitiveModel
           { ...this.props }
           getComponent={ getComponent }
+          getConfigs={ getConfigs }
           schema={ schema }
           name={ name }
           deprecated={deprecated}

src/core/components/models.jsx

@@ -36,6 +36,7 @@ export default class Models extends Component {
                      expandDepth={ defaultModelExpandDepth }
                      schema={ model }
                      getComponent={ getComponent }
+                     getConfigs={ getConfigs }
                      specSelectors={ specSelectors }/>
               </div>
           }).toArray()

src/core/components/object-model.jsx

@@ -9,6 +9,7 @@ export default class ObjectModel extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
     isRef: PropTypes.bool,
@@ -17,7 +18,7 @@ export default class ObjectModel extends Component {
   }
 
   render(){
-    let { schema, name, isRef, getComponent, depth, expandDepth, ...otherProps } = this.props
+    let { schema, name, isRef, getComponent, getConfigs, depth, expandDepth, ...otherProps } = this.props
     let { specSelectors } = otherProps
     let { isOAS3 } = specSelectors
 
@@ -91,6 +92,7 @@ export default class ObjectModel extends Component {
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ value }
                                  depth={ depth + 1 } />
                         </td>
@@ -104,6 +106,7 @@ export default class ObjectModel extends Component {
                     <td>
                       <Model { ...otherProps } required={ false }
                              getComponent={ getComponent }
+                             getConfigs={ getConfigs }
                              schema={ additionalProperties }
                              depth={ depth + 1 } />
                     </td>
@@ -117,6 +120,7 @@ export default class ObjectModel extends Component {
                       {anyOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -131,6 +135,7 @@ export default class ObjectModel extends Component {
                       {oneOf.map((schema, k) => {
                         return <div key={k}><Model { ...otherProps } required={ false }
                                  getComponent={ getComponent }
+                                 getConfigs={ getConfigs }
                                  schema={ schema }
                                  depth={ depth + 1 } /></div>
                       })}
@@ -146,9 +151,10 @@ export default class ObjectModel extends Component {
                         <Model { ...otherProps }
                                required={ false }
                                getComponent={ getComponent }
+                               getConfigs={ getConfigs }
                                schema={ not }
                                depth={ depth + 1 } />
-                        </div>
+                      </div>
                     </td>
                   </tr>
               }

src/core/components/operation-extension-row.jsx

+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExtRow = ({ xKey, xVal }) => {
+    return (<tr>
+        <td>{ xKey }</td>
+        <td>{ String(xVal) }</td>
+    </tr>)
+}
+OperationExtRow.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default OperationExtRow

src/core/components/operation-extensions.jsx

+import React from "react"
+import PropTypes from "prop-types"
+
+export const OperationExt = ({ extensions, getComponent }) => {
+    let OperationExtRow = getComponent("OperationExtRow")
+    return (
+      <div className="opblock-section">
+        <div className="opblock-section-header">
+          <h4>Extensions</h4>
+        </div>
+        <div className="table-container">
+
+          <table>
+            <thead>
+              <tr>
+                <td className="col col_header">Field</td>
+                <td className="col col_header">Value</td>
+              </tr>
+            </thead>
+            <tbody>
+                {
+                    extensions.entrySeq().map(([k, v]) => <OperationExtRow key={`${k}-${v}`} xKey={k} xVal={v} />)
+                }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    )
+}
+OperationExt.propTypes = {
+  extensions: PropTypes.object.isRequired,
+  getComponent: PropTypes.func.isRequired
+}
+
+export default OperationExt

src/core/components/operation.jsx

 import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { getList } from "core/utils"
-import { sanitizeUrl } from "core/utils"
+import { getExtensions, sanitizeUrl } from "core/utils"
 import { Iterable } from "immutable"
 
 export default class Operation extends PureComponent {
@@ -85,6 +85,7 @@ export default class Operation extends PureComponent {
     let parameters = getList(operation, ["parameters"])
     let operationScheme = specSelectors.operationScheme(path, method)
     let isShownKey = ["operations", tag, operationId]
+    let extensions = getExtensions(operation)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -95,6 +96,9 @@ export default class Operation extends PureComponent {
     const Collapse = getComponent( "Collapse" )
     const Markdown = getComponent( "Markdown" )
     const Schemes = getComponent( "schemes" )
+    const OperationExt = getComponent( "OperationExt" )
+
+    const { showExtensions } = getConfigs()
 
     // Merge in Live Response
     if(responses && response && response.size > 0) {
@@ -160,6 +164,7 @@ export default class Operation extends PureComponent {
                   </div>
                 </div> : null
               }
+
               <Parameters
                 parameters={parameters}
                 operation={operation}
@@ -225,6 +230,10 @@ export default class Operation extends PureComponent {
                     displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }
+
+              { !showExtensions || !extensions.size ? null :
+                <OperationExt extensions={ extensions } getComponent={ getComponent } />
+              }
             </div>
           </Collapse>
         </div>

src/core/components/parameter-extension.jsx

+import React from "react"
+import PropTypes from "prop-types"
+
+export const ParameterExt = ({ xKey, xVal }) => {
+    return <div className="parameter__extension">{ xKey }: { String(xVal) }</div>
+}
+ParameterExt.propTypes = {
+  xKey: PropTypes.string,
+  xVal: PropTypes.any
+}
+
+export default ParameterExt

src/core/components/parameter-row.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import { Map } from "immutable"
 import PropTypes from "prop-types"
 import win from "core/window"
+import { getExtensions } from "core/utils"
 
 export default class ParameterRow extends Component {
   static propTypes = {
@@ -72,6 +73,8 @@ export default class ParameterRow extends Component {
 
     let { isOAS3 } = specSelectors
 
+    const { showExtensions } = getConfigs()
+
     // const onChangeWrapper = (value) => onChange(param, value)
     const JsonSchemaForm = getComponent("JsonSchemaForm")
     const ParamBody = getComponent("ParamBody")
@@ -91,6 +94,7 @@ export default class ParameterRow extends Component {
 
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent("Markdown")
+    const ParameterExt = getComponent("ParameterExt")
 
     let schema = param.get("schema")
     let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
@@ -100,6 +104,7 @@ export default class ParameterRow extends Component {
     let itemType = param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"), param.get("in"))
     let value = parameter ? parameter.get("value") : ""
+    let extensions = getExtensions(param)
 
     return (
       <tr>
@@ -113,6 +118,7 @@ export default class ParameterRow extends Component {
             { isOAS3 && isOAS3() && param.get("deprecated") ? "deprecated": null }
           </div>
           <div className="parameter__in">({ param.get("in") })</div>
+          { !showExtensions || !extensions.size ? null : extensions.map((v, key) => <ParameterExt key={`${key}-${v}`} xKey={key} xVal={v} /> )}
         </td>
 
         <td className="col parameters-col_description">

src/core/components/primitive-model.jsx

 import React, { Component } from "react"
 import PropTypes from "prop-types"
+import { getExtensions } from "core/utils"
 
 const propStyle = { color: "#999", fontStyle: "italic" }
 
@@ -7,12 +8,15 @@ export default class Primitive extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     name: PropTypes.string,
     depth: PropTypes.number
   }
 
   render(){
-    let { schema, getComponent, name, depth } = this.props
+    let { schema, getComponent, getConfigs, name, depth } = this.props
+
+    const { showExtensions } = getConfigs()
 
     if(!schema || !schema.get) {
       // don't render if schema isn't correctly formed
@@ -25,7 +29,10 @@ export default class Primitive extends Component {
     let enumArray = schema.get("enum")
     let title = schema.get("title") || name
     let description = schema.get("description")
-    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
+    let extensions = getExtensions(schema)
+    let properties = schema
+      .filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
+      .filterNot( (v, key) => extensions.has(key) )
     const Markdown = getComponent("Markdown")
     const EnumModel = getComponent("EnumModel")
     const Property = getComponent("Property")
@@ -38,6 +45,9 @@ export default class Primitive extends Component {
         {
           properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
         }
+        {
+          showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+        }
         {
           !description ? null :
             <Markdown source={ description } />

src/core/index.js

@@ -46,6 +46,7 @@ module.exports = function SwaggerUI(opts) {
     showMutatedRequest: true,
     defaultModelRendering: "example",
     defaultModelExpandDepth: 1,
+    showExtensions: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.

src/core/plugins/oas3/wrap-components/model.jsx

@@ -8,12 +8,13 @@ class ModelComponent extends Component {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     expandDepth: PropTypes.number
   }
 
   render(){
-    let { schema } = this.props
+    let { getConfigs, schema } = this.props
     let classes = ["model-box"]
     let isDeprecated = schema.get("deprecated") === true
     let message = null
@@ -26,6 +27,7 @@ class ModelComponent extends Component {
     return <div className={classes.join(" ")}>
       {message}
       <Model { ...this.props }
+        getConfigs={ getConfigs }
         depth={ 1 }
         expandDepth={ this.props.expandDepth || 0 }
         />

src/core/presets/base.js

@@ -30,11 +30,14 @@ import LiveResponse from "core/components/live-response"
 import OnlineValidatorBadge from "core/components/online-validator-badge"
 import Operations from "core/components/operations"
 import Operation from "core/components/operation"
+import OperationExt from "core/components/operation-extensions"
+import OperationExtRow from "core/components/operation-extension-row"
 import HighlightCode from "core/components/highlight-code"
 import Responses from "core/components/responses"
 import Response from "core/components/response"
 import ResponseBody from "core/components/response-body"
 import Parameters from "core/components/parameters"
+import ParameterExt from "core/components/parameter-extension"
 import ParameterRow from "core/components/parameter-row"
 import Execute from "core/components/execute"
 import Headers from "core/components/headers"
@@ -115,6 +118,9 @@ export default function() {
       Markdown,
       BaseLayout,
       VersionStamp,
+      OperationExt,
+      OperationExtRow,
+      ParameterExt,
       OperationContainer
     }
   }

src/core/utils.js

@@ -692,3 +692,5 @@ export function getAcceptControllingResponse(responses) {
 
 export const createDeepLinkPath = (str) => typeof str == "string" || str instanceof String ? str.trim().replace(/\s/g, "_") : ""
 export const escapeDeepLinkPath = (str) => cssEscape( createDeepLinkPath(str) )
+
+export const getExtensions = (defObj) => defObj.filter((v, k) => /^x-/.test(k))

src/style/_table.scss

@@ -131,7 +131,8 @@ table
     }
 }
 
-.parameter__in
+.parameter__in,
+.parameter__extension
 {
     font-size: 12px;
     font-style: italic;

test/components/primitive-model.js

@@ -14,6 +14,9 @@ describe("<PrimitiveModel/>", function() {
         }
         const props = {
             getComponent: c => components[c],
+            getConfigs: () => ({
+                showExtensions: false
+            }),
             name: "Name from props",
             depth: 1,
             schema: fromJS({
@@ -46,4 +49,4 @@ describe("<PrimitiveModel/>", function() {
         })
 
     })
-} )
\ No newline at end of file
+} )