[Canvas] Add Monaco to the Canvas Expression Editor (#41790)

* First version of Editor component and integration with the expression editor

* Adding resize detector

* Remove blue border on editor select

* Adding types for the react resize detector

* Adding worker and a few more monaco plugins

* Suggestion completion rework

* Add resize detector types as well as an IE11 full width bug fix

* Adding correct types for function definitions and monaco

* change CSS class names, add border to input

* Adding boolean styling

* Slight refactor of canvas function/arg types and adding first pass of hover

* Fixing hover interaction for functions and arguments

* Namespacing Code monaco css overrides

* Styling cleanup and simple README

* Setting up tests including some storyshots for the ExpressionInput component and Editor component

* Prop documentation for both the ExpressionInput and Editor components

* Adding Editor snapshots

* tiny cleanup

* Moving language registration, adding autocomplete suggestion types, and cleaning up editor

* Some documentation and cleanup from PR feedback

* Fixing types, adding documentation

* clean up editor, remove autocomplete toggle

* More PR cleanup

* Test fix, type fix

* fix issues around errors. code cleanup

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

@@ -44,8 +44,9 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       '^.+\\.html?$': 'jest-raw-loader',
     },
     transformIgnorePatterns: [
-      // ignore all node_modules except @elastic/eui which requires babel transforms to handle dynamic import()
-      '[/\\\\]node_modules(?![\\/\\\\]@elastic[\\/\\\\]eui)[/\\\\].+\\.js$',
+      // ignore all node_modules except @elastic/eui and monaco-editor which both require babel transforms to handle dynamic import()
+      // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842)
+      '[/\\\\]node_modules(?![\\/\\\\]@elastic[\\/\\\\]eui)(?![\\/\\\\]monaco-editor)[/\\\\].+\\.js$',
     ],
     snapshotSerializers: [`${kibanaDirectory}/node_modules/enzyme-to-json/serializer`],
     reporters: [

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -43,6 +43,8 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
   };
 });
 
+jest.mock('plugins/interpreter/registries', () => ({}));
+
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
   '../public/components/workpad_header/workpad_export/__examples__/disabled_panel.examples',

x-pack/legacy/plugins/canvas/.storybook/webpack.config.js

@@ -127,6 +127,10 @@ module.exports = async ({ config }) => {
     KIBANA_ROOT,
     'packages/kbn-interpreter/target/common'
   );
+  config.resolve.alias['plugins/interpreter/registries'] = path.resolve(
+    KIBANA_ROOT,
+    'packages/kbn-interpreter/target/common/registries'
+  );
 
   return config;
 };

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js

@@ -20,7 +20,7 @@ const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, ar
   return (
     <EuiForm>
       <EuiTextArea
-        className="canvasTextArea--code"
+        className="canvasTextArea__code"
         id={argId}
         rows={10}
         value={value}

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js

@@ -60,7 +60,7 @@ class EssqlDatasource extends PureComponent {
         <EuiTextArea
           placeholder={this.defaultQuery}
           isInvalid={isInvalid}
-          className="canvasTextArea--code"
+          className="canvasTextArea__code"
           value={this.getQuery()}
           onChange={this.onChange}
         />

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js

@@ -65,7 +65,7 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
 
       <EuiFormRow label="Query" helpText="Lucene Query String syntax">
         <EuiTextArea
-          className="canvasTextArea--code"
+          className="canvasTextArea__code"
           value={getQuery()}
           onChange={e => setArg(argName, e.target.value)}
         />

x-pack/legacy/plugins/canvas/common/lib/autocomplete.ts

@@ -12,10 +12,48 @@ import {
   ExpressionFunctionAST,
   ExpressionArgAST,
   CanvasFunction,
+  CanvasArg,
+  CanvasArgValue,
 } from '../../types';
 
 const MARKER = 'CANVAS_SUGGESTION_MARKER';
 
+interface BaseSuggestion {
+  text: string;
+  start: number;
+  end: number;
+}
+
+interface FunctionSuggestion extends BaseSuggestion {
+  type: 'function';
+  fnDef: CanvasFunction;
+}
+
+type ArgSuggestionValue = CanvasArgValue & {
+  name: string;
+};
+
+interface ArgSuggestion extends BaseSuggestion {
+  type: 'argument';
+  argDef: ArgSuggestionValue;
+}
+
+interface ValueSuggestion extends BaseSuggestion {
+  type: 'value';
+}
+
+export type AutocompleteSuggestion = FunctionSuggestion | ArgSuggestion | ValueSuggestion;
+
+interface FnArgAtPosition {
+  ast: ExpressionASTWithMeta;
+  fnIndex: number;
+
+  argName?: string;
+  argIndex?: number;
+  argStart?: number;
+  argEnd?: number;
+}
+
 // If you parse an expression with the "addMeta" option it completely
 // changes the type of returned object.  The following types
 // enhance the existing AST types with the appropriate meta information
@@ -62,19 +100,14 @@ function isExpression(
   return typeof maybeExpression.node === 'object';
 }
 
-type valueof<T> = T[keyof T];
-type ValuesOfUnion<T> = T extends any ? valueof<T> : never;
-
-// All of the possible Arg Values
-type ArgValue = ValuesOfUnion<CanvasFunction['args']>;
-// All of the argument objects
-type CanvasArg = CanvasFunction['args'];
-
 // Overloads to change return type based on specs
 function getByAlias(specs: CanvasFunction[], name: string): CanvasFunction;
 // eslint-disable-next-line @typescript-eslint/unified-signatures
-function getByAlias(specs: CanvasArg, name: string): ArgValue;
-function getByAlias(specs: CanvasFunction[] | CanvasArg, name: string): CanvasFunction | ArgValue {
+function getByAlias(specs: CanvasArg, name: string): CanvasArgValue;
+function getByAlias(
+  specs: CanvasFunction[] | CanvasArg,
+  name: string
+): CanvasFunction | CanvasArgValue {
   return untypedGetByAlias(specs, name);
 }
 
@@ -87,23 +120,24 @@ export function getFnArgDefAtPosition(
   expression: string,
   position: number
 ) {
-  const text = expression.substr(0, position) + MARKER + expression.substr(position);
   try {
-    const ast: ExpressionASTWithMeta = parse(text, { addMeta: true }) as ExpressionASTWithMeta;
+    const ast: ExpressionASTWithMeta = parse(expression, {
+      addMeta: true,
+    }) as ExpressionASTWithMeta;
 
-    const { ast: newAst, fnIndex, argName } = getFnArgAtPosition(ast, position);
+    const { ast: newAst, fnIndex, argName, argStart, argEnd } = getFnArgAtPosition(ast, position);
     const fn = newAst.node.chain[fnIndex].node;
 
-    const fnDef = getByAlias(specs, fn.function.replace(MARKER, ''));
+    const fnDef = getByAlias(specs, fn.function);
     if (fnDef && argName) {
       const argDef = getByAlias(fnDef.args, argName);
-      return { fnDef, argDef };
+      return { fnDef, argDef, argStart, argEnd };
     }
     return { fnDef };
   } catch (e) {
     // Fail silently
   }
-  return [];
+  return {};
 }
 
 /**
@@ -117,7 +151,7 @@ export function getAutocompleteSuggestions(
   specs: CanvasFunction[],
   expression: string,
   position: number
-) {
+): AutocompleteSuggestion[] {
   const text = expression.substr(0, position) + MARKER + expression.substr(position);
   try {
     const ast = parse(text, { addMeta: true }) as ExpressionASTWithMeta;
@@ -151,20 +185,39 @@ export function getAutocompleteSuggestions(
     It returns which function the cursor is in, as well as which argument for that function the cursor is in
     if any.
 */
-function getFnArgAtPosition(
-  ast: ExpressionASTWithMeta,
-  position: number
-): { ast: ExpressionASTWithMeta; fnIndex: number; argName?: string; argIndex?: number } {
+function getFnArgAtPosition(ast: ExpressionASTWithMeta, position: number): FnArgAtPosition {
   const fnIndex = ast.node.chain.findIndex(fn => fn.start <= position && position <= fn.end);
   const fn = ast.node.chain[fnIndex];
   for (const [argName, argValues] of Object.entries(fn.node.arguments)) {
     for (let argIndex = 0; argIndex < argValues.length; argIndex++) {
       const value = argValues[argIndex];
-      if (value.start <= position && position <= value.end) {
+
+      let argStart = value.start;
+      let argEnd = value.end;
+      if (argName !== '_') {
+        // If an arg name is specified, expand our start position to include
+        // the arg name plus the `=` character
+        argStart = argStart - (argName.length + 1);
+
+        // If the arg value is an expression, expand our start and end position
+        // to include the opening and closing braces
         if (value.node !== null && isExpression(value)) {
+          argStart--;
+          argEnd++;
+        }
+      }
+
+      if (argStart <= position && position <= argEnd) {
+        // If the current position is on an expression and NOT on the expression's
+        // argument name (`font=` for example), recurse within the expression
+        if (
+          value.node !== null &&
+          isExpression(value) &&
+          (argName === '_' || !(argStart <= position && position <= argStart + argName.length + 1))
+        ) {
           return getFnArgAtPosition(value, position);
         }
-        return { ast, fnIndex, argName, argIndex };
+        return { ast, fnIndex, argName, argIndex, argStart, argEnd };
       }
     }
   }
@@ -175,7 +228,7 @@ function getFnNameSuggestions(
   specs: CanvasFunction[],
   ast: ExpressionASTWithMeta,
   fnIndex: number
-) {
+): FunctionSuggestion[] {
   // Filter the list of functions by the text at the marker
   const { start, end, node: fn } = ast.node.chain[fnIndex];
   const query = fn.function.replace(MARKER, '');
@@ -205,7 +258,7 @@ function getArgNameSuggestions(
   fnIndex: number,
   argName: string,
   argIndex: number
-) {
+): ArgSuggestion[] {
   // Get the list of args from the function definition
   const fn = ast.node.chain[fnIndex].node;
   const fnDef = getByAlias(specs, fn.function);
@@ -218,7 +271,7 @@ function getArgNameSuggestions(
 
   // Filter the list of args by the text at the marker
   const query = text.replace(MARKER, '');
-  const matchingArgDefs = Object.entries<ArgValue>(fnDef.args).filter(([name]) =>
+  const matchingArgDefs = Object.entries<CanvasArgValue>(fnDef.args).filter(([name]) =>
     textMatches(name, query)
   );
 
@@ -245,11 +298,11 @@ function getArgNameSuggestions(
   // with the text at the marker, then alphabetically
   const comparator = combinedComparator(
     unnamedArgComparator,
-    invokeWithProp<string, 'name', ArgValue & { name: string }, number>(
+    invokeWithProp<string, 'name', CanvasArgValue & { name: string }, number>(
       startsWithComparator(query),
       'name'
     ),
-    invokeWithProp<string, 'name', ArgValue & { name: string }, number>(
+    invokeWithProp<string, 'name', CanvasArgValue & { name: string }, number>(
       alphanumericalComparator,
       'name'
     )
@@ -267,7 +320,7 @@ function getArgValueSuggestions(
   fnIndex: number,
   argName: string,
   argIndex: number
-) {
+): ValueSuggestion[] {
   // Get the list of values from the argument definition
   const fn = ast.node.chain[fnIndex].node;
   const fnDef = getByAlias(specs, fn.function);
@@ -331,7 +384,7 @@ function prevFnTypeComparator(prevFnType: any) {
   };
 }
 
-function unnamedArgComparator(a: ArgValue, b: ArgValue): number {
+function unnamedArgComparator(a: CanvasArgValue, b: CanvasArgValue): number {
   return (
     (b.aliases && b.aliases.includes('_') ? 1 : 0) - (a.aliases && a.aliases.includes('_') ? 1 : 0)
   );

x-pack/legacy/plugins/canvas/common/lib/constants.ts

@@ -16,8 +16,6 @@ export const API_ROUTE_WORKPAD_STRUCTURES = `${API_ROUTE}/workpad-structures`;
 export const API_ROUTE_CUSTOM_ELEMENT = `${API_ROUTE}/custom-element`;
 export const LOCALSTORAGE_PREFIX = `kibana.canvas`;
 export const LOCALSTORAGE_CLIPBOARD = `${LOCALSTORAGE_PREFIX}.clipboard`;
-export const LOCALSTORAGE_AUTOCOMPLETE_ENABLED = `${LOCALSTORAGE_PREFIX}.isAutocompleteEnabled`;
-export const LOCALSTORAGE_EXPRESSION_EDITOR_FONT_SIZE = `${LOCALSTORAGE_PREFIX}.expressionEditorFontSize`;
 export const LOCALSTORAGE_LASTPAGE = 'canvas:lastpage';
 export const FETCH_TIMEOUT = 30000; // 30 seconds
 export const CANVAS_USAGE_TYPE = 'canvas';

x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss

@@ -12,6 +12,7 @@ $canvasLayoutFontSize: $euiFontSizeS;
   flex-direction: column;
   flex-grow: 1;
   max-height: 100vh;
+  max-width: 100%;
 }
 
 .canvasLayout__cols {

x-pack/legacy/plugins/canvas/public/components/app/index.js

@@ -12,6 +12,7 @@ import { getInterpreter } from 'plugins/interpreter/interpreter';
 import { getAppReady, getBasePath } from '../../state/selectors/app';
 import { appReady, appError } from '../../state/actions/app';
 import { elementsRegistry } from '../../lib/elements_registry';
+import { registerLanguage } from '../../lib/monaco_language_def';
 import { templatesRegistry } from '../../lib/templates_registry';
 import { tagsRegistry } from '../../lib/tags_registry';
 import { elementSpecs } from '../../../canvas_plugin_src/elements';
@@ -72,6 +73,9 @@ const mapDispatchToProps = dispatch => ({
     try {
       await getInterpreter();
 
+      // Register the expression language with the Monaco Editor
+      registerLanguage();
+
       // set app state to ready
       dispatch(appReady());
     } catch (e) {

x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.js

@@ -254,7 +254,7 @@ export class Autocomplete extends React.Component {
         ) : (
           ''
         )}
-        <div className="canvasAutocomplete--inner" onMouseDown={this.onMouseDown}>
+        <div className="canvasAutocomplete__inner" onMouseDown={this.onMouseDown}>
           {this.props.children}
         </div>
       </div>

x-pack/legacy/plugins/canvas/public/components/editor/README.md

@@ -0,0 +1,13 @@
+# Editor Component
+
+This re-usable code editor component was built as a layer of abstraction on top of the [Monaco Code Editor](https://microsoft.github.io/monaco-editor/) (and the [React Monaco Editor component](https://github.com/react-monaco-editor/react-monaco-editor)). The goal of this component is to expose a set of the most-used, most-helpful features from Monaco in a way that's easy to use out of the box. If a use case requires additional features, this component still allows access to all other Monaco features.
+
+This editor component allows easy access to:
+* [Syntax highlighting (including custom language highlighting)](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
+* [Suggestion/autocompletion widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example)
+* Function signature widget 
+* [Hover widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example)
+
+[_TODO: Examples of each_](https://github.com/elastic/kibana/issues/43812)
+
+The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes