fix: show label for filters in filter box in explore (#10412)

* fix: show label for filters in filter box in explore

* test: add test for label in filter box

* test: add test / fix lint

* fix: fix CR notes

* refactor: add label propType to FilterBoxItemControl.jsx

superset-frontend/spec/javascripts/explore/components/FilterBoxItemControl_spec.jsx

@@ -27,6 +27,7 @@ import FormRow from 'src/components/FormRow';
 import datasources from '../../../fixtures/mockDatasource';
 
 const defaultProps = {
+  label: 'some label',
   datasource: datasources['7__table'],
   onChange: sinon.spy(),
 };
@@ -51,6 +52,9 @@ describe('FilterBoxItemControl', () => {
   it('renderForms does the job', () => {
     const popover = shallow(inst.renderForm());
     expect(popover.find(FormRow)).toHaveLength(8);
+    expect(popover.find(FormRow).get(1).props.control.props.value).toEqual(
+      'some label',
+    );
   });
 
   it('convert type for single value filter_box', () => {

superset-frontend/src/explore/components/controls/CollectionControl.jsx

@@ -92,33 +92,37 @@ export default class CollectionControl extends React.Component {
         lockAxis="y"
         onSortEnd={this.onSortEnd.bind(this)}
       >
-        {this.props.value.map((o, i) => (
+        {this.props.value.map((o, i) => {
-          <SortableListGroupItem
+          // label relevant only for header, not here
-            className="clearfix"
+          const { label, ...commonProps } = this.props;
-            key={this.props.keyAccessor(o)}
+          return (
-            index={i}
+            <SortableListGroupItem
-          >
+              className="clearfix"
-            <div className="pull-left m-r-5">
+              key={this.props.keyAccessor(o)}
-              <SortableDragger />
+              index={i}
-            </div>
+            >
-            <div className="pull-left">
+              <div className="pull-left m-r-5">
-              <Control
+                <SortableDragger />
-                {...this.props}
+              </div>
-                {...o}
+              <div className="pull-left">
-                onChange={this.onChange.bind(this, i)}
+                <Control
-              />
+                  {...commonProps}
-            </div>
+                  {...o}
-            <div className="pull-right">
+                  onChange={this.onChange.bind(this, i)}
-              <InfoTooltipWithTrigger
+                />
-                icon="times"
+              </div>
-                label="remove-item"
+              <div className="pull-right">
-                tooltip="remove item"
+                <InfoTooltipWithTrigger
-                bsStyle="primary"
+                  icon="times"
-                onClick={this.removeItem.bind(this, i)}
+                  label="remove-item"
-              />
+                  tooltip="remove item"
-            </div>
+                  bsStyle="primary"
-          </SortableListGroupItem>
+                  onClick={this.removeItem.bind(this, i)}
-        ))}
+                />
+              </div>
+            </SortableListGroupItem>
+          );
+        })}
       </SortableListGroup>
     );
   }

superset-frontend/src/explore/components/controls/FilterBoxItemControl.jsx

@@ -52,6 +52,7 @@ const propTypes = {
   clearable: PropTypes.bool,
   multiple: PropTypes.bool,
   column: PropTypes.string,
+  label: PropTypes.string,
   metric: PropTypes.string,
   searchAllOptions: PropTypes.bool,
   defaultValue: PropTypes.string,
@@ -77,11 +78,13 @@ export default class FilterBoxItemControl extends React.Component {
       clearable,
       multiple,
       searchAllOptions,
+      label,
       defaultValue,
     } = props;
     const state = {
       column,
       metric,
+      label,
       asc,
       clearable,
       multiple,