v3.0.6

This reverts commit 08b3c38b8a.

.travis.yml

@@ -1,11 +1,15 @@
 language: node_js
 node_js:
 - '6.9'
+services:
+  - docker
 branches:
   only:
   - master
   - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
 before_deploy: "npm run build-core"
+env:
+  - DOCKER_IMAGE_NAME=swaggerapi/swagger-ui
 deploy:
   provider: npm
   email: apiteam@swagger.io
@@ -16,3 +20,24 @@ deploy:
     tags: true
     repo: swagger-api/swagger-ui
     node: '6.9'
+after_success:
+  - if [ $DOCKER_HUB_USERNAME ]; then 
+      docker login --email=$DOCKER_HUB_EMAIL --username=$DOCKER_HUB_USERNAME --password=$DOCKER_HUB_PASSWORD;
+
+      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_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,15 +2,27 @@ 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
 
 COPY nginx.conf /etc/nginx/
 
 # copy swagger files to the `/js` folder
-ADD ./public/* /usr/share/nginx/html/
 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.3              | 2017-03-19   | 2.0                        | [tag v3.0.3](https://github.com/swagger-api/swagger-ui/tree/v3.0.3) |
+3.0.6              | 2017-03-19   | 2.0                        | [tag v3.0.6](https://github.com/swagger-api/swagger-ui/tree/v3.0.6) |
 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) |
@@ -39,7 +39,7 @@ Will start nginx with swagger-ui on port 80.
 - Node 6.x
 - NPM 3.x
 
-If you just want to see your specs, open `public/index.html` in your browser directly from your filesystem.
+If you just want to see your specs, open `dist/index.html` in your browser directly from your filesystem.
 
 If you'd like to make modifications to the codebase, run the dev server with: `npm run dev`.
 
@@ -50,13 +50,42 @@ Swagger UI works in the latest versions of Chrome, Safari, Firefox, Edge and IE1
 
 To help with the migration, here are the currently known issues with 3.X. This list will update regularly, and will not include features that were not implemented in previous versions.
 
-- Currently, the only configuration options available are the `url` and `spec`.
+- Only part of the [parameters](#parameters) previously supported are available.
 - The JSON Form Editor is not implemented.
 - Shebang URL support for operations is missing.
 - Support for `collectionFormat` is partial.
 - l10n (translations) is not implemented.
 - 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:
+
+```javascript
+  const ui = SwaggerUIBundle({
+    url: "http://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIStandalonePreset
+    ],
+    plugins: [
+      SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout"
+  })
+```
+
+#### Parameters
+
+Parameter Name | Description
+--- | ---
+url | The url pointing to API definition (normally `swagger.json` or `swagger.yaml`).
+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.
+oauth2RedirectUrl | OAuth redirect URL
+
+
 
 ## CORS Support
 

composer.json

@@ -0,0 +1,40 @@
+{
+  "name": "swagger-api/swagger-ui",
+  "description": " Swagger UI is a collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.",
+  "keywords": [
+    "Swagger",
+    "OpenAPI",
+    "specification",
+    "documentation",
+    "API",
+    "UI"
+  ],
+  "homepage": "http://swagger.io",
+  "license": "Apache-2.0",
+  "authors": [
+    {
+      "name": "Anna Bodnia",
+      "email": "anna.bodnia@gmail.com"
+    },
+    {
+      "name": "Buu Nguyen",
+      "email": "buunguyen@gmail.com"
+    },
+    {
+      "name": "Josh Ponelat",
+      "email": "jponelat@gmail.com"
+    },
+    {
+      "name": "Kyle Shockey",
+      "email": "kyleshockey1@gmail.com"
+    },
+    {
+      "name": "Robert Barnwell",
+      "email": "robert@robertismy.name"
+    },
+    {
+      "name": "Sahar Jafari",
+      "email": "shr.jafari@gmail.com"
+    }    
+  ]
+}

dev-helpers/index.html

@@ -0,0 +1,95 @@
+<!-- HTML for dev server -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Swagger UI</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
+  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
+  <style>
+    html
+    {
+        box-sizing: border-box;
+        overflow: -moz-scrollbars-vertical;
+        overflow-y: scroll;
+    }
+    *,
+    *:before,
+    *:after
+    {
+        box-sizing: inherit;
+    }
+
+    body {
+      margin:0;
+      background: #fafafa;
+    }
+  </style>
+</head>
+
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
+  <defs>
+    <symbol viewBox="0 0 20 20" id="unlocked">
+          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
+    </symbol>
+
+    <symbol viewBox="0 0 20 20" id="locked">
+      <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
+    </symbol>
+
+    <symbol viewBox="0 0 20 20" id="close">
+      <path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
+    </symbol>
+
+    <symbol viewBox="0 0 20 20" id="large-arrow">
+      <path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
+    </symbol>
+
+    <symbol viewBox="0 0 20 20" id="large-arrow-down">
+      <path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
+    </symbol>
+
+
+    <symbol viewBox="0 0 24 24" id="jump-to">
+      <path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
+    </symbol>
+
+    <symbol viewBox="0 0 24 24" id="expand">
+      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+    </symbol>
+
+  </defs>
+</svg>
+
+<div id="swagger-ui"></div>
+
+<script src="./swagger-ui-bundle.js"> </script>
+<script src="./swagger-ui-standalone-preset.js"> </script>
+<script>
+window.onload = function() {
+  window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
+  window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
+  // Build a system
+  const ui = SwaggerUIBundle({
+    url: "http://petstore.swagger.io/v2/swagger.json",
+    dom_id: '#swagger-ui',
+    presets: [
+      SwaggerUIBundle.presets.apis,
+      SwaggerUIStandalonePreset
+    ],
+    plugins: [
+      SwaggerUIBundle.plugins.DownloadUrl
+    ],
+    layout: "StandaloneLayout"
+  })
+
+  window.ui = ui
+}
+</script>
+</body>
+
+</html>

dist/index.html

@@ -6,8 +6,8 @@
   <title>Swagger UI</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
-  <link rel="icon" type="image/png" href="../public/favicon-32x32.png" sizes="32x32" />
-  <link rel="icon" type="image/png" href="../public/favicon-16x16.png" sizes="16x16" />
+  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
   <style>
     html
     {
@@ -77,8 +77,7 @@ window.onload = function() {
     dom_id: '#swagger-ui',
     presets: [
       SwaggerUIBundle.presets.apis,
-      // yay ES6 modules ↘
-      Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
+      SwaggerUIStandalonePreset
     ],
     plugins: [
       SwaggerUIBundle.plugins.DownloadUrl
@@ -91,4 +90,4 @@ window.onload = function() {
 </script>
 </body>
 
-</html>
+</html>

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;;;;;;;;;;;;;;;;;;;;;;;;;;AAsdA;AAkoJA;AAyiCA;;;;;AAskCA;AAq7IA;AAo7FA;AA0wGA;AAgmEA;AA+9CA;AA0gDA;AA0rCA;AAm6DA;AAm4IA;;;;;;;;;;;;;;AAmtFA;AAyoIA;AAiuJA;AAglHA;AA+mGA;AAmkEA;AA42DA;AAwxDA;AA69BA;;;;;;AAixEA;AAo2FA;;;;;AA23CA;AA2qFA;AAo2CA;AAihCA;AAomDA;AAiuEA;AAkjGA;;;;;;;;;AAkpBA;AA2zIA;AAg4DA;AAywDA;;;;;;AAyzBA;AA8iHA;AAipGA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-bundle.js","sources":["webpack:///swagger-ui-bundle.js"],"mappings":"AAAA;AAu/FA;AA6+FA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0dA;AAkoJA;AAyiCA;;;;;AAskCA;AA66IA;AA20FA;AAg3GA;AAonEA;AA+9CA;AA6/CA;AA+rCA;AA+3EA;AA68HA;;;;;;;;;;;;;;AA8tGA;AAyoIA;AAiuJA;AA8kHA;AAonGA;AAukEA;AA02DA;AAyxDA;AAw6BA;;;;;;AAs0EA;AA24FA;;;;;AAy3CA;AA2qFA;AAw2CA;AA2kCA;AAq/CA;AAwwEA;AA48FA;;;;;;;;;AA81BA;AA2zIA;AAi4DA;AAqlDA;;;;;;AA4kCA;AA8iHA;AAipGA","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;;;;;AAqTA;AAyiGA","sourceRoot":""}
+{"version":3,"file":"swagger-ui-standalone-preset.js","sources":["webpack:///swagger-ui-standalone-preset.js"],"mappings":"AAAA;;;;;AA6PA;AAyiGA","sourceRoot":""}

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;AAsoGA;AAy4HA;AA67FA;AA4mCA;AAs+BA;AAsiCA;AAm5BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAuwCA;AAoyHA;AAmxHA;AAo8FA;AAooCA;AAghCA;AA0gCA;AA06BA","sourceRoot":""}

docker-run.sh

@@ -0,0 +1,45 @@
+#! /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
+  sed -i "s|\(url: url,.*\)|\1\n        validatorUrl: \"${VALIDATOR_URL}\",|g" $INDEX_FILE
+fi
+
+exec nginx -g 'daemon off;'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "main": "dist/swagger-ui.js",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -22,7 +22,7 @@
     "dev": "npm-run-all --parallel hot-server watch  open-localhost",
     "watch": "webpack --config webpack-watch.config.js --watch --progress",
     "open-localhost": "node -e 'require(\"open\")(\"http://localhost:3200\")'",
-    "hot-server": "webpack-dev-server --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress --content-base dist/",
+    "hot-server": "webpack-dev-server --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress --content-base dev-helpers/",
     "deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
     "deps-size": "webpack -p --config webpack.check.js --json | webpack-bundle-size-analyzer >| $npm_package_config_deps_check_dir/sizes.txt",
     "deps-check": "npm run deps-license && npm run deps-size",
@@ -37,14 +37,11 @@
   "dependencies": {
     "babel-polyfill": "^6.23.0",
     "brace": "0.7.0",
-    "btoa": "^1.1.2",
-    "debounce": "1.0.0",
     "deep-extend": "0.4.1",
     "expect": "1.20.2",
     "getbase": "^2.8.2",
     "immutable": "^3.x.x",
     "js-yaml": "^3.5.5",
-    "jsonschema": "^1.1.0",
     "less": "2.7.1",
     "lodash": "4.17.2",
     "matcher": "^0.1.2",
@@ -70,12 +67,12 @@
     "reselect": "2.5.3",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "^3.0.3",
+    "swagger-client": "^3.0.5",
+    "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-worker": "^2.1.0"
+    "yaml-js": "^0.1.3"
   },
   "devDependencies": {
     "autoprefixer": "6.6.1",
@@ -115,6 +112,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",

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/oauth2.jsx

@@ -10,14 +10,13 @@ export default class Oauth2 extends React.Component {
   static propTypes = {
     name: PropTypes.string,
     authorized: PropTypes.object,
-    configs: PropTypes.object,
     getComponent: PropTypes.func.isRequired,
     schema: PropTypes.object.isRequired,
     authSelectors: PropTypes.object.isRequired,
     authActions: PropTypes.object.isRequired,
     errSelectors: PropTypes.object.isRequired,
     errActions: PropTypes.object.isRequired,
-    getConfigs: PropTypes.function
+    getConfigs: PropTypes.any
   }
 
   constructor(props, context) {
@@ -146,7 +145,7 @@ export default class Oauth2 extends React.Component {
         }
 
         {
-          ( flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) &&
+          ( flow === APPLICATION || flow === IMPLICIT || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) &&
           ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
             <label htmlFor="client_id">client_id:</label>
             <Col tablet={10} desktop={10}>
@@ -160,7 +159,7 @@ export default class Oauth2 extends React.Component {
         }
 
         {
-          ( flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) && <Row>
+          ( flow === APPLICATION || flow === ACCESS_CODE || ( flow === PASSWORD && this.state.passwordType!== "none") ) && <Row>
             <label htmlFor="client_secret">client_secret:</label>
             <Col tablet={10} desktop={10}>
               {
@@ -173,7 +172,7 @@ export default class Oauth2 extends React.Component {
         }
 
         {
-          !isAuthorized && flow !== PASSWORD && scopes && scopes.size ? <div className="scopes">
+          !isAuthorized && scopes && scopes.size ? <div className="scopes">
             <h2>Scopes:</h2>
             { scopes.map((description, name) => {
               return (
@@ -206,7 +205,7 @@ export default class Oauth2 extends React.Component {
           } )
         }
         <div className="auth-btn-wrapper">
-        { isValid && flow !== APPLICATION &&
+        { isValid &&
           ( isAuthorized ? <Button className="btn modal-btn auth authorize" onClick={ this.logout }>Logout</Button>
         : <Button className="btn modal-btn auth authorize" onClick={ this.authorize }>Authorize</Button>
           )

src/core/components/curl.jsx

@@ -19,7 +19,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" }} defaultValue={curl}></textarea>
+          <textarea onFocus={this.handleFocus} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
         </div>
       </div>
     )

src/core/components/errors.jsx

@@ -68,7 +68,7 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
             { error.get("message") }
           </span>
           <div>
-            { errorLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
+            { errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
           </div>
         </div>
       }
@@ -77,11 +77,23 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
   }
 
 const SpecErrorItem = ( { error, jumpToLine } ) => {
+  let locationMessage = null
+
+  if(error.get("path")) {
+    if(List.isList(error.get("path"))) {
+      locationMessage = <small>at { error.get("path").join(".") }</small>
+    } else {
+      locationMessage = <small>at { error.get("path") }</small>
+    }
+  } else if(error.get("line") && !jumpToLine) {
+    locationMessage = <small>on line { error.get("line") }</small>
+  }
+
   return (
     <div className="error-wrapper">
       { !error ? null :
         <div>
-          <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }{ error.get("path") ? <small> at {List.isList(error.get("path")) ? error.get("path").join(".") : error.get("path")}</small>: null }</h4>
+          <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
           <span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
           <div>
             { jumpToLine ? (
@@ -106,6 +118,10 @@ ThrownErrorItem.propTypes = {
   jumpToLine: PropTypes.func
 }
 
+ThrownErrorItem.defaultProps = {
+  jumpToLine: null
+}
+
 SpecErrorItem.propTypes = {
   error: PropTypes.object.isRequired,
   jumpToLine: PropTypes.func

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/model.jsx

@@ -4,6 +4,8 @@ import { List } from "immutable"
 const braceOpen = "{"
 const braceClose = "}"
 
+const propStyle = { color: "#999", fontStyle: "italic" }
+
 const EnumModel = ({ value }) => {
   let collapsedContent = <span>Array [ { value.count() } ]</span>
   return <span className="prop-enum">
@@ -129,7 +131,6 @@ class Primitive extends Component {
     let enumArray = schema.get("enum")
     let properties = schema.filter( ( v, key) => ["enum", "type", "format", "$$ref"].indexOf(key) === -1 )
     let style = required ? { fontWeight: "bold" } : {}
-    let propStyle = { color: "#999", fontStyle: "italic" }
 
     return <span className="prop">
       <span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
@@ -167,12 +168,23 @@ class ArrayModel extends Component {
   render(){
     let { required, schema, depth, expandDepth } = this.props
     let items = schema.get("items")
+    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
 
-    return <span>
+    return <span className="model">
+      <span className="model-title">
+        <span className="model-title__text">{ schema.get("title") }</span>
+      </span>
       <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
           <span><Model { ...this.props } schema={ items } required={ false }/></span>
         ]
+        {
+          properties.size ? <span>
+              { properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
+                <br />{ `${key}:`}{ String(v) }</span>)
+              }<br /></span>
+            : null
+        }
       </Collapse>
       { required && <span style={{ color: "red" }}>*</span>}
     </span>

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

@@ -13,7 +13,7 @@ export default class OnlineValidatorBadge extends React.Component {
         let { validatorUrl } = getConfigs()
         this.state = {
             url: specSelectors.url(),
-            validatorUrl: validatorUrl || "https://online.swagger.io/validator"
+            validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         }
     }
 
@@ -23,7 +23,7 @@ export default class OnlineValidatorBadge extends React.Component {
 
         this.setState({
             url: specSelectors.url(),
-            validatorUrl: validatorUrl || "https://online.swagger.io/validator"
+            validatorUrl: validatorUrl === undefined ? "https://online.swagger.io/validator" : validatorUrl
         })
     }
 
@@ -33,14 +33,72 @@ export default class OnlineValidatorBadge extends React.Component {
 
         if ( typeof spec === "object" && Object.keys(spec).length) return null
 
-        if (!this.state.url) {
+        if (!this.state.url || !this.state.validatorUrl || this.state.url.indexOf("localhost") >= 0
+                            || this.state.url.indexOf("127.0.0.1") >= 0) {
           return null
         }
 
         return (<span style={{ float: "right"}}>
                 <a target="_blank" href={`${ this.state.validatorUrl }/debug?url=${ this.state.url }`}>
-                    <img alt="Online validator badge" src={`${ this.state.validatorUrl }?url=${ this.state.url }`} />
+                    <ValidatorImage src={`${ this.state.validatorUrl }?url=${ this.state.url }`} alt="Online validator badge"/>
                 </a>
             </span>)
     }
 }
+
+
+class ValidatorImage extends React.Component {
+  static propTypes = {
+    src: PropTypes.string,
+    alt: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      loaded: false,
+      error: false
+    }
+  }
+
+  componentDidMount() {
+    const img = new Image()
+    img.onload = () => {
+      this.setState({
+        loaded: true
+      })
+    }
+    img.onerror = () => {
+      this.setState({
+        error: true
+      })
+    }
+    img.src = this.props.src
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.src !== this.props.src) {
+      const img = new Image()
+      img.onload = () => {
+        this.setState({
+          loaded: true
+        })
+      }
+      img.onerror = () => {
+        this.setState({
+          error: true
+        })
+      }
+      img.src = nextProps.src
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <img alt={"Error"} />
+    } else if (!this.state.loaded) {
+      return <img alt= {"Loading..."} />
+    }
+    return <img src={this.props.src} alt={this.props.alt} />
+  }
+}

src/core/components/operation.jsx

@@ -202,11 +202,12 @@ export default class Operation extends React.Component {
                 pathMethod={ [path, method] }
               />
 
-              {!tryItOutEnabled || !allowTryItOut ? null : schemes && schemes.size ? <Schemes schemes={ schemes }
-                path={ path }
-                method={ method }
-                specActions={ specActions }/>
-              : null
+              {!tryItOutEnabled || !allowTryItOut ? null : schemes && schemes.size ? <div className="opblock-schemes">
+                    <Schemes schemes={ schemes }
+                             path={ path }
+                             method={ method }
+                             specActions={ specActions }/>
+                  </div> : null
               }
 
             <div className={(!tryItOutEnabled || !response || !allowTryItOut) ? "execute-wrapper" : "btn-group"}>

src/core/components/response.jsx

@@ -5,9 +5,17 @@ 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)
+      }
       return (<div key={ key }>
         <h5>{ key }</h5>
-        <HighlightCode className="example" value={ example } />
+        <HighlightCode className="example" value={ exampleValue } />
       </div>)
     }).toArray()
   }

src/core/components/schemes.jsx

@@ -31,7 +31,7 @@ export default class Schemes extends React.Component {
 
     return (
       <label htmlFor="schemes">
-        <span>Schemes</span>
+        <span className="schemes-title">Schemes</span>
         <select onChange={ this.onChange }>
           { schemes.valueSeq().map(
             ( scheme ) => <option value={ scheme } key={ scheme }>{ scheme }</option>

src/core/curlify.js

@@ -4,7 +4,7 @@ export default function curl( request ){
   let headers = request.get("headers")
   curlified.push( "curl" )
   curlified.push( "-X", request.get("method") )
-  curlified.push( request.get("url") )
+  curlified.push( `"${request.get("url")}"`)
 
   if ( headers && headers.size ) {
     for( let p of request.get("headers").entries() ){

src/core/index.js

@@ -13,9 +13,9 @@ module.exports = function SwaggerUI(opts) {
     dom_id: null,
     spec: {},
     url: "",
-    layout: "Layout",
+    layout: "BaseLayout",
+    validatorUrl: "https://online.swagger.io/validator",
     configs: {
-      validatorUrl: "https://online.swagger.io/validator"
     },
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
@@ -68,22 +68,24 @@ module.exports = function SwaggerUI(opts) {
   var system = store.getSystem()
   let queryConfig = parseSeach()
 
-  const downloadSpec = () => {
+  const downloadSpec = (fetchedConfig) => {
     if(typeof constructorConfig !== "object") {
       return system
     }
 
     let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
-    let mergedConfig = deepExtend({}, constructorConfig, localConfig, queryConfig)
+    let mergedConfig = deepExtend({}, constructorConfig, localConfig, fetchedConfig || {}, queryConfig)
     store.setConfigs(filterConfigs(mergedConfig))
 
-    if(!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {
-      system.specActions.updateUrl("")
-      system.specActions.updateLoadingStatus("success")
-      system.specActions.updateSpec(JSON.stringify(mergedConfig.spec))
-    } else if(system.specActions.download && mergedConfig.url) {
-      system.specActions.updateUrl(mergedConfig.url)
-      system.specActions.download(mergedConfig.url)
+    if (fetchedConfig !== null) {
+      if (!queryConfig.url && typeof mergedConfig.spec === "object" && Object.keys(mergedConfig.spec).length) {
+        system.specActions.updateUrl("")
+        system.specActions.updateLoadingStatus("success")
+        system.specActions.updateSpec(JSON.stringify(mergedConfig.spec))
+      } else if (system.specActions.download && mergedConfig.url) {
+        system.specActions.updateUrl(mergedConfig.url)
+        system.specActions.download(mergedConfig.url)
+      }
     }
 
     if(mergedConfig.dom_id) {
@@ -95,7 +97,9 @@ module.exports = function SwaggerUI(opts) {
     return system
   }
 
-  if (!system.specActions.getConfigByUrl || (system.specActions.getConfigByUrl && !system.specActions.getConfigByUrl(downloadSpec))) {
+  let configUrl = queryConfig.config || constructorConfig.configUrl
+
+  if (!configUrl || !system.specActions.getConfigByUrl || system.specActions.getConfigByUrl && !system.specActions.getConfigByUrl(configUrl, downloadSpec)) {
     return downloadSpec()
   }
 

src/core/oauth2-authorize.js

@@ -14,6 +14,11 @@ export default function authorize ( auth, authActions, errActions, configs ) {
     return
   }
 
+  if (flow === "application") {
+    authActions.authorizeOauth2Application(auth)
+    return
+  }
+
   // todo move to parser
   if ( !redirectUrl ) {
     errActions.newAuthErr( {

src/core/plugins/auth/actions.js

@@ -1,5 +1,5 @@
 import win from "core/window"
-import btoa from "btoa"
+import { btoa } from "core/utils"
 
 export const SHOW_AUTH_POPUP = "show_popup"
 export const AUTHORIZE = "authorize"
@@ -8,6 +8,8 @@ export const PRE_AUTHORIZE_OAUTH2 = "pre_authorize_oauth2"
 export const AUTHORIZE_OAUTH2 = "authorize_oauth2"
 export const VALIDATE = "validate"
 
+const scopeSeparator = " "
+
 export function showDefinitions(payload) {
   return {
     type: SHOW_AUTH_POPUP,
@@ -77,7 +79,8 @@ export const authorizePassword = ( auth ) => ( { fn, authActions, errActions } )
     query: {
       grant_type: "password",
       username,
-      password
+      password,
+      scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
     }
   }
 
@@ -116,3 +119,35 @@ export const authorizePassword = ( auth ) => ( { fn, authActions, errActions } )
     })
     .catch(err => { errActions.newAuthErr( err ) })
 }
+
+export const authorizeOauth2Application = ( auth ) => ( { fn, authActions, errActions } ) => {
+  let { schema, scopes, name, clientId, clientSecret } = auth
+
+  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))
+  })
+  .then(function (response) {
+    if ( !response.ok ) {
+      errActions.newAuthErr( {
+        authId: name,
+        level: "error",
+        source: "auth",
+        message: response.statusText
+      } )
+      return
+    } else {
+      response.json()
+      .then(function (json){
+        authActions.authorizeOauth2({ auth, token: json})
+      })
+    }
+  })
+  .catch(err => { errActions.newAuthErr( err ) })
+}

src/core/plugins/auth/reducers.js

@@ -1,5 +1,5 @@
 import { fromJS, Map } from "immutable"
-import btoa from "btoa"
+import { btoa } from "core/utils"
 
 import {
   SHOW_AUTH_POPUP,

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
 

src/core/plugins/download-url.js

@@ -14,8 +14,9 @@ export default function downloadUrlPlugin (toolbox) {
       fetch({
         url,
         loadSpec: true,
+        credentials: "same-origin",
         headers: {
-          "Accept": "application/json"
+          "Accept": "application/json,*/*"
         }
       }).then(next,next)
 

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)
@@ -186,7 +187,11 @@ export const logRequest = (req) => {
 // (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 url is relative, parseUrl makes it absolute by inferring from `window.location`
+  req.contextUrl = parseUrl(specSelectors.url()).toString()
+
+  let parsedRequest = Object.assign({}, req)
   if ( pathName && method ) {
     parsedRequest.operationId = method.toLowerCase() + "-" + pathName
   }

src/core/plugins/spec/selectors.js

@@ -291,7 +291,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 || "http"
 }
 
 export const canExecuteScheme = ( state, path, method ) => {

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/utils.js

@@ -453,13 +453,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"
   }
 }
@@ -547,3 +547,15 @@ export const parseSeach = () => {
 
   return map
 }
+
+export const btoa = (str) => {
+  let buffer
+
+  if (str instanceof Buffer) {
+    buffer = str
+  } else {
+    buffer = new Buffer(str.toString(), "utf-8")
+  }
+
+  return buffer.toString("base64")
+}

src/plugins/configs/index.js

@@ -1,5 +1,4 @@
 import YAML from "js-yaml"
-import { parseSeach } from "core/utils"
 import yamlConfig from "../../../swagger-config.yaml"
 
 const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
@@ -27,9 +26,7 @@ export default function configPlugin (toolbox) {
             return fetch(url)
         },
 
-        getConfigByUrl: (callback)=> ({ specActions }) => {
-            let config = parseSeach()
-            let configUrl = config.config
+        getConfigByUrl: (configUrl, cb)=> ({ specActions }) => {
             if (configUrl) {
                 return specActions.downloadConfig(configUrl).then(next, next)
             }
@@ -37,9 +34,12 @@ export default function configPlugin (toolbox) {
             function next(res) {
                 if (res instanceof Error || res.status >= 400) {
                     specActions.updateLoadingStatus("failedConfig")
+                    specActions.updateLoadingStatus("failedConfig")
+                    specActions.updateUrl("")
                     console.error(res.statusText + " " + configUrl)
+                    cb(null)
                 } else {
-                    callback(parseYamlConfig(res.text))
+                    cb(parseYamlConfig(res.text))
                 }
             }
         }

src/standalone/index.js

@@ -14,4 +14,4 @@ let preset = [
   }
 ]
 
-export default preset
+module.exports = preset

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,56 +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 }
-
-            { !schemes && securityDefinitions ? (
-              <div className="scheme-container">
-                <Col className="schemes wrapper" mobile={12}>
-                  { 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/_errors.scss

@@ -24,6 +24,11 @@
 
             @include text_code();
         }
+
+        small
+        {
+          color: #666;
+        }
     }
 
     hgroup

src/style/_layout.scss

@@ -307,6 +307,16 @@ body
 
         @include method($_color-disabled);
     }
+
+    .opblock-schemes
+    {
+      padding: 8px 20px;
+
+      .schemes-title
+      {
+        padding: 0 10px 0 0;
+      }
+    }
 }
 
 

test/core/curlify.js

@@ -21,7 +21,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://example.com -H  \"Accept: application/json\" -H  \"content-type: application/json\" -d {\"id\":0,\"name\":\"doggie\",\"status\":\"available\"}")
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"Accept: application/json\" -H  \"content-type: application/json\" -d {\"id\":0,\"name\":\"doggie\",\"status\":\"available\"}")
     })
 
     it("does not change the case of header in curl", function() {
@@ -35,7 +35,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://example.com -H  \"conTenT Type: application/Moar\"")
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"conTenT Type: application/Moar\"")
     })
 
     it("prints a curl statement with an array of query params", function() {
@@ -46,7 +46,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X GET http://swaggerhub.com/v1/one?name=john|smith")
+        expect(curlified).toEqual("curl -X GET \"http://swaggerhub.com/v1/one?name=john|smith\"")
     })
 
     it("prints a curl statement with an array of query params and auth", function() {
@@ -60,7 +60,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X GET http://swaggerhub.com/v1/one?name=john|smith -H  \"authorization: Basic Zm9vOmJhcg==\"")
+        expect(curlified).toEqual("curl -X GET \"http://swaggerhub.com/v1/one?name=john|smith\" -H  \"authorization: Basic Zm9vOmJhcg==\"")
     })
 
     it("prints a curl statement with html", function() {
@@ -77,7 +77,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X GET http://swaggerhub.com/v1/one?name=john|smith -H  \"accept: application/json\" -d {\"description\":\"<b>Test</b>\"}")
+        expect(curlified).toEqual("curl -X GET \"http://swaggerhub.com/v1/one?name=john|smith\" -H  \"accept: application/json\" -d {\"description\":\"<b>Test</b>\"}")
     })
 
     it("handles post body with html", function() {
@@ -94,7 +94,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://swaggerhub.com/v1/one?name=john|smith -H  \"accept: application/json\" -d {\"description\":\"<b>Test</b>\"}")
+        expect(curlified).toEqual("curl -X POST \"http://swaggerhub.com/v1/one?name=john|smith\" -H  \"accept: application/json\" -d {\"description\":\"<b>Test</b>\"}")
     })
 
     it("handles post body with special chars", function() {
@@ -109,7 +109,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://swaggerhub.com/v1/one?name=john|smith -d {\"description\":\"@prefix nif:<http://persistence.uni-leipzig.org/nlp2rdf/ontologies/nif-core#> .@prefix itsrdf: <http://www.w3.org/2005/11/its/rdf#> .\"}")
+        expect(curlified).toEqual("curl -X POST \"http://swaggerhub.com/v1/one?name=john|smith\" -d {\"description\":\"@prefix nif:<http://persistence.uni-leipzig.org/nlp2rdf/ontologies/nif-core#> .@prefix itsrdf: <http://www.w3.org/2005/11/its/rdf#> .\"}")
     })
 
     it("handles delete form with parameters", function() {
@@ -123,7 +123,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X DELETE http://example.com -H  \"accept: application/x-www-form-urlencoded\"")
+        expect(curlified).toEqual("curl -X DELETE \"http://example.com\" -H  \"accept: application/x-www-form-urlencoded\"")
     })
 
     it("should print a curl with formData", function() {
@@ -136,7 +136,7 @@ describe("curlify", function() {
 
         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("prints a curl post statement from an object", function() {
@@ -153,7 +153,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://example.com -H  \"accept: application/json\" -d {\"id\":10101}")
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"accept: application/json\" -d {\"id\":10101}")
     })
 
     it("prints a curl post statement from a string containing a single quote", function() {
@@ -168,7 +168,7 @@ describe("curlify", function() {
 
         let curlified = curl(Im.fromJS(req))
 
-        expect(curlified).toEqual("curl -X POST http://example.com -H  \"accept: application/json\" -d \"{\\\"id\\\":\\\"foo'bar\\\"}\"")
+        expect(curlified).toEqual("curl -X POST \"http://example.com\" -H  \"accept: application/json\" -d \"{\\\"id\\\":\\\"foo'bar\\\"}\"")
     })
 
 })

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-hot-dev-server.config.js

@@ -9,11 +9,11 @@ module.exports = require("./make-webpack-config")({
   },
 	devtool: "eval",
   entry: {
-    'SwaggerUIBundle': [
+    'swagger-ui-bundle': [
       'babel-polyfill',
       './src/core/index.js'
     ],
-    'SwaggerUIStandalonePreset': [
+    'swagger-ui-standalone-preset': [
       './src/standalone/index.js'
     ]
   },
@@ -27,8 +27,8 @@ module.exports = require("./make-webpack-config")({
   },
   devServer: {
     port: 3200,
-    path: path.join(__dirname, 'dist'),
-    publicPath: "/dist",
+    path: path.join(__dirname, 'dev-helpers'),
+    publicPath: "/",
     noInfo: true,
     colors: true,
     hot: true,