From 57dc7622b4e246d7b900efaebf06f5cbd1b59c6a Mon Sep 17 00:00:00 2001
From: simchaNielsen <56388545+simchaNielsen@users.noreply.github.com>
Date: Wed, 5 Aug 2020 09:23:11 +0300
Subject: [PATCH] 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
---
 .../components/FilterBoxItemControl_spec.jsx  |  4 ++
 .../components/controls/CollectionControl.jsx | 58 ++++++++++---------
 .../controls/FilterBoxItemControl.jsx         |  3 +
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/superset-frontend/spec/javascripts/explore/components/FilterBoxItemControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/FilterBoxItemControl_spec.jsx
index fb942459b..d5300256d 100644
--- a/superset-frontend/spec/javascripts/explore/components/FilterBoxItemControl_spec.jsx
+++ b/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', () => {
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl.jsx b/superset-frontend/src/explore/components/controls/CollectionControl.jsx
index cdc630356..0a19864e3 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl.jsx
+++ b/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) => (
-          <SortableListGroupItem
-            className="clearfix"
-            key={this.props.keyAccessor(o)}
-            index={i}
-          >
-            <div className="pull-left m-r-5">
-              <SortableDragger />
-            </div>
-            <div className="pull-left">
-              <Control
-                {...this.props}
-                {...o}
-                onChange={this.onChange.bind(this, i)}
-              />
-            </div>
-            <div className="pull-right">
-              <InfoTooltipWithTrigger
-                icon="times"
-                label="remove-item"
-                tooltip="remove item"
-                bsStyle="primary"
-                onClick={this.removeItem.bind(this, i)}
-              />
-            </div>
-          </SortableListGroupItem>
-        ))}
+        {this.props.value.map((o, i) => {
+          // label relevant only for header, not here
+          const { label, ...commonProps } = this.props;
+          return (
+            <SortableListGroupItem
+              className="clearfix"
+              key={this.props.keyAccessor(o)}
+              index={i}
+            >
+              <div className="pull-left m-r-5">
+                <SortableDragger />
+              </div>
+              <div className="pull-left">
+                <Control
+                  {...commonProps}
+                  {...o}
+                  onChange={this.onChange.bind(this, i)}
+                />
+              </div>
+              <div className="pull-right">
+                <InfoTooltipWithTrigger
+                  icon="times"
+                  label="remove-item"
+                  tooltip="remove item"
+                  bsStyle="primary"
+                  onClick={this.removeItem.bind(this, i)}
+                />
+              </div>
+            </SortableListGroupItem>
+          );
+        })}
       </SortableListGroup>
     );
   }
diff --git a/superset-frontend/src/explore/components/controls/FilterBoxItemControl.jsx b/superset-frontend/src/explore/components/controls/FilterBoxItemControl.jsx
index 3df9ae89a..8e4b21e8a 100644
--- a/superset-frontend/src/explore/components/controls/FilterBoxItemControl.jsx
+++ b/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,