[Watcher] Migrate from EuiCodeEditor to Monaco (#155486)

x-pack/plugins/watcher/__jest__/client_integration/helpers/setup_environment.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { HttpSetup } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 
 import { init as initHttpRequests } from './http_requests';
 import { mockContextValue } from './app_context.mock';
@@ -18,9 +19,11 @@ export const WithAppDependencies =
     setHttpClient(httpSetup);
 
     return (
-      <AppContextProvider value={mockContextValue}>
-        <Component {...props} />
-      </AppContextProvider>
+      <KibanaContextProvider services={{ uiSettings: mockContextValue.uiSettings }}>
+        <AppContextProvider value={mockContextValue}>
+          <Component {...props} />
+        </AppContextProvider>
+      </KibanaContextProvider>
     );
   };
 

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_edit_page.helpers.ts

@@ -56,5 +56,6 @@ export type TestSubjects =
   | 'jsonWatchForm'
   | 'nameInput'
   | 'pageTitle'
+  | 'jsonEditor'
   | 'thresholdWatchForm'
   | 'watchTimeFieldSelect';

x-pack/plugins/watcher/__jest__/client_integration/watch_edit_page.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { getWatch } from '../../__fixtures__';
@@ -16,6 +17,23 @@ import { API_BASE_PATH } from '../../common/constants';
 
 const { setup } = pageHelpers.watchEditPage;
 
+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('<WatchEditPage />', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchEditTestBed;
@@ -43,14 +61,14 @@ describe('<WatchEditPage />', () => {
       });
 
       test('should populate the correct values', () => {
-        const { find, exists, component } = testBed;
+        const { find, exists } = testBed;
         const { watch } = WATCH;
-        const codeEditor = component.find('EuiCodeEditor').at(1);
+        const jsonEditorValue = testBed.find('jsonEditor').props()['data-currentvalue'];
 
         expect(exists('jsonWatchForm')).toBe(true);
         expect(find('nameInput').props().value).toBe(watch.name);
         expect(find('idInput').props().value).toBe(watch.id);
-        expect(JSON.parse(codeEditor.props().value as string)).toEqual(defaultWatch);
+        expect(JSON.parse(jsonEditorValue)).toEqual(defaultWatch);
 
         // ID should not be editable
         expect(find('idInput').props().readOnly).toEqual(true);

x-pack/plugins/watcher/public/application/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
 import { CoreTheme } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 
 import { KibanaThemeProvider } from './shared_imports';
 import { App, AppDeps } from './app';
@@ -27,9 +28,11 @@ export const renderApp = (bootDeps: BootDeps) => {
 
   render(
     <I18nContext>
-      <KibanaThemeProvider theme$={theme$}>
-        <App {...appDeps} />
-      </KibanaThemeProvider>
+      <KibanaContextProvider services={{ uiSettings: bootDeps.uiSettings }}>
+        <KibanaThemeProvider theme$={theme$}>
+          <App {...appDeps} />
+        </KibanaThemeProvider>
+      </KibanaContextProvider>
     </I18nContext>,
     element
   );

x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx

@@ -20,18 +20,17 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { XJsonMode } from '@kbn/ace';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 
+import { XJson } from '../../../../shared_imports';
 import { serializeJsonWatch } from '../../../../../../common/lib/serialization';
 import { ErrableFormRow, SectionError, Error as ServerError } from '../../../../components';
-import { XJson, EuiCodeEditor } from '../../../../shared_imports';
 import { onWatchSave } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
 import { goToWatchList } from '../../../../lib/navigation';
 import { RequestFlyout } from '../request_flyout';
 import { useAppContext } from '../../../../app_context';
 
-const xJsonMode = new XJsonMode();
 const { useXJsonMode } = XJson;
 
 export const JsonWatchEditForm = () => {
@@ -168,18 +167,22 @@ export const JsonWatchEditForm = () => {
           fullWidth
           errors={jsonErrors}
         >
-          <EuiCodeEditor
-            mode={xJsonMode}
-            width="100%"
-            theme="textmate"
+          <CodeEditor
+            languageId="json"
+            value={xJson}
             data-test-subj="jsonEditor"
+            height={500}
+            options={{
+              lineNumbers: 'off',
+              tabSize: 2,
+              automaticLayout: true,
+            }}
             aria-label={i18n.translate(
               'xpack.watcher.sections.watchEdit.json.form.watchJsonAriaLabel',
               {
                 defaultMessage: 'Code editor',
               }
             )}
-            value={xJson}
             onChange={(xjson: string) => {
               if (validationError) {
                 setValidationError(null);

x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx

@@ -24,9 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { XJsonMode } from '@kbn/ace';
-
-const xJsonMode = new XJsonMode();
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 
 import { WatchHistoryItem } from '../../../../models/watch_history_item';
 
@@ -43,7 +41,7 @@ import { SimulateWatchResultsFlyout } from './simulate_watch_results_flyout';
 import { getTimeUnitLabel } from '../../../../lib/get_time_unit_label';
 import { useAppContext } from '../../../../app_context';
 
-import { XJson, EuiCodeEditor } from '../../../../shared_imports';
+import { XJson } from '../../../../shared_imports';
 
 const { useXJsonMode } = XJson;
 
@@ -369,18 +367,22 @@ export const JsonWatchEditSimulate = ({
             fullWidth
             errors={executeWatchErrors}
           >
-            <EuiCodeEditor
-              mode={xJsonMode}
-              width="100%"
-              height="200px"
-              theme="textmate"
+            <CodeEditor
+              languageId="json"
+              value={xJson}
+              data-test-subj="jsonEditor"
+              height={200}
+              options={{
+                fontSize: 12,
+                tabSize: 2,
+                scrollBeyondLastLine: false,
+              }}
               aria-label={i18n.translate(
                 'xpack.watcher.sections.watchEdit.simulate.form.alternativeInputAriaLabel',
                 {
                   defaultMessage: 'Code editor',
                 }
               )}
-              value={xJson}
               onChange={(xjson: string) => {
                 setXJson(xjson);
                 setExecuteDetails(

x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx

@@ -18,7 +18,8 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiCodeEditor } from '../../../../../shared_imports';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
+
 import { ErrableFormRow } from '../../../../../components/form_errors';
 import { WebhookAction } from '../../../../../../../common/types/action_types';
 
@@ -242,19 +243,22 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
         fullWidth
         errors={errors}
       >
-        <EuiCodeEditor
-          mode="json"
-          width="100%"
-          height="200px"
-          theme="textmate"
+        <CodeEditor
+          languageId="json"
+          value={body || ''}
           data-test-subj="webhookBodyEditor"
+          height={200}
+          options={{
+            lineNumbers: 'off',
+            tabSize: 2,
+            scrollBeyondLastLine: false,
+          }}
           aria-label={i18n.translate(
             'xpack.watcher.sections.watchEdit.threshold.webhookAction.bodyCodeEditorAriaLabel',
             {
               defaultMessage: 'Code editor',
             }
           )}
-          value={body || ''}
           onChange={(json: string) => {
             editAction({ key: 'body', value: json });
           }}

x-pack/plugins/watcher/public/application/shared_imports.ts

@@ -11,12 +11,6 @@ export type {
   UseRequestConfig,
 } from '@kbn/es-ui-shared-plugin/public';
 
-export {
-  sendRequest,
-  useRequest,
-  XJson,
-  PageError,
-  EuiCodeEditor,
-} from '@kbn/es-ui-shared-plugin/public';
+export { sendRequest, useRequest, XJson, PageError } from '@kbn/es-ui-shared-plugin/public';
 
 export { KibanaThemeProvider, useExecutionContext } from '@kbn/kibana-react-plugin/public';

x-pack/plugins/watcher/tsconfig.json

@@ -31,7 +31,6 @@
     "@kbn/datemath",
     "@kbn/field-formats-plugin",
     "@kbn/i18n-react",
-    "@kbn/ace",
     "@kbn/shared-ux-router",
     "@kbn/license-management-plugin",
     "@kbn/share-plugin",