From 645e8fc7cb15880d7c3e5a43ff195ec4fc77662f Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Wed, 21 Jul 2021 19:24:32 +0200 Subject: [PATCH 1/8] lazy format editor --- .../__snapshots__/format_editor.test.tsx.snap | 64 +++++++++++++++---- .../editors/bytes/bytes.ts | 5 +- .../editors/bytes/constants.ts | 9 +++ .../editors/bytes/index.ts | 7 +- .../editors/color/color.tsx | 5 +- .../editors/color/constants.ts | 9 +++ .../editors/color/index.ts | 8 ++- .../editors/date/constants.ts | 9 +++ .../field_format_editor/editors/date/date.tsx | 5 +- .../field_format_editor/editors/date/index.ts | 8 ++- .../editors/date_nanos/constants.ts | 9 +++ .../editors/date_nanos/date_nanos.tsx | 5 +- .../editors/date_nanos/index.ts | 8 ++- .../editors/default/constants.ts | 9 +++ .../editors/default/default.tsx | 3 +- .../editors/default/index.ts | 10 ++- .../editors/duration/constants.ts | 9 +++ .../editors/duration/duration.tsx | 5 +- .../editors/duration/index.tsx | 8 ++- .../editors/histogram/constants.ts | 9 +++ .../editors/histogram/histogram.tsx | 5 +- .../editors/histogram/index.ts | 8 ++- .../field_format_editor/editors/index.ts | 28 ++++---- .../editors/number/constants.ts | 9 +++ .../editors/number/index.ts | 8 ++- .../editors/number/number.tsx | 5 +- .../editors/percent/constants.ts | 9 +++ .../editors/percent/index.ts | 8 ++- .../editors/percent/percent.tsx | 5 +- .../editors/static_lookup/constants.ts | 9 +++ .../editors/static_lookup/index.ts | 8 ++- .../editors/static_lookup/static_lookup.tsx | 5 +- .../editors/string/constants.ts | 9 +++ .../editors/string/index.ts | 8 ++- .../editors/string/string.tsx | 5 +- .../editors/truncate/constants.ts | 9 +++ .../editors/truncate/index.ts | 8 ++- .../editors/truncate/truncate.tsx | 5 +- .../field_format_editor/editors/types.ts | 14 ++++ .../editors/url/constants.ts | 9 +++ .../field_format_editor/editors/url/index.ts | 8 ++- .../field_format_editor/editors/url/url.tsx | 5 +- .../field_format_editor/format_editor.tsx | 49 ++++++++++---- .../public/index.ts | 1 + .../field_format_editors.ts | 8 +-- .../public/service/format_editor_service.ts | 55 ++++++++-------- .../field_format_editor.test.tsx.snap | 64 +++++++++++++++---- .../field_format_editor.test.tsx | 3 +- .../field_format_editor.tsx | 53 +++++++++++---- 49 files changed, 487 insertions(+), 137 deletions(-) create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/constants.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts create mode 100644 src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/constants.ts diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap index 82d21eb5d30ad..501006cad89e1 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap @@ -2,24 +2,60 @@ exports[`FieldFormatEditor should render normally 1`] = ` - + + + + } + > + + `; exports[`FieldFormatEditor should render nothing if there is no editor for the format 1`] = ` - + + + + } + > + + `; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/bytes.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/bytes.ts index 8afcba38e5f40..434ec5d09bf51 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/bytes.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/bytes.ts @@ -6,11 +6,12 @@ * Side Public License, v 1. */ -import { NumberFormatEditor } from '../number'; +import { NumberFormatEditor } from '../number/number'; import { defaultState } from '../default'; +import { formatId } from './constants'; export class BytesFormatEditor extends NumberFormatEditor { - static formatId = 'bytes'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [256, 1024, 5150000, 1990000000], diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/constants.ts new file mode 100644 index 0000000000000..f057551fa35ba --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'bytes'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/index.ts index 81356e02c9ab2..5d631e22a8890 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/bytes/index.ts @@ -5,5 +5,10 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ +import { formatId } from './constants'; +import { FieldFormatEditorFactory } from '../types'; -export { BytesFormatEditor } from './bytes'; +export type { BytesFormatEditor } from './bytes'; +export const bytesFormatEditorFactory: FieldFormatEditorFactory = () => + import('./bytes').then((m) => m.BytesFormatEditor); +bytesFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx index 1e899a7179554..be90c7ea4c9e0 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx @@ -12,7 +12,8 @@ import { EuiBasicTable, EuiButton, EuiColorPicker, EuiFieldText, EuiSpacer } fro import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, FormatEditorProps } from '../default'; +import { DefaultFormatEditor, FormatEditorProps } from '../default/default'; +import { formatId } from './constants'; import { fieldFormats } from '../../../../../../data/public'; @@ -32,7 +33,7 @@ interface ColorFormatEditorFormatParams { } export class ColorFormatEditor extends DefaultFormatEditor { - static formatId = 'color'; + static formatId = formatId; constructor(props: FormatEditorProps) { super(props); this.onChange({ diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/constants.ts new file mode 100644 index 0000000000000..ab19c423b61d9 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'color'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/index.ts index 0a2960ae3dfbb..b6cadb8aae43b 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { ColorFormatEditor } from './color'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { ColorFormatEditor } from './color'; +export const colorFormatEditorFactory: FieldFormatEditorFactory = () => + import('./color').then((m) => m.ColorFormatEditor); +colorFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/constants.ts new file mode 100644 index 0000000000000..714ca3e619d72 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'date'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/date.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/date.tsx index 62fb08855ce93..455d3bf181135 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/date.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/date.tsx @@ -12,7 +12,8 @@ import moment from 'moment'; import { EuiCode, EuiFieldText, EuiFormRow, EuiIcon, EuiLink } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; +import { formatId } from './constants'; import { FormatEditorSamples } from '../../samples'; @@ -21,7 +22,7 @@ interface DateFormatEditorFormatParams { } export class DateFormatEditor extends DefaultFormatEditor { - static formatId = 'date'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [ diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/index.ts index 9db645b3f21a3..9fb47b285f669 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { DateFormatEditor } from './date'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { DateFormatEditor } from './date'; +export const dateFormatEditorFactory: FieldFormatEditorFactory = () => + import('./date').then((m) => m.DateFormatEditor); +dateFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/constants.ts new file mode 100644 index 0000000000000..17c316140bf0f --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'date_nanos'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/date_nanos.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/date_nanos.tsx index d9ee099aaef36..9e18b75521b01 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/date_nanos.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/date_nanos.tsx @@ -11,7 +11,8 @@ import React, { Fragment } from 'react'; import { EuiCode, EuiFieldText, EuiFormRow, EuiIcon, EuiLink } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; +import { formatId } from './constants'; import { FormatEditorSamples } from '../../samples'; @@ -20,7 +21,7 @@ interface DateNanosFormatEditorFormatParams { } export class DateNanosFormatEditor extends DefaultFormatEditor { - static formatId = 'date_nanos'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [ diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/index.ts index 9aab1bb9dc223..ade21b27f60ef 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/date_nanos/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { DateNanosFormatEditor } from './date_nanos'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { DateNanosFormatEditor } from './date_nanos'; +export const dateNanosFormatEditorFactory: FieldFormatEditorFactory = () => + import('./date_nanos').then((m) => m.DateNanosFormatEditor); +dateNanosFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/constants.ts new file mode 100644 index 0000000000000..1f65639359114 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'default'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx index a282faaa4d2b5..776c914358f6d 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx @@ -12,6 +12,7 @@ import { i18n } from '@kbn/i18n'; import { FieldFormat, FieldFormatsContentType } from 'src/plugins/data/public'; import { Sample, SampleInput } from '../../types'; import { FormatSelectEditorProps } from '../../field_format_editor'; +import { formatId } from './constants'; export const convertSampleInput = ( converter: (input: SampleInput) => string, @@ -72,7 +73,7 @@ export class DefaultFormatEditor

extends PureComponent< FormatEditorProps

, FormatEditorState & S > { - static formatId = 'default'; + static formatId = formatId; state = defaultState as FormatEditorState & S; static getDerivedStateFromProps(nextProps: FormatEditorProps<{}>, state: FormatEditorState) { diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts index 1636c3f4a83cd..24bf718638cee 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts @@ -6,4 +6,12 @@ * Side Public License, v 1. */ -export { DefaultFormatEditor, defaultState, FormatEditorProps, FormatEditorState } from './default'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export { defaultState, FormatEditorProps, FormatEditorState } from './default'; +export type { DefaultFormatEditor } from './default'; + +export const defaultFormatEditorFactory: FieldFormatEditorFactory = () => + import('./default').then((m) => m.DefaultFormatEditor); +defaultFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/constants.ts new file mode 100644 index 0000000000000..ab146dc30e551 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'duration'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx index d61d14aac3fc7..2c8117bcc760f 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx @@ -18,9 +18,10 @@ import { defaultState, FormatEditorProps, FormatEditorState, -} from '../default'; +} from '../default/default'; import { FormatEditorSamples } from '../../samples'; +import { formatId } from './constants'; interface DurationFormatEditorState { hasDecimalError: boolean; @@ -49,7 +50,7 @@ export class DurationFormatEditor extends DefaultFormatEditor< DurationFormatEditorFormatParams, DurationFormatEditorState > { - static formatId = 'duration'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [-123, 1, 12, 123, 658, 1988, 3857, 123292, 923528271], diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/index.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/index.tsx index cf3d7b85147de..8e489fbb2a464 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/index.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/index.tsx @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { DurationFormatEditor } from './duration'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { DurationFormatEditor } from './duration'; +export const durationFormatEditorFactory: FieldFormatEditorFactory = () => + import('./duration').then((m) => m.DurationFormatEditor); +durationFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/constants.ts new file mode 100644 index 0000000000000..a772129a1d276 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'histogram'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/histogram.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/histogram.tsx index 0f13439e1269b..ce5b72b11559c 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/histogram.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/histogram.tsx @@ -10,8 +10,9 @@ import React, { Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiSelect, EuiFieldText, EuiFormRow, EuiIcon, EuiLink } from '@elastic/eui'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; import { FormatEditorSamples } from '../../samples'; +import { formatId } from './constants'; export interface HistogramFormatEditorParams { id: 'bytes' | 'percent' | 'number'; @@ -19,7 +20,7 @@ export interface HistogramFormatEditorParams { } export class HistogramFormatEditor extends DefaultFormatEditor { - static formatId = 'histogram'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [ diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/index.ts index 221895f4cba23..071581893f9d9 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { HistogramFormatEditor } from './histogram'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { HistogramFormatEditor } from './histogram'; +export const histogramFormatEditorFactory: FieldFormatEditorFactory = () => + import('./histogram').then((m) => m.HistogramFormatEditor); +histogramFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts index 41d60c6e2144f..6ac71413e8920 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts @@ -6,17 +6,19 @@ * Side Public License, v 1. */ -export { DefaultFormatEditor } from './default'; +export type { FieldFormatEditor, FieldFormatEditorFactory } from './types'; -export { BytesFormatEditor } from './bytes'; -export { ColorFormatEditor } from './color'; -export { DateFormatEditor } from './date'; -export { DateNanosFormatEditor } from './date_nanos'; -export { DurationFormatEditor } from './duration'; -export { NumberFormatEditor } from './number'; -export { PercentFormatEditor } from './percent'; -export { StaticLookupFormatEditor } from './static_lookup'; -export { StringFormatEditor } from './string'; -export { TruncateFormatEditor } from './truncate'; -export { UrlFormatEditor } from './url'; -export { HistogramFormatEditor } from './histogram'; +export { DefaultFormatEditor, defaultFormatEditorFactory } from './default'; + +export { BytesFormatEditor, bytesFormatEditorFactory } from './bytes'; +export { ColorFormatEditor, colorFormatEditorFactory } from './color'; +export { DateFormatEditor, dateFormatEditorFactory } from './date'; +export { DateNanosFormatEditor, dateNanosFormatEditorFactory } from './date_nanos'; +export { DurationFormatEditor, durationFormatEditorFactory } from './duration'; +export { NumberFormatEditor, numberFormatEditorFactory } from './number'; +export { PercentFormatEditor, percentFormatEditorFactory } from './percent'; +export { StaticLookupFormatEditor, staticLookupFormatEditorFactory } from './static_lookup'; +export { StringFormatEditor, stringFormatEditorFactory } from './string'; +export { TruncateFormatEditor, truncateFormatEditorFactory } from './truncate'; +export { UrlFormatEditor, urlFormatEditorFactory } from './url'; +export { HistogramFormatEditor, histogramFormatEditorFactory } from './histogram'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/constants.ts new file mode 100644 index 0000000000000..bb58521754d4f --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'number'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/index.ts index 0a3554feb02bc..7589c7b89c01b 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { NumberFormatEditor } from './number'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { NumberFormatEditor } from './number'; +export const numberFormatEditorFactory: FieldFormatEditorFactory = () => + import('./number').then((m) => m.NumberFormatEditor); +numberFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/number.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/number.tsx index f55c0c5f06c12..83110a4e42574 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/number.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/number/number.tsx @@ -11,9 +11,10 @@ import React, { Fragment } from 'react'; import { EuiCode, EuiFieldText, EuiFormRow, EuiIcon, EuiLink } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; import { FormatEditorSamples } from '../../samples'; +import { formatId } from './constants'; import { context as contextType } from '../../../../../../kibana_react/public'; @@ -23,7 +24,7 @@ export interface NumberFormatEditorParams { export class NumberFormatEditor extends DefaultFormatEditor { static contextType = contextType; - static formatId = 'number'; + static formatId = formatId; context!: React.ContextType; state = { diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/constants.ts new file mode 100644 index 0000000000000..282a02d41ffb8 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'percent'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/index.ts index 3336445035ac8..5fd8871f2798b 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { PercentFormatEditor } from './percent'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { PercentFormatEditor } from './percent'; +export const percentFormatEditorFactory: FieldFormatEditorFactory = () => + import('./percent').then((m) => m.PercentFormatEditor); +percentFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/percent.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/percent.tsx index c7d4814f57c23..986217793c1d4 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/percent.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/percent/percent.tsx @@ -6,11 +6,12 @@ * Side Public License, v 1. */ -import { NumberFormatEditor } from '../number'; +import { NumberFormatEditor } from '../number/number'; import { defaultState } from '../default'; +import { formatId } from './constants'; export class PercentFormatEditor extends NumberFormatEditor { - static formatId = 'percent'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [0.1, 0.99999, 1, 100, 1000], diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/constants.ts new file mode 100644 index 0000000000000..e6a9168ab8aed --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'static_lookup'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/index.ts index 85020368ff813..325e132e9d791 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { StaticLookupFormatEditor } from './static_lookup'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { StaticLookupFormatEditor } from './static_lookup'; +export const staticLookupFormatEditorFactory: FieldFormatEditorFactory = () => + import('./static_lookup').then((m) => m.StaticLookupFormatEditor); +staticLookupFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx index 8ac03bb23bd25..485660fbb2bd4 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/static_lookup/static_lookup.tsx @@ -12,7 +12,8 @@ import { EuiBasicTable, EuiButton, EuiFieldText, EuiFormRow, EuiSpacer } from '@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor } from '../default'; +import { DefaultFormatEditor } from '../default/default'; +import { formatId } from './constants'; export interface StaticLookupFormatEditorFormatParams { lookupEntries: Array<{ key: string; value: string }>; @@ -26,7 +27,7 @@ interface StaticLookupItem { } export class StaticLookupFormatEditor extends DefaultFormatEditor { - static formatId = 'static_lookup'; + static formatId = formatId; onLookupChange = (newLookupParams: { value?: string; key?: string }, index: number) => { const lookupEntries = [...this.props.formatParams.lookupEntries]; lookupEntries[index] = { diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/constants.ts new file mode 100644 index 0000000000000..4c4f9a5c3fc5d --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'string'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/index.ts index 6a44f8c0f821b..194b2444c5576 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { StringFormatEditor } from './string'; +import { FieldFormatEditorFactory } from '../types'; +import { formatId } from './constants'; + +export type { StringFormatEditor } from './string'; +export const stringFormatEditorFactory: FieldFormatEditorFactory = () => + import('./string').then((m) => m.StringFormatEditor); +stringFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/string.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/string.tsx index e86a62775cebc..c5d53a0ce9c95 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/string.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/string/string.tsx @@ -11,9 +11,10 @@ import React, { Fragment } from 'react'; import { EuiFormRow, EuiSelect } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; import { FormatEditorSamples } from '../../samples'; +import { formatId } from './constants'; interface StringFormatEditorFormatParams { transform: string; @@ -25,7 +26,7 @@ interface TransformOptions { } export class StringFormatEditor extends DefaultFormatEditor { - static formatId = 'string'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [ diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/constants.ts new file mode 100644 index 0000000000000..01e8e4593c1c6 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'truncate'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/index.ts index f41f62a0d3371..2b0cfda4dcab3 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/index.ts @@ -6,4 +6,10 @@ * Side Public License, v 1. */ -export { TruncateFormatEditor } from './truncate'; +import { formatId } from './constants'; +import { FieldFormatEditorFactory } from '../types'; + +export type { TruncateFormatEditor } from './truncate'; +export const truncateFormatEditorFactory: FieldFormatEditorFactory = () => + import('./truncate').then((m) => m.TruncateFormatEditor); +truncateFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/truncate.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/truncate.tsx index 03b7d6e0573cc..8d4a227270718 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/truncate.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/truncate/truncate.tsx @@ -11,18 +11,19 @@ import React, { Fragment } from 'react'; import { EuiFieldNumber, EuiFormRow } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, defaultState } from '../default'; +import { DefaultFormatEditor, defaultState } from '../default/default'; import { FormatEditorSamples } from '../../samples'; import { sample } from './sample'; +import { formatId } from './constants'; interface TruncateFormatEditorFormatParams { fieldLength: number; } export class TruncateFormatEditor extends DefaultFormatEditor { - static formatId = 'truncate'; + static formatId = formatId; state = { ...defaultState, sampleInputs: [sample], diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts new file mode 100644 index 0000000000000..90739a56fe914 --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import type { DefaultFormatEditor } from './default'; + +export type FieldFormatEditor = typeof DefaultFormatEditor; +export type FieldFormatEditorFactory = (() => Promise) & { + formatId: string; +}; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/constants.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/constants.ts new file mode 100644 index 0000000000000..ab6c5bc34f31a --- /dev/null +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export const formatId = 'url'; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/index.ts index 9bf60ddcbddbd..6da051003554c 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/index.ts @@ -5,5 +5,11 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ +import { formatId } from './constants'; +import { FieldFormatEditorFactory } from '../types'; -export { UrlFormatEditor } from './url'; +export type { UrlFormatEditor } from './url'; + +export const urlFormatEditorFactory: FieldFormatEditorFactory = () => + import('./url').then((m) => m.UrlFormatEditor); +urlFormatEditorFactory.formatId = formatId; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx index 3b00deef19e01..df87cd395150b 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx @@ -18,9 +18,10 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, FormatEditorProps } from '../default'; +import { DefaultFormatEditor, FormatEditorProps } from '../default/default'; import { FormatEditorSamples } from '../../samples'; +import { formatId } from './constants'; import { context as contextType } from '../../../../../../kibana_react/public'; @@ -54,7 +55,7 @@ export class UrlFormatEditor extends DefaultFormatEditor< UrlFormatEditorFormatState > { static contextType = contextType; - static formatId = 'url'; + static formatId = formatId; private get sampleIconPath() { const sampleIconPath = `/plugins/indexPatternManagement/assets/icons/{{value}}.png`; return this.context?.services.http diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx index 043a911e69812..d8810b99315e2 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx @@ -6,8 +6,11 @@ * Side Public License, v 1. */ -import React, { PureComponent, Fragment } from 'react'; +import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui'; +import memoize from 'lodash/memoize'; +import React, { PureComponent, LazyExoticComponent, ComponentType } from 'react'; import { FieldFormat } from 'src/plugins/data/public'; +import { FieldFormatEditorFactory } from './editors'; export interface FormatEditorProps { fieldType: string; @@ -28,21 +31,33 @@ interface EditorComponentProps { } interface FormatEditorState { - EditorComponent: React.FC; + EditorComponent: LazyExoticComponent> | null; fieldFormatId?: string; } +// use memoize to get stable reference +const unwrapEditor = memoize( + (editorFactory: FieldFormatEditorFactory | null): FormatEditorState['EditorComponent'] => { + if (!editorFactory) return null; + + // @ts-ignore + // TODO: Type '(change: { [key: string]: any; fieldType: string; }) => void' is not assignable to type '(newParams: Record) => void'. + // https://github.com/elastic/kibana/issues/104637 + return React.lazy(() => editorFactory().then((editor) => ({ default: editor }))); + } +); + export class FormatEditor extends PureComponent { constructor(props: FormatEditorProps) { super(props); this.state = { - EditorComponent: props.fieldFormatEditors.getById(props.fieldFormatId), + EditorComponent: unwrapEditor(props.fieldFormatEditors.getById(props.fieldFormatId)), }; } static getDerivedStateFromProps(nextProps: FormatEditorProps) { return { - EditorComponent: nextProps.fieldFormatEditors.getById(nextProps.fieldFormatId) || null, + EditorComponent: unwrapEditor(nextProps.fieldFormatEditors.getById(nextProps.fieldFormatId)), }; } @@ -51,17 +66,25 @@ export class FormatEditor extends PureComponent + <> {EditorComponent ? ( - + + + + } + > + + ) : null} - + ); } } diff --git a/src/plugins/index_pattern_field_editor/public/index.ts b/src/plugins/index_pattern_field_editor/public/index.ts index f89490735973b..f5009a25071ca 100644 --- a/src/plugins/index_pattern_field_editor/public/index.ts +++ b/src/plugins/index_pattern_field_editor/public/index.ts @@ -22,6 +22,7 @@ import { IndexPatternFieldEditorPlugin } from './plugin'; export { PluginStart as IndexPatternFieldEditorStart } from './types'; export { DefaultFormatEditor } from './components'; +export { FieldFormatEditorFactory, FieldFormatEditor } from './components'; export function plugin() { return new IndexPatternFieldEditorPlugin(); diff --git a/src/plugins/index_pattern_field_editor/public/service/field_format_editors/field_format_editors.ts b/src/plugins/index_pattern_field_editor/public/service/field_format_editors/field_format_editors.ts index fdc54a39c8c2a..8e3b4691b9d91 100644 --- a/src/plugins/index_pattern_field_editor/public/service/field_format_editors/field_format_editors.ts +++ b/src/plugins/index_pattern_field_editor/public/service/field_format_editors/field_format_editors.ts @@ -6,16 +6,16 @@ * Side Public License, v 1. */ -import { DefaultFormatEditor } from '../../components/field_format_editor'; +import { FieldFormatEditorFactory } from '../../components/field_format_editor'; export class FieldFormatEditors { - private editors: Array = []; + private editors: FieldFormatEditorFactory[] = []; - public setup(defaultFieldEditors: FieldFormatEditors['editors'] = []) { + public setup(defaultFieldEditors: FieldFormatEditorFactory[] = []) { this.editors = defaultFieldEditors; return { - register: (editor: typeof DefaultFormatEditor) => { + register: (editor: FieldFormatEditorFactory) => { this.editors.push(editor); }, }; diff --git a/src/plugins/index_pattern_field_editor/public/service/format_editor_service.ts b/src/plugins/index_pattern_field_editor/public/service/format_editor_service.ts index faabc7f5b9450..69ae89a42c947 100644 --- a/src/plugins/index_pattern_field_editor/public/service/format_editor_service.ts +++ b/src/plugins/index_pattern_field_editor/public/service/format_editor_service.ts @@ -9,18 +9,19 @@ import { FieldFormatEditors } from './field_format_editors'; import { - BytesFormatEditor, - ColorFormatEditor, - DateFormatEditor, - DateNanosFormatEditor, - DurationFormatEditor, - NumberFormatEditor, - PercentFormatEditor, - StaticLookupFormatEditor, - StringFormatEditor, - TruncateFormatEditor, - UrlFormatEditor, - HistogramFormatEditor, + bytesFormatEditorFactory, + colorFormatEditorFactory, + dateFormatEditorFactory, + dateNanosFormatEditorFactory, + durationFormatEditorFactory, + numberFormatEditorFactory, + percentFormatEditorFactory, + staticLookupFormatEditorFactory, + stringFormatEditorFactory, + truncateFormatEditorFactory, + urlFormatEditorFactory, + histogramFormatEditorFactory, + FieldFormatEditorFactory, } from '../components'; /** @@ -36,22 +37,24 @@ export class FormatEditorService { } public setup() { - const defaultFieldFormatEditors = [ - BytesFormatEditor, - ColorFormatEditor, - DateFormatEditor, - DateNanosFormatEditor, - DurationFormatEditor, - NumberFormatEditor, - PercentFormatEditor, - StaticLookupFormatEditor, - StringFormatEditor, - TruncateFormatEditor, - UrlFormatEditor, - HistogramFormatEditor, + const defaultFieldFormatEditorFactories: FieldFormatEditorFactory[] = [ + bytesFormatEditorFactory, + colorFormatEditorFactory, + dateFormatEditorFactory, + dateNanosFormatEditorFactory, + durationFormatEditorFactory, + numberFormatEditorFactory, + percentFormatEditorFactory, + staticLookupFormatEditorFactory, + stringFormatEditorFactory, + truncateFormatEditorFactory, + urlFormatEditorFactory, + histogramFormatEditorFactory, ]; - const fieldFormatEditorsSetup = this.fieldFormatEditors.setup(defaultFieldFormatEditors); + const fieldFormatEditorsSetup = this.fieldFormatEditors.setup( + defaultFieldFormatEditorFactories + ); return { fieldFormatEditors: fieldFormatEditorsSetup, diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap index 82d21eb5d30ad..501006cad89e1 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap @@ -2,24 +2,60 @@ exports[`FieldFormatEditor should render normally 1`] = ` - + + + + } + > + + `; exports[`FieldFormatEditor should render nothing if there is no editor for the format 1`] = ` - + + + + } + > + + `; diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx index 78dc87f7a8027..2bca423fdbe35 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx +++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.test.tsx @@ -26,7 +26,7 @@ const formatEditors = { ip: TestEditor, number: TestEditor, }, - getById: jest.fn(() => TestEditor), + getById: jest.fn(() => () => Promise.resolve(TestEditor)), }; describe('FieldFormatEditor', () => { @@ -43,6 +43,7 @@ describe('FieldFormatEditor', () => { /> ); + component.update(); expect(component).toMatchSnapshot(); }); diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx index 60107e19170c7..5a8b177ebcb16 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx +++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx @@ -6,8 +6,13 @@ * Side Public License, v 1. */ -import React, { PureComponent, Fragment } from 'react'; -import type { DefaultFormatEditor } from 'src/plugins/index_pattern_field_editor/public'; +import React, { ComponentType, LazyExoticComponent, PureComponent } from 'react'; +import memoize from 'lodash/memoize'; +import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui'; +import type { + DefaultFormatEditor, + FieldFormatEditorFactory, +} from 'src/plugins/index_pattern_field_editor/public'; export interface FieldFormatEditorProps { fieldType: string; @@ -28,9 +33,21 @@ interface EditorComponentProps { } interface FieldFormatEditorState { - EditorComponent: React.FC; + EditorComponent: LazyExoticComponent> | null; } +// use memoize to get stable reference +const unwrapEditor = memoize( + (editorFactory: FieldFormatEditorFactory | null): FieldFormatEditorState['EditorComponent'] => { + if (!editorFactory) return null; + + // @ts-ignore + // TODO: Type '(change: { [key: string]: any; fieldType: string; }) => void' is not assignable to type '(newParams: Record) => void'. + // https://github.com/elastic/kibana/issues/104637 + return React.lazy(() => editorFactory().then((editor) => ({ default: editor }))); + } +); + export class FieldFormatEditor extends PureComponent< FieldFormatEditorProps, FieldFormatEditorState @@ -38,13 +55,13 @@ export class FieldFormatEditor extends PureComponent< constructor(props: FieldFormatEditorProps) { super(props); this.state = { - EditorComponent: props.fieldFormatEditors.getById(props.fieldFormatId), + EditorComponent: unwrapEditor(props.fieldFormatEditors.getById(props.fieldFormatId)), }; } static getDerivedStateFromProps(nextProps: FieldFormatEditorProps) { return { - EditorComponent: nextProps.fieldFormatEditors.getById(nextProps.fieldFormatId) || null, + EditorComponent: unwrapEditor(nextProps.fieldFormatEditors.getById(nextProps.fieldFormatId)), }; } @@ -53,17 +70,25 @@ export class FieldFormatEditor extends PureComponent< const { fieldType, fieldFormat, fieldFormatParams, onChange, onError } = this.props; return ( - + <> {EditorComponent ? ( - + + + + } + > + + ) : null} - + ); } } From 22676a6696573dab8ef3fa486149e23965d8f6cc Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 13:03:23 +0200 Subject: [PATCH 2/8] improve types --- .../editors/default/default.tsx | 15 +++------ .../field_format_editor/editors/types.ts | 29 ++++++++++++++-- .../field_format_editor/format_editor.tsx | 32 +++++++----------- .../field_format_editor.test.tsx | 1 - .../field_format_editor.tsx | 33 ++++++++----------- 5 files changed, 56 insertions(+), 54 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx index 776c914358f6d..1b61a11099cb1 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx @@ -9,9 +9,9 @@ import React, { PureComponent, ReactText } from 'react'; import { i18n } from '@kbn/i18n'; -import { FieldFormat, FieldFormatsContentType } from 'src/plugins/data/public'; +import { FieldFormatsContentType } from 'src/plugins/data/public'; import { Sample, SampleInput } from '../../types'; -import { FormatSelectEditorProps } from '../../field_format_editor'; +import { FormatEditorProps } from '../types'; import { formatId } from './constants'; export const convertSampleInput = ( @@ -45,14 +45,6 @@ interface SampleInputs { [key: string]: Array; } -export interface FormatEditorProps

{ - fieldType: string; - format: FieldFormat; - formatParams: { type?: string } & P; - onChange: (newParams: Record) => void; - onError: FormatSelectEditorProps['onError']; -} - export interface FormatEditorState { sampleInputs: SampleInput[]; sampleConverterType: FieldFormatsContentType; @@ -89,9 +81,10 @@ export class DefaultFormatEditor

extends PureComponent< } onChange = (newParams = {}) => { - const { onChange, formatParams } = this.props; + const { onChange, formatParams, fieldType } = this.props; onChange({ + fieldType, ...formatParams, ...newParams, }); diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts index 90739a56fe914..6f9c7811841f4 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts @@ -6,9 +6,34 @@ * Side Public License, v 1. */ -import type { DefaultFormatEditor } from './default'; +import type { ComponentType } from 'react'; +import type { FieldFormat } from '../../../../../data/common'; +import type { FormatSelectEditorProps } from '../field_format_editor'; -export type FieldFormatEditor = typeof DefaultFormatEditor; +/** + * Props for received by {@link FieldFormatEditor} + * @public + */ +export interface FormatEditorProps

{ + fieldType: string; + format: FieldFormat; + formatParams: { type?: string } & P; + onChange: (newParams: { fieldType: string; [key: string]: any }) => void; + onError: FormatSelectEditorProps['onError']; +} + +/** + * A React component for editing custom field format params + * @public + */ +export type FieldFormatEditor = ComponentType< + FormatEditorProps +> & { formatId: string }; + +/** + * A factory for registering field format editor for a field format with `formatId` + * @public + */ export type FieldFormatEditorFactory = (() => Promise) & { formatId: string; }; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx index d8810b99315e2..3d0876dc80cda 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx @@ -7,10 +7,10 @@ */ import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui'; -import memoize from 'lodash/memoize'; -import React, { PureComponent, LazyExoticComponent, ComponentType } from 'react'; -import { FieldFormat } from 'src/plugins/data/public'; -import { FieldFormatEditorFactory } from './editors'; +import { memoize } from 'lodash'; +import React, { PureComponent, LazyExoticComponent } from 'react'; +import type { FieldFormat } from 'src/plugins/data/public'; +import { FieldFormatEditorFactory, FieldFormatEditor } from './editors'; export interface FormatEditorProps { fieldType: string; @@ -22,16 +22,8 @@ export interface FormatEditorProps { onError: (error?: string) => void; } -interface EditorComponentProps { - fieldType: FormatEditorProps['fieldType']; - format: FormatEditorProps['fieldFormat']; - formatParams: FormatEditorProps['fieldFormatParams']; - onChange: FormatEditorProps['onChange']; - onError: FormatEditorProps['onError']; -} - interface FormatEditorState { - EditorComponent: LazyExoticComponent> | null; + EditorComponent: LazyExoticComponent | null; fieldFormatId?: string; } @@ -39,10 +31,6 @@ interface FormatEditorState { const unwrapEditor = memoize( (editorFactory: FieldFormatEditorFactory | null): FormatEditorState['EditorComponent'] => { if (!editorFactory) return null; - - // @ts-ignore - // TODO: Type '(change: { [key: string]: any; fieldType: string; }) => void' is not assignable to type '(newParams: Record) => void'. - // https://github.com/elastic/kibana/issues/104637 return React.lazy(() => editorFactory().then((editor) => ({ default: editor }))); } ); @@ -70,9 +58,13 @@ export class FormatEditor extends PureComponent - - + // We specify minHeight to avoid too mitigate layout shifts while loading an editor + // ~430 corresponds to "4 lines" of EuiLoadingContent +

+ + + +
} > { /> ); - component.update(); expect(component).toMatchSnapshot(); }); diff --git a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx index 5a8b177ebcb16..f9ec26bbafc05 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx +++ b/src/plugins/index_pattern_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx @@ -6,17 +6,18 @@ * Side Public License, v 1. */ -import React, { ComponentType, LazyExoticComponent, PureComponent } from 'react'; -import memoize from 'lodash/memoize'; +import React, { LazyExoticComponent, PureComponent } from 'react'; +import { memoize } from 'lodash'; import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui'; import type { - DefaultFormatEditor, FieldFormatEditorFactory, + FieldFormatEditor as InnerFieldFormatEditor, } from 'src/plugins/index_pattern_field_editor/public'; +import type { FieldFormat } from 'src/plugins/data/public'; export interface FieldFormatEditorProps { fieldType: string; - fieldFormat: DefaultFormatEditor; + fieldFormat: FieldFormat; fieldFormatId: string; fieldFormatParams: { [key: string]: unknown }; fieldFormatEditors: any; @@ -24,26 +25,14 @@ export interface FieldFormatEditorProps { onError: (error?: string) => void; } -interface EditorComponentProps { - fieldType: FieldFormatEditorProps['fieldType']; - format: FieldFormatEditorProps['fieldFormat']; - formatParams: FieldFormatEditorProps['fieldFormatParams']; - onChange: FieldFormatEditorProps['onChange']; - onError: FieldFormatEditorProps['onError']; -} - interface FieldFormatEditorState { - EditorComponent: LazyExoticComponent> | null; + EditorComponent: LazyExoticComponent | null; } // use memoize to get stable reference const unwrapEditor = memoize( (editorFactory: FieldFormatEditorFactory | null): FieldFormatEditorState['EditorComponent'] => { if (!editorFactory) return null; - - // @ts-ignore - // TODO: Type '(change: { [key: string]: any; fieldType: string; }) => void' is not assignable to type '(newParams: Record) => void'. - // https://github.com/elastic/kibana/issues/104637 return React.lazy(() => editorFactory().then((editor) => ({ default: editor }))); } ); @@ -74,9 +63,13 @@ export class FieldFormatEditor extends PureComponent< {EditorComponent ? ( - - + // We specify minHeight to avoid too mitigate layout shifts while loading an editor + // ~430 corresponds to "4 lines" of EuiLoadingContent +
+ + + +
} > Date: Thu, 22 Jul 2021 13:05:04 +0200 Subject: [PATCH 3/8] improve --- .../public/components/field_format_editor/editors/index.ts | 2 +- src/plugins/index_pattern_field_editor/public/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts index 6ac71413e8920..fceb3511301c0 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/index.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -export type { FieldFormatEditor, FieldFormatEditorFactory } from './types'; +export type { FieldFormatEditor, FieldFormatEditorFactory, FormatEditorProps } from './types'; export { DefaultFormatEditor, defaultFormatEditorFactory } from './default'; diff --git a/src/plugins/index_pattern_field_editor/public/index.ts b/src/plugins/index_pattern_field_editor/public/index.ts index f5009a25071ca..a63c9ada52e3d 100644 --- a/src/plugins/index_pattern_field_editor/public/index.ts +++ b/src/plugins/index_pattern_field_editor/public/index.ts @@ -22,7 +22,7 @@ import { IndexPatternFieldEditorPlugin } from './plugin'; export { PluginStart as IndexPatternFieldEditorStart } from './types'; export { DefaultFormatEditor } from './components'; -export { FieldFormatEditorFactory, FieldFormatEditor } from './components'; +export { FieldFormatEditorFactory, FieldFormatEditor, FormatEditorProps } from './components'; export function plugin() { return new IndexPatternFieldEditorPlugin(); From 141ff6d7cd5d0b028126c9f6a6a8d6625c54b40b Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 13:14:08 +0200 Subject: [PATCH 4/8] revert field type change --- .../components/field_format_editor/editors/default/default.tsx | 3 +-- .../public/components/field_format_editor/editors/types.ts | 2 +- .../components/field_format_editor/field_format_editor.tsx | 2 +- .../public/components/field_format_editor/format_editor.tsx | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx index 1b61a11099cb1..7228a02afa2a5 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx @@ -81,10 +81,9 @@ export class DefaultFormatEditor

extends PureComponent< } onChange = (newParams = {}) => { - const { onChange, formatParams, fieldType } = this.props; + const { onChange, formatParams } = this.props; onChange({ - fieldType, ...formatParams, ...newParams, }); diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts index 6f9c7811841f4..28bbc22a1275f 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts @@ -18,7 +18,7 @@ export interface FormatEditorProps

{ fieldType: string; format: FieldFormat; formatParams: { type?: string } & P; - onChange: (newParams: { fieldType: string; [key: string]: any }) => void; + onChange: (newParams: { [key: string]: any }) => void; onError: FormatSelectEditorProps['onError']; } diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx index 155fbc7fd31f5..ccb6cf7794f87 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/field_format_editor.tsx @@ -101,7 +101,7 @@ export class FormatSelectEditor extends PureComponent< : undefined ); - onFormatParamsChange = (newParams: { fieldType: string; [key: string]: any }) => { + onFormatParamsChange = (newParams: { [key: string]: any }) => { const { fieldFormatId } = this.state; this.onFormatChange(fieldFormatId as string, newParams); }; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx index 3d0876dc80cda..dbbaf51f114b1 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/format_editor.tsx @@ -18,7 +18,7 @@ export interface FormatEditorProps { fieldFormatId: string; fieldFormatParams: { [key: string]: unknown }; fieldFormatEditors: any; - onChange: (change: { fieldType: string; [key: string]: any }) => void; + onChange: (change: { [key: string]: any }) => void; onError: (error?: string) => void; } From 6f9ee2078c6dcc4b128b3ca667f46833602b0611 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 14:11:28 +0200 Subject: [PATCH 5/8] fix types --- .../components/field_format_editor/editors/default/index.ts | 3 ++- .../public/components/field_format_editor/editors/types.ts | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts index 24bf718638cee..31d7e95897090 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts @@ -9,7 +9,8 @@ import { FieldFormatEditorFactory } from '../types'; import { formatId } from './constants'; -export { defaultState, FormatEditorProps, FormatEditorState } from './default'; +export { defaultState, FormatEditorState } from './default'; +export type { FormatEditorProps } from '../types'; export type { DefaultFormatEditor } from './default'; export const defaultFormatEditorFactory: FieldFormatEditorFactory = () => diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts index 28bbc22a1275f..556078286e524 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/types.ts @@ -34,6 +34,8 @@ export type FieldFormatEditor = ComponentType< * A factory for registering field format editor for a field format with `formatId` * @public */ -export type FieldFormatEditorFactory = (() => Promise) & { +export type FieldFormatEditorFactory = (() => Promise< + FieldFormatEditor +>) & { formatId: string; }; From caa27c6bc47b3e943dcebbea6070805646370f2d Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 14:46:20 +0200 Subject: [PATCH 6/8] fix types --- .../field_format_editor/editors/color/color.tsx | 3 ++- .../field_format_editor/editors/duration/duration.tsx | 8 ++------ .../components/field_format_editor/editors/url/url.tsx | 3 ++- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx index be90c7ea4c9e0..3570ef4c9d33a 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx @@ -12,10 +12,11 @@ import { EuiBasicTable, EuiButton, EuiColorPicker, EuiFieldText, EuiSpacer } fro import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, FormatEditorProps } from '../default/default'; +import { DefaultFormatEditor } from '../default/default'; import { formatId } from './constants'; import { fieldFormats } from '../../../../../../data/public'; +import { FormatEditorProps } from '../types'; interface Color { range?: string; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx index 2c8117bcc760f..2bfb0182cbb88 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx @@ -13,15 +13,11 @@ import { EuiFieldNumber, EuiFormRow, EuiSelect, EuiSwitch } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { - DefaultFormatEditor, - defaultState, - FormatEditorProps, - FormatEditorState, -} from '../default/default'; +import { DefaultFormatEditor, defaultState, FormatEditorState } from '../default/default'; import { FormatEditorSamples } from '../../samples'; import { formatId } from './constants'; +import { FormatEditorProps } from '../types'; interface DurationFormatEditorState { hasDecimalError: boolean; diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx index df87cd395150b..b5627a16732d8 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/url/url.tsx @@ -18,12 +18,13 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import { DefaultFormatEditor, FormatEditorProps } from '../default/default'; +import { DefaultFormatEditor } from '../default/default'; import { FormatEditorSamples } from '../../samples'; import { formatId } from './constants'; import { context as contextType } from '../../../../../../kibana_react/public'; +import { FormatEditorProps } from '../types'; interface OnChangeParam { type: string; From e02b4dae2de186dc276d9e5063ce8c5e13a8c46e Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 16:03:36 +0200 Subject: [PATCH 7/8] fix types and tests --- .../__snapshots__/format_editor.test.tsx.snap | 54 ++++++++++--------- .../field_format_editor.test.tsx.snap | 54 ++++++++++--------- .../field_format_editor.test.tsx | 6 +-- .../field_format_editor.tsx | 2 +- 4 files changed, 64 insertions(+), 52 deletions(-) diff --git a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap index 501006cad89e1..6dff1359de9a7 100644 --- a/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap +++ b/src/plugins/index_pattern_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap @@ -4,19 +4,22 @@ exports[`FieldFormatEditor should render normally 1`] = ` - - + } + > + + + + } > - - + } + > + + + + } > - - + } + > + + + + } > - - + } + > + + + + } > { const component = shallow( { const component = shallow( void; + onChange: (change: { [key: string]: any }) => void; onError: (error?: string) => void; } From 148096ebb36da78e6e3583216597d5d7a6a73436 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 22 Jul 2021 16:48:14 +0200 Subject: [PATCH 8/8] fix types --- .../public/components/field_editor/field_editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx b/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx index b05ddaed064cd..fc55e8a36c99e 100644 --- a/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx +++ b/src/plugins/index_pattern_management/public/components/field_editor/field_editor.tsx @@ -253,7 +253,7 @@ export class FieldEditor extends PureComponent { + onFormatParamsChange = (newParams: { [key: string]: any }) => { const { fieldFormatId } = this.state; this.onFormatChange(fieldFormatId as string, newParams); };