[ML] Transforms: replace deprecated EuiCodeEditor (elastic#108310)

* replace deprecated EuiCodeEditor in transform * update jest snapshot * add aria label and move data attribute to parent element for testing * update jest snapshot for aria label * update functional tests
XavierM · Aug 18, 2021 · 4e0375f · 4e0375f
1 parent 869c4b0
commit 4e0375f
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 157 deletions.
diff --git a/.../app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx b/.../app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
@@ -8,10 +8,12 @@
 import { isEqual } from 'lodash';
 import React, { memo, FC } from 'react';
 
-import { EuiCodeEditor, EuiFormRow } from '@elastic/eui';
+import { EuiFormRow } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
+import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public';
+
 import { StepDefineFormHook } from '../step_define';
 
 export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']> = memo(
@@ -25,14 +27,11 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
         label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorLabel', {
           defaultMessage: 'Pivot configuration object',
         })}
+        data-test-subj="transformAdvancedPivotEditor"
       >
-        <EuiCodeEditor
-          data-test-subj="transformAdvancedPivotEditor"
-          style={{ border: '1px solid #e3e6ef' }}
-          height="250px"
-          width="100%"
-          mode={xJsonMode}
-          value={advancedEditorConfig}
+        <CodeEditor
+          height={250}
+          languageId={'json'}
           onChange={(d: string) => {
             setAdvancedEditorConfig(d);
 
@@ -51,13 +50,21 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
               setAdvancedPivotEditorApplyButtonEnabled(false);
             }
           }}
-          setOptions={{
-            fontSize: '12px',
+          options={{
+            ariaLabel: i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
+              defaultMessage: 'Advanced pivot editor',
+            }),
+            automaticLayout: true,
+            fontSize: 12,
+            scrollBeyondLastLine: false,
+            quickSuggestions: true,
+            minimap: {
+              enabled: false,
+            },
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
           }}
-          theme="textmate"
-          aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
-            defaultMessage: 'Advanced pivot editor',
-          })}
+          value={advancedEditorConfig}
         />
       </EuiFormRow>
     );

diff --git a/...ransform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx b/...ransform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
@@ -8,10 +8,10 @@
 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/shared_imports';
 
 import { StepDefineFormHook } from '../step_define';
@@ -26,42 +26,50 @@ export const AdvancedRuntimeMappingsEditor: FC<StepDefineFormHook['runtimeMappin
     state: { advancedEditorRuntimeMappingsLastApplied, advancedRuntimeMappingsConfig, xJsonMode },
   }) => {
     return (
-      <EuiCodeEditor
-        data-test-subj="transformAdvancedRuntimeMappingsEditor"
-        style={{ border: '1px solid #e3e6ef' }}
-        height="250px"
-        width="100%"
-        mode={xJsonMode}
-        value={advancedRuntimeMappingsConfig}
-        onChange={(d: string) => {
-          setAdvancedRuntimeMappingsConfig(d);
+      <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
+        <CodeEditor
+          height={250}
+          languageId={'json'}
+          onChange={(d: string) => {
+            setAdvancedRuntimeMappingsConfig(d);
 
-          // Disable the "Apply"-Button if the config hasn't changed.
-          if (advancedEditorRuntimeMappingsLastApplied === d) {
-            setRuntimeMappingsEditorApplyButtonEnabled(false);
-            return;
-          }
+            // Disable the "Apply"-Button if the config hasn't changed.
+            if (advancedEditorRuntimeMappingsLastApplied === d) {
+              setRuntimeMappingsEditorApplyButtonEnabled(false);
+              return;
+            }
 
-          // Try to parse the string passed on from the editor.
-          // If parsing fails, the "Apply"-Button will be disabled
-          try {
-            // if the user deletes the json in the editor
-            // they should still be able to apply changes
-            const isEmptyStr = d === '';
-            const parsedJson = isEmptyStr ? {} : JSON.parse(convertToJson(d));
-            setRuntimeMappingsEditorApplyButtonEnabled(isEmptyStr || isRuntimeMappings(parsedJson));
-          } catch (e) {
-            setRuntimeMappingsEditorApplyButtonEnabled(false);
-          }
-        }}
-        setOptions={{
-          fontSize: '12px',
-        }}
-        theme="textmate"
-        aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
-          defaultMessage: 'Advanced pivot editor',
-        })}
-      />
+            // Try to parse the string passed on from the editor.
+            // If parsing fails, the "Apply"-Button will be disabled
+            try {
+              // if the user deletes the json in the editor
+              // they should still be able to apply changes
+              const isEmptyStr = d === '';
+              const parsedJson = isEmptyStr ? {} : JSON.parse(convertToJson(d));
+              setRuntimeMappingsEditorApplyButtonEnabled(
+                isEmptyStr || isRuntimeMappings(parsedJson)
+              );
+            } catch (e) {
+              setRuntimeMappingsEditorApplyButtonEnabled(false);
+            }
+          }}
+          options={{
+            ariaLabel: i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
+              defaultMessage: 'Advanced pivot 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/...pp/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx b/...pp/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
@@ -7,10 +7,10 @@
 
 import React, { FC } from 'react';
 
-import { EuiCodeEditor } from '@elastic/eui';
-
 import { i18n } from '@kbn/i18n';
 
+import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public';
+
 import { StepDefineFormHook } from '../step_define';
 
 export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
@@ -23,38 +23,48 @@ export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
   },
 }) => {
   return (
-    <EuiCodeEditor
-      style={{ border: '1px solid #e3e6ef' }}
-      mode="json"
-      height="250px"
-      width="100%"
-      value={advancedEditorSourceConfig}
-      onChange={(d: string) => {
-        setSearchString(undefined);
-        setAdvancedEditorSourceConfig(d);
+    <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
+      <CodeEditor
+        height={250}
+        languageId={'json'}
+        onChange={(d: string) => {
+          setSearchString(undefined);
+          setAdvancedEditorSourceConfig(d);
 
-        // Disable the "Apply"-Button if the config hasn't changed.
-        if (advancedEditorSourceConfigLastApplied === d) {
-          setAdvancedSourceEditorApplyButtonEnabled(false);
-          return;
-        }
+          // Disable the "Apply"-Button if the config hasn't changed.
+          if (advancedEditorSourceConfigLastApplied === d) {
+            setAdvancedSourceEditorApplyButtonEnabled(false);
+            return;
+          }
 
-        // Try to parse the string passed on from the editor.
-        // If parsing fails, the "Apply"-Button will be disabled
-        try {
-          JSON.parse(d);
-          setAdvancedSourceEditorApplyButtonEnabled(true);
-        } catch (e) {
-          setAdvancedSourceEditorApplyButtonEnabled(false);
-        }
-      }}
-      setOptions={{
-        fontSize: '12px',
-      }}
-      theme="textmate"
-      aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedSourceEditorAriaLabel', {
-        defaultMessage: 'Advanced query editor',
-      })}
-    />
+          // Try to parse the string passed on from the editor.
+          // If parsing fails, the "Apply"-Button will be disabled
+          try {
+            JSON.parse(d);
+            setAdvancedSourceEditorApplyButtonEnabled(true);
+          } catch (e) {
+            setAdvancedSourceEditorApplyButtonEnabled(false);
+          }
+        }}
+        options={{
+          ariaLabel: i18n.translate(
+            'xpack.transform.stepDefineForm.advancedSourceEditorAriaLabel',
+            {
+              defaultMessage: 'Advanced query editor',
+            }
+          ),
+          automaticLayout: true,
+          fontSize: 12,
+          scrollBeyondLastLine: false,
+          quickSuggestions: true,
+          minimap: {
+            enabled: false,
+          },
+          wordWrap: 'on',
+          wrappingIndent: 'indent',
+        }}
+        value={advancedEditorSourceConfig}
+      />
+    </div>
   );
 };
diff --git a/...ansform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx b/...ansform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiButton,
-  EuiCodeEditor,
+  EuiCodeBlock,
   EuiComboBox,
   EuiFieldText,
   EuiForm,
@@ -326,16 +326,17 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
         </EuiFormRow>
       )}
       {isUnsupportedAgg && (
-        <EuiCodeEditor
-          mode="json"
-          theme="textmate"
-          width="100%"
-          height="200px"
-          value={JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
-          setOptions={{ fontSize: '12px', showLineNumbers: false }}
-          isReadOnly
-          aria-label="Read only code editor"
-        />
+        <EuiCodeBlock
+          aria-label={i18n.translate('xpack.transform.agg.popoverForm.codeBlock', {
+            defaultMessage: 'JSON of transform aggregation',
+          })}
+          fontSize="s"
+          language="json"
+          paddingSize="s"
+          style={{ width: '100%', height: '200px' }}
+        >
+          {JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
+        </EuiCodeBlock>
       )}
       <EuiFormRow hasEmptyLabelSpace>
         <EuiButton

diff --git a/.../transform/public/app/sections/create_transform/components/group_by_list/popover_form.tsx b/.../transform/public/app/sections/create_transform/components/group_by_list/popover_form.tsx
@@ -13,7 +13,7 @@ import {
   htmlIdGenerator,
   EuiButton,
   EuiCheckbox,
-  EuiCodeEditor,
+  EuiCodeBlock,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
@@ -298,16 +298,17 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
       {isUnsupportedAgg && (
         <>
           <EuiSpacer size="m" />
-          <EuiCodeEditor
-            mode="json"
-            theme="textmate"
-            width="100%"
-            height="200px"
-            value={JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
-            setOptions={{ fontSize: '12px', showLineNumbers: false }}
-            isReadOnly
-            aria-label="Read only code editor"
-          />
+          <EuiCodeBlock
+            aria-label={i18n.translate('xpack.transform.agg.popoverForm.codeBlock', {
+              defaultMessage: 'JSON of transform aggregation',
+            })}
+            fontSize="s"
+            language="json"
+            paddingSize="s"
+            style={{ width: '100%', height: '200px' }}
+          >
+            {JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
+          </EuiCodeBlock>
         </>
       )}
       <EuiFormRow hasEmptyLabelSpace>

diff --git a/...ions/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx b/...ions/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { EuiCodeEditor, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
+import { CodeEditor } from '../../../../../../../../../../../../src/plugins/kibana_react/public';
 import { FilterAggConfigEditor } from '../types';
 
 export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAggFormComponent'] = ({
@@ -16,15 +17,24 @@ export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAgg
   return (
     <>
       <EuiSpacer size="m" />
-      <EuiCodeEditor
-        value={config}
+      <CodeEditor
+        height={300}
+        languageId={'json'}
         onChange={(d) => {
           onChange({ config: d });
         }}
-        mode="json"
-        style={{ width: '100%' }}
-        theme="textmate"
-        height="300px"
+        options={{
+          automaticLayout: true,
+          fontSize: 12,
+          scrollBeyondLastLine: false,
+          quickSuggestions: true,
+          minimap: {
+            enabled: false,
+          },
+          wordWrap: 'on',
+          wrappingIndent: 'indent',
+        }}
+        value={config || ''}
       />
     </>
   );