Bugfix/code mirror tickscript (#5225)

* Match only uppercase TRUE and FALSE as atoms

* Add AND and OR as operators

* Allow variables to begin with capital letters

* Add optional @ to recognize user defined function calls as variables

* Remove multiline comment state add multiline string states

* Add dbrp keyword

* Update changelog

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## v1.7.13
 ### Bug Fixes
 1. [#5217](https://github.com/influxdata/chronograf/pull/5217): Fix scroll to row bug on table graphs
+1. [#5170](https://github.com/influxdata/chronograf/pull/5170): Wrap inline commas in quotes to distinguish from csv delimiters
+1. [#5225](https://github.com/influxdata/chronograf/pull/5225): Fix tickscript editor syntax coloring
 
 ### Features
 

ui/src/shared/constants/codeMirrorModes.ts

@@ -104,26 +104,29 @@ export const modeTickscript = {
   // The start state contains the rules that are intially used
   start: [
     // The regex matches the token, the token property contains the type
+    // A next property will cause the mode to move to a different state
     {
-      regex: /"(?:[^\\]|\\.)*?(?:"|$)/,
+      regex: /"/,
       token: 'string.double',
+      next: 'stringdouble',
     },
     {
-      regex: /'(?:[^\\]|\\.)*?(?:'|$)/,
+      regex: /'/,
       token: 'string.single',
+      next: 'stringsingle',
     },
     {
-      regex: /(function)(\s+)([a-z$][\w$]*)/,
+      regex: /(function)(\s+)([A-Za-z][\w]*)/,
       token: ['keyword', null, 'variable-2'],
     },
     // Rules are matched in the order in which they appear, so there is
     // no ambiguity between this one and the one above
     {
-      regex: /(?:var|return|if|for|while|else|do|this|stream|batch|influxql|lambda)/,
+      regex: /(?:var|return|dbrp|if|for|while|else|do|this|stream|batch|influxql|lambda)/,
       token: 'keyword',
     },
     {
-      regex: /true|false|null|undefined|TRUE|FALSE/,
+      regex: /TRUE|FALSE/,
       token: 'atom',
     },
     {
@@ -138,31 +141,35 @@ export const modeTickscript = {
       regex: /\/(?:[^\\]|\\.)*?\//,
       token: 'variable-3',
     },
-    // A next property will cause the mode to move to a different state
     {
-      regex: /\/\*/,
+      regex: /AND|OR|[-~+\/*=<>!]+/,
-      token: 'comment',
-      next: 'comment',
-    },
-    {
-      regex: /[-+\/*=<>!]+/,
       token: 'operator',
     },
     {
-      regex: /[a-z$][\w$]*/,
+      regex: /[@]?[A-Za-z][\w$]*/,
       token: 'variable',
     },
   ],
-  // The multi-line comment state.
+  stringdouble: [
-  comment: [
     {
-      regex: /.*?\*\//,
+      regex: /"/,
-      token: 'comment',
+      token: 'string.double',
       next: 'start',
     },
     {
-      regex: /.*/,
+      regex: /[^"]/,
-      token: 'comment',
+      token: 'string.double',
+    },
+  ],
+  stringsingle: [
+    {
+      regex: /'/,
+      token: 'string.single',
+      next: 'start',
+    },
+    {
+      regex: /[^']/,
+      token: 'string.single',
     },
   ],
   // The meta property contains global information about the mode. It
@@ -170,7 +177,6 @@ export const modeTickscript = {
   // all modes, and also directives like dontIndentStates, which are
   // specific to simple modes.
   meta: {
-    dontIndentStates: ['comment'],
     lineComment: '//',
   },
 }