[ESUI] Move XJson Mode to src/plugins/es_ui_shared (#62758)

* Move XJson to x-pack/es_ui_shared

Also convert files to TS and clean up use of @ts-ignore

* Move console_lang to public

* Proper use of mocks

* Globally mock out .ace.worker.js modules

Having worker code exported in `public` of es_ui_shared poisoned
a lot of Jest tests with the need to mock out the ace worker.

Instead of adding mocks everywhere we handle the importing in
Jest by adding an entry to module mapper.

* Remove manual imports of mocks

* Delete es_ui_shared/public/mocks for now

* Put useXJson code in single place

* Import and instantiate xJsonMode

* Remove language mocks imports

Besides the fact that these paths are wrong these are no longer
needed because we mock at use Jest module mapper

Co-authored-by: Elastic Machine <[email protected]>

src/dev/jest/config.js

@@ -62,6 +62,7 @@ export default {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/src/dev/jest/mocks/file_mock.js',
     '\\.(css|less|scss)$': '<rootDir>/src/dev/jest/mocks/style_mock.js',
+    '\\.ace\\.worker.js$': '<rootDir>/src/dev/jest/mocks/ace_worker_module_mock.js',
   },
   setupFiles: [
     '<rootDir>/src/dev/jest/setup/babel_polyfill.js',

src/plugins/es_ui_shared/console_lang/ace/modes/x_json/index.ts → src/dev/jest/mocks/ace_worker_module_mock.js

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { XJsonMode } from './x_json_mode';
+module.exports = '';

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/console_lang/lib';
+import { expandLiteralStrings } from '../../../../../../../es_ui_shared/public';
 import {
   useEditorReadContext,
   useRequestReadContext,

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

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

src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import '../legacy_core_editor.test.mocks';
 const $ = require('jquery');
 import RowParser from '../../../../lib/row_parser';
 import ace from 'brace';

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

@@ -18,7 +18,7 @@
  */
 
 const ace = require('brace');
-import { addXJsonToRules } from '../../../../../../es_ui_shared/console_lang';
+import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
 
 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 @@
 
 const ace = require('brace');
 import 'brace/mode/json';
-import { addXJsonToRules } from '../../../../../../es_ui_shared/console_lang';
+import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
 
 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/console_lang';
+import { ScriptHighlightRules } from '../../../../../../es_ui_shared/public';
 
 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,7 +22,7 @@ import $ from 'jquery';
 import _ from 'lodash';
 
 import { create } from '../create';
-import { collapseLiteralStrings } from '../../../../../../es_ui_shared/console_lang/lib';
+import { collapseLiteralStrings } from '../../../../../../es_ui_shared/public';
 const editorInput1 = require('./editor_input1.txt');
 
 describe('Editor', () => {

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/console_lang/lib';
+import { collapseLiteralStrings } from '../../../../../es_ui_shared/public';
 import * as utils from '../../../lib/utils';
 
 // @ts-ignore

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

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

src/plugins/es_ui_shared/console_lang/ace/modes/index.js → src/plugins/es_ui_shared/public/console_lang/ace/modes/index.ts

@@ -24,4 +24,4 @@ export {
   addXJsonToRules,
 } from './lexer_rules';
 
-export { XJsonMode, installXJsonMode } from './x_json';
+export { installXJsonMode, XJsonMode } from './x_json';

src/plugins/es_ui_shared/console_lang/ace/modes/lexer_rules/script_highlight_rules.js → src/plugins/es_ui_shared/public/console_lang/ace/modes/lexer_rules/script_highlight_rules.ts

@@ -17,13 +17,13 @@
  * under the License.
  */
 
-const ace = require('brace');
+import ace from 'brace';
 const oop = ace.acequire('ace/lib/oop');
 const { TextHighlightRules } = ace.acequire('ace/mode/text_highlight_rules');
 const painlessKeywords =
   'def|int|long|byte|String|float|double|char|null|if|else|while|do|for|continue|break|new|try|catch|throw|this|instanceof|return|ctx';
 
-export function ScriptHighlightRules() {
+export function ScriptHighlightRules(this: any) {
   this.name = 'ScriptHighlightRules';
   this.$rules = {
     start: [

src/plugins/es_ui_shared/console_lang/ace/modes/lexer_rules/x_json_highlight_rules.js → src/plugins/es_ui_shared/public/console_lang/ace/modes/lexer_rules/x_json_highlight_rules.ts

@@ -22,14 +22,14 @@ import ace from 'brace';
 import 'brace/mode/json';
 
 import { ElasticsearchSqlHighlightRules } from './elasticsearch_sql_highlight_rules';
-const { ScriptHighlightRules } = require('./script_highlight_rules');
+import { ScriptHighlightRules } from './script_highlight_rules';
 
 const { JsonHighlightRules } = ace.acequire('ace/mode/json_highlight_rules');
 const oop = ace.acequire('ace/lib/oop');
 
-const jsonRules = function(root) {
+const jsonRules = function(root: any) {
   root = root ? root : 'json';
-  const rules = {};
+  const rules: any = {};
   const xJsonRules = [
     {
       token: [
@@ -135,7 +135,7 @@ const jsonRules = function(root) {
       merge: false,
       push: true,
     },
-  ].concat(xJsonRules);
+  ].concat(xJsonRules as any);
 
   rules.string_literal = [
     {
@@ -151,7 +151,7 @@ const jsonRules = function(root) {
   return rules;
 };
 
-export function XJsonHighlightRules() {
+export function XJsonHighlightRules(this: any) {
   this.$rules = {
     ...jsonRules('start'),
   };
@@ -175,7 +175,7 @@ export function XJsonHighlightRules() {
 
 oop.inherits(XJsonHighlightRules, JsonHighlightRules);
 
-export function addToRules(otherRules, embedUnder) {
+export function addToRules(otherRules: any, embedUnder: any) {
   otherRules.$rules = _.defaultsDeep(otherRules.$rules, jsonRules(embedUnder));
   otherRules.embedRules(ScriptHighlightRules, 'script-', [
     {

src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { installXJsonMode, XJsonMode } from './x_json';

src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import src from '!!raw-loader!./x_json.ace.worker.js';
+
+export const workerModule = {
+  id: 'ace/mode/json_worker',
+  src,
+};

src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/worker/worker.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+// Satisfy TS's requirements that the module be declared per './index.ts'.
+declare module '!!raw-loader!./worker.js' {
+  const content: string;
+  // eslint-disable-next-line import/no-default-export
+  export default content;
+}

src/plugins/es_ui_shared/console_lang/ace/modes/x_json/x_json_mode.ts → src/plugins/es_ui_shared/public/console_lang/ace/modes/x_json/x_json.ts

@@ -18,23 +18,50 @@
  */
 
 import ace from 'brace';
-
 import { XJsonHighlightRules } from '../index';
+import { workerModule } from './worker';
+
+const { WorkerClient } = ace.acequire('ace/worker/worker_client');
 
 const oop = ace.acequire('ace/lib/oop');
+
 const { Mode: JSONMode } = ace.acequire('ace/mode/json');
 const { Tokenizer: AceTokenizer } = ace.acequire('ace/tokenizer');
 const { MatchingBraceOutdent } = ace.acequire('ace/mode/matching_brace_outdent');
 const { CstyleBehaviour } = ace.acequire('ace/mode/behaviour/cstyle');
 const { FoldMode: CStyleFoldMode } = ace.acequire('ace/mode/folding/cstyle');
 
-export function XJsonMode(this: any) {
-  const ruleset: any = new XJsonHighlightRules();
+const XJsonMode: any = function XJsonMode(this: any) {
+  const ruleset: any = new (XJsonHighlightRules as any)();
   ruleset.normalizeRules();
   this.$tokenizer = new AceTokenizer(ruleset.getRules());
   this.$outdent = new MatchingBraceOutdent();
   this.$behaviour = new CstyleBehaviour();
   this.foldingRules = new CStyleFoldMode();
-}
+};
 
 oop.inherits(XJsonMode, JSONMode);
+
+// Then clobber `createWorker` method to install our worker source. Per ace's wiki: https://github.com/ajaxorg/ace/wiki/Syntax-validation
+(XJsonMode.prototype as any).createWorker = function(session: ace.IEditSession) {
+  const xJsonWorker = new WorkerClient(['ace'], workerModule, 'JsonWorker');
+
+  xJsonWorker.attachToDocument(session.getDocument());
+
+  xJsonWorker.on('annotate', function(e: { data: any }) {
+    session.setAnnotations(e.data);
+  });
+
+  xJsonWorker.on('terminate', function() {
+    session.clearAnnotations();
+  });
+
+  return xJsonWorker;
+};
+
+export { XJsonMode };
+
+export function installXJsonMode(editor: ace.Editor) {
+  const session = editor.getSession();
+  session.setMode(new XJsonMode());
+}

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

@@ -26,4 +26,7 @@ export {
   XJsonHighlightRules,
   addXJsonToRules,
   XJsonMode,
+  installXJsonMode,
 } from './ace/modes';
+
+export { expandLiteralStrings, collapseLiteralStrings } from './lib';

src/plugins/es_ui_shared/public/index.ts

@@ -36,6 +36,17 @@ export { indices } from './indices';
 
 export { useUIAceKeyboardMode } from './use_ui_ace_keyboard_mode';
 
+export {
+  installXJsonMode,
+  XJsonMode,
+  ElasticsearchSqlHighlightRules,
+  addXJsonToRules,
+  ScriptHighlightRules,
+  XJsonHighlightRules,
+  collapseLiteralStrings,
+  expandLiteralStrings,
+} from './console_lang';
+
 /** dummy plugin, we just want esUiShared to have its own bundle */
 export function plugin() {
   return new (class EsUiSharedPlugin {

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

@@ -0,0 +1,20 @@
+/*
+ * 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/console_lang/ace/modes/index.d.ts → src/plugins/es_ui_shared/static/ace_x_json/hooks/use_x_json.ts

@@ -17,16 +17,22 @@
  * under the License.
  */
 
-import { Editor } from 'brace';
+import { useState } from 'react';
+import { XJsonMode, collapseLiteralStrings, expandLiteralStrings } from '../../../public';
 
-export declare const ElasticsearchSqlHighlightRules: FunctionConstructor;
-export declare const ScriptHighlightRules: FunctionConstructor;
-export declare const XJsonHighlightRules: FunctionConstructor;
+const xJsonMode = new XJsonMode();
 
-export declare const XJsonMode: FunctionConstructor;
+export const useXJsonMode = (json: Record<string, any> | string | null) => {
+  const [xJson, setXJson] = useState(() =>
+    json === null
+      ? ''
+      : expandLiteralStrings(typeof json === 'string' ? json : JSON.stringify(json, null, 2))
+  );
 
-/**
- * @param otherRules Another Ace ruleset
- * @param embedUnder The state name under which the rules will be embedded. Defaults to "json".
- */
-export declare const addXJsonToRules: (otherRules: any, embedUnder?: string) => void;
+  return {
+    xJson,
+    setXJson,
+    xJsonMode,
+    convertToJson: collapseLiteralStrings,
+  };
+};

x-pack/dev-tools/jest/create_jest_config.js

@@ -28,6 +28,7 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': fileMockPath,
       '\\.module.(css|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/css_module_mock.js`,
       '\\.(css|less|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
+      '\\.ace\\.worker.js$': `${kibanaDirectory}/src/dev/jest/mocks/ace_worker_module_mock.js`,
       '^test_utils/enzyme_helpers': `${xPackKibanaDirectory}/test_utils/enzyme_helpers.tsx`,
       '^test_utils/find_test_subject': `${xPackKibanaDirectory}/test_utils/find_test_subject.ts`,
       '^test_utils/stub_web_worker': `${xPackKibanaDirectory}/test_utils/stub_web_worker.ts`,