Added different Select Fields (#1583)

* Added different Select Fields
 - Switched FormGroup to react-select
 - Added multi and freeform to select, now it can take customized user
   input and insert it as options

* Fixed tests

* Small nit based on comments

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

@@ -1,18 +1,23 @@
 import React, { PropTypes } from 'react';
-import { FormGroup, FormControl } from 'react-bootstrap';
 import ControlLabelWithTooltip from './ControlLabelWithTooltip';
 import { slugify } from '../../modules/utils';
+import Select, { Creatable } from 'react-select';
+
 
 const propTypes = {
   name: PropTypes.string.isRequired,
   choices: PropTypes.array,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   label: PropTypes.string,
   description: PropTypes.string,
   onChange: PropTypes.func,
+  multi: PropTypes.bool,
+  freeForm: PropTypes.bool,
 };
 
 const defaultProps = {
+  multi: false,
+  freeForm: false,
   value: '',
   label: null,
   description: null,
@@ -21,25 +26,44 @@ const defaultProps = {
 
 export default class SelectField extends React.Component {
   onChange(opt) {
-    this.props.onChange(this.props.name, opt.target.value);
+    let optionValue = opt ? opt.value : null;
+    // if multi, return options values as an array
+    if (this.props.multi) {
+      optionValue = opt ? opt.map((o) => o.value) : null;
+    }
+    this.props.onChange(this.props.name, optionValue);
   }
-
   render() {
+    const options = this.props.choices.map((c) => ({ value: c[0], label: c[1] }));
+    if (this.props.freeForm) {
+      // For FreeFormSelect, insert value into options if not exist
+      const values = this.props.choices.map((c) => c[0]);
+      if (values.indexOf(this.props.value) === -1) {
+        options.push({ value: this.props.value, label: this.props.value });
+      }
+    }
+
+    const selectProps = {
+      multi: this.props.multi,
+      name: `select-${this.props.name}`,
+      placeholder: `Select (${this.props.choices.length})`,
+      options,
+      value: this.props.value,
+      autosize: false,
+      onChange: this.onChange.bind(this),
+    };
+    //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
+    const selectWrap = this.props.freeForm ?
+      (<Creatable {...selectProps} />) : (<Select {...selectProps} />);
+
     return (
-      <FormGroup controlId={`formControlsSelect-${slugify(this.props.label)}`}>
+      <div id={`formControlsSelect-${slugify(this.props.label)}`}>
         <ControlLabelWithTooltip
           label={this.props.label}
           description={this.props.description}
         />
-        <FormControl
-          componentClass="select"
-          placeholder="select"
-          onChange={this.onChange.bind(this)}
-          value={this.props.value}
-        >
-          {this.props.choices.map((c) => <option key={c[0]} value={c[0]}>{c[1]}</option>)}
-        </FormControl>
-      </FormGroup>
+        {selectWrap}
+      </div>
     );
   }
 }