Allow backslash escaping in custom variables

public/app/features/templating/custom_variable.ts

@@ -38,8 +38,9 @@ export class CustomVariable implements Variable {
   }
 
   updateOptions() {
-    // extract options in comma separated string
-    this.options = _.map(this.query.split(/[,]+/), text => {
+    // extract options in comma separated string (use backslash to escape wanted commas)
+    this.options = _.map(this.query.split(/(?<!\\),+/), text => {
+      text = text.replace('\\,', ',');
       return { text: text.trim(), value: text.trim() };
     });
 

public/app/features/templating/partials/editor.html

@@ -151,7 +151,7 @@
 			<h5 class="section-heading">Custom Options</h5>
 			<div class="gf-form">
 				<span class="gf-form-label width-14">Values separated by comma</span>
-				<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"
+				<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue, escaped\,value"
 				 required></input>
 			</div>
 		</div>

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

@@ -493,15 +493,17 @@ describe('VariableSrv', function(this: any) {
     scenario.setup(() => {
       scenario.variableModel = {
         type: 'custom',
-        query: 'hej, hop, asd',
+        query: 'hej, hop, asd, escaped\\,var',
         name: 'test',
       };
     });
 
     it('should update options array', () => {
-      expect(scenario.variable.options.length).toBe(3);
+      expect(scenario.variable.options.length).toBe(4);
       expect(scenario.variable.options[0].text).toBe('hej');
       expect(scenario.variable.options[1].value).toBe('hop');
+      expect(scenario.variable.options[2].value).toBe('asd');
+      expect(scenario.variable.options[3].value).toBe('escaped,var');
     });
   });