[explore] fix autocomplete on verbose names (#5204)

* [explore] fix autocomplete on verbose names

Currently when searching for metrics or groupbys, the autocomplete
search functionality only matches based on the metric_name, though in
some cases the verbose_name is displayed and disregarded for search
purposes.

Also another issue is that not all pre-defined metrics show up in the
drop down which is confusing. Users may have simple metrics for which
they setup a nice verbose name and/or description and expect to see
those in the dropdown.

This PR addresses it for metric and column-related dropdowns.

* Add unit test

superset/assets/spec/javascripts/explore/components/MetricsControl_spec.jsx

@@ -224,7 +224,7 @@ describe('MetricsControl', () => {
 
       expect(!!wrapper.instance().selectFilterOption(
         { type: 'VARCHAR(255)', column_name: 'source', optionName: '_col_source' },
-        'Sou',
+        'sou',
       )).to.be.true;
 
       expect(!!wrapper.instance().selectFilterOption(
@@ -233,6 +233,15 @@ describe('MetricsControl', () => {
       )).to.be.true;
     });
 
+    it('includes columns based on verbose_name', () => {
+      const { wrapper } = setup();
+
+      expect(!!wrapper.instance().selectFilterOption(
+        { metric_name: 'sum__num', verbose_name: 'babies', optionName: '_col_sum_num' },
+        'bab',
+      )).to.be.true;
+    });
+
     it('excludes auto generated avg metrics for sqla', () => {
       const { wrapper } = setup();
 

superset/assets/src/explore/components/controls/MetricsControl.jsx

@@ -221,11 +221,15 @@ export default class MetricsControl extends React.PureComponent {
       }
       const valueAfterAggregate = filterValue.substring(filterValue.indexOf('(') + 1, endIndex);
       return option.column_name &&
-        (option.column_name.toLowerCase().indexOf(valueAfterAggregate.toLowerCase()) >= 0);
+        (option.column_name.toLowerCase().indexOf(valueAfterAggregate) >= 0);
     }
     return option.optionName &&
-      (!option.metric_name || !this.isAutoGeneratedMetric(option)) &&
-      (option.optionName.toLowerCase().indexOf(filterValue.toLowerCase()) >= 0);
+      (!option.metric_name || !this.isAutoGeneratedMetric(option) || option.verbose_name) && (
+        option.optionName.toLowerCase().indexOf(filterValue) >= 0 ||
+        (
+          option.verbose_name && option.verbose_name.toLowerCase().indexOf(filterValue) >= 0
+        )
+      );
   }
 
   render() {

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

@@ -28,6 +28,7 @@ const propTypes = {
   placeholder: PropTypes.string,
   noResultsText: PropTypes.string,
   refFunc: PropTypes.func,
+  filterOption: PropTypes.func,
 };
 
 const defaultProps = {
@@ -131,6 +132,7 @@ export default class SelectControl extends React.PureComponent {
       selectComponent: this.props.freeForm ? Creatable : Select,
       disabled: this.props.disabled,
       refFunc: this.props.refFunc,
+      filterOption: this.props.filterOption,
     };
     return (
       <div>

superset/assets/src/explore/controls.jsx

@@ -103,6 +103,10 @@ const groupByControl = {
   optionRenderer: c => <ColumnOption column={c} showType />,
   valueRenderer: c => <ColumnOption column={c} />,
   valueKey: 'column_name',
+  filterOption: (opt, text) => (
+    (opt.column_name && opt.column_name.toLowerCase().indexOf(text) >= 0) ||
+    (opt.verbose_name && opt.verbose_name.toLowerCase().indexOf(text) >= 0)
+  ),
   mapStateToProps: (state, control) => {
     const newState = {};
     if (state.datasource) {