diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx index eddfca5ecae29..4a9e8bcfc6b8d 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx +++ b/x-pack/plugins/transform/public/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 = memo( @@ -25,14 +27,11 @@ export const AdvancedPivotEditor: FC label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorLabel', { defaultMessage: 'Pivot configuration object', })} + data-test-subj="transformAdvancedPivotEditor" > - { setAdvancedEditorConfig(d); @@ -51,13 +50,21 @@ export const AdvancedPivotEditor: FC 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} /> ); diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx index 1e6e6a971a81a..cad258d192061 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/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 { return ( - { - setAdvancedRuntimeMappingsConfig(d); +
+ { + 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} + /> +
); }, (prevProps, nextProps) => isEqual(pickProps(prevProps), pickProps(nextProps)) diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx index 1c7c58be48be6..b711a5a0cbb81 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx +++ b/x-pack/plugins/transform/public/app/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 = ({ @@ -23,38 +23,48 @@ export const AdvancedSourceEditor: FC = ({ }, }) => { return ( - { - setSearchString(undefined); - setAdvancedEditorSourceConfig(d); +
+ { + 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} + /> +
); }; diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx index 831ee17371910..53f2716551289 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx +++ b/x-pack/plugins/transform/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 = ({ defaultData, otherAggNames, onCha )} {isUnsupportedAgg && ( - + + {JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)} + )} = ({ defaultData, otherAggNames, onCha {isUnsupportedAgg && ( <> - + + {JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)} + )} diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx index edb43afdd90d4..8a8c12dfc5583 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/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 ( <> - { 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 || ''} /> ); diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap index dea6f57bcaab0..7a640389e2915 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap @@ -9,50 +9,53 @@ exports[`Transform: Transform List Expanded Row Minimal - + value= + { + "id": "fq_date_histogram_1m_1441", + "source": { + "index": [ + "farequote-2019" ], - \\"query\\": { - \\"match_all\\": {} + "query": { + "match_all": {} } }, - \\"dest\\": { - \\"index\\": \\"fq_date_histogram_1m_1441\\" + "dest": { + "index": "fq_date_histogram_1m_1441" }, - \\"pivot\\": { - \\"group_by\\": { - \\"@timestamp\\": { - \\"date_histogram\\": { - \\"field\\": \\"@timestamp\\", - \\"calendar_interval\\": \\"1m\\" + "pivot": { + "group_by": { + "@timestamp": { + "date_histogram": { + "field": "@timestamp", + "calendar_interval": "1m" } } }, - \\"aggregations\\": { - \\"responsetime.avg\\": { - \\"avg\\": { - \\"field\\": \\"responsetime\\" + "aggregations": { + "responsetime.avg": { + "avg": { + "field": "responsetime" } } } }, - \\"version\\": \\"8.0.0\\", - \\"create_time\\": 1564388146667 -}" - /> + "version": "8.0.0", + "create_time": 1564388146667 +} + = ({ json }) => { - + isCopyable + > + value={JSON.stringify(json, null, 2)} +   diff --git a/x-pack/test/functional/services/transform/wizard.ts b/x-pack/test/functional/services/transform/wizard.ts index 4869237eb7db4..275002155d7e0 100644 --- a/x-pack/test/functional/services/transform/wizard.ts +++ b/x-pack/test/functional/services/transform/wizard.ts @@ -385,9 +385,9 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi async assertRuntimeMappingsEditorContent(expectedContent: string[]) { await this.assertRuntimeMappingsEditorExists(); - const runtimeMappingsEditorString = await aceEditor.getValue( - 'transformAdvancedRuntimeMappingsEditor' - ); + const wrapper = await testSubjects.find('transformAdvancedRuntimeMappingsEditor'); + 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. @@ -624,7 +624,9 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi }, async assertAdvancedPivotEditorContent(expectedValue: string[]) { - const advancedEditorString = await aceEditor.getValue('transformAdvancedPivotEditor'); + const wrapper = await testSubjects.find('transformAdvancedPivotEditor'); + const editor = await wrapper.findByCssSelector('.monaco-editor .view-lines'); + const advancedEditorString = 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.