[7.x] [FieldFormats] Lazy load field formats editors (#106439)

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],

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

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;

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/color/color.tsx

@@ -12,9 +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';
+import { DefaultFormatEditor } from '../default/default';
+import { formatId } from './constants';
 
 import { fieldFormats } from '../../../../../../data/public';
+import { FormatEditorProps } from '../types';
 
 interface Color {
   range?: string;
@@ -32,7 +34,7 @@ interface ColorFormatEditorFormatParams {
 }
 
 export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorFormatParams> {
-  static formatId = 'color';
+  static formatId = formatId;
   constructor(props: FormatEditorProps<ColorFormatEditorFormatParams>) {
     super(props);
     this.onChange({

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

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;

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

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<DateFormatEditorFormatParams> {
-  static formatId = 'date';
+  static formatId = formatId;
   state = {
     ...defaultState,
     sampleInputs: [

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;

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

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<DateNanosFormatEditorFormatParams> {
-  static formatId = 'date_nanos';
+  static formatId = formatId;
   state = {
     ...defaultState,
     sampleInputs: [

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;

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

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/default.tsx

@@ -9,9 +9,10 @@
 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 = (
   converter: (input: SampleInput) => string,
@@ -44,14 +45,6 @@ interface SampleInputs {
   [key: string]: Array<ReactText[] | ReactText>;
 }
 
-export interface FormatEditorProps<P> {
-  fieldType: string;
-  format: FieldFormat;
-  formatParams: { type?: string } & P;
-  onChange: (newParams: Record<string, any>) => void;
-  onError: FormatSelectEditorProps['onError'];
-}
-
 export interface FormatEditorState {
   sampleInputs: SampleInput[];
   sampleConverterType: FieldFormatsContentType;
@@ -72,7 +65,7 @@ export class DefaultFormatEditor<P = {}, S = {}> extends PureComponent<
   FormatEditorProps<P>,
   FormatEditorState & S
 > {
-  static formatId = 'default';
+  static formatId = formatId;
   state = defaultState as FormatEditorState & S;
 
   static getDerivedStateFromProps(nextProps: FormatEditorProps<{}>, state: FormatEditorState) {

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/default/index.ts

@@ -6,4 +6,13 @@
  * Side Public License, v 1.
  */
 
-export { DefaultFormatEditor, defaultState, FormatEditorProps, FormatEditorState } from './default';
+import { FieldFormatEditorFactory } from '../types';
+import { formatId } from './constants';
+
+export { defaultState, FormatEditorState } from './default';
+export type { FormatEditorProps } from '../types';
+export type { DefaultFormatEditor } from './default';
+
+export const defaultFormatEditorFactory: FieldFormatEditorFactory = () =>
+  import('./default').then((m) => m.DefaultFormatEditor);
+defaultFormatEditorFactory.formatId = formatId;

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

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/duration/duration.tsx

@@ -13,14 +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';
+import { DefaultFormatEditor, defaultState, FormatEditorState } from '../default/default';
 
 import { FormatEditorSamples } from '../../samples';
+import { formatId } from './constants';
+import { FormatEditorProps } from '../types';
 
 interface DurationFormatEditorState {
   hasDecimalError: boolean;
@@ -49,7 +46,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],

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;

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

src/plugins/index_pattern_field_editor/public/components/field_format_editor/editors/histogram/histogram.tsx

@@ -10,16 +10,17 @@ 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';
   params: { pattern?: string } & Record<string, unknown>;
 }
 
 export class HistogramFormatEditor extends DefaultFormatEditor<HistogramFormatEditorParams> {
-  static formatId = 'histogram';
+  static formatId = formatId;
   state = {
     ...defaultState,
     sampleInputs: [

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;