Migrate dual validated range

src/legacy/core_plugins/input_control_vis/public/components/vis/range_control.tsx

@@ -19,8 +19,7 @@
 
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-
-import { ValidatedDualRange } from '../../legacy_imports';
+import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_react/public';
 import { FormRow } from './form_row';
 import { RangeControl as RangeControlClass } from '../../control/range_control_factory';
 

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;

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 '../legacy_imports';
 
 function TagCloudOptions({ stateParams, setValue, vis }: VisOptionsProps<TagCloudVisParams>) {
   const handleFontSizeChange = ([minFontSize, maxFontSize]: [string | number, string | number]) => {

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';

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 { ValidatedDualRange } from './validated_range';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';

src/legacy/ui/public/validated_range/is_range_valid.js → src/plugins/kibana_react/public/validated_range/is_range_valid.ts

@@ -18,14 +18,24 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { ValueMember, Value } from './validated_dual_range';
 
 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];
+export function isRangeValid(
+  value: Value = [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: ValueMember = isNaN(value[LOWER_VALUE_INDEX] as number)
+    ? ''
+    : `${value[LOWER_VALUE_INDEX]}`;
+  let upperValue: ValueMember = isNaN(value[UPPER_VALUE_INDEX] as number)
+    ? ''
+    : `${value[UPPER_VALUE_INDEX]}`;
 
   const isLowerValueValid = lowerValue.toString() !== '';
   const isUpperValueValid = upperValue.toString() !== '';
@@ -39,7 +49,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 +65,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',
     });
   }

src/legacy/ui/public/validated_range/validated_dual_range.js → src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx

@@ -18,17 +18,38 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { isRangeValid } from './is_range_valid';
-
 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';
 
 // 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) {
+export type Value = EuiDualRangeProps['value'];
+export type ValueMember = EuiDualRangeProps['value'][0];
+
+interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
+  value?: Value;
+  allowEmptyRange?: boolean;
+  label?: string;
+  formRowDisplay?: EuiFormRowDisplayKeys;
+  onChange?: (val: [string, string]) => void;
+  min?: ValueMember;
+  max?: ValueMember;
+}
+
+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: State) {
     if (nextProps.value !== prevState.prevValue) {
       const { isValid, errorMessage } = isRangeValid(
         nextProps.value,
@@ -47,7 +68,10 @@ export class ValidatedDualRange extends Component {
     return null;
   }
 
-  _onChange = value => {
+  // @ts-ignore state populated by getDerivedStateFromProps
+  state: State = {};
+
+  _onChange = (value: Value) => {
     const { isValid, errorMessage } = isRangeValid(
       value,
       this.props.min,
@@ -61,8 +85,8 @@ export class ValidatedDualRange extends Component {
       errorMessage,
     });
 
-    if (isValid) {
-      this.props.onChange(value);
+    if (this.props.onChange && isValid) {
+      this.props.onChange([value[0] as string, value[1] as string]);
     }
   };
 
@@ -75,7 +99,8 @@ export class ValidatedDualRange extends Component {
       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 (
@@ -92,6 +117,7 @@ export class ValidatedDualRange extends Component {
           fullWidth={fullWidth}
           value={this.state.value}
           onChange={this._onChange}
+          // @ts-ignore
           focusable={false} // remove when #59039 is fixed
           {...rest}
         />
@@ -100,14 +126,6 @@ export class ValidatedDualRange extends Component {
   }
 }
 
-ValidatedDualRange.propTypes = {
-  allowEmptyRange: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  label: PropTypes.node,
-  formRowDisplay: PropTypes.string,
-};
-
 ValidatedDualRange.defaultProps = {
   allowEmptyRange: true,
   fullWidth: false,

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';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants';
 
 export function LayerSettings(props) {

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';
 import { MIN_SIZE, MAX_SIZE } from '../../vector_style_defaults';
 import { i18n } from '@kbn/i18n';
 

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 で何も保存することができません。",

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 保存内容。",