[ES UI Shared] Remove 'brace' from es_ui_shared public

.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'],
+    },
+  }
+);

src/plugins/es_ui_shared/public/monaco/index.ts → 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__/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/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/__packages_do_not_import__/monaco/index.ts → 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';