Migrate Stack Management apps to consume internal EuiCodeEditor (#108629)

* Migrate Index Management to use internal EuiCodeEditor.
* Migrate Rollup to use internal EuiCodeEditor.
* Migrate Snapshot and Restore to use internal EuiCodeEditor.
* Migrate Watcher to use internal EuiCodeEditor.
* Add default setOptions values to EuiCodeEditor.

src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/authorization_provider.tsx

@@ -9,7 +9,7 @@
 import { HttpSetup } from 'kibana/public';
 import React, { createContext, useContext } from 'react';
 
-import { useRequest } from '../../../public';
+import { useRequest } from '../../../public/request';
 
 import { Privileges, Error as CustomError } from '../types';
 

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

@@ -46,7 +46,7 @@ export interface EuiCodeEditorProps extends SupportedAriaAttributes, Omit<IAceEd
   onBlur?: IAceEditorProps['onBlur'];
   onFocus?: IAceEditorProps['onFocus'];
   isReadOnly?: boolean;
-  setOptions: IAceEditorProps['setOptions'];
+  setOptions?: IAceEditorProps['setOptions'];
   cursorStart?: number;
   'data-test-subj'?: string;
   /**
@@ -70,7 +70,10 @@ export interface EuiCodeEditorState {
 
 class EuiCodeEditor extends Component<EuiCodeEditorProps, EuiCodeEditorState> {
   static defaultProps = {
-    setOptions: {},
+    setOptions: {
+      showLineNumbers: false,
+      tabSize: 2,
+    },
   };
 
   state: EuiCodeEditorState = {

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import '../../../test/global_mocks';
 import { getComposableTemplate } from '../../../test/fixtures';
 import { setupEnvironment } from '../helpers';
 
@@ -30,15 +31,6 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj="mockCodeEditor"
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
   };
 });
 

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import '../../../test/global_mocks';
 import { setupEnvironment } from '../helpers';
 
 import {
@@ -34,15 +35,6 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj="mockCodeEditor"
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
   };
 });
 

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import '../../../test/global_mocks';
 import * as fixtures from '../../../test/fixtures';
 import { setupEnvironment, BRANCH } from '../helpers';
 
@@ -41,15 +42,6 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj="mockCodeEditor"
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
   };
 });
 

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_form.helpers.ts

@@ -206,7 +206,7 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
 
     await act(async () => {
       if (settings) {
-        find('mockCodeEditor').simulate('change', {
+        find('settingsEditor').simulate('change', {
           jsonString: settings,
         }); // Using mocked EuiCodeEditor
       }
@@ -241,7 +241,7 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
 
     if (aliases) {
       await act(async () => {
-        find('mockCodeEditor').simulate('change', {
+        find('aliasesEditor').simulate('change', {
           jsonString: aliases,
         }); // Using mocked EuiCodeEditor
       });
@@ -337,4 +337,6 @@ export type TestSubjects =
   | 'templateFormContainer'
   | 'testingEditor'
   | 'versionField'
+  | 'aliasesEditor'
+  | 'settingsEditor'
   | 'versionField.input';

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

@@ -9,6 +9,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import '../../../../../../../../../src/plugins/es_ui_shared/public/components/code_editor/jest_mock';
+import '../../../../../../test/global_mocks';
 import { setupEnvironment } from './helpers';
 import { setup, ComponentTemplateCreateTestBed } from './helpers/component_template_create.helpers';
 
@@ -27,15 +28,6 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj="mockCodeEditor"
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
   };
 });
 

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import '../../../../../../test/global_mocks';
 import { setupEnvironment } from './helpers';
 import { setup, ComponentTemplateEditTestBed } from './helpers/component_template_edit.helpers';
 
@@ -26,15 +27,6 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj="mockCodeEditor"
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
   };
 });
 

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_form.helpers.ts

@@ -65,7 +65,7 @@ export const getFormActions = (testBed: TestBed) => {
 
     await act(async () => {
       if (settings) {
-        find('mockCodeEditor').simulate('change', {
+        find('settingsEditor').simulate('change', {
           jsonString: JSON.stringify(settings),
         }); // Using mocked EuiCodeEditor
       }
@@ -118,7 +118,7 @@ export const getFormActions = (testBed: TestBed) => {
 
     await act(async () => {
       if (aliases) {
-        find('mockCodeEditor').simulate('change', {
+        find('aliasesEditor').simulate('change', {
           jsonString: JSON.stringify(aliases),
         }); // Using mocked EuiCodeEditor
       }
@@ -161,4 +161,6 @@ export type ComponentTemplateFormTestSubjects =
   | 'stepReview.summaryTab'
   | 'stepReview.requestTab'
   | 'versionField'
+  | 'aliasesEditor'
+  | 'settingsEditor'
   | 'versionField.input';

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx

@@ -15,12 +15,11 @@ import {
   EuiSpacer,
   EuiFormRow,
   EuiText,
-  EuiCodeEditor,
   EuiCode,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Forms } from '../../../../../shared_imports';
+import { EuiCodeEditor, Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {

x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx

@@ -15,12 +15,11 @@ import {
   EuiSpacer,
   EuiFormRow,
   EuiText,
-  EuiCodeEditor,
   EuiCode,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Forms } from '../../../../../shared_imports';
+import { EuiCodeEditor, Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {

x-pack/plugins/index_management/public/shared_imports.ts

@@ -22,6 +22,7 @@ export {
   PageError,
   Error,
   SectionLoading,
+  EuiCodeEditor,
 } from '../../../../src/plugins/es_ui_shared/public';
 
 export {

x-pack/plugins/index_management/test/global_mocks.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+// NOTE: Import this file for its side-effects. You must import it before the code that it mocks
+// is imported. Typically this means just importing above your other imports.
+// See https://jestjs.io/docs/manual-mocks for more info.
+
+jest.mock('../../../../src/plugins/es_ui_shared/public', () => {
+  const original = jest.requireActual('../../../../src/plugins/es_ui_shared/public');
+
+  return {
+    ...original,
+    EuiCodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(syntheticEvent: any) => {
+          props.onChange(syntheticEvent.jsonString);
+        }}
+      />
+    ),
+  };
+});

x-pack/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiCodeEditor } from '@elastic/eui';
+import { EuiCodeEditor } from '../../../../../shared_imports';
 
 export const TabJson = ({ json }) => {
   const jsonString = JSON.stringify(json, null, 2);

x-pack/plugins/rollup/public/shared_imports.ts

@@ -9,4 +9,5 @@ export {
   extractQueryParams,
   indices,
   SectionLoading,
+  EuiCodeEditor,
 } from '../../../../src/plugins/es_ui_shared/public';

x-pack/plugins/snapshot_restore/__jest__/client_integration/repository_edit.test.ts

@@ -215,7 +215,7 @@ describe('<RepositoryEdit />', () => {
       );
       expect(find('readOnlyToggle').props()['aria-checked']).toBe(settings.readonly);
 
-      const codeEditor = testBed.component.find('EuiCodeEditor');
+      const codeEditor = testBed.component.find('EuiCodeEditor').at(1);
       expect(JSON.parse(codeEditor.props().value as string)).toEqual({
         loadDefault: true,
         conf1: 'foo',

x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx

@@ -10,7 +10,6 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiCode,
-  EuiCodeEditor,
   EuiDescribedFormGroup,
   EuiFieldText,
   EuiFormRow,
@@ -20,6 +19,7 @@ import {
 } from '@elastic/eui';
 
 import { HDFSRepository, Repository, SourceRepository } from '../../../../../common/types';
+import { EuiCodeEditor } from '../../../../shared_imports';
 import { RepositorySettingsValidation } from '../../../services/validation';
 import { ChunkSizeField, MaxSnapshotsField, MaxRestoreField } from './common';
 

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_review.tsx

@@ -8,7 +8,6 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiCodeEditor,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -24,6 +23,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { serializeRestoreSettings } from '../../../../../common/lib';
+import { EuiCodeEditor } from '../../../../shared_imports';
 import { useServices } from '../../../app_context';
 import { StepProps } from './';
 import { CollapsibleIndicesList } from '../../collapsible_lists/collapsible_indices_list';

x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx

@@ -10,7 +10,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButtonEmpty,
   EuiCode,
-  EuiCodeEditor,
   EuiComboBox,
   EuiDescribedFormGroup,
   EuiFlexGroup,
@@ -23,6 +22,7 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 import { RestoreSettings } from '../../../../../common/types';
+import { EuiCodeEditor } from '../../../../shared_imports';
 import { REMOVE_INDEX_SETTINGS_SUGGESTIONS } from '../../../constants';
 import { useCore, useServices } from '../../../app_context';
 import { StepProps } from './';

x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_details/tabs/tab_history.tsx

@@ -9,7 +9,6 @@ import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
@@ -23,6 +22,7 @@ import {
 } from '@elastic/eui';
 
 import { SlmPolicy } from '../../../../../../../common/types';
+import { EuiCodeEditor } from '../../../../../../shared_imports';
 import { FormattedDateTime } from '../../../../../components';
 import { linkToSnapshot } from '../../../../../services/navigation';
 import { useServices } from '../../../../../app_context';

x-pack/plugins/snapshot_restore/public/application/sections/home/repository_list/repository_details/type_details/default_details.tsx

@@ -9,9 +9,10 @@ import 'brace/theme/textmate';
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeEditor, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
 
 import { Repository } from '../../../../../../../common/types';
+import { EuiCodeEditor } from '../../../../../../shared_imports';
 
 interface Props {
   repository: Repository;

x-pack/plugins/snapshot_restore/public/shared_imports.ts

@@ -22,6 +22,7 @@ export {
   useRequest,
   UseRequestConfig,
   WithPrivileges,
+  EuiCodeEditor,
 } from '../../../../src/plugins/es_ui_shared/public';
 
 export { APP_WRAPPER_CLASS } from '../../../../src/core/public';

x-pack/plugins/watcher/__jest__/client_integration/watch_edit.test.ts

@@ -66,7 +66,7 @@ describe('<WatchEdit />', () => {
       test('should populate the correct values', () => {
         const { find, exists, component } = testBed;
         const { watch } = WATCH;
-        const codeEditor = component.find('EuiCodeEditor');
+        const codeEditor = component.find('EuiCodeEditor').at(1);
 
         expect(exists('jsonWatchForm')).toBe(true);
         expect(find('nameInput').props().value).toBe(watch.name);

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

@@ -10,7 +10,6 @@ import React, { Fragment, useContext, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiCodeEditor,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -25,7 +24,7 @@ import { XJsonMode } from '@kbn/ace';
 
 import { serializeJsonWatch } from '../../../../../../common/lib/serialization';
 import { ErrableFormRow, SectionError, Error as ServerError } from '../../../../components';
-import { XJson } from '../../../../shared_imports';
+import { XJson, EuiCodeEditor } from '../../../../shared_imports';
 import { onWatchSave } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
 import { goToWatchList } from '../../../../lib/navigation';

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

@@ -10,7 +10,6 @@ import React, { Fragment, useContext, useState } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
-  EuiCodeEditor,
   EuiDescribedFormGroup,
   EuiFieldNumber,
   EuiFlexGroup,
@@ -44,7 +43,7 @@ import { JsonWatchEditSimulateResults } from './json_watch_edit_simulate_results
 import { getTimeUnitLabel } from '../../../../lib/get_time_unit_label';
 import { useAppContext } from '../../../../app_context';
 
-import { XJson } from '../../../../shared_imports';
+import { XJson, EuiCodeEditor } from '../../../../shared_imports';
 
 const { useXJsonMode } = XJson;
 

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

@@ -8,7 +8,6 @@
 import React, { Fragment, useEffect } from 'react';
 
 import {
-  EuiCodeEditor,
   EuiFieldNumber,
   EuiFieldPassword,
   EuiFieldText,
@@ -19,6 +18,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { EuiCodeEditor } from '../../../../../shared_imports';
 import { ErrableFormRow } from '../../../../../components/form_errors';
 import { WebhookAction } from '../../../../../../../common/types/action_types';
 

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

@@ -13,4 +13,5 @@ export {
   useRequest,
   XJson,
   PageError,
+  EuiCodeEditor,
 } from '../../../../../src/plugins/es_ui_shared/public';