From ab01b40a31e78ae8530a4d38614089f1e7287fbc Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Feb 2019 07:05:36 -0700 Subject: [PATCH 01/14] [Input controls vis] replace react-input-range with EuiDualRange --- package.json | 1 - .../__snapshots__/range_control.test.js.snap | 129 +++---------- .../public/components/vis/_vis.scss | 4 - .../public/components/vis/range_control.js | 182 ++++-------------- .../components/vis/range_control.test.js | 60 +----- src/legacy/ui/public/validated_range/index.js | 20 ++ .../public/validated_range/is_range_valid.js | 61 ++++++ .../validated_range/is_range_valid.test.js | 59 ++++++ .../validated_range/validated_dual_range.js | 88 +++++++++ yarn.lock | 13 -- 10 files changed, 299 insertions(+), 318 deletions(-) create mode 100644 src/legacy/ui/public/validated_range/index.js create mode 100644 src/legacy/ui/public/validated_range/is_range_valid.js create mode 100644 src/legacy/ui/public/validated_range/is_range_valid.test.js create mode 100644 src/legacy/ui/public/validated_range/validated_dual_range.js diff --git a/package.json b/package.json index 5f38ad2e3ec5f..b91819c5baf2c 100644 --- a/package.json +++ b/package.json @@ -198,7 +198,6 @@ "react-color": "^2.13.8", "react-dom": "^16.6.0", "react-grid-layout": "^0.16.2", - "react-input-range": "^1.3.0", "react-markdown": "^3.1.4", "react-redux": "^5.0.7", "react-router-dom": "^4.3.1", diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap index 19b7a7aeb64ca..1df26e8d09366 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap @@ -7,18 +7,9 @@ exports[`disabled 1`] = ` id="mock-range-control" label="range control" > - `; @@ -30,94 +21,32 @@ exports[`renders RangeControl 1`] = ` id="mock-range-control" label="range control" > - - - - - - - - - - - - - + `; diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss index dae5adff0a439..fdc99d84984df 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss @@ -20,7 +20,3 @@ left: 0% !important; } } - -.icvInputRange__container { - min-width: $euiSize * 10 !important; // !important needed for IE -} diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js index 0fad0f0cb92d6..96df73958d933 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js @@ -17,108 +17,38 @@ * under the License. */ -import _ from 'lodash'; +import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import InputRange from 'react-input-range'; import { FormRow } from './form_row'; import { injectI18n } from '@kbn/i18n/react'; - -import { - EuiFormRow, - EuiFlexGroup, - EuiFlexItem, - EuiRange, -} from '@elastic/eui'; - -const toState = ({ control }) => { - const sliderValue = control.hasValue() ? - control.value : - // InputRange component does not have an "empty state" - // Faking an empty state by setting the slider value range to length of zero anchored at the range minimum - { - min: control.min, - max: control.min - }; - const state = { - sliderValue, - minValue: control.hasValue() ? control.value.min : '', - maxValue: control.hasValue() ? control.value.max : '', - isRangeValid: true, - errorMessage: '', - }; - return state; -}; +import { ValidatedDualRange } from 'ui/validated_range'; class RangeControlUi extends Component { - constructor(props) { - super(props); - - this.state = toState(props); - } - - componentWillReceiveProps = (nextProps) => { - this.setState(toState(nextProps)); - }; - - handleOnChange = (value) => { - this.setState({ - sliderValue: value, - minValue: value.min, - isRangeValid: true, - maxValue: value.max, - errorMessage: '', - }); - }; - - handleOnChangeComplete = (value) => { - this.props.stageFilter(this.props.controlIndex, value); - }; - - handleMinChange = (evt) => { - this.handleChange(parseFloat(evt.target.value), this.state.maxValue); - }; - - handleMaxChange = (evt) => { - this.handleChange(this.state.minValue, parseFloat(evt.target.value)); - }; - - handleChange = (min, max) => { - min = isNaN(min) ? '' : min; - max = isNaN(max) ? '' : max; - - const isMinValid = min !== ''; - const isMaxValid = max !== ''; - let isRangeValid = true; - let errorMessage = ''; - - if ((!isMinValid && isMaxValid) || (isMinValid && !isMaxValid)) { - isRangeValid = false; - errorMessage = this.props.intl.formatMessage({ - id: 'inputControl.vis.rangeControl.minMaxValidErrorMessage', - defaultMessage: 'both min and max must be set' - }); - } - - if (isMinValid && isMaxValid && max < min) { - isRangeValid = false; - errorMessage = this.props.intl.formatMessage({ - id: 'inputControl.vis.rangeControl.maxValidErrorMessage', - defaultMessage: 'max must be greater or equal to min' - }); + state = {}; + + static getDerivedStateFromProps(nextProps, prevState) { + const nextValue = nextProps.control.hasValue() + ? [nextProps.control.value.min, nextProps.control.value.max] + : ['', '']; + + if (nextValue !== prevState.prevValue) { + return { + value: nextValue, + prevValue: nextValue, + }; } - this.setState({ - minValue: min, - maxValue: max, - isRangeValid, - errorMessage, - }); + return null; + } - if (isRangeValid && isMaxValid && isMinValid) { - this.handleOnChangeComplete({ min, max }); - } - }; + onChangeComplete = _.debounce(value => { + const controlValue = { + min: value[0], + max: value[1] + }; + this.props.stageFilter(this.props.controlIndex, controlValue); + }, 200); formatLabel = (value) => { let formatedValue = value; @@ -132,60 +62,30 @@ class RangeControlUi extends Component { renderControl() { if (!this.props.control.isEnabled()) { return ( - ); } + const ticks = [ + { value: this.props.control.min, label: this.formatLabel(this.props.control.min) }, + { value: this.props.control.max, label: this.formatLabel(this.props.control.max) } + ]; + return ( - - - - - - - - - - - - - + ); } diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.test.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.test.js index 2697a898d8566..67e49044c505a 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.test.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.test.js @@ -18,8 +18,7 @@ */ import React from 'react'; -import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers'; -import { findTestSubject } from '@elastic/eui/lib/test'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { RangeControl, @@ -73,60 +72,3 @@ test('disabled', () => { />); expect(component).toMatchSnapshot(); // eslint-disable-line }); - -describe('min and max input values', () => { - const component = mountWithIntl( {}} - />); - - const BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR = 'both min and max must be set'; - - const getMinInput = () => findTestSubject(component, 'rangeControlMinInputValue'); - const getMaxInput = () => findTestSubject(component, 'rangeControlMaxInputValue'); - const getRangeRow = () => findTestSubject(component, 'rangeControlFormRow'); - - test('are initially blank', () => { - expect(getMinInput().props().value).toBe(''); - expect(getMaxInput().props().value).toBe(''); - }); - - test('min can be set manually', () => { - getMinInput().simulate('change', { target: { value: 3 } }); - expect(getMinInput().props().value).toBe(3); - }); - - test('when only min is specified an error is shown', () => { - expect(getRangeRow().text().indexOf(BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR)).toBeGreaterThan(-1); - }); - - test('max can be set manually', () => { - getMaxInput().simulate('change', { target: { value: 6 } }); - expect(getMaxInput().props().value).toBe(6); - }); - - test('when both min and max are set there is no error', () => { - expect(getRangeRow().text().indexOf(BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR)).toBe(-1); - }); - - test('0 is a valid minimum value', () => { - getMinInput().simulate('change', { target: { value: 0 } }); - expect(getMinInput().props().value).toBe(0); - expect(getRangeRow().text().indexOf(BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR)).toBe(-1); - }); - - test('min can be deleted and there will be an error shown', () => { - getMinInput().simulate('change', { target: { value: '' } }); - expect(getMinInput().props().value).toBe(''); - expect(getRangeRow().text().indexOf(BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR)).toBeGreaterThan(-1); - }); - - test('both max and min can be deleted and there will not be an error shown', () => { - getMaxInput().simulate('change', { target: { value: '' } }); - expect(getMaxInput().props().value).toBe(''); - expect(getRangeRow().text().indexOf(BOTH_MIN_AND_MAX_MUST_BE_SET_ERROR)).toBe(-1); - }); -}); - - diff --git a/src/legacy/ui/public/validated_range/index.js b/src/legacy/ui/public/validated_range/index.js new file mode 100644 index 0000000000000..bc643373f5e60 --- /dev/null +++ b/src/legacy/ui/public/validated_range/index.js @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { ValidatedDualRange } from './validated_dual_range'; diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js new file mode 100644 index 0000000000000..9f1d5310fdd8b --- /dev/null +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -0,0 +1,61 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +const LOWER_VALUE_INDEX = 0; +const UPPER_VALUE_INDEX = 1; + +export function isRangeValid(value, min, max, formatMessage) { + const lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX]; + const upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX]; + + const isLowerValueValid = lowerValue !== ''; + const isUpperValueValid = upperValue !== ''; + let isValid = true; + let errorMessage = ''; + + if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) { + isValid = false; + errorMessage = formatMessage({ + id: 'common.ui.dualRangeControl.mustSetBothErrorMessage', + defaultMessage: 'both lower and upper value must be set' + }); + } + + if (lowerValue < min || upperValue > max) { + isValid = false; + errorMessage = formatMessage({ + id: 'common.ui.dualRangeControl.outsideOfRangeErrorMessage', + values: { min, max }, + defaultMessage: `must be between ${min} and ${max}` + }); + } + + if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) { + isValid = false; + errorMessage = formatMessage({ + id: 'common.ui.dualRangeControl.upperValidErrorMessage', + defaultMessage: 'upper must be greater or equal to lower' + }); + } + + return { + isValid, + errorMessage, + }; +} diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js new file mode 100644 index 0000000000000..d3f8d3b78cc13 --- /dev/null +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -0,0 +1,59 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { isRangeValid } from './is_range_valid'; + +const formatMessageMock = () => { + return ''; +}; + +it('Should return true when lower and upper values are set and between min and max', () => { + const { isValid } = isRangeValid([1, 2], 0, 10, formatMessageMock); + expect(isValid).toBe(true); +}); + +it('Should return true when lower and upper values are not set (empty range)', () => { + const { isValid } = isRangeValid(['', ''], 0, 10, formatMessageMock); + expect(isValid).toBe(true); +}); + +it('Should return false when lower value is not set and upper value is set', () => { + const { isValid, } = isRangeValid(['', 2], 0, 10, formatMessageMock); + expect(isValid).toBe(false); +}); + +it('Should return false when lower value is set and upper value is not set', () => { + const { isValid, } = isRangeValid([1, ''], 0, 10, formatMessageMock); + expect(isValid).toBe(false); +}); + +it('Should return false when lower value is greater than upper value', () => { + const { isValid, } = isRangeValid([2, 1], 0, 10, formatMessageMock); + expect(isValid).toBe(false); +}); + +it('Should return false when lower value is less than min', () => { + const { isValid, } = isRangeValid([-1, 2], 0, 10, formatMessageMock); + expect(isValid).toBe(false); +}); + +it('Should return false when upper value is greater than max', () => { + const { isValid, } = isRangeValid([1, 11], 0, 10, formatMessageMock); + expect(isValid).toBe(false); +}); diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js new file mode 100644 index 0000000000000..cd8c9bd3b10d4 --- /dev/null +++ b/src/legacy/ui/public/validated_range/validated_dual_range.js @@ -0,0 +1,88 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { Component } from 'react'; +import { injectI18n } from '@kbn/i18n/react'; +import { isRangeValid } from './is_range_valid'; + +import { + EuiFormRow, + EuiDualRange, +} from '@elastic/eui'; + +// Wrapper around EuiDualRange that ensures onChange callback is only called when range value +// is valid and within min/max +class ValidatedDualRangeUi extends Component { + state = {}; + + static getDerivedStateFromProps(nextProps, prevState) { + if (nextProps.value !== prevState.prevValue) { + const { isValid, errorMessage } = isRangeValid( + nextProps.value, + nextProps.min, + nextProps.max, + nextProps.intl.formatMessage); + return { + value: nextProps.value, + prevValue: nextProps.value, + isValid, + errorMessage, + }; + } + + return null; + } + + onChange = (value) => { + const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max, this.props.intl.formatMessage); + + this.setState({ + value, + isValid, + errorMessage, + }); + + if (isValid) { + this.props.onChange(value); + } + }; + + render() { + const { + value, // eslint-disable-line no-unused-vars + onChange, // eslint-disable-line no-unused-vars + ...rest + } = this.props; + + return ( + + + + ); + } +} + +export const ValidatedDualRange = injectI18n(ValidatedDualRangeUi); diff --git a/yarn.lock b/yarn.lock index 7d2b7c51c963a..048deec4186a7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3148,11 +3148,6 @@ attr-accept@^1.1.3: dependencies: core-js "^2.5.0" -autobind-decorator@^1.3.4: - version "1.4.3" - resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.4.3.tgz#4c96ffa77b10622ede24f110f5dbbf56691417d1" - integrity sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E= - autolinker@~0.15.0: version "0.15.3" resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832" @@ -17687,14 +17682,6 @@ react-input-autosize@^2.1.2, react-input-autosize@^2.2.1: dependencies: prop-types "^15.5.8" -react-input-range@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/react-input-range/-/react-input-range-1.3.0.tgz#f96d001631ab817417f1e26d8f9f9684b4827f59" - integrity sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k= - dependencies: - autobind-decorator "^1.3.4" - prop-types "^15.5.8" - react-intl@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.8.0.tgz#20b0c1f01d1292427768aa8ec9e51ab7e36503ba" From 42e3bcf74c61aa570609052ce8504b9bfa7518b4 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Feb 2019 07:35:52 -0700 Subject: [PATCH 02/14] remove unneeded styles --- .../public/components/vis/_vis.scss | 17 --- .../styles/_legacy/components/_index.scss | 1 - .../components/_react_input_range.scss | 104 ------------------ 3 files changed, 122 deletions(-) delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_react_input_range.scss diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss index fdc99d84984df..d42c2c5f263c7 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss @@ -2,21 +2,4 @@ width: 100%; margin: 0 $euiSizeXS; padding: $euiSizeS; - - // Removes the browser's number stepper - input[type=number]::-webkit-inner-spin-button, - input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - - // hide slider labels since they are displayed in inputs - .input-range__track .input-range__label-container { - display: none; - } - - // do not center min/max labels - otherwise the overflow slider sides - .input-range__label-container { - left: 0% !important; - } } diff --git a/src/legacy/ui/public/styles/_legacy/components/_index.scss b/src/legacy/ui/public/styles/_legacy/components/_index.scss index f6b433b89af80..6ba5ef9ccb201 100644 --- a/src/legacy/ui/public/styles/_legacy/components/_index.scss +++ b/src/legacy/ui/public/styles/_legacy/components/_index.scss @@ -7,7 +7,6 @@ @import './navbar'; @import './config'; @import './pagination'; -@import './react_input_range'; @import './sidebar'; @import './spinner'; @import './table'; diff --git a/src/legacy/ui/public/styles/_legacy/components/_react_input_range.scss b/src/legacy/ui/public/styles/_legacy/components/_react_input_range.scss deleted file mode 100644 index 5460834f00457..0000000000000 --- a/src/legacy/ui/public/styles/_legacy/components/_react_input_range.scss +++ /dev/null @@ -1,104 +0,0 @@ -// SASSTODO: rem values are actually based off of a 14px base -// so changing them to EUI variables would alter computed values -.input-range__slider { - appearance: none; - background: $euiColorPrimary; - border: 1px solid $euiColorPrimary; - border-radius: 100%; - cursor: pointer; - display: block; - height: 1rem; - margin-left: -0.5rem; - margin-top: -0.65rem; - outline: none; - position: absolute; - top: 50%; - transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; - width: 1rem; - - &:active { - transform: scale(1.3); - } - - &:focus { - @include euiFocusRing('large'); - } -} - -.input-range--disabled .input-range__slider { - background: $euiColorLightShade; - border: 1px solid $euiColorLightShade; - box-shadow: none; - transform: none; -} - -.input-range__slider-container { - transition: left 0.3s ease-out; -} - -.input-range__label { - color: $euiColorMediumShade; - font-size: 0.8rem; - transform: translateZ(0); - white-space: nowrap; -} - -.input-range__label--min, -.input-range__label--max { - bottom: -1.4rem; - position: absolute; -} - -.input-range__label--min { - left: 0; -} - -.input-range__label--max { - right: 0; -} - -.input-range__label--value { - position: absolute; - top: -1.8rem; -} - -.input-range__label-container { - left: -50%; - position: relative; -} - -.input-range__label--max .input-range__label-container { - left: 50%; -} - -.input-range__track { - background: $euiColorLightShade; - border-radius: 0.3rem; - cursor: pointer; - display: block; - height: 0.3rem; - position: relative; - transition: left 0.3s ease-out, width 0.3s ease-out; -} - -.input-range--disabled .input-range__track { - background: $euiColorLightShade; -} - -.input-range__track--background { - left: 0; - margin-top: -0.15rem; - position: absolute; - right: 0; - top: 50%; -} - -.input-range__track--active { - background: $euiColorPrimary; -} - -.input-range { - margin: 0 $euiSizeS; - position: relative; - width: calc(100% - #{$euiSize}); -} From 94dc5a56510b6a329a633abef15af719c44b5c38 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Feb 2019 11:45:59 -0700 Subject: [PATCH 03/14] correctly format I18n with variables --- src/legacy/ui/public/validated_range/is_range_valid.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js index 9f1d5310fdd8b..c1c2d910dc106 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -41,8 +41,11 @@ export function isRangeValid(value, min, max, formatMessage) { isValid = false; errorMessage = formatMessage({ id: 'common.ui.dualRangeControl.outsideOfRangeErrorMessage', - values: { min, max }, - defaultMessage: `must be between ${min} and ${max}` + defaultMessage: 'must be between {min} and {max}' + }, + { + min, + max }); } From c17879d5b51fa4b45052861c05a7389146b02b39 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Feb 2019 15:12:35 -0700 Subject: [PATCH 04/14] fix problems with long decimals --- .../__snapshots__/range_control.test.js.snap | 4 +- .../public/components/vis/range_control.js | 42 +++++++++++++------ .../components/vis/range_control.test.js | 12 ++++++ .../public/validated_range/is_range_valid.js | 2 +- .../validated_range/is_range_valid.test.js | 14 +++---- 5 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap index 1df26e8d09366..1eb8619cf231d 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap @@ -32,11 +32,11 @@ exports[`renders RangeControl 1`] = ` ticks={ Array [ Object { - "label": "0", + "label": 0, "value": 0, }, Object { - "label": "100", + "label": 100, "value": 100, }, ] diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js index 96df73958d933..517e878f64708 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js @@ -24,6 +24,27 @@ import { FormRow } from './form_row'; import { injectI18n } from '@kbn/i18n/react'; import { ValidatedDualRange } from 'ui/validated_range'; + +function roundWithPrecision(value, decimalPlaces, roundFunction) { + if (decimalPlaces <= 0) { + return roundFunction(value); + } + + let results = value; + results = results * Math.pow(10, decimalPlaces); + results = roundFunction(results); + results = results / Math.pow(10, decimalPlaces); + return results; +} + +export function ceilWithPrecision(value, decimalPlaces) { + return roundWithPrecision(value, decimalPlaces, Math.ceil); +} + +export function floorWithPrecision(value, decimalPlaces) { + return roundWithPrecision(value, decimalPlaces, Math.floor); +} + class RangeControlUi extends Component { state = {}; @@ -50,14 +71,7 @@ class RangeControlUi extends Component { this.props.stageFilter(this.props.controlIndex, controlValue); }, 200); - formatLabel = (value) => { - let formatedValue = value; - const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces'); - if (decimalPlaces !== null && decimalPlaces >= 0) { - formatedValue = value.toFixed(decimalPlaces); - } - return formatedValue; - }; + renderControl() { if (!this.props.control.isEnabled()) { @@ -69,16 +83,20 @@ class RangeControlUi extends Component { ); } + const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces', 0); + const min = floorWithPrecision(this.props.control.min, decimalPlaces); + const max = ceilWithPrecision(this.props.control.max, decimalPlaces); + const ticks = [ - { value: this.props.control.min, label: this.formatLabel(this.props.control.min) }, - { value: this.props.control.max, label: this.formatLabel(this.props.control.max) } + { value: min, label: min }, + { value: max, label: max } ]; return ( { />); expect(component).toMatchSnapshot(); // eslint-disable-line }); + +test('ceilWithPrecision', () => { + expect(ceilWithPrecision(999.133, 0)).toBe(1000); + expect(ceilWithPrecision(999.133, 2)).toBe(999.14); +}); + +test('floorWithPrecision', () => { + expect(floorWithPrecision(100.777, 0)).toBe(100); + expect(floorWithPrecision(100.777, 2)).toBe(100.77); +}); diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js index c1c2d910dc106..a3d73b056a00e 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -37,7 +37,7 @@ export function isRangeValid(value, min, max, formatMessage) { }); } - if (lowerValue < min || upperValue > max) { + if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) { isValid = false; errorMessage = formatMessage({ id: 'common.ui.dualRangeControl.outsideOfRangeErrorMessage', diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index d3f8d3b78cc13..8bcb4d7ad795c 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -24,36 +24,36 @@ const formatMessageMock = () => { }; it('Should return true when lower and upper values are set and between min and max', () => { - const { isValid } = isRangeValid([1, 2], 0, 10, formatMessageMock); + const { isValid } = isRangeValid([2, 3], 1, 10, formatMessageMock); expect(isValid).toBe(true); }); it('Should return true when lower and upper values are not set (empty range)', () => { - const { isValid } = isRangeValid(['', ''], 0, 10, formatMessageMock); + const { isValid } = isRangeValid(['', ''], 1, 10, formatMessageMock); expect(isValid).toBe(true); }); it('Should return false when lower value is not set and upper value is set', () => { - const { isValid, } = isRangeValid(['', 2], 0, 10, formatMessageMock); + const { isValid, } = isRangeValid(['', 3], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is set and upper value is not set', () => { - const { isValid, } = isRangeValid([1, ''], 0, 10, formatMessageMock); + const { isValid, } = isRangeValid([2, ''], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is greater than upper value', () => { - const { isValid, } = isRangeValid([2, 1], 0, 10, formatMessageMock); + const { isValid, } = isRangeValid([3, 2], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is less than min', () => { - const { isValid, } = isRangeValid([-1, 2], 0, 10, formatMessageMock); + const { isValid, } = isRangeValid([0, 2], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when upper value is greater than max', () => { - const { isValid, } = isRangeValid([1, 11], 0, 10, formatMessageMock); + const { isValid, } = isRangeValid([0, 12], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); From 69fde715d1289c6317c60f28d5a2ae0c750baa96 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 14 Feb 2019 15:15:19 -0700 Subject: [PATCH 05/14] fix one test case --- src/legacy/ui/public/validated_range/is_range_valid.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index 8bcb4d7ad795c..131f3721fdd30 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -54,6 +54,6 @@ it('Should return false when lower value is less than min', () => { }); it('Should return false when upper value is greater than max', () => { - const { isValid, } = isRangeValid([0, 12], 1, 10, formatMessageMock); + const { isValid, } = isRangeValid([2, 12], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); From 74320ad144eafbd93fa57ccdae1944b94c3c6b49 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 06:47:01 -0700 Subject: [PATCH 06/14] clean-up error message text, remove extra commas in jest test --- src/legacy/ui/public/validated_range/is_range_valid.js | 6 +++--- .../ui/public/validated_range/is_range_valid.test.js | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js index a3d73b056a00e..e81752d04bf50 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -33,7 +33,7 @@ export function isRangeValid(value, min, max, formatMessage) { isValid = false; errorMessage = formatMessage({ id: 'common.ui.dualRangeControl.mustSetBothErrorMessage', - defaultMessage: 'both lower and upper value must be set' + defaultMessage: 'Both lower and upper values must be set' }); } @@ -41,7 +41,7 @@ export function isRangeValid(value, min, max, formatMessage) { isValid = false; errorMessage = formatMessage({ id: 'common.ui.dualRangeControl.outsideOfRangeErrorMessage', - defaultMessage: 'must be between {min} and {max}' + defaultMessage: 'Values must be on or between {min} and {max}' }, { min, @@ -53,7 +53,7 @@ export function isRangeValid(value, min, max, formatMessage) { isValid = false; errorMessage = formatMessage({ id: 'common.ui.dualRangeControl.upperValidErrorMessage', - defaultMessage: 'upper must be greater or equal to lower' + defaultMessage: 'Upper value must be greater or equal to lower value' }); } diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index 131f3721fdd30..9791c18f16056 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -34,26 +34,26 @@ it('Should return true when lower and upper values are not set (empty range)', ( }); it('Should return false when lower value is not set and upper value is set', () => { - const { isValid, } = isRangeValid(['', 3], 1, 10, formatMessageMock); + const { isValid } = isRangeValid(['', 3], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is set and upper value is not set', () => { - const { isValid, } = isRangeValid([2, ''], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([2, ''], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is greater than upper value', () => { - const { isValid, } = isRangeValid([3, 2], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([3, 2], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when lower value is less than min', () => { - const { isValid, } = isRangeValid([0, 2], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([0, 2], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); it('Should return false when upper value is greater than max', () => { - const { isValid, } = isRangeValid([2, 12], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([2, 12], 1, 10, formatMessageMock); expect(isValid).toBe(false); }); From 0cc4468b10b985bd9ea474448fa694743348d143 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 07:00:55 -0700 Subject: [PATCH 07/14] fix bug where values were returned as strings --- src/legacy/ui/public/validated_range/is_range_valid.js | 10 ++++++++-- .../ui/public/validated_range/is_range_valid.test.js | 5 +++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js index e81752d04bf50..9f4c5a469a8fc 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -21,11 +21,17 @@ const LOWER_VALUE_INDEX = 0; const UPPER_VALUE_INDEX = 1; export function isRangeValid(value, min, max, formatMessage) { - const lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX]; - const upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX]; + let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX]; + let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX]; const isLowerValueValid = lowerValue !== ''; const isUpperValueValid = upperValue !== ''; + if (isLowerValueValid) { + lowerValue = parseFloat(lowerValue); + } + if (isUpperValueValid) { + upperValue = parseFloat(upperValue); + } let isValid = true; let errorMessage = ''; diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index 9791c18f16056..6073308295245 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -28,6 +28,11 @@ it('Should return true when lower and upper values are set and between min and m expect(isValid).toBe(true); }); +it('Should handle string values and return true when lower and upper values are set and between min and max', () => { + const { isValid } = isRangeValid(['192', '1000'], 100, 1000, formatMessageMock); + expect(isValid).toBe(true); +}); + it('Should return true when lower and upper values are not set (empty range)', () => { const { isValid } = isRangeValid(['', ''], 1, 10, formatMessageMock); expect(isValid).toBe(true); From 392ce99aad19435bc72a7f75b0bbd5271873ddfd Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 07:10:45 -0700 Subject: [PATCH 08/14] use i18n.translate instead of passing formatMessage into isRangeValid --- .../public/validated_range/is_range_valid.js | 20 ++++++++----------- .../validated_range/is_range_valid.test.js | 20 ++++++++----------- .../validated_range/validated_dual_range.js | 10 +++------- 3 files changed, 19 insertions(+), 31 deletions(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.js b/src/legacy/ui/public/validated_range/is_range_valid.js index 9f4c5a469a8fc..101fc0c44b044 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.js @@ -17,10 +17,12 @@ * under the License. */ +import { i18n } from '@kbn/i18n'; + const LOWER_VALUE_INDEX = 0; const UPPER_VALUE_INDEX = 1; -export function isRangeValid(value, min, max, formatMessage) { +export function isRangeValid(value, min, max) { let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX]; let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX]; @@ -37,28 +39,22 @@ export function isRangeValid(value, min, max, formatMessage) { if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) { isValid = false; - errorMessage = formatMessage({ - id: 'common.ui.dualRangeControl.mustSetBothErrorMessage', + errorMessage = i18n.translate('common.ui.dualRangeControl.mustSetBothErrorMessage', { defaultMessage: 'Both lower and upper values must be set' }); } if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) { isValid = false; - errorMessage = formatMessage({ - id: 'common.ui.dualRangeControl.outsideOfRangeErrorMessage', - defaultMessage: 'Values must be on or between {min} and {max}' - }, - { - min, - max + errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', { + defaultMessage: 'Values must be on or between {min} and {max}', + values: { min, max } }); } if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) { isValid = false; - errorMessage = formatMessage({ - id: 'common.ui.dualRangeControl.upperValidErrorMessage', + errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', { defaultMessage: 'Upper value must be greater or equal to lower value' }); } diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index 6073308295245..a5cec4ff46bbf 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -19,46 +19,42 @@ import { isRangeValid } from './is_range_valid'; -const formatMessageMock = () => { - return ''; -}; - it('Should return true when lower and upper values are set and between min and max', () => { - const { isValid } = isRangeValid([2, 3], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([2, 3], 1, 10); expect(isValid).toBe(true); }); it('Should handle string values and return true when lower and upper values are set and between min and max', () => { - const { isValid } = isRangeValid(['192', '1000'], 100, 1000, formatMessageMock); + const { isValid } = isRangeValid(['192', '1000'], 100, 1000); expect(isValid).toBe(true); }); it('Should return true when lower and upper values are not set (empty range)', () => { - const { isValid } = isRangeValid(['', ''], 1, 10, formatMessageMock); + const { isValid } = isRangeValid(['', ''], 1, 10); expect(isValid).toBe(true); }); it('Should return false when lower value is not set and upper value is set', () => { - const { isValid } = isRangeValid(['', 3], 1, 10, formatMessageMock); + const { isValid } = isRangeValid(['', 3], 1, 10); expect(isValid).toBe(false); }); it('Should return false when lower value is set and upper value is not set', () => { - const { isValid } = isRangeValid([2, ''], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([2, ''], 1, 10); expect(isValid).toBe(false); }); it('Should return false when lower value is greater than upper value', () => { - const { isValid } = isRangeValid([3, 2], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([3, 2], 1, 10); expect(isValid).toBe(false); }); it('Should return false when lower value is less than min', () => { - const { isValid } = isRangeValid([0, 2], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([0, 2], 1, 10); expect(isValid).toBe(false); }); it('Should return false when upper value is greater than max', () => { - const { isValid } = isRangeValid([2, 12], 1, 10, formatMessageMock); + const { isValid } = isRangeValid([2, 12], 1, 10); expect(isValid).toBe(false); }); diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js index cd8c9bd3b10d4..55f887f492360 100644 --- a/src/legacy/ui/public/validated_range/validated_dual_range.js +++ b/src/legacy/ui/public/validated_range/validated_dual_range.js @@ -18,7 +18,6 @@ */ import React, { Component } from 'react'; -import { injectI18n } from '@kbn/i18n/react'; import { isRangeValid } from './is_range_valid'; import { @@ -28,7 +27,7 @@ import { // Wrapper around EuiDualRange that ensures onChange callback is only called when range value // is valid and within min/max -class ValidatedDualRangeUi extends Component { +export class ValidatedDualRange extends Component { state = {}; static getDerivedStateFromProps(nextProps, prevState) { @@ -36,8 +35,7 @@ class ValidatedDualRangeUi extends Component { const { isValid, errorMessage } = isRangeValid( nextProps.value, nextProps.min, - nextProps.max, - nextProps.intl.formatMessage); + nextProps.max); return { value: nextProps.value, prevValue: nextProps.value, @@ -50,7 +48,7 @@ class ValidatedDualRangeUi extends Component { } onChange = (value) => { - const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max, this.props.intl.formatMessage); + const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max); this.setState({ value, @@ -84,5 +82,3 @@ class ValidatedDualRangeUi extends Component { ); } } - -export const ValidatedDualRange = injectI18n(ValidatedDualRangeUi); From fbf2be7903d19a2618cc5abaf4a87d25f74a1940 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 07:14:51 -0700 Subject: [PATCH 09/14] assert error message in isRangeValid unit test --- .../public/validated_range/is_range_valid.test.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/legacy/ui/public/validated_range/is_range_valid.test.js b/src/legacy/ui/public/validated_range/is_range_valid.test.js index a5cec4ff46bbf..dc760972be5b5 100644 --- a/src/legacy/ui/public/validated_range/is_range_valid.test.js +++ b/src/legacy/ui/public/validated_range/is_range_valid.test.js @@ -35,26 +35,31 @@ it('Should return true when lower and upper values are not set (empty range)', ( }); it('Should return false when lower value is not set and upper value is set', () => { - const { isValid } = isRangeValid(['', 3], 1, 10); + const { isValid, errorMessage } = isRangeValid(['', 3], 1, 10); expect(isValid).toBe(false); + expect(errorMessage).toBe('Both lower and upper values must be set'); }); it('Should return false when lower value is set and upper value is not set', () => { - const { isValid } = isRangeValid([2, ''], 1, 10); + const { isValid, errorMessage } = isRangeValid([2, ''], 1, 10); expect(isValid).toBe(false); + expect(errorMessage).toBe('Both lower and upper values must be set'); }); it('Should return false when lower value is greater than upper value', () => { - const { isValid } = isRangeValid([3, 2], 1, 10); + const { isValid, errorMessage } = isRangeValid([3, 2], 1, 10); expect(isValid).toBe(false); + expect(errorMessage).toBe('Upper value must be greater or equal to lower value'); }); it('Should return false when lower value is less than min', () => { - const { isValid } = isRangeValid([0, 2], 1, 10); + const { isValid, errorMessage } = isRangeValid([0, 2], 1, 10); expect(isValid).toBe(false); + expect(errorMessage).toBe('Values must be on or between 1 and 10'); }); it('Should return false when upper value is greater than max', () => { - const { isValid } = isRangeValid([2, 12], 1, 10); + const { isValid, errorMessage } = isRangeValid([2, 12], 1, 10); expect(isValid).toBe(false); + expect(errorMessage).toBe('Values must be on or between 1 and 10'); }); From 81b6d27bc01f1d2ccc24c6d97474afa92d5a469a Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 07:55:13 -0700 Subject: [PATCH 10/14] changes from node scripts/i18n_check --fix --- x-pack/plugins/translations/translations/zh-CN.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 557603eb7d11a..48a923f07b4d2 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -778,8 +778,6 @@ "inputControl.vis.inputControlVis.clearFormButtonLabel": "清除表单", "inputControl.vis.listControl.selectPlaceholder": "选择......", "inputControl.vis.listControl.selectTextPlaceholder": "选择......", - "inputControl.vis.rangeControl.maxValidErrorMessage": "最大值必须大于或等于最小值", - "inputControl.vis.rangeControl.minMaxValidErrorMessage": "必须设置最小值和最大值", "inspectorViews.data.dataDescriptionTooltip": "查看可视化后面的数据", "inspectorViews.data.dataTitle": "数据", "inspectorViews.data.downloadCSVButtonLabel": "下载 CSV", @@ -8204,4 +8202,4 @@ "xpack.watcher.watchActionsTitle": "满足后将执行 {watchActionsCount, plural, one{# 个操作} other {# 个操作}}", "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。" } -} +} \ No newline at end of file From a2587c806857abc4d1ea2eb80187708272013cdb Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 09:00:25 -0700 Subject: [PATCH 11/14] remove localization from RangeControl component since it no longer has any text, update snapshots --- .../vis/__snapshots__/range_control.test.js.snap | 4 ++-- .../public/components/vis/range_control.js | 8 ++------ .../public/components/vis/range_control.test.js | 4 ++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap index 1eb8619cf231d..1544af0f6a52f 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap @@ -7,7 +7,7 @@ exports[`disabled 1`] = ` id="mock-range-control" label="range control" > - @@ -21,7 +21,7 @@ exports[`renders RangeControl 1`] = ` id="mock-range-control" label="range control" > - { - const component = shallowWithIntl( {}} @@ -67,7 +67,7 @@ test('disabled', () => { return false; } }; - const component = shallowWithIntl( {}} From c0ccc3a8687200e38d227b13375bd8ebe0480337 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 7 Mar 2019 10:07:20 -0700 Subject: [PATCH 12/14] another snapshot update --- .../components/vis/__snapshots__/input_control_vis.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap index 28562b9382a9e..3b88386020251 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap @@ -366,7 +366,7 @@ exports[`Renders range control 1`] = ` } } > - Date: Mon, 11 Mar 2019 15:22:36 -0600 Subject: [PATCH 13/14] ensure min and max are not null --- .../public/components/vis/range_control.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js index 09eed688b80ec..203b77ff1bea7 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js @@ -51,6 +51,13 @@ export class RangeControl extends Component { ? [nextProps.control.value.min, nextProps.control.value.max] : ['', '']; + if (nextProps.control.value.min == null) { + nextValue[0] = ''; + } + if (nextProps.control.value.max == null) { + nextValue[1] = ''; + } + if (nextValue !== prevState.prevValue) { return { value: nextValue, From 38d64dedc76fd83527bb91f2c7b1973c7b25eaa4 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 11 Mar 2019 15:27:13 -0600 Subject: [PATCH 14/14] check for value before checking if min/max is null --- .../input_control_vis/public/components/vis/range_control.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js index 203b77ff1bea7..ab2e9e2995ee5 100644 --- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js +++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.js @@ -51,10 +51,10 @@ export class RangeControl extends Component { ? [nextProps.control.value.min, nextProps.control.value.max] : ['', '']; - if (nextProps.control.value.min == null) { + if (nextProps.control.hasValue() && nextProps.control.value.min == null) { nextValue[0] = ''; } - if (nextProps.control.value.max == null) { + if (nextProps.control.hasValue() && nextProps.control.value.max == null) { nextValue[1] = ''; }