fix: nerf property access to better support Editor test harness

This reverts commit 5ea2150ae7.

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -5,23 +5,24 @@ about: Report an issue you're experiencing
 ---
 
 <!---
-Thanks for filing a bug report 😄 ! Before you submit, please read the following:
+  Thanks for filing a bug report! 😄
 
-If you're here to report a security issue, please STOP writing an issue and
-contact us at security@swagger.io instead!
+  Before you submit, please read the following:
 
-Search open/closed issues before submitting!
+  If you're here to report a security issue, please STOP writing an issue and
+  contact us at security@swagger.io instead!
 
-Issues on GitHub are only related to problems of Swagger-UI itself. We'll try
-to offer support here for your use case, but we can't offer help with projects
-that use Swagger-UI indirectly, like Springfox or swagger-node.
+  Search open/closed issues before submitting!
 
-Likewise, we can't accept bugs in the Swagger/OpenAPIspecifications themselves,
-or anything that violates the specifications.
+  Issues on GitHub are only related to problems of Swagger-UI itself. We'll try
+  to offer support here for your use case, but we can't offer help with projects
+  that use Swagger-UI indirectly, like Springfox or swagger-node.
 
+  Likewise, we can't accept bugs in the Swagger/OpenAPI specifications
+  themselves, or anything that violates the specifications.
 -->
 
-## Q&A (please complete the following information)
+### Q&A (please complete the following information)
  - OS: [e.g. macOS]
  - Browser: [e.g. chrome, safari]
  - Version: [e.g. 22]

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -4,7 +4,7 @@ about: Suggest an new feature or enhancement for this project
 
 ---
 
-## Q&A (please complete the following information)
+### Q&A (please complete the following information)
  - OS: [e.g. macOS]
  - Browser: [e.g. chrome, safari]
  - Version: [e.g. 22]

.travis.yml

@@ -37,7 +37,7 @@ after_success:
       docker login --username=$DOCKER_HUB_USERNAME --password=$DOCKER_HUB_PASSWORD;
 
       if [ ! -z "$TRAVIS_TAG" ]; then
-        DOCKER_IMAGE_TAG=$TRAVIS_TAG;
+        DOCKER_IMAGE_TAG=${TRAVIS_TAG#?};
       else
         DOCKER_IMAGE_TAG=unstable;
       fi;

README.md

@@ -2,27 +2,25 @@
 
 [![NPM version](https://badge.fury.io/js/swagger-ui.svg)](http://badge.fury.io/js/swagger-ui)
 
-## New!
-
-**This is the new version of swagger-ui, 3.x. Want to learn more? Check out our [FAQ](http://swagger.io/new-ui-faq/).**
-
 **👉🏼 Want to score an easy open-source contribution?** Check out our [Good first issue](https://github.com/swagger-api/swagger-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%22) label.
 
-As a brand new version, written from the ground up, there are some known issues and unimplemented features. Check out the [Known Issues](#known-issues) section for more details.
+**🕰️ Looking for the older version of Swagger UI?** Refer to the [*2.x* branch](https://github.com/swagger-api/swagger-ui/tree/2.x).
+
 
 This repository publishes to two different NPM modules:
 
-* [swagger-ui](https://www.npmjs.com/package/swagger-ui) is a traditional npm module intended for use in JavaScript web application projects that are capable of resolving dependencies (via Webpack, Browserify, etc).
-* [swagger-ui-dist](https://www.npmjs.com/package/swagger-ui-dist) is a dependency-free module that includes everything you need to serve Swagger-UI in a server-side project, or a web project that can't resolve npm module dependencies.
+* [swagger-ui](https://www.npmjs.com/package/swagger-ui) is a traditional npm module intended for use in single-page applications that are capable of resolving dependencies (via Webpack, Browserify, etc).
+* [swagger-ui-dist](https://www.npmjs.com/package/swagger-ui-dist) is a dependency-free module that includes everything you need to serve Swagger-UI in a server-side project, or a single-page application that can't resolve npm module dependencies.
+
+We strongly suggest that you use `swagger-ui` instead of `swagger-ui-dist` if you're building a single-page application, since `swagger-ui-dist` is significantly larger.
 
-For the older version of swagger-ui, refer to the [*2.x branch*](https://github.com/swagger-api/swagger-ui/tree/2.x).
 
 ## Compatibility
-The OpenAPI Specification has undergone 5 revisions since initial creation in 2010.  Compatibility between swagger-ui and the OpenAPI Specification is as follows:
+The OpenAPI Specification has undergone 5 revisions since initial creation in 2010.  Compatibility between Swagger UI and the OpenAPI Specification is as follows:
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes
 ------------------ | ------------ | -------------------------- | -----
-3.14.1 | 2018-05-04 | 2.0, 3.0 | [tag v3.14.1](https://github.com/swagger-api/swagger-ui/tree/v3.14.1)
+3.17.0 | 2018-05-26 | 2.0, 3.0 | [tag v3.17.0](https://github.com/swagger-api/swagger-ui/tree/v3.17.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)
@@ -76,7 +74,7 @@ Please disclose any security-related issues or vulnerabilities by emailing [secu
 
 ## License
 
-Copyright 2017 SmartBear Software
+Copyright 2018 SmartBear Software
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

docker-run.sh

@@ -55,7 +55,7 @@ fi
 
 # replace `url` with `urls` option if API_URLS is set
 if [[ -n "$API_URLS" ]]; then
-    sed -i "s|url: .*,|urls: $API_URLS,|g" $INDEX_FILE
+    sed -i "s|^\(\s*\)url: .*,|\1urls: $API_URLS,|g" $INDEX_FILE
 fi
 
 # replace the PORT that nginx listens on if PORT is supplied

docs/usage/configuration.md

@@ -30,7 +30,7 @@ Parameter Name | Description
 `domNode` | `Element`, **REQUIRED** if `dom_id` is not provided. The HTML DOM element inside which SwaggerUi will put the user interface for swagger. Overrides `dom_id`.
 `spec` | `Object={}`. A JS object describing the OpenAPI Specification. When used, the `url` parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
 `url` | `String`. The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). Will be ignored if `urls` or `spec` is used.
-`urls` | `String`. An array of API definition objects (`{url: "<url>", name: "<name>"}`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
+`urls` | `Array`. An array of API definition objects (`[{url: "<url1>", name: "<name1>"},{url: "<url2>", name: "<name2>"}]`) used by Topbar plugin. When used and Topbar plugin is enabled, the `url` parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
 `urls.primaryName` | `String`. When using `urls`, you can use this subparameter. If the value matches the name of a spec provided in `urls`, that spec will be displayed when Swagger-UI loads, instead of defaulting to the first spec in `urls`.
 
 ##### Plugin system

make-webpack-config.js

@@ -52,6 +52,7 @@ module.exports = function(rules, options) {
     hot: false,
     separateStylesheets: true,
     minimize: false,
+    mangle: false,
     longTermCaching: false,
     sourcemaps: false,
   }, options._special)
@@ -69,6 +70,10 @@ module.exports = function(rules, options) {
 
     plugins.push(
       new UglifyJsPlugin({
+        uglifyOptions: {
+          mangle: specialOptions.mangle,
+          beautify: !specialOptions.mangle,
+        },
         sourceMap: true,
       }),
       new webpack.LoaderOptionsPlugin({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.14.1",
+  "version": "3.17.0",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -28,7 +28,7 @@
     "lint": "eslint --cache --ext '.js,.jsx' src test",
     "lint-errors": "eslint --cache --quiet --ext '.js,.jsx' src test",
     "lint-fix": "eslint --cache --ext '.js,.jsx' src test --fix",
-    "test": "npm run lint-errors && npm run just-test-in-node",
+    "test": "npm run just-test-in-node && npm run lint-errors",
     "test-in-node": "npm run lint-errors && npm run just-test-in-node",
     "just-test": "karma start --config karma.conf.js",
     "just-test-in-node": "mocha --require test/setup.js --recursive --compilers js:babel-core/register test/core test/components test/bugs test/swagger-ui-dist-package test/xss",
@@ -37,7 +37,10 @@
     "e2e-initial-render": "nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json --group initial-render",
     "mock-api": "json-server --watch test/e2e/db.json --port 3204",
     "hot-e2e-server": "webpack-dev-server --port 3230 --content-base test/e2e/helpers --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress",
-    "e2e": "npm-run-all --parallel -r hot-e2e-server mock-api test-e2e"
+    "e2e": "npm-run-all --parallel -r hot-e2e-server mock-api test-e2e",
+    "open-static": "node -e 'require(\"open\")(\"http://localhost:3002\")'",
+    "serve-static": "http-server dist/ -i -a 0.0.0.0 -p 3002",
+    "start": "npm-run-all --parallel serve-static open-static"
   },
   "dependencies": {
     "@braintree/sanitize-url": "^2.0.2",
@@ -47,7 +50,7 @@
     "commonmark": "^0.28.1",
     "core-js": "^2.5.1",
     "css.escape": "1.5.1",
-    "deep-extend": "0.4.1",
+    "deep-extend": "0.5.1",
     "dompurify": "^1.0.4",
     "expect": "1.20.2",
     "getbase": "^2.8.2",
@@ -84,7 +87,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.8.1",
+    "swagger-client": "^3.8.5",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
@@ -115,7 +118,7 @@
     "eslint": "^4.1.1",
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react": "~7.7.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "0.11.2",
     "git-describe": "^4.0.1",

src/core/components/array-model.jsx

@@ -11,6 +11,7 @@ export default class ArrayModel extends Component {
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
+    displayName: PropTypes.string,
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
     specPath: ImPropTypes.list.isRequired,
@@ -18,10 +19,10 @@ export default class ArrayModel extends Component {
   }
 
   render(){
-    let { getComponent, getConfigs, schema, depth, expandDepth, name, specPath } = this.props
+    let { getComponent, getConfigs, schema, depth, expandDepth, name, displayName, specPath } = this.props
     let description = schema.get("description")
     let items = schema.get("items")
-    let title = schema.get("title") || name
+    let title = schema.get("title") || displayName || name
     let properties = schema.filter( ( v, key) => ["type", "items", "description", "$$ref"].indexOf(key) === -1 )
 
     const Markdown = getComponent("Markdown")

src/core/components/layouts/base.jsx

@@ -40,6 +40,7 @@ export default class BaseLayout extends React.Component {
     let servers = specSelectors.servers()
 
     let SvgAssets = getComponent("SvgAssets")
+    let VersionPragmaFilter = getComponent("VersionPragmaFilter")
     let Info = getComponent("info")
     let Operations = getComponent("operations", true)
     let Models = getComponent("Models", true)
@@ -49,6 +50,9 @@ export default class BaseLayout extends React.Component {
     let Servers = getComponent("Servers")
     let Errors = getComponent("errors", true)
 
+    let isSwagger2 = specSelectors.isSwagger2()
+    let isOAS3 = specSelectors.isOAS3()
+
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
     let filter = layoutSelectors.currentFilter()
@@ -80,7 +84,7 @@ export default class BaseLayout extends React.Component {
 
       <div className='swagger-ui'>
           <SvgAssets />
-          <div>
+          <VersionPragmaFilter isSwagger2={isSwagger2} isOAS3={isOAS3} alsoShow={<Errors/>}>
             <Errors/>
             <Row className="information-container">
               <Col mobile={12}>
@@ -142,7 +146,7 @@ export default class BaseLayout extends React.Component {
                 <Models/>
               </Col>
             </Row>
-          </div>
+          </VersionPragmaFilter>
         </div>
       )
   }

src/core/components/model-wrapper.jsx

@@ -9,6 +9,7 @@ export default class ModelWrapper extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
     name: PropTypes.string,
+    displayName: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,

src/core/components/model.jsx

@@ -10,6 +10,7 @@ export default class Model extends ImmutablePureComponent {
     getConfigs: PropTypes.func.isRequired,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
+    displayName: PropTypes.string,
     isRef: PropTypes.bool,
     required: PropTypes.bool,
     expandDepth: PropTypes.number,
@@ -33,7 +34,7 @@ export default class Model extends ImmutablePureComponent {
   }
 
   render () {
-    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath } = this.props
+    let { getComponent, getConfigs, specSelectors, schema, required, name, isRef, specPath, displayName } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
@@ -51,7 +52,7 @@ export default class Model extends ImmutablePureComponent {
 
     if(!schema) {
       return <span className="model model-title">
-              <span className="model-title__text">{ name }</span>
+              <span className="model-title__text">{ displayName || name }</span>
               <img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
                   marginLeft: "1em",
                   position: "relative",

src/core/components/models.jsx

@@ -51,9 +51,12 @@ export default class Models extends Component {
       </h4>
       <Collapse isOpened={showModels}>
         {
-          definitions.entrySeq().map( ( [ name ])=>{
+          definitions.entrySeq().map(([name])=>{
 
-            const schema = specSelectors.specResolvedSubtree([...specPathBase, name])
+            const fullPath = [...specPathBase, name]
+            const schema = specSelectors.specResolvedSubtree(fullPath)|| Im.Map()
+            const rawSchema = specSelectors.specJson().getIn(fullPath, Im.Map())
+            const displayName = schema.get("title") || rawSchema.get("title") || name
 
             if(layoutSelectors.isShown(["models", name], false) && schema === undefined) {
               // Firing an action in a container render is not great,
@@ -63,7 +66,8 @@ export default class Models extends Component {
 
             const content = <ModelWrapper name={ name }
               expandDepth={ defaultModelsExpandDepth }
-              schema={ schema  || Im.Map() }
+              schema={ schema || Im.Map() }
+              displayName={displayName}
               specPath={Im.List([...specPathBase, name])}
               getComponent={ getComponent }
               specSelectors={ specSelectors }
@@ -72,7 +76,9 @@ export default class Models extends Component {
               layoutActions = {layoutActions}/>
 
             const title = <span className="model-box">
-              <span className="model model-title">{name}</span>
+              <span className="model model-title">
+                {displayName}
+              </span>
             </span>
 
             return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }>
@@ -81,6 +87,7 @@ export default class Models extends Component {
                 collapsedContent={this.getCollapsedContent(name)}
                 onToggle={this.handleToggle}
                 title={title}
+                displayName={displayName}
                 modelName={name}
                 hideSelfOnExpand={true}
                 expanded={defaultModelsExpandDepth > 1}

src/core/components/object-model.jsx

@@ -15,6 +15,7 @@ export default class ObjectModel extends Component {
     onToggle: PropTypes.func,
     specSelectors: PropTypes.object.isRequired,
     name: PropTypes.string,
+    displayName: PropTypes.string,
     isRef: PropTypes.bool,
     expandDepth: PropTypes.number,
     depth: PropTypes.number,
@@ -22,7 +23,7 @@ export default class ObjectModel extends Component {
   }
 
   render(){
-    let { schema, name, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
+    let { schema, name, displayName, isRef, getComponent, getConfigs, depth, onToggle, expanded, specPath, ...otherProps } = this.props
     let { specSelectors,expandDepth } = otherProps
     const { isOAS3 } = specSelectors
 
@@ -35,7 +36,7 @@ export default class ObjectModel extends Component {
     let description = schema.get("description")
     let properties = schema.get("properties")
     let additionalProperties = schema.get("additionalProperties")
-    let title = schema.get("title") || name
+    let title = schema.get("title") || displayName || name
     let requiredProperties = schema.get("required")
 
     const JumpToPath = getComponent("JumpToPath", true)
@@ -78,7 +79,7 @@ export default class ObjectModel extends Component {
             {
               <table className="model"><tbody>
               {
-                !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
+                !description ? null : <tr style={{ color: "#666", fontStyle: "italic" }}>
                     <td>description:</td>
                     <td>
                       <Markdown source={ description } />

src/core/components/online-validator-badge.jsx

@@ -1,6 +1,9 @@
 import React from "react"
+import URL from "url-parse"
+
 import PropTypes from "prop-types"
 import { sanitizeUrl } from "core/utils"
+import win from "core/window"
 
 export default class OnlineValidatorBadge extends React.Component {
     static propTypes = {
@@ -11,20 +14,28 @@ export default class OnlineValidatorBadge extends React.Component {
 
     constructor(props, context) {
         super(props, context)
-        let { specSelectors, getConfigs } = props
+        let { getConfigs } = props
         let { validatorUrl } = getConfigs()
         this.state = {
-            url: specSelectors.url(),
+            url: this.getDefinitionUrl(),
             validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         }
     }
 
+    getDefinitionUrl = () => {
+      // TODO: test this behavior by stubbing `window.location` in an Enzyme/JSDom env
+      let { specSelectors } = this.props
+
+      const urlObject = new URL(specSelectors.url(), win.location)
+      return urlObject.toString()
+    }
+
     componentWillReceiveProps(nextProps) {
-        let { specSelectors, getConfigs } = nextProps
+        let { getConfigs } = nextProps
         let { validatorUrl } = getConfigs()
 
         this.setState({
-            url: specSelectors.url(),
+            url: this.getDefinitionUrl(),
             validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         })
     }

src/core/components/operation-tag.jsx

@@ -0,0 +1,108 @@
+import React from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import Im from "immutable"
+import { createDeepLinkPath, sanitizeUrl } from "core/utils"
+
+export default class OperationTag extends React.Component {
+
+  static defaultProps = {
+    tagObj: Im.fromJS({}),
+    tag: "",
+  }
+
+  static propTypes = {
+    tagObj: ImPropTypes.map.isRequired,
+    tag: PropTypes.string.isRequired,
+
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+
+    getConfigs: PropTypes.func.isRequired,
+    getComponent: PropTypes.func.isRequired,
+
+    children: PropTypes.element,
+  }
+
+  render() {
+    const {
+      tagObj,
+      tag,
+      children,
+
+      layoutSelectors,
+      layoutActions,
+      getConfigs,
+      getComponent,
+    } = this.props
+
+    let {
+      docExpansion,
+      deepLinking,
+    } = getConfigs()
+
+    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
+
+    const Collapse = getComponent("Collapse")
+    const Markdown = getComponent("Markdown")
+    const DeepLink = getComponent("DeepLink")
+
+    let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
+    let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
+    let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
+
+    let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
+    let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
+
+    return (
+      <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} >
+
+        <h4
+          onClick={() => layoutActions.show(isShownKey, !showTag)}
+          className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
+          id={isShownKey.join("-")}>
+          <DeepLink
+            enabled={isDeepLinkingEnabled}
+            isShown={showTag}
+            path={tag}
+            text={tag} />
+          { !tagDescription ? <small></small> :
+            <small>
+                <Markdown source={tagDescription} />
+              </small>
+            }
+
+            <div>
+              { !tagExternalDocsDescription ? null :
+                <small>
+                    { tagExternalDocsDescription }
+                      { tagExternalDocsUrl ? ": " : null }
+                      { tagExternalDocsUrl ?
+                        <a
+                            href={sanitizeUrl(tagExternalDocsUrl)}
+                            onClick={(e) => e.stopPropagation()}
+                            target={"_blank"}
+                            >{tagExternalDocsUrl}</a> : null
+                          }
+                  </small>
+                }
+            </div>
+
+            <button
+              className="expand-operation"
+              title={showTag ? "Collapse operation": "Expand operation"}
+              onClick={() => layoutActions.show(isShownKey, !showTag)}>
+
+              <svg className="arrow" width="20" height="20">
+                <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
+              </svg>
+            </button>
+        </h4>
+
+        <Collapse isOpened={showTag}>
+          {children}
+        </Collapse>
+      </div>
+    )
+  }
+}

src/core/components/operations.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Im from "immutable"
-import { createDeepLinkPath, sanitizeUrl } from "core/utils"
 
 const SWAGGER2_OPERATION_METHODS = [
   "get", "put", "post", "delete", "options", "head", "patch"
@@ -38,18 +37,12 @@ export default class Operations extends React.Component {
     let taggedOps = specSelectors.taggedOperations()
 
     const OperationContainer = getComponent("OperationContainer", true)
-    const Collapse = getComponent("Collapse")
-    const Markdown = getComponent("Markdown")
-    const DeepLink = getComponent("DeepLink")
+    const OperationTag = getComponent("OperationTag")
 
     let {
-      docExpansion,
       maxDisplayedTags,
-      deepLinking
     } = getConfigs()
 
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
-
     let filter = layoutSelectors.currentFilter()
 
     if (filter) {
@@ -66,88 +59,49 @@ export default class Operations extends React.Component {
         <div>
           {
             taggedOps.map( (tagObj, tag) => {
-              let operations = tagObj.get("operations")
-              let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
-              let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
-              let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
-
-              let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
-              let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")
-
+              const operations = tagObj.get("operations")
               return (
-                <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>
-
-                  <h4
-                    onClick={() => layoutActions.show(isShownKey, !showTag)}
-                    className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
-                    id={isShownKey.join("-")}>
-                    <DeepLink
-                        enabled={isDeepLinkingEnabled}
-                        isShown={showTag}
-                        path={tag}
-                        text={tag} />
-                    { !tagDescription ? <small></small> :
-                        <small>
-                          <Markdown source={tagDescription} />
-                        </small>
-                    }
-
-                    <div>
-                    { !tagExternalDocsDescription ? null :
-                        <small>
-                          { tagExternalDocsDescription }
-                          { tagExternalDocsUrl ? ": " : null }
-                          { tagExternalDocsUrl ?
-                            <a
-                              href={sanitizeUrl(tagExternalDocsUrl)}
-                              onClick={(e) => e.stopPropagation()}
-                              target={"_blank"}
-                            >{tagExternalDocsUrl}</a> : null
-                          }
-                        </small>
-                    }
-                    </div>
-
-                    <button className="expand-operation" title={showTag ? "Collapse operation": "Expand operation"} onClick={() => layoutActions.show(isShownKey, !showTag)}>
-                      <svg className="arrow" width="20" height="20">
-                        <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
-                      </svg>
-                    </button>
-                  </h4>
-
-                  <Collapse isOpened={showTag}>
-                    {
-                      operations.map( op => {
-                        const path = op.get("path")
-                        const method = op.get("method")
-                        const specPath = Im.List(["paths", path, method])
+                <OperationTag
+                  key={"operation-" + tag}
+                  tagObj={tagObj}
+                  tag={tag}
+                  layoutSelectors={layoutSelectors}
+                  layoutActions={layoutActions}
+                  getConfigs={getConfigs}
+                  getComponent={getComponent}>
+                  {
+                    operations.map( op => {
+                      const path = op.get("path")
+                      const method = op.get("method")
+                      const specPath = Im.List(["paths", path, method])
 
 
-                        // FIXME: (someday) this logic should probably be in a selector,
-                        // but doing so would require further opening up
-                        // selectors to the plugin system, to allow for dynamic
-                        // overriding of low-level selectors that other selectors
-                        // rely on. --KS, 12/17
-                        const validMethods = specSelectors.isOAS3() ?
-                          OAS3_OPERATION_METHODS : SWAGGER2_OPERATION_METHODS
+                      // FIXME: (someday) this logic should probably be in a selector,
+                      // but doing so would require further opening up
+                      // selectors to the plugin system, to allow for dynamic
+                      // overriding of low-level selectors that other selectors
+                      // rely on. --KS, 12/17
+                      const validMethods = specSelectors.isOAS3() ?
+                            OAS3_OPERATION_METHODS : SWAGGER2_OPERATION_METHODS
 
-                        if(validMethods.indexOf(method) === -1) {
-                          return null
-                        }
+                      if(validMethods.indexOf(method) === -1) {
+                        return null
+                      }
 
-                        return <OperationContainer
-                          key={`${path}-${method}`}
-                          specPath={specPath}
-                          op={op}
-                          path={path}
-                          method={method}
-                          tag={tag}
-                        />
-                      }).toArray()
-                    }
-                  </Collapse>
-                </div>
-                )
+                      return <OperationContainer
+                                 key={`${path}-${method}`}
+                                 specPath={specPath}
+                                 op={op}
+                                 path={path}
+                                 method={method}
+                                 tag={tag}
+                                 />
+                    }).toArray()
+                  }
+
+
+                </OperationTag>
+              )
             }).toArray()
           }
 

src/core/components/param-body.jsx

@@ -47,7 +47,7 @@ export default class ParamBody extends PureComponent {
 
   updateValues = (props) => {
     let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
-    let parameter = specSelectors ? specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in")) : fromJS({})
+    let parameter = (specSelectors ? specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in")) : fromJS({})) || param
     let isXml = /xml/i.test(consumesValue)
     let isJson = /json/i.test(consumesValue)
     let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")

src/core/components/parameter-row.jsx

@@ -22,20 +22,7 @@ export default class ParameterRow extends Component {
   constructor(props, context) {
     super(props, context)
 
-    let { specSelectors, pathMethod, param } = props
-    let defaultValue = param.get("default")
-    let xExampleValue = param.get("x-example")
-    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
-    let value = parameter ? parameter.get("value") : ""
-
-    if( param.get("in") !== "body" ) {
-      if ( xExampleValue !== undefined && value === undefined && specSelectors.isSwagger2() ) {
-        this.onChangeWrapper(xExampleValue)
-      } else if ( defaultValue !== undefined && value === undefined ) {
-        this.onChangeWrapper(defaultValue)
-      }
-    }
-
+    this.setDefaultValue()
   }
 
   componentWillReceiveProps(props) {
@@ -43,8 +30,7 @@ export default class ParameterRow extends Component {
     let { isOAS3 } = specSelectors
 
     let example = param.get("example")
-    let defaultValue = param.get("default")
-    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
+    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in")) || param
     let enumValue
 
     if(isOAS3()) {
@@ -61,8 +47,6 @@ export default class ParameterRow extends Component {
       value = paramValue
     } else if ( example !== undefined ) {
       value = example
-    } else if ( defaultValue !== undefined) {
-      value = defaultValue
     } else if ( param.get("required") && enumValue && enumValue.size ) {
       value = enumValue.first()
     }
@@ -77,6 +61,29 @@ export default class ParameterRow extends Component {
     return onChange(param, value)
   }
 
+  setDefaultValue = () => {
+    let { specSelectors, pathMethod, param } = this.props
+
+    if (param.get("value") !== undefined) {
+      return
+    }
+
+    let schema = specSelectors.isOAS3() ? param.get("schema", Map({})) : param
+
+    let defaultValue = schema.get("default")
+    let xExampleValue = param.get("x-example") // Swagger 2 only
+    let parameter = specSelectors.parameterWithMeta(pathMethod, param.get("name"), param.get("in"))
+    let value = parameter ? parameter.get("value") : ""
+
+    if( param.get("in") !== "body" ) {
+      if ( xExampleValue !== undefined && value === undefined && specSelectors.isSwagger2() ) {
+        this.onChangeWrapper(xExampleValue)
+      } else if ( defaultValue !== undefined && value === undefined ) {
+        this.onChangeWrapper(defaultValue)
+      }
+    }
+  }
+
   render() {
     let {param, onChange, getComponent, getConfigs, isExecute, fn, onChangeConsumes, specSelectors, pathMethod, specPath} = this.props
 
@@ -149,7 +156,7 @@ export default class ParameterRow extends Component {
     }
 
     return (
-      <tr>
+      <tr className="parameters">
         <td className="col parameters-col_name">
           <div className={required ? "parameter__name required" : "parameter__name"}>
             { param.get("name") }

src/core/components/primitive-model.jsx

@@ -10,11 +10,12 @@ export default class Primitive extends Component {
     getComponent: PropTypes.func.isRequired,
     getConfigs: PropTypes.func.isRequired,
     name: PropTypes.string,
+    displayName: PropTypes.string,
     depth: PropTypes.number
   }
 
   render(){
-    let { schema, getComponent, getConfigs, name, depth } = this.props
+    let { schema, getComponent, getConfigs, name, displayName, depth } = this.props
 
     const { showExtensions } = getConfigs()
 
@@ -27,7 +28,7 @@ export default class Primitive extends Component {
     let format = schema.get("format")
     let xml = schema.get("xml")
     let enumArray = schema.get("enum")
-    let title = schema.get("title") || name
+    let title = schema.get("title") || displayName || name
     let description = schema.get("description")
     let extensions = getExtensions(schema)
     let properties = schema

src/core/components/response-body.jsx

@@ -64,9 +64,7 @@ export default class ResponseBody extends React.PureComponent {
       (headers["content-description"] && (/File Transfer/i).test(headers["content-description"]))) {
       // Download
 
-      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-
-      if (!isSafari && "Blob" in window) {
+      if ("Blob" in window) {
         let type = contentType || "text/html"
         let blob = (content instanceof Blob) ? content : new Blob([content], {type: type})
         let href = window.URL.createObjectURL(blob)

src/core/components/version-pragma-filter.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class VersionPragmaFilter extends React.PureComponent {
+  static propTypes = {
+    isSwagger2: PropTypes.bool.isRequired,
+    isOAS3: PropTypes.bool.isRequired,
+    bypass: PropTypes.bool,
+    alsoShow: PropTypes.element,
+    children: PropTypes.any,
+  }
+
+  static defaultProps = {
+    alsoShow: null,
+    children: null,
+    bypass: false,
+  }
+
+  render() {
+    const { bypass, isSwagger2, isOAS3, alsoShow } = this.props
+
+    if(bypass) {
+      return <div>{ this.props.children }</div>
+    }
+
+    if(isSwagger2 && isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--ambiguous">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p><code>swagger</code> and <code>openapi</code> fields cannot be present in the same Swagger or OpenAPI definition. Please remove one of the fields.</p>
+            <p>Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    if(!isSwagger2 && !isOAS3) {
+      return <div className="version-pragma">
+        {alsoShow}
+        <div className="version-pragma__message version-pragma__message--missing">
+          <div>
+            <h3>Unable to render this definition</h3>
+            <p>The provided definition does not specify a valid version field.</p>
+            <p>Please indicate a valid Swagger or OpenAPI version field. Supported version fields are <code>swagger: {"\"2.0\""}</code> and those that match <code>openapi: 3.0.n</code> (for example, <code>openapi: 3.0.0</code>).</p>
+          </div>
+        </div>
+      </div>
+    }
+
+    return <div>{ this.props.children }</div>
+  }
+}

src/core/index.js

@@ -27,7 +27,7 @@ module.exports = function SwaggerUI(opts) {
 
   const defaults = {
     // Some general settings, that we floated to the top
-    dom_id: null,
+    dom_id: null, // eslint-disable-line camelcase
     domNode: null,
     spec: {},
     url: "",
@@ -131,10 +131,9 @@ module.exports = function SwaggerUI(opts) {
   var system = store.getSystem()
 
   const downloadSpec = (fetchedConfig) => {
-    if(typeof constructorConfig !== "object") {
-      return system
-    }
-
+      if(typeof constructorConfig !== "object") {
+        return system
+      }
     let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
     let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
 
@@ -145,6 +144,10 @@ module.exports = function SwaggerUI(opts) {
 
     store.setConfigs(mergedConfig)
 
+    if(system.configsActions) {
+      system.configsActions.loaded()
+    }
+
     if (fetchedConfig !== null) {
       if (!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {
         system.specActions.updateUrl("")
@@ -171,15 +174,17 @@ module.exports = function SwaggerUI(opts) {
     return system
   }
 
-  let configUrl = queryConfig.config || constructorConfig.configUrl
+  const configUrl = queryConfig.config || constructorConfig.configUrl
 
-  if (!configUrl || !system.specActions.getConfigByUrl || system.specActions.getConfigByUrl && !system.specActions.getConfigByUrl({
+  if (!configUrl || !system.specActions || !system.specActions.getConfigByUrl || system.specActions.getConfigByUrl && !system.specActions.getConfigByUrl({
     url: configUrl,
     loadRemoteConfig: true,
     requestInterceptor: constructorConfig.requestInterceptor,
     responseInterceptor: constructorConfig.responseInterceptor,
   }, downloadSpec)) {
     return downloadSpec()
+  } else {
+    system.specActions.getConfigByUrl(configUrl, downloadSpec)
   }
 
   return system

src/core/json-schema-components.js

@@ -1,8 +1,10 @@
 import React, { PureComponent, Component } from "react"
 import PropTypes from "prop-types"
 import { List, fromJS } from "immutable"
+import cx from "classnames"
 import ImPropTypes from "react-immutable-proptypes"
 import DebounceInput from "react-debounce-input"
+import { getSampleSchema } from "core/utils"
 //import "less/json-schema-form"
 
 const noop = ()=> {}
@@ -15,6 +17,7 @@ const JsonSchemaPropShape = {
   schema: PropTypes.object,
   errors: ImPropTypes.list,
   required: PropTypes.bool,
+  dispatchInitialValue: PropTypes.bool,
   description: PropTypes.any
 }
 
@@ -32,6 +35,13 @@ export class JsonSchemaForm extends Component {
   static propTypes = JsonSchemaPropShape
   static defaultProps = JsonSchemaDefaultProps
 
+  componentDidMount() {
+    const { dispatchInitialValue, value, onChange } = this.props
+    if(dispatchInitialValue) {
+      onChange(value)
+    }
+  }
+
   render() {
     let { schema, errors, value, onChange, getComponent, fn } = this.props
 
@@ -191,7 +201,7 @@ export class JsonSchema_boolean extends Component {
 
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, value, errors, schema } = this.props
+    let { getComponent, value, errors, schema, required } = this.props
     errors = errors.toJS ? errors.toJS() : []
 
     const Select = getComponent("Select")
@@ -200,7 +210,57 @@ export class JsonSchema_boolean extends Component {
                     title={ errors.length ? errors : ""}
                     value={ String(value) }
                     allowedValues={ fromJS(schema.enum || ["true", "false"]) }
-                    allowEmptyValue={ !this.props.required }
+                    allowEmptyValue={ !schema.enum || !required }
                     onChange={ this.onEnumChange }/>)
   }
 }
+
+export class JsonSchema_object extends PureComponent {
+  constructor() {
+    super()
+  }
+
+  static propTypes = JsonSchemaPropShape
+  static defaultProps = JsonSchemaDefaultProps
+
+  componentDidMount() {
+    if(!this.props.value && this.props.schema) {
+      this.resetValueToSample()
+    }
+  }
+
+  resetValueToSample = () => {
+    this.onChange(getSampleSchema(this.props.schema) )
+  }
+
+  onChange = (value) => {
+    this.props.onChange(value)
+  }
+
+  handleOnChange = e => {
+    const inputValue = e.target.value
+
+    this.onChange(inputValue)
+  }
+
+  render() {
+    let {
+      getComponent,
+      value,
+      errors
+    } = this.props
+
+    const TextArea = getComponent("TextArea")
+
+    return (
+      <div>
+        <TextArea
+          className={cx({ invalid: errors.size })}
+          title={ errors.size ? errors.join(", ") : ""}
+          value={value}
+          onChange={ this.handleOnChange }/>
+      </div>
+    )
+
+  }
+}

src/core/plugins/configs/actions.js

@@ -18,3 +18,7 @@ export function toggle(configName) {
     payload: configName,
   }
 }
+
+
+// Hook
+export const loaded = () => () => {}

src/core/plugins/deep-linking/index.js

@@ -1,18 +1,23 @@
-// import reducers from "./reducers"
-// import * as actions from "./actions"
-// import * as selectors from "./selectors"
-import * as specWrapActions from "./spec-wrap-actions"
-import * as layoutWrapActions from "./layout-wrap-actions"
+import layout from "./layout"
+import OperationWrapper from "./operation-wrapper"
+import OperationTagWrapper from "./operation-tag-wrapper"
 
 export default function() {
-  return {
+  return [layout, {
     statePlugins: {
-      spec: {
-        wrapActions: specWrapActions
-      },
-      layout: {
-        wrapActions: layoutWrapActions
+      configs: {
+        wrapActions: {
+          loaded: (ori, system) => (...args) => {
+            ori(...args)
+            const hash = window.location.hash
+            system.layoutActions.parseDeepLinkHash(hash)
+          }
+        }
       }
-    }
-  }
+    },
+    wrapComponents: {
+      operation: OperationWrapper,
+      OperationTag: OperationTagWrapper,
+    },
+  }]
 }

src/core/plugins/deep-linking/layout-wrap-actions.js

@@ -1,37 +0,0 @@
-import { setHash } from "./helpers"
-import { createDeepLinkPath } from "core/utils"
-
-export const show = (ori, { getConfigs }) => (...args) => {
-  ori(...args)
-
-  const isDeepLinkingEnabled = getConfigs().deepLinking
-  if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
-    return
-  }
-
-  try {
-    let [thing, shown] = args
-    let [type] = thing
-
-    if(type === "operations-tag" || type === "operations") {
-      if(!shown) {
-        return setHash("/")
-      }
-
-      if(type === "operations") {
-        let [, tag, operationId] = thing
-        setHash(`/${createDeepLinkPath(tag)}/${createDeepLinkPath(operationId)}`)
-      }
-
-      if(type === "operations-tag") {
-        let [, tag] = thing
-        setHash(`/${createDeepLinkPath(tag)}`)
-      }
-    }
-
-  } catch(e) {
-    // This functionality is not mission critical, so if something goes wrong
-    // we'll just move on
-    console.error(e)
-  }
-}

src/core/plugins/deep-linking/layout.js

@@ -0,0 +1,181 @@
+import { setHash } from "./helpers"
+import zenscroll from "zenscroll"
+import Im, { fromJS } from "immutable"
+
+const SCROLL_TO = "layout_scroll_to"
+const CLEAR_SCROLL_TO = "layout_clear_scroll"
+
+export const show = (ori, { getConfigs, layoutSelectors }) => (...args) => {
+  ori(...args)
+
+  if(!getConfigs().deepLinking) {
+    return
+  }
+
+  try {
+    let [tokenArray, shown] = args
+    //Coerce in to array
+    tokenArray = Array.isArray(tokenArray) ? tokenArray : [tokenArray]
+    // Convert into something we can put in the URL hash
+    // Or return empty, if we cannot
+    const urlHashArray = layoutSelectors.urlHashArrayFromIsShownKey(tokenArray) // Will convert
+
+    // No hash friendly list?
+    if(!urlHashArray.length)
+      return
+
+    const [type, assetName] = urlHashArray
+
+    if (!shown) {
+      return setHash("/")
+    }
+
+    if (urlHashArray.length === 2) {
+      setHash(`/${type}/${assetName}`)
+    } else if (urlHashArray.length === 1) {
+      setHash(`/${type}`)
+    }
+
+  } catch (e) {
+    // This functionality is not mission critical, so if something goes wrong
+    // we'll just move on
+    console.error(e) // eslint-disable-line no-console
+  }
+}
+
+export const scrollTo = (path) => {
+  return {
+    type: SCROLL_TO,
+    payload: Array.isArray(path) ? path : [path]
+  }
+}
+
+export const parseDeepLinkHash = (rawHash) => ({ layoutActions, layoutSelectors, getConfigs }) => {
+
+  if(!getConfigs().deepLinking) {
+    return
+  }
+
+  if(rawHash) {
+    let hash = rawHash.slice(1) // # is first character
+
+
+    if(hash[0] === "!") {
+      // Parse UI 2.x shebangs
+      hash = hash.slice(1)
+    }
+
+    if(hash[0] === "/") {
+      // "/pet/addPet" => "pet/addPet"
+      // makes the split result cleaner
+      // also handles forgotten leading slash
+      hash = hash.slice(1)
+    }
+
+    const isShownKey = layoutSelectors.isShownKeyFromUrlHashArray(hash.split("/"))
+
+    layoutActions.show(isShownKey, true) // TODO: 'show' operation tag
+    layoutActions.scrollTo(isShownKey)
+  }
+}
+
+export const readyToScroll = (isShownKey, ref) => (system) => {
+  const scrollToKey = system.layoutSelectors.getScrollToKey()
+
+  if(Im.is(scrollToKey, fromJS(isShownKey))) {
+    system.layoutActions.scrollToElement(ref)
+    system.layoutActions.clearScrollTo()
+  }
+}
+
+// Scroll to "ref" (dom node) with the scrollbar on "container" or the nearest parent
+export const scrollToElement = (ref, container) => (system) => {
+  try {
+    container = container || system.fn.getScrollParent(ref)
+    let myScroller = zenscroll.createScroller(container)
+    myScroller.to(ref)
+  } catch(e) {
+    console.error(e) // eslint-disable-line no-console
+  }
+}
+
+export const clearScrollTo = () => {
+  return {
+    type: CLEAR_SCROLL_TO,
+  }
+}
+
+// From: https://stackoverflow.com/a/42543908/3933724
+// Modified to return html instead of body element as last resort
+function getScrollParent(element, includeHidden) {
+  const LAST_RESORT = document.documentElement
+  let style = getComputedStyle(element)
+  const excludeStaticParent = style.position === "absolute"
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/
+
+  if (style.position === "fixed")
+    return LAST_RESORT
+  for (let parent = element; (parent = parent.parentElement);) {
+    style = getComputedStyle(parent)
+    if (excludeStaticParent && style.position === "static") {
+      continue
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent
+  }
+
+  return LAST_RESORT
+}
+
+export default {
+  fn: {
+    getScrollParent,
+  },
+  statePlugins: {
+    layout: {
+      actions: {
+        scrollToElement,
+        scrollTo,
+        clearScrollTo,
+        readyToScroll,
+        parseDeepLinkHash
+      },
+      selectors: {
+        getScrollToKey(state) {
+          return state.get("scrollToKey")
+        },
+        isShownKeyFromUrlHashArray(state, urlHashArray) {
+          const [tag, operationId] = urlHashArray
+          // We only put operations in the URL
+          if(operationId) {
+            return ["operations", tag, operationId]
+          } else if (tag) {
+            return ["operations-tag", tag]
+          }
+          return []
+        },
+        urlHashArrayFromIsShownKey(state, isShownKey) {
+          let [type, tag, operationId] = isShownKey
+          // We only put operations in the URL
+          if(type == "operations") {
+            return [tag, operationId]
+          } else if (type == "operations-tag") {
+            return [tag]
+          }
+          return []
+        },
+      },
+      reducers: {
+        [SCROLL_TO](state, action) {
+          return state.set("scrollToKey", Im.fromJS(action.payload))
+        },
+        [CLEAR_SCROLL_TO](state) {
+          return state.delete("scrollToKey")
+        }
+      },
+      wrapActions: {
+        show
+      }
+    }
+  }
+}

src/core/plugins/deep-linking/operation-tag-wrapper.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { PropTypes } from "prop-types"
+
+const Wrapper = (Ori, system) => class OperationTagWrapper extends React.Component {
+
+  static propTypes = {
+    tag: PropTypes.object.isRequired,
+  }
+
+  onLoad = (ref) => {
+    const { tag } = this.props
+    const isShownKey = ["operations-tag", tag]
+    system.layoutActions.readyToScroll(isShownKey, ref)
+  }
+
+  render() {
+    return (
+      <span ref={this.onLoad}>
+        <Ori {...this.props} />
+      </span>
+    )
+  }
+}
+
+export default Wrapper

src/core/plugins/deep-linking/operation-wrapper.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import ImPropTypes from "react-immutable-proptypes"
+
+const Wrapper = (Ori, system) => class OperationWrapper extends React.Component {
+
+  static propTypes = {
+    operation: ImPropTypes.map.isRequired,
+  }
+
+  onLoad = (ref) => {
+    const { operation } = this.props
+    const { tag, operationId } = operation.toObject()
+    const isShownKey = ["operations", tag, operationId]
+    system.layoutActions.readyToScroll(isShownKey, ref)
+  }
+
+  render() {
+    return (
+      <span ref={this.onLoad}>
+        <Ori {...this.props} />
+      </span>
+    )
+  }
+}
+
+export default Wrapper

src/core/plugins/deep-linking/spec-wrap-actions.js

@@ -1,64 +0,0 @@
-import zenscroll from "zenscroll"
-import { escapeDeepLinkPath } from "core/utils"
-
-let hasHashBeenParsed = false //TODO this forces code to only run once which may prevent scrolling if page not refreshed
-
-
-export const updateJsonSpec = (ori, { layoutActions, getConfigs }) => (...args) => {
-  ori(...args)
-
-  const isDeepLinkingEnabled = getConfigs().deepLinking
-  if(!isDeepLinkingEnabled || isDeepLinkingEnabled === "false") {
-    return
-  }
-  if(window.location.hash && !hasHashBeenParsed ) {
-    let hash = window.location.hash.slice(1) // # is first character
-
-    if(hash[0] === "!") {
-      // Parse UI 2.x shebangs
-      hash = hash.slice(1)
-    }
-
-    if(hash[0] === "/") {
-      // "/pet/addPet" => "pet/addPet"
-      // makes the split result cleaner
-      // also handles forgotten leading slash
-      hash = hash.slice(1)
-    }
-
-    let [tag, operationId] = hash.split("/")
-
-    let swaggerUI = document.querySelector(".swagger-ui")
-    let myScroller = zenscroll.createScroller(swaggerUI)
-
-    let target
-
-    if(tag && operationId) {
-      // Pre-expand and scroll to the operation
-      layoutActions.show(["operations-tag", tag], true)
-      layoutActions.show(["operations", tag, operationId], true)
-
-      target = document
-        .getElementById(`operations-${escapeDeepLinkPath(tag)}-${escapeDeepLinkPath(operationId)}`)
-    } else if(tag) {
-      // Pre-expand and scroll to the tag
-      layoutActions.show(["operations-tag", tag], true)
-
-      target = document.getElementById(`operations-tag-${escapeDeepLinkPath(tag)}`)
-    }
-
-
-    if(target) {
-      myScroller.to(target)
-      setTimeout(() => {
-        // Backup functionality: if we're still at the top of the document,
-        // scroll on the entire page (not within the Swagger-UI container)
-        if(zenscroll.getY() === 0) {
-          zenscroll.to(target)
-        }
-      }, 50)
-    }
-  }
-
-  hasHashBeenParsed = true
-}

src/core/plugins/oas3/components/request-body.jsx

@@ -1,10 +1,12 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
-import { OrderedMap } from "immutable"
+import { getSampleSchema } from "core/utils"
+import { Map, OrderedMap } from "immutable"
 
 const RequestBody = ({
   requestBody,
+  requestBodyValue,
   getComponent,
   getConfigs,
   specSelectors,
@@ -13,6 +15,10 @@ const RequestBody = ({
   specPath,
   onChange
 }) => {
+  const handleFile = (e) => {
+    onChange(e.target.files[0])
+  }
+
   const Markdown = getComponent("Markdown")
   const ModelExample = getComponent("modelExample")
   const RequestBodyEditor = getComponent("RequestBodyEditor")
@@ -23,10 +29,80 @@ const RequestBody = ({
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
+  const isObjectContent = mediaTypeValue.getIn(["schema", "type"]) === "object"
+
   if(!mediaTypeValue) {
     return null
   }
 
+  if(contentType === "application/octet-stream") {
+    const Input = getComponent("Input")
+
+    if(!isExecute) {
+      return <i>
+        Example values are not available for <code>application/octet-stream</code> media types.
+      </i>
+    }
+
+    return <Input type={"file"} onChange={handleFile} />
+  }
+
+  if(
+    isObjectContent &&
+    (contentType === "application/x-www-form-urlencoded"
+    || contentType.indexOf("multipart/") === 0))
+  {
+    const JsonSchemaForm = getComponent("JsonSchemaForm")
+    const HighlightCode = getComponent("highlightCode")
+    const bodyProperties = requestBody.getIn(["content", contentType, "schema", "properties"], OrderedMap())
+    requestBodyValue = Map.isMap(requestBodyValue) ? requestBodyValue : OrderedMap()
+
+    return <div className="table-container">
+      <table>
+        <tbody>
+          {
+            bodyProperties.map((prop, key) => {
+              const required = prop.get("required")
+              const type = prop.get("type")
+              const format = prop.get("format")
+
+              const isFile = type === "string" && (format === "binary" || format === "base64")
+
+              return <tr key={key} className="parameters">
+                <td className="col parameters-col_name">
+                        <div className={required ? "parameter__name required" : "parameter__name"}>
+                          { key }
+                          { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
+                        </div>
+                        <div className="parameter__type">
+                          { type }
+                          { format && <span className="prop-format">(${format})</span>}
+                        </div>
+                        <div className="parameter__deprecated">
+                          { prop.get("deprecated") ? "deprecated": null }
+                        </div>
+                      </td>
+                      <td className="col parameters-col_description">
+                        {isExecute ?
+                        <JsonSchemaForm
+                          dispatchInitialValue={!isFile}
+                          schema={prop}
+                          getComponent={getComponent}
+                          value={requestBodyValue.get(key) || getSampleSchema(prop)}
+                          onChange={(value) => {
+                            onChange(value, [key])
+                          }}
+                          />
+                        : <HighlightCode className="example" value={ getSampleSchema(prop) } />}
+                      </td>
+                      </tr>
+            })
+          }
+        </tbody>
+      </table>
+    </div>
+  }
+
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -53,6 +129,7 @@ const RequestBody = ({
 
 RequestBody.propTypes = {
   requestBody: ImPropTypes.orderedMap.isRequired,
+  requestBodyValue: ImPropTypes.orderedMap.isRequired,
   getComponent: PropTypes.func.isRequired,
   getConfigs: PropTypes.func.isRequired,
   specSelectors: PropTypes.object.isRequired,

src/core/plugins/oas3/helpers.js

@@ -6,7 +6,7 @@ export function isOAS3(jsSpec) {
     return false
   }
 
-  return oasVersion.startsWith("3")
+  return oasVersion.startsWith("3.0.")
 }
 
 export function isSwagger2(jsSpec) {
@@ -15,7 +15,7 @@ export function isSwagger2(jsSpec) {
     return false
   }
 
-  return swaggerVersion.startsWith("2")
+  return swaggerVersion.startsWith("2.0")
 }
 
 export function OAS3ComponentWrapFactory(Component) {

src/core/plugins/oas3/wrap-components/index.js

@@ -4,11 +4,13 @@ import parameters from "./parameters"
 import VersionStamp from "./version-stamp"
 import OnlineValidatorBadge from "./online-validator-badge"
 import Model from "./model"
+import JsonSchema_string from "./json-schema-string"
 
 export default {
   Markdown,
   AuthItem,
   parameters,
+  JsonSchema_string,
   VersionStamp,
   model: Model,
   onlineValidatorBadge: OnlineValidatorBadge,

src/core/plugins/oas3/wrap-components/json-schema-string.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { OAS3ComponentWrapFactory } from "../helpers"
+
+export default OAS3ComponentWrapFactory(({ Ori, ...props }) => {
+  const {
+    schema,
+    getComponent,
+    errors,
+    onChange
+  } = props
+
+  const { type, format } = schema
+  const Input = getComponent("Input")
+
+  if(type === "string" && (format === "binary" || format === "base64")) {
+    return <Input type="file"
+                   className={ errors.length ? "invalid" : ""}
+                   title={ errors.length ? errors : ""}
+                   onChange={(e) => {
+                     onChange(e.target.files[0])
+                   }}
+                   disabled={Ori.isDisabled}/>
+  } else {
+    return <Ori {...props} />
+  }
+})

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

@@ -185,8 +185,17 @@ class Parameters extends Component {
               <RequestBody
                 specPath={requestBodySpecPath}
                 requestBody={requestBody}
+                requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod) || Map()}
                 isExecute={isExecute}
-                onChange={(value) => {
+                onChange={(value, path) => {
+                  if(path) {
+                    const lastValue = oas3Selectors.requestBodyValue(...pathMethod)
+                    const usableValue = Map.isMap(lastValue) ? lastValue : Map()
+                    return oas3Actions.setRequestBodyValue({
+                      pathMethod,
+                      value: usableValue.setIn(path, value)
+                    })
+                  }
                   oas3Actions.setRequestBodyValue({ value, pathMethod })
                 }}
                 contentType={oas3Selectors.requestContentType(...pathMethod)}/>

src/core/plugins/spec/actions.js

@@ -348,7 +348,9 @@ export const executeRequest = (req) =>
 
       if(isJSONObject(requestBody)) {
         req.requestBody = JSON.parse(requestBody)
-      } else {
+      } else if(requestBody && requestBody.toJS) {
+        req.requestBody = requestBody.toJS()
+      } else{
         req.requestBody = requestBody
       }
     }

src/core/plugins/spec/wrap-actions.js

@@ -12,7 +12,7 @@ export const updateJsonSpec = (ori, {specActions}) => (...args) => {
 
   // Trigger resolution of any path-level $refs.
   const [json] = args
-  const pathItems = get(json, ["paths"])
+  const pathItems = get(json, ["paths"]) || {}
   const pathItemKeys = Object.keys(pathItems)
 
   pathItemKeys.forEach(k => {

src/core/presets/base.js

@@ -31,6 +31,7 @@ import Clear from "core/components/clear"
 import LiveResponse from "core/components/live-response"
 import OnlineValidatorBadge from "core/components/online-validator-badge"
 import Operations from "core/components/operations"
+import OperationTag from "core/components/operation-tag"
 import Operation from "core/components/operation"
 import OperationExt from "core/components/operation-extensions"
 import OperationExtRow from "core/components/operation-extension-row"
@@ -65,6 +66,7 @@ import ArrayModel from "core/components/array-model"
 import PrimitiveModel from "core/components/primitive-model"
 import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
+import VersionPragmaFilter from "core/components/version-pragma-filter"
 import VersionStamp from "core/components/version-stamp"
 import DeepLink from "core/components/deep-link"
 import SvgAssets from "core/components/svg-assets"
@@ -124,10 +126,12 @@ export default function() {
       TryItOutButton,
       Markdown,
       BaseLayout,
+      VersionPragmaFilter,
       VersionStamp,
       OperationExt,
       OperationExtRow,
       ParameterExt,
+      OperationTag,
       OperationContainer,
       DeepLink,
       InfoUrl,

src/core/utils.js

@@ -503,7 +503,30 @@ export const validateParam = (param, isXml, isOAS3 = false) => {
     let numberCheck = type === "number" && (value || value === 0)
     let integerCheck = type === "integer" && (value || value === 0)
 
-    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
+    let oas3ObjectCheck = false
+
+    if(false || isOAS3 && type === "object") {
+      if(typeof value === "object") {
+        oas3ObjectCheck = true
+      } else if(typeof value === "string") {
+        try {
+          JSON.parse(value)
+          oas3ObjectCheck = true
+        } catch(e) {
+          errors.push("Parameter string value must be valid JSON")
+          return errors
+        }
+      }
+    }
+
+    const allChecks = [
+      stringCheck, arrayCheck, listCheck, fileCheck, booleanCheck,
+      numberCheck, integerCheck, oas3ObjectCheck
+    ]
+
+    const passedAnyCheck = allChecks.some(v => !!v)
+
+    if ( required && !passedAnyCheck ) {
       errors.push("Required field is not provided")
       return errors
     }

src/plugins/topbar/topbar.jsx

@@ -140,7 +140,7 @@ export default class Topbar extends React.Component {
       <div className="topbar">
         <div className="wrapper">
           <div className="topbar-wrapper">
-            <Link href="#">
+            <Link>
               <img height="30" width="30" src={ Logo } alt="Swagger UI"/>
               <span>swagger</span>
             </Link>

src/style/_form.scss

@@ -51,7 +51,8 @@ input[type=text],
 input[type=password],
 input[type=search],
 input[type=email],
-input[type=file]
+input[type=file],
+textarea
 {
     min-width: 100px;
     margin: 5px 0;

src/style/_layout.scss

@@ -796,3 +796,30 @@ a.nostyle {
     cursor: pointer;
   }
 }
+
+.version-pragma {
+  height: 100%;
+  padding: 5em 0px;
+
+  &__message {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    font-size: 1.2em;
+    text-align: center;
+    line-height: 1.5em;
+
+    padding: 0px .6em;
+
+    > div {
+      max-width: 55ch;
+      flex: 1;
+    }
+
+    code {
+      background-color: #dedede;
+      padding: 4px 4px 2px;
+      white-space: pre;
+    }
+  }
+}

test/bugs/4557-default-parameter-values.js

@@ -0,0 +1,67 @@
+/* eslint-env mocha */
+import React from "react"
+import { List, fromJS } from "immutable"
+import expect, { createSpy } from "expect"
+import { render } from "enzyme"
+import ParameterRow from "components/parameter-row"
+
+describe("bug #4557: default parameter values", function(){
+  it("should apply a Swagger 2.0 default value", function(){
+
+    const paramValue = fromJS({
+      description: "a pet",
+      type: "string",
+      default: "MyDefaultValue"
+    })
+
+    let props = {
+      getComponent: ()=> "div",
+      specSelectors: {
+        security(){},
+        parameterWithMeta(){ return paramValue },
+        isOAS3(){ return false }
+      },
+      operation: {get: ()=>{}},
+      onChange: createSpy(),
+      param: paramValue,
+      onChangeConsumes: () => {},
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props}/>)
+
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "MyDefaultValue")
+  })
+  it("should apply an OpenAPI 3.0 default value", function(){
+
+    const paramValue = fromJS({
+      description: "a pet",
+      schema: {
+        type: "string",
+        default: "MyDefaultValue"
+      }
+    })
+
+    let props = {
+      getComponent: ()=> "div",
+      specSelectors: {
+        security(){},
+        parameterWithMeta(){ return paramValue },
+        isOAS3(){ return true }
+      },
+      operation: {get: ()=>{}},
+      onChange: createSpy(),
+      param: paramValue,
+      onChangeConsumes: () => {},
+      pathMethod: [],
+      getConfigs: () => { return {} },
+      specPath: List([])
+    }
+
+    render(<ParameterRow {...props}/>)
+
+    expect(props.onChange).toHaveBeenCalledWith(paramValue, "MyDefaultValue")
+  })
+})

test/components/json-schema-form.js

@@ -1,12 +1,13 @@
 /* eslint-env mocha */
 import React from "react"
+import { List } from "immutable"
 import expect, { createSpy } from "expect"
-import { Select, Input } from "components/layout-utils"
-import { render } from "enzyme"
+import { Select, Input, TextArea } from "components/layout-utils"
+import { mount, render } from "enzyme"
 import * as JsonSchemaComponents from "core/json-schema-components"
 import { JsonSchemaForm } from "core/json-schema-components"
 
-const components = {...JsonSchemaComponents, Select, Input}
+const components = {...JsonSchemaComponents, Select, Input, TextArea}
 
 const getComponentStub = (name) => {
   if(components[name]) return components[name]
@@ -85,6 +86,54 @@ describe("<JsonSchemaForm/>", function(){
       expect(wrapper.find("select option").eq(2).text()).toEqual("false")
     })
 
+
+    it("should render the correct options for an enum boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "boolean",
+          enum: ["true"]
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(2)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("--")
+    })
+
+    it("should render the correct options for a required boolean parameter", function(){
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: () => {},
+        keyName: "",
+        fn: {},
+        schema: {
+          type: "boolean",
+          required: true
+        }
+      }
+
+      let wrapper = render(<JsonSchemaForm {...props}/>)
+
+      expect(wrapper.find("select").length).toEqual(1)
+      expect(wrapper.find("select option").length).toEqual(3)
+      expect(wrapper.find("select option").eq(0).text()).toEqual("--")
+      expect(wrapper.find("select option").eq(1).text()).toEqual("true")
+      expect(wrapper.find("select option").eq(2).text()).toEqual("false")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("--")
+    })
+
     it("should render the correct options for a required enum boolean parameter", function(){
 
       let props = {
@@ -104,7 +153,40 @@ describe("<JsonSchemaForm/>", function(){
 
       expect(wrapper.find("select").length).toEqual(1)
       expect(wrapper.find("select option").length).toEqual(1)
-      expect(wrapper.find("select option").first().text()).toEqual("true")
+      expect(wrapper.find("select option").eq(0).text()).toEqual("true")
+      expect(wrapper.find("select option:checked").first().text()).toEqual("true")
+    })
+  })
+  describe("objects", function() {
+    it("should render the correct editor for an OAS3 object parameter", function(){
+      let updateQueue = []
+
+      let props = {
+        getComponent: getComponentStub,
+        value: "",
+        onChange: (value) => {
+          updateQueue.push({ value })
+        },
+        keyName: "",
+        fn: {},
+        errors: List(),
+        schema: {
+          type: "object",
+          properties: {
+            id: {
+              type: "string",
+              example: "abc123"
+            }
+          }
+        }
+      }
+
+      let wrapper = mount(<JsonSchemaForm {...props}/>)
+
+      updateQueue.forEach(newProps => wrapper.setProps(newProps))
+
+      expect(wrapper.find("textarea").length).toEqual(1)
+      expect(wrapper.find("textarea").text()).toEqual(`{\n  "id": "abc123"\n}`)
     })
   })
   describe("unknown types", function() {

test/components/models.js

@@ -2,7 +2,7 @@
 import React from "react"
 import expect, { createSpy } from "expect"
 import { shallow } from "enzyme"
-import { fromJS } from "immutable"
+import { fromJS, Map } from "immutable"
 import Models from "components/models"
 import ModelCollpase from "components/model-collapse"
 import ModelComponent from "components/model-wrapper"
@@ -19,6 +19,7 @@ describe("<Models/>", function(){
     },
     specSelectors: {
       isOAS3: () => false,
+      specJson: () => Map(),
       definitions: function() {
         return fromJS({
           def1: {},

test/components/operations.js

@@ -1,6 +1,6 @@
 /* eslint-env mocha */
 import React from "react"
-import expect, { createSpy } from "expect"
+import expect from "expect"
 import { render } from "enzyme"
 import { fromJS } from "immutable"
 import DeepLink from "components/deep-link"
@@ -10,7 +10,8 @@ import {Collapse} from "components/layout-utils"
 const components = {
   Collapse,
   DeepLink,
-  OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />
+  OperationContainer: ({ path, method }) => <span className="mocked-op" id={`${path}-${method}`} />,
+  OperationTag: "div",
 }
 
 describe("<Operations/>", function(){

test/components/version-pragma-filter.js

@@ -0,0 +1,70 @@
+/* eslint-env mocha */
+import React from "react"
+import expect, { createSpy } from "expect"
+import { shallow } from "enzyme"
+import { fromJS, Map } from "immutable"
+import VersionPragmaFilter from "components/version-pragma-filter"
+
+describe("<VersionPragmaFilter/>", function(){
+  it("renders children for a Swagger 2 definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={true} isOAS3={false}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders children for an OpenAPI 3 definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={false} isOAS3={true}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders children when a bypass prop is set", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter bypass>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div").length).toEqual(1)
+    expect(wrapper.find("div").text()).toEqual("hello!")
+  })
+  it("renders the correct message for an ambiguous-version definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={true} isOAS3={true}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div.version-pragma__message--ambiguous").length).toEqual(1)
+    expect(wrapper.find("div.version-pragma__message--missing").length).toEqual(0)
+  })
+  it("renders the correct message for a missing-version definition", function(){
+    // When
+    let wrapper = shallow(
+      <VersionPragmaFilter isSwagger2={false} isOAS3={false}>
+        hello!
+      </VersionPragmaFilter>
+    )
+
+    // Then
+    expect(wrapper.find("div.version-pragma__message--missing").length).toEqual(1)
+    expect(wrapper.find("div.version-pragma__message--ambiguous").length).toEqual(0)
+  })
+
+})

test/core/utils.js

@@ -350,6 +350,12 @@ describe("utils", function() {
       expect( result ).toEqual( expectedError )
     }
 
+    const assertValidateOas3Param = (param, expectedError) => {
+      // for cases where you _only_ want to try OAS3
+      result = validateParam( fromJS(param), false, true )
+      expect( result ).toEqual( expectedError )
+    }
+
     it("should check the isOAS3 flag when validating parameters", function() {
       // This should "skip" validation because there is no `schema` property
       // and we are telling `validateParam` this is an OAS3 spec
@@ -361,6 +367,92 @@ describe("utils", function() {
       expect( result ).toEqual( [] )
     })
 
+    it("validates required OAS3 objects", function() {
+      // valid object
+      param = {
+        required: true,
+        schema: {
+          type: "object"
+        },
+        value: {
+          abc: 123
+        }
+      }
+      assertValidateOas3Param(param, [])
+
+      // valid object-as-string
+      param = {
+        required: true,
+        schema: {
+          type: "object"
+        },
+        value: JSON.stringify({
+          abc: 123
+        })
+      }
+      assertValidateOas3Param(param, [])
+
+      // invalid object-as-string
+      param = {
+        required: true,
+        schema: {
+          type: "object"
+        },
+        value: "{{}"
+      }
+      assertValidateOas3Param(param, ["Parameter string value must be valid JSON"])
+
+      // missing when required
+      param = {
+        required: true,
+        schema: {
+          type: "object"
+        },
+      }
+      assertValidateOas3Param(param, ["Required field is not provided"])
+    })
+
+    it("validates optional OAS3 objects", function() {
+      // valid object
+      param = {
+        schema: {
+          type: "object"
+        },
+        value: {
+          abc: 123
+        }
+      }
+      assertValidateOas3Param(param, [])
+
+      // valid object-as-string
+      param = {
+        schema: {
+          type: "object"
+        },
+        value: JSON.stringify({
+          abc: 123
+        })
+      }
+      assertValidateOas3Param(param, [])
+
+      // invalid object-as-string
+      param = {
+        schema: {
+          type: "object"
+        },
+        value: "{{}"
+      }
+      assertValidateOas3Param(param, ["Parameter string value must be valid JSON"])
+
+      // missing when not required
+      param = {
+        schema: {
+          type: "object"
+        },
+      }
+      assertValidateOas3Param(param, [])
+    })
+
     it("validates required strings", function() {
       // invalid string
       param = {
@@ -962,7 +1054,7 @@ describe("utils", function() {
       expect(result).toEqual(Map([[ "minimum", "b"]]))
     })
   })
-  
+
   describe("deeplyStripKey", function() {
     it("should filter out a specified key", function() {
       const input = {
@@ -1065,8 +1157,7 @@ describe("utils", function() {
     })
 
     it("should sanitize a `data:` url", function() {
-      const res = sanitizeUrl(`data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGV
-sbG8iKTs8L3NjcmlwdD4=`)
+      const res = sanitizeUrl(`data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGVsbG8iKTs8L3NjcmlwdD4=`)
 
       expect(res).toEqual("about:blank")
     })

test/e2e/scenarios/bugs/4536.js

@@ -0,0 +1,29 @@
+describe("bug #4536: model name consistency", function () {
+    let mainPage
+    beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3230")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(2000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/bugs/4536.yaml")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("consistently displays a model's name regardless of expansion state", function (client) {
+        client.waitForElementVisible("span.model.model-title", 10000)
+            .assert.containsText("span.model.model-title", "TitleName")
+            .click("span.model.model-title")
+            .pause(500)
+            .assert.containsText("span.model-title__text", "TitleName")
+
+        client.end()
+    })
+})

test/e2e/specs/bugs/4536.yaml

@@ -0,0 +1,9 @@
+swagger: '2.0'
+info:
+  version: 0.0.0
+  title: test
+paths: {}
+
+definitions:
+  ModelName:
+    title: TitleName

webpack-dist-bundle.config.js

@@ -20,6 +20,7 @@ module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,
+    mangle: true,
     sourcemaps: true,
   },
 

webpack-dist-standalone.config.js

@@ -20,6 +20,7 @@ module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,
+    mangle: true,
     sourcemaps: true,
   },