Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate dual validated range #59689

Merged
merged 29 commits into from
Mar 16, 2020
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
9713e71
Move validated range files to new NP location
Mar 9, 2020
c53f20d
Update refs in code
Mar 9, 2020
1cc4646
Clean up old validated range files
Mar 9, 2020
c4daf99
Change relative paths to 'kibana-react'. Some clean up
Mar 9, 2020
48d0eaa
Change to relative paths
Mar 9, 2020
14728d9
Merge branch 'master' into np-migrate-dual-validated-range
elasticmachine Mar 9, 2020
6a5f8a9
Fix i18n errors
Mar 9, 2020
3c0cac4
i18n clean up. Export module explicitly
Mar 10, 2020
8a5dd9d
Change files over to TS to prevent build issue where validated range …
Mar 10, 2020
61d2c7d
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 10, 2020
4c6f1b5
Clean up TS conversion
Mar 10, 2020
90550b8
More clean up. Extend EuiRangeProps
Mar 11, 2020
a761969
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 11, 2020
18e05ae
Remove unneeded ts-ignore
Mar 11, 2020
c4961c2
Merge branch 'master' into np-migrate-dual-validated-range
elasticmachine Mar 11, 2020
326de0d
Review feedback and test fixes
Mar 12, 2020
787d93a
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 12, 2020
f51f1d5
Merge branch 'np-migrate-dual-validated-range' of github.com:aaronjca…
Mar 12, 2020
66ab9d1
Change double to single quotes
Mar 12, 2020
96ab294
min and max aren't always passed, make optional
Mar 12, 2020
daa1361
Type updates
Mar 12, 2020
2324691
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 12, 2020
eafe4b9
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 13, 2020
13f4d45
Review feedback. Set state to empty on init and add ignore comment
Mar 13, 2020
a51fc45
Review feedback
Mar 13, 2020
c5acf30
Merge remote-tracking branch 'upstream/master' into np-migrate-dual-v…
Mar 13, 2020
dabe3b9
Add back in last 2 ts-ignores. Build fails without focusable attribut…
Mar 13, 2020
85b1887
Merge branch 'master' into np-migrate-dual-validated-range
elasticmachine Mar 16, 2020
2e92b23
Rollback change to state init. Initializing state to null actually tr…
Mar 16, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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]) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
25 changes: 0 additions & 25 deletions src/legacy/ui/public/validated_range/index.d.ts

This file was deleted.

1 change: 1 addition & 0 deletions src/plugins/kibana_react/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() !== '';
Expand All @@ -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',
}
Expand All @@ -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',
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
kindsun marked this conversation as resolved.
Show resolved Hide resolved
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,
Expand All @@ -47,7 +68,10 @@ export class ValidatedDualRange extends Component {
return null;
}

_onChange = value => {
// @ts-ignore state populated by getDerivedStateFromProps
kindsun marked this conversation as resolved.
Show resolved Hide resolved
state: State = {};
kindsun marked this conversation as resolved.
Show resolved Hide resolved

_onChange = (value: Value) => {
const { isValid, errorMessage } = isRangeValid(
value,
this.props.min,
Expand All @@ -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]);
}
};

Expand All @@ -75,6 +99,7 @@ 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
// @ts-ignore
kindsun marked this conversation as resolved.
Show resolved Hide resolved
...rest
} = this.props;

Expand All @@ -92,6 +117,7 @@ export class ValidatedDualRange extends Component {
fullWidth={fullWidth}
value={this.state.value}
onChange={this._onChange}
// @ts-ignore
kindsun marked this conversation as resolved.
Show resolved Hide resolved
focusable={false} // remove when #59039 is fixed
kindsun marked this conversation as resolved.
Show resolved Hide resolved
{...rest}
/>
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 で何も保存することができません。",
Expand Down
3 changes: 0 additions & 3 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 保存内容。",
Expand Down