From 87e7142f1fa325e700407933d22c36aef1b7f0cf Mon Sep 17 00:00:00 2001
From: Owen Conti <owen@ohseemedia.com>
Date: Mon, 24 Jul 2017 18:26:09 -0600
Subject: [PATCH 1/3] Revert "Update parameter <select> elements to render
 'invalid' classes. Add '.invalid' CSS for <select> elements. Rework
 validateParam() function. Added .btn-sm class for "Add item" and "Remove
 item" buttons in array parameters. Reduce border-width on <select> elements
 inside parameters. Update tests for utils.validateParam()."

This reverts commit 666e22f9895ec70095d4cf29ade8fd625b96b1fb.
---
 src/core/components/layout-utils.jsx |   7 +-
 src/core/json-schema-components.js   |  24 +-
 src/core/utils.js                    | 104 +++-----
 src/style/_buttons.scss              |  10 +-
 src/style/_form.scss                 |  12 +-
 src/style/_mixins.scss               |   6 -
 src/style/_table.scss                |   4 -
 test/core/utils.js                   | 342 ++++-----------------------
 8 files changed, 112 insertions(+), 397 deletions(-)

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index f80e0c90..00a4a09d 100644
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -129,8 +129,7 @@ export class Select extends React.Component {
     value: PropTypes.any,
     onChange: PropTypes.func,
     multiple: PropTypes.bool,
-    allowEmptyValue: PropTypes.bool,
-    className: PropTypes.string
+    allowEmptyValue: PropTypes.bool
   }
 
   static defaultProps = {
@@ -143,7 +142,7 @@ export class Select extends React.Component {
 
     let value
 
-    if (props.value) {
+    if (props.value !== undefined) {
       value = props.value
     } else {
       value = props.multiple ? [""] : ""
@@ -179,7 +178,7 @@ export class Select extends React.Component {
     let value = this.state.value.toJS ? this.state.value.toJS() : this.state.value
 
     return (
-      <select className={this.props.className} multiple={ multiple } value={ value } onChange={ this.onChange } >
+      <select multiple={ multiple } value={ value } onChange={ this.onChange } >
         { allowEmptyValue ? <option value="">--</option> : null }
         {
           allowedValues.map(function (item, key) {
diff --git a/src/core/json-schema-components.js b/src/core/json-schema-components.js
index 338bd6e3..bf4ae514 100644
--- a/src/core/json-schema-components.js
+++ b/src/core/json-schema-components.js
@@ -57,8 +57,7 @@ export class JsonSchema_string extends Component {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select className={ errors.length ? "invalid" : ""}
-                      allowedValues={ enumValue }
+      return (<Select allowedValues={ enumValue }
                       value={ value }
                       allowEmptyValue={ !required }
                       onChange={ this.onEnumChange }/>)
@@ -122,7 +121,6 @@ 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")
@@ -133,17 +131,19 @@ export class JsonSchema_array extends PureComponent {
 
     if ( enumValue ) {
       const Select = getComponent("Select")
-      return (<Select className={ errors.length ? "invalid" : ""}
-                     multiple={ true }
+      return (<Select multiple={ true }
                      value={ value }
                      allowedValues={ enumValue }
                      allowEmptyValue={ !required }
                      onChange={ this.onEnumChange }/>)
     }
 
+    let errors = schema.errors || []
+
     return (
       <div>
-        { !value || value.count() < 1 ? null : 
+        { !value || value.count() < 1 ?
+          (errors.length ? <span style={{ color: "red", fortWeight: "bold" }}>{ errors[0] }</span> : 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="btn btn-sm json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
+              <Button className="json-schema-form-item-remove" onClick={()=> this.removeItem(i)} > - </Button>
             </div>
             )
           }).toArray()
         }
-        <Button className={`btn btn-sm json-schema-form-item-add ${errors.length ? "invalid" : null}`} onClick={this.addItem}> Add item </Button>
+        <Button className="json-schema-form-item-add" onClick={this.addItem}> Add item </Button>
       </div>
     )
   }
@@ -170,14 +170,12 @@ export class JsonSchema_boolean extends Component {
 
   onEnumChange = (val) => this.props.onChange(val)
   render() {
-    let { getComponent, value, schema } = this.props
-    let errors = schema.errors || []
+    let { getComponent, required, value } = this.props
     const Select = getComponent("Select")
 
-    return (<Select className={ errors.length ? "invalid" : ""}
-                    value={ String(value) }
+    return (<Select value={ String(value) }
                     allowedValues={ fromJS(["true", "false"]) }
-                    allowEmptyValue={true}
+                    allowEmptyValue={ !required }
                     onChange={ this.onEnumChange }/>)
   }
 }
diff --git a/src/core/utils.js b/src/core/utils.js
index 7cc5beda..f2e28948 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -468,18 +468,6 @@ 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 = []
@@ -487,66 +475,52 @@ export const validateParam = (param, isXml) => {
   let required = param.get("required")
   let type = param.get("type")
 
-  // 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
+  let stringCheck = type === "string" && !value
+  let arrayCheck = type === "array" && Array.isArray(value) && !value.length
+  let listCheck = type === "array" && Im.List.isList(value) && !value.count()
+  let fileCheck = type === "file" && !(value instanceof win.File)
 
-    if ( required && !(stringCheck || arrayCheck || listCheck || fileCheck || booleanCheck || numberCheck || integerCheck) ) {
-      errors.push("Required field is not provided")
-      return errors
-    }
+  if ( required && (stringCheck || arrayCheck || listCheck || fileCheck) ) {
+    errors.push("Required field is not provided")
+    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 ( value === null || value === undefined ) {
+    return errors
+  }
 
-      if ( !value.count() ) { return errors }
+  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
 
-      itemType = param.getIn(["items", "type"])
+    if ( !value.count() ) { return errors }
 
-      value.forEach((item, index) => {
-        let err
+    itemType = param.getIn(["items", "type"])
 
-        if (itemType === "number") {
-          err = validateNumber(item)
-        } else if (itemType === "integer") {
-          err = validateInteger(item)
-        } else if (itemType === "string") {
-          err = validateString(item)
-        }
+    value.forEach((item, index) => {
+      let err
 
-        if ( err ) {
-          errors.push({ index: index, error: err})
-        }
-      })
-    } else if ( type === "file" ) {
-      let err = validateFile(value)
-      if (!err) return errors
-      errors.push(err)
-    }
+      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)
   }
 
   return errors
diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss
index bfb85023..2470f8b0 100644
--- a/src/style/_buttons.scss
+++ b/src/style/_buttons.scss
@@ -14,11 +14,6 @@
 
     @include text_headline();
 
-    &.btn-sm {
-        font-size: 12px;
-        padding: 4px 23px;
-    }
-
     &[disabled]
     {
         cursor: not-allowed;
@@ -170,9 +165,6 @@
 button
 {
     cursor: pointer;
-    outline: none;
 
-    &.invalid {
-        @include invalidFormElement();
-    }
+    outline: none;
 }
diff --git a/src/style/_form.scss b/src/style/_form.scss
index e54d5438..185b836e 100644
--- a/src/style/_form.scss
+++ b/src/style/_form.scss
@@ -21,10 +21,6 @@ select
 
         background: #f7f7f7;
     }
-
-    &.invalid {
-        @include invalidFormElement();
-    }
 }
 
 .opblock-body select
@@ -57,8 +53,12 @@ input[type=file]
     border-radius: 4px;
     background: #fff;
 
-    &.invalid {
-        @include invalidFormElement();
+    &.invalid
+    {
+        animation: shake .4s 1;
+
+        border-color: $_color-delete;
+        background: lighten($_color-delete, 35%);
     }
 }
 
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index 8fd01720..a2a27d48 100644
--- a/src/style/_mixins.scss
+++ b/src/style/_mixins.scss
@@ -166,9 +166,3 @@ $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%);
-}
diff --git a/src/style/_table.scss b/src/style/_table.scss
index d1481709..3d58f3d8 100644
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -97,10 +97,6 @@ table
         width: 100%;
         max-width: 340px;
     }
-
-    select {
-        border-width: 1px;
-    }
 }
 
 .parameter__name
diff --git a/test/core/utils.js b/test/core/utils.js
index acc5a14e..fbfb24ab 100644
--- a/test/core/utils.js
+++ b/test/core/utils.js
@@ -176,7 +176,6 @@ describe("utils", function() {
     let result = null
 
     it("validates required strings", function() {
-      // invalid string
       param = fromJS({
         required: true,
         type: "string",
@@ -184,39 +183,9 @@ describe("utils", function() {
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
-
-      // valid string
-      param = fromJS({
-        required: true,
-        type: "string",
-        value: "test string"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates optional strings", function() {
-      // valid (empty) string
-      param = fromJS({
-        required: false,
-        type: "string",
-        value: ""
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid string
-      param = fromJS({
-        required: false,
-        type: "string",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
     })
 
     it("validates required files", function() {
-      // invalid file
       param = fromJS({
         required: true,
         type: "file",
@@ -224,48 +193,9 @@ describe("utils", function() {
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
-
-      // valid file
-      param = fromJS({
-        required: true,
-        type: "file",
-        value: new win.File()
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates optional files", function() {
-      // invalid file
-      param = fromJS({
-        required: false,
-        type: "file",
-        value: "not a file"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be a file"] )
-
-      // valid (empty) file
-      param = fromJS({
-        required: false,
-        type: "file",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid file
-      param = fromJS({
-        required: false,
-        type: "file",
-        value: new win.File()
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
     })
 
     it("validates required arrays", function() {
-      // invalid (empty) array
       param = fromJS({
         required: true,
         type: "array",
@@ -274,51 +204,75 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
 
-      // invalid (not an array)
       param = fromJS({
         required: true,
         type: "array",
-        value: undefined
+        value: []
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
+    })
 
-      // invalid array, items do not match correct type
+    it("validates numbers", function() {
+      // string instead of a number
       param = fromJS({
-        required: true,
-        type: "array",
-        value: [1],
-        items: {
-          type: "string"
-        }
+        required: false,
+        type: "number",
+        value: "test"
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( [{index: 0, error: "Value must be a string"}] )
+      expect( result ).toEqual( ["Value must be a number"] )
 
-      // valid array, with no 'type' for items
+      // undefined value
       param = fromJS({
-        required: true,
-        type: "array",
-        value: ["1"]
+        required: false,
+        type: "number",
+        value: undefined
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // valid array, items match type
+      // null value
       param = fromJS({
-        required: true,
-        type: "array",
-        value: ["1"],
-        items: {
-          type: "string"
-        }
+        required: false,
+        type: "number",
+        value: null
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
     })
 
-    it("validates optional arrays", function() {
-      // valid, empty array
+    it("validates integers", function() {
+      // string instead of integer
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be an integer"] )
+
+      // undefined value
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // null value
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: null
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates arrays", function() {
+      // empty array
       param = fromJS({
         required: false,
         type: "array",
@@ -327,7 +281,7 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // invalid, items do not match correct type
+      // numbers
       param = fromJS({
         required: false,
         type: "array",
@@ -339,209 +293,17 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
 
-      // valid
+      // integers
       param = fromJS({
         required: false,
         type: "array",
-        value: ["test"],
+        value: ["not", "numbers"],
         items: {
-          type: "string"
+          type: "integer"
         }
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates required booleans", function() {
-      // invalid boolean value
-      param = fromJS({
-        required: true,
-        type: "boolean",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // invalid boolean value (not a boolean)
-      param = fromJS({
-        required: true,
-        type: "boolean",
-        value: "test string"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // valid boolean value
-      param = fromJS({
-        required: true,
-        type: "boolean",
-        value: "true"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid boolean value
-      param = fromJS({
-        required: true,
-        type: "boolean",
-        value: false
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates optional booleans", function() {
-      // valid (empty) boolean value
-      param = fromJS({
-        required: false,
-        type: "boolean",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // invalid boolean value (not a boolean)
-      param = fromJS({
-        required: false,
-        type: "boolean",
-        value: "test string"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be a boolean"] )
-
-      // valid boolean value
-      param = fromJS({
-        required: false,
-        type: "boolean",
-        value: "true"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid boolean value
-      param = fromJS({
-        required: false,
-        type: "boolean",
-        value: false
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates required numbers", function() {
-      // invalid number, string instead of a number
-      param = fromJS({
-        required: true,
-        type: "number",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // invalid number, undefined value
-      param = fromJS({
-        required: true,
-        type: "number",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // valid number
-      param = fromJS({
-        required: true,
-        type: "number",
-        value: 10
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates optional numbers", function() {
-      // invalid number, string instead of a number
-      param = fromJS({
-        required: false,
-        type: "number",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be a number"] )
-
-      // valid (empty) number
-      param = fromJS({
-        required: false,
-        type: "number",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid number
-      param = fromJS({
-        required: false,
-        type: "number",
-        value: 10
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates required integers", function() {
-      // invalid integer, string instead of an integer
-      param = fromJS({
-        required: true,
-        type: "integer",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // invalid integer, undefined value
-      param = fromJS({
-        required: true,
-        type: "integer",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Required field is not provided"] )
-
-      // valid integer
-      param = fromJS({
-        required: true,
-        type: "integer",
-        value: 10
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates optional integers", function() {
-      // invalid integer, string instead of an integer
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be an integer"] )
-
-      // valid (empty) integer
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // valid number
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: 10
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
+      expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
     })
   })
 

From f570ffcd822cea9fdb4e76a70156b01854d6768b Mon Sep 17 00:00:00 2001
From: Owen Conti <owen@ohseemedia.com>
Date: Mon, 24 Jul 2017 18:46:30 -0600
Subject: [PATCH 2/3] Reimplemented changes from PR #3427. Added fix for
 validating request bodies.

---
 src/core/components/layout-utils.jsx |   7 +-
 src/core/json-schema-components.js   |  24 +-
 src/core/utils.js                    | 107 +++++---
 src/style/_buttons.scss              |  12 +-
 src/style/_form.scss                 |   9 +-
 src/style/_mixins.scss               |   6 +
 src/style/_table.scss                |   4 +
 test/core/utils.js                   | 353 +++++++++++++++++++++++----
 8 files changed, 412 insertions(+), 110 deletions(-)

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index 00a4a09d..f80e0c90 100644
--- a/src/core/components/layout-utils.jsx
+++ b/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) {
diff --git a/src/core/json-schema-components.js b/src/core/json-schema-components.js
index bf4ae514..a8d92023 100644
--- a/src/core/json-schema-components.js
+++ b/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 }/>)
   }
 }
diff --git a/src/core/utils.js b/src/core/utils.js
index f2e28948..98036e13 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -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,69 @@ 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.
+    Only bother validating the parameter if the type was specified.
+  */
+  if ( type && (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
diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss
index 2470f8b0..5450c814 100644
--- a/src/style/_buttons.scss
+++ b/src/style/_buttons.scss
@@ -14,6 +14,12 @@
 
     @include text_headline();
 
+    &.btn-sm
+    {
+        font-size: 12px;
+        padding: 4px 23px;
+    }
+
     &[disabled]
     {
         cursor: not-allowed;
@@ -165,6 +171,10 @@
 button
 {
     cursor: pointer;
-
     outline: none;
+
+    &.invalid
+    {
+        @include invalidFormElement();
+    }
 }
diff --git a/src/style/_form.scss b/src/style/_form.scss
index 185b836e..e9d83c7c 100644
--- a/src/style/_form.scss
+++ b/src/style/_form.scss
@@ -21,6 +21,10 @@ select
 
         background: #f7f7f7;
     }
+
+    &.invalid {
+        @include invalidFormElement();
+    }
 }
 
 .opblock-body select
@@ -55,10 +59,7 @@ input[type=file]
 
     &.invalid
     {
-        animation: shake .4s 1;
-
-        border-color: $_color-delete;
-        background: lighten($_color-delete, 35%);
+        @include invalidFormElement();
     }
 }
 
diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
index a2a27d48..94969db5 100644
--- a/src/style/_mixins.scss
+++ b/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%);
+}
\ No newline at end of file
diff --git a/src/style/_table.scss b/src/style/_table.scss
index 3d58f3d8..d1481709 100644
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -97,6 +97,10 @@ table
         width: 100%;
         max-width: 340px;
     }
+
+    select {
+        border-width: 1px;
+    }
 }
 
 .parameter__name
diff --git a/test/core/utils.js b/test/core/utils.js
index fbfb24ab..55dfeace 100644
--- a/test/core/utils.js
+++ b/test/core/utils.js
@@ -175,7 +175,19 @@ describe("utils", function() {
     let param = null
     let result = null
 
+    it("skips validation when `type` is not specified", function() {
+      // invalid type
+      param = fromJS({
+        required: false,
+        type: undefined,
+        value: ""
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
     it("validates required strings", function() {
+      // invalid string
       param = fromJS({
         required: true,
         type: "string",
@@ -183,9 +195,39 @@ describe("utils", function() {
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
+
+            // valid string
+      param = fromJS({
+        required: true,
+        type: "string",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional strings", function() {
+      // valid (empty) string
+      param = fromJS({
+        required: false,
+        type: "string",
+        value: ""
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid string
+      param = fromJS({
+        required: false,
+        type: "string",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
 
     it("validates required files", function() {
+      // invalid file
       param = fromJS({
         required: true,
         type: "file",
@@ -193,9 +235,48 @@ describe("utils", function() {
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid file
+      param = fromJS({
+        required: true,
+        type: "file",
+        value: new win.File()
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional files", function() {
+      // invalid file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: "not a file"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a file"] )
+
+      // valid (empty) file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid file
+      param = fromJS({
+        required: false,
+        type: "file",
+        value: new win.File()
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
 
     it("validates required arrays", function() {
+      // invalid (empty) array
       param = fromJS({
         required: true,
         type: "array",
@@ -204,75 +285,51 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
 
+      // invalid (not an array)
       param = fromJS({
         required: true,
         type: "array",
-        value: []
+        value: undefined
       })
       result = validateParam( param, false )
       expect( result ).toEqual( ["Required field is not provided"] )
-    })
 
-    it("validates numbers", function() {
-      // string instead of a number
+      // invalid array, items do not match correct type
       param = fromJS({
-        required: false,
-        type: "number",
-        value: "test"
+        required: true,
+        type: "array",
+        value: [1],
+        items: {
+          type: "string"
+        }
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be a number"] )
+      expect( result ).toEqual( [{index: 0, error: "Value must be a string"}] )
 
-      // undefined value
+      // valid array, with no 'type' for items
       param = fromJS({
-        required: false,
-        type: "number",
-        value: undefined
+        required: true,
+        type: "array",
+        value: ["1"]
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // null value
+      // valid array, items match type
       param = fromJS({
-        required: false,
-        type: "number",
-        value: null
+        required: true,
+        type: "array",
+        value: ["1"],
+        items: {
+          type: "string"
+        }
       })
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
     })
 
-    it("validates integers", function() {
-      // string instead of integer
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: "test"
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( ["Value must be an integer"] )
-
-      // undefined value
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: undefined
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-
-      // null value
-      param = fromJS({
-        required: false,
-        type: "integer",
-        value: null
-      })
-      result = validateParam( param, false )
-      expect( result ).toEqual( [] )
-    })
-
-    it("validates arrays", function() {
-      // empty array
+    it("validates optional arrays", function() {
+      // valid, empty array
       param = fromJS({
         required: false,
         type: "array",
@@ -281,7 +338,7 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( [] )
 
-      // numbers
+      // invalid, items do not match correct type
       param = fromJS({
         required: false,
         type: "array",
@@ -293,17 +350,209 @@ describe("utils", function() {
       result = validateParam( param, false )
       expect( result ).toEqual( [{index: 0, error: "Value must be a number"}] )
 
-      // integers
+      // valid
       param = fromJS({
         required: false,
         type: "array",
-        value: ["not", "numbers"],
+        value: ["test"],
         items: {
-          type: "integer"
+          type: "string"
         }
       })
       result = validateParam( param, false )
-      expect( result ).toEqual( [{index: 0, error: "Value must be an integer"}, {index: 1, error: "Value must be an integer"}] )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required booleans", function() {
+      // invalid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid boolean value (not a boolean)
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: "true"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid boolean value
+      param = fromJS({
+        required: true,
+        type: "boolean",
+        value: false
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional booleans", function() {
+      // valid (empty) boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // invalid boolean value (not a boolean)
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: "test string"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a boolean"] )
+
+      // valid boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: "true"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid boolean value
+      param = fromJS({
+        required: false,
+        type: "boolean",
+        value: false
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required numbers", function() {
+      // invalid number, string instead of a number
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid number, undefined value
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid number
+      param = fromJS({
+        required: true,
+        type: "number",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional numbers", function() {
+      // invalid number, string instead of a number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be a number"] )
+
+      // valid (empty) number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // valid number
+      param = fromJS({
+        required: false,
+        type: "number",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates required integers", function() {
+      // invalid integer, string instead of an integer
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // invalid integer, undefined value
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Required field is not provided"] )
+
+      // valid integer
+      param = fromJS({
+        required: true,
+        type: "integer",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+    })
+
+    it("validates optional integers", function() {
+      // invalid integer, string instead of an integer
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: "test"
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( ["Value must be an integer"] )
+
+      // valid (empty) integer
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: undefined
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
+
+      // integers
+      param = fromJS({
+        required: false,
+        type: "integer",
+        value: 10
+      })
+      result = validateParam( param, false )
+      expect( result ).toEqual( [] )
     })
   })
 

From b3bccfb185528463e95768087a319051c5272b04 Mon Sep 17 00:00:00 2001
From: Owen Conti <owen@ohseemedia.com>
Date: Mon, 24 Jul 2017 18:55:32 -0600
Subject: [PATCH 3/3] fixes after merge

---
 src/core/components/layout-utils.jsx | 7 ++++---
 src/style/_table.scss                | 4 ++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index 00a4a09d..f80e0c90 100644
--- a/src/core/components/layout-utils.jsx
+++ b/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) {
diff --git a/src/style/_table.scss b/src/style/_table.scss
index 3d58f3d8..d1481709 100644
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -97,6 +97,10 @@ table
         width: 100%;
         max-width: 340px;
     }
+
+    select {
+        border-width: 1px;
+    }
 }
 
 .parameter__name