Fix color and static lookup field formatters not loading

src/ui/public/field_editor/components/field_format_editor/editors/bytes/bytes.test.js

@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('BytesFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(BytesFormatEditor.formatId).toEqual('bytes');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <BytesFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ColorFormatEditor should render multiple colors 1`] = `
+exports[`ColorFormatEditorComponent should render multiple colors 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -84,7 +84,7 @@ exports[`ColorFormatEditor should render multiple colors 1`] = `
 </React.Fragment>
 `;
 
-exports[`ColorFormatEditor should render other type normally (range field) 1`] = `
+exports[`ColorFormatEditorComponent should render other type normally (range field) 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -161,7 +161,7 @@ exports[`ColorFormatEditor should render other type normally (range field) 1`] =
 </React.Fragment>
 `;
 
-exports[`ColorFormatEditor should render string type normally (regex field) 1`] = `
+exports[`ColorFormatEditorComponent should render string type normally (regex field) 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={

src/ui/public/field_editor/components/field_format_editor/editors/color/color.js

@@ -36,8 +36,6 @@ import { DEFAULT_COLOR } from '../../../../../../../core_plugins/kibana/common/f
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 export class ColorFormatEditorComponent extends DefaultFormatEditor {
-  static formatId = 'color';
-
   constructor(props) {
     super(props);
     this.onChange({
@@ -203,3 +201,4 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
 }
 
 export const ColorFormatEditor = injectI18n(ColorFormatEditorComponent);
+ColorFormatEditor.formatId = 'color';

src/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { ColorFormatEditorComponent } from './color';
+import { ColorFormatEditor, ColorFormatEditorComponent } from './color';
 import { DEFAULT_COLOR } from '../../../../../../../core_plugins/kibana/common/field_formats/types/color_default';
 
 const fieldType = 'string';
@@ -34,6 +34,12 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('ColorFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(ColorFormatEditor.formatId).toEqual('color');
+  });
+});
+
+describe('ColorFormatEditorComponent', () => {
   it('should render string type normally (regex field)', async () => {
     const component = shallowWithIntl(
       <ColorFormatEditorComponent

src/ui/public/field_editor/components/field_format_editor/editors/date/date.test.js

@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('DateFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(DateFormatEditor.formatId).toEqual('date');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <DateFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/duration/duration.test.js

@@ -57,6 +57,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('DurationFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(DurationFormatEditor.formatId).toEqual('duration');
+  });
+
   it('should render human readable output normally', async () => {
     const component = shallow(
       <DurationFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/number/number.test.js

@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('NumberFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(NumberFormatEditor.formatId).toEqual('number');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <NumberFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/percent/percent.test.js

@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('PercentFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(PercentFormatEditor.formatId).toEqual('percent');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <PercentFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StaticLookupFormatEditor should render multiple lookup entries and unknown key value 1`] = `
+exports[`StaticLookupFormatEditorComponent should render multiple lookup entries and unknown key value 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={
@@ -94,7 +94,7 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
 </React.Fragment>
 `;
 
-exports[`StaticLookupFormatEditor should render normally 1`] = `
+exports[`StaticLookupFormatEditorComponent should render normally 1`] = `
 <React.Fragment>
   <EuiBasicTable
     columns={

src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js

@@ -34,7 +34,6 @@ import {
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
-  static formatId = 'static_lookup';
 
   onLookupChange = (newLookupParams, index) => {
     const lookupEntries = [...this.props.formatParams.lookupEntries];
@@ -164,3 +163,4 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
 }
 
 export const StaticLookupFormatEditor = injectI18n(StaticLookupFormatEditorComponent);
+StaticLookupFormatEditor.formatId = 'static_lookup';

src/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js

@@ -20,7 +20,7 @@
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { StaticLookupFormatEditorComponent } from './static_lookup';
+import { StaticLookupFormatEditor, StaticLookupFormatEditorComponent } from './static_lookup';
 
 const fieldType = 'string';
 const format = {
@@ -33,8 +33,13 @@ const formatParams = {
 const onChange = jest.fn();
 const onError = jest.fn();
 
-
 describe('StaticLookupFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(StaticLookupFormatEditor.formatId).toEqual('static_lookup');
+  });
+});
+
+describe('StaticLookupFormatEditorComponent', () => {
   it('should render normally', async () => {
     const component = shallowWithIntl(
       <StaticLookupFormatEditorComponent

src/ui/public/field_editor/components/field_format_editor/editors/string/string.test.js

@@ -42,6 +42,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('StringFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(StringFormatEditor.formatId).toEqual('string');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <StringFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/truncate/truncate.test.js

@@ -34,6 +34,10 @@ const onChange = jest.fn();
 const onError = jest.fn();
 
 describe('TruncateFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(TruncateFormatEditor.formatId).toEqual('truncate');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <TruncateFormatEditor

src/ui/public/field_editor/components/field_format_editor/editors/url/url.test.js

@@ -43,6 +43,10 @@ jest.mock('ui/chrome', () => ({
 
 
 describe('UrlFormatEditor', () => {
+  it('should have a formatId', () => {
+    expect(UrlFormatEditor.formatId).toEqual('url');
+  });
+
   it('should render normally', async () => {
     const component = shallow(
       <UrlFormatEditor