[ES UI Shared] Migrate JsonEditor to monaco

src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx

@@ -9,8 +9,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { EuiFormRow } from '@elastic/eui';
 import { debounce } from 'lodash';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 
-import { EuiCodeEditor } from '../code_editor';
 import { useJson, OnJsonEditorUpdateHandler } from './use_json';
 
 interface Props<T extends object = { [key: string]: any }> {
@@ -19,7 +19,7 @@ interface Props<T extends object = { [key: string]: any }> {
   helpText?: React.ReactNode;
   value?: string;
   defaultValue?: T;
-  euiCodeEditorProps?: { [key: string]: any };
+  codeEditorProps?: { [key: string]: any };
   error?: string | null;
 }
 
@@ -29,7 +29,7 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
   onUpdate,
   value,
   defaultValue,
-  euiCodeEditorProps,
+  codeEditorProps,
   error: propsError,
 }: Props<T>) {
   const {
@@ -83,23 +83,17 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
       error={error}
       fullWidth
     >
-      <EuiCodeEditor
-        mode="json"
-        theme="textmate"
-        width="100%"
-        height="500px"
-        setOptions={{
-          showLineNumbers: false,
+      <CodeEditor
+        languageId="json"
+        height={500}
+        options={{
+          lineNumbers: 'off',
           tabSize: 2,
+          automaticLayout: true,
         }}
-        editorProps={{
-          $blockScrolling: Infinity,
-        }}
-        showGutter={false}
-        minLines={6}
-        value={isControlled ? value : content}
+        value={isControlled ? value! : content}
         onChange={onEuiCodeEditorChange}
-        {...euiCodeEditorProps}
+        {...codeEditorProps}
       />
     </EuiFormRow>
   );

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx

@@ -32,6 +32,23 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
 describe('<ComponentTemplateCreate />', () => {
   let testBed: ComponentTemplateCreateTestBed;
 

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx

@@ -31,6 +31,23 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
 describe('<ComponentTemplateEdit />', () => {
   let testBed: ComponentTemplateEditTestBed;
 

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx

@@ -209,7 +209,7 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
               path="_meta"
               component={JsonEditorField}
               componentProps={{
-                euiCodeEditorProps: {
+                codeEditorProps: {
                   ['data-test-subj']: 'metaEditor',
                   height: '200px',
                   'aria-label': i18n.translate(

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { ReactWrapper } from 'enzyme';
 import { registerTestBed, TestBed, findTestSubject } from '@kbn/test-jest-helpers';
@@ -23,6 +24,23 @@ export interface DomFields {
   };
 }
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
+        }}
+      />
+    ),
+  };
+});
+
 const createActions = (testBed: TestBed<TestSubjects>) => {
   const { find, exists, form, component } = testBed;
 
@@ -206,7 +224,10 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
     await act(async () => {
       form.setInputValue('runtimeFieldEditor.nameField.input', field.name);
       jest.advanceTimersByTime(0); // advance timers to allow the form to validate
-      form.setInputValue('runtimeFieldEditor.scriptField', field.script.source);
+      find('runtimeFieldEditor.scriptField')
+        .getDOMNode()
+        .setAttribute('data-currentvalue', field.script.source);
+      find('runtimeFieldEditor.scriptField').simulate('change');
       jest.advanceTimersByTime(0); // advance timers to allow the form to validate
       find('typeField').simulate('change', [
         {
@@ -296,8 +317,8 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
   };
 
   const updateJsonEditor = (testSubject: TestSubjects, value: object) => {
-    find(testSubject).simulate('change', { jsonString: JSON.stringify(value) });
-    jest.advanceTimersByTime(0); // advance timers to allow the form to validate
+    find(testSubject).getDOMNode().setAttribute('data-currentvalue', JSON.stringify(value));
+    find(testSubject).simulate('change');
   };
 
   const getJsonEditorValue = (testSubject: TestSubjects) => {

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx

@@ -54,10 +54,10 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
   const CodeEditorMock = (props: any) => (
     <input
       data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
-      data-value={props.value}
+      data-currentvalue={props.value}
       value={props.value}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange(e.target.value);
+        props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
       }}
     />
   );

x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx

@@ -175,10 +175,10 @@ describe('Mappings editor: core', () => {
 
       // Update the dynamic templates editor value
       const updatedValueTemplates = [{ after: 'bar' }];
-      await act(async () => {
-        updateJsonEditor('dynamicTemplatesEditor', updatedValueTemplates);
-      });
-      component.update();
+      // await act(async () => {
+      updateJsonEditor('dynamicTemplatesEditor', updatedValueTemplates);
+      // });
+      // component.update();
 
       templatesValue = getJsonEditorValue('dynamicTemplatesEditor');
       expect(templatesValue).toEqual(updatedValueTemplates);

x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/meta_field_section.tsx

@@ -43,7 +43,7 @@ export const MetaFieldSection = () => (
       path="metaField"
       component={JsonEditorField}
       componentProps={{
-        euiCodeEditorProps: {
+        codeEditorProps: {
           height: '400px',
           'aria-label': i18n.translate('xpack.idxMgmt.mappingsEditor.metaFieldEditorAriaLabel', {
             defaultMessage: '_meta field data editor',

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/meta_parameter.tsx

@@ -40,7 +40,7 @@ export const MetaParameter: FunctionComponent<Props> = ({ defaultToggleValue })
       config={getFieldConfig('meta')}
       component={JsonEditorField}
       componentProps={{
-        euiCodeEditorProps: {
+        codeEditorProps: {
           ['data-test-subj']: 'metaParameterEditor',
           height: '300px',
           'aria-label': i18n.translate('xpack.idxMgmt.mappingsEditor.metaParameterAriaLabel', {

x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx

@@ -7,6 +7,8 @@
 
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { uiSettingsServiceMock } from '@kbn/core/public/mocks';
 import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 
 jest.mock('lodash', () => {
@@ -18,17 +20,39 @@ jest.mock('lodash', () => {
   };
 });
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+
+  const CodeEditorMock = (props: any) => (
+    <input
+      data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+      data-currentvalue={props.value}
+      value={props.value}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
+      }}
+    />
+  );
+
+  return {
+    ...original,
+    CodeEditor: CodeEditorMock,
+  };
+});
+
 import { registerTestBed, TestBed } from '@kbn/test-jest-helpers';
 import { LoadMappingsProvider } from './load_mappings_provider';
 
 const ComponentToTest = ({ onJson }: { onJson: () => void }) => (
-  <LoadMappingsProvider onJson={onJson} esNodesPlugins={[]}>
-    {(openModal) => (
-      <button onClick={openModal} data-test-subj="load-json-button">
-        Load JSON
-      </button>
-    )}
-  </LoadMappingsProvider>
+  <KibanaContextProvider services={{ uiSettings: uiSettingsServiceMock.createSetupContract() }}>
+    <LoadMappingsProvider onJson={onJson} esNodesPlugins={[]}>
+      {(openModal) => (
+        <button onClick={openModal} data-test-subj="load-json-button">
+          Load JSON
+        </button>
+      )}
+    </LoadMappingsProvider>
+  </KibanaContextProvider>
 );
 
 const setup = (props: any) =>
@@ -46,12 +70,8 @@ const openModalWithJsonContent =
 
     component.update();
 
-    act(() => {
-      // Set the mappings to load
-      find('mockCodeEditor').simulate('change', {
-        jsonString: JSON.stringify(json),
-      });
-    });
+    find('mockCodeEditor').getDOMNode().setAttribute('data-currentvalue', JSON.stringify(json));
+    find('mockCodeEditor').simulate('change');
   };
 
 describe('<LoadMappingsProvider />', () => {

x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx

@@ -242,7 +242,7 @@ export const LoadMappingsProvider = ({ onJson, esNodesPlugins, children }: Props
                 label={i18nTexts.editor.label}
                 onUpdate={onJsonUpdate}
                 defaultValue={state.json?.unparsed}
-                euiCodeEditorProps={{
+                codeEditorProps={{
                   height: '450px',
                 }}
               />

x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx

@@ -118,7 +118,7 @@ export const TemplatesForm = React.memo(({ value }: Props) => {
           path="dynamicTemplates"
           component={JsonEditorField}
           componentProps={{
-            euiCodeEditorProps: {
+            codeEditorProps: {
               ['data-test-subj']: 'dynamicTemplatesEditor',
               height: '600px',
               'aria-label': i18n.translate(

x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx

@@ -316,7 +316,7 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
                   path="_meta"
                   component={JsonEditorField}
                   componentProps={{
-                    euiCodeEditorProps: {
+                    codeEditorProps: {
                       height: '280px',
                       'aria-label': i18n.translate(
                         'xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorAriaLabel',

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts

@@ -44,7 +44,8 @@ export const getFormActions = (testBed: TestBed) => {
   };
 
   const setMetaField = (value: object) => {
-    find('metaEditor').simulate('change', { jsonString: JSON.stringify(value) });
+    find('metaEditor').getDOMNode().setAttribute('data-currentvalue', JSON.stringify(value));
+    find('metaEditor').simulate('change');
   };
 
   return {

x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx

@@ -17,6 +17,23 @@ import { nestedProcessorsErrorFixture } from './fixtures';
 
 const { setup } = pageHelpers.pipelinesCreate;
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
+        }}
+      />
+    ),
+  };
+});
+
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx

@@ -32,8 +32,8 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
       <input
         data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
         data-currentvalue={props.value}
-        onChange={(e: any) => {
-          props.onChange(e.jsonContent);
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
         }}
       />
     ),
@@ -127,10 +127,8 @@ const createActions = (testBed: TestBed<TestSubject>) => {
     },
 
     addDocumentsJson(jsonString: string) {
-      find('documentsEditor').simulate('change', {
-        jsonString,
-      });
-      jest.advanceTimersByTime(0); // advance timers to allow the form to validate
+      find('documentsEditor').getDOMNode().setAttribute('data-currentvalue', jsonString);
+      find('documentsEditor').simulate('change');
     },
 
     clickDocumentsDropdown() {