Merge branch 'master' into bug/3100-sub-objects-as-required

src/core/components/info.jsx

@@ -15,7 +15,7 @@ class Path extends React.Component {
 
     return (
       <pre className="base-url">
-        [ Base url: {host}{basePath}]
+        [ Base URL: {host}{basePath} ]
       </pre>
     )
   }

src/core/components/layout-utils.jsx

@@ -129,7 +129,8 @@ export class Select extends React.Component {
     value: PropTypes.any,
     onChange: PropTypes.func,
     multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool
+    allowEmptyValue: PropTypes.bool,
+    className: PropTypes.string
   }
 
   static defaultProps = {
@@ -142,7 +143,7 @@ export class Select extends React.Component {
 
     let value
 
-    if (props.value !== undefined) {
+    if (props.value) {
       value = props.value
     } else {
       value = props.multiple ? [""] : ""
@@ -178,7 +179,7 @@ export class Select extends React.Component {
     let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
 
     return (
-      <select multiple={ multiple } value={ value } onChange={ this.onChange } >
+      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
         { allowEmptyValue ? <option value="">--</option> : null }
         {
           allowedValues.map(function (item, key) {

src/core/components/models.jsx

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

src/core/components/schemes.jsx

@@ -19,8 +19,9 @@ export default class Schemes extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
-      //fire 'change' event if our selected scheme is no longer an option
+    if ( !this.props.operationScheme || !nextProps.schemes.has(this.props.operationScheme) ) {
+      // if we don't have a selected operationScheme or if our selected scheme is no longer an option,
+      // then fire 'change' event and select the first scheme in the list of options
       this.setScheme(nextProps.schemes.first())
     }
   }

src/core/json-schema-components.js

@@ -57,7 +57,8 @@ export class JsonSchema_string extends Component {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select allowedValues={ enumValue }
+      return (<Select className={ errors.length ? "invalid" : ""}
+                      allowedValues={ enumValue }
                       value={ value }
                       allowEmptyValue={ !required }
                       onChange={ this.onEnumChange }/>)
@@ -121,6 +122,7 @@ export class JsonSchema_array extends PureComponent {
   render() {
     let { getComponent, required, schema, fn } = this.props
 
+    let errors = schema.errors || []
     let itemSchema = fn.inferSchema(schema.items)
 
     const JsonSchemaForm = getComponent("JsonSchemaForm")
@@ -131,19 +133,17 @@ export class JsonSchema_array extends PureComponent {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select multiple={ true }
+      return (<Select className={ errors.length ? "invalid" : ""}
+                     multiple={ true }
                      value={ value }
                      allowedValues={ enumValue }
                      allowEmptyValue={ !required }
                      onChange={ this.onEnumChange }/>)
     }
 
-    let errors = schema.errors || []
-
     return (
       <div>
-        { !value || value.count() < 1 ?
-          (errors.length ? <span style={{ color: "red", fortWeight: "bold" }}>{ errors[0] }</span> : null) :
+        { !value || value.count() < 1 ? null : 
           value.map( (item,i) => {
             let schema = Object.assign({}, itemSchema)
             if ( errors.length ) {
@@ -153,12 +153,12 @@ export class JsonSchema_array extends PureComponent {
           return (
             <div key={i} className="json-schema-form-item">
               <JsonSchemaForm fn={fn} getComponent={getComponent} value={item} onChange={(val) => this.onItemChange(val, i)} schema={schema} />
-              <Button className="json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
+              <Button className="btn btn-sm json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
             </div>
             )
           }).toArray()
         }
-        <Button className="json-schema-form-item-add" onClick={this.addItem}> Add item </Button>
+        <Button className={`btn btn-sm json-schema-form-item-add ${errors.length ? "invalid" : null}`} onClick={this.addItem}> Add item </Button>
       </div>
     )
   }
@@ -170,12 +170,14 @@ export class JsonSchema_boolean extends Component {
 
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, required, value } = this.props
+    let { getComponent, value, schema } = this.props
+    let errors = schema.errors || []
     const Select = getComponent("Select")
 
-    return (<Select value={ String(value) }
+    return (<Select className={ errors.length ? "invalid" : ""}
+                    value={ String(value) }
                     allowedValues={ fromJS(["true", "false"]) }
-                    allowEmptyValue={ !required }
+                    allowEmptyValue={true}
                     onChange={ this.onEnumChange }/>)
   }
 }

src/core/path-translator.js

@@ -1,67 +0,0 @@
-import get from "lodash/get"
-
-export function transformPathToArray(property, jsSpec) {
-  if(property.slice(0,9) === "instance.") {
-    var str = property.slice(9)
-  } else { // eslint-disable-next-line no-redeclare
-    var str = property
-  }
-
-  var pathArr = []
-
-  str
-    .split(".")
-    .map(item => {
-      // "key[0]" becomes ["key", "0"]
-      if(item.includes("[")) {
-        let index = parseInt(item.match(/\[(.*)\]/)[1])
-        let keyName = item.slice(0, item.indexOf("["))
-        return [keyName, index.toString()]
-      } else {
-        return item
-      }
-    })
-    .reduce(function(a, b) {
-      // flatten!
-      return a.concat(b)
-    }, [])
-    .concat([""]) // add an empty item into the array, so we don't get stuck with something in our buffer below
-    .reduce((buffer, curr) => {
-      let obj = pathArr.length ? get(jsSpec, pathArr) : jsSpec
-
-      if(get(obj, makeAccessArray(buffer, curr))) {
-        if(buffer.length) {
-          pathArr.push(buffer)
-        }
-        if(curr.length) {
-          pathArr.push(curr)
-        }
-        return ""
-      } else {
-        // attach key to buffer
-        return `${buffer}${buffer.length ? "." : ""}${curr}`
-      }
-    }, "")
-
-  if(typeof get(jsSpec, pathArr) !== "undefined") {
-    return pathArr
-  } else {
-    // if our path is not correct (there is no value at the path),
-    // return null
-    return null
-  }
-}
-
-function makeAccessArray(buffer, curr) {
-  let arr = []
-
-  if(buffer.length) {
-    arr.push(buffer)
-  }
-
-  if(curr.length) {
-    arr.push(curr)
-  }
-
-  return arr
-}

src/core/plugins/auth/actions.js

@@ -73,7 +73,7 @@ export const authorizePassword = ( auth ) => ( { authActions } ) => {
   let { schema, name, username, password, passwordType, clientId, clientSecret } = auth
   let form = {
     grant_type: "password",
-    scopes: encodeURIComponent(auth.scopes.join(scopeSeparator))
+    scope: encodeURIComponent(auth.scopes.join(scopeSeparator))
   }
   let query = {}
   let headers = {}

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

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import SplitPane from "react-split-pane"
-import "./split-pane-mode.less"
 
 const MODE_KEY = ["split-pane-mode"]
 const MODE_LEFT = "left"

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

@@ -1,5 +0,0 @@
-.swagger-ui {
-  .Resizer.vertical.disabled {
-    display: none;
-  }
-}

src/core/plugins/util/index.js

@@ -1,8 +1,7 @@
 import { shallowEqualKeys } from "core/utils"
-import { transformPathToArray } from "core/path-translator"
 
 export default function() {
   return {
-    fn: { shallowEqualKeys, transformPathToArray }
+    fn: { shallowEqualKeys }
   }
 }

src/core/utils.js

@@ -41,7 +41,7 @@ export function fromJSOrdered (js) {
   return !isObject(js) ? js :
     Array.isArray(js) ?
       Im.Seq(js).map(fromJSOrdered).toList() :
-      Im.Seq(js).map(fromJSOrdered).toOrderedMap()
+      Im.OrderedMap(js).map(fromJSOrdered)
 }
 
 export function bindToState(obj, state) {
@@ -468,6 +468,18 @@ export const validateFile = ( val ) => {
   }
 }
 
+export const validateBoolean = ( val ) => {
+  if ( !(val === "true" || val === "false" || val === true || val === false) ) {
+    return "Value must be a boolean"
+  }
+}
+
+export const validateString = ( val ) => {
+  if ( val && typeof val !== "string" ) {
+    return "Value must be a string"
+  }
+}
+
 // validation of parameters before execute
 export const validateParam = (param, isXml) => {
   let errors = []
@@ -475,52 +487,66 @@ export const validateParam = (param, isXml) => {
   let required = param.get("required")
   let type = param.get("type")
 
-  let stringCheck = type === "string" && !value
-  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
-  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
-  let fileCheck = type === "file" && !(value instanceof win.File)
+  // If the parameter is required OR the parameter has a value (meaning optional, but filled in)
+  // then we should do our validation routine
+  if ( required || value ) {
+    // These checks should evaluate to true if the parameter's value is valid
+    let stringCheck = type === "string" && value && !validateString(value)
+    let arrayCheck = type === "array" && Array.isArray(value) && value.length
+    let listCheck = type === "array" && Im.List.isList(value) && value.count()
+    let fileCheck = type === "file" && value instanceof win.File
+    let booleanCheck = type === "boolean" && !validateBoolean(value)
+    let numberCheck = type === "number" && !validateNumber(value) // validateNumber returns undefined if the value is a number
+    let integerCheck = type === "integer" && !validateInteger(value) // validateInteger returns undefined if the value is an integer
 
-  if ( required && (stringCheck || arrayCheck || listCheck || fileCheck) ) {
-    errors.push("Required field is not provided")
-    return errors
-  }
+    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
+      errors.push("Required field is not provided")
+      return errors
+    }
 
-  if ( value === null || value === undefined ) {
-    return errors
-  }
+    if ( type === "string" ) {
+      let err = validateString(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "boolean" ) {
+      let err = validateBoolean(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "number" ) {
+      let err = validateNumber(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "integer" ) {
+      let err = validateInteger(value)
+      if (!err) return errors
+      errors.push(err)
+    } else if ( type === "array" ) {
+      let itemType
 
-  if ( type === "number" ) {
-    let err = validateNumber(value)
-    if (!err) return errors
-    errors.push(err)
-  } else if ( type === "integer" ) {
-    let err = validateInteger(value)
-    if (!err) return errors
-    errors.push(err)
-  } else if ( type === "array" ) {
-    let itemType
+      if ( !value.count() ) { return errors }
 
-    if ( !value.count() ) { return errors }
+      itemType = param.getIn(["items", "type"])
 
-    itemType = param.getIn(["items", "type"])
+      value.forEach((item, index) => {
+        let err
 
-    value.forEach((item, index) => {
-      let err
+        if (itemType === "number") {
+          err = validateNumber(item)
+        } else if (itemType === "integer") {
+          err = validateInteger(item)
+        } else if (itemType === "string") {
+          err = validateString(item)
+        }
 
-      if (itemType === "number") {
-        err = validateNumber(item)
-      } else if (itemType === "integer") {
-        err = validateInteger(item)
-      }
-
-      if ( err ) {
-        errors.push({ index: index, error: err})
-      }
-    })
-  } else if ( type === "file" ) {
-    let err = validateFile(value)
-    if (!err) return errors
-    errors.push(err)
+        if ( err ) {
+          errors.push({ index: index, error: err})
+        }
+      })
+    } else if ( type === "file" ) {
+      let err = validateFile(value)
+      if (!err) return errors
+      errors.push(err)
+    }
   }
 
   return errors

src/plugins/add-plugin.md

@@ -20,7 +20,7 @@ SwaggerUI({
 })
 ```
 
-Or if you're updating the core plugins.. you'll add it to [src/js/bootstrap-plugin](https://github.com/SmartBear/swagger-ux/blob/master/src/js/bootstrap-plugin.js)
+Or if you're updating the core plugins.. you'll add it to the base preset: [src/core/presets/base.js](https://github.com/swagger-api/swagger-ui/blob/master/src/core/presets/base.js)
 
 Each Plugin is a function that returns an object. That object will get merged with the `system` and later bound to the state.
 Here is an example of each `type`

src/plugins/topbar/topbar.jsx

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

src/plugins/topbar/topbar.less

@@ -1,52 +0,0 @@
-.swagger-ui {
-  .topbar {
-    background-color: #89bf04;
-  }
-
-  .topbar-wrapper {
-    padding: 0.7em;
-  }
-
-  .topbar-logo__img {
-    float: left;
-  }
-
-  .topbar-logo__title {
-    display: inline-block;
-    color: #fff;
-    font-size: 1.5em;
-    font-weight: bold;
-    margin: 0.15em 0 0 0.5em;
-  }
-
-  .download-url-wrapper {
-    text-align: right;
-    float: right;
-  }
-
-  .topbar .download-url__text {
-    width: 28em;
-    height: 2em;
-    margin-right: 0.5em;
-  }
-
-  .download-url__btn {
-    background-color: #547f00;
-    border-color: #547f00;
-    text-decoration: none;
-    font-weight: bold;
-    padding: 0.2em 0.3em;
-    color: white;
-    border-radius: 0.1em;
-
-    &:hover {
-      &:extend(.download-url__btn);
-    }
-  }
-
-  .center-700 {
-    display: block;
-    margin: 0 auto;
-    width: 45em;
-  }
-}

src/standalone/index.js

@@ -1,6 +1,4 @@
 import StandaloneLayout from "./layout"
-import "../style/main.scss"
-
 import TopbarPlugin from "plugins/topbar"
 import ConfigsPlugin from "plugins/configs"
 

src/style/_buttons.scss

@@ -14,6 +14,11 @@
 
     @include text_headline();
 
+    &.btn-sm {
+        font-size: 12px;
+        padding: 4px 23px;
+    }
+
     &[disabled]
     {
         cursor: not-allowed;
@@ -165,6 +170,9 @@
 button
 {
     cursor: pointer;
-
     outline: none;
+
+    &.invalid {
+        @include invalidFormElement();
+    }
 }

src/style/_form.scss

@@ -21,6 +21,10 @@ select
 
         background: #f7f7f7;
     }
+
+    &.invalid {
+        @include invalidFormElement();
+    }
 }
 
 .opblock-body select
@@ -53,12 +57,8 @@ input[type=file]
     border-radius: 4px;
     background: #fff;
 
-    &.invalid
-    {
-        animation: shake .4s 1;
-
-        border-color: $_color-delete;
-        background: lighten($_color-delete, 35%);
+    &.invalid {
+        @include invalidFormElement();
     }
 }
 

src/style/_layout.scss

@@ -508,6 +508,15 @@ body
         {
             margin: 0;
         }
+
+        a
+        {
+            @include text_code(#89bf04);
+            text-decoration: underline;
+            &:hover {
+                color: #81b10c;
+            }
+        }
     }
 }
 

src/style/_mixins.scss

@@ -166,3 +166,9 @@ $browser-context: 16;
         @warn 'Breakpoint mixin supports: tablet, mobile, desktop';
     }
 }
+
+@mixin invalidFormElement() {
+    animation: shake .4s 1;
+    border-color: $_color-delete;
+    background: lighten($_color-delete, 35%);
+}

src/style/_split-pane-mode.scss

@@ -0,0 +1,3 @@
+.Resizer.vertical.disabled {
+  display: none;
+}

src/style/_table.scss

@@ -97,6 +97,10 @@ table
         width: 100%;
         max-width: 340px;
     }
+
+    select {
+        border-width: 1px;
+    }
 }
 
 .parameter__name

src/style/main.scss

@@ -14,4 +14,5 @@
     @import 'information';
     @import 'authorize';
     @import 'errors';
+    @import 'split-pane-mode';
 }