First iteration of editor component with render test

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/editor/editor.test.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 'brace';
+import 'brace/mode/json';
+
+jest.mock('./worker', () => {
+  return { workerModule: { id: 'ace/mode/json_worker', src: '' } };
+});
+
+import { registerTestBed } from '../../../../../../../test_utils';
+import { Editor, Props } from '.';
+
+describe('Editor Component', () => {
+  it('renders', async () => {
+    const props: Props = { licenseEnabled: true };
+    // Ignore the warning about Worker not existing for now...
+    const init = registerTestBed(Editor);
+    await init(props);
+  });
+});

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/editor/editor.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 React, { useRef, useEffect } from 'react';
+import { Editor as AceEditor } from 'brace';
+
+import { initializeEditor } from './init_editor';
+
+export interface Props {
+  licenseEnabled: boolean;
+}
+
+export const Editor = ({ licenseEnabled }: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null as any);
+  const editorInstanceRef = useRef<AceEditor>(null as any);
+  useEffect(() => {
+    const divEl = containerRef.current;
+    editorInstanceRef.current = initializeEditor({ el: divEl, licenseEnabled });
+  });
+  return <div ref={containerRef} />;
+};

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/editor/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { Editor, Props } from './editor';

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

@@ -0,0 +1,31 @@
+/*
+ * 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 ace from 'brace';
+import { installXJsonMode } from './x_json_mode';
+
+export function initializeEditor({
+  el,
+  licenseEnabled,
+}: {
+  el: HTMLDivElement;
+  licenseEnabled: boolean;
+}) {
+  const editor: ace.Editor = ace.acequire('ace/ace').edit(el);
+
+  installXJsonMode(editor);
+  editor.$blockScrolling = Infinity;
+
+  if (!licenseEnabled) {
+    editor.setReadOnly(true);
+    editor.container.style.pointerEvents = 'none';
+    editor.container.style.opacity = '0.5';
+    editor.renderer.setStyle('disabled');
+    editor.blur();
+  }
+
+  return editor;
+}

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/editor/worker/index.ts

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

x-pack/legacy/plugins/searchprofiler/np_ready/public/application/editor/worker/worker.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+// 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;
+}