From 9713e71151f57e6b75bbcc1d5f34564c950018f1 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 11:58:59 -0600
Subject: [PATCH 01/19] Move validated range files to new NP location

---
 .../public/validated_range/index.d.ts         |  25 ++++
 .../public/validated_range/index.js           |  20 +++
 .../public/validated_range/is_range_valid.js  |  73 +++++++++++
 .../validated_range/is_range_valid.test.js    |  70 +++++++++++
 .../validated_range/validated_dual_range.js   | 115 ++++++++++++++++++
 5 files changed, 303 insertions(+)
 create mode 100644 src/plugins/kibana_react/public/validated_range/index.d.ts
 create mode 100644 src/plugins/kibana_react/public/validated_range/index.js
 create mode 100644 src/plugins/kibana_react/public/validated_range/is_range_valid.js
 create mode 100644 src/plugins/kibana_react/public/validated_range/is_range_valid.test.js
 create mode 100644 src/plugins/kibana_react/public/validated_range/validated_dual_range.js

diff --git a/src/plugins/kibana_react/public/validated_range/index.d.ts b/src/plugins/kibana_react/public/validated_range/index.d.ts
new file mode 100644
index 00000000000000..50cacbc517be8b
--- /dev/null
+++ b/src/plugins/kibana_react/public/validated_range/index.d.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 from 'react';
+import { EuiRangeProps } from '@elastic/eui';
+
+export class ValidatedDualRange<EuiRangeProps> extends React.Component<EuiRangeProps> {
+  allowEmptyRange?: boolean;
+}
diff --git a/src/plugins/kibana_react/public/validated_range/index.js b/src/plugins/kibana_react/public/validated_range/index.js
new file mode 100644
index 00000000000000..bc643373f5e603
--- /dev/null
+++ b/src/plugins/kibana_react/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/plugins/kibana_react/public/validated_range/is_range_valid.js b/src/plugins/kibana_react/public/validated_range/is_range_valid.js
new file mode 100644
index 00000000000000..9b733815a66ba8
--- /dev/null
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.js
@@ -0,0 +1,73 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+const LOWER_VALUE_INDEX = 0;
+const UPPER_VALUE_INDEX = 1;
+
+export function isRangeValid(value, min, max, allowEmptyRange) {
+  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; //cannot use default props since that uses falsy check
+  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.toString() !== '';
+  const isUpperValueValid = upperValue.toString() !== '';
+  if (isLowerValueValid) {
+    lowerValue = parseFloat(lowerValue);
+  }
+  if (isUpperValueValid) {
+    upperValue = parseFloat(upperValue);
+  }
+  let isValid = true;
+  let errorMessage = '';
+
+  const bothMustBeSetErrorMessage = i18n.translate(
+    'common.ui.dualRangeControl.mustSetBothErrorMessage',
+    {
+      defaultMessage: 'Both lower and upper values must be set',
+    }
+  );
+  if (!allowEmptyRange && (!isLowerValueValid || !isUpperValueValid)) {
+    isValid = false;
+    errorMessage = bothMustBeSetErrorMessage;
+  } else if (
+    (!isLowerValueValid && isUpperValueValid) ||
+    (isLowerValueValid && !isUpperValueValid)
+  ) {
+    isValid = false;
+    errorMessage = bothMustBeSetErrorMessage;
+  } else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
+    isValid = false;
+    errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
+      defaultMessage: 'Values must be on or between {min} and {max}',
+      values: { min, max },
+    });
+  } else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
+    isValid = false;
+    errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
+      defaultMessage: 'Upper value must be greater or equal to lower value',
+    });
+  }
+
+  return {
+    isValid,
+    errorMessage,
+  };
+}
diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.test.js b/src/plugins/kibana_react/public/validated_range/is_range_valid.test.js
new file mode 100644
index 00000000000000..339c9b37acea1e
--- /dev/null
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.test.js
@@ -0,0 +1,70 @@
+/*
+ * 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';
+
+it('Should return true when lower and upper values are set and between min and max', () => {
+  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);
+  expect(isValid).toBe(true);
+});
+
+it('Should return true when lower and upper values are not set (empty range)', () => {
+  const { isValid } = isRangeValid(['', ''], 1, 10);
+  expect(isValid).toBe(true);
+});
+
+it('Should return false when lower and upper values are not set (empty range) and empty ranges are not allowed', () => {
+  const { isValid } = isRangeValid(['', ''], 1, 10, false);
+  expect(isValid).toBe(false);
+});
+
+it('Should return false when lower value is not set and upper value is set', () => {
+  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, 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, 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, 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, errorMessage } = isRangeValid([2, 12], 1, 10);
+  expect(isValid).toBe(false);
+  expect(errorMessage).toBe('Values must be on or between 1 and 10');
+});
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.js b/src/plugins/kibana_react/public/validated_range/validated_dual_range.js
new file mode 100644
index 00000000000000..3b0efba11afccc
--- /dev/null
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.js
@@ -0,0 +1,115 @@
+/*
+ * 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 PropTypes from 'prop-types';
+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
+export class ValidatedDualRange extends Component {
+  state = {};
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.value !== prevState.prevValue) {
+      const { isValid, errorMessage } = isRangeValid(
+        nextProps.value,
+        nextProps.min,
+        nextProps.max,
+        nextProps.allowEmptyRange
+      );
+      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.allowEmptyRange
+    );
+
+    this.setState({
+      value,
+      isValid,
+      errorMessage,
+    });
+
+    if (isValid) {
+      this.props.onChange(value);
+    }
+  };
+
+  render() {
+    const {
+      compressed,
+      fullWidth,
+      label,
+      formRowDisplay,
+      value, // eslint-disable-line no-unused-vars
+      onChange, // eslint-disable-line no-unused-vars
+      allowEmptyRange, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+
+    return (
+      <EuiFormRow
+        compressed={compressed}
+        fullWidth={fullWidth}
+        isInvalid={!this.state.isValid}
+        error={this.state.errorMessage ? [this.state.errorMessage] : []}
+        label={label}
+        display={formRowDisplay}
+      >
+        <EuiDualRange
+          compressed={compressed}
+          fullWidth={fullWidth}
+          value={this.state.value}
+          onChange={this._onChange}
+          focusable={false} // remove when #59039 is fixed
+          {...rest}
+        />
+      </EuiFormRow>
+    );
+  }
+}
+
+ValidatedDualRange.propTypes = {
+  allowEmptyRange: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  compressed: PropTypes.bool,
+  label: PropTypes.node,
+  formRowDisplay: PropTypes.string,
+};
+
+ValidatedDualRange.defaultProps = {
+  allowEmptyRange: true,
+  fullWidth: false,
+  compressed: false,
+};

From c53f20d3b724e5cd33639767bdf9041674a12a8b Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 12:00:57 -0600
Subject: [PATCH 02/19] Update refs in code

---
 .../input_control_vis/public/components/vis/range_control.tsx  | 3 ++-
 .../core_plugins/input_control_vis/public/legacy_imports.ts    | 2 --
 .../layer_panel/layer_settings/layer_settings.js               | 2 +-
 .../styles/vector/components/size/size_range_selector.js       | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
index cd3982afd9afd5..38815ae2c1e633 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
@@ -20,7 +20,8 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
-import { ValidatedDualRange } from '../../legacy_imports';
+// @ts-ignore
+import { ValidatedDualRange } from '../../../../kibana_react/public/validate_range';
 import { FormRow } from './form_row';
 import { RangeControl as RangeControlClass } from '../../control/range_control_factory';
 
diff --git a/src/legacy/core_plugins/input_control_vis/public/legacy_imports.ts b/src/legacy/core_plugins/input_control_vis/public/legacy_imports.ts
index b6c4eb28e974f2..8c58ac2386da43 100644
--- a/src/legacy/core_plugins/input_control_vis/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/input_control_vis/public/legacy_imports.ts
@@ -22,7 +22,5 @@ import { SearchSource as SearchSourceClass, ISearchSource } from '../../../../pl
 
 export { SearchSourceFields } from '../../../../plugins/data/public';
 
-export { ValidatedDualRange } from 'ui/validated_range';
-
 export type SearchSource = Class<ISearchSource>;
 export const SearchSource = SearchSourceClass;
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index ac17915b5f2776..d4ffc724788a69 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -11,7 +11,7 @@ import { EuiTitle, EuiPanel, EuiFormRow, EuiFieldText, EuiSpacer } from '@elasti
 import { ValidatedRange } from '../../../components/validated_range';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ValidatedDualRange } from 'ui/validated_range';
+import { ValidatedDualRange } from '../../../../../../../../src/plugins/kibana_react/public/validated_range';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 export function LayerSettings(props) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
index 1d5815a84920cb..2afd5175f6a19d 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ValidatedDualRange } from 'ui/validated_range';
+import { ValidatedDualRange } from '../../../../../../../../../../src/plugins/kibana_react/public/validated_range';
 import { MIN_SIZE, MAX_SIZE } from '../../vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 

From 1cc4646f8932bd3b2ea9b15445650bffc15af57a Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 12:03:11 -0600
Subject: [PATCH 03/19] Clean up old validated range files

---
 .../ui/public/validated_range/index.d.ts      |  25 ----
 src/legacy/ui/public/validated_range/index.js |  20 ---
 .../public/validated_range/is_range_valid.js  |  73 -----------
 .../validated_range/is_range_valid.test.js    |  70 -----------
 .../validated_range/validated_dual_range.js   | 115 ------------------
 5 files changed, 303 deletions(-)
 delete mode 100644 src/legacy/ui/public/validated_range/index.d.ts
 delete mode 100644 src/legacy/ui/public/validated_range/index.js
 delete mode 100644 src/legacy/ui/public/validated_range/is_range_valid.js
 delete mode 100644 src/legacy/ui/public/validated_range/is_range_valid.test.js
 delete mode 100644 src/legacy/ui/public/validated_range/validated_dual_range.js

diff --git a/src/legacy/ui/public/validated_range/index.d.ts b/src/legacy/ui/public/validated_range/index.d.ts
deleted file mode 100644
index 50cacbc517be8b..00000000000000
--- a/src/legacy/ui/public/validated_range/index.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * 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 from 'react';
-import { EuiRangeProps } from '@elastic/eui';
-
-export class ValidatedDualRange<EuiRangeProps> extends React.Component<EuiRangeProps> {
-  allowEmptyRange?: boolean;
-}
diff --git a/src/legacy/ui/public/validated_range/index.js b/src/legacy/ui/public/validated_range/index.js
deleted file mode 100644
index bc643373f5e603..00000000000000
--- a/src/legacy/ui/public/validated_range/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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
deleted file mode 100644
index 9b733815a66ba8..00000000000000
--- a/src/legacy/ui/public/validated_range/is_range_valid.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-
-const LOWER_VALUE_INDEX = 0;
-const UPPER_VALUE_INDEX = 1;
-
-export function isRangeValid(value, min, max, allowEmptyRange) {
-  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; //cannot use default props since that uses falsy check
-  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.toString() !== '';
-  const isUpperValueValid = upperValue.toString() !== '';
-  if (isLowerValueValid) {
-    lowerValue = parseFloat(lowerValue);
-  }
-  if (isUpperValueValid) {
-    upperValue = parseFloat(upperValue);
-  }
-  let isValid = true;
-  let errorMessage = '';
-
-  const bothMustBeSetErrorMessage = i18n.translate(
-    'common.ui.dualRangeControl.mustSetBothErrorMessage',
-    {
-      defaultMessage: 'Both lower and upper values must be set',
-    }
-  );
-  if (!allowEmptyRange && (!isLowerValueValid || !isUpperValueValid)) {
-    isValid = false;
-    errorMessage = bothMustBeSetErrorMessage;
-  } else if (
-    (!isLowerValueValid && isUpperValueValid) ||
-    (isLowerValueValid && !isUpperValueValid)
-  ) {
-    isValid = false;
-    errorMessage = bothMustBeSetErrorMessage;
-  } else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
-    isValid = false;
-    errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
-      defaultMessage: 'Values must be on or between {min} and {max}',
-      values: { min, max },
-    });
-  } else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
-    isValid = false;
-    errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
-      defaultMessage: 'Upper value must be greater or equal to lower value',
-    });
-  }
-
-  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
deleted file mode 100644
index 339c9b37acea1e..00000000000000
--- a/src/legacy/ui/public/validated_range/is_range_valid.test.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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';
-
-it('Should return true when lower and upper values are set and between min and max', () => {
-  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);
-  expect(isValid).toBe(true);
-});
-
-it('Should return true when lower and upper values are not set (empty range)', () => {
-  const { isValid } = isRangeValid(['', ''], 1, 10);
-  expect(isValid).toBe(true);
-});
-
-it('Should return false when lower and upper values are not set (empty range) and empty ranges are not allowed', () => {
-  const { isValid } = isRangeValid(['', ''], 1, 10, false);
-  expect(isValid).toBe(false);
-});
-
-it('Should return false when lower value is not set and upper value is set', () => {
-  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, 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, 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, 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, errorMessage } = isRangeValid([2, 12], 1, 10);
-  expect(isValid).toBe(false);
-  expect(errorMessage).toBe('Values must be on or between 1 and 10');
-});
diff --git a/src/legacy/ui/public/validated_range/validated_dual_range.js b/src/legacy/ui/public/validated_range/validated_dual_range.js
deleted file mode 100644
index 3b0efba11afccc..00000000000000
--- a/src/legacy/ui/public/validated_range/validated_dual_range.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 PropTypes from 'prop-types';
-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
-export class ValidatedDualRange extends Component {
-  state = {};
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.value !== prevState.prevValue) {
-      const { isValid, errorMessage } = isRangeValid(
-        nextProps.value,
-        nextProps.min,
-        nextProps.max,
-        nextProps.allowEmptyRange
-      );
-      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.allowEmptyRange
-    );
-
-    this.setState({
-      value,
-      isValid,
-      errorMessage,
-    });
-
-    if (isValid) {
-      this.props.onChange(value);
-    }
-  };
-
-  render() {
-    const {
-      compressed,
-      fullWidth,
-      label,
-      formRowDisplay,
-      value, // eslint-disable-line no-unused-vars
-      onChange, // eslint-disable-line no-unused-vars
-      allowEmptyRange, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
-
-    return (
-      <EuiFormRow
-        compressed={compressed}
-        fullWidth={fullWidth}
-        isInvalid={!this.state.isValid}
-        error={this.state.errorMessage ? [this.state.errorMessage] : []}
-        label={label}
-        display={formRowDisplay}
-      >
-        <EuiDualRange
-          compressed={compressed}
-          fullWidth={fullWidth}
-          value={this.state.value}
-          onChange={this._onChange}
-          focusable={false} // remove when #59039 is fixed
-          {...rest}
-        />
-      </EuiFormRow>
-    );
-  }
-}
-
-ValidatedDualRange.propTypes = {
-  allowEmptyRange: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  label: PropTypes.node,
-  formRowDisplay: PropTypes.string,
-};
-
-ValidatedDualRange.defaultProps = {
-  allowEmptyRange: true,
-  fullWidth: false,
-  compressed: false,
-};

From c4daf994857b4f04f61c9159d1b72ec57ea0b406 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 12:41:01 -0600
Subject: [PATCH 04/19] Change relative paths to 'kibana-react'. Some clean up

---
 .../input_control_vis/public/components/vis/range_control.tsx | 4 +---
 .../vis_type_tagcloud/public/components/tag_cloud_options.tsx | 2 +-
 .../core_plugins/vis_type_tagcloud/public/legacy_imports.ts   | 1 -
 src/plugins/kibana_react/public/index.ts                      | 1 +
 .../layer_panel/layer_settings/layer_settings.js              | 2 +-
 .../styles/vector/components/size/size_range_selector.js      | 2 +-
 6 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
index 38815ae2c1e633..42dad0bffcc6b9 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
@@ -19,9 +19,7 @@
 
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-
-// @ts-ignore
-import { ValidatedDualRange } from '../../../../kibana_react/public/validate_range';
+import { ValidatedDualRange } from 'kibana-react';
 import { FormRow } from './form_row';
 import { RangeControl as RangeControlClass } from '../../control/range_control_factory';
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
index ab7c2cd980c424..f8245ca36e05d5 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
@@ -24,7 +24,7 @@ import { i18n } from '@kbn/i18n';
 import { VisOptionsProps } from '../../../vis_default_editor/public';
 import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
 import { TagCloudVisParams } from '../types';
-import { ValidatedDualRange } from '../legacy_imports';
+import { ValidatedDualRange } from 'kibana-react';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {
   const handleFontSizeChange = ([minFontSize, maxFontSize]: [string | number, string | number]) => {
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts
index d5b442bc5b3468..0d76bc5d8b68b0 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy_imports.ts
@@ -18,5 +18,4 @@
  */
 
 export { Schemas } from 'ui/agg_types';
-export { ValidatedDualRange } from 'ui/validated_range';
 export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index f04c6f1f19c338..7f3d531e1c210b 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -25,6 +25,7 @@ export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
 export * from './split_panel';
+export * from './validated_range'
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index d4ffc724788a69..c683b13085fd5d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -11,7 +11,7 @@ import { EuiTitle, EuiPanel, EuiFormRow, EuiFieldText, EuiSpacer } from '@elasti
 import { ValidatedRange } from '../../../components/validated_range';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ValidatedDualRange } from '../../../../../../../../src/plugins/kibana_react/public/validated_range';
+import { ValidatedDualRange } from 'kibana-react';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 export function LayerSettings(props) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
index 2afd5175f6a19d..ca6ad2a61bde43 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ValidatedDualRange } from '../../../../../../../../../../src/plugins/kibana_react/public/validated_range';
+import { ValidatedDualRange } from 'kibana-react';
 import { MIN_SIZE, MAX_SIZE } from '../../vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 

From 48d0eaabbf806bc151a4db9201bce36d6f404795 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 13:14:30 -0600
Subject: [PATCH 05/19] Change to relative paths

---
 .../input_control_vis/public/components/vis/range_control.tsx  | 2 +-
 .../vis_type_tagcloud/public/components/tag_cloud_options.tsx  | 3 +--
 src/plugins/kibana_react/public/index.ts                       | 2 +-
 .../layer_panel/layer_settings/layer_settings.js               | 2 +-
 .../styles/vector/components/size/size_range_selector.js       | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
index 42dad0bffcc6b9..0cd2a2b3319801 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx
@@ -19,7 +19,7 @@
 
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import { ValidatedDualRange } from 'kibana-react';
+import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_react/public';
 import { FormRow } from './form_row';
 import { RangeControl as RangeControlClass } from '../../control/range_control_factory';
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
index f8245ca36e05d5..a9e816f70cf531 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_options.tsx
@@ -20,11 +20,10 @@
 import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
+import { ValidatedDualRange } from '../../../../../../src/plugins/kibana_react/public';
 import { VisOptionsProps } from '../../../vis_default_editor/public';
 import { SelectOption, SwitchOption } from '../../../vis_type_vislib/public';
 import { TagCloudVisParams } from '../types';
-import { ValidatedDualRange } from 'kibana-react';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {
   const handleFontSizeChange = ([minFontSize, maxFontSize]: [string | number, string | number]) => {
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index 7f3d531e1c210b..0aa420f8c45fcf 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -25,7 +25,7 @@ export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
 export * from './split_panel';
-export * from './validated_range'
+export * from './validated_range';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index c683b13085fd5d..eb23607aa2150c 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -11,7 +11,7 @@ import { EuiTitle, EuiPanel, EuiFormRow, EuiFieldText, EuiSpacer } from '@elasti
 import { ValidatedRange } from '../../../components/validated_range';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { ValidatedDualRange } from 'kibana-react';
+import { ValidatedDualRange } from '../../../../../../../../src/plugins/kibana_react/public';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 export function LayerSettings(props) {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
index ca6ad2a61bde43..5de7b462136e16 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ValidatedDualRange } from 'kibana-react';
+import { ValidatedDualRange } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { MIN_SIZE, MAX_SIZE } from '../../vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 

From 6a5f8a962388894095bae40ae9bf098716612db4 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 9 Mar 2020 16:33:02 -0600
Subject: [PATCH 06/19] Fix i18n errors

---
 .../kibana_react/public/validated_range/is_range_valid.js   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.js b/src/plugins/kibana_react/public/validated_range/is_range_valid.js
index 9b733815a66ba8..a4297ea008b3db 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.js
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.js
@@ -39,7 +39,7 @@ export function isRangeValid(value, min, max, allowEmptyRange) {
   let errorMessage = '';
 
   const bothMustBeSetErrorMessage = i18n.translate(
-    'common.ui.dualRangeControl.mustSetBothErrorMessage',
+    'kibana-react.dualRangeControl.mustSetBothErrorMessage',
     {
       defaultMessage: 'Both lower and upper values must be set',
     }
@@ -55,13 +55,13 @@ export function isRangeValid(value, min, max, allowEmptyRange) {
     errorMessage = bothMustBeSetErrorMessage;
   } else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
     isValid = false;
-    errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
+    errorMessage = i18n.translate('kibana-react.dualRangeControl.outsideOfRangeErrorMessage', {
       defaultMessage: 'Values must be on or between {min} and {max}',
       values: { min, max },
     });
   } else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
     isValid = false;
-    errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
+    errorMessage = i18n.translate('kibana-react.dualRangeControl.upperValidErrorMessage', {
       defaultMessage: 'Upper value must be greater or equal to lower value',
     });
   }

From 3c0cac414c1a7974b1390e2cbcab81b8deb937c8 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Tue, 10 Mar 2020 08:14:47 -0600
Subject: [PATCH 07/19] i18n clean up. Export module explicitly

---
 src/plugins/kibana_react/public/index.ts            | 2 +-
 x-pack/plugins/translations/translations/ja-JP.json | 3 ---
 x-pack/plugins/translations/translations/zh-CN.json | 3 ---
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index 0aa420f8c45fcf..e88ca7178cde39 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -25,7 +25,7 @@ export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
 export * from './split_panel';
-export * from './validated_range';
+export { ValidatedDualRange } from './validated_range';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 5635bb19b7e836..af599889a144ca 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -78,9 +78,6 @@
   "messages": {
     "common.ui.aggResponse.allDocsTitle": "すべてのドキュメント",
     "common.ui.directives.paginate.size.allDropDownOptionLabel": "すべて",
-    "common.ui.dualRangeControl.mustSetBothErrorMessage": "下と上の値の両方を設定する必要があります",
-    "common.ui.dualRangeControl.outsideOfRangeErrorMessage": "値は {min} と {max} の間でなければなりません",
-    "common.ui.dualRangeControl.upperValidErrorMessage": "上の値は下の値以上でなければなりません",
     "common.ui.errorAutoCreateIndex.breadcrumbs.errorText": "エラー",
     "common.ui.errorAutoCreateIndex.errorDescription": "Elasticsearch クラスターの {autoCreateIndexActionConfig} 設定が原因で、Kibana が保存されたオブジェクトを格納するインデックスを自動的に作成できないようです。Kibana は、保存されたオブジェクトインデックスが適切なマッピング/スキーマを使用し Kibana から Elasticsearch へのポーリングの回数を減らすための最適な手段であるため、この Elasticsearch の機能を使用します。",
     "common.ui.errorAutoCreateIndex.errorDisclaimer": "申し訳ございませんが、この問題が解決されるまで Kibana で何も保存することができません。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 05230210461674..1e4cb41beff589 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -78,9 +78,6 @@
   "messages": {
     "common.ui.aggResponse.allDocsTitle": "所有文档",
     "common.ui.directives.paginate.size.allDropDownOptionLabel": "全部",
-    "common.ui.dualRangeControl.mustSetBothErrorMessage": "下限值和上限值都须设置",
-    "common.ui.dualRangeControl.outsideOfRangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内",
-    "common.ui.dualRangeControl.upperValidErrorMessage": "上限值必须大于或等于下限值",
     "common.ui.errorAutoCreateIndex.breadcrumbs.errorText": "错误",
     "common.ui.errorAutoCreateIndex.errorDescription": "似乎 Elasticsearch 集群的 {autoCreateIndexActionConfig} 设置使 Kibana 无法自动创建用于存储已保存对象的索引。Kibana 将使用此 Elasticsearch 功能，因为这是确保已保存对象索引使用正确映射/架构的最好方式，而且其允许 Kibana 较少地轮询 Elasticsearch。",
     "common.ui.errorAutoCreateIndex.errorDisclaimer": "但是，只有解决了此问题后，您才能在 Kibana 保存内容。",

From 8a5dd9dd0d7c32236d7c67b35b0c20c4b13f12d4 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Tue, 10 Mar 2020 14:09:03 -0600
Subject: [PATCH 08/19] Change files over to TS to prevent build issue where
 validated range was missing

---
 .../validated_range/{index.js => index.ts}    |  1 +
 ...e_valid.test.js => is_range_valid.test.ts} |  0
 .../{is_range_valid.js => is_range_valid.ts}  |  3 +-
 ...dual_range.js => validated_dual_range.tsx} | 46 ++++++++++++++++---
 4 files changed, 43 insertions(+), 7 deletions(-)
 rename src/plugins/kibana_react/public/validated_range/{index.js => index.ts} (98%)
 rename src/plugins/kibana_react/public/validated_range/{is_range_valid.test.js => is_range_valid.test.ts} (100%)
 rename src/plugins/kibana_react/public/validated_range/{is_range_valid.js => is_range_valid.ts} (96%)
 rename src/plugins/kibana_react/public/validated_range/{validated_dual_range.js => validated_dual_range.tsx} (74%)

diff --git a/src/plugins/kibana_react/public/validated_range/index.js b/src/plugins/kibana_react/public/validated_range/index.ts
similarity index 98%
rename from src/plugins/kibana_react/public/validated_range/index.js
rename to src/plugins/kibana_react/public/validated_range/index.ts
index bc643373f5e603..2c801777ea5455 100644
--- a/src/plugins/kibana_react/public/validated_range/index.js
+++ b/src/plugins/kibana_react/public/validated_range/index.ts
@@ -17,4 +17,5 @@
  * under the License.
  */
 
+// @ts-ignore
 export { ValidatedDualRange } from './validated_dual_range';
diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.test.js b/src/plugins/kibana_react/public/validated_range/is_range_valid.test.ts
similarity index 100%
rename from src/plugins/kibana_react/public/validated_range/is_range_valid.test.js
rename to src/plugins/kibana_react/public/validated_range/is_range_valid.test.ts
diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.js b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
similarity index 96%
rename from src/plugins/kibana_react/public/validated_range/is_range_valid.js
rename to src/plugins/kibana_react/public/validated_range/is_range_valid.ts
index a4297ea008b3db..47336c235a197d 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.js
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
@@ -22,8 +22,9 @@ import { i18n } from '@kbn/i18n';
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
+// @ts-ignore
 export function isRangeValid(value, min, max, allowEmptyRange) {
-  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; //cannot use default props since that uses falsy check
+  allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; // cannot use default props since that uses falsy check
   let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX];
   let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX];
 
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.js b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
similarity index 74%
rename from src/plugins/kibana_react/public/validated_range/validated_dual_range.js
rename to src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 3b0efba11afccc..05c4b8a18ce9eb 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.js
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -18,17 +18,31 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { isRangeValid } from './is_range_valid';
-
+import PropTypes, { ReactNodeLike, Requireable } from 'prop-types';
 import { EuiFormRow, EuiDualRange } from '@elastic/eui';
+import { isRangeValid } from './is_range_valid';
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max
+
+interface ValidatedRangeValues {
+  value: number[];
+  min: number;
+  max: number;
+  allowEmptyRange: boolean;
+}
+
 export class ValidatedDualRange extends Component {
-  state = {};
+  static defaultProps: { fullWidth: boolean; allowEmptyRange: boolean; compressed: boolean };
+  static propTypes: {
+    fullWidth: Requireable<boolean>;
+    allowEmptyRange: Requireable<boolean>;
+    formRowDisplay: Requireable<string>;
+    compressed: Requireable<boolean>;
+    label: Requireable<ReactNodeLike>;
+  };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(nextProps: ValidatedRangeValues, prevState: any) {
     if (nextProps.value !== prevState.prevValue) {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
@@ -47,11 +61,18 @@ export class ValidatedDualRange extends Component {
     return null;
   }
 
-  _onChange = value => {
+  state = {};
+
+  _onChange = (value: any) => {
+    // @ts-ignore
     const { isValid, errorMessage } = isRangeValid(
+      // @ts-ignore
       value,
+      // @ts-ignore
       this.props.min,
+      // @ts-ignore
       this.props.max,
+      // @ts-ignore
       this.props.allowEmptyRange
     );
 
@@ -62,19 +83,28 @@ export class ValidatedDualRange extends Component {
     });
 
     if (isValid) {
+      // @ts-ignore
       this.props.onChange(value);
     }
   };
 
   render() {
     const {
+      // @ts-ignore
       compressed,
+      // @ts-ignore
       fullWidth,
+      // @ts-ignore
       label,
+      // @ts-ignore
       formRowDisplay,
+      // @ts-ignore
       value, // eslint-disable-line no-unused-vars
+      // @ts-ignore
       onChange, // eslint-disable-line no-unused-vars
+      // @ts-ignore
       allowEmptyRange, // eslint-disable-line no-unused-vars
+      // @ts-ignore
       ...rest
     } = this.props;
 
@@ -82,7 +112,9 @@ export class ValidatedDualRange extends Component {
       <EuiFormRow
         compressed={compressed}
         fullWidth={fullWidth}
+        // @ts-ignore
         isInvalid={!this.state.isValid}
+        // @ts-ignore
         error={this.state.errorMessage ? [this.state.errorMessage] : []}
         label={label}
         display={formRowDisplay}
@@ -90,8 +122,10 @@ export class ValidatedDualRange extends Component {
         <EuiDualRange
           compressed={compressed}
           fullWidth={fullWidth}
+          // @ts-ignore
           value={this.state.value}
           onChange={this._onChange}
+          // @ts-ignore
           focusable={false} // remove when #59039 is fixed
           {...rest}
         />

From 4c6f1b566f1344505ba384c11d110f60d300bad4 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Tue, 10 Mar 2020 15:05:50 -0600
Subject: [PATCH 09/19] Clean up TS conversion

---
 .../public/validated_range/is_range_valid.ts  | 18 +++++--
 .../validated_range/validated_dual_range.tsx  | 50 ++++++++++---------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
index 47336c235a197d..d5c4419be306df 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
@@ -22,11 +22,21 @@ import { i18n } from '@kbn/i18n';
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
-// @ts-ignore
-export function isRangeValid(value, min, max, allowEmptyRange) {
+type RangeValue = string | number;
+
+export function isRangeValid(
+  value: RangeValue[] = [0, 0],
+  min: RangeValue = 0,
+  max: RangeValue = 0,
+  allowEmptyRange?: boolean
+) {
   allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; // cannot use default props since that uses falsy check
-  let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX];
-  let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX];
+  let lowerValue: RangeValue = isNaN(value[LOWER_VALUE_INDEX] as number)
+    ? ''
+    : `${value[LOWER_VALUE_INDEX]}`;
+  let upperValue: RangeValue = isNaN(value[UPPER_VALUE_INDEX] as number)
+    ? ''
+    : `${value[UPPER_VALUE_INDEX]}`;
 
   const isLowerValueValid = lowerValue.toString() !== '';
   const isUpperValueValid = upperValue.toString() !== '';
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 05c4b8a18ce9eb..2ad7d39343373d 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -20,19 +20,37 @@
 import React, { Component } from 'react';
 import PropTypes, { ReactNodeLike, Requireable } from 'prop-types';
 import { EuiFormRow, EuiDualRange } from '@elastic/eui';
+import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
 import { isRangeValid } from './is_range_valid';
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max
 
 interface ValidatedRangeValues {
-  value: number[];
-  min: number;
-  max: number;
-  allowEmptyRange: boolean;
+  id?: string | number | undefined;
+  value?: [number | string, number | string] | undefined;
+  min?: number;
+  max?: number;
+  allowEmptyRange?: boolean;
+  onChange?: Function;
+  compressed?: boolean;
+  fullWidth?: boolean;
+  label?: string;
+  formRowDisplay?: EuiFormRowDisplayKeys;
+  disabled?: boolean;
+  showInput?: boolean;
+  showRange?: boolean;
+  showTicks?: boolean;
+  ticks?: object[];
 }
 
-export class ValidatedDualRange extends Component {
+interface ValidateDualRangeState {
+  isValid?: boolean;
+  errorMessage?: string;
+  value: [number | string, number | string];
+}
+
+export class ValidatedDualRange extends Component<ValidatedRangeValues> {
   static defaultProps: { fullWidth: boolean; allowEmptyRange: boolean; compressed: boolean };
   static propTypes: {
     fullWidth: Requireable<boolean>;
@@ -61,18 +79,15 @@ export class ValidatedDualRange extends Component {
     return null;
   }
 
-  state = {};
+  state: ValidateDualRangeState = {
+    value: ['0', '0'],
+  };
 
   _onChange = (value: any) => {
-    // @ts-ignore
     const { isValid, errorMessage } = isRangeValid(
-      // @ts-ignore
       value,
-      // @ts-ignore
       this.props.min,
-      // @ts-ignore
       this.props.max,
-      // @ts-ignore
       this.props.allowEmptyRange
     );
 
@@ -82,27 +97,19 @@ export class ValidatedDualRange extends Component {
       errorMessage,
     });
 
-    if (isValid) {
-      // @ts-ignore
+    if (isValid && this.props.onChange) {
       this.props.onChange(value);
     }
   };
 
   render() {
     const {
-      // @ts-ignore
       compressed,
-      // @ts-ignore
       fullWidth,
-      // @ts-ignore
       label,
-      // @ts-ignore
       formRowDisplay,
-      // @ts-ignore
       value, // eslint-disable-line no-unused-vars
-      // @ts-ignore
       onChange, // eslint-disable-line no-unused-vars
-      // @ts-ignore
       allowEmptyRange, // eslint-disable-line no-unused-vars
       // @ts-ignore
       ...rest
@@ -112,9 +119,7 @@ export class ValidatedDualRange extends Component {
       <EuiFormRow
         compressed={compressed}
         fullWidth={fullWidth}
-        // @ts-ignore
         isInvalid={!this.state.isValid}
-        // @ts-ignore
         error={this.state.errorMessage ? [this.state.errorMessage] : []}
         label={label}
         display={formRowDisplay}
@@ -122,7 +127,6 @@ export class ValidatedDualRange extends Component {
         <EuiDualRange
           compressed={compressed}
           fullWidth={fullWidth}
-          // @ts-ignore
           value={this.state.value}
           onChange={this._onChange}
           // @ts-ignore

From 90550b8d1ca10f3ce15632c8eb78978903bbe037 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Wed, 11 Mar 2020 09:28:23 -0600
Subject: [PATCH 10/19] More clean up. Extend EuiRangeProps

---
 .../public/validated_range/index.d.ts         | 25 -------------------
 .../validated_range/validated_dual_range.tsx  | 19 +++-----------
 2 files changed, 4 insertions(+), 40 deletions(-)
 delete mode 100644 src/plugins/kibana_react/public/validated_range/index.d.ts

diff --git a/src/plugins/kibana_react/public/validated_range/index.d.ts b/src/plugins/kibana_react/public/validated_range/index.d.ts
deleted file mode 100644
index 50cacbc517be8b..00000000000000
--- a/src/plugins/kibana_react/public/validated_range/index.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * 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 from 'react';
-import { EuiRangeProps } from '@elastic/eui';
-
-export class ValidatedDualRange<EuiRangeProps> extends React.Component<EuiRangeProps> {
-  allowEmptyRange?: boolean;
-}
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 2ad7d39343373d..72035a937d6ba3 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -19,29 +19,18 @@
 
 import React, { Component } from 'react';
 import PropTypes, { ReactNodeLike, Requireable } from 'prop-types';
-import { EuiFormRow, EuiDualRange } from '@elastic/eui';
+import { EuiFormRow, EuiDualRange, EuiRangeProps } from '@elastic/eui';
 import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
 import { isRangeValid } from './is_range_valid';
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max
 
-interface ValidatedRangeValues {
-  id?: string | number | undefined;
+interface ValidatedRangeValues extends Omit<EuiRangeProps, 'value'> {
   value?: [number | string, number | string] | undefined;
-  min?: number;
-  max?: number;
   allowEmptyRange?: boolean;
-  onChange?: Function;
-  compressed?: boolean;
-  fullWidth?: boolean;
   label?: string;
   formRowDisplay?: EuiFormRowDisplayKeys;
-  disabled?: boolean;
-  showInput?: boolean;
-  showRange?: boolean;
-  showTicks?: boolean;
-  ticks?: object[];
 }
 
 interface ValidateDualRangeState {
@@ -97,8 +86,8 @@ export class ValidatedDualRange extends Component<ValidatedRangeValues> {
       errorMessage,
     });
 
-    if (isValid && this.props.onChange) {
-      this.props.onChange(value);
+    if (this.props.onChange) {
+      this.props.onChange(value, isValid);
     }
   };
 

From 18e05ae208817964632882f9543866432146dfa3 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Wed, 11 Mar 2020 09:38:44 -0600
Subject: [PATCH 11/19] Remove unneeded ts-ignore

---
 src/plugins/kibana_react/public/validated_range/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/kibana_react/public/validated_range/index.ts b/src/plugins/kibana_react/public/validated_range/index.ts
index 2c801777ea5455..bc643373f5e603 100644
--- a/src/plugins/kibana_react/public/validated_range/index.ts
+++ b/src/plugins/kibana_react/public/validated_range/index.ts
@@ -17,5 +17,4 @@
  * under the License.
  */
 
-// @ts-ignore
 export { ValidatedDualRange } from './validated_dual_range';

From 326de0d3fed6aad29b946ac6cb780156f07fd0ef Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Thu, 12 Mar 2020 10:46:00 -0600
Subject: [PATCH 12/19] Review feedback and test fixes

---
 .../public/validated_range/is_range_valid.ts  | 13 +++---
 .../validated_range/validated_dual_range.tsx  | 40 +++++++------------
 2 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
index d5c4419be306df..789d503cd3effa 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
@@ -18,23 +18,22 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { ValueMember } from "./validated_dual_range";
 
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
-type RangeValue = string | number;
-
 export function isRangeValid(
-  value: RangeValue[] = [0, 0],
-  min: RangeValue = 0,
-  max: RangeValue = 0,
+  value: ValueMember[] = [0, 0],
+  min: ValueMember = 0,
+  max: ValueMember = 0,
   allowEmptyRange?: boolean
 ) {
   allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true; // cannot use default props since that uses falsy check
-  let lowerValue: RangeValue = isNaN(value[LOWER_VALUE_INDEX] as number)
+  let lowerValue: ValueMember = isNaN(value[LOWER_VALUE_INDEX] as number)
     ? ''
     : `${value[LOWER_VALUE_INDEX]}`;
-  let upperValue: RangeValue = isNaN(value[UPPER_VALUE_INDEX] as number)
+  let upperValue: ValueMember = isNaN(value[UPPER_VALUE_INDEX] as number)
     ? ''
     : `${value[UPPER_VALUE_INDEX]}`;
 
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 72035a937d6ba3..86830f69b6319c 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -18,38 +18,34 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes, { ReactNodeLike, Requireable } from 'prop-types';
-import { EuiFormRow, EuiDualRange, EuiRangeProps } from '@elastic/eui';
+import { EuiFormRow, EuiDualRange } from '@elastic/eui';
 import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
 import { isRangeValid } from './is_range_valid';
+import { EuiDualRangeProps } from "@elastic/eui/src/components/form/range/dual_range";
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max
 
-interface ValidatedRangeValues extends Omit<EuiRangeProps, 'value'> {
-  value?: [number | string, number | string] | undefined;
+export type ValueMember = EuiDualRangeProps['value'][0];
+
+interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange'> {
+  value?: [ValueMember, ValueMember] | undefined;
   allowEmptyRange?: boolean;
   label?: string;
   formRowDisplay?: EuiFormRowDisplayKeys;
+  onChange?: (val: [ValueMember, ValueMember]) => void;
 }
 
-interface ValidateDualRangeState {
+interface State {
   isValid?: boolean;
   errorMessage?: string;
-  value: [number | string, number | string];
+  value: [ValueMember, ValueMember];
 }
 
-export class ValidatedDualRange extends Component<ValidatedRangeValues> {
+export class ValidatedDualRange extends Component<Props> {
   static defaultProps: { fullWidth: boolean; allowEmptyRange: boolean; compressed: boolean };
-  static propTypes: {
-    fullWidth: Requireable<boolean>;
-    allowEmptyRange: Requireable<boolean>;
-    formRowDisplay: Requireable<string>;
-    compressed: Requireable<boolean>;
-    label: Requireable<ReactNodeLike>;
-  };
 
-  static getDerivedStateFromProps(nextProps: ValidatedRangeValues, prevState: any) {
+  static getDerivedStateFromProps(nextProps: Props, prevState: any) {
     if (nextProps.value !== prevState.prevValue) {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
@@ -68,7 +64,7 @@ export class ValidatedDualRange extends Component<ValidatedRangeValues> {
     return null;
   }
 
-  state: ValidateDualRangeState = {
+  state: State = {
     value: ['0', '0'],
   };
 
@@ -86,8 +82,8 @@ export class ValidatedDualRange extends Component<ValidatedRangeValues> {
       errorMessage,
     });
 
-    if (this.props.onChange) {
-      this.props.onChange(value, isValid);
+    if (this.props.onChange && isValid) {
+      this.props.onChange(value);
     }
   };
 
@@ -127,14 +123,6 @@ export class ValidatedDualRange extends Component<ValidatedRangeValues> {
   }
 }
 
-ValidatedDualRange.propTypes = {
-  allowEmptyRange: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  label: PropTypes.node,
-  formRowDisplay: PropTypes.string,
-};
-
 ValidatedDualRange.defaultProps = {
   allowEmptyRange: true,
   fullWidth: false,

From 66ab9d19abe4beb5588f46d2495ea5dc3840a89d Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Thu, 12 Mar 2020 10:47:35 -0600
Subject: [PATCH 13/19] Change double to single quotes

---
 .../kibana_react/public/validated_range/is_range_valid.ts       | 2 +-
 .../public/validated_range/validated_dual_range.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
index 789d503cd3effa..30c2d32c103dcd 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
@@ -18,7 +18,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ValueMember } from "./validated_dual_range";
+import { ValueMember } from './validated_dual_range';
 
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 86830f69b6319c..75cb27468d8d56 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -20,8 +20,8 @@
 import React, { Component } from 'react';
 import { EuiFormRow, EuiDualRange } from '@elastic/eui';
 import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
+import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range';
 import { isRangeValid } from './is_range_valid';
-import { EuiDualRangeProps } from "@elastic/eui/src/components/form/range/dual_range";
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max

From 96ab294e92fa0b89638aa53eaec566a674a60576 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Thu, 12 Mar 2020 13:52:01 -0600
Subject: [PATCH 14/19] min and max aren't always passed, make optional

---
 .../public/validated_range/validated_dual_range.tsx         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 75cb27468d8d56..07ea318fa733e1 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -28,12 +28,14 @@ import { isRangeValid } from './is_range_valid';
 
 export type ValueMember = EuiDualRangeProps['value'][0];
 
-interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange'> {
+interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
   value?: [ValueMember, ValueMember] | undefined;
   allowEmptyRange?: boolean;
   label?: string;
   formRowDisplay?: EuiFormRowDisplayKeys;
-  onChange?: (val: [ValueMember, ValueMember]) => void;
+  onChange?: (val: [string, string]) => void;
+  min?: ValueMember;
+  max?: ValueMember;
 }
 
 interface State {

From daa13614b5bcf5212df030bd590f65ad1519ecbd Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Thu, 12 Mar 2020 15:53:58 -0600
Subject: [PATCH 15/19] Type updates

---
 .../public/validated_range/is_range_valid.ts           |  4 ++--
 .../public/validated_range/validated_dual_range.tsx    | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
index 30c2d32c103dcd..1f822c0cb94b96 100644
--- a/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
+++ b/src/plugins/kibana_react/public/validated_range/is_range_valid.ts
@@ -18,13 +18,13 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ValueMember } from './validated_dual_range';
+import { ValueMember, Value } from './validated_dual_range';
 
 const LOWER_VALUE_INDEX = 0;
 const UPPER_VALUE_INDEX = 1;
 
 export function isRangeValid(
-  value: ValueMember[] = [0, 0],
+  value: Value = [0, 0],
   min: ValueMember = 0,
   max: ValueMember = 0,
   allowEmptyRange?: boolean
diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 07ea318fa733e1..ae62fd75216e23 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -26,10 +26,11 @@ import { isRangeValid } from './is_range_valid';
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
 // is valid and within min/max
 
+export type Value = EuiDualRangeProps['value'];
 export type ValueMember = EuiDualRangeProps['value'][0];
 
 interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
-  value?: [ValueMember, ValueMember] | undefined;
+  value?: Value;
   allowEmptyRange?: boolean;
   label?: string;
   formRowDisplay?: EuiFormRowDisplayKeys;
@@ -42,12 +43,13 @@ interface State {
   isValid?: boolean;
   errorMessage?: string;
   value: [ValueMember, ValueMember];
+  prevValue?: Value;
 }
 
 export class ValidatedDualRange extends Component<Props> {
   static defaultProps: { fullWidth: boolean; allowEmptyRange: boolean; compressed: boolean };
 
-  static getDerivedStateFromProps(nextProps: Props, prevState: any) {
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     if (nextProps.value !== prevState.prevValue) {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
@@ -70,7 +72,7 @@ export class ValidatedDualRange extends Component<Props> {
     value: ['0', '0'],
   };
 
-  _onChange = (value: any) => {
+  _onChange = (value: Value) => {
     const { isValid, errorMessage } = isRangeValid(
       value,
       this.props.min,
@@ -85,7 +87,7 @@ export class ValidatedDualRange extends Component<Props> {
     });
 
     if (this.props.onChange && isValid) {
-      this.props.onChange(value);
+      this.props.onChange([value[0] as string, value[1] as string]);
     }
   };
 

From 13f4d4530f7c97a9dddd41a7b3d80e21d31a8a90 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Fri, 13 Mar 2020 08:26:51 -0600
Subject: [PATCH 16/19] Review feedback. Set state to empty on init and add
 ignore comment

---
 .../public/validated_range/validated_dual_range.tsx          | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index ae62fd75216e23..ddd5f27a07a141 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -68,9 +68,8 @@ export class ValidatedDualRange extends Component<Props> {
     return null;
   }
 
-  state: State = {
-    value: ['0', '0'],
-  };
+  // @ts-ignore state populated by getDerivedStateFromProps
+  state: State = {};
 
   _onChange = (value: Value) => {
     const { isValid, errorMessage } = isRangeValid(

From a51fc45782da7b460f220cce3b8317ac12331676 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Fri, 13 Mar 2020 10:43:14 -0600
Subject: [PATCH 17/19] Review feedback

---
 .../public/validated_range/validated_dual_range.tsx         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index ddd5f27a07a141..72934f7d33a852 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -68,8 +68,7 @@ export class ValidatedDualRange extends Component<Props> {
     return null;
   }
 
-  // @ts-ignore state populated by getDerivedStateFromProps
-  state: State = {};
+  state!: State;
 
   _onChange = (value: Value) => {
     const { isValid, errorMessage } = isRangeValid(
@@ -99,7 +98,6 @@ export class ValidatedDualRange extends Component<Props> {
       value, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       allowEmptyRange, // eslint-disable-line no-unused-vars
-      // @ts-ignore
       ...rest
     } = this.props;
 
@@ -117,8 +115,6 @@ export class ValidatedDualRange extends Component<Props> {
           fullWidth={fullWidth}
           value={this.state.value}
           onChange={this._onChange}
-          // @ts-ignore
-          focusable={false} // remove when #59039 is fixed
           {...rest}
         />
       </EuiFormRow>

From dabe3b9ddfefbe3169371deb149ea1f9a9b386b3 Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Fri, 13 Mar 2020 15:23:37 -0600
Subject: [PATCH 18/19] Add back in last 2 ts-ignores. Build fails without
 focusable attribute on EuiDualRange & No good alternatives for spread syntax
 in TS components

---
 .../public/validated_range/validated_dual_range.tsx          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 72934f7d33a852..2bbf7652a74205 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -98,7 +98,8 @@ export class ValidatedDualRange extends Component<Props> {
       value, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       allowEmptyRange, // eslint-disable-line no-unused-vars
-      ...rest
+      // @ts-ignore
+      ...rest // TODO: Consider alternatives for spread operator in component
     } = this.props;
 
     return (
@@ -115,6 +116,8 @@ export class ValidatedDualRange extends Component<Props> {
           fullWidth={fullWidth}
           value={this.state.value}
           onChange={this._onChange}
+          // @ts-ignore
+          focusable={false} // remove when #59039 is fixed
           {...rest}
         />
       </EuiFormRow>

From 2e92b23c7193830b8a56de8998ffcaef1ef4dd7c Mon Sep 17 00:00:00 2001
From: Aaron Caldwell <aaron.caldwell@elastic.co>
Date: Mon, 16 Mar 2020 12:52:31 -0600
Subject: [PATCH 19/19] Rollback change to state init. Initializing state to
 null actually triggers a react browser warning and complicates using
 'prevState' in getDerivedStateFromProps

---
 .../public/validated_range/validated_dual_range.tsx            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
index 2bbf7652a74205..e7392eeba3830f 100644
--- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
+++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
@@ -68,7 +68,8 @@ export class ValidatedDualRange extends Component<Props> {
     return null;
   }
 
-  state!: State;
+  // @ts-ignore state populated by getDerivedStateFromProps
+  state: State = {};
 
   _onChange = (value: Value) => {
     const { isValid, errorMessage } = isRangeValid(