[explorev2] adding support for client side validators on controls (#1920)

* Adding support for client side validators on controls

* Applying validators to more fields

* Addressing comments

superset/assets/javascripts/explorev2/components/FieldSet.jsx

@@ -4,7 +4,7 @@ import CheckboxField from './CheckboxField';
 import TextAreaField from './TextAreaField';
 import SelectField from './SelectField';
 
-import ControlLabelWithTooltip from './ControlLabelWithTooltip';
+import ControlHeader from './ControlHeader';
 
 const fieldMap = {
   TextField,
@@ -15,14 +15,15 @@ const fieldMap = {
 const fieldTypes = Object.keys(fieldMap);
 
 const propTypes = {
+  actions: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   type: PropTypes.oneOf(fieldTypes).isRequired,
   label: PropTypes.string.isRequired,
   choices: PropTypes.arrayOf(PropTypes.array),
   description: PropTypes.string,
   places: PropTypes.number,
-  validators: PropTypes.any,
-  onChange: React.PropTypes.func,
+  validators: PropTypes.array,
+  validationErrors: PropTypes.array,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -31,16 +32,46 @@ const propTypes = {
 };
 
 const defaultProps = {
-  onChange: () => {},
+  validators: [],
+  validationErrors: [],
 };
 
 export default class FieldSet extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.validate = this.validate.bind(this);
+    this.onChange = this.onChange.bind(this);
+  }
+  onChange(value) {
+    const validationErrors = this.validate(value);
+    this.props.actions.setFieldValue(this.props.name, value, validationErrors);
+  }
+  validate(value) {
+    const validators = this.props.validators;
+    const validationErrors = [];
+    if (validators && validators.length > 0) {
+      validators.forEach(f => {
+        const v = f(value);
+        if (v) {
+          validationErrors.push(v);
+        }
+      });
+    }
+    return validationErrors;
+  }
   render() {
     const FieldType = fieldMap[this.props.type];
     return (
       <div>
-        <ControlLabelWithTooltip label={this.props.label} description={this.props.description} />
-        <FieldType {...this.props} />
+        <ControlHeader
+          label={this.props.label}
+          description={this.props.description}
+          validationErrors={this.props.validationErrors}
+        />
+        <FieldType
+          onChange={this.onChange}
+          {...this.props}
+        />
       </div>
     );
   }