From b6570c528180d614bb47d7cc6a4b7b929663819b Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Fri, 21 Feb 2020 17:45:42 +0100 Subject: [PATCH 1/2] [ML] Transform: Support multi-line JSON notation in advanced editor (#58015) * [ML] use xJsonMode * [ML] remove commented code * [ML] move use_x_json_mode hook, disable json formatting * [ML] mocks for shared_imports * [ML] ts-ignore worker import --- .../public/__mocks__/shared_imports.ts | 10 ++++++++ .../public/app/hooks/use_x_json_mode.ts | 20 ++++++++++++++++ .../source_index_preview.test.tsx | 2 ++ .../step_create/step_create_form.test.tsx | 2 ++ .../step_define/pivot_preview.test.tsx | 2 ++ .../step_define/step_define_form.test.tsx | 2 ++ .../step_define/step_define_form.tsx | 24 +++++++++++-------- .../step_define/step_define_summary.test.tsx | 2 ++ .../create_transform_button.test.tsx | 2 ++ .../transform_list/action_delete.test.tsx | 2 ++ .../transform_list/action_start.test.tsx | 2 ++ .../transform_list/action_stop.test.tsx | 2 ++ .../transform_list/actions.test.tsx | 2 ++ .../transform_list/columns.test.tsx | 2 ++ .../transform_list/expanded_row.test.tsx | 2 ++ .../transform_list/transform_list.test.tsx | 2 ++ .../transform_management_section.test.tsx | 2 ++ .../transform/public/shared_imports.ts | 6 +++++ .../ace/modes/x_json/worker/index.ts | 1 + 19 files changed, 79 insertions(+), 10 deletions(-) create mode 100644 x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts create mode 100644 x-pack/legacy/plugins/transform/public/app/hooks/use_x_json_mode.ts diff --git a/x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts b/x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts new file mode 100644 index 00000000000000..b55a4cd5c7bd6b --- /dev/null +++ b/x-pack/legacy/plugins/transform/public/__mocks__/shared_imports.ts @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export function XJsonMode() {} +export function setDependencyCache() {} +export { mlInMemoryTableBasicFactory } from '../../../ml/public/application/components/ml_in_memory_table'; +export const SORT_DIRECTION = { ASC: 'asc' }; diff --git a/x-pack/legacy/plugins/transform/public/app/hooks/use_x_json_mode.ts b/x-pack/legacy/plugins/transform/public/app/hooks/use_x_json_mode.ts new file mode 100644 index 00000000000000..1017ce198ff29d --- /dev/null +++ b/x-pack/legacy/plugins/transform/public/app/hooks/use_x_json_mode.ts @@ -0,0 +1,20 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { useState } from 'react'; +import { collapseLiteralStrings, expandLiteralStrings, XJsonMode } from '../../shared_imports'; + +export const xJsonMode = new XJsonMode(); + +export const useXJsonMode = (json: string) => { + const [xJson, setXJson] = useState(expandLiteralStrings(json)); + + return { + xJson, + setXJson, + xJsonMode, + convertToJson: collapseLiteralStrings, + }; +}; diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx index f326199271592b..d7f1d9d099cc3e 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.test.tsx @@ -20,6 +20,8 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +jest.mock('../../../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { const props = { diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx index 055f0613e4e443..a0c91c070844bf 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.test.tsx @@ -19,6 +19,8 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +jest.mock('../../../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { const props = { diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx index 4ff1190415dba6..a2aa056c1634dd 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.test.tsx @@ -27,6 +27,8 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +jest.mock('../../../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { const groupBy: PivotGroupByConfig = { diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx index 48df371e876643..0311b26304c308 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.test.tsx @@ -25,6 +25,8 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +jest.mock('../../../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { // Using a wrapping
element because shallow() would fail diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index b8f63ef697e78c..bb0e30ccd9e515 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -27,7 +27,9 @@ import { EuiSwitch, } from '@elastic/eui'; -import { dictionaryToArray } from '../../../../../../common/types/common'; +import { useXJsonMode, xJsonMode } from '../../../../hooks/use_x_json_mode'; +import { TransformPivotConfig } from '../../../../common'; +import { dictionaryToArray, Dictionary } from '../../../../../../common/types/common'; import { DropDown } from '../aggregation_dropdown'; import { AggListForm } from '../aggregation_list'; import { GroupByListForm } from '../group_by_list'; @@ -329,7 +331,13 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange const [advancedEditorConfigLastApplied, setAdvancedEditorConfigLastApplied] = useState( stringifiedPivotConfig ); - const [advancedEditorConfig, setAdvancedEditorConfig] = useState(stringifiedPivotConfig); + + const { + convertToJson, + setXJson: setAdvancedEditorConfig, + xJson: advancedEditorConfig, + } = useXJsonMode(stringifiedPivotConfig); + // source config const stringifiedSourceConfig = JSON.stringify(previewRequest.source.query, null, 2); const [ @@ -353,7 +361,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange }; const applyAdvancedPivotEditorChanges = () => { - const pivotConfig = JSON.parse(advancedEditorConfig); + const pivotConfig = JSON.parse(convertToJson(advancedEditorConfig)); const newGroupByList: PivotGroupByConfigDict = {}; if (pivotConfig !== undefined && pivotConfig.group_by !== undefined) { @@ -388,10 +396,8 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange }); } setAggList(newAggList); - const prettyPivotConfig = JSON.stringify(pivotConfig, null, 2); - setAdvancedEditorConfig(prettyPivotConfig); - setAdvancedEditorConfigLastApplied(prettyPivotConfig); + setAdvancedEditorConfigLastApplied(advancedEditorConfig); setAdvancedPivotEditorApplyButtonEnabled(false); }; @@ -459,13 +465,11 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange pivotAggsArr ); - const stringifiedPivotConfigUpdate = JSON.stringify(previewRequestUpdate.pivot, null, 2); const stringifiedSourceConfigUpdate = JSON.stringify( previewRequestUpdate.source.query, null, 2 ); - setAdvancedEditorConfig(stringifiedPivotConfigUpdate); setAdvancedEditorSourceConfig(stringifiedSourceConfigUpdate); onChange({ @@ -730,7 +734,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange > { @@ -745,7 +749,7 @@ export const StepDefineForm: FC = React.memo(({ overrides = {}, onChange // Try to parse the string passed on from the editor. // If parsing fails, the "Apply"-Button will be disabled try { - JSON.parse(d); + JSON.parse(convertToJson(d)); setAdvancedPivotEditorApplyButtonEnabled(true); } catch (e) { setAdvancedPivotEditorApplyButtonEnabled(false); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx index 2d9895e8ddcf18..aae366e6008d55 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_summary.test.tsx @@ -26,6 +26,8 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +jest.mock('../../../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { const groupBy: PivotGroupByConfig = { diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.test.tsx index 673e60de545726..288630333615a1 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/create_transform_button/create_transform_button.test.tsx @@ -11,6 +11,8 @@ import { CreateTransformButton } from './create_transform_button'; jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List ', () => { test('Minimal initialization', () => { const wrapper = shallow(); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_delete.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_delete.test.tsx index 979da13b1f83a7..4795a2eb7d7bc2 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_delete.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_delete.test.tsx @@ -17,6 +17,8 @@ import transformListRow from '../../../../common/__mocks__/transform_list_row.js jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List Actions ', () => { test('Minimal initialization', () => { const Providers = getAppProviders(createPublicShim()); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx index 71a2eff39506d4..5f4d4a71c71eba 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_start.test.tsx @@ -17,6 +17,8 @@ import transformListRow from '../../../../common/__mocks__/transform_list_row.js jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List Actions ', () => { test('Minimal initialization', () => { const Providers = getAppProviders(createPublicShim()); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx index c3b67f7661a1af..f6bb1c8b60667a 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/action_stop.test.tsx @@ -17,6 +17,8 @@ import transformListRow from '../../../../common/__mocks__/transform_list_row.js jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List Actions ', () => { test('Minimal initialization', () => { const Providers = getAppProviders(createPublicShim()); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/actions.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/actions.test.tsx index 3d847890b2bd52..ae5d0241ad7626 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/actions.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/actions.test.tsx @@ -8,6 +8,8 @@ import { getActions } from './actions'; jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List Actions', () => { test('getActions()', () => { const actions = getActions({ forceDisable: false }); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.test.tsx index f16130bfe618be..42f04ed101ad6b 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.test.tsx @@ -8,6 +8,8 @@ import { getColumns } from './columns'; jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Job List Columns', () => { test('getColumns()', () => { const columns = getColumns([], () => {}, []); diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx index 4f992707cbf1aa..7fcaf5e6048f6b 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx @@ -13,6 +13,8 @@ import { ExpandedRow } from './expanded_row'; import transformListRow from '../../../../common/__mocks__/transform_list_row.json'; +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List ', () => { // Set timezone to US/Eastern for consistent test results. beforeEach(() => { diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.test.tsx index 303de6b86ac530..e1a19ddd3c742e 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.test.tsx @@ -12,6 +12,8 @@ import { TransformList } from './transform_list'; jest.mock('ui/new_platform'); +jest.mock('../../../../../shared_imports'); + describe('Transform: Transform List ', () => { test('Minimal initialization', () => { const wrapper = shallow( diff --git a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.test.tsx b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.test.tsx index c94f5c1d57d49d..f68670f0b38b2b 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.test.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/transform_management/transform_management_section.test.tsx @@ -14,6 +14,8 @@ jest.mock('ui/timefilter', () => { return {}; }); +jest.mock('../../../shared_imports'); + describe('Transform: ', () => { test('Minimal initialization', () => { const wrapper = shallow(); diff --git a/x-pack/legacy/plugins/transform/public/shared_imports.ts b/x-pack/legacy/plugins/transform/public/shared_imports.ts index 74e0c9a3878dbc..248eb00c67dff6 100644 --- a/x-pack/legacy/plugins/transform/public/shared_imports.ts +++ b/x-pack/legacy/plugins/transform/public/shared_imports.ts @@ -4,6 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ +export { XJsonMode } from '../../../../plugins/es_ui_shared/console_lang/ace/modes/x_json'; +export { + collapseLiteralStrings, + expandLiteralStrings, +} from '../../../../../src/plugins/es_ui_shared/console_lang/lib'; + export { SendRequestConfig, SendRequestResponse, diff --git a/x-pack/plugins/es_ui_shared/console_lang/ace/modes/x_json/worker/index.ts b/x-pack/plugins/es_ui_shared/console_lang/ace/modes/x_json/worker/index.ts index af50562bd32427..0e40fd335dd315 100644 --- a/x-pack/plugins/es_ui_shared/console_lang/ace/modes/x_json/worker/index.ts +++ b/x-pack/plugins/es_ui_shared/console_lang/ace/modes/x_json/worker/index.ts @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +// @ts-ignore import src from '!!raw-loader!./worker.js'; export const workerModule = { From 17b19d3edfd153ea9d69db79e5c03ac81f2049bf Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Sat, 22 Feb 2020 10:10:48 +0100 Subject: [PATCH 2/2] [ML] remove unused imports --- .../components/step_define/step_define_form.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index bb0e30ccd9e515..2197f244a19809 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -28,8 +28,7 @@ import { } from '@elastic/eui'; import { useXJsonMode, xJsonMode } from '../../../../hooks/use_x_json_mode'; -import { TransformPivotConfig } from '../../../../common'; -import { dictionaryToArray, Dictionary } from '../../../../../../common/types/common'; +import { dictionaryToArray } from '../../../../../../common/types/common'; import { DropDown } from '../aggregation_dropdown'; import { AggListForm } from '../aggregation_list'; import { GroupByListForm } from '../group_by_list';