From 27fd28eb9a4b92a576280a993e7638842f96e461 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 14 Jan 2020 13:36:18 +0100
Subject: [PATCH] Add syntax highlighting

---
 .../common/constants/editor.ts                |  12 --
 .../common/constants/index.ts                 |   1 -
 .../common/constants/plugin.ts                |   2 +-
 .../public/components/painless_playground.tsx | 196 ++++++++++--------
 .../painless_playground/public/register.ts    |   2 +
 .../public/register_painless.ts               | 182 ++++++++++++++++
 6 files changed, 294 insertions(+), 101 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/painless_playground/common/constants/editor.ts
 create mode 100644 x-pack/legacy/plugins/painless_playground/public/register_painless.ts

diff --git a/x-pack/legacy/plugins/painless_playground/common/constants/editor.ts b/x-pack/legacy/plugins/painless_playground/common/constants/editor.ts
deleted file mode 100644
index 7df2a6dffb268..0000000000000
--- a/x-pack/legacy/plugins/painless_playground/common/constants/editor.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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 const EDITOR = {
-  PATTERN_MIN_LINES: 3,
-  PATTERN_MAX_LINES: 10,
-  SAMPLE_DATA_MIN_LINES: 3,
-  SAMPLE_DATA_MAX_LINES: 100,
-};
diff --git a/x-pack/legacy/plugins/painless_playground/common/constants/index.ts b/x-pack/legacy/plugins/painless_playground/common/constants/index.ts
index 12e440d7ed858..85b819624b70f 100644
--- a/x-pack/legacy/plugins/painless_playground/common/constants/index.ts
+++ b/x-pack/legacy/plugins/painless_playground/common/constants/index.ts
@@ -6,4 +6,3 @@
 
 export { ROUTES } from './routes';
 export { PLUGIN } from './plugin';
-export { EDITOR } from './editor';
diff --git a/x-pack/legacy/plugins/painless_playground/common/constants/plugin.ts b/x-pack/legacy/plugins/painless_playground/common/constants/plugin.ts
index 57ebb6006207f..07767dd54bd38 100644
--- a/x-pack/legacy/plugins/painless_playground/common/constants/plugin.ts
+++ b/x-pack/legacy/plugins/painless_playground/common/constants/plugin.ts
@@ -5,5 +5,5 @@
  */
 
 export const PLUGIN = {
-  ID: 'painlessPlayground',
+  ID: 'painless_playground',
 };
diff --git a/x-pack/legacy/plugins/painless_playground/public/components/painless_playground.tsx b/x-pack/legacy/plugins/painless_playground/public/components/painless_playground.tsx
index 9402657db6a66..92ac7124e0213 100644
--- a/x-pack/legacy/plugins/painless_playground/public/components/painless_playground.tsx
+++ b/x-pack/legacy/plugins/painless_playground/public/components/painless_playground.tsx
@@ -3,7 +3,7 @@
  * 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 from 'react';
+import React, { useState } from 'react';
 import {
   EuiForm,
   EuiButton,
@@ -13,7 +13,6 @@ import {
   EuiPageContentBody,
   EuiSpacer,
   EuiFormRow,
-  EuiPanel,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
@@ -24,107 +23,105 @@ interface Props {
 
 interface State {
   code: string;
-  output: any;
+  request?: string;
+  response?: string;
 }
-export class PainlessPlayground extends React.Component<Props, State> {
-  state = {
+export function PainlessPlayground(props: Props) {
+  const [state, setState] = useState<State>({
     code: '',
-    output: '',
-  };
-
-  onPatternChange = (code: string) => {
-    this.setState({ code });
-  };
+    request: '',
+    response: '',
+  });
 
-  submit = async () => {
+  const submit = async () => {
+    const request = {
+      script: {
+        source: state.code,
+      },
+    };
     try {
-      const payload = {
-        script: {
-          source: this.state.code,
-        },
-      };
-      const response = await this.props.service.simulate(payload);
-      this.setState({
-        output: response,
+      const response = await props.service.simulate(request);
+      setState({
+        code: state.code,
+        response: JSON.stringify(response, null, 2),
+        request: JSON.stringify(request, null, 2),
       });
     } catch (e) {
-      this.setState({
-        output: e,
+      setState({
+        code: state.code,
+        response: JSON.stringify(e, null, 2),
+        request: JSON.stringify(request, null, 2),
       });
     }
   };
 
-  onSimulateClick = () => {
-    this.submit();
-  };
-
-  isSimulateDisabled = () => {
-    return this.state.code.trim() === '';
+  const onSimulateClick = () => {
+    submit();
   };
-
-  render() {
-    return (
-      <EuiPage>
-        <EuiPageBody>
-          <EuiPageContent>
-            <EuiPageContentBody>
-              <EuiForm data-test-subj="painlessPlayground">
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.painlessPlayground.codeLabel"
-                      defaultMessage="Painless Code"
-                    />
-                  }
-                  fullWidth
-                  data-test-subj="codeInput"
-                >
-                  <EuiPanel paddingSize="s">
-                    <CodeEditor
-                      languageId="javascript"
-                      height={250}
-                      value={this.state.code}
-                      onChange={this.onPatternChange}
-                      options={{
-                        fontSize: 12,
-                        minimap: {
-                          enabled: false,
-                        },
-                        scrollBeyondLastLine: false,
-                        wordWrap: 'on',
-                        wrappingIndent: 'indent',
-                      }}
-                    />
-                  </EuiPanel>
-                </EuiFormRow>
-                <EuiSpacer />
-                <EuiButton
-                  fill
-                  onClick={this.onSimulateClick}
-                  isDisabled={this.isSimulateDisabled()}
-                  data-test-subj="btnSimulate"
-                >
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiPageContentBody>
+            <EuiForm data-test-subj="painlessPlayground">
+              <EuiFormRow
+                label={
                   <FormattedMessage
-                    id="xpack.painlessPlayground.simulateButtonLabel"
-                    defaultMessage="Simulate"
+                    id="xpack.painlessPlayground.codeLabel"
+                    defaultMessage="Painless Code"
+                  />
+                }
+                fullWidth
+                data-test-subj="codeInput"
+              >
+                <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
+                  <CodeEditor
+                    languageId="painless"
+                    height={250}
+                    value={state.code}
+                    onChange={code => setState({ code })}
+                    options={{
+                      fontSize: 12,
+                      minimap: {
+                        enabled: false,
+                      },
+                      scrollBeyondLastLine: false,
+                      wordWrap: 'on',
+                      wrappingIndent: 'indent',
+                    }}
                   />
-                </EuiButton>
-                <EuiSpacer />
+                </div>
+              </EuiFormRow>
+              <EuiSpacer />
+              <EuiButton
+                fill
+                onClick={onSimulateClick}
+                isDisabled={state.code.trim() === ''}
+                data-test-subj="btnSimulate"
+              >
+                <FormattedMessage
+                  id="xpack.painlessPlayground.simulateButtonLabel"
+                  defaultMessage="Simulate"
+                />
+              </EuiButton>
+              <EuiSpacer />
+
+              {state.request && (
                 <EuiFormRow
                   label={
                     <FormattedMessage
                       id="xpack.painlessPlayground.outputLabel"
-                      defaultMessage="Output"
+                      defaultMessage="Request"
                     />
                   }
                   fullWidth
-                  data-test-subj="output"
+                  data-test-subj="request"
                 >
-                  <EuiPanel paddingSize="s">
+                  <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
                     <CodeEditor
                       languageId="json"
                       height={250}
-                      value={JSON.stringify(this.state.output, null, 2)}
+                      value={'POST /_scripts/painless/_execute\n' + state.request}
                       options={{
                         fontSize: 12,
                         minimap: {
@@ -132,13 +129,38 @@ export class PainlessPlayground extends React.Component<Props, State> {
                         },
                       }}
                     />
-                  </EuiPanel>
+                  </div>
                 </EuiFormRow>
-              </EuiForm>
-            </EuiPageContentBody>
-          </EuiPageContent>
-        </EuiPageBody>
-      </EuiPage>
-    );
-  }
+              )}
+
+              <EuiFormRow
+                label={
+                  <FormattedMessage
+                    id="xpack.painlessPlayground.outputLabel"
+                    defaultMessage="Response"
+                  />
+                }
+                fullWidth
+                data-test-subj="response"
+              >
+                <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
+                  <CodeEditor
+                    languageId="json"
+                    height={250}
+                    value={state.response || ''}
+                    options={{
+                      fontSize: 12,
+                      minimap: {
+                        enabled: false,
+                      },
+                    }}
+                  />
+                </div>
+              </EuiFormRow>
+            </EuiForm>
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
 }
diff --git a/x-pack/legacy/plugins/painless_playground/public/register.ts b/x-pack/legacy/plugins/painless_playground/public/register.ts
index 6cb55d736b96f..01789fdc55cfd 100644
--- a/x-pack/legacy/plugins/painless_playground/public/register.ts
+++ b/x-pack/legacy/plugins/painless_playground/public/register.ts
@@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 import { npSetup, npStart } from 'ui/new_platform';
+import { registerPainless } from './register_painless';
 
 npSetup.plugins.dev_tools.register({
   order: 7,
@@ -19,6 +20,7 @@ npSetup.plugins.dev_tools.register({
   disabled: false,
   tooltipContent: xpackInfo.get('features.painless_playground.message'),
   async mount(context, { element }) {
+    registerPainless();
     /**
     const licenseCheck = {
       showPage: xpackInfo.get('features.painless_playground.enableLink'),
diff --git a/x-pack/legacy/plugins/painless_playground/public/register_painless.ts b/x-pack/legacy/plugins/painless_playground/public/register_painless.ts
new file mode 100644
index 0000000000000..700e6d93dad2a
--- /dev/null
+++ b/x-pack/legacy/plugins/painless_playground/public/register_painless.ts
@@ -0,0 +1,182 @@
+/*
+ * 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 * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export const LANGUAGE_ID = 'painless';
+
+/**
+ * Extends the default type for a Monarch language so we can use
+ * attribute references (like @keywords to reference the keywords list)
+ * in the defined tokenizer
+ */
+interface Language extends monaco.languages.IMonarchLanguage {
+  default: string;
+  brackets: any;
+  keywords: string[];
+  symbols: RegExp;
+  escapes: RegExp;
+  digits: RegExp;
+  primitives: string[];
+  octaldigits: RegExp;
+  binarydigits: RegExp;
+  constants: string[];
+  operators: string[];
+}
+
+function getPainlessLanguage() {
+  return {
+    default: '',
+    // painless does not use < >, so we define our own
+    brackets: [
+      ['{', '}', 'delimiter.curly'],
+      ['[', ']', 'delimiter.square'],
+      ['(', ')', 'delimiter.parenthesis'],
+    ],
+    keywords: [
+      'if',
+      'in',
+      'else',
+      'while',
+      'do',
+      'for',
+      'continue',
+      'break',
+      'return',
+      'new',
+      'try',
+      'catch',
+      'throw',
+      'this',
+      'instanceof',
+    ],
+    primitives: ['void', 'boolean', 'byte', 'short', 'char', 'int', 'long', 'float', 'double'],
+    constants: ['true', 'false'],
+    operators: [
+      '=',
+      '>',
+      '<',
+      '!',
+      '~',
+      '?',
+      '?:',
+      '?.',
+      ':',
+      '==',
+      '===',
+      '<=',
+      '>=',
+      '!=',
+      '!==',
+      '&&',
+      '||',
+      '++',
+      '--',
+      '+',
+      '-',
+      '*',
+      '/',
+      '&',
+      '|',
+      '^',
+      '%',
+      '<<',
+      '>>',
+      '>>>',
+      '+=',
+      '-=',
+      '*=',
+      '/=',
+      '&=',
+      '|=',
+      '^=',
+      '%=',
+      '<<=',
+      '>>=',
+      '>>>=',
+      '->',
+      '::',
+      '=~',
+      '==~',
+    ],
+    symbols: /[=><!~?:&|+\-*\/^%]+/,
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+    digits: /\d+(_+\d+)*/,
+    octaldigits: /[0-7]+(_+[0-7]+)*/,
+    binarydigits: /[0-1]+(_+[0-1]+)*/,
+    hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
+    tokenizer: {
+      root: [
+        // identifiers and keywords
+        [
+          /[a-zA-Z_][\w]*/,
+          {
+            cases: {
+              '@keywords': 'keyword',
+              '@primitives': 'type',
+              '@constants': 'constant',
+              '@default': 'identifier',
+            },
+          },
+        ],
+        // whitespace
+        [/[ \t\r\n]+/, '@whitespace'],
+        // comments
+        // [/\/\*/, 'comment', '@comment'],
+        [/\/\/.*$/, 'comment'],
+        // brackets
+        [/[{}()\[\]]/, '@brackets'],
+        // operators
+        [
+          /@symbols/,
+          {
+            cases: {
+              '@operators': 'operators',
+              '@default': '',
+            },
+          },
+        ],
+        // numbers
+        [/(@digits)[eE]([\-+]?(@digits))?[fFdD]?/, 'number.float'],
+        [/(@digits)\.(@digits)([eE][\-+]?(@digits))?[fFdD]?/, 'number.float'],
+        [/0[xX](@hexdigits)[Ll]?/, 'number.hex'],
+        [/0(@octaldigits)[Ll]?/, 'number.octal'],
+        [/0[bB](@binarydigits)[Ll]?/, 'number.binary'],
+        [/(@digits)[fFdD]/, 'number.float'],
+        [/(@digits)[lL]?/, 'number'],
+        // delimiter: after numbers due to conflict with decimals and dot
+        [/[;,.]/, 'delimiter'],
+        // strings double quoted
+        [/"([^"\\]|\\.)*$/, 'string.invalid'], // string without termination
+        [/"/, 'string', '@string_dq'],
+        // strings single quoted
+        [/'([^'\\]|\\.)*$/, 'string.invalid'], // string without termination
+        [/'/, 'string', '@string_sq'],
+      ],
+      comment: [
+        [/[^\/*]+/, 'comment'],
+        [/\*\//, 'comment', '@pop'],
+        [/[\/*]/, 'comment'],
+      ],
+      string_dq: [
+        [/[^\\"]+/, 'string'],
+        [/@escapes/, 'string.escape'],
+        [/\\./, 'string.escape.invalid'],
+        [/"/, 'string', '@pop'],
+      ],
+      string_sq: [
+        [/[^\\']+/, 'string'],
+        [/@escapes/, 'string.escape'],
+        [/\\./, 'string.escape.invalid'],
+        [/'/, 'string', '@pop'],
+      ],
+    },
+  } as Language;
+}
+
+export function registerPainless() {
+  monaco.languages.register({ id: LANGUAGE_ID });
+  monaco.languages.setMonarchTokensProvider(LANGUAGE_ID, getPainlessLanguage());
+}