Migrate dual validated range (#59689)

* Move validated range files to new NP location * Update refs in code * Clean up old validated range files * Change relative paths to 'kibana-react'. Some clean up * Change to relative paths * Fix i18n errors * i18n clean up. Export module explicitly * Change files over to TS to prevent build issue where validated range was missing * Clean up TS conversion * More clean up. Extend EuiRangeProps * Remove unneeded ts-ignore * Review feedback and test fixes * Change double to single quotes * min and max aren't always passed, make optional * Type updates * Review feedback. Set state to empty on init and add ignore comment * Review feedback * Add back in last 2 ts-ignores. Build fails without focusable attribute on EuiDualRange & No good alternatives for spread syntax in TS components * Rollback change to state init. Initializing state to null actually triggers a react browser warning and complicates using 'prevState' in getDerivedStateFromProps Co-authored-by: Elastic Machine <[email protected]>
elastic · Mar 16, 2020 · c898e79 · c898e79
1 parent 92aec69
commit c898e79
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 65 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
@@ -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';
 

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
@@ -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/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 '../legacy_imports';
 
 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
@@ -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/legacy/ui/public/validated_range/index.d.ts b/src/legacy/ui/public/validated_range/index.d.ts
diff --git 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 { ValidatedDualRange } from './validated_range';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';

diff --git a/...legacy/ui/public/validated_range/index.js → ...ana_react/public/validated_range/index.ts b/...legacy/ui/public/validated_range/index.js → ...ana_react/public/validated_range/index.ts
diff --git a/...ic/validated_range/is_range_valid.test.js → ...ic/validated_range/is_range_valid.test.ts b/...ic/validated_range/is_range_valid.test.js → ...ic/validated_range/is_range_valid.test.ts
diff --git a/.../public/validated_range/is_range_valid.js → .../public/validated_range/is_range_valid.ts b/.../public/validated_range/is_range_valid.js → .../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',
     });
   }

diff --git a/...c/validated_range/validated_dual_range.js → .../validated_range/validated_dual_range.tsx b/...c/validated_range/validated_dual_range.js → .../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,

diff --git a/...acy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/...acy/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) {

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/size/size_range_selector.js b/...ck/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';
 

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