[Grok Debugger] Adding syntax highlighting for grok expressions (#18572)

* Adding basic syntax highlighting for grok expressions

* Use EUI color palette

* Handle regex tokens, escaped and unescaped

* Return token for escaped content

* Add functional test

* Using higher-contrast colors

* Removing comment I used for developing the highlight rules

* Using object destructuring

* Removing unnecessary method

x-pack/plugins/grokdebugger/public/lib/ace/grok_highlight_rules.js

@@ -0,0 +1,50 @@
+/*
+ * 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 'ace';
+
+const { TextHighlightRules } = ace.acequire("ace/mode/text_highlight_rules");
+
+export class GrokHighlightRules extends TextHighlightRules {
+  constructor() {
+    super();
+    this.$rules = {
+      start: [
+        {
+          token: [
+            "grokStart",
+            "grokPatternName",
+            "grokSeparator",
+            "grokFieldName",
+            "grokEnd"
+          ],
+          regex: "(%{)([^:]+)(:)([^:]+)(})"
+        },
+        {
+          token: [
+            "grokStart",
+            "grokPatternName",
+            "grokSeparator",
+            "grokFieldName",
+            "grokSeparator",
+            "grokFieldType",
+            "grokEnd"
+          ],
+          regex: "(%{)([^:]+)(:)([^:]+)(:)([^:]+)(})"
+        },
+        {
+          token: (escapeToken, /* regexToken */) => {
+            if (escapeToken) {
+              return [ 'grokEscape', 'grokEscaped' ];
+            }
+            return 'grokRegex';
+          },
+          regex: "(\\\\)?([\\[\\]\\(\\)\\?\\:\\|])"
+        },
+      ]
+    };
+  }
+}

x-pack/plugins/grokdebugger/public/lib/ace/grok_mode.js

@@ -0,0 +1,17 @@
+/*
+ * 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 'ace';
+import { GrokHighlightRules } from './grok_highlight_rules';
+
+const TextMode = ace.acequire("ace/mode/text").Mode;
+
+export class GrokMode extends TextMode {
+  constructor() {
+    super();
+    this.HighlightRules = GrokHighlightRules;
+  }
+}

x-pack/plugins/grokdebugger/public/lib/ace/index.js

@@ -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 { GrokMode } from './grok_mode';

x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.less

@@ -18,4 +18,25 @@ grokdebugger {
   .grokdebugger-simulate-button {
     margin-bottom: 10px;
   }
+
+  .ace_grokStart,
+  .ace_grokEnd,
+  .ace_grokSeparator,
+  .ace_grokEscape {
+    color: #999999; // euiColorMediumShade
+  }
+
+  .ace_grokPatternName {
+    color: #017F75; // euiColorSecondary
+  }
+
+  .ace_grokFieldName,
+  .ace_grokRegex {
+    color: #0079A5; // euiColorPrimary
+  }
+
+  .ace_grokFieldType {
+    color: #0079A5; // euiColorPrimary
+    font-style: italic;
+  }
 }

x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js

@@ -7,6 +7,7 @@
 import { uiModules } from 'ui/modules';
 import template from './pattern_input.html';
 import './pattern_input.less';
+import { GrokMode } from '../../../../lib/ace';
 
 const app = uiModules.get('xpack/grokdebugger');
 
@@ -34,6 +35,7 @@ app.directive('patternInput', function () {
             maxLines: 10
           });
           editor.$blockScrolling = Infinity;
+          editor.getSession().setMode(new GrokMode());
         };
       }
     }