[7.x] [ES UI Shared] Remove 'brace' from es_ui_shared public (#78033) (…

…#78427)

* [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>
# Conflicts:
#	.github/CODEOWNERS
#	src/plugins/es_ui_shared/kibana.json

* import brace json mode in raw vis editor

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

package.json

@@ -135,6 +135,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,14 +4,11 @@
   "ui": true,
   "server": true,
   "extraPublicDirs": [
-    "static/ace_x_json/hooks",
     "static/forms/components",
     "static/forms/helpers",
     "static/forms/hook_form_lib",
     "static/validators/string",
     "static/forms/helpers/field_validators/types"
   ],
-  "requiredBundles": [
-    "data"
-  ]
+  "requiredBundles": ["data"]
 }

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