diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap index bbc30723109ee..86fce47fa887f 100644 --- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap +++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap @@ -28,19 +28,14 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = ` controlIndex={0} disableMsg={null} fetchOptions={[Function]} + formatOptionLabel={[Function]} id="mock-list-control" label="list control" multiselect={true} options={ Array [ - Object { - "label": "choice1", - "value": "choice1", - }, - Object { - "label": "choice2", - "value": "choice2", - }, + "choice1", + "choice2", ] } selectedOptions={Array []} @@ -167,19 +162,14 @@ exports[`Clear btns enabled when there are values 1`] = ` controlIndex={0} disableMsg={null} fetchOptions={[Function]} + formatOptionLabel={[Function]} id="mock-list-control" label="list control" multiselect={true} options={ Array [ - Object { - "label": "choice1", - "value": "choice1", - }, - Object { - "label": "choice2", - "value": "choice2", - }, + "choice1", + "choice2", ] } selectedOptions={Array []} @@ -306,19 +296,14 @@ exports[`Renders list control 1`] = ` controlIndex={0} disableMsg={null} fetchOptions={[Function]} + formatOptionLabel={[Function]} id="mock-list-control" label="list control" multiselect={true} options={ Array [ - Object { - "label": "choice1", - "value": "choice1", - }, - Object { - "label": "choice2", - "value": "choice2", - }, + "choice1", + "choice2", ] } selectedOptions={Array []} @@ -444,6 +429,7 @@ exports[`Renders range control 1`] = ` { return value; }, }; const mockRangeControl = { id: 'mock-range-control', @@ -53,7 +51,8 @@ const mockRangeControl = { label: 'range control', value: { min: 0, max: 0 }, min: 0, - max: 100 + max: 100, + format: (value) => { return value; } }; const updateFiltersOnChange = false; diff --git a/src/core_plugins/input_control_vis/public/components/vis/list_control.js b/src/core_plugins/input_control_vis/public/components/vis/list_control.js index cdf81f6f36c3a..125596431ed3b 100644 --- a/src/core_plugins/input_control_vis/public/components/vis/list_control.js +++ b/src/core_plugins/input_control_vis/public/components/vis/list_control.js @@ -43,7 +43,10 @@ class ListControlUi extends Component { } handleOnChange = (selectedOptions) => { - this.props.stageFilter(this.props.controlIndex, selectedOptions); + const selectedValues = selectedOptions.map(({ value }) => { + return value; + }); + this.props.stageFilter(this.props.controlIndex, selectedValues); } debouncedFetch = _.debounce(async (searchValue) => { @@ -77,11 +80,22 @@ class ListControlUi extends Component { ); } - const options = this.props.options.map(option => { + const options = this.props.options + .map(option => { + return { + label: this.props.formatOptionLabel(option).toString(), + value: option, + ['data-test-subj']: `option_${option.toString().replace(' ', '_')}` + }; + }) + .sort((a, b) => { + return a.label.toLowerCase().localeCompare(b.label.toLowerCase()); + }); + + const selectedOptions = this.props.selectedOptions.map(selectedOption => { return { - label: option.label, - value: option.value, - ['data-test-subj']: `option_${option.value.replace(' ', '_')}` + label: this.props.formatOptionLabel(selectedOption).toString(), + value: selectedOption, }; }); @@ -95,7 +109,7 @@ class ListControlUi extends Component { isLoading={this.state.isLoading} async={this.props.dynamicOptions} onSearchChange={this.props.dynamicOptions ? this.onSearchChange : undefined} - selectedOptions={this.props.selectedOptions} + selectedOptions={selectedOptions} onChange={this.handleOnChange} singleSelection={!this.props.multiselect} data-test-subj={`listControlSelect${this.props.controlIndex}`} @@ -117,16 +131,12 @@ class ListControlUi extends Component { } } -const comboBoxOptionShape = PropTypes.shape({ - label: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, -}); - ListControlUi.propTypes = { id: PropTypes.string.isRequired, label: PropTypes.string.isRequired, - selectedOptions: PropTypes.arrayOf(comboBoxOptionShape).isRequired, - options: PropTypes.arrayOf(comboBoxOptionShape), + selectedOptions: PropTypes.array.isRequired, + options: PropTypes.array, + formatOptionLabel: PropTypes.func.isRequired, disableMsg: PropTypes.string, multiselect: PropTypes.bool, dynamicOptions: PropTypes.bool, diff --git a/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js b/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js index e8b5c5fc8c814..729a35c4b9ed0 100644 --- a/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js +++ b/src/core_plugins/input_control_vis/public/components/vis/list_control.test.js @@ -25,10 +25,11 @@ import { ListControl, } from './list_control'; -const options = [ - { label: 'choice1', value: 'choice1' }, - { label: 'choice2', value: 'choice2' } -]; +const options = ['choice1', 'choice2']; + +const formatOptionLabel = (value) => { + return `${value} + formatting`; +}; let stageFilter; @@ -45,6 +46,7 @@ test('renders ListControl', () => { multiselect={true} controlIndex={0} stageFilter={stageFilter} + formatOptionLabel={formatOptionLabel} />); expect(component).toMatchSnapshot(); // eslint-disable-line }); @@ -56,6 +58,7 @@ test('disableMsg', () => { multiselect={true} controlIndex={0} stageFilter={stageFilter} + formatOptionLabel={formatOptionLabel} disableMsg={'control is disabled to test rendering when disabled'} />); expect(component).toMatchSnapshot(); // eslint-disable-line diff --git a/src/core_plugins/input_control_vis/public/control/control.js b/src/core_plugins/input_control_vis/public/control/control.js index f8637c852a0f0..9a27a3d3f1dbd 100644 --- a/src/core_plugins/input_control_vis/public/control/control.js +++ b/src/core_plugins/input_control_vis/public/control/control.js @@ -60,7 +60,7 @@ export class Control { throw new Error('fetch method not defined, subclass are required to implement'); } - format(value) { + format = (value) => { const field = this.filterManager.getField(); if (field) { return field.format.convert(value); diff --git a/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js b/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js index 8d15bdd58a1e0..fac023ab982a9 100644 --- a/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js +++ b/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.js @@ -29,15 +29,12 @@ export class PhraseFilterManager extends FilterManager { /** * Convert phrases into filter * - * @param {array} + * @param {array} phrases * @return {object} query filter * single phrase: match query * multiple phrases: bool query with should containing list of match_phrase queries */ - createFilter(selectedOptions) { - const phrases = selectedOptions.map(phrase => { - return phrase.value; - }); + createFilter(phrases) { let newFilter; if (phrases.length === 1) { newFilter = buildPhraseFilter( @@ -73,10 +70,7 @@ export class PhraseFilterManager extends FilterManager { return values .reduce((accumulator, currentValue) => { return accumulator.concat(currentValue); - }, []) - .map(value => { - return { value, label: value }; - }); + }, []); } /** diff --git a/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js b/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js index 98b6eef1da51a..76519e0f58edc 100644 --- a/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js +++ b/src/core_plugins/input_control_vis/public/control/filter_manager/phrase_filter_manager.test.js @@ -47,7 +47,7 @@ describe('PhraseFilterManager', function () { }); test('should create match phrase filter from single value', function () { - const newFilter = filterManager.createFilter([{ value: 'ios' }]); + const newFilter = filterManager.createFilter(['ios']); expect(newFilter).to.have.property('meta'); expect(newFilter.meta.index).to.be(indexPatternId); expect(newFilter.meta.controlledBy).to.be(controlId); @@ -56,7 +56,7 @@ describe('PhraseFilterManager', function () { }); test('should create bool filter from multiple values', function () { - const newFilter = filterManager.createFilter([{ value: 'ios' }, { value: 'win xp' }]); + const newFilter = filterManager.createFilter(['ios', 'win xp']); expect(newFilter).to.have.property('meta'); expect(newFilter.meta.index).to.be(indexPatternId); expect(newFilter.meta.controlledBy).to.be(controlId); @@ -102,7 +102,7 @@ describe('PhraseFilterManager', function () { } } ]); - expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }]); + expect(filterManager.getValueFromFilterBar()).to.eql(['ios']); }); test('should extract value from multiple filters', function () { @@ -128,7 +128,7 @@ describe('PhraseFilterManager', function () { } }, ]); - expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }, { value: 'win xp', label: 'win xp' }]); + expect(filterManager.getValueFromFilterBar()).to.eql(['ios', 'win xp']); }); test('should extract value from bool filter', function () { @@ -152,7 +152,7 @@ describe('PhraseFilterManager', function () { } } ]); - expect(filterManager.getValueFromFilterBar()).to.eql([{ value: 'ios', label: 'ios' }, { value: 'win xp', label: 'win xp' }]); + expect(filterManager.getValueFromFilterBar()).to.eql(['ios', 'win xp']); }); test('should return undefined when filter value can not be extracted from Kibana filter', function () { diff --git a/src/core_plugins/input_control_vis/public/control/list_control_factory.js b/src/core_plugins/input_control_vis/public/control/list_control_factory.js index 4afe13619e59d..b15448f9b22df 100644 --- a/src/core_plugins/input_control_vis/public/control/list_control_factory.js +++ b/src/core_plugins/input_control_vis/public/control/list_control_factory.js @@ -131,9 +131,7 @@ class ListControl extends Control { } const selectOptions = _.get(resp, 'aggregations.termsAgg.buckets', []).map((bucket) => { - return { label: this.format(bucket.key), value: bucket.key.toString() }; - }).sort((a, b) => { - return a.label.toLowerCase().localeCompare(b.label.toLowerCase()); + return bucket.key; }); if(selectOptions.length === 0 && !query) { diff --git a/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js b/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js index ad2ea56756f3c..a28066948896c 100644 --- a/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js +++ b/src/core_plugins/input_control_vis/public/control/list_control_factory.test.js @@ -119,16 +119,7 @@ describe('fetch', () => { test('should set selectOptions to results of terms aggregation', async () => { await listControl.fetch(); - expect(listControl.selectOptions).toEqual([ - { - 'label': 'Xi an Xianyang International Airport', - 'value': 'Xi an Xianyang International Airport', - }, - { - 'label': 'Zurich Airport', - 'value': 'Zurich Airport', - } - ]); + expect(listControl.selectOptions).toEqual(['Zurich Airport', 'Xi an Xianyang International Airport']); }); });