[ML] Data Frame Analytics: replace deprecated EuiCodeEditor (#108306)

* switch dfa create, runtime, and expanded row json editor to new codeEditor * add aria label. wrap codeEditor in div to allow data attribute for test * update functional test service for new code editor
elastic · Aug 16, 2021 · 99494df · 99494df
1 parent 3e17606
commit 99494df
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 76 deletions.
diff --git a/...creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx b/...creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
@@ -7,22 +7,11 @@
 
 import React, { FC, Fragment, useEffect, useMemo, useRef } from 'react';
 import { debounce } from 'lodash';
-import {
-  EuiCallOut,
-  EuiCodeEditor,
-  EuiFieldText,
-  EuiForm,
-  EuiFormRow,
-  EuiSpacer,
-  EuiSwitch,
-} from '@elastic/eui';
+import { EuiCallOut, EuiFieldText, EuiForm, EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
-import { XJsonMode } from '../../../../../../../shared_imports';
-
-const xJsonMode = new XJsonMode();
-
+import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { useNotifications } from '../../../../../contexts/kibana';
 import { ml } from '../../../../../services/ml_api_service';
 import { extractErrorMessage } from '../../../../../../../common/util/errors';
@@ -155,22 +144,37 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = (prop
         )}
         style={{ maxWidth: '100%' }}
       >
-        <EuiCodeEditor
-          isReadOnly={isJobCreated}
-          mode={xJsonMode}
-          width="100%"
+        <CodeEditor
+          languageId={'json'}
+          height={500}
+          languageConfiguration={{
+            autoClosingPairs: [
+              {
+                open: '{',
+                close: '}',
+              },
+            ],
+          }}
           value={advancedEditorRawString}
           onChange={onChange}
-          setOptions={{
-            fontSize: '12px',
+          options={{
+            ariaLabel: i18n.translate(
+              'xpack.ml.dataframe.analytics.create.advancedEditor.codeEditorAriaLabel',
+              {
+                defaultMessage: 'Advanced analytics job editor',
+              }
+            ),
+            automaticLayout: true,
+            readOnly: isJobCreated,
+            fontSize: 12,
+            scrollBeyondLastLine: false,
+            quickSuggestions: true,
+            minimap: {
+              enabled: false,
+            },
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
           }}
-          theme="textmate"
-          aria-label={i18n.translate(
-            'xpack.ml.dataframe.analytics.create.advancedEditor.codeEditorAriaLabel',
-            {
-              defaultMessage: 'Advanced analytics job editor',
-            }
-          )}
         />
       </EuiFormRow>
       <EuiSpacer />

diff --git a/...nalytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx b/...nalytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
@@ -7,8 +7,9 @@
 
 import { isEqual } from 'lodash';
 import React, { memo, FC } from 'react';
-import { EuiCodeEditor } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+
+import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { isRuntimeMappings } from '../../../../../../../common/util/runtime_field_utils';
 import { XJsonModeType } from './runtime_mappings';
 
@@ -31,48 +32,54 @@ export const RuntimeMappingsEditor: FC<Props> = memo(
     advancedRuntimeMappingsConfig,
   }) => {
     return (
-      <EuiCodeEditor
-        data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor"
-        style={{ border: '1px solid #e3e6ef' }}
-        height="250px"
-        width="100%"
-        mode={xJsonMode}
-        value={advancedRuntimeMappingsConfig}
-        onChange={(d: string) => {
-          setAdvancedRuntimeMappingsConfig(d);
+      <div data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor">
+        <CodeEditor
+          height={250}
+          languageId={'json'}
+          onChange={(d: string) => {
+            setAdvancedRuntimeMappingsConfig(d);
 
-          // Disable the "Apply"-Button if the config hasn't changed.
-          if (advancedEditorRuntimeMappingsLastApplied === d) {
-            setIsRuntimeMappingsEditorApplyButtonEnabled(false);
-            return;
-          }
+            // Disable the "Apply"-Button if the config hasn't changed.
+            if (advancedEditorRuntimeMappingsLastApplied === d) {
+              setIsRuntimeMappingsEditorApplyButtonEnabled(false);
+              return;
+            }
 
-          // Enable Apply button so user can remove previously created runtime field
-          if (d === '') {
-            setIsRuntimeMappingsEditorApplyButtonEnabled(true);
-            return;
-          }
+            // Enable Apply button so user can remove previously created runtime field
+            if (d === '') {
+              setIsRuntimeMappingsEditorApplyButtonEnabled(true);
+              return;
+            }
 
-          // Try to parse the string passed on from the editor.
-          // If parsing fails, the "Apply"-Button will be disabled
-          try {
-            const parsedJson = JSON.parse(convertToJson(d));
-            setIsRuntimeMappingsEditorApplyButtonEnabled(isRuntimeMappings(parsedJson));
-          } catch (e) {
-            setIsRuntimeMappingsEditorApplyButtonEnabled(false);
-          }
-        }}
-        setOptions={{
-          fontSize: '12px',
-        }}
-        theme="textmate"
-        aria-label={i18n.translate(
-          'xpack.ml.dataframe.analytics.createWizard.runtimeMappings.advancedEditorAriaLabel',
-          {
-            defaultMessage: 'Advanced runtime editor',
-          }
-        )}
-      />
+            // Try to parse the string passed on from the editor.
+            // If parsing fails, the "Apply"-Button will be disabled
+            try {
+              const parsedJson = JSON.parse(convertToJson(d));
+              setIsRuntimeMappingsEditorApplyButtonEnabled(isRuntimeMappings(parsedJson));
+            } catch (e) {
+              setIsRuntimeMappingsEditorApplyButtonEnabled(false);
+            }
+          }}
+          options={{
+            ariaLabel: i18n.translate(
+              'xpack.ml.dataframe.analytics.createWizard.runtimeMappings.advancedEditorAriaLabel',
+              {
+                defaultMessage: 'Advanced runtime editor',
+              }
+            ),
+            automaticLayout: true,
+            fontSize: 12,
+            scrollBeyondLastLine: false,
+            quickSuggestions: true,
+            minimap: {
+              enabled: false,
+            },
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+          }}
+          value={advancedRuntimeMappingsConfig}
+        />
+      </div>
     );
   },
   (prevProps, nextProps) => isEqual(pickProps(prevProps), pickProps(nextProps))

diff --git a/...analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx b/...analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx
@@ -7,7 +7,9 @@
 
 import React, { FC } from 'react';
 
-import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
 
 interface Props {
   json: object;
@@ -19,14 +21,23 @@ export const ExpandedRowJsonPane: FC<Props> = ({ json, dataTestSubj }) => {
     <EuiFlexGroup data-test-subj={dataTestSubj}>
       <EuiFlexItem>
         <EuiSpacer size="s" />
-        <EuiCodeEditor
-          value={JSON.stringify(json, null, 2)}
-          readOnly={true}
-          mode="json"
+        <EuiCodeBlock
+          aria-label={i18n.translate(
+            'xpack.ml.dataframe.analyticsList.analyticsDetails.expandedRowJsonPane',
+            {
+              defaultMessage: 'JSON of data frame analytics configuration',
+            }
+          )}
           style={{ width: '100%' }}
-          theme="textmate"
+          language="json"
+          fontSize="s"
+          paddingSize="s"
+          overflowHeight={300}
+          isCopyable
           data-test-subj={`mlAnalyticsDetailsJsonPreview`}
-        />
+        >
+          {JSON.stringify(json, null, 2)}
+        </EuiCodeBlock>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>&nbsp;</EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/test/functional/services/ml/data_frame_analytics_creation.ts b/x-pack/test/functional/services/ml/data_frame_analytics_creation.ts
@@ -277,9 +277,9 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
     async assertRuntimeMappingsEditorContent(expectedContent: string[]) {
       await this.assertRuntimeMappingEditorExists();
 
-      const runtimeMappingsEditorString = await aceEditor.getValue(
-        'mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor'
-      );
+      const wrapper = await testSubjects.find('mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor');
+      const editor = await wrapper.findByCssSelector('.monaco-editor .view-lines');
+      const runtimeMappingsEditorString = await editor.getVisibleText();
       // Not all lines may be visible in the editor and thus aceEditor may not return all lines.
       // This means we might not get back valid JSON so we only test against the first few lines
       // and see if the string matches.