From 73c9972acbeea37ec7378c460ce51a9b17dea0b2 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Mon, 2 Aug 2021 15:34:40 +0200
Subject: [PATCH 1/2] Remove EuiCodeEditor from advanced settings

---
 .../management_app/advanced_settings.tsx      |  31 +-
 .../field/__snapshots__/field.test.tsx.snap   | 312 ++++++------------
 .../components/field/field.test.tsx           |  32 +-
 .../management_app/components/field/field.tsx |  27 +-
 4 files changed, 164 insertions(+), 238 deletions(-)

diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
index 1391312df5231a..845e608e6244a9 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
@@ -14,6 +14,7 @@ import { parse } from 'query-string';
 import { UiCounterMetricType } from '@kbn/analytics';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, Query } from '@elastic/eui';
 
+import { KibanaContextProvider } from '../../../kibana_react/public';
 import {
   IUiSettingsClient,
   DocLinksStart,
@@ -257,20 +258,22 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
 
         <AdvancedSettingsVoiceAnnouncement queryText={query.text} settings={filteredSettings} />
 
-        <Form
-          settings={this.groupedSettings}
-          visibleSettings={filteredSettings}
-          categories={this.categories}
-          categoryCounts={this.categoryCounts}
-          clearQuery={this.clearQuery}
-          save={this.saveConfig}
-          showNoResultsMessage={!footerQueryMatched}
-          enableSaving={this.props.enableSaving}
-          dockLinks={this.props.dockLinks}
-          toasts={this.props.toasts}
-          trackUiMetric={this.props.trackUiMetric}
-          queryText={query.text}
-        />
+        <KibanaContextProvider services={{ uiSettings: this.props.uiSettings }}>
+          <Form
+            settings={this.groupedSettings}
+            visibleSettings={filteredSettings}
+            categories={this.categories}
+            categoryCounts={this.categoryCounts}
+            clearQuery={this.clearQuery}
+            save={this.saveConfig}
+            showNoResultsMessage={!footerQueryMatched}
+            enableSaving={this.props.enableSaving}
+            dockLinks={this.props.dockLinks}
+            toasts={this.props.toasts}
+            trackUiMetric={this.props.trackUiMetric}
+            queryText={query.text}
+          />
+        </KibanaContextProvider>
         <PageFooter
           toasts={this.props.toasts}
           query={query}
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
index be5163e89367c4..01daf5c49926ef 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
@@ -1779,30 +1779,22 @@ exports[`Field for json setting should render as read only if saving is disabled
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={true}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": true,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="{\\"foo\\": \\"bar\\"}"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -1886,30 +1878,22 @@ exports[`Field for json setting should render as read only with help text if ove
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={true}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": true,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="{\\"hello\\": \\"world\\"}"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -1969,30 +1953,22 @@ exports[`Field for json setting should render custom setting icon if it is custo
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="{\\"foo\\": \\"bar\\"}"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2083,30 +2059,22 @@ exports[`Field for json setting should render default value if there is no user
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="{\\"foo\\": \\"bar\\"}"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2172,35 +2140,27 @@ exports[`Field for json setting should render unsaved value if there are unsaved
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-describedby="json:test:setting-group json:test:setting-unsaved"
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value={
           Object {
             "foo": "bar2",
           }
         }
-        width="100%"
       />
     </div>
     <EuiScreenReaderOnly>
@@ -2298,30 +2258,22 @@ exports[`Field for json setting should render user value if there is user value
     <div
       data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="json test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="json"
-        name="advancedSetting-editField-json:test:setting-editor"
+        data-test-subj="advancedSetting-editField-json:test:setting-editor"
+        height={150}
+        languageId="xjson"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="{\\"hello\\": \\"world\\"}"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2370,30 +2322,22 @@ exports[`Field for markdown setting should render as read only if saving is disa
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={true}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": true,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value=""
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2474,30 +2418,22 @@ exports[`Field for markdown setting should render as read only with help text if
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={true}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": true,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="**bold**"
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2557,30 +2493,22 @@ exports[`Field for markdown setting should render custom setting icon if it is c
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value=""
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2629,30 +2557,22 @@ exports[`Field for markdown setting should render default value if there is no u
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value=""
-        width="100%"
       />
     </div>
   </EuiFormRow>
@@ -2718,31 +2638,23 @@ exports[`Field for markdown setting should render unsaved value if there are uns
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-describedby="markdown:test:setting-group markdown:test:setting-unsaved"
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="Hello World"
-        width="100%"
       />
     </div>
     <EuiScreenReaderOnly>
@@ -2837,30 +2749,22 @@ exports[`Field for markdown setting should render user value if there is user va
     <div
       data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiCodeEditor
+      <CodeEditor
         aria-label="markdown test setting"
-        editorProps={
-          Object {
-            "$blockScrolling": Infinity,
-          }
-        }
-        height="auto"
-        isReadOnly={false}
-        maxLines={30}
-        minLines={6}
-        mode="markdown"
-        name="advancedSetting-editField-markdown:test:setting-editor"
+        data-test-subj="advancedSetting-editField-markdown:test:setting-editor"
+        height={150}
+        languageId="markdown"
         onChange={[Function]}
-        setOptions={
+        options={
           Object {
-            "showLineNumbers": false,
+            "folding": false,
+            "fontSize": 12,
+            "lineNumbers": "off",
+            "readOnly": false,
             "tabSize": 2,
           }
         }
-        showGutter={false}
-        theme="textmate"
         value="**bold**"
-        width="100%"
       />
     </div>
   </EuiFormRow>
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
index e6724e93866e78..9504176a85d348 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
@@ -12,13 +12,15 @@ import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test/jest';
 import { mount, ReactWrapper } from 'enzyme';
 import { FieldSetting } from '../../types';
 import { UiSettingsType } from '../../../../../../core/public';
-import { notificationServiceMock, docLinksServiceMock } from '../../../../../../core/public/mocks';
+import {
+  notificationServiceMock,
+  docLinksServiceMock,
+  uiSettingsServiceMock,
+} from '../../../../../../core/public/mocks';
 
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Field, getEditableValue } from './field';
-
-jest.mock('brace/theme/textmate', () => 'brace/theme/textmate');
-jest.mock('brace/mode/markdown', () => 'brace/mode/markdown');
+import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 
 const defaults = {
   requiresPageReload: false,
@@ -326,15 +328,19 @@ describe('Field', () => {
     const setup = () => {
       const Wrapper = (props: Record<string, any>) => (
         <I18nProvider>
-          <Field
-            setting={setting}
-            clearChange={clearChange}
-            handleChange={handleChange}
-            enableSaving={true}
-            toasts={notificationServiceMock.createStartContract().toasts}
-            dockLinks={docLinksServiceMock.createStartContract().links}
-            {...props}
-          />
+          <KibanaContextProvider
+            services={{ uiSettings: uiSettingsServiceMock.createStartContract() }}
+          >
+            <Field
+              setting={setting}
+              clearChange={clearChange}
+              handleChange={handleChange}
+              enableSaving={true}
+              toasts={notificationServiceMock.createStartContract().toasts}
+              dockLinks={docLinksServiceMock.createStartContract().links}
+              {...props}
+            />
+          </KibanaContextProvider>
         </I18nProvider>
       );
       const wrapper = mount(<Wrapper />);
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
index 759e1f992808fc..5feb5a749a625d 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
@@ -9,17 +9,12 @@
 import React, { PureComponent, Fragment } from 'react';
 import classNames from 'classnames';
 
-import 'brace/theme/textmate';
-import 'brace/mode/markdown';
-import 'brace/mode/json';
-
 import {
   EuiBadge,
   EuiCode,
   EuiCodeBlock,
   EuiColorPicker,
   EuiScreenReaderOnly,
-  EuiCodeEditor,
   EuiDescribedFormGroup,
   EuiFieldNumber,
   EuiFieldText,
@@ -34,9 +29,12 @@ import {
   EuiSwitch,
   EuiSwitchEvent,
   EuiToolTip,
+  keys,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { XJsonLang } from '@kbn/monaco';
+import { CodeEditor, MarkdownLang } from '../../../../../kibana_react/public';
 import { FieldSetting, FieldState } from '../../types';
 import { isDefaultValue } from '../../lib';
 import { UiSettingsType, DocLinksStart, ToastsStart } from '../../../../../../core/public';
@@ -291,7 +289,22 @@ export class Field extends PureComponent<FieldProps> {
       case 'json':
         return (
           <div data-test-subj={`advancedSetting-editField-${name}`}>
-            <EuiCodeEditor
+            <CodeEditor
+              {...a11yProps}
+              data-test-subj={`advancedSetting-editField-${name}-editor`}
+              value={currentValue}
+              onChange={this.onCodeEditorChange}
+              languageId={type === 'markdown' ? MarkdownLang.ID : XJsonLang.ID}
+              height={150} // TODO: build auto height
+              options={{
+                readOnly: isOverridden || !enableSaving,
+                fontSize: 12,
+                lineNumbers: 'off',
+                folding: false,
+                tabSize: 2,
+              }}
+            />
+            {/* <EuiCodeEditor
               {...a11yProps}
               name={`advancedSetting-editField-${name}-editor`}
               mode={type}
@@ -311,7 +324,7 @@ export class Field extends PureComponent<FieldProps> {
                 $blockScrolling: Infinity,
               }}
               showGutter={false}
-            />
+            /> */}
           </div>
         );
       case 'image':

From 56f5f187d67e8c0fd5d93edece8b435a06e396ae Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Mon, 2 Aug 2021 16:33:56 +0200
Subject: [PATCH 2/2] Remove dead import

---
 .../public/management_app/components/field/field.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
index 5feb5a749a625d..77292dba9f89b5 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
@@ -29,7 +29,6 @@ import {
   EuiSwitch,
   EuiSwitchEvent,
   EuiToolTip,
-  keys,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';