[7.x] [ML] Transform: Support multi-line JSON notation in advanced ed…

…itor (#58015) (#58239)

* [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

* [ML] remove unused imports

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' };

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,
+  };
+};

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: <SourceIndexPreview />', () => {
   test('Minimal initialization', () => {
     const props = {

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: <StepCreateForm />', () => {
   test('Minimal initialization', () => {
     const props = {

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: <PivotPreview />', () => {
   test('Minimal initialization', () => {
     const groupBy: PivotGroupByConfig = {

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: <DefinePivotForm />', () => {
   test('Minimal initialization', () => {
     // Using a wrapping <div> element because shallow() would fail

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx

@@ -27,6 +27,7 @@ import {
   EuiSwitch,
 } from '@elastic/eui';
 
+import { useXJsonMode, xJsonMode } from '../../../../hooks/use_x_json_mode';
 import { dictionaryToArray } from '../../../../../../common/types/common';
 import { DropDown } from '../aggregation_dropdown';
 import { AggListForm } from '../aggregation_list';
@@ -329,7 +330,13 @@ export const StepDefineForm: FC<Props> = 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 +360,7 @@ export const StepDefineForm: FC<Props> = 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 +395,8 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange
       });
     }
     setAggList(newAggList);
-    const prettyPivotConfig = JSON.stringify(pivotConfig, null, 2);
 
-    setAdvancedEditorConfig(prettyPivotConfig);
-    setAdvancedEditorConfigLastApplied(prettyPivotConfig);
+    setAdvancedEditorConfigLastApplied(advancedEditorConfig);
     setAdvancedPivotEditorApplyButtonEnabled(false);
   };
 
@@ -459,13 +464,11 @@ export const StepDefineForm: FC<Props> = 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 +733,7 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange
                 >
                   <EuiPanel grow={false} paddingSize="none">
                     <EuiCodeEditor
-                      mode="json"
+                      mode={xJsonMode}
                       width="100%"
                       value={advancedEditorConfig}
                       onChange={(d: string) => {
@@ -745,7 +748,7 @@ export const StepDefineForm: FC<Props> = 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);

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: <DefinePivotSummary />', () => {
   test('Minimal initialization', () => {
     const groupBy: PivotGroupByConfig = {

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 <CreateTransformButton />', () => {
   test('Minimal initialization', () => {
     const wrapper = shallow(<CreateTransformButton onClick={jest.fn()} />);

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 <DeleteAction />', () => {
   test('Minimal initialization', () => {
     const Providers = getAppProviders(createPublicShim());

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 <StartAction />', () => {
   test('Minimal initialization', () => {
     const Providers = getAppProviders(createPublicShim());

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 <StopAction />', () => {
   test('Minimal initialization', () => {
     const Providers = getAppProviders(createPublicShim());

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 });

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([], () => {}, []);

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 <ExpandedRow />', () => {
   // Set timezone to US/Eastern for consistent test results.
   beforeEach(() => {

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 <TransformList />', () => {
   test('Minimal initialization', () => {
     const wrapper = shallow(

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: <TransformManagementSection />', () => {
   test('Minimal initialization', () => {
     const wrapper = shallow(<TransformManagementSection />);

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,

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 = {