Move the variable regex to constants to make sure we use the same reg… (#13801)

public/app/features/templating/specs/variable.test.ts

@@ -22,6 +22,11 @@ describe('containsVariable', () => {
       expect(contains).toBe(true);
     });
 
+    it('should find it with [[var:option]] syntax', () => {
+      const contains = containsVariable('this.[[test:csv]].filters', 'test');
+      expect(contains).toBe(true);
+    });
+
     it('should find it when part of segment', () => {
       const contains = containsVariable('metrics.$env.$group-*', 'group');
       expect(contains).toBe(true);
@@ -36,6 +41,16 @@ describe('containsVariable', () => {
       const contains = containsVariable('asd', 'asd2.$env', 'env');
       expect(contains).toBe(true);
     });
+
+    it('should find it with ${var} syntax', () => {
+      const contains = containsVariable('this.${test}.filters', 'test');
+      expect(contains).toBe(true);
+    });
+
+    it('should find it with ${var:option} syntax', () => {
+      const contains = containsVariable('this.${test:csv}.filters', 'test');
+      expect(contains).toBe(true);
+    });
   });
 });
 

public/app/features/templating/template_srv.ts

@@ -1,5 +1,6 @@
 import kbn from 'app/core/utils/kbn';
 import _ from 'lodash';
+import { variableRegex } from 'app/features/templating/variable';
 
 function luceneEscape(value) {
   return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, '\\$1');
@@ -8,13 +9,7 @@ function luceneEscape(value) {
 export class TemplateSrv {
   variables: any[];
 
-  /*
-   * This regex matches 3 types of variable reference with an optional format specifier
-   * \$(\w+)                          $var1
-   * \[\[([\s\S]+?)(?::(\w+))?\]\]    [[var2]] or [[var2:fmt2]]
-   * \${(\w+)(?::(\w+))?}             ${var3} or ${var3:fmt3}
-   */
-  private regex = /\$(\w+)|\[\[([\s\S]+?)(?::(\w+))?\]\]|\${(\w+)(?::(\w+))?}/g;
+  private regex = variableRegex;
   private index = {};
   private grafanaVariables = {};
   private builtIns = {};

public/app/features/templating/variable.ts

@@ -1,6 +1,19 @@
-import kbn from 'app/core/utils/kbn';
 import { assignModelProperties } from 'app/core/utils/model_utils';
 
+/*
+ * This regex matches 3 types of variable reference with an optional format specifier
+ * \$(\w+)                          $var1
+ * \[\[([\s\S]+?)(?::(\w+))?\]\]    [[var2]] or [[var2:fmt2]]
+ * \${(\w+)(?::(\w+))?}             ${var3} or ${var3:fmt3}
+ */
+export const variableRegex = /\$(\w+)|\[\[([\s\S]+?)(?::(\w+))?\]\]|\${(\w+)(?::(\w+))?}/g;
+
+// Helper function since lastIndex is not reset
+export const variableRegexExec = (variableString: string) => {
+  variableRegex.lastIndex = 0;
+  return variableRegex.exec(variableString);
+};
+
 export interface Variable {
   setValue(option);
   updateOptions();
@@ -14,15 +27,16 @@ export let variableTypes = {};
 export { assignModelProperties };
 
 export function containsVariable(...args: any[]) {
-  let variableName = args[args.length - 1];
-  let str = args[0] || '';
-
-  for (let i = 1; i < args.length - 1; i++) {
-    str += ' ' + args[i] || '';
-  }
+  const variableName = args[args.length - 1];
+  const variableString = args.slice(0, -1).join(' ');
+  const matches = variableString.match(variableRegex);
+  const isMatchingVariable =
+    matches !== null
+      ? matches.find(match => {
+          const varMatch = variableRegexExec(match);
+          return varMatch !== null && varMatch.indexOf(variableName) > -1;
+        })
+      : false;
 
-  variableName = kbn.regexEscape(variableName);
-  const findVarRegex = new RegExp('\\$(' + variableName + ')(?:\\W|$)|\\[\\[(' + variableName + ')\\]\\]', 'g');
-  const match = findVarRegex.exec(str);
-  return match !== null;
+  return !!isMatchingVariable;
 }