From 99494df21ef6369af33fe418f87bb78fee0deaf3 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Mon, 16 Aug 2021 18:29:03 -0400 Subject: [PATCH] [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 --- .../create_analytics_advanced_editor.tsx | 56 ++++++------ .../runtime_mappings_editor.tsx | 87 ++++++++++--------- .../analytics_list/expanded_row_json_pane.tsx | 25 ++++-- .../ml/data_frame_analytics_creation.ts | 6 +- 4 files changed, 98 insertions(+), 76 deletions(-) diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx index 478f3b0056de1..2f05e0e22da84 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_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 = (prop )} style={{ maxWidth: '100%' }} > - diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx index 66a96e7316e8a..e499d9625eeab 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/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 = memo( advancedRuntimeMappingsConfig, }) => { return ( - { - setAdvancedRuntimeMappingsConfig(d); +
+ { + 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} + /> +
); }, (prevProps, nextProps) => isEqual(pickProps(prevProps), pickProps(nextProps)) diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx index eba0ac40e937e..9a5e17f127ce0 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_json_pane.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_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 = ({ json, dataTestSubj }) => { - + > + {JSON.stringify(json, null, 2)} +   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 index ab3692be9288f..45ba4c5c34833 100644 --- 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.