[explore] include ControlHeader as part of Control interface (#2809)

* [explore] include ControlHeader as part of Control interface

* Adressing comments

superset/assets/javascripts/explore/components/controls/CheckboxControl.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox } from 'react-bootstrap';
+import ControlHeader from '../ControlHeader';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -21,9 +22,14 @@ export default class CheckboxControl extends React.Component {
   }
   render() {
     return (
-      <Checkbox
-        checked={this.props.value}
-        onChange={this.onToggle.bind(this)}
+      <ControlHeader
+        {...this.props}
+        leftNode={
+          <Checkbox
+            checked={this.props.value}
+            onChange={this.onToggle.bind(this)}
+          />
+        }
       />
     );
   }

superset/assets/javascripts/explore/components/controls/Filter.jsx

@@ -94,6 +94,7 @@ export default class Filter extends React.Component {
   renderFilterFormControl(filter) {
     const operator = operators[filter.op];
     if (operator.useSelect && !this.props.having) {
+      // TODO should use a simple Select, not a control here...
       return (
         <SelectControl
           multi={operator.multi}
@@ -103,6 +104,7 @@ export default class Filter extends React.Component {
           isLoading={this.state.valuesLoading}
           choices={this.state.valueChoices}
           onChange={this.changeSelect.bind(this)}
+          showHeader={false}
         />
       );
     }

superset/assets/javascripts/explore/components/controls/SelectControl.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { Creatable } from 'react-select';
+import ControlHeader from '../ControlHeader';
 
 const propTypes = {
   choices: PropTypes.array,
@@ -13,6 +14,7 @@ const propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  showHeader: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -24,6 +26,7 @@ const defaultProps = {
   label: null,
   multi: false,
   onChange: () => {},
+  showHeader: true,
 };
 
 export default class SelectControl extends React.PureComponent {
@@ -115,6 +118,9 @@ export default class SelectControl extends React.PureComponent {
       (<Creatable {...selectProps} />) : (<Select {...selectProps} />);
     return (
       <div>
+        {this.props.showHeader &&
+          <ControlHeader {...this.props} />
+        }
         {selectWrap}
       </div>
     );

superset/assets/javascripts/explore/components/controls/TextAreaControl.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, FormControl } from 'react-bootstrap';
+import ControlHeader from '../ControlHeader';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -23,14 +24,17 @@ export default class TextAreaControl extends React.Component {
   }
   render() {
     return (
-      <FormGroup controlId="formControlsTextarea">
-        <FormControl
-          componentClass="textarea"
-          placeholder="textarea"
-          onChange={this.onChange.bind(this)}
-          value={this.props.value}
-        />
-      </FormGroup>
+      <div>
+        <ControlHeader {...this.props} />
+        <FormGroup controlId="formControlsTextarea">
+          <FormControl
+            componentClass="textarea"
+            placeholder="textarea"
+            onChange={this.onChange.bind(this)}
+            value={this.props.value}
+          />
+        </FormGroup>
+      </div>
     );
   }
 }

superset/assets/javascripts/explore/components/controls/TextControl.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, FormControl } from 'react-bootstrap';
 import * as v from '../../validators';
+import ControlHeader from '../ControlHeader';
 
 const propTypes = {
   name: PropTypes.string.isRequired,
@@ -58,14 +59,17 @@ export default class TextControl extends React.Component {
   }
   render() {
     return (
-      <FormGroup controlId="formInlineName" bsSize="small">
-        <FormControl
-          type="text"
-          placeholder=""
-          onChange={this.onChange}
-          value={this.state.value}
-        />
-      </FormGroup>
+      <div>
+        <ControlHeader {...this.props} />
+        <FormGroup controlId="formInlineName" bsSize="small">
+          <FormControl
+            type="text"
+            placeholder=""
+            onChange={this.onChange}
+            value={this.state.value}
+          />
+        </FormGroup>
+      </div>
     );
   }
 }