Merge pull request #3140 from shockey/v/3.0.12

v3.0.12

.github/issue_template.md

@@ -0,0 +1,3 @@
+When reporting an issue, please provide the following details:
+- swagger-ui version
+- a swagger file reproducing the issue

.gitignore

@@ -2,5 +2,5 @@ node_modules
 .idea
 .deps_check
 .DS_Store
-npm-debug.log
+npm-debug.log*
 .eslintcache

.travis.yml

@@ -7,26 +7,44 @@ branches:
   only:
   - master
   - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
-before_deploy: "npm run build-core"
+before_deploy:
+  - npm run build
 env:
   - DOCKER_IMAGE_NAME=swaggerapi/swagger-ui
 deploy:
-  provider: npm
-  email: apiteam@swagger.io
-  skip_cleanup: true
-  api_key:
-    secure: "IJkLaACa+rfERf1O5nwlqOyuo9sbul3FBhBt4Un9P+DvEet3AoDPV9NQVLd8SkmQYKGbGQWF4BIdjrO5nqFD6Te+JTeUX5Uo/DFS/fu9qw1xv0dQpvbJFuoYnnFlbzGTEs4CFa8lbu3ZromFHQGOQxRobjsG1Kf0dWFSSzmND3g="
-  on:
-    tags: true
-    repo: swagger-api/swagger-ui
-    node: '6.9'
+  - provider: npm
+    email: apiteam@swagger.io
+    skip_cleanup: true
+    api_key:
+      secure: "IJkLaACa+rfERf1O5nwlqOyuo9sbul3FBhBt4Un9P+DvEet3AoDPV9NQVLd8SkmQYKGbGQWF4BIdjrO5nqFD6Te+JTeUX5Uo/DFS/fu9qw1xv0dQpvbJFuoYnnFlbzGTEs4CFa8lbu3ZromFHQGOQxRobjsG1Kf0dWFSSzmND3g="
+    on:
+      tags: true
+      repo: swagger-api/swagger-ui
+      node: '6.9'
+  - provider: script
+    skip_cleanup: true
+    script: swagger-ui-dist-package/deploy.sh
+    on:
+      tags: true
+      repo: swagger-api/swagger-ui
+      node: '6.9'
 after_success:
-  - if [ $DOCKER_HUB_USERNAME ]; then 
+  - if [ $DOCKER_HUB_USERNAME ]; then
       docker login --email=$DOCKER_HUB_EMAIL --username=$DOCKER_HUB_USERNAME --password=$DOCKER_HUB_PASSWORD;
-      docker build -t $DOCKER_IMAGE_NAME .;
-      if [ "$TRAVIS_TAG" != "master" && -z "$TRAVIS_TAG"]; then
-        docker tag $DOCKER_IMAGE_NAME $DOCKER_IMAGE_NAME:$TRAVIS_TAG;
-      fi;
 
-      docker push $DOCKER_IMAGE_NAME;
+      if [ ! -z "$TRAVIS_TAG" ]; then
+        DOCKER_IMAGE_TAG=$TRAVIS_TAG;
+      else
+        DOCKER_IMAGE_TAG=unstable;
+      fi;
+      docker build -t $DOCKER_IMAGE_NAME .;
+      if [ ! -z "$TRAVIS_TAG" ]; then
+        docker tag $DOCKER_IMAGE_NAME $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG;
+        docker push $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG;
+        docker tag $DOCKER_IMAGE_NAME $DOCKER_IMAGE_NAME:latest;
+        docker push $DOCKER_IMAGE_NAME:latest;
+      else
+        docker tag $DOCKER_IMAGE_NAME $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG;
+        docker push $DOCKER_IMAGE_NAME:$DOCKER_IMAGE_TAG;
+      fi;
     fi;

Dockerfile

@@ -2,6 +2,18 @@ FROM alpine:3.4
 
 MAINTAINER fehguy
 
+ENV VERSION "v2.2.10"
+ENV FOLDER "swagger-ui-2.2.10"
+ENV API_URL "http://petstore.swagger.io/v2/swagger.json"
+ENV API_KEY "**None**"
+ENV OAUTH_CLIENT_ID "**None**"
+ENV OAUTH_CLIENT_SECRET "**None**"
+ENV OAUTH_REALM "**None**"
+ENV OAUTH_APP_NAME "**None**"
+ENV OAUTH_ADDITIONAL_PARAMS "**None**"
+ENV SWAGGER_JSON "/app/swagger.json"
+ENV PORT 80
+
 RUN apk add --update nginx
 RUN mkdir -p /run/nginx
 
@@ -9,7 +21,8 @@ COPY nginx.conf /etc/nginx/
 
 # copy swagger files to the `/js` folder
 ADD ./dist/* /usr/share/nginx/html/
+ADD ./docker-run.sh /usr/share/nginx/
 
 EXPOSE 8080
 
-CMD exec nginx -g 'daemon off;'
+CMD ["sh", "/usr/share/nginx/docker-run.sh"]

README.md

@@ -15,7 +15,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.5              | 2017-03-19   | 2.0                        | [tag v3.0.5](https://github.com/swagger-api/swagger-ui/tree/v3.0.5) |
+3.0.12              | 2017-03-19   | 2.0                        | [tag v3.0.12](https://github.com/swagger-api/swagger-ui/tree/v3.0.12) |
 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) |
@@ -58,7 +58,7 @@ To help with the migration, here are the currently known issues with 3.X. This l
 - Relative path support for external files is not implemented.
 
 ### SwaggerUIBundle
-To use swagger-ui you should take a look at the [source of swagger-ui html page](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html) and customize it. This basically requires you to instantiate a SwaggerUi object and call load() on it as below:
+To use swagger-ui's bundles, you should take a look at the [source of swagger-ui html page](https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html) and customize it. This basically requires you to instantiate a SwaggerUi object as below:
 
 ```javascript
   const ui = SwaggerUIBundle({
@@ -75,6 +75,35 @@ To use swagger-ui you should take a look at the [source of swagger-ui html page]
   })
 ```
 
+#### OAuth2 configuration
+You can configure OAuth2 authorization by calling `initOAuth` method with passed configs under the instance of `SwaggerUIBundle`
+default `client_id` and `client_secret`, `realm`, an application name `appName`, `scopeSeparator`, `additionalQueryStringParams`.
+
+Config Name | Description
+--- | ---
+client_id | Default clientId. MUST be a string 
+client_secret | Default clientSecret. MUST be a string 
+realm | realm query parameter (for oauth1) added to `authorizationUrl` and `tokenUrl` . MUST be a string
+appName | application name, displayed in authorization popup. MUST be a string
+scopeSeparator | scope separator for passing scopes, encoded before calling, default value is a space (encoded value `%20`). MUST be a string 
+additionalQueryStringParams | Additional query parameters added to `authorizationUrl` and `tokenUrl`. MUST be an object
+
+```
+const ui = SwaggerUIBundle({...})
+
+// Method can be called in any place after calling constructor SwaggerUIBundle
+ui.initOAuth({
+    clientId: "your-client-id",
+    clientSecret: "your-client-secret-if-required",
+    realm: "your-realms",
+    appName: "your-app-name",
+    scopeSeparator: " ",
+    additionalQueryStringParams: {test: "hello"}
+  })
+```
+
+If you'd like to use the bundle files via npm, check out the [`swagger-ui-dist` package](https://www.npmjs.com/package/swagger-ui-dist).
+
 #### Parameters
 
 Parameter Name | Description
@@ -84,8 +113,37 @@ spec | A JSON object describing the OpenAPI Specification. When used, the `url`
 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.
 oauth2RedirectUrl | OAuth redirect URL
+operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
+configUrl | Configs URL
+parameterMacro | MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable
+modelPropertyMacro | MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
 
+### 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`:
+
+```
+let preset = [
+  // TopbarPlugin,
+  ConfigsPlugin,
+  () => {
+    return {
+      components: { StandaloneLayout }
+    }
+  }
+]
+```
+
+#### Configs plugin
+Configs plugin allows to fetch external configs instead of passing them to `SwaggerUIBundle`. Fetched configs support two formats: JSON or yaml. The plugin is enabled by default. 
+There are three options of passing config:
+- add a query parameter `config` with URL to a server where the configs are hosted. For ex. http://petstore.swagger.io/?configs=http://localhost:3001/config.yaml
+- add a config `configUrl` with URL to SwaggerUIBundle
+- change default configs in `swagger-config.yaml` *Note: after changing, the project must be re-built*
+
+These options can be used altogether, the order of inheritance is following (from the lowest priority to the highest):
+`swagger-config.yaml` -> config passed to `SwaggerUIBundle` -> config fetched from `configUrl` passed to `SwaggerUIBundle` -> config fetched from URL passed as a query parameter `config`
 
 ## CORS Support
 

dev-helpers/index.html

@@ -88,6 +88,15 @@ window.onload = function() {
   })
 
   window.ui = ui
+
+  ui.initOAuth({
+    clientId: "your-client-id",
+    clientSecret: "your-client-secret-if-required",
+    realm: "your-realms",
+    appName: "your-app-name",
+    scopeSeparator: " ",
+    additionalQueryStringParams: {}
+  })
 }
 </script>
 </body>

dev-helpers/oauth2-redirect.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en-US">
+<body onload="run()">
+</body>
+</html>
+<script>
+    'use strict';
+    function run () {
+        var oauth2 = window.opener.swaggerUIRedirectOauth2;
+        var sentState = oauth2.state;
+        var redirectUrl = oauth2.redirectUrl;
+        var isValid, qp, arr;
+
+        qp = (window.location.hash || location.search).substring(1);
+
+        arr = qp.split("&")
+        arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})
+        qp = qp ? JSON.parse('{' + arr.join() + '}',
+                function (key, value) {
+                    return key === "" ? value : decodeURIComponent(value)
+                }
+        ) : {}
+
+        isValid = qp.state === sentState
+
+        if (oauth2.auth.schema.get("flow") === "accessCode" && !oauth2.auth.code) {
+            if (!isValid) {
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "warning",
+                    message: "Authorization may be unsafe, passed state was changed in server Passed state wasn't returned from auth server"
+                });
+            }
+
+            if (qp.code) {
+                delete oauth2.state;
+                oauth2.auth.code = qp.code;
+                oauth2.callback({auth: oauth2.auth, redirectUrl: redirectUrl});
+            } else {
+                oauth2.errCb({
+                    authId: oauth2.auth.name,
+                    source: "auth",
+                    level: "error",
+                    message: "Authorization failed: no accessCode received from the server"
+                });
+            }
+        } else {
+            oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid, redirectUrl: redirectUrl});
+        }
+        window.close();
+    }
+</script>

dist/index.html

@@ -90,4 +90,4 @@ window.onload = function() {
 </script>
 </body>
 
-</html>
+</html>

dist/oauth2-redirect.html

@@ -8,11 +8,13 @@
     function run () {
         var oauth2 = window.opener.swaggerUIRedirectOauth2;
         var sentState = oauth2.state;
-        var isValid, qp;
+        var isValid, qp, arr;
 
         qp = (window.location.hash || location.search).substring(1);
 
-        qp = qp ? JSON.parse('{"' + qp.replace(/&/g, '","').replace(/=/g, '":"') + '"}',
+        arr = qp.split("&")
+        arr.forEach(function (v,i,_arr) { _arr[i] = '"' + v.replace('=', '":"') + '"';})
+        qp = qp ? JSON.parse('{' + arr.join() + '}',
                 function (key, value) {
                     return key === "" ? value : decodeURIComponent(value)
                 }
@@ -33,51 +35,19 @@
             if (qp.code) {
                 delete oauth2.state;
                 oauth2.auth.code = qp.code;
-                createForm(oauth2.auth, qp).submit();
+                oauth2.callback(oauth2.auth);
             } else {
                 oauth2.errCb({
                     authId: oauth2.auth.name,
                     source: "auth",
                     level: "error",
-                    message: "Authorization failed: no accessCode came from the server"
+                    message: "Authorization failed: no accessCode received from the server"
                 });
-                window.close();
             }
         } else {
             oauth2.callback({auth: oauth2.auth, token: qp, isValid: isValid});
-            window.close();
         }
-    }
-
-    function createForm(auth, qp) {
-        var form = document.createElement("form");
-        var schema = auth.schema;
-        var action = schema.get("tokenUrl");
-        var name, input;
-
-        var fields = {
-            code: qp.code,
-            "redirect_uri": location.protocol + "//" + location.host + location.pathname,
-            "grant_type": "authorization_code",
-            "client_secret": auth.clientSecret,
-            "client_id": auth.clientId
-        }
-
-        for ( name in fields ) {
-            input = document.createElement("input");
-            input.name = name;
-            input.value = fields[name];
-            input.type = "hidden";
-            form.appendChild(input);
-        }
-
-
-        form.method = "POST";
-        form.action = action;
-
-        document.body.appendChild(form);
-
-        return form;
+        window.close();
     }
 
 </script>

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;;;;;;;;;;;;;;;;;;;;;;;;;;AA0dA;;;;;;AAoIA;AAk7FA;AAmtCA;;;;;AA0uIA;AA66IA;AA27FA;AAuwGA;AAilFA;AAikFA;AAs9CA;AA8jDA;AA2qCA;AA4tEA;AAgkIA;;;;;;;;;;;;;;AAw4GA;AAyoIA;AAiuJA;AA8kHA;AAonGA;AAukEA;AA02DA;AAyxDA;AAw6BA;;;;;;AA8vEA;AA+zFA;;;;;AA23CA;AA2qFA;AAq2CA;AA0kCA;AAs/CA;AA0wEA;AA49FA;;;;;;;;;AA20BA;AA2zIA;AAi4DA;AA6tDA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;AAu/FA;AA6+FA;;;;;;;;;;;;;;;;;;;;;;;;;;AAyTA;;;;;;AAoIA;AAi7FA;AAmtCA;AAi0IA;AA0oJA;AAgwFA;AAyrGA;AA0lFA;AA4nFA;AA+9CA;AAmhDA;AAmrCA;AAg1EA;;;;;AAwoCA;AAsyJA;;;;;;;;;;;;;;AA64EA;AA4mIA;AAquJA;AA2qHA;AA2mGA;AAiiEA;AAq4DA;AAg3DA;AAgRA;;;;;;AAs5FA;AAw3FA;;;;;AAkgDA;AAgsFA;AAw2CA;AA6kCA;AA68CA;AAsgFA;AAq2FA;;;;;;;;;AAkpDA;AA2zIA;AAk4DA;AA8mDA","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;;;;;AA2SA;AAyiGA","sourceRoot":""}
+{"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":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAuwCA;AAoyHA;AA2wHA;AA07FA;AA+nCA;AAohCA;AAghCA;AAk4BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA0yCA;AAoyHA;AAgyHA;AAwkGA;AA48BA;AAokCA;AA8iCA;AAs6BA","sourceRoot":""}

docker-run.sh

@@ -0,0 +1,48 @@
+#! /bin/sh
+
+set -e
+
+INDEX_FILE=/usr/share/nginx/html/index.html
+
+replace_in_index () {
+  if [ "$1" != "**None**" ]; then
+    sed -i "s|/\*||g" $INDEX_FILE
+    sed -i "s|\*/||g" $INDEX_FILE
+    sed -i "s|$1|$2|g" $INDEX_FILE
+  fi
+}
+
+replace_or_delete_in_index () {
+  if [ -z "$2" ]; then
+    sed -i "/$1/d" $INDEX_FILE
+  else
+    replace_in_index $1 $2
+  fi
+}
+
+replace_in_index myApiKeyXXXX123456789 $API_KEY
+replace_or_delete_in_index your-client-id $OAUTH_CLIENT_ID
+replace_or_delete_in_index your-client-secret-if-required $OAUTH_CLIENT_SECRET
+replace_or_delete_in_index your-realms $OAUTH_REALM
+replace_or_delete_in_index your-app-name $OAUTH_APP_NAME
+if [ "$OAUTH_ADDITIONAL_PARAMS" != "**None**" ]; then
+    replace_in_index "additionalQueryStringParams: {}" "additionalQueryStringParams: {$OAUTH_ADDITIONAL_PARAMS}"
+fi
+
+if [[ -f $SWAGGER_JSON ]]; then
+  sed -i "s|http://petstore.swagger.io/v2/swagger.json|swagger.json|g" $INDEX_FILE
+  sed -i "s|http://example.com/api|swagger.json|g" $INDEX_FILE
+else
+  sed -i "s|http://petstore.swagger.io/v2/swagger.json|$API_URL|g" $INDEX_FILE
+  sed -i "s|http://example.com/api|$API_URL|g" $INDEX_FILE
+fi
+
+if [[ -n "$VALIDATOR_URL" ]]; then
+  sed -i "s|.*validatorUrl:.*$||g" $INDEX_FILE
+  TMP_VU="$VALIDATOR_URL"
+  [[ "$VALIDATOR_URL" != "null" && "$VALIDATOR_URL" != "undefined" ]] && TMP_VU="\"${VALIDATOR_URL}\""
+  sed -i "s|\(url: .*,\)|\1\n    validatorUrl: ${TMP_VU},|g" $INDEX_FILE
+  unset TMP_VU
+fi
+
+exec nginx -g 'daemon off;'

make-webpack-config.js

@@ -4,9 +4,23 @@ 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
+
+try {
+  gitInfo = gitDescribeSync(__dirname)
+} catch(e) {
+  gitInfo = {
+    hash: 'noGit',
+    dirty: false
+  }
+}
+
 module.exports = function(options) {
 
   // Special options, that have logic in this file
@@ -60,7 +74,13 @@ module.exports = function(options) {
       'process.env': {
         NODE_ENV:  specialOptions.minimize ? JSON.stringify('production') : null,
         WEBPACK_INLINE_STYLES: !Boolean(specialOptions.separateStylesheets)
+
       },
+      'buildInfo': JSON.stringify({
+        PACKAGE_VERSION: (pkg.version),
+        GIT_COMMIT: gitInfo.hash,
+        GIT_DIRTY: gitInfo.dirty
+      })
     }))
 
   var cssLoader = 'css-loader!postcss-loader'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.0.5",
+  "version": "3.0.12",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -36,10 +36,12 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0",
+    "base64-js": "^1.2.0",
     "brace": "0.7.0",
     "deep-extend": "0.4.1",
     "expect": "1.20.2",
     "getbase": "^2.8.2",
+    "ieee754": "^1.1.8",
     "immutable": "^3.x.x",
     "js-yaml": "^3.5.5",
     "less": "2.7.1",
@@ -67,7 +69,8 @@
     "reselect": "2.5.3",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.0.5",
+    "swagger-client": "~3.0.12",
+    "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",
     "xml": "1.0.1",
@@ -92,6 +95,7 @@
     "eslint-plugin-react": "^6.10.3",
     "extract-text-webpack-plugin": "0.8.2",
     "file-loader": "0.8.4",
+    "git-describe": "^4.0.1",
     "html-webpack-plugin": "^2.28.0",
     "imports-loader": "0.6.5",
     "json-loader": "0.5.3",
@@ -111,6 +115,7 @@
     "postcss-loader": "0.7.0",
     "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",

snapcraft.yaml

@@ -0,0 +1,28 @@
+name: swagger-ui
+version: master
+summary: The World's Most Popular API Framework
+description: |
+  Swagger UI is part of the Swagger project. The Swagger project allows you to
+  produce, visualize and consume your OWN RESTful services. No proxy or 3rd
+  party services required. Do it your own way.
+
+  Swagger UI is a dependency-free collection of HTML, Javascript, and CSS
+  assets that dynamically generate beautiful documentation and sandbox from a
+  Swagger-compliant API. Because Swagger UI has no dependencies, you can host
+  it in any server environment, or on your local machine.
+
+grade: devel
+confinement: strict
+
+apps:
+  swagger-ui:
+    command: sh -c \"cd $SNAP/lib/node_modules/swagger-ui/dist && http-server -a localhost -p 8080\"
+    daemon: simple
+    plugs: [network, network-bind]
+
+parts:
+  swagger-ui:
+    source: .
+    plugin: nodejs
+    npm-run: [build]
+    node-packages: [handlebars, http-server]

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

@@ -64,11 +64,10 @@ export default class ApiKeyAuth extends React.Component {
         </Row>
         <Row>
           <label>Value:</label>
-          <Col>
-            {
-              value || <Input type="text" onChange={ this.onChange }/>
-            }
-          </Col>
+          {
+            value ? <code> ****** </code>
+                  : <Col><Input type="text" onChange={ this.onChange }/></Col>
+          }
         </Row>
         {
           errors.valueSeq().map( (error, key) => {

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

@@ -16,6 +16,10 @@ export default class AuthorizeOperationBtn extends React.Component {
 
     let isAuthorized = authSelectors.isAuthorized(security)
 
+    if(isAuthorized === null) {
+      return null
+    }
+
     return (
       <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
         <svg width="20" height="20">

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

@@ -63,19 +63,23 @@ export default class BasicAuth extends React.Component {
                     source={ schema.get("description") } />
         </Row>
         <Row>
-          <Col tablet={2} desktop={2}>username:</Col>
-          <Col tablet={10} desktop={10}>
+          <label>Username:</label>
+          {
+            username ? <code> { username } </code>
+                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange }/></Col>
+          }
+        </Row>
+        <Row>
+          <label>Password:</label>
             {
-              username || <Input type="text" required="required" name="username" onChange={ this.onChange }/>
+              username ? <code> ****** </code>
+                       : <Col><Input required="required"
+                                     autoComplete="new-password"
+                                     name="password"
+                                     type="password"
+                                     onChange={ this.onChange }/></Col>
             }
-          </Col>
         </Row>
-        {
-          !username && <Row>
-            <Col tablet={2} desktop={2}>password:</Col>
-            <Col tablet={10} desktop={10}><Input required="required" autoComplete="new-password" name="password" type="password" onChange={ this.onChange }/></Col>
-          </Row>
-        }
         {
           errors.valueSeq().map( (error, key) => {
             return <AuthError error={ error }

src/core/components/auth/oauth2.jsx

@@ -21,14 +21,16 @@ export default class Oauth2 extends React.Component {
 
   constructor(props, context) {
     super(props, context)
-    let { name, schema, authorized } = this.props
+    let { name, schema, authorized, authSelectors } = this.props
     let auth = authorized && authorized.get(name)
+    let authConfigs = authSelectors.getConfigs() || {}
     let username = auth && auth.get("username") || ""
-    let clientId = auth && auth.get("clientId") || ""
-    let clientSecret = auth && auth.get("clientSecret") || ""
-    let passwordType = auth && auth.get("passwordType") || "none"
+    let clientId = auth && auth.get("clientId") || authConfigs.clientId || ""
+    let clientSecret = auth && auth.get("clientSecret") || authConfigs.clientSecret || ""
+    let passwordType = auth && auth.get("passwordType") || "basic"
 
     this.state = {
+      appName: authConfigs.appName,
       name: name,
       schema: schema,
       scopes: [],
@@ -41,11 +43,12 @@ export default class Oauth2 extends React.Component {
   }
 
   authorize =() => {
-    let { authActions, errActions, getConfigs } = this.props
+    let { authActions, errActions, getConfigs, authSelectors } = this.props
     let configs = getConfigs()
+    let authConfigs = authSelectors.getConfigs()
 
     errActions.clear({authId: name,type: "auth", source: "auth"})
-    oauth2Authorize(this.state, authActions, errActions, configs)
+    oauth2Authorize({auth: this.state, authActions, errActions, configs, authConfigs })
   }
 
   onScopeChange =(e) => {
@@ -98,6 +101,7 @@ export default class Oauth2 extends React.Component {
     return (
       <div>
         <h4>OAuth2.0 <JumpToPath path={[ "securityDefinitions", name ]} /></h4>
+        { !this.state.appName ? null : <h5>Application: { this.state.appName } </h5> }
         <Markdown options={{html: true, typographer: true, linkify: true, linkTarget: "_blank"}}
                   source={ schema.get("description") } />
 
@@ -108,66 +112,76 @@ export default class Oauth2 extends React.Component {
         <p className="flow">Flow: <code>{ schema.get("flow") }</code></p>
 
         {
-          flow === PASSWORD && ( !isAuthorized || isAuthorized && this.state.username) && <Row>
-            <Col tablet={2} desktop={2}>username:</Col>
-            <Col tablet={10} desktop={10}>
+          flow !== PASSWORD ? null
+            : <Row>
+              <Row>
+                <label htmlFor="oauth_username">username:</label>
+                {
+                  isAuthorized ? <code> { this.state.username } </code>
+                    : <Col tablet={10} desktop={10}>
+                      <input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange }/>
+                    </Col>
+                }
+              </Row>
               {
-                isAuthorized ? <span>{ this.state.username }</span>
-              : <input type="text" data-name="username" onChange={ this.onInputChange }/>
+
               }
-            </Col>
-          </Row>
+              <Row>
+                <label htmlFor="oauth_password">password:</label>
+                {
+                  isAuthorized ? <code> ****** </code>
+                    : <Col tablet={10} desktop={10}>
+                      <input id="oauth_password" type="password" data-name="password" onChange={ this.onInputChange }/>
+                    </Col>
+                }
+              </Row>
+              <Row>
+                <label htmlFor="password_type">type:</label>
+                {
+                  isAuthorized ? <code> { this.state.passwordType } </code>
+                    : <Col tablet={10} desktop={10}>
+                      <select id="password_type" data-name="passwordType" onChange={ this.onInputChange }>
+                        <option value="basic">Basic auth</option>
+                        <option value="request-body">Request body</option>
+                        <option value="query">Query parameters</option>
+                      </select>
+                    </Col>
+                }
+              </Row>
+            </Row>
         }
-
         {
-          flow === PASSWORD && !isAuthorized && <Row>
-            <Col tablet={2} desktop={2}>password:</Col>
-            <Col tablet={10} desktop={10}>
-              <input type="password" data-name="password" onChange={ this.onInputChange }/>
-            </Col>
-          </Row>
-        }
-
-        {
-          flow === PASSWORD && <Row>
-            <Col tablet={2} desktop={2}>type:</Col>
-            <Col tablet={10} desktop={10}>
-              {
-                isAuthorized ? <span>{ this.state.passwordType }</span>
-                             : <select data-name="passwordType" onChange={ this.onInputChange }>
-                                 <option value="none">None or other</option>
-                                 <option value="basic">Basic auth</option>
-                                 <option value="request">Request body</option>
-                               </select>
-              }
-            </Col>
-          </Row>
-        }
-
-        {
-          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) &&
+          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) &&
           ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
             <label htmlFor="client_id">client_id:</label>
-            <Col tablet={10} desktop={10}>
-              {
-                isAuthorized ? <span>{ this.state.clientId }</span>
-              : <input id="client_id" type="text" required={ flow === PASSWORD } data-name="clientId"
+            {
+              isAuthorized ? <code> ****** </code>
+                           : <Col tablet={10} desktop={10}>
+                               <input id="client_id"
+                                      type="text"
+                                      required={ flow === PASSWORD }
+                                      value={ this.state.clientId }
+                                      data-name="clientId"
                                       onChange={ this.onInputChange }/>
-              }
-            </Col>
+                             </Col>
+            }
           </Row>
         }
 
         {
-          ( flow === APPLICATION || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) && <Row>
+          ( flow === APPLICATION || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "basic") ) && <Row>
             <label htmlFor="client_secret">client_secret:</label>
-            <Col tablet={10} desktop={10}>
-              {
-                isAuthorized ? <span>{ this.state.clientSecret }</span>
-              : <input id="client_secret" type="text" data-name="clientSecret"
+            {
+              isAuthorized ? <code> ****** </code>
+                           : <Col tablet={10} desktop={10}>
+                               <input id="client_secret"
+                                      value={ this.state.clientSecret }
+                                      type="text"
+                                      data-name="clientSecret"
                                       onChange={ this.onInputChange }/>
-              }
-            </Col>
+                             </Col>
+            }
+
           </Row>
         }
 
@@ -179,11 +193,11 @@ export default class Oauth2 extends React.Component {
                 <Row key={ name }>
                   <div className="checkbox">
                     <Input data-value={ name }
-                          id={`${name}-checkbox`}
+                          id={`${name}-checkbox-${this.state.name}`}
                            disabled={ isAuthorized }
                            type="checkbox"
                            onChange={ this.onScopeChange }/>
-                         <label htmlFor={`${name}-checkbox`}>
+                         <label htmlFor={`${name}-checkbox-${this.state.name}`}>
                            <span className="item"></span>
                            <div className="text">
                              <p className="name">{name}</p>

src/core/components/errors.jsx

@@ -5,14 +5,18 @@ import Collapse from "react-collapse"
 export default class Errors extends React.Component {
 
   static propTypes = {
-    jumpToLine: PropTypes.func,
+    editorActions: PropTypes.object,
     errSelectors: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired
   }
 
   render() {
-    let { jumpToLine, errSelectors, layoutSelectors, layoutActions } = this.props
+    let { editorActions, errSelectors, layoutSelectors, layoutActions } = this.props
+
+    if(editorActions && editorActions.jumpToLine) {
+      var jumpToLine = editorActions.jumpToLine
+    }
 
     let errors = errSelectors.allErrors()
 
@@ -37,10 +41,11 @@ export default class Errors extends React.Component {
         <Collapse isOpened={ isVisible } animated >
           <div className="errors">
             { sortedJSErrors.map((err, i) => {
-              if(err.get("type") === "thrown") {
+              let type = err.get("type")
+              if(type === "thrown" || type === "auth") {
                 return <ThrownErrorItem key={ i } error={ err.get("error") || err } jumpToLine={jumpToLine} />
               }
-              if(err.get("type") === "spec") {
+              if(type === "spec") {
                 return <SpecErrorItem key={ i } error={ err } jumpToLine={jumpToLine} />
               }
             }) }
@@ -95,7 +100,7 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
         <div>
           <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
           <span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
-          <div>
+          <div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
             { jumpToLine ? (
               <a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
             ) : null }

src/core/components/layout-utils.jsx

@@ -16,7 +16,7 @@ export class Container extends React.Component {
     if(fullscreen)
       return <section {...rest}/>
 
-    let containerClass = "container" + (full ? "-full" : "")
+    let containerClass = "swagger-container" + (full ? "-full" : "")
     return (
       <section {...rest} className={xclass(rest.className, containerClass)}/>
     )
@@ -127,7 +127,7 @@ export const Input = (props) => <input {...props} />
 
 export class Select extends React.Component {
   static propTypes = {
-    allowedValues: PropTypes.object,
+    allowedValues: PropTypes.array,
     value: PropTypes.any,
     onChange: PropTypes.func,
     multiple: PropTypes.bool,

src/core/components/layouts/base.jsx

@@ -0,0 +1,80 @@
+import React, { PropTypes } from "react"
+
+export default class BaseLayout extends React.Component {
+
+  static propTypes = {
+    errSelectors: PropTypes.object.isRequired,
+    errActions: PropTypes.object.isRequired,
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render() {
+    let { specSelectors, specActions, getComponent } = this.props
+
+    let info = specSelectors.info()
+    let url = specSelectors.url()
+    let basePath = specSelectors.basePath()
+    let host = specSelectors.host()
+    let securityDefinitions = specSelectors.securityDefinitions()
+    let externalDocs = specSelectors.externalDocs()
+    let schemes = specSelectors.schemes()
+
+    let Info = getComponent("info")
+    let Operations = getComponent("operations", true)
+    let Models = getComponent("models", true)
+    let AuthorizeBtn = getComponent("authorizeBtn", true)
+    let Row = getComponent("Row")
+    let Col = getComponent("Col")
+    let Errors = getComponent("errors", true)
+    const Schemes = getComponent("schemes")
+
+    const isSpecEmpty = !specSelectors.specStr()
+
+    if(isSpecEmpty) {
+      return <h4>No spec provided.</h4>
+    }
+
+    return (
+
+      <div className='swagger-ui'>
+          <div>
+            <Errors/>
+            <Row className="information-container">
+              <Col mobile={12}>
+                { info.count() ? (
+                  <Info info={ info } url={ url } host={ host } basePath={ basePath } externalDocs={externalDocs} getComponent={getComponent}/>
+                ) : null }
+              </Col>
+            </Row>
+            { schemes && schemes.size || securityDefinitions ? (
+              <div className="scheme-container">
+                <Col className="schemes wrapper" mobile={12}>
+                  { schemes && schemes.size ? (
+                    <Schemes schemes={ schemes } specActions={ specActions } />
+                  ) : null }
+                  { securityDefinitions ? (
+                    <AuthorizeBtn />
+                  ) : null }
+                </Col>
+              </div>
+            ) : null }
+
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Operations/>
+              </Col>
+            </Row>
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Models/>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      )
+  }
+}

src/core/components/operations.jsx

@@ -48,11 +48,10 @@ export default class Operations extends React.Component {
               return (
                 <div className={showTag ? "opblock-tag-section is-open" : "opblock-tag-section"} key={"operation-" + tag}>
 
-                  <h4 className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }>
-                    <span onClick={() => layoutActions.show(isShownKey, !showTag)}>{tag}</span>
-
+                  <h4 onClick={() => layoutActions.show(isShownKey, !showTag)} className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }>
+                    <span>{tag}</span>
                     { !tagDescription ? null :
-                        <small onClick={() => layoutActions.show(isShownKey, !showTag)} >
+                        <small>
                           { tagDescription }
                         </small>
                     }

src/core/components/param-body.jsx

@@ -55,9 +55,10 @@ export default class ParamBody extends Component {
     let isXml = /xml/i.test(consumesValue)
     let paramValue = isXml ? parameter.get("value_xml") : parameter.get("value")
 
-    if ( paramValue ) {
-      this.setState({ value: paramValue })
-      this.onChange(paramValue, {isXml: isXml, isEditBox: isExecute})
+    if ( paramValue !== undefined ) {
+      let val = !paramValue && !isXml ? "{}" : paramValue
+      this.setState({ value: val })
+      this.onChange(val, {isXml: isXml, isEditBox: isExecute})
     } else {
       if (isXml) {
         this.onChange(this.sample("xml"), {isXml: isXml, isEditBox: isExecute})

src/core/components/parameter-row.jsx

@@ -28,11 +28,25 @@ export default class ParameterRow extends Component {
 
   componentWillReceiveProps(props) {
     let { specSelectors, pathMethod, param } = props
+    let example = param.get("example")
     let defaultValue = param.get("default")
     let parameter = specSelectors.getParameter(pathMethod, param.get("name"))
-    let value = parameter ? parameter.get("value") : ""
-    if ( defaultValue !== undefined && value === undefined ) {
-      this.onChangeWrapper(defaultValue)
+    let paramValue = parameter ? parameter.get("value") : undefined
+    let enumValue = parameter ? parameter.get("enum") : undefined
+    let value
+
+    if ( paramValue !== undefined ) {
+      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()
+    }
+
+    if ( value !== undefined ) {
+      this.onChangeWrapper(value)
     }
   }
 

src/core/index.js

@@ -1,22 +1,32 @@
 import deepExtend from "deep-extend"
 
 import System from "core/system"
+import win from "core/window"
 import ApisPreset from "core/presets/apis"
 import * as AllPlugins from "core/plugins/all"
-import { filterConfigs } from "plugins/configs"
-import { parseSeach } from "core/utils"
+import { parseSeach, filterConfigs } from "core/utils"
+
+const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
+    "apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
+    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro" ]
+
+// eslint-disable-next-line no-undef
+const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
 
 module.exports = function SwaggerUI(opts) {
 
+  win.versions = win.versions || {}
+  win.versions.swaggerUi = `${PACKAGE_VERSION}/${GIT_COMMIT || "unknown"}${GIT_DIRTY ? "-dirty" : ""}`
+
   const defaults = {
     // Some general settings, that we floated to the top
     dom_id: null,
     spec: {},
     url: "",
-    layout: "Layout",
+    layout: "BaseLayout",
     validatorUrl: "https://online.swagger.io/validator",
-    configs: {
-    },
+    configs: {},
+    custom: {},
 
     // 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.
@@ -68,14 +78,16 @@ module.exports = function SwaggerUI(opts) {
   var system = store.getSystem()
   let queryConfig = parseSeach()
 
+  system.initOAuth = system.authActions.configureAuth
+
   const downloadSpec = (fetchedConfig) => {
     if(typeof constructorConfig !== "object") {
       return system
     }
 
     let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
-    let mergedConfig = deepExtend({}, constructorConfig, localConfig, fetchedConfig || {}, queryConfig)
-    store.setConfigs(filterConfigs(mergedConfig))
+    let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
+    store.setConfigs(filterConfigs(mergedConfig, CONFIGS))
 
     if (fetchedConfig !== null) {
       if (!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {

src/core/json-schema-components.js

@@ -69,7 +69,7 @@ export class JsonSchema_string extends Component {
       return <Input type="file" className={ errors.length ? "invalid" : ""} onChange={ this.onChange } disabled={isDisabled}/>
     }
     else {
-      return <Input type="text" className={ errors.length ? "invalid" : ""} value={value} placeholder={description} onChange={ this.onChange } disabled={isDisabled}/>
+      return <Input type={ schema.format === "password" ? "password" : "text" } className={ errors.length ? "invalid" : ""} value={value} placeholder={description} onChange={ this.onChange } disabled={isDisabled}/>
     }
   }
 }
@@ -150,9 +150,9 @@ export class JsonSchema_array extends Component {
           (errors.length ? <span style={{ color: "red", fortWeight: "bold" }}>{ errors[0] }</span> : null) :
           value.map( (item,i) => {
             let schema = Object.assign({}, itemSchema)
-            let err = errors.filter((err) => err.index === i)
-            if ( err.length ) {
-              schema.errors = [ err[0].error + i ]
+            if ( errors.length ) {
+              let err = errors.filter((err) => err.index === i)
+              if (err.length) schema.errors = [ err[0].error + i ]
             }
           return (
             <div key={i} className="json-schema-form-item">

src/core/oauth2-authorize.js

@@ -1,26 +1,37 @@
 import win from "core/window"
+import { btoa } from "core/utils"
 
-export default function authorize ( auth, authActions, errActions, configs ) {
+export default function authorize ( { auth, authActions, errActions, configs, authConfigs={} } ) {
   let { schema, scopes, name, clientId } = auth
+  let flow = schema.get("flow")
+  let query = []
+
+  switch (flow) {
+    case "password":
+      authActions.authorizePassword(auth)
+      return
+
+    case "application":
+      authActions.authorizeApplication(auth)
+      return
+
+    case "accessCode":
+      query.push("response_type=code")
+      break
+
+    case "implicit":
+      query.push("response_type=token")
+      break
+  }
+
+  if (typeof clientId === "string") {
+    query.push("client_id=" + encodeURIComponent(clientId))
+  }
 
   let redirectUrl = configs.oauth2RedirectUrl
-  let scopeSeparator = " "
-  let state = name
-  let flow = schema.get("flow")
-  let url
-
-  if (flow === "password") {
-    authActions.authorizePassword(auth)
-    return
-  }
-
-  if (flow === "application") {
-    authActions.authorizeOauth2Application(auth)
-    return
-  }
 
   // todo move to parser
-  if ( !redirectUrl ) {
+  if (typeof redirectUrl === "undefined") {
     errActions.newAuthErr( {
       authId: name,
       source: "validation",
@@ -29,22 +40,39 @@ export default function authorize ( auth, authActions, errActions, configs ) {
     })
     return
   }
+  query.push("redirect_uri=" + encodeURIComponent(redirectUrl))
 
-  if (flow === "implicit" || flow === "accessCode") {
-    url = schema.get("authorizationUrl") + "?response_type=" + (flow === "implicit" ? "token" : "code")
+  if (Array.isArray(scopes) && 0 < scopes.length) {
+    let scopeSeparator = authConfigs.scopeSeparator || " "
+
+    query.push("scope=" + encodeURIComponent(scopes.join(scopeSeparator)))
   }
 
-  url += "&redirect_uri=" + encodeURIComponent(redirectUrl)
-      + "&scope=" + encodeURIComponent(scopes.join(scopeSeparator))
-      + "&state=" + encodeURIComponent(state)
-      + "&client_id=" + encodeURIComponent(clientId)
+  let state = btoa(new Date())
+
+  query.push("state=" + encodeURIComponent(state))
+
+  if (typeof authConfigs.realm !== "undefined") {
+    query.push("realm=" + encodeURIComponent(authConfigs.realm))
+  }
+
+  let { additionalQueryStringParams } = authConfigs
+
+  for (let key in additionalQueryStringParams) {
+    if (typeof additionalQueryStringParams[key] !== "undefined") {
+      query.push([key, additionalQueryStringParams[key]].map(encodeURIComponent).join("="))
+    }
+  }
+
+  let url = [schema.get("authorizationUrl"), query.join("&")].join("?")
 
   // pass action authorizeOauth2 and authentication data through window
   // to authorize with oauth2
   win.swaggerUIRedirectOauth2 = {
     auth: auth,
     state: state,
-    callback: authActions.preAuthorizeOauth2,
+    redirectUrl: redirectUrl,
+    callback: flow === "implicit" ? authActions.preAuthorizeImplicit : authActions.authorizeAccessCode,
     errCb: errActions.newAuthErr
   }
 

src/core/plugins/auth/actions.js

@@ -1,5 +1,5 @@
 import win from "core/window"
-import { btoa } from "core/utils"
+import { btoa, buildFormData } from "core/utils"
 
 export const SHOW_AUTH_POPUP = "show_popup"
 export const AUTHORIZE = "authorize"
@@ -7,6 +7,7 @@ export const LOGOUT = "logout"
 export const PRE_AUTHORIZE_OAUTH2 = "pre_authorize_oauth2"
 export const AUTHORIZE_OAUTH2 = "authorize_oauth2"
 export const VALIDATE = "validate"
+export const CONFIGURE_AUTH = "configure_auth"
 
 const scopeSeparator = " "
 
@@ -31,7 +32,7 @@ export function logout(payload) {
   }
 }
 
-export const preAuthorizeOauth2 = (payload) => ( { authActions, errActions } ) => {
+export const preAuthorizeImplicit = (payload) => ( { authActions, errActions } ) => {
   let { auth , token, isValid } = payload
   let { schema, name } = auth
   let flow = schema.get("flow")
@@ -68,72 +69,87 @@ export function authorizeOauth2(payload) {
   }
 }
 
-export const authorizePassword = ( auth ) => ( { fn, authActions, errActions } ) => {
+export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
-  let req = {
-    url: schema.get("tokenUrl"),
-    method: "post",
-    headers: {
-      "content-type": "application/x-www-form-urlencoded"
-    },
-    query: {
-      grant_type: "password",
-      username,
-      password,
-      scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
+  let form = {
+    grant_type: "password",
+    scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
+  }
+  let query = {}
+  let headers = {}
+
+  if ( passwordType === "basic") {
+    headers.Authorization = "Basic " + btoa(username + ":" + password)
+  } else {
+    Object.assign(form,  {username}, {password})
+
+    if ( passwordType === "query") {
+      if ( clientId ) {
+        query.client_id = clientId
+      }
+      if ( clientSecret ) {
+        query.client_secret = clientSecret
+      }
+    } else {
+      Object.assign(form, {client_id: clientId}, {client_secret: clientSecret})
     }
   }
 
-  if ( passwordType === "basic") {
-    req.headers.authorization = "Basic " + btoa(clientId + ":" + clientSecret)
-  } else if ( passwordType === "request") {
-    req.query = Object.assign(req.query, { client_id: clientId, client_secret: clientSecret })
-  }
-  return fn.fetch(req)
-    .then(( response ) => {
-      let token = JSON.parse(response.data)
-      let error = token && ( token.error || "" )
-      let parseError = token && ( token.parseError || "" )
-
-      if ( !response.ok ) {
-        errActions.newAuthErr( {
-          authId: name,
-          level: "error",
-          source: "auth",
-          message: response.statusText
-        } )
-        return
-      }
-
-      if ( error || parseError ) {
-        errActions.newAuthErr({
-          authId: name,
-          level: "error",
-          source: "auth",
-          message: JSON.stringify(token)
-        })
-        return
-      }
-
-      authActions.authorizeOauth2({ auth, token })
-    })
-    .catch(err => { errActions.newAuthErr( err ) })
+  return authActions.authorizeRequest({ body: buildFormData(form), url: schema.get("tokenUrl"), name, headers, query, auth})
 }
 
-export const authorizeOauth2Application = ( auth ) => ( { fn, authActions, errActions } ) => {
+export const authorizeApplication = ( auth ) => ( { authActions } ) => {
   let { schema, scopes, name, clientId, clientSecret } = auth
+  let form = {
+    grant_type: "client_credentials",
+    client_id: clientId,
+    client_secret: clientSecret,
+    scope: scopes.join(scopeSeparator)
+  }
 
-  fn.fetch(schema.get("tokenUrl"), {
-    method: "post", headers: {
-      "Accept":"application/json, text/plain, */*",
-      "Content-Type": "application/x-www-form-urlencoded"
-    },
-    body: "grant_type=client_credentials" +
-          "&client_id=" + encodeURIComponent(clientId) +
-          "&client_secret=" + encodeURIComponent(clientSecret) +
-          "&scope=" + encodeURIComponent(scopes.join(scopeSeparator))
+  return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth })
+}
+
+export const authorizeAccessCode = ( { auth, redirectUrl } ) => ( { authActions } ) => {
+  let { schema, name, clientId, clientSecret } = auth
+  let form = {
+    grant_type: "authorization_code",
+    code: auth.code,
+    client_id: clientId,
+    client_secret: clientSecret,
+    redirect_uri: redirectUrl
+  }
+
+  return authActions.authorizeRequest({body: buildFormData(form), name, url: schema.get("tokenUrl"), auth})
+}
+
+export const authorizeRequest = ( data ) => ( { fn, authActions, errActions, authSelectors } ) => {
+  let { body, query={}, headers={}, name, url, auth } = data
+  let { additionalQueryStringParams } = authSelectors.getConfigs() || {}
+  let fetchUrl = url
+
+  for (let key in additionalQueryStringParams) {
+    url += "&" + key + "=" + encodeURIComponent(additionalQueryStringParams[key])
+  }
+
+  let _headers = Object.assign({
+    "Accept":"application/json, text/plain, */*",
+    "Access-Control-Allow-Origin": "*",
+    "Content-Type": "application/x-www-form-urlencoded"
+  }, headers)
+
+  fn.fetch({
+    url: fetchUrl,
+    method: "post",
+    headers: _headers,
+    query: query,
+    body: body
   })
   .then(function (response) {
+    let token = JSON.parse(response.data)
+    let error = token && ( token.error || "" )
+    let parseError = token && ( token.parseError || "" )
+
     if ( !response.ok ) {
       errActions.newAuthErr( {
         authId: name,
@@ -142,12 +158,34 @@ export const authorizeOauth2Application = ( auth ) => ( { fn, authActions, errAc
         message: response.statusText
       } )
       return
-    } else {
-      response.json()
-      .then(function (json){
-        authActions.authorizeOauth2({ auth, token: json})
-      })
     }
+
+    if ( error || parseError ) {
+      errActions.newAuthErr({
+        authId: name,
+        level: "error",
+        source: "auth",
+        message: JSON.stringify(token)
+      })
+      return
+    }
+
+    authActions.authorizeOauth2({ auth, token})
+  })
+  .catch(e => {
+    let err = new Error(e)
+    errActions.newAuthErr( {
+      authId: name,
+      level: "error",
+      source: "auth",
+      message: err.message
+    } )
   })
-  .catch(err => { errActions.newAuthErr( err ) })
+}
+
+export function configureAuth(payload) {
+  return {
+    type: CONFIGURE_AUTH,
+    payload: payload
+  }
 }

src/core/plugins/auth/reducers.js

@@ -5,7 +5,8 @@ import {
   SHOW_AUTH_POPUP,
   AUTHORIZE,
   AUTHORIZE_OAUTH2,
-  LOGOUT
+  LOGOUT,
+  CONFIGURE_AUTH
 } from "./actions"
 
 export default {
@@ -57,5 +58,9 @@ export default {
       })
 
     return state.set("authorized", result)
+  },
+
+  [CONFIGURE_AUTH]: (state, { payload } ) =>{
+    return state.set("configs", payload)
   }
 }

src/core/plugins/auth/selectors.js

@@ -67,6 +67,10 @@ export const authorized = createSelector(
 export const isAuthorized = ( state, securities ) =>( { authSelectors } ) => {
   let authorized = authSelectors.authorized()
 
+  if(!List.isList(securities)) {
+    return null
+  }
+
   return !!securities.toJS().filter( ( security ) => {
       let isAuthorized = true
 
@@ -75,3 +79,8 @@ export const isAuthorized = ( state, securities ) =>( { authSelectors } ) => {
       }).indexOf(false) === -1
     }).length
 }
+
+export const getConfigs = createSelector(
+    state,
+    auth => auth.get( "configs" )
+)

src/core/plugins/samples/fn.js

@@ -47,7 +47,7 @@ export const sampleFromSchema = (schema, config={}) => {
     let obj = {}
     for (var name in props) {
       if ( !props[name].readOnly || includeReadOnly ) {
-        obj[name] = sampleFromSchema(props[name])
+        obj[name] = sampleFromSchema(props[name], { includeReadOnly: includeReadOnly })
       }
     }
 
@@ -55,7 +55,7 @@ export const sampleFromSchema = (schema, config={}) => {
       obj.additionalProp1 = {}
     } else if ( additionalProperties ) {
       let additionalProps = objectify(additionalProperties)
-      let additionalPropVal = sampleFromSchema(additionalProps)
+      let additionalPropVal = sampleFromSchema(additionalProps, { includeReadOnly: includeReadOnly })
 
       for (let i = 1; i < 4; i++) {
         obj["additionalProp" + i] = additionalPropVal
@@ -65,7 +65,7 @@ export const sampleFromSchema = (schema, config={}) => {
   }
 
   if(type === "array") {
-    return [ sampleFromSchema(items) ]
+    return [ sampleFromSchema(items, { includeReadOnly: includeReadOnly }) ]
   }
 
   if(schema["enum"]) {

src/core/plugins/spec/actions.js

@@ -1,4 +1,5 @@
 import YAML from "js-yaml"
+import parseUrl from "url-parse"
 import serializeError from "serialize-error"
 
 // Actions conform to FSA (flux-standard-actions)
@@ -76,7 +77,9 @@ export const parseToJson = (str) => ({specActions, specSelectors, errActions}) =
   return specActions.updateJsonSpec(json)
 }
 
-export const resolveSpec = (json, url) => ({specActions, specSelectors, errActions, fn: { fetch, resolve, AST }}) => {
+export const resolveSpec = (json, url) => ({specActions, specSelectors, errActions, fn: { fetch, resolve, AST }, getConfigs}) => {
+  const { modelPropertyMacro, parameterMacro } = getConfigs()
+
   if(typeof(json) === "undefined") {
     json = specSelectors.specJson()
   }
@@ -88,7 +91,7 @@ export const resolveSpec = (json, url) => ({specActions, specSelectors, errActio
 
   let specStr = specSelectors.specStr()
 
-  return resolve({fetch, spec: json, baseDoc: url})
+  return resolve({fetch, spec: json, baseDoc: url, modelPropertyMacro, parameterMacro })
   .then( ({spec, errors}) => {
     errActions.clear({
       type: "thrown"
@@ -185,12 +188,23 @@ export const logRequest = (req) => {
 // Actually fire the request via fn.execute
 // (For debugging) and ease of testing
 export const executeRequest = (req) => ({fn, specActions, specSelectors}) => {
-  let { pathName, method } = req
-  let parsedRequest = Object.assign({ contextUrl: specSelectors.url() }, req)
-  if ( pathName && method ) {
-    parsedRequest.operationId = method.toLowerCase() + "-" + pathName
+  let { pathName, method, operation } = req
+
+  let op = operation.toJS()
+
+  // if url is relative, parseUrl makes it absolute by inferring from `window.location`
+  req.contextUrl = parseUrl(specSelectors.url()).toString()
+
+
+  if(op && op.operationId) {
+    req.operationId = op.operationId
+  } else if(op && pathName && method) {
+    req.operationId = fn.opId(op, pathName, method)
   }
+
+  let parsedRequest = Object.assign({}, req)
   parsedRequest = fn.buildRequest(parsedRequest)
+
   specActions.setRequest(req.pathName, req.method, parsedRequest)
 
   return fn.execute(req)

src/core/plugins/spec/reducers.js

@@ -97,7 +97,11 @@ export default {
   },
 
   [UPDATE_OPERATION_VALUE]: (state, { payload: { path, value, key } }) => {
-    return state.setIn(["resolved", "paths", ...path, key], fromJS(value))
+    let operationPath = ["resolved", "paths", ...path]
+    if(!state.getIn(operationPath)) {
+      return state
+    }
+    return state.setIn([...operationPath, key], fromJS(value))
   },
 
   [CLEAR_RESPONSE]: (state, { payload: { path, method } } ) =>{

src/core/plugins/spec/selectors.js

@@ -1,4 +1,5 @@
 import { createSelector } from "reselect"
+import { sorters } from "core/utils"
 import { fromJS, Set, Map, List } from "immutable"
 
 const DEFAULT_TAG = "default"
@@ -198,13 +199,16 @@ export const operationsWithTags = createSelector(
   }
 )
 
-export const taggedOperations = createSelector(
-  state,
-  operationsWithTags,
-  (state, tagMap) => {
-    return tagMap.map((ops, tag) => Map({tagDetails: tagDetails(state, tag), operations: ops}))
-  }
-)
+export const taggedOperations = ( state ) =>( { getConfigs } ) => {
+  let { operationsSorter }= getConfigs()
+
+  return operationsWithTags(state).map((ops, tag) => {
+    let sortFn = typeof operationsSorter === "function" ? operationsSorter
+                                                        : sorters.operationsSorter[operationsSorter]
+    let operations = !sortFn ? ops : ops.sort(sortFn)
+
+    return Map({tagDetails: tagDetails(state, tag), operations: operations})})
+}
 
 export const responses = createSelector(
   state,
@@ -291,7 +295,11 @@ export function operationConsumes(state, pathMethod) {
 }
 
 export const operationScheme = ( state, path, method ) => {
-  return state.getIn(["scheme", path, method]) || state.getIn(["scheme", "_defaultScheme"]) || "http"
+  let url = state.get("url")
+  let matchResult = url.match(/^([a-z][a-z0-9+\-.]*):/)
+  let urlScheme = Array.isArray(matchResult) ? matchResult[1] : null
+
+  return state.getIn(["scheme", path, method]) || state.getIn(["scheme", "_defaultScheme"]) || urlScheme || ""
 }
 
 export const canExecuteScheme = ( state, path, method ) => {

src/core/plugins/swagger-js/index.js

@@ -7,7 +7,8 @@ module.exports = function({ configs }) {
       buildRequest: Swagger.buildRequest,
       execute: Swagger.execute,
       resolve: Swagger.resolve,
-      serializeRes: Swagger.serializeRes
+      serializeRes: Swagger.serializeRes,
+      opId: Swagger.helpers.opId
     }
   }
 }

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

@@ -74,7 +74,7 @@ const createClass = component => React.createClass({
 const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
     padding: "1em",
     "color": "#aaa"
-  }}>😱 <i>Could not render { name || name === "t" ? name : "this component" }, see the console.</i></div>
+  }}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
 
 const wrapRender = (component) => {
   const isStateless = component => !(component.prototype && component.prototype.isReactComponent)

src/core/presets/base.js

@@ -46,6 +46,8 @@ import Model from "core/components/model"
 import Models from "core/components/models"
 import TryItOutButton from "core/components/try-it-out-button"
 
+import BaseLayout from "core/components/layouts/base"
+
 import * as LayoutUtils from "core/components/layout-utils"
 import * as JsonSchemaComponents from "core/json-schema-components"
 
@@ -87,6 +89,7 @@ export default function() {
       model: Model,
       models: Models,
       TryItOutButton,
+      BaseLayout
     }
   }
 

src/core/system.js

@@ -2,7 +2,6 @@ import { createStore, applyMiddleware, bindActionCreators, compose } from "redux
 import Im, { fromJS, Map } from "immutable"
 import deepExtend from "deep-extend"
 import { combineReducers } from "redux-immutable"
-import assign from "object-assign"
 import serializeError from "serialize-error"
 import { NEW_THROWN_ERR } from "corePlugins/err/actions"
 import win from "core/window"
@@ -74,7 +73,7 @@ export default class Store {
     let dispatch = this.getStore().dispatch
     let getState = this.getStore().getState
 
-    this.boundSystem = assign({},
+    this.boundSystem = Object.assign({},
         this.getRootInjects(),
         this.getWrappedAndBoundActions(dispatch),
         this.getBoundSelectors(getState, this.getSystem),
@@ -92,7 +91,7 @@ export default class Store {
   }
 
   getRootInjects() {
-    return assign({
+    return Object.assign({
       getSystem: this.getSystem,
       getStore: this.getStore.bind(this),
       getComponents: this.getComponents.bind(this),
@@ -251,7 +250,7 @@ export default class Store {
 
   getMapStateToProps() {
     return () => {
-      let obj = assign({}, this.getSystem())
+      let obj = Object.assign({}, this.getSystem())
       return obj
     }
   }

src/core/utils.js

@@ -1,5 +1,4 @@
 import Im from "immutable"
-import assign from "object-assign"
 import shallowEqual from "shallowequal"
 
 import camelCase from "lodash/camelCase"
@@ -85,7 +84,7 @@ export function objReduce(obj, fn) {
   return Object.keys(obj).reduce((newObj, key) => {
     let res = fn(obj[key], key)
     if(res && typeof res === "object")
-      assign(newObj, res)
+      Object.assign(newObj, res)
     return newObj
   }, {})
 }
@@ -453,13 +452,13 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
 }
 
 const validateNumber = ( val ) => {
-  if ( !/^\d+(.?\d+)?$/.test(val)) {
+  if ( !/^-?\d+(.?\d+)?$/.test(val)) {
     return "Value must be a number"
   }
 }
 
 const validateInteger = ( val ) => {
-  if ( !/^\d+$/.test(val)) {
+  if ( !/^-?\d+$/.test(val)) {
     return "Value must be integer"
   }
 }
@@ -559,3 +558,34 @@ export const btoa = (str) => {
 
   return buffer.toString("base64")
 }
+
+export const sorters = {
+  operationsSorter: {
+    alpha: (a, b) => a.get("path").localeCompare(b.get("path")),
+    method: (a, b) => a.get("method").localeCompare(b.get("method"))
+  }
+}
+
+export const buildFormData = (data) => {
+  let formArr = []
+
+  for (let name in data) {
+    let val = data[name]
+    if (val !== undefined && val !== "") {
+      formArr.push([name, "=", encodeURIComponent(val).replace(/%20/g,"+")].join(""))
+    }
+  }
+  return formArr.join("&")
+}
+
+export const filterConfigs = (configs, allowed) => {
+    let i, filteredConfigs = {}
+
+    for (i in configs) {
+        if (allowed.indexOf(i) !== -1) {
+            filteredConfigs[i] = configs[i]
+        }
+    }
+
+    return filteredConfigs
+}

src/plugins/configs/index.js

@@ -1,10 +1,6 @@
 import YAML from "js-yaml"
 import yamlConfig from "../../../swagger-config.yaml"
 
-const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
-    "apisSorter", "operationsSorter", "supportedSubmitMethods", "highlightSizeThreshold", "dom_id",
-    "defaultModelRendering", "oauth2RedirectUrl", "showRequestHeaders" ]
-
 const parseYamlConfig = (yaml, system) => {
     try {
         return YAML.safeLoad(yaml)
@@ -58,16 +54,3 @@ export default function configPlugin (toolbox) {
         }
     }
 }
-
-
-export function filterConfigs (configs) {
-    let i, filteredConfigs = {}
-
-    for (i in configs) {
-        if (CONFIGS.indexOf(i) !== -1) {
-            filteredConfigs[i] = configs[i]
-        }
-    }
-
-    return filteredConfigs
-}

src/plugins/topbar/topbar.jsx

@@ -19,9 +19,10 @@ export default class Topbar extends React.Component {
     this.setState({url: value})
   }
 
-  downloadUrl = () => {
+  downloadUrl = (e) => {
     this.props.specActions.updateUrl(this.state.url)
     this.props.specActions.download(this.state.url)
+    e.preventDefault()
   }
 
   render() {
@@ -43,10 +44,10 @@ export default class Topbar extends React.Component {
                 <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
                 <span>swagger</span>
               </Link>
-              <div className="download-url-wrapper">
+              <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>
-              </div>
+              </form>
             </div>
           </div>
         </div>

src/standalone/index.js

@@ -2,11 +2,13 @@ import StandaloneLayout from "./layout"
 import "../style/main.scss"
 
 import TopbarPlugin from "plugins/topbar"
+import ConfigsPlugin from "plugins/configs"
 
 // the Standalone preset
 
 let preset = [
   TopbarPlugin,
+  ConfigsPlugin,
   () => {
     return {
       components: { StandaloneLayout }

src/standalone/layout.jsx

@@ -13,28 +13,16 @@ export default class StandaloneLayout extends React.Component {
   }
 
   render() {
-    let { specSelectors, specActions, getComponent } = this.props
+    let { getComponent, specSelectors } = this.props
 
-    let info = specSelectors.info()
-    let url = specSelectors.url()
-    let basePath = specSelectors.basePath()
-    let host = specSelectors.host()
-    let securityDefinitions = specSelectors.securityDefinitions()
-    let externalDocs = specSelectors.externalDocs()
-    let schemes = specSelectors.schemes()
-
-    let Info = getComponent("info")
-    let Operations = getComponent("operations", true)
-    let Models = getComponent("models", true)
-    let AuthorizeBtn = getComponent("authorizeBtn", true)
     let Container = getComponent("Container")
     let Row = getComponent("Row")
     let Col = getComponent("Col")
-    let Errors = getComponent("errors", true)
-    const Schemes = getComponent("schemes")
 
     const Topbar = getComponent("Topbar", true)
+    const BaseLayout = getComponent("BaseLayout", true)
     const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
+
     const loadingStatus = specSelectors.loadingStatus()
 
     return (
@@ -56,46 +44,12 @@ export default class StandaloneLayout extends React.Component {
             <h4 className="title">Failed to load config.</h4>
           </div>
         }
-        { loadingStatus === "success" &&
-          <div>
-              <Errors/>
-              <Row className="information-container">
-                <Col mobile={12}>
-                  { info.count() ? (
-                    <Info info={ info } url={ url } host={ host } basePath={ basePath } externalDocs={externalDocs} getComponent={getComponent}/>
-                  ) : null }
-                </Col>
-              </Row>
-              { schemes && schemes.size || securityDefinitions ? (
-              <div className="scheme-container">
-                <Col className="schemes wrapper" mobile={12}>
-                  { schemes && schemes.size ? (
-                    <Schemes schemes={ schemes } specActions={ specActions } />
-                  ) : null }
-                  { securityDefinitions ? (
-                    <AuthorizeBtn />
-                  ) : null }
-                </Col>
-              </div>
-            ) : null }
-
-              <Row>
-                <Col mobile={12} desktop={12} >
-                  <Operations/>
-                </Col>
-              </Row>
-              <Row>
-                <Col mobile={12} desktop={12} >
-                  <Models/>
-                </Col>
-              </Row>
-          </div> }
-
-          <Row>
-            <Col>
-              <OnlineValidatorBadge />
-            </Col>
-          </Row>
+        { !loadingStatus || loadingStatus === "success" && <BaseLayout/> }
+        <Row>
+          <Col>
+            <OnlineValidatorBadge />
+          </Col>
+        </Row>
       </Container>
     )
   }

src/style/_layout.scss

@@ -492,16 +492,28 @@ body
     margin: 0;
     padding: 10px;
 
+
+    word-wrap: break-word;
+    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
     white-space: pre-wrap;
 
+
     border-radius: 4px;
     background: #41444e;
 
+    overflow-wrap: break-word;
     @include text_code(#fff);
     span
     {
         color: #fff !important;
     }
+
+    .headerline
+    {
+        display: block;
+    }
 }
 
 .scheme-container

src/style/_topbar.scss

@@ -16,6 +16,8 @@
 
         display: flex;
 
+        max-width: 300px;
+
         text-decoration: none;
 
         flex: 1;
@@ -33,8 +35,11 @@
     {
         display: flex;
 
+        flex: 3;
+
         input[type=text]
         {
+            width: 100%;
             min-width: 350px;
             margin: 0;
 

swagger-ui-dist-package/.npmignore

@@ -0,0 +1,2 @@
+README.md
+deploy.sh

swagger-ui-dist-package/.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

swagger-ui-dist-package/README.md

@@ -0,0 +1,8 @@
+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'
+```
+
+For anything else, check the [Swagger-UI](https://github.com/swagger-api/swagger-ui) repository.

swagger-ui-dist-package/deploy.sh

@@ -0,0 +1,21 @@
+# Deploy `swagger-ui-dist` to npm.
+
+# Parameter Expansion: http://stackoverflow.com/questions/6393551/what-is-the-meaning-of-0-in-a-bash-script
+cd "${0%/*}"
+
+# Get UI version
+UI_VERSION=$(node -p "require('../package.json').version")
+
+# Replace our version placeholder with UI's version
+sed -i "s|\$\$VERSION|$UI_VERSION|g" package.json
+
+# Copy UI's dist files to our directory
+cp ../dist/* .
+
+if [ "$PUBLISH_DIST" = "true" ] || [ "$TRAVIS" = "true" ] ; then
+  npm publish .
+else
+  npm pack .
+fi
+
+find . -not -name .npmignore -not -name .npmrc -not -name deploy.sh -not -name index.js -not -name package.json -not -name README.md -not -name *.tgz -delete

swagger-ui-dist-package/index.js

@@ -0,0 +1,2 @@
+module.exports.SwaggerUIBundle = require('./swagger-ui-bundle.js')
+module.exports.SwaggerUIStandalonePreset = require('./swagger-ui-standalone-preset.js')

swagger-ui-dist-package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "swagger-ui-dist",
+  "version": "$$VERSION",
+  "main": "index.js",
+  "repository": "git@github.com:swagger-api/swagger-ui.git",
+  "contributors": [
+    "(in alphabetical order)",
+    "Anna Bodnia <anna.bodnia@gmail.com>",
+    "Buu Nguyen <buunguyen@gmail.com>",
+    "Josh Ponelat <jponelat@gmail.com>",
+    "Kyle Shockey <kyleshockey1@gmail.com>",
+    "Robert Barnwell <robert@robertismy.name>",
+    "Sahar Jafari <shr.jafari@gmail.com>"
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {},
+  "devDependencies": {}
+}

test/core/plugins/spec-reducer.js

@@ -0,0 +1,72 @@
+/* eslint-env mocha */
+import expect from "expect"
+import { fromJS } from "immutable"
+import reducer from "corePlugins/spec/reducers"
+
+describe("spec plugin - reducer", function(){
+
+  describe("update operation value", function() {
+    it("should update the operation at the specified key", () => {
+      const updateOperationValue = reducer["spec_update_operation_value"]
+
+      const state = fromJS({
+        resolved: {
+          "paths": {
+            "/pet": {
+              "post": {
+                "description": "my operation"
+              }
+            }
+          }
+        }
+      })
+
+      let result = updateOperationValue(state, {
+        payload: {
+          path: ["/pet", "post"],
+          value: "application/json",
+          key: "consumes_value"
+        }
+      })
+
+      let expectedResult = {
+        resolved: {
+          "paths": {
+            "/pet": {
+              "post": {
+                "description": "my operation",
+                "consumes_value": "application/json"
+              }
+            }
+          }
+        }
+      }
+
+      expect(result.toJS()).toEqual(expectedResult)
+    })
+
+    it("shouldn't throw an error if we try to update the consumes_value of a null operation", () => {
+      const updateOperationValue = reducer["spec_update_operation_value"]
+
+      const state = fromJS({
+        resolved: {
+          "paths": {
+            "/pet": {
+              "post": null
+            }
+          }
+        }
+      })
+
+      let result = updateOperationValue(state, {
+        payload: {
+          path: ["/pet", "post"],
+          value: "application/json",
+          key: "consumes_value"
+        }
+      })
+
+      expect(result.toJS()).toEqual(state.toJS())
+    })
+  })
+})

test/core/plugins/spec/selectors.js

@@ -1,7 +1,7 @@
 /* eslint-env mocha */
 import expect from "expect"
 import { fromJS } from "immutable"
-import { parameterValues, contentTypeValues } from "corePlugins/spec/selectors"
+import { parameterValues, contentTypeValues, operationScheme } from "corePlugins/spec/selectors"
 
 describe("spec plugin - selectors", function(){
 
@@ -92,4 +92,43 @@ describe("spec plugin - selectors", function(){
 
   })
 
+  describe("operationScheme", function(){
+
+    it("should return the correct scheme for a remote spec that doesn't specify a scheme", function(){
+      // Given
+      let state = fromJS({
+        url: "https://generator.swagger.io/api/swagger.json",
+        resolved: {
+          paths: {
+            "/one": {
+              get: {
+                "consumes_value": "one",
+                "produces_value": "two"
+              }
+            }
+          }
+        }
+      })
+
+      // When
+      let scheme = operationScheme(state, ["/one"], "get")
+      // Then
+      expect(scheme).toEqual("https")
+    })
+
+    // it("should be ok, if no operation found", function(){
+    //   // Given
+    //   let state = fromJS({ })
+    //
+    //   // When
+    //   let contentTypes = contentTypeValues(state, [ "/one", "get" ])
+    //   // Then
+    //   expect(contentTypes.toJS()).toEqual({
+    //     requestContentType: undefined,
+    //     responseContentType: undefined
+    //   })
+    // })
+
+  })
+
 })

webpack-dist.config.js

@@ -22,7 +22,10 @@ module.exports = require('./make-webpack-config.js')({
   },
 
   externals: function(context, request, cb) {
-    if(node_modules.indexOf(request) !== -1) {
+    // 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;
     }