Merge pull request #3351 from shockey/v/3.0.18

v3.0.18

.babelrc

@@ -5,6 +5,7 @@
     "stage-0"
   ],
   "plugins": [
+    "transform-runtime",
     [
       "module-alias",
       [

README.md

@@ -6,6 +6,8 @@
 
 **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 contribution](https://github.com/swagger-api/swagger-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+contribution%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.
 
 This repo publishes to two different NPM packages:
@@ -20,8 +22,7 @@ The OpenAPI Specification has undergone 4 revisions since initial creation in 20
 
 Swagger UI Version | Release Date | OpenAPI Spec compatibility | Notes | Status
 ------------------ | ------------ | -------------------------- | ----- | ------
-3.0.14              | 2017-06-09   | 2.0                        | [tag 
-v3.0.14](https://github.com/swagger-api/swagger-ui/tree/v3.0.14) |
+3.0.18              | 2017-07-07   | 2.0                        | [tag v3.0.18](https://github.com/swagger-api/swagger-ui/tree/v3.0.18) |
 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) |
 2.0.24             | 2014-09-12   | 1.1, 1.2 | [tag v2.0.24](https://github.com/swagger-api/swagger-ui/tree/v2.0.24) |
@@ -125,9 +126,13 @@ If you'd like to use the bundle files via npm, check out the [`swagger-ui-dist`
 
 #### Parameters
 
+Parameters with dots in their names are single strings used to organize subordinate parameters, and are not indicative of a nested structure.
+
 Parameter Name | Description
 --- | ---
-url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`).
+url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`). Will be ignored if `urls` or `spec` is used.
+urls | 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.primaryName | 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`.
 spec | A JSON 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.
 validatorUrl | By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation.
 dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
@@ -138,11 +143,12 @@ parameterMacro | MUST be a function. Function to set default value to parameters
 modelPropertyMacro | MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
 docExpansion | Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.
 displayOperationId | Controls the display of operationId in operations list. The default is `false`.
+displayRequestDuration | Controls the display of the request duration (in milliseconds) for `Try it out` requests. The default is `false`.
 
 ### Plugins
 
 #### Topbar plugin
-Topbar plugin enables top bar with input for spec path and explore button. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in `src/standalone/index.js`:
+Topbar plugin enables top bar with input for spec path and explore button or a dropdown if `urls` is used. By default the plugin is enabled, and to disable it you need to remove Topbar plugin from presets in `src/standalone/index.js`:
 
 ```
 let preset = [

build-tools/loadersByExtension.js

@@ -1,28 +0,0 @@
-function extsToRegExp(exts) {
-	return new RegExp("\\.(" + exts.map(function(ext) {
-		return ext.replace(/\./g, "\\.");
-	}).join("|") + ")(\\?.*)?$");
-}
-
-module.exports = function loadersByExtension(obj) {
-	var loaders = [];
-	Object.keys(obj).forEach(function(key) {
-		var exts = key.split("|");
-		var value = obj[key];
-		var entry = {
-			extensions: exts,
-			test: extsToRegExp(exts)
-		};
-		if(Array.isArray(value)) {
-			entry.loaders = value;
-		} else if(typeof value === "string") {
-			entry.loader = value;
-		} else {
-			Object.keys(value).forEach(function(valueKey) {
-				entry[valueKey] = value[valueKey];
-			});
-		}
-		loaders.push(entry);
-	});
-	return loaders;
-};

dist/index.html

@@ -71,6 +71,7 @@
 <script src="./swagger-ui-standalone-preset.js"> </script>
 <script>
 window.onload = function() {
+  
   // Build a system
   const ui = SwaggerUIBundle({
     url: "http://petstore.swagger.io/v2/swagger.json",

dist/swagger-ui-bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;AAu/FA;AA6+FA;;;;;;;;;;;;;;;;;;;;;;;;;;AA2TA;;;;;;AAoIA;AAi7FA;AAmtCA;AAi0IA;AA0oJA;AAgiGA;AA0/FA;AAqkFA;AAqjFA;AAk9CA;AA+jDA;AAwrCA;AA0gFA;;;;;AA+zBA;AAsyJA;;;;;;;;;;;;;;AA64EA;AA4mIA;AAquJA;AA2qHA;AA2mGA;AAiiEA;AAq4DA;AAg3DA;AA8NA;;;;;;AAw8FA;AA07FA;;;;;AAi8CA;AAgsFA;AAs2CA;AA+kCA;AAg8CA;AAg/EA;AAu/BA;AAk0FA;;;;;;;;;AAomDA;AA2zIA;AAu7FA;AAmrFA;AA20EA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;;;;;AAsyKA;;;;;;AA8qEA;;;;;;;;;;;;;;;;;;;;;;;;;;AA6nTA;;;;;;;;;;;;;;AAu8JA;;;;;;;;;AAkgnBA;;;;;AAigQA;;;;;;AAqpVA","sourceRoot":""}

dist/swagger-ui-standalone-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA8QA;AAmvGA;AAuxFA;;;;;;AAocA;AAkvFA;AAu+CA;AAo+CA;AAgrCA;AAuyEA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA40CA;;;;;;AA4kFA","sourceRoot":""}

dist/swagger-ui.css.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.css","sources":[],"mappings":"","sourceRoot":""}
+{"version":3,"file":"swagger-ui.css","sources":[],"mappings":";;;","sourceRoot":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA4yCA;AAoyHA;AAmyHA;AAukGA;AA+9BA;AA2jCA;AA0iCA;AAy4BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAopaA","sourceRoot":""}

make-webpack-config.js

@@ -3,11 +3,8 @@ var path = require('path')
 var webpack = require('webpack')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var deepExtend = require('deep-extend')
-var autoprefixer = require('autoprefixer')
 const {gitDescribeSync} = require('git-describe');
 
-var loadersByExtension = require('./build-tools/loadersByExtension')
-
 var pkg = require('./package.json')
 
 let gitInfo
@@ -21,7 +18,27 @@ try {
   }
 }
 
-module.exports = function(options) {
+var commonRules = [
+  { test: /\.(js(x)?)(\?.*)?$/,
+    use: [{
+      loader: 'babel-loader',
+      options: {
+        retainLines: true
+      }
+    }],
+    include: [ path.join(__dirname, 'src') ]
+  },
+  { test: /\.(txt|yaml)(\?.*)?$/,
+    loader: 'raw-loader' },
+  { test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
+    loader: 'url-loader?limit=10000' },
+  { test: /\.(woff|woff2)(\?.*)?$/,
+    loader: 'url-loader?limit=100000' },
+  { test: /\.(ttf|eot)(\?.*)?$/,
+    loader: 'file-loader' }
+]
+
+module.exports = function(rules, options) {
 
   // Special options, that have logic in this file
   // ...with defaults
@@ -33,23 +50,11 @@ module.exports = function(options) {
     sourcemaps: false,
   }, options._special)
 
-  var loadersMap = {
-    'js(x)?': {
-      loader: 'babel?retainLines=true',
-      include: [ path.join(__dirname, 'src') ],
-    },
-    'json': 'json-loader',
-    'txt|yaml': 'raw-loader',
-    'png|jpg|jpeg|gif|svg': specialOptions.disableAssets ? 'null-loader' : 'url-loader?limit=10000',
-    'woff|woff2': specialOptions.disableAssets ? 'null-loader' : 'url-loader?limit=100000',
-    'ttf|eot':  specialOptions.disableAssets ? 'null-loader' : 'file-loader',
-    "worker.js": ["worker-loader?inline=true", "babel"]
-  }
-
   var plugins = []
 
   if( specialOptions.separateStylesheets ) {
-    plugins.push(new ExtractTextPlugin('[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''), {
+    plugins.push(new ExtractTextPlugin({
+      filename: '[name].css' + (specialOptions.longTermCaching ? '?[contenthash]' : ''),
       allChunks: true
     }))
   }
@@ -58,14 +63,16 @@ module.exports = function(options) {
 
     plugins.push(
       new webpack.optimize.UglifyJsPlugin({
-        compressor: {
-          warnings: false
-        }
+        sourceMap: true,
       }),
-      new webpack.optimize.DedupePlugin()
+      new webpack.LoaderOptionsPlugin({
+        options: {
+          context: __dirname
+        }
+      })
     )
 
-    plugins.push( new webpack.NoErrorsPlugin())
+    plugins.push( new webpack.NoEmitOnErrorsPlugin())
 
   }
 
@@ -83,34 +90,7 @@ module.exports = function(options) {
       })
     }))
 
-  var cssLoader = 'css-loader!postcss-loader'
-
-  var completeStylesheetLoaders = deepExtend({
-    'css': cssLoader,
-    'scss': cssLoader + '!' + 'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true',
-    'less': cssLoader + '!' + 'less-loader',
-  }, specialOptions.stylesheetLoaders)
-
-  if(specialOptions.cssModules) {
-    cssLoader = cssLoader + '?module' +  (specialOptions.minimize ? '' : '&localIdentName=[path][name]---[local]---[hash:base64:5]')
-  }
-
-  Object.keys(completeStylesheetLoaders).forEach(function(ext) {
-    var ori = completeStylesheetLoaders[ext]
-    if(specialOptions.separateStylesheets) {
-      completeStylesheetLoaders[ext] = ExtractTextPlugin.extract('style-loader', ori)
-    } else {
-      completeStylesheetLoaders[ext] = 'style-loader!' + ori
-    }
-  })
-
-  var loaders = loadersByExtension(deepExtend({}, loadersMap, specialOptions.loaders, completeStylesheetLoaders))
-  var extraLoaders = (options.module || {} ).loaders
-
-  if(Array.isArray(extraLoaders)) {
-    loaders = loaders.concat(extraLoaders)
-    delete options.module.loaders
-  }
+  delete options._special
 
   var completeConfig =  deepExtend({
     entry: {},
@@ -130,11 +110,11 @@ module.exports = function(options) {
     },
 
     module: {
-      loaders: loaders,
+      rules: commonRules.concat(rules),
     },
 
     resolveLoader: {
-      root: path.join(__dirname, 'node_modules'),
+      modules: [path.join(__dirname, 'node_modules')],
     },
 
     externals: {
@@ -142,19 +122,16 @@ module.exports = function(options) {
     },
 
     resolve: {
-      root: path.join(__dirname, './src'),
-      modulesDirectories: ['node_modules'],
-      extensions: ["", ".web.js", ".js", ".jsx", ".json", ".less"],
-      packageAlias: 'browser',
+      modules: [
+        path.join(__dirname, './src'),
+        'node_modules'
+      ],
+      extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
       alias: {
-        base: "getbase/src/less/base"
+        base: "getbase/src/less/base",
       }
     },
 
-    postcss: function() {
-      return [autoprefixer]
-    },
-
     devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
 
     plugins,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.0.14",
+  "version": "3.0.18",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -32,10 +32,9 @@
     "test": "npm run lint-errors && npm run just-test-in-node",
     "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 --recursive --compilers js:babel-core/register test/core test/components test/bugs"
+    "just-test-in-node": "mocha --recursive --compilers js:babel-core/register test/core test/components test/bugs test/swagger-ui-dist-package"
   },
   "dependencies": {
-    "babel-polyfill": "^6.23.0",
     "base64-js": "^1.2.0",
     "brace": "0.7.0",
     "deep-extend": "0.4.1",
@@ -49,6 +48,7 @@
     "matcher": "^0.1.2",
     "memoizee": "0.4.1",
     "promise-worker": "^1.1.1",
+    "prop-types": "^15.5.10",
     "react": "^15.4.0",
     "react-addons-perf": "0.14.8",
     "react-addons-shallow-compare": "0.14.8",
@@ -70,60 +70,62 @@
     "sanitize-html": "^1.14.1",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "~3.0.14",
+    "swagger-client": "3.0.17",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
     "xml": "1.0.1",
-    "yaml-js": "^0.1.3"
+    "yaml-js": "0.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "6.6.1",
+    "autoprefixer": "7.1.1",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.3.2",
+    "babel-loader": "^7.1.0",
     "babel-plugin-module-alias": "^1.6.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-es2015-ie": "^6.6.2",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-0": "^6.22.0",
     "babel-runtime": "^6.23.0",
-    "css-loader": "0.22.0",
-    "deep-extend": "^0.4.1",
+    "css-loader": "0.28.4",
+    "deep-extend": "^0.5.0",
     "deepmerge": "^1.3.2",
     "enzyme": "^2.7.1",
-    "eslint": "^2.13.1",
-    "eslint-plugin-react": "^6.10.3",
-    "extract-text-webpack-plugin": "0.8.2",
-    "file-loader": "0.8.4",
+    "eslint": "^4.1.1",
+    "eslint-plugin-import": "^2.6.0",
+    "eslint-plugin-react": "^7.1.0",
+    "extract-text-webpack-plugin": "^2.1.2",
+    "file-loader": "0.11.2",
     "git-describe": "^4.0.1",
     "html-webpack-plugin": "^2.28.0",
-    "imports-loader": "0.6.5",
-    "json-loader": "0.5.3",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-mocha": "^0.2.2",
+    "imports-loader": "0.7.1",
+    "json-loader": "0.5.4",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "1.8.0",
-    "less": "2.5.3",
-    "less-loader": "2.2.1",
-    "license-checker": "^8.0.4",
-    "mocha": "^2.5.3",
+    "karma-webpack": "2.0.3",
+    "less": "2.7.2",
+    "less-loader": "4.0.4",
+    "license-checker": "^11.0.0",
+    "mocha": "^3.4.2",
     "node-sass": "^4.5.0",
-    "npm-run-all": "3.1.1",
+    "npm-run-all": "4.0.2",
     "null-loader": "0.1.1",
     "open": "0.0.5",
-    "postcss-loader": "0.7.0",
+    "postcss-loader": "2.0.6",
     "raw-loader": "0.5.1",
     "react-hot-loader": "^1.3.1",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.0",
     "sass-loader": "^6.0.2",
-    "standard": "^8.6.0",
-    "standard-loader": "^5.0.0",
-    "style-loader": "0.13.0",
-    "url-loader": "0.5.6",
-    "webpack": "^1.14.0",
+    "standard": "^10.0.2",
+    "standard-loader": "^6.0.1",
+    "style-loader": "0.18.2",
+    "url-loader": "0.5.9",
+    "webpack": "^2.6.1",
     "webpack-bundle-size-analyzer": "^2.5.0"
   },
   "config": {
@@ -132,9 +134,9 @@
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "IE 10"
+    "IE 11"
   ],
   "optionalDependencies": {
-    "webpack-dev-server": "1.14.0"
+    "webpack-dev-server": "2.5.0"
   }
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require("autoprefixer")
+  ]
+}

src/core/components/app.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class App extends React.Component {
 
@@ -6,7 +7,7 @@ export default class App extends React.Component {
     let { getComponent, layoutSelectors } = this.props
     const layoutName = layoutSelectors.current()
     const Component = getComponent(layoutName, true)
-    return Component ? Component : ()=> <h1> No layout defined for "{layoutName}" </h1>
+    return Component ? Component : ()=> <h1> No layout defined for &quot;{layoutName}&quot; </h1>
   }
 
   render() {

src/core/components/auth/api-key-auth.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ApiKeyAuth extends React.Component {
   static propTypes = {

src/core/components/auth/authorization-popup.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizationPopup extends React.Component {
   close =() => {

src/core/components/auth/authorize-btn.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthorizeBtn extends React.Component {
   static propTypes = {

src/core/components/auth/authorize-operation-btn.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class AuthorizeOperationBtn extends React.Component {

src/core/components/auth/auths.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class Auths extends React.Component {

src/core/components/auth/basic-auth.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 export default class BasicAuth extends React.Component {

src/core/components/auth/error.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class AuthError extends React.Component {
 

src/core/components/auth/oauth2.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import oauth2Authorize from "core/oauth2-authorize"
 
 const IMPLICIT = "implicit"

src/core/components/clear.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Clear extends Component {
 

src/core/components/content-type.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { fromJS } from "immutable"
 

src/core/components/curl.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import curlify from "core/curlify"
 
 export default class Curl extends React.Component {
@@ -19,7 +20,7 @@ export default class Curl extends React.Component {
       <div>
         <h4>Curl</h4>
         <div className="copy-paste">
-          <textarea onFocus={this.handleFocus} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
+          <textarea onFocus={this.handleFocus} readOnly="true" className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
         </div>
       </div>
     )

src/core/components/debug.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Collapse from "react-collapse"
 import { presets } from "react-motion"
 import ObjectInspector from "react-object-inspector"

src/core/components/errors.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { List } from "immutable"
 import Collapse from "react-collapse"
 

src/core/components/execute.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Execute extends Component {
 

src/core/components/headers.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Im from "immutable"
 
 export default class Headers extends React.Component {

src/core/components/highlight-code.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import { highlight } from "core/utils"
 
 export default class HighlightCode extends Component {
@@ -8,17 +9,21 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    highlight(this.refs.el)
+    highlight(this.el)
   }
 
   componentDidUpdate() {
-    highlight(this.refs.el)
+    highlight(this.el)
+  }
+
+  initializeComponent = (c) => {
+    this.el = c
   }
 
   render () {
     let { value, className } = this.props
     className = className || ""
 
-    return <pre ref="el" className={className + " microlight"}>{ value }</pre>
+    return <pre ref={this.initializeComponent} className={className + " microlight"}>{ value }</pre>
   }
 }

src/core/components/info.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
 

src/core/components/layout-utils.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import OriCollapse from "react-collapse"
 
 function xclass(...args) {

src/core/components/layouts/base.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class BaseLayout extends React.Component {
 

src/core/components/layouts/xpane.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class XPane extends React.Component {
 

src/core/components/live-response.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
 const Headers = ( { headers } )=>{
@@ -8,27 +9,40 @@ const Headers = ( { headers } )=>{
       <pre>{headers}</pre>
     </div>)
 }
-
 Headers.propTypes = {
   headers: PropTypes.array.isRequired
 }
 
+const Duration = ( { duration } ) => {
+  return (
+    <div>
+      <h5>Request duration</h5>
+      <pre>{duration} ms</pre>
+    </div>
+  )
+}
+Duration.propTypes = {
+  duration: PropTypes.number.isRequired
+}
+
+
 export default class LiveResponse extends React.Component {
   static propTypes = {
     response: PropTypes.object.isRequired,
-    getComponent: PropTypes.func.isRequired
+    getComponent: PropTypes.func.isRequired,
+    displayRequestDuration: PropTypes.bool.isRequired
   }
 
   render() {
-    const { request, response, getComponent } = this.props
+    const { request, response, getComponent, displayRequestDuration } = this.props
 
-    const body = response.get("text")
     const status = response.get("status")
     const url = response.get("url")
     const headers = response.get("headers").toJS()
     const notDocumented = response.get("notDocumented")
     const isError = response.get("error")
-
+    const body = response.get("text")
+    const duration = response.get("duration")
     const headersKeys = Object.keys(headers)
     const contentType = headers["content-type"]
 
@@ -37,6 +51,7 @@ export default class LiveResponse extends React.Component {
     const returnObject = headersKeys.map(key => {
       return <span className="headerline" key={key}> {key}: {headers[key]} </span>
     })
+    const hasHeaders = returnObject.length !== 0
 
     return (
       <div>
@@ -54,28 +69,32 @@ export default class LiveResponse extends React.Component {
               <td className="col response-col_status">
                 { status }
                 {
-                  !notDocumented ? null :
-                  <div className="response-undocumented">
-                    <i> Undocumented </i>
-                  </div>
+                  notDocumented ? <div className="response-undocumented">
+                                    <i> Undocumented </i>
+                                  </div>
+                                : null
                 }
               </td>
               <td className="col response-col_description">
                 {
-                  !isError ? null : <span>
-                    {`${response.get("name")}: ${response.get("message")}`}
-                  </span>
+                  isError ? <span>
+                              {`${response.get("name")}: ${response.get("message")}`}
+                            </span>
+                          : null
                 }
                 {
-                  !body || isError ? null
-                        : <ResponseBody content={ body }
-                                        contentType={ contentType }
-                                        url={ url }
-                                        headers={ headers }
-                                        getComponent={ getComponent }/>
+                  body ? <ResponseBody content={ body }
+                                       contentType={ contentType }
+                                       url={ url }
+                                       headers={ headers }
+                                       getComponent={ getComponent }/>
+                       : null
                 }
                 {
-                  !headers ? null : <Headers headers={ returnObject }/>
+                  hasHeaders ? <Headers headers={ returnObject }/> : null
+                }
+                {
+                  displayRequestDuration && duration ? <Duration duration={ duration } /> : null
                 }
               </td>
             </tr>

src/core/components/model-example.jsx

@@ -1,5 +1,5 @@
-import React, { PropTypes } from "react"
-
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class ModelExample extends React.Component {
   static propTypes = {

src/core/components/model.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { List } from "immutable"
 const braceOpen = "{"
@@ -40,6 +41,7 @@ class ObjectModel extends Component {
     let additionalProperties = schema.get("additionalProperties")
     let title = schema.get("title") || name
     let required = schema.get("required")
+    const Markdown = getComponent("Markdown")
     const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span>
   let collapsedContent = (<span>
       <span>{ braceOpen }</span>...<span>{ braceClose }</span>
@@ -66,7 +68,9 @@ class ObjectModel extends Component {
               {
                 !description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}>
                     <td>description:</td>
-                    <td>{ description }</td>
+                    <td>
+                      <Markdown source={ description } />
+                    </td>
                   </tr>
               }
               {
@@ -114,11 +118,13 @@ class ObjectModel extends Component {
 class Primitive extends Component {
   static propTypes = {
     schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
     required: PropTypes.bool
   }
 
   render(){
-    let { schema, required } = this.props
+    let { schema, getComponent, name, required } = this.props
 
     if(!schema || !schema.get) {
       // don't render if schema isn't correctly formed
@@ -129,17 +135,29 @@ class Primitive extends Component {
     let format = schema.get("format")
     let xml = schema.get("xml")
     let enumArray = schema.get("enum")
-    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "$$ref"].indexOf(key) === -1 )
+    let title = schema.get("title") || name
+    let description = schema.get("description")
+    let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
     let style = required ? { fontWeight: "bold" } : {}
+    const Markdown = getComponent("Markdown")
 
-    return <span className="prop">
+    return <span className="model">
+      {
+        title && <span className="model-title" style={{ marginRight: "2em" }}>
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
       { format && <span className="prop-format">(${format})</span>}
       {
         properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-          <br />{ key !== "description" && key + ": " }{ String(v) }</span>)
+          <br />{ key }: { String(v) }</span>)
           : null
       }
+      {
+        !description ? null :
+          <Markdown source={ description } />
+      }
       {
         xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
           {
@@ -166,17 +184,20 @@ class ArrayModel extends Component {
   }
 
   render(){
-    let { required, schema, depth, expandDepth } = this.props
+    let { required, schema, depth, name, expandDepth } = this.props
     let items = schema.get("items")
+    let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
-
+  
     return <span className="model">
-      <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
-      </span>
+      {
+        title && <span className="model-title">
+          <span className="model-title__text">{ title }</span>
+        </span>
+      }
       <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
-          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+          <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
         ]
         {
           properties.size ? <span>
@@ -217,7 +238,7 @@ class Model extends Component {
   }
 
   render () {
-    let { schema, required, name, isRef } = this.props
+    let { schema, getComponent, required, name, isRef } = this.props
     let $$ref = schema && schema.get("$$ref")
     let modelName = $$ref && this.getModelName( $$ref )
     let modelSchema, type
@@ -236,16 +257,16 @@ class Model extends Component {
     switch(type) {
       case "object":
         return <ObjectModel className="object" { ...this.props } schema={ modelSchema }
-                                              name={ modelName || name }
+                                              name={ name || modelName }
                                               isRef={ isRef!== undefined ? isRef : !!$$ref }/>
       case "array":
-        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
+        return <ArrayModel className="array" { ...this.props } schema={ modelSchema } name={ name || modelName } required={ required } />
       case "string":
       case "number":
       case "integer":
       case "boolean":
       default:
-        return <Primitive schema={ modelSchema } required={ required }/>
+        return <Primitive { ...this.props } getComponent={ getComponent } schema={ modelSchema } name={ name || modelName } required={ required }/>
     }
   }
 }

src/core/components/models.jsx

@@ -1,5 +1,5 @@
-import React, { Component, PropTypes } from "react"
-
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 
 export default class Models extends Component {
   static propTypes = {
@@ -24,8 +24,8 @@ export default class Models extends Component {
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
-        <svg width="20" height="20">
-          <use xlinkHref="#large-arrow" />
+        <svg className="arrow" width="20" height="20">
+          <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>
       <Collapse isOpened={showModels} animated>

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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class OnlineValidatorBadge extends React.Component {
     static propTypes = {

src/core/components/operation.jsx

@@ -1,11 +1,11 @@
-import React, { PropTypes } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { getList } from "core/utils"
 import * as CustomPropTypes from "core/proptypes"
 
 //import "less/opblock"
 
-export default class Operation extends React.Component {
+export default class Operation extends PureComponent {
   static propTypes = {
     path: PropTypes.string.isRequired,
     method: PropTypes.string.isRequired,
@@ -18,6 +18,7 @@ export default class Operation extends React.Component {
     allowTryItOut: PropTypes.bool,
 
     displayOperationId: PropTypes.bool,
+    displayRequestDuration: PropTypes.bool,
 
     response: PropTypes.object,
     request: PropTypes.object,
@@ -38,6 +39,7 @@ export default class Operation extends React.Component {
     response: null,
     allowTryItOut: true,
     displayOperationId: false,
+    displayRequestDuration: false
   }
 
   constructor(props, context) {
@@ -70,10 +72,6 @@ export default class Operation extends React.Component {
     }
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   toggleShown =() => {
     let { layoutActions, isShownKey } = this.props
     layoutActions.show(isShownKey, !this.isShown())
@@ -112,7 +110,7 @@ export default class Operation extends React.Component {
       request,
       allowTryItOut,
       displayOperationId,
-
+      displayRequestDuration,
       fn,
       getComponent,
       specActions,
@@ -131,6 +129,7 @@ export default class Operation extends React.Component {
     let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
     let operationId = operation.get("__originalOperationId")
+    let operationScheme = specSelectors.operationScheme(path, method)
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -216,7 +215,8 @@ export default class Operation extends React.Component {
                     <Schemes schemes={ schemes }
                              path={ path }
                              method={ method }
-                             specActions={ specActions }/>
+                             specActions={ specActions }
+                             operationScheme={ operationScheme } />
                   </div> : null
               }
 
@@ -255,6 +255,7 @@ export default class Operation extends React.Component {
                     produces={ produces }
                     producesValue={ operation.get("produces_value") }
                     pathMethod={ [path, method] }
+                    displayRequestDuration={ displayRequestDuration }
                     fn={fn} />
               }
             </div>

src/core/components/operations.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Operations extends React.Component {
 
@@ -32,7 +33,7 @@ export default class Operations extends React.Component {
     const Collapse = getComponent("Collapse")
 
     let showSummary = layoutSelectors.showSummary()
-    let { docExpansion, displayOperationId } = getConfigs()
+    let { docExpansion, displayOperationId, displayRequestDuration } = getConfigs()
 
     return (
         <div>
@@ -87,6 +88,7 @@ export default class Operations extends React.Component {
                           allowTryItOut={allowTryItOut}
 
                           displayOperationId={displayOperationId}
+                          displayRequestDuration={displayRequestDuration}
 
                           specActions={ specActions }
                           specSelectors={ specSelectors }

src/core/components/overview.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { Link } from "core/components/layout-utils"
 
 export default class Overview extends React.Component {

src/core/components/param-body.jsx

@@ -1,11 +1,11 @@
-import React, { Component, PropTypes } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
 import { fromJS, List } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const NOOP = Function.prototype
 
-export default class ParamBody extends Component {
+export default class ParamBody extends PureComponent {
 
   static propTypes = {
     param: PropTypes.object,
@@ -41,10 +41,6 @@ export default class ParamBody extends Component {
     this.updateValues.call(this, this.props)
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   componentWillReceiveProps(nextProps) {
     this.updateValues.call(this, nextProps)
   }
@@ -53,10 +49,11 @@ export default class ParamBody extends Component {
     let { specSelectors, pathMethod, param, isExecute, consumesValue="" } = props
     let parameter = specSelectors ? specSelectors.getParameter(pathMethod, param.get("name")) : {}
     let isXml = /xml/i.test(consumesValue)
+    let isJson = /json/i.test(consumesValue)
     let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")
 
     if ( paramValue !== undefined ) {
-      let val = !paramValue && !isXml ? "{}" : paramValue
+      let val = !paramValue && isJson ? "{}" : paramValue
       this.setState({ value: val })
       this.onChange(val, {isXml: isXml, isEditBox: isExecute})
     } else {
@@ -83,8 +80,11 @@ export default class ParamBody extends Component {
   _onChange = (val, isXml) => { (this.props.onChange || NOOP)(this.props.param, val, isXml) }
 
   handleOnChange = e => {
-    let {consumesValue} = this.props
-    this.onChange(e.target.value.trim(), {isXml: /xml/i.test(consumesValue)})
+    const {consumesValue} = this.props
+    const isJson = /json/i.test(consumesValue)
+    const isXml = /xml/i.test(consumesValue)
+    const inputValue = isJson ? e.target.value.trim() : e.target.value
+    this.onChange(inputValue, {isXml})
   }
 
   toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))

src/core/components/parameter-row.jsx

@@ -1,7 +1,7 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import win from "core/window"
 
-
 export default class ParameterRow extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -94,7 +94,7 @@ export default class ParameterRow extends Component {
             { param.get("name") }
             { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
           </div>
-          <div className="parаmeter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
+          <div className="parameter__type">{ param.get("type") } { itemType && `[${itemType}]` }</div>
           <div className="parameter__in">({ param.get("in") })</div>
         </td>
 

src/core/components/parameters.jsx

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from "react"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import Im from "immutable"
 

src/core/components/providers/markdown.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import Remarkable from "react-remarkable"
 import sanitize from "sanitize-html"
 
@@ -11,6 +12,12 @@ const sanitizeOptions = {
 
 function Markdown({ source }) {
   const sanitized = sanitize(source, sanitizeOptions)
+
+  // sometimes the sanitizer returns "undefined" as a string
+  if(!source || !sanitized || sanitized === "undefined") {
+    return null
+  }
+
   return <Remarkable
     options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
     source={sanitized}

src/core/components/response-body.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { formatXml } from "core/utils"
 import lowerCase from "lodash/lowerCase"
 
@@ -6,7 +7,7 @@ export default class ResponseBody extends React.Component {
 
   static propTypes = {
     content: PropTypes.any.isRequired,
-    contentType: PropTypes.string.isRequired,
+    contentType: PropTypes.string,
     getComponent: PropTypes.func.isRequired,
     headers: PropTypes.object,
     url: PropTypes.string

src/core/components/response.jsx

@@ -1,18 +1,21 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
   if ( examples && examples.size ) {
     return examples.entrySeq().map( ([ key, example ]) => {
-      let exampleValue
-      try {
-        exampleValue = example && example.toJS ? example.toJS() : example
-        exampleValue = JSON.stringify(exampleValue)
-      }
-      catch(e) {
-        exampleValue = String(example)
+      let exampleValue = example
+      if ( example.toJS ) {
+        try {
+          exampleValue = JSON.stringify(example.toJS(), null, 2)
+        }
+        catch(e) {
+          exampleValue = String(example)
+        }
       }
+
       return (<div key={ key }>
         <h5>{ key }</h5>
         <HighlightCode className="example" value={ exampleValue } />

src/core/components/responses.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import { fromJS } from "immutable"
 import { defaultStatusCode } from "core/utils"
 
@@ -14,19 +15,21 @@ export default class Responses extends React.Component {
     specSelectors: PropTypes.object.isRequired,
     specActions: PropTypes.object.isRequired,
     pathMethod: PropTypes.array.isRequired,
+    displayRequestDuration: PropTypes.bool.isRequired,
     fn: PropTypes.object.isRequired
   }
 
   static defaultProps = {
     request: null,
     tryItOutResponse: null,
-    produces: fromJS(["application/json"])
+    produces: fromJS(["application/json"]),
+    displayRequestDuration: false
   }
 
   onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val)
 
   render() {
-    let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue } = this.props
+    let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue, displayRequestDuration } = this.props
     let defaultCode = defaultStatusCode( responses )
 
     const ContentType = getComponent( "contentType" )
@@ -53,7 +56,8 @@ export default class Responses extends React.Component {
                               : <div>
                                   <LiveResponse request={ request }
                                                 response={ tryItOutResponse }
-                                                getComponent={ getComponent } />
+                                                getComponent={ getComponent }
+                                                displayRequestDuration={ displayRequestDuration } />
                                   <h4>Responses</h4>
                                 </div>
 

src/core/components/schemes.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class Schemes extends React.Component {
 
@@ -6,7 +7,8 @@ export default class Schemes extends React.Component {
     specActions: PropTypes.object.isRequired,
     schemes: PropTypes.object.isRequired,
     path: PropTypes.string,
-    method: PropTypes.string
+    method: PropTypes.string,
+    operationScheme: PropTypes.string
   }
 
   componentWillMount() {
@@ -16,11 +18,18 @@ export default class Schemes extends React.Component {
     this.setScheme(schemes.first())
   }
 
+  componentWillReceiveProps(nextProps) {
+    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
+      //fire 'change' event if our selected scheme is no longer an option
+      this.setScheme(nextProps.schemes.first())
+    }
+  }
+
   onChange =( e ) => {
     this.setScheme( e.target.value )
   }
 
-  setScheme =( value ) => {
+  setScheme = ( value ) => {
     let { path, method, specActions } = this.props
 
     specActions.setScheme( value, path, method )

src/core/components/try-it-out-button.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class TryItOutButton extends React.Component {
 

src/core/curlify.js

@@ -1,3 +1,5 @@
+import win from "./window"
+
 export default function curl( request ){
   let curlified = []
   let type = ""
@@ -18,11 +20,13 @@ export default function curl( request ){
   if ( request.get("body") ){
 
     if(type === "multipart/form-data" && request.get("method") === "POST") {
-      let formDataBody = request.get("body").split("&")
-
-      for(var data in formDataBody) {
+      for( let [ k,v ] of request.get("body").values()) {
         curlified.push( "-F" )
-        curlified.push(formDataBody[data])
+        if (v instanceof win.File) {
+          curlified.push( `"${k}=@${v.name};type=${v.type}"` )
+        } else {
+          curlified.push( `"${k}=${v}"` )
+        }
       }
     } else {
       curlified.push( "-d" )

src/core/index.js

@@ -6,9 +6,9 @@ import ApisPreset from "core/presets/apis"
 import * as AllPlugins from "core/plugins/all"
 import { parseSeach, filterConfigs } from "core/utils"
 
-const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
+const CONFIGS = [ "url", "urls", "urls.primaryName", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
     "apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
-    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" ]
+    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" , "displayRequestDuration"]
 
 // eslint-disable-next-line no-undef
 const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
@@ -23,12 +23,14 @@ module.exports = function SwaggerUI(opts) {
     dom_id: null,
     spec: {},
     url: "",
+    urls: null,
     layout: "BaseLayout",
     docExpansion: "list",
     validatorUrl: "https://online.swagger.io/validator",
     configs: {},
     custom: {},
     displayOperationId: false,
+    displayRequestDuration: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.
@@ -117,6 +119,7 @@ module.exports = function SwaggerUI(opts) {
     return downloadSpec()
   }
 
+  return system
 }
 
 // Add presets

src/core/json-schema-components.js

@@ -1,5 +1,5 @@
-import React, { PropTypes, Component } from "react"
-import shallowCompare from "react-addons-shallow-compare"
+import React, { PureComponent, Component } from "react"
+import PropTypes from "prop-types"
 import { List, fromJS } from "immutable"
 //import "less/json-schema-form"
 
@@ -74,7 +74,7 @@ export class JsonSchema_string extends Component {
   }
 }
 
-export class JsonSchema_array extends Component {
+export class JsonSchema_array extends PureComponent {
 
   static propTypes = JsonSchemaPropShape
   static defaultProps = JsonSchemaDefaultProps
@@ -89,10 +89,6 @@ export class JsonSchema_array extends Component {
       this.setState({value: props.value})
   }
 
-  shouldComponentUpdate(props, state) {
-    return shallowCompare(this, props, state)
-  }
-
   onChange = () => this.props.onChange(this.state.value)
 
   onItemChange = (itemVal, i) => {

src/core/plugins/samples/fn.js

@@ -9,7 +9,7 @@ const primitives = {
   "number": () => 0,
   "number_float": () => 0.0,
   "integer": () => 0,
-  "boolean": () => true
+  "boolean": (schema) => typeof schema.default === "boolean" ? schema.default : true 
 }
 
 const primitive = (schema) => {
@@ -74,6 +74,10 @@ export const sampleFromSchema = (schema, config={}) => {
     return normalizeArray(schema["enum"])[0]
   }
 
+  if (type === "file") {
+    return
+  }
+
   return primitive(schema)
 }
 

src/core/plugins/spec/actions.js

@@ -92,28 +92,28 @@ export const resolveSpec = (json, url) => ({specActions, specSelectors, errActio
   let specStr = specSelectors.specStr()
 
   return resolve({fetch, spec: json, baseDoc: url, modelPropertyMacro, parameterMacro })
-  .then( ({spec, errors}) => {
-    errActions.clear({
-      type: "thrown"
-     })
+    .then( ({spec, errors}) => {
+      errActions.clear({
+        type: "thrown"
+      })
 
-    if(errors.length > 0) {
-      let preparedErrors = errors
-        .map(err => {
-          console.error(err)
-          err.line = err.fullPath ? getLineNumberForPath(specStr, err.fullPath) : null
-          err.path = err.fullPath ? err.fullPath.join(".") : null
-          err.level = "error"
-          err.type = "thrown"
-          err.source = "resolver"
-          Object.defineProperty(err, "message", { enumerable: true, value: err.message })
-          return err
-        })
-      errActions.newThrownErrBatch(preparedErrors)
-    }
+      if(errors.length > 0) {
+        let preparedErrors = errors
+          .map(err => {
+            console.error(err)
+            err.line = err.fullPath ? getLineNumberForPath(specStr, err.fullPath) : null
+            err.path = err.fullPath ? err.fullPath.join(".") : null
+            err.level = "error"
+            err.type = "thrown"
+            err.source = "resolver"
+            Object.defineProperty(err, "message", { enumerable: true, value: err.message })
+            return err
+          })
+        errActions.newThrownErrBatch(preparedErrors)
+      }
 
-    return specActions.updateResolved(spec)
-  })
+      return specActions.updateResolved(spec)
+    })
 }
 
 export const formatIntoYaml = () => ({specActions, specSelectors}) => {
@@ -207,8 +207,14 @@ export const executeRequest = (req) => ({fn, specActions, specSelectors}) => {
 
   specActions.setRequest(req.pathName, req.method, parsedRequest)
 
+  // track duration of request
+  const startTime = Date.now()
+
   return fn.execute(req)
-  .then( res => specActions.setResponse(req.pathName, req.method, res))
+  .then( res => {
+    res.duration = Date.now() - startTime
+    specActions.setResponse(req.pathName, req.method, res)
+  } )
   .catch( err => specActions.setResponse(req.pathName, req.method, { error: true, err: serializeError(err) } ) )
 }
 

src/core/plugins/spec/reducers.js

@@ -41,7 +41,7 @@ export default {
   [UPDATE_PARAM]: ( state, {payload} ) => {
     let { path, paramName, value, isXml } = payload
     return state.updateIn( [ "resolved", "paths", ...path, "parameters" ], fromJS([]), parameters => {
-      let index = parameters.findIndex( p => p.get( "name" ) === paramName )
+      const index = parameters.findIndex(p => p.get( "name" ) === paramName )
       if (!(value instanceof win.File)) {
         value = fromJSOrdered( value )
       }
@@ -75,7 +75,12 @@ export default {
   [SET_RESPONSE]: (state, { payload: { res, path, method } } ) =>{
     let result
     if ( res.error ) {
-      result = Object.assign({error: true}, res.err)
+      result = Object.assign({
+        error: true,
+        name: res.err.name,
+        message: res.err.message,
+        statusCode: res.err.statusCode
+      }, res.err.response)
     } else {
       result = res
     }
@@ -86,7 +91,7 @@ export default {
     let newState = state.setIn( [ "responses", path, method ], fromJSOrdered(result) )
 
     // ImmutableJS messes up Blob. Needs to reset its value.
-    if (res.data instanceof win.Blob) {
+    if (win.Blob && res.data instanceof win.Blob) {
       newState = newState.setIn( [ "responses", path, method, "text" ], res.data)
     }
     return newState

src/core/plugins/spec/selectors.js

@@ -1,6 +1,6 @@
 import { createSelector } from "reselect"
 import { sorters } from "core/utils"
-import { fromJS, Set, Map, List } from "immutable"
+import { fromJS, Set, Map, OrderedMap, List } from "immutable"
 
 const DEFAULT_TAG = "default"
 
@@ -187,13 +187,16 @@ export const tagDetails = (state, tag) => {
 
 export const operationsWithTags = createSelector(
   operationsWithRootInherited,
-  operations => {
+  tags,
+  (operations, tags) => {
     return operations.reduce( (taggedMap, op) => {
       let tags = Set(op.getIn(["operation","tags"]))
       if(tags.count() < 1)
         return taggedMap.update(DEFAULT_TAG, List(), ar => ar.push(op))
       return tags.reduce( (res, tag) => res.update(tag, List(), (ar) => ar.push(op)), taggedMap )
-    }, Map())
+    }, tags.reduce( (taggedMap, tag) => {
+      return taggedMap.set(tag.get("name"), List())
+    } , OrderedMap()))
   }
 )
 

src/core/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
 import "./split-pane-mode.less"
 
@@ -23,9 +24,13 @@ export default class SplitPaneMode extends React.Component {
     children: [],
   };
 
+  initializeComponent = (c) => {
+    this.splitPane = c
+  }
+
   onDragFinished = () => {
     let { threshold, layoutActions } = this.props
-    let { position, draggedSize } = this.refs.splitPane.state
+    let { position, draggedSize } = this.splitPane.state
     this.draggedSize = draggedSize
 
     let nearLeftEdge = position <= threshold
@@ -62,7 +67,7 @@ export default class SplitPaneMode extends React.Component {
     return (
       <SplitPane
         disabledClass={""}
-        ref={"splitPane"}
+        ref={this.initializeComponent}
         split='vertical'
         defaultSize={"50%"}
         primary="second"

src/core/plugins/view/root-injects.js

@@ -65,11 +65,11 @@ export const render = (getSystem, getStore, getComponent, getComponents, dom) =>
 }
 
 // Render try/catch wrapper
-const createClass = component => React.createClass({
+const createClass = component => class extends Component {
   render() {
     return component(this.props)
   }
-})
+}
 
 const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
     padding: "1em",

src/core/proptypes.js

@@ -1,4 +1,4 @@
-import { PropTypes } from "react"
+import PropTypes from "prop-types"
 
 // Takes a list and proptype, and returns a PropType.shape({ [item]: propType })
 const mapListToPropTypeShape = (list, propType) => PropTypes.shape(

src/core/system.js

@@ -240,7 +240,7 @@ export default class Store {
           action = {type: NEW_THROWN_ERR, error: true, payload: serializeError(e) }
         }
         finally{
-          return action
+          return action // eslint-disable-line no-unsafe-finally
         }
       }
 

src/core/utils.js

@@ -1,12 +1,13 @@
 import Im from "immutable"
-import shallowEqual from "shallowequal"
 
 import camelCase from "lodash/camelCase"
 import upperFirst from "lodash/upperFirst"
 import _memoize from "lodash/memoize"
+import find from "lodash/find"
 import some from "lodash/some"
 import eq from "lodash/eq"
 import { memoizedSampleFromSchema, memoizedCreateXMLExample } from "core/plugins/samples/fn"
+import win from "./window"
 
 const DEFAULT_REPONSE_KEY = "default"
 
@@ -34,6 +35,9 @@ export function fromJSOrdered (js) {
   if(isImmutable(js))
     return js // Can't do much here
 
+  if (js instanceof win.File)
+    return js
+
   return !isObject(js) ? js :
     Array.isArray(js) ?
       Im.Seq(js).map(fromJSOrdered).toList() :
@@ -339,7 +343,7 @@ export function highlight (el) {
         while (![
           1,                   //  0: whitespace
                                //  1: operator or braces
-          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),
+          /[\/{}[(\-+*=<>:;|\\.,?!&@~]/[test](chr),   // eslint-disable-line no-useless-escape
           /[\])]/[test](chr),  //  2: closing brace
           /[$\w]/[test](chr),  //  3: (key)word
           chr == "/" &&        //  4: regex
@@ -414,11 +418,6 @@ export function pascalCaseFilename(filename) {
   return pascalCase(filename.replace(/\.[^./]*$/, ""))
 }
 
-// Only compare a set of props
-export function shallowEqualKeys(a,b, keys) {
-  return !!keys.find(key => !shallowEqual(a[key], b[key]))
-}
-
 // Check if ...
 // - new props
 // - If immutable, use .is()
@@ -451,15 +450,21 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
     || objectList.some( objectPropName => !eq(props[objectPropName], nextProps[objectPropName])))
 }
 
-const validateNumber = ( val ) => {
-  if ( !/^-?\d+(.?\d+)?$/.test(val)) {
+export const validateNumber = ( val ) => {
+  if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
     return "Value must be a number"
   }
 }
 
-const validateInteger = ( val ) => {
+export const validateInteger = ( val ) => {
   if ( !/^-?\d+$/.test(val)) {
-    return "Value must be integer"
+    return "Value must be an integer"
+  }
+}
+
+export const validateFile = ( val ) => {
+  if ( val && !(val instanceof win.File) ) {
+    return "Value must be a file"
   }
 }
 
@@ -470,13 +475,16 @@ export const validateParam = (param, isXml) => {
   let required = param.get("required")
   let type = param.get("type")
 
-  if ( required && (!value || (type==="array" && Array.isArray(value) && !value.length ))) {
+  let stringCheck = type === "string" && !value
+  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
+  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
+  let fileCheck = type === "file" && !(value instanceof win.File)
+
+  if ( required && (stringCheck || arrayCheck || listCheck || fileCheck) ) {
     errors.push("Required field is not provided")
     return errors
   }
 
-  if ( !value ) return errors
-
   if ( type === "number" ) {
     let err = validateNumber(value)
     if (!err) return errors
@@ -505,7 +513,10 @@ export const validateParam = (param, isXml) => {
         errors.push({ index: index, error: err})
       }
     })
-
+  } else if ( type === "file" ) {
+    let err = validateFile(value)
+    if (!err) return errors
+    errors.push(err)
   }
 
   return errors
@@ -589,3 +600,10 @@ export const filterConfigs = (configs, allowed) => {
 
     return filteredConfigs
 }
+
+// Is this really required as a helper? Perhaps. TODO: expose the system of presets.apis in docs, so we know what is supported
+export const shallowEqualKeys = (a,b, keys) => {
+  return !!find(keys, (key) => {
+    return eq(a[key], b[key])
+  })
+}

src/core/window.js

@@ -3,7 +3,8 @@ function makeWindow() {
     location: {},
     history: {},
     open: () => {},
-    close: () => {}
+    close: () => {},
+    File: function() {}
   }
 
   if(typeof window === "undefined") {

src/plugins/topbar/topbar.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 //import "./topbar.less"
 import Logo from "./logo_small.png"
@@ -7,7 +8,7 @@ export default class Topbar extends React.Component {
 
   constructor(props, context) {
     super(props, context)
-    this.state = { url: props.specSelectors.url() }
+    this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -19,14 +20,68 @@ export default class Topbar extends React.Component {
     this.setState({url: value})
   }
 
-  downloadUrl = (e) => {
-    this.props.specActions.updateUrl(this.state.url)
-    this.props.specActions.download(this.state.url)
+  loadSpec = (url) => {
+    this.props.specActions.updateUrl(url)
+    this.props.specActions.download(url)
+  }
+
+  onUrlSelect =(e)=> {
+    let url = e.target.value || e.target.href
+    this.loadSpec(url)
+    this.setSelectedUrl(url)
     e.preventDefault()
   }
 
+  downloadUrl = (e) => {
+    this.loadSpec(this.state.url)
+    e.preventDefault()
+  }
+
+  setSelectedUrl = (selectedUrl) => {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      if(selectedUrl)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.url === selectedUrl)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentWillMount() {
+    const configs = this.props.getConfigs()
+    const urls = configs.urls || []
+
+    if(urls && urls.length) {
+      let primaryName = configs["urls.primaryName"]
+      if(primaryName)
+      {
+        urls.forEach((spec, i) => {
+          if(spec.name === primaryName)
+            {
+              this.setState({selectedIndex: i})
+            }
+        })
+      }
+    }
+  }
+
+  componentDidMount() {
+    const urls = this.props.getConfigs().urls || []
+
+    if(urls && urls.length) {
+      this.loadSpec(urls[this.state.selectedIndex].url)
+    }
+  }
+
   render() {
-    let { getComponent, specSelectors } = this.props
+    let { getComponent, specSelectors, getConfigs } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
 
@@ -36,22 +91,45 @@ export default class Topbar extends React.Component {
     let inputStyle = {}
     if(isFailed) inputStyle.color = "red"
     if(isLoading) inputStyle.color = "#aaa"
+
+    const { urls } = getConfigs()
+    let control = []
+    let formOnSubmit = null
+
+    if(urls) {
+      let rows = []
+      urls.forEach((link, i) => {
+        rows.push(<option key={i} value={link.url}>{link.name}</option>)
+      })
+
+      control.push(
+        <label className="select-label" htmlFor="select"><span>Select a spec</span>
+          <select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
+            {rows}
+          </select>
+        </label>
+      )
+    }
+    else {
+      formOnSubmit = this.downloadUrl
+      control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
+      control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
+    }
+
     return (
-        <div className="topbar">
-          <div className="wrapper">
-            <div className="topbar-wrapper">
-              <Link href="#" title="Swagger UX">
-                <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
-                <span>swagger</span>
-              </Link>
-              <form className="download-url-wrapper" onSubmit={this.downloadUrl}>
-                <input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />
-                <Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>
-              </form>
-            </div>
+      <div className="topbar">
+        <div className="wrapper">
+          <div className="topbar-wrapper">
+            <Link href="#" title="Swagger UX">
+              <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
+              <span>swagger</span>
+            </Link>
+            <form className="download-url-wrapper" onSubmit={formOnSubmit}>
+              {control}
+            </form>
           </div>
         </div>
-
+      </div>
     )
   }
 }
@@ -59,5 +137,6 @@ export default class Topbar extends React.Component {
 Topbar.propTypes = {
   specSelectors: PropTypes.object.isRequired,
   specActions: PropTypes.object.isRequired,
-  getComponent: PropTypes.func.isRequired
+  getComponent: PropTypes.func.isRequired,
+  getConfigs: PropTypes.func.isRequired
 }

src/plugins/topbar/topbar.less

@@ -1,11 +1,10 @@
 .swagger-ui {
-
   .topbar {
     background-color: #89bf04;
   }
 
   .topbar-wrapper {
-    padding: 0.7em
+    padding: 0.7em;
   }
 
   .topbar-logo__img {

src/polyfills.js

@@ -0,0 +1,2 @@
+// Promise global, Used ( at least ) by 'whatwg-fetch'. And required by IE 11
+require("core-js/fn/promise")

src/standalone/layout.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from "react"
+import React from "react"
+import PropTypes from "prop-types"
 
 export default class StandaloneLayout extends React.Component {
 

src/style/_form.scss

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

src/style/_layout.scss

@@ -113,7 +113,7 @@ body
     }
 }
 
-.parаmeter__type
+.parameter__type
 {
     font-size: 12px;
 

src/style/_models.scss

@@ -95,14 +95,7 @@ section.models
         h4
         {
             margin: 0 0 5px 0;
-
             border-bottom: 1px solid rgba(#3b4151, .3);
-
-
-            svg
-            {
-                transform: rotate(90deg);
-            }
         }
     }
     h4

src/style/_topbar.scss

@@ -6,7 +6,6 @@
     .topbar-wrapper
     {
         display: flex;
-
         align-items: center;
     }
     a
@@ -15,13 +14,13 @@
         font-weight: bold;
 
         display: flex;
+        align-items: center;
+        flex: 1;
 
         max-width: 300px;
 
         text-decoration: none;
 
-        flex: 1;
-        align-items: center;
         @include text_headline(#fff);
 
         span
@@ -34,8 +33,8 @@
     .download-url-wrapper
     {
         display: flex;
-
         flex: 3;
+        justify-content: flex-end;
 
         input[type=text]
         {
@@ -48,6 +47,38 @@
             outline: none;
         }
 
+        .select-label
+        {
+            display: flex;
+            align-items: center;
+
+            width: 100%;
+            max-width: 600px;
+            margin: 0;
+            span
+            {
+                font-size: 16px;
+
+                flex: 1;
+
+                padding: 0 10px 0 0;
+
+                text-align: right;
+            }
+
+            select
+            {
+                flex: 2;
+
+                width: 100%;
+
+                border: 2px solid #547f00;
+                outline: none;
+                box-shadow: none;
+            }
+        }
+
+
         .download-url-button
         {
             font-size: 16px;

swagger-ui-dist-package/README.md

@@ -1,8 +1,22 @@
-This module, `swagger-ui-dist`, exposes Swagger-UI's entire dist folder as a dependency-free npm module. Use `swagger-ui` instead, if you'd like to have npm install dependencies for you.
+# Swagger UI Dist
+[![NPM version](https://badge.fury.io/js/swagger-ui-dist.svg)](http://badge.fury.io/js/swagger-ui-dist)
+
+# API
+
+This module, `swagger-ui-dist`, exposes Swagger-UI's entire dist folder as a dependency-free npm module.
+Use `swagger-ui` instead, if you'd like to have npm install dependencies for you.
 
 `SwaggerUIBundle` and `SwaggerUIStandalonePreset` can be imported:
 ```javascript
-  import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist'
+  import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
+```
+
+To get an absolute path to this directory for static file serving, use the exported `getAbsoluteFSPath` method:
+
+```javascript
+const swaggerUiAssetPath = require("swagger-ui-dist").getAbsoluteFSPath()
+
+// then instantiate server that serves files from the swaggerUiAssetPath
 ```
 
 For anything else, check the [Swagger-UI](https://github.com/swagger-api/swagger-ui) repository.

swagger-ui-dist-package/absolute-path.js

@@ -0,0 +1,14 @@
+/*
+ * getAbsoluteFSPath
+ * @return {string} When run in NodeJS env, returns the absolute path to the current directory
+ *                  When run outside of NodeJS, will return an error message
+ */
+const getAbsoluteFSPath = function () {
+  // detect whether we are running in a browser or nodejs
+  if (typeof module !== "undefined" && module.exports) {
+    return require("path").resolve(__dirname)
+  }
+  throw new Error('getAbsoluteFSPath can only be called within a Nodejs environment');
+}
+
+module.exports = getAbsoluteFSPath

swagger-ui-dist-package/index.js

@@ -1,2 +1,13 @@
-module.exports.SwaggerUIBundle = require('./swagger-ui-bundle.js')
-module.exports.SwaggerUIStandalonePreset = require('./swagger-ui-standalone-preset.js')
+try {
+  module.exports.SwaggerUIBundle = require("./swagger-ui-bundle.js")
+  module.exports.SwaggerUIStandalonePreset = require("./swagger-ui-standalone-preset.js")
+} catch(e) {
+  // swallow the error if there's a problem loading the assets.
+  // allows this module to support providing the assets for browserish contexts,
+  // without exploding in a Node context.
+  //
+  // see https://github.com/swagger-api/swagger-ui/issues/3291#issuecomment-311195388
+  // for more information.
+}
+
+module.exports.absolutePath = require("./absolute-path.js")

test/bugs/3279-empty-markdown-source.js

@@ -0,0 +1,37 @@
+/* eslint-env mocha */
+import React from "react"
+import expect from "expect"
+import { render } from "enzyme"
+import Markdown from "components/providers/markdown"
+
+describe("UI-3279: Empty Markdown inputs causing bare `undefined` in output", function(){
+  it("should return no text for `null` as source input", function(){
+    let props = {
+      source: null
+    }
+
+    let el = render(<Markdown {...props}/>)
+
+    expect(el.text()).toEqual("")
+  })
+
+  it("should return no text for `undefined` as source input", function(){
+    let props = {
+      source: undefined
+    }
+
+    let el = render(<Markdown {...props}/>)
+
+    expect(el.text()).toEqual("")
+  })
+
+  it("should return no text for empty string as source input", function(){
+    let props = {
+      source: ""
+    }
+
+    let el = render(<Markdown {...props}/>)
+
+    expect(el.text()).toEqual("")
+  })
+})

test/core/curlify.js

@@ -1,6 +1,7 @@
 import expect from "expect"
 import Im from "immutable"
 import curl from "core/curlify"
+import win from "core/window"
 
 describe("curlify", function() {
 
@@ -131,12 +132,35 @@ describe("curlify", function() {
             url: "http://example.com",
             method: "POST",
             headers: { "content-type": "multipart/form-data" },
-            body: "id=123&name=Sahar"
+            body: [
+              ["id", "123"],
+              ["name", "Sahar"]
+            ]
         }
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"content-type: multipart/form-data\" -F id=123 -F name=Sahar")
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"content-type: multipart/form-data\" -F \"id=123\" -F \"name=Sahar\"")
+    })
+
+    it("should print a curl with formData and file", function() {
+        var file = new win.File()
+        file.name = "file.txt"
+        file.type = "text/plain"
+
+        var req = {
+            url: "http://example.com",
+            method: "POST",
+            headers: { "content-type": "multipart/form-data" },
+            body: [
+              ["id", "123"],
+              ["file", file]
+            ]
+        }
+
+        let curlified = curl(Im.fromJS(req))
+
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"content-type: multipart/form-data\" -F \"id=123\" -F \"file=@file.txt;type=text/plain\"")
     })
 
     it("prints a curl post statement from an object", function() {

test/core/plugins/err/transformers/parameter-oneof.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-useless-escape */
 import expect from "expect"
 import { fromJS } from "immutable"
 import { transform } from "corePlugins/err/error-transformers/transformers/parameter-oneof"

test/core/plugins/spec-reducer.js

@@ -69,4 +69,56 @@ describe("spec plugin - reducer", function(){
       expect(result.toJS()).toEqual(state.toJS())
     })
   })
+
+  describe("set response value", function() {
+    it("should combine the response and error objects", () => {
+      const setResponse = reducer["spec_set_response"]
+
+      const path = "/pet/post"
+      const method = "POST"
+
+      const state = fromJS({})
+      const result = setResponse(state, {
+        payload: {
+          path: path,
+          method: method,
+          res: {
+            error: true,
+            err: {
+              message: "Not Found",
+              name: "Error",
+              response: {
+                data: "response data",
+                headers: {
+                  key: "value"
+                },
+                ok: false,
+                status: 404,
+                statusText: "Not Found"
+              },
+              status: 404,
+              statusCode: 404
+            }
+          }
+        }
+      })
+
+      let expectedResult = {
+        error: true,
+        message: "Not Found",
+        name: "Error",
+        data: "response data",
+        headers: {
+          key: "value"
+        },
+        ok: false,
+        status: 404,
+        statusCode: 404,
+        statusText: "Not Found"
+      }
+
+      const response = result.getIn(["responses", path, method]).toJS()
+      expect(response).toEqual(expectedResult)
+    })
+  })
 })

test/core/utils.js

@@ -1,7 +1,8 @@
 /* eslint-env mocha */
 import expect from "expect"
 import { fromJS } from "immutable"
-import { mapToList } from "core/utils"
+import { mapToList, validateNumber, validateInteger, validateParam, validateFile } from "core/utils"
+import win from "core/window"
 
 describe("utils", function(){
 
@@ -67,9 +68,204 @@ describe("utils", function(){
 
       // Then
       expect(aList.toJS()).toEqual([])
-
     })
 
   })
 
+  describe("validateNumber", function() {
+    let errorMessage = "Value must be a number"
+
+    it("doesn't return for whole numbers", function() {
+      expect(validateNumber(0)).toBeFalsy()
+      expect(validateNumber(1)).toBeFalsy()
+      expect(validateNumber(20)).toBeFalsy()
+      expect(validateNumber(5000000)).toBeFalsy()
+      expect(validateNumber("1")).toBeFalsy()
+      expect(validateNumber("2")).toBeFalsy()
+      expect(validateNumber(-1)).toBeFalsy()
+      expect(validateNumber(-20)).toBeFalsy()
+      expect(validateNumber(-5000000)).toBeFalsy()
+    })
+
+    it("doesn't return for negative numbers", function() {
+      expect(validateNumber(-1)).toBeFalsy()
+      expect(validateNumber(-20)).toBeFalsy()
+      expect(validateNumber(-5000000)).toBeFalsy()
+    })
+
+    it("doesn't return for decimal numbers", function() {
+      expect(validateNumber(1.1)).toBeFalsy()
+      expect(validateNumber(2.5)).toBeFalsy()
+      expect(validateNumber(-30.99)).toBeFalsy()
+    })
+
+    it("returns a message for strings", function() {
+      expect(validateNumber("")).toEqual(errorMessage)
+      expect(validateNumber(" ")).toEqual(errorMessage)
+      expect(validateNumber("test")).toEqual(errorMessage)
+    })
+
+    it("returns a message for invalid input", function() {
+      expect(validateNumber(undefined)).toEqual(errorMessage)
+      expect(validateNumber(null)).toEqual(errorMessage)
+      expect(validateNumber({})).toEqual(errorMessage)
+      expect(validateNumber([])).toEqual(errorMessage)
+      expect(validateNumber(true)).toEqual(errorMessage)
+      expect(validateNumber(false)).toEqual(errorMessage)
+    })
+  })
+
+  describe("validateInteger", function() {
+    let errorMessage = "Value must be an integer"
+
+    it("doesn't return for positive integers", function() {
+      expect(validateInteger(0)).toBeFalsy()
+      expect(validateInteger(1)).toBeFalsy()
+      expect(validateInteger(20)).toBeFalsy()
+      expect(validateInteger(5000000)).toBeFalsy()
+      expect(validateInteger("1")).toBeFalsy()
+      expect(validateInteger("2")).toBeFalsy()
+      expect(validateInteger(-1)).toBeFalsy()
+      expect(validateInteger(-20)).toBeFalsy()
+      expect(validateInteger(-5000000)).toBeFalsy()
+    })
+
+    it("doesn't return for negative integers", function() {
+      expect(validateInteger(-1)).toBeFalsy()
+      expect(validateInteger(-20)).toBeFalsy()
+      expect(validateInteger(-5000000)).toBeFalsy()
+    })
+
+    it("returns a message for decimal values", function() {
+      expect(validateInteger(1.1)).toEqual(errorMessage)
+      expect(validateInteger(2.5)).toEqual(errorMessage)
+      expect(validateInteger(-30.99)).toEqual(errorMessage)
+    })
+
+    it("returns a message for strings", function() {
+      expect(validateInteger("")).toEqual(errorMessage)
+      expect(validateInteger(" ")).toEqual(errorMessage)
+      expect(validateInteger("test")).toEqual(errorMessage)
+    })
+
+    it("returns a message for invalid input", function() {
+      expect(validateInteger(undefined)).toEqual(errorMessage)
+      expect(validateInteger(null)).toEqual(errorMessage)
+      expect(validateInteger({})).toEqual(errorMessage)
+      expect(validateInteger([])).toEqual(errorMessage)
+      expect(validateInteger(true)).toEqual(errorMessage)
+      expect(validateInteger(false)).toEqual(errorMessage)
+    })
+  })
+
+   describe("validateFile", function() {
+    let errorMessage = "Value must be a file"
+
+    it("validates against objects which are instances of 'File'", function() {
+      let fileObj = new win.File([], "Test File")
+      expect(validateFile(fileObj)).toBeFalsy()
+      expect(validateFile(null)).toBeFalsy()
+      expect(validateFile(undefined)).toBeFalsy()
+      expect(validateFile(1)).toEqual(errorMessage)
+      expect(validateFile("string")).toEqual(errorMessage)
+    })
+   })
+
+  describe("validateParam", function() {
+    let param = null
+    let result = null
+
+    it("validates required strings", function() {
+      param = fromJS({
+        required: true,
+        type: "string",
+        value: ""
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+    })
+
+    it("validates required files", function() {
+      param = fromJS({
+        required: true,
+        type: "file",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+    })
+
+    it("validates required arrays", function() {
+      param = fromJS({
+        required: true,
+        type: "array",
+        value: []
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      param = fromJS({
+        required: true,
+        type: "array",
+        value: []
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+    })
+
+    it("validates numbers", function() {
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a number"] )
+    })
+
+    it("validates integers", function() {
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be an integer"] )
+    })
+
+    it("validates arrays", function() {
+      // empty array
+      param = fromJS({
+        required: false,
+        type: "array",
+        value: []
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // numbers
+      param = fromJS({
+        required: false,
+        type: "array",
+        value: ["number"],
+        items: {
+          type: "number"
+        }
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
+
+      // integers
+      param = fromJS({
+        required: false,
+        type: "array",
+        value: ["not", "numbers"],
+        items: {
+          type: "integer"
+        }
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
+    })
+  })
 })

test/swagger-ui-dist-package/absolute-path.js

@@ -0,0 +1,13 @@
+/* eslint-env mocha */
+import expect from "expect"
+import path from "path"
+import getAbsoluteFSPath from "../../swagger-ui-dist-package/absolute-path"
+
+describe("swagger-ui-dist", function(){
+  describe("getAbsoluteFSPath", function(){
+    it("returns absolute path", function(){
+      const expectedPath = path.resolve(__dirname, "../../swagger-ui-dist-package")
+      expect(getAbsoluteFSPath()).toEqual(expectedPath)
+    })
+  })
+})

webpack-dist-bundle.config.js

@@ -1,19 +1,63 @@
 var path = require('path')
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
 
-
-module.exports = require('./make-webpack-config.js')({
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: false,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {
     'swagger-ui-bundle': [
-      'babel-polyfill',
+      './src/polyfills',
       './src/core/index.js'
     ]
   },

webpack-dist-standalone.config.js

@@ -1,18 +1,64 @@
 var path = require('path')
 
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
 
-module.exports = require('./make-webpack-config.js')({
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: false,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {
     'swagger-ui-standalone-preset': [
+      './src/polyfills',
       './src/standalone/index.js'
     ]
   },

webpack-dist.config.js

@@ -1,23 +1,77 @@
 var path = require('path')
 var fs = require('fs')
-var node_modules = fs.readdirSync('node_modules').filter(function(x) { return x !== '.bin' })
+const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true,
+          name: '[name].js'
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: [
+        'css-loader',
+        'postcss-loader'
+      ]
+    })
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: [
+        {
+          loader: 'css-loader',
+          options: { minimize: true }
+        },
+        {
+          loader: 'postcss-loader',
+          options: { sourceMap: true }
+        },
+        { loader: 'sass-loader',
+          options: {
+            outputStyle: 'expanded',
+            sourceMap: true,
+            sourceMapContents: 'true'
+          }
+        }
+      ]
+    })
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: ['css-loader',
+        {
+          loader: 'postcss-loader',
+        },
+        'less-loader'
+      ]
+    })
+  }
+]
 
-module.exports = require('./make-webpack-config.js')({
+module.exports = require('./make-webpack-config.js')(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,
     sourcemaps: true,
-    loaders: {
-      "worker.js": ["worker-loader?inline=true&name=[name].js", "babel"]
-    }
   },
 
   entry: {
     "swagger-ui": [
-      'babel-polyfill',
-      './src/style/main.scss',
-      './src/core/index.js'
+      "./src/style/main.scss",
+      "./src/polyfills",
+      "./src/core/index.js"
     ]
   },
 
@@ -25,11 +79,11 @@ module.exports = require('./make-webpack-config.js')({
     // webpack injects some stuff into the resulting file,
     // these libs need to be pulled in to keep that working.
     var exceptionsForWebpack = ["ieee754", "base64-js"]
-    if(node_modules.indexOf(request) !== -1 || exceptionsForWebpack.indexOf(request) !== -1) {
-      cb(null, 'commonjs ' + request)
-      return;
+    if(nodeModules.indexOf(request) !== -1 || exceptionsForWebpack.indexOf(request) !== -1) {
+      cb(null, "commonjs " + request)
+      return
     }
-    cb();
+    cb()
   },
 
   output:  {

webpack-hot-dev-server.config.js

@@ -1,27 +1,76 @@
 var path = require('path')
 
-module.exports = require("./make-webpack-config")({
+var rules = [
+  { test: /\.(worker\.js)(\?.*)?$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: true
+        }
+      },
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(jsx)(\?.*)?$/,
+    use: [
+      { loader: 'react-hot-loader' }, 
+      { loader: 'babel-loader' }
+    ]
+  },
+  { test: /\.(css)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      'postcss-loader'
+    ]
+  },
+  { test: /\.(scss)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: { sourceMap: true }
+      },
+      { loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: 'true'
+        }
+      }
+    ]
+  },
+  { test: /\.(less)(\?.*)?$/,
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+      },
+      'less-loader'
+    ]
+  }
+]
+
+module.exports = require("./make-webpack-config")(rules, {
   _special: {
-    loaders: {
-      'jsx': [ "react-hot-loader", "babel" ]
-    },
     separateStylesheets: false,
   },
 	devtool: "eval",
   entry: {
     'swagger-ui-bundle': [
-      'webpack/hot/dev-server',
-      'babel-polyfill',
-      './src/core/index.js',
+      './src/polyfills',
+      './src/core/index.js'
     ],
     'swagger-ui-standalone-preset': [
-      'webpack/hot/dev-server',
+      './src/polyfills',
       './src/standalone/index.js',
     ]
   },
   output: {
     pathinfo: true,
-    debug: true,
     filename: '[name].js',
     library: "[name]",
     libraryTarget: "umd",
@@ -29,10 +78,9 @@ module.exports = require("./make-webpack-config")({
   },
   devServer: {
     port: 3200,
-    path: path.join(__dirname, 'dev-helpers'),
+    contentBase: path.join(__dirname, 'dev-helpers'),
     publicPath: "/",
     noInfo: true,
-    colors: true,
     hot: true,
     stats: {
       colors: true