[ES UI Shared] Remove 'brace' from es_ui_shared public (#78033)

* major wip

* major wip

* fix worker creation leak

* just copy the file over for now

* Remove xjson from static and from es_ui_shared entirely

- moved expand and collapse logic back to es_ui_shared. It has
  nothing to do with ace
- refactor the useXJson hook which bundled XJsonMode with it.
  This was convenient but ultimately inflates the amount of code
  Kibana needs to first load up in the client. Users will need to
  import XJsonMode and instantiate it when they want to use it.
  Updated existing usage.
- Cleaned up Monaco namespace from es_ui_shared because of how
  useXJsonMode was refactored -- no longer exporting an editor
  specific instance means this code does not know about anything
  to do with code editors so it is decoupled from ace and monaco.

* fix export of collapse and expand string literals

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

.github/CODEOWNERS

@@ -246,6 +246,8 @@ x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json @elastic/kib
 /x-pack/plugins/upgrade_assistant/  @elastic/es-ui
 /x-pack/plugins/watcher/  @elastic/es-ui
 /x-pack/plugins/ingest_pipelines/  @elastic/es-ui
+/packages/kbn-ace/ @elastic/es-ui
+/packages/kbn-monaco/ @elastic/es-ui
 
 # Endpoint
 /x-pack/plugins/endpoint/ @elastic/endpoint-app-team @elastic/siem

package.json

@@ -138,6 +138,8 @@
     "@kbn/telemetry-tools": "1.0.0",
     "@kbn/test-subj-selector": "0.2.1",
     "@kbn/ui-framework": "1.0.0",
+    "@kbn/ace": "1.0.0",
+    "@kbn/monaco": "1.0.0",
     "@kbn/ui-shared-deps": "1.0.0",
     "@types/yauzl": "^2.9.1",
     "JSONStream": "1.3.5",

packages/kbn-ace/README.md

@@ -0,0 +1,5 @@
+# @kbn/ace
+
+Contains all Kibana-specific brace related code. Excluding the code that still inside of Console because that code is only used inside of console at the moment.
+
+This package enables plugins to use this functionality and import it as needed -- behind an async import so that brace does not bloat the JS code needed for first page load of Kibana.

packages/kbn-ace/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@kbn/ace",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./target/index.js",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "kbn:bootstrap": "yarn build --dev"
+  },
+  "dependencies": {
+    "brace": "0.11.1"
+  },
+  "devDependencies": {
+    "@kbn/dev-utils": "1.0.0",
+    "@kbn/babel-preset": "1.0.0",
+    "raw-loader": "3.1.0",
+    "typescript": "4.0.2"
+  }
+}

packages/kbn-ace/scripts/build.js

@@ -0,0 +1,65 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const path = require('path');
+const del = require('del');
+const fs = require('fs');
+const supportsColor = require('supports-color');
+const { run } = require('@kbn/dev-utils');
+
+const TARGET_BUILD_DIR = path.resolve(__dirname, '../target');
+const ROOT_DIR = path.resolve(__dirname, '../');
+const WORKER_PATH_SECTION = 'ace/modes/x_json/worker/x_json.ace.worker.js';
+
+run(
+  async ({ procRunner, log }) => {
+    log.info('Deleting old output');
+
+    await del(TARGET_BUILD_DIR);
+
+    const cwd = ROOT_DIR;
+    const env = { ...process.env };
+
+    if (supportsColor.stdout) {
+      env.FORCE_COLOR = 'true';
+    }
+
+    await procRunner.run('tsc   ', {
+      cmd: 'tsc',
+      args: [],
+      wait: true,
+      env,
+      cwd,
+    });
+
+    log.success('Copying worker file to target.');
+
+    fs.copyFileSync(
+      path.resolve(__dirname, '..', 'src', WORKER_PATH_SECTION),
+      path.resolve(__dirname, '..', 'target', WORKER_PATH_SECTION)
+    );
+
+    log.success('Complete');
+  },
+  {
+    flags: {
+      boolean: ['dev'],
+    },
+  }
+);

packages/kbn-ace/src/index.ts

@@ -17,4 +17,11 @@
  * under the License.
  */
 
-export { useXJsonMode } from '../../__packages_do_not_import__/monaco';
+export {
+  ElasticsearchSqlHighlightRules,
+  ScriptHighlightRules,
+  XJsonHighlightRules,
+  addXJsonToRules,
+  XJsonMode,
+  installXJsonMode,
+} from './ace/modes';

packages/kbn-ace/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "declaration": true,
+    "sourceMap": true,
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

packages/kbn-ace/yarn.lock

@@ -0,0 +1 @@
+../../yarn.lock

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx

@@ -20,7 +20,7 @@
 import { EuiScreenReaderOnly } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useRef } from 'react';
-import { expandLiteralStrings } from '../../../../../../../es_ui_shared/public';
+import { expandLiteralStrings } from '../../../../../shared_imports';
 import {
   useEditorReadContext,
   useRequestReadContext,

src/plugins/console/public/application/hooks/use_send_current_request_to_es/send_request_to_es.ts

@@ -18,7 +18,8 @@
  */
 
 import { extractDeprecationMessages } from '../../../lib/utils';
-import { collapseLiteralStrings } from '../../../../../es_ui_shared/public';
+import { XJson } from '../../../../../es_ui_shared/public';
+const { collapseLiteralStrings } = XJson;
 // @ts-ignore
 import * as es from '../../../lib/es/es';
 import { BaseResponseType } from '../../../types';

src/plugins/console/public/application/models/legacy_core_editor/mode/input_highlight_rules.js

@@ -18,7 +18,7 @@
  */
 
 import ace from 'brace';
-import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
+import { addXJsonToRules } from '@kbn/ace';
 
 export function addEOL(tokens, reg, nextIfEOL, normalNext) {
   if (typeof reg === 'object') {

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.js

@@ -19,7 +19,7 @@
 
 import ace from 'brace';
 import 'brace/mode/json';
-import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
+import { addXJsonToRules } from '@kbn/ace';
 
 const oop = ace.acequire('ace/lib/oop');
 const JsonHighlightRules = ace.acequire('ace/mode/json_highlight_rules').JsonHighlightRules;

src/plugins/console/public/application/models/legacy_core_editor/mode/script.js

@@ -18,7 +18,7 @@
  */
 
 import ace from 'brace';
-import { ScriptHighlightRules } from '../../../../../../es_ui_shared/public';
+import { ScriptHighlightRules } from '@kbn/ace';
 
 const oop = ace.acequire('ace/lib/oop');
 const TextMode = ace.acequire('ace/mode/text').Mode;

src/plugins/console/public/application/models/sense_editor/__tests__/sense_editor.test.js

@@ -22,9 +22,11 @@ import $ from 'jquery';
 import _ from 'lodash';
 
 import { create } from '../create';
-import { collapseLiteralStrings } from '../../../../../../es_ui_shared/public';
+import { XJson } from '../../../../../../es_ui_shared/public';
 import editorInput1 from './editor_input1.txt';
 
+const { collapseLiteralStrings } = XJson;
+
 describe('Editor', () => {
   let input;
 

src/plugins/console/public/application/models/sense_editor/sense_editor.ts

@@ -19,7 +19,7 @@
 
 import _ from 'lodash';
 import RowParser from '../../../lib/row_parser';
-import { collapseLiteralStrings } from '../../../../../es_ui_shared/public';
+import { XJson } from '../../../../../es_ui_shared/public';
 import * as utils from '../../../lib/utils';
 
 // @ts-ignore
@@ -30,6 +30,8 @@ import { createTokenIterator } from '../../factories';
 
 import Autocomplete from '../../../lib/autocomplete/autocomplete';
 
+const { collapseLiteralStrings } = XJson;
+
 export class SenseEditor {
   currentReqRange: (Range & { markerRef: any }) | null;
   parser: any;

src/plugins/console/public/lib/utils/index.ts

@@ -18,7 +18,9 @@
  */
 
 import _ from 'lodash';
-import { expandLiteralStrings, collapseLiteralStrings } from '../../../../es_ui_shared/public';
+import { XJson } from '../../../../es_ui_shared/public';
+
+const { collapseLiteralStrings, expandLiteralStrings } = XJson;
 
 export function textFromRequest(request: any) {
   let data = request.data;

src/plugins/console/public/shared_imports.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
-import { sendRequest } from '../../es_ui_shared/public';
+import { sendRequest, XJson } from '../../es_ui_shared/public';
 
-export { sendRequest };
+const { collapseLiteralStrings, expandLiteralStrings } = XJson;
+
+export { sendRequest, collapseLiteralStrings, expandLiteralStrings };

src/plugins/es_ui_shared/__packages_do_not_import__/monaco/use_xjson_mode.ts

@@ -1,32 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { XJsonLang } from '@kbn/monaco';
-import { useXJsonMode as useBaseXJsonMode } from '../xjson';
-
-interface ReturnValue extends ReturnType<typeof useBaseXJsonMode> {
-  XJsonLang: typeof XJsonLang;
-}
-
-export const useXJsonMode = (json: Parameters<typeof useBaseXJsonMode>[0]): ReturnValue => {
-  return {
-    ...useBaseXJsonMode(json),
-    XJsonLang,
-  };
-};

src/plugins/es_ui_shared/__packages_do_not_import__/xjson/index.ts

@@ -18,3 +18,5 @@
  */
 
 export { useXJsonMode } from './use_xjson_mode';
+
+export { collapseLiteralStrings, expandLiteralStrings } from './json_xjson_translation_tools';

src/plugins/es_ui_shared/__packages_do_not_import__/xjson/use_xjson_mode.ts

@@ -18,7 +18,8 @@
  */
 
 import { useState, Dispatch } from 'react';
-import { collapseLiteralStrings, expandLiteralStrings } from '../../public';
+
+import { collapseLiteralStrings, expandLiteralStrings } from './json_xjson_translation_tools';
 
 interface ReturnValue {
   xJson: string;

src/plugins/es_ui_shared/kibana.json

@@ -4,7 +4,6 @@
   "ui": true,
   "server": true,
   "extraPublicDirs": [
-    "static/ace_x_json/hooks",
     "static/validators/string",
     "static/forms/hook_form_lib",
     "static/forms/helpers",

src/plugins/es_ui_shared/public/console_lang/index.ts

@@ -1,32 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-// Lib is intentionally not included in this barrel export file to separate worker logic
-// from being imported with pure functions
-
-export {
-  ElasticsearchSqlHighlightRules,
-  ScriptHighlightRules,
-  XJsonHighlightRules,
-  addXJsonToRules,
-  XJsonMode,
-  installXJsonMode,
-} from './ace/modes';
-
-export { expandLiteralStrings, collapseLiteralStrings } from './lib';

src/plugins/es_ui_shared/public/console_lang/lib/index.ts

@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { collapseLiteralStrings, expandLiteralStrings } from './json_xjson_translation_tools';

src/plugins/es_ui_shared/public/index.ts

@@ -22,9 +22,9 @@
  * In the future, each top level folder should be exported like that to avoid naming collision
  */
 import * as Forms from './forms';
-import * as Monaco from './monaco';
 import * as ace from './ace';
 import * as GlobalFlyout from './global_flyout';
+import * as XJson from './xjson';
 
 export { JsonEditor, OnJsonEditorUpdateHandler, JsonEditorState } from './components/json_editor';
 
@@ -43,17 +43,6 @@ export {
 
 export { indices } from './indices';
 
-export {
-  installXJsonMode,
-  XJsonMode,
-  ElasticsearchSqlHighlightRules,
-  addXJsonToRules,
-  ScriptHighlightRules,
-  XJsonHighlightRules,
-  collapseLiteralStrings,
-  expandLiteralStrings,
-} from './console_lang';
-
 export {
   AuthorizationContext,
   AuthorizationProvider,
@@ -66,7 +55,7 @@ export {
   useAuthorizationContext,
 } from './authorization';
 
-export { Monaco, Forms, ace, GlobalFlyout };
+export { Forms, ace, GlobalFlyout, XJson };
 
 export { extractQueryParams } from './url';
 

src/plugins/es_ui_shared/public/xjson/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { useXJsonMode } from './use_xjson_mode';
+export * from '../../__packages_do_not_import__/xjson';

src/plugins/es_ui_shared/static/ace_x_json/hooks/index.ts

@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { useXJsonMode } from './use_x_json';

src/plugins/es_ui_shared/static/ace_x_json/hooks/use_x_json.ts

@@ -1,33 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { XJsonMode } from '../../../public';
-import { useXJsonMode as useBaseXJsonMode } from '../../../__packages_do_not_import__/xjson';
-
-const xJsonMode = new XJsonMode();
-
-interface ReturnValue extends ReturnType<typeof useBaseXJsonMode> {
-  xJsonMode: typeof xJsonMode;
-}
-
-export const useXJsonMode = (json: Parameters<typeof useBaseXJsonMode>[0]): ReturnValue => {
-  return {
-    ...useBaseXJsonMode(json),
-    xJsonMode,
-  };
-};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/field_components/xjson_editor.tsx

@@ -5,7 +5,9 @@
  */
 import { XJsonLang } from '@kbn/monaco';
 import React, { FunctionComponent, useCallback } from 'react';
-import { FieldHook, Monaco } from '../../../../../../shared_imports';
+import { FieldHook, XJson } from '../../../../../../shared_imports';
+
+const { useXJsonMode } = XJson;
 
 import { TextEditor } from './text_editor';
 
@@ -21,7 +23,7 @@ const defaultEditorOptions = {
 
 export const XJsonEditor: FunctionComponent<Props> = ({ field, editorProps }) => {
   const { value, setValue } = field;
-  const { xJson, setXJson, convertToJson } = Monaco.useXJsonMode(value);
+  const { xJson, setXJson, convertToJson } = useXJsonMode(value);
 
   const onChange = useCallback(
     (s) => {

x-pack/plugins/ingest_pipelines/public/shared_imports.ts

@@ -21,7 +21,7 @@ export {
   useRequest,
   UseRequestConfig,
   WithPrivileges,
-  Monaco,
+  XJson,
   JsonEditor,
   OnJsonEditorUpdateHandler,
 } from '../../../../src/plugins/es_ui_shared/public/';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/reducer.ts

@@ -10,7 +10,7 @@ import { memoize } from 'lodash';
 import numeral from '@elastic/numeral';
 import { isValidIndexName } from '../../../../../../../common/util/es_utils';
 
-import { collapseLiteralStrings } from '../../../../../../../../../../src/plugins/es_ui_shared/public';
+import { collapseLiteralStrings } from '../../../../../../../shared_imports';
 
 import { Action, ACTION } from './actions';
 import {

x-pack/plugins/ml/shared_imports.ts

@@ -3,9 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { XJson } from '../../../src/plugins/es_ui_shared/public';
+const { collapseLiteralStrings, expandLiteralStrings } = XJson;
 
-export {
-  XJsonMode,
-  collapseLiteralStrings,
-  expandLiteralStrings,
-} from '../../../src/plugins/es_ui_shared/public';
+export { XJsonMode } from '@kbn/ace';
+export { collapseLiteralStrings, expandLiteralStrings };

x-pack/plugins/searchprofiler/public/application/editor/init_editor.ts

@@ -5,7 +5,7 @@
  */
 
 import ace from 'brace';
-import { installXJsonMode } from '../../../../../../src/plugins/es_ui_shared/public';
+import { installXJsonMode } from '@kbn/ace';
 
 export function initializeEditor({
   el,

x-pack/plugins/searchprofiler/public/application/utils/check_for_json_errors.ts

@@ -4,7 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { collapseLiteralStrings } from '../../../../../../src/plugins/es_ui_shared/public';
+import { XJson } from '../../../../../../src/plugins/es_ui_shared/public';
+
+const { collapseLiteralStrings } = XJson;
 
 export function checkForParseErrors(json: string) {
   const sanitizedJson = collapseLiteralStrings(json);

x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/hooks/use_advanced_pivot_editor.ts

@@ -5,13 +5,17 @@
  */
 
 import { useEffect, useState } from 'react';
+import { XJsonMode } from '@kbn/ace';
 
-import { useXJsonMode } from '../../../../../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
+import { XJson } from '../../../../../../../../../../src/plugins/es_ui_shared/public';
 
 import { PostTransformsPreviewRequestSchema } from '../../../../../../../common/api_schemas/transforms';
 
 import { StepDefineExposedState } from '../common';
 
+const { useXJsonMode } = XJson;
+const xJsonMode = new XJsonMode();
+
 export const useAdvancedPivotEditor = (
   defaults: StepDefineExposedState,
   previewRequest: PostTransformsPreviewRequestSchema
@@ -38,7 +42,6 @@ export const useAdvancedPivotEditor = (
     convertToJson,
     setXJson: setAdvancedEditorConfig,
     xJson: advancedEditorConfig,
-    xJsonMode,
   } = useXJsonMode(stringifiedPivotConfig);
 
   useEffect(() => {

x-pack/plugins/transform/public/shared_imports.ts

@@ -5,13 +5,8 @@
  */
 
 export { createSavedSearchesLoader } from '../../../../src/plugins/discover/public';
-export {
-  XJsonMode,
-  collapseLiteralStrings,
-  expandLiteralStrings,
-  UseRequestConfig,
-  useRequest,
-} from '../../../../src/plugins/es_ui_shared/public';
+export { XJsonMode } from '@kbn/ace';
+export { UseRequestConfig, useRequest } from '../../../../src/plugins/es_ui_shared/public';
 
 export {
   getFieldType,
@@ -31,3 +26,7 @@ export {
   UseIndexDataReturnType,
   INDEX_STATUS,
 } from '../../ml/public';
+
+import { XJson } from '../../../../src/plugins/es_ui_shared/public';
+const { expandLiteralStrings, collapseLiteralStrings } = XJson;
+export { expandLiteralStrings, collapseLiteralStrings };

x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx

@@ -5,8 +5,10 @@
  */
 import React, { useState } from 'react';
 import { EuiCodeEditor, EuiFormRow } from '@elastic/eui';
+import { XJsonMode } from '@kbn/ace';
+
 import './add_message_variables.scss';
-import { useXJsonMode } from '../../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';
+import { XJson } from '../../../../../../src/plugins/es_ui_shared/public';
 
 import { AddMessageVariables } from './add_message_variables';
 import { ActionVariable } from '../../types';
@@ -23,6 +25,9 @@ interface Props {
   onBlur?: () => void;
 }
 
+const { useXJsonMode } = XJson;
+const xJsonMode = new XJsonMode();
+
 export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
   messageVariables,
   paramsProperty,
@@ -36,7 +41,7 @@ export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
 }) => {
   const [cursorPosition, setCursorPosition] = useState<any>(null);
 
-  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(inputTargetValue ?? null);
+  const { convertToJson, setXJson, xJson } = useXJsonMode(inputTargetValue ?? null);
 
   const onSelectMessageVariable = (variable: string) => {
     const templatedVar = `{{${variable}}}`;

x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_form.tsx

@@ -20,16 +20,20 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { XJsonMode } from '@kbn/ace';
 
 import { serializeJsonWatch } from '../../../../../../common/lib/serialization';
 import { ErrableFormRow, SectionError, Error as ServerError } from '../../../../components';
-import { useXJsonMode } from '../../../../shared_imports';
+import { XJson } from '../../../../shared_imports';
 import { onWatchSave } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
 import { goToWatchList } from '../../../../lib/navigation';
 import { RequestFlyout } from '../request_flyout';
 import { useAppContext } from '../../../../app_context';
 
+const xJsonMode = new XJsonMode();
+const { useXJsonMode } = XJson;
+
 export const JsonWatchEditForm = () => {
   const {
     links: { putWatchApiUrl },
@@ -37,7 +41,7 @@ export const JsonWatchEditForm = () => {
   } = useAppContext();
 
   const { watch, setWatchProperty } = useContext(WatchContext);
-  const { xJsonMode, convertToJson, setXJson, xJson } = useXJsonMode(watch.watchString);
+  const { convertToJson, setXJson, xJson } = useXJsonMode(watch.watchString);
 
   const { errors } = watch.validate();
   const hasErrors = !!Object.keys(errors).find((errorKey) => errors[errorKey].length >= 1);

x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx

@@ -24,6 +24,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { XJsonMode } from '@kbn/ace';
+
+const xJsonMode = new XJsonMode();
 
 import { WatchHistoryItem } from '../../../../models/watch_history_item';
 
@@ -33,14 +36,16 @@ import {
   ExecutedWatchDetails,
   ExecutedWatchResults,
 } from '../../../../../../common/types/watch_types';
-import { ErrableFormRow } from '../../../../components/form_errors';
+import { ErrableFormRow } from '../../../../components';
 import { executeWatch } from '../../../../lib/api';
 import { WatchContext } from '../../watch_context';
 import { JsonWatchEditSimulateResults } from './json_watch_edit_simulate_results';
 import { getTimeUnitLabel } from '../../../../lib/get_time_unit_label';
 import { useAppContext } from '../../../../app_context';
 
-import { useXJsonMode } from '../../../../shared_imports';
+import { XJson } from '../../../../shared_imports';
+
+const { useXJsonMode } = XJson;
 
 const actionModeOptions = Object.keys(ACTION_MODES).map((mode) => ({
   text: ACTION_MODES[mode],
@@ -96,7 +101,7 @@ export const JsonWatchEditSimulate = ({
     ignoreCondition,
   } = executeDetails;
 
-  const { setXJson, convertToJson, xJsonMode, xJson } = useXJsonMode(alternativeInput);
+  const { setXJson, convertToJson, xJson } = useXJsonMode(alternativeInput);
 
   const columns = [
     {

x-pack/plugins/watcher/public/application/shared_imports.ts

@@ -10,6 +10,5 @@ export {
   UseRequestConfig,
   sendRequest,
   useRequest,
+  XJson,
 } from '../../../../../src/plugins/es_ui_shared/public';
-
-export { useXJsonMode } from '../../../../../src/plugins/es_ui_shared/static/ace_x_json/hooks';