[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
This commit is contained in:
Maxime Beauchemin 2018-06-15 15:56:05 -07:00 committed by GitHub
parent de0aaf42ed
commit d5ebc430c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 4 deletions

View File

@ -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();

View File

@ -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() {

View File

@ -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>

View File

@ -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) {