master into ft/performance

.github/issue_template.md

@@ -25,7 +25,7 @@ or anything that violates the specifications.
 | Which Swagger/OpenAPI version?  |
 | Which Swagger-UI version?       |
 | How did you install Swagger-UI? | 
-| Which broswer & version?        |
+| Which browser & version?        |
 | Which operating system?         | 
 
 

README.md

@@ -22,7 +22,7 @@ The OpenAPI Specification has undergone 5 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.1.6 | 2017-08-18 | 2.0, 3.0 | [tag v3.1.6](https://github.com/swagger-api/swagger-ui/tree/v3.1.6)
+3.2.0 | 2017-09-08 | 2.0, 3.0 | [tag v3.2.0](https://github.com/swagger-api/swagger-ui/tree/v3.2.0)
 3.0.21 | 2017-07-26 | 2.0 | [tag v3.0.21](https://github.com/swagger-api/swagger-ui/tree/v3.0.21)
 2.2.10 | 2017-01-04 | 1.1, 1.2, 2.0 | [tag v2.2.10](https://github.com/swagger-api/swagger-ui/tree/v2.2.10)
 2.1.5 | 2016-07-20 | 1.1, 1.2, 2.0 | [tag v2.1.5](https://github.com/swagger-api/swagger-ui/tree/v2.1.5)
@@ -46,7 +46,7 @@ Will start nginx with swagger-ui on port 80.
 Or you can provide your own swagger.json on your host
 
 ```
-docker run -p 80:8080 -e "SWAGGER_JSON=/foo/swagger.json" -v /bar:/foo swaggerapi/swagger-ui
+docker run -p 80:8080 -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui
 ```
 
 ##### Prerequisites

dev-helpers/oauth2-redirect.html

@@ -11,7 +11,11 @@
         var redirectUrl = oauth2.redirectUrl;
         var isValid, qp, arr;
 
-        qp = (window.location.hash || location.search).substring(1);
+        if (/code|token|error/.test(window.location.hash)) {
+            qp = window.location.hash.substring(1);
+        } else {
+            qp = location.search.substring(1);
+        }
 
         arr = qp.split("&")
         arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})

dist/oauth2-redirect.html

@@ -11,7 +11,11 @@
         var redirectUrl = oauth2.redirectUrl;
         var isValid, qp, arr;
 
-        qp = (window.location.hash || location.search).substring(1);
+        if (/code|token|error/.test(window.location.hash)) {
+            qp = window.location.hash.substring(1);
+        } else {
+            qp = location.search.substring(1);
+        }
 
         arr = qp.split("&")
         arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -41,6 +41,8 @@
   "dependencies": {
     "base64-js": "^1.2.0",
     "brace": "0.7.0",
+    "classnames": "^2.2.5",
+    "css.escape": "1.5.1",
     "deep-extend": "0.4.1",
     "expect": "1.20.2",
     "getbase": "^2.8.2",
@@ -75,7 +77,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "3.0.20",
+    "swagger-client": "3.1.0",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",

src/core/components/array-model.jsx

@@ -28,10 +28,15 @@ export default class ArrayModel extends Component {
         <span className="model-title__text">{ title }</span>
       </span>
 
+    /* 
+    Note: we set `name={null}` in <Model> below because we don't want
+    the name of the current Model passed (and displayed) as the name of the array element Model
+    */ 
+
     return <span className="model">
       <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
-          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
         ]
         {
           properties.size ? <span>

src/core/components/layouts/base.jsx

@@ -8,6 +8,8 @@ export default class BaseLayout extends React.Component {
     errActions: PropTypes.object.isRequired,
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired
@@ -19,7 +21,14 @@ export default class BaseLayout extends React.Component {
   }
 
   render() {
-    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
+    let {
+      specSelectors,
+      specActions,
+      getComponent,
+      layoutSelectors,
+      oas3Selectors,
+      oas3Actions
+    } = this.props
 
     let info = specSelectors.info()
     let url = specSelectors.url()
@@ -28,13 +37,15 @@ export default class BaseLayout extends React.Component {
     let securityDefinitions = specSelectors.securityDefinitions()
     let externalDocs = specSelectors.externalDocs()
     let schemes = specSelectors.schemes()
+    let servers = specSelectors.servers()
 
     let Info = getComponent("info")
     let Operations = getComponent("operations", true)
     let Models = getComponent("Models", true)
     let AuthorizeBtn = getComponent("authorizeBtn", true)
     let Row = getComponent("Row")
     let Col = getComponent("Col")
+    let Servers = getComponent("Servers")
     let Errors = getComponent("errors", true)
 
     let isLoading = specSelectors.loadingStatus() === "loading"
@@ -82,6 +93,22 @@ export default class BaseLayout extends React.Component {
               </div>
             ) : null }
 
+            { servers && servers.size ? (
+              <div className="server-container">
+                <Col className="servers wrapper" mobile={12}>
+                  <Servers
+                    servers={servers}
+                    currentServer={oas3Selectors.selectedServer()}
+                    setSelectedServer={oas3Actions.setSelectedServer}
+                    setServerVariableValue={oas3Actions.setServerVariableValue}
+                    getServerVariable={oas3Selectors.serverVariableValue}
+                    getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+                    />
+                </Col>
+              </div>
+
+            ) : null}
+
             {
               filter === null || filter === false ? null :
                 <div className="filter-container">

src/core/components/model.jsx

@@ -30,39 +30,38 @@ export default class Model extends Component {
 
   render () {
     let { getComponent, specSelectors, schema, required, name, isRef } = this.props
-    let ObjectModel = getComponent("ObjectModel")
-    let ArrayModel = getComponent("ArrayModel")
-    let PrimitiveModel = getComponent("PrimitiveModel")
+    const ObjectModel = getComponent("ObjectModel")
+    const ArrayModel = getComponent("ArrayModel")
+    const PrimitiveModel = getComponent("PrimitiveModel")
+    let type = "object"
     let $$ref = schema && schema.get("$$ref")
-    let modelName = $$ref && this.getModelName( $$ref )
-    let modelSchema, type
-
-    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
-
-    if ( schema && (schema.get("type") || schema.get("properties")) ) {
-      modelSchema = schema
-    } else if ( $$ref ) {
-      modelSchema = this.getRefSchema( modelName )
+
+    // If we weren't passed a `name` but have a ref, grab the name from the ref
+    if ( !name && $$ref ) {
+      name = this.getModelName( $$ref )
     }
-
-    type = modelSchema && modelSchema.get("type")
-    if ( !type && modelSchema && modelSchema.get("properties") ) {
-      type = "object"
+    // If we weren't passed a `schema` but have a ref, grab the schema from the ref
+    if ( !schema && $$ref ) {
+      schema = this.getRefSchema( name )
     }
-
+
+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+    isRef = isRef !== undefined ? isRef : !!$$ref
+    type = schema && schema.get("type") || type
+
     switch(type) {
       case "object":
         return <ObjectModel
           className="object" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
-          isRef={ isRef!== undefined ? isRef : !!$$ref } />
+          isRef={ isRef } />
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
           required={ required } />
       case "string":
@@ -73,9 +72,10 @@ export default class Model extends Component {
         return <PrimitiveModel
           { ...this.props }
           getComponent={ getComponent }
-          schema={ modelSchema }
-          name={ modelName || name }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
-          required={ required }/> }
+          required={ required }/>
+    }
   }
 }

src/core/components/models.jsx

@@ -34,7 +34,6 @@ export default class Models extends Component {
             return <div className="model-container" key={ `models-section-${name}` }>
               <ModelWrapper name={ name }
                      schema={ model }
-                     isRef={ true }
                      getComponent={ getComponent }
                      specSelectors={ specSelectors }/>
               </div>

src/core/components/operation.jsx

@@ -28,6 +28,7 @@ export default class Operation extends PureComponent {
     authSelectors: PropTypes.object,
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     fn: PropTypes.object.isRequired,
@@ -117,7 +118,8 @@ export default class Operation extends PureComponent {
       specSelectors,
       authActions,
       authSelectors,
-      getConfigs
+      getConfigs,
+      oas3Actions
     } = this.props
 
     let summary = operation.get("summary")
@@ -161,12 +163,12 @@ export default class Operation extends PureComponent {
           <div className={`opblock-summary opblock-summary-${method}`} onClick={this.toggleShown} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-                <a
-                  className="nostyle"
-                  onClick={(e) => e.preventDefault()}
-                  href={ isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : ""} >
-                  <span>{path}</span>
-                </a>
+              <a
+                className="nostyle"
+                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                href={isDeepLinkingEnabled ? `#/${isShownKey[1]}/${isShownKey[2]}` : null}>
+                <span>{path}</span>
+              </a>
                 <JumpToPath path={jumpToKey} />
               </span>
 
@@ -265,6 +267,7 @@ export default class Operation extends PureComponent {
                     getComponent={ getComponent }
                     getConfigs={ getConfigs }
                     specSelectors={ specSelectors }
+                    oas3Actions={oas3Actions}
                     specActions={ specActions }
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }

src/core/components/operations.jsx

@@ -1,14 +1,15 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { helpers } from "swagger-client"
-
+import { createDeepLinkPath } from "core/utils"
 const { opId } = helpers
 
 export default class Operations extends React.Component {
 
   static propTypes = {
     specSelectors: PropTypes.object.isRequired,
     specActions: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
@@ -21,6 +22,7 @@ export default class Operations extends React.Component {
     let {
       specSelectors,
       specActions,
+      oas3Actions,
       getComponent,
       layoutSelectors,
       layoutActions,
@@ -69,7 +71,7 @@ export default class Operations extends React.Component {
               let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
               let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
 
-              let isShownKey = ["operations-tag", tag]
+              let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
               let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
 
               return (
@@ -81,8 +83,8 @@ export default class Operations extends React.Component {
                     id={isShownKey.join("-")}>
                     <a
                       className="nostyle"
-                      onClick={(e) => e.preventDefault()}
-                      href={ isDeepLinkingEnabled ? `#/${tag}` : ""}>
+                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
                       <span>{tag}</span>
                     </a>
                     { !tagDescription ? null :
@@ -124,7 +126,7 @@ export default class Operations extends React.Component {
 
                         const operationId =
                         op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), path, method) || op.get("id")
-                        const isShownKey = ["operations", tag, operationId]
+                        const isShownKey = ["operations", createDeepLinkPath(tag), createDeepLinkPath(operationId)]
 
                         const allowTryItOut = specSelectors.allowTryItOutFor(op.get("path"), op.get("method"))
                         const response = specSelectors.responseFor(op.get("path"), op.get("method"))
@@ -147,6 +149,8 @@ export default class Operations extends React.Component {
                           specActions={ specActions }
                           specSelectors={ specSelectors }
 
+                          oas3Actions={oas3Actions}
+
                           layoutActions={ layoutActions }
                           layoutSelectors={ layoutSelectors }
 

src/core/components/parameter-row.jsx

@@ -81,12 +81,11 @@ export default class ParameterRow extends Component {
     const Markdown = getComponent("Markdown")
 
     let schema = param.get("schema")
-
     let type = isOAS3 && isOAS3() ? param.getIn(["schema", "type"]) : param.get("type")
     let isFormData = inType === "formData"
     let isFormDataSupported = "FormData" in win
     let required = param.get("required")
-    let itemType =  param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
+    let itemType = param.getIn(isOAS3 && isOAS3() ? ["schema", "items", "type"] : ["items", "type"])
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
     let value = parameter ? parameter.get("value") : ""