From 2b3d366f7c29953b8e071962322881b680f760ae Mon Sep 17 00:00:00 2001
From: AJ West <ajwest@gmail.com>
Date: Sat, 8 Dec 2018 16:53:24 -0500
Subject: [PATCH 1/2] Allow backslash escaping in custom variables

---
 public/app/features/templating/custom_variable.ts         | 5 +++--
 public/app/features/templating/partials/editor.html       | 2 +-
 public/app/features/templating/specs/variable_srv.test.ts | 6 ++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts
index bc946458705..2e12f77f947 100644
--- a/public/app/features/templating/custom_variable.ts
+++ b/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() };
     });
 
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index 15984eba7d6..78733b3b2be 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/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>
diff --git a/public/app/features/templating/specs/variable_srv.test.ts b/public/app/features/templating/specs/variable_srv.test.ts
index 3df6ccb8b5b..47522073fb2 100644
--- a/public/app/features/templating/specs/variable_srv.test.ts
+++ b/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');
     });
   });
 

From 6c95acc8379b328e3bc3c6e0b96b134c7c0afb12 Mon Sep 17 00:00:00 2001
From: AJ West <ajwest@gmail.com>
Date: Sat, 8 Dec 2018 18:23:08 -0500
Subject: [PATCH 2/2] Switch to global match for full browser support of
 escaped custom vars

---
 public/app/features/templating/custom_variable.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts
index 2e12f77f947..c98048f04ca 100644
--- a/public/app/features/templating/custom_variable.ts
+++ b/public/app/features/templating/custom_variable.ts
@@ -39,7 +39,7 @@ export class CustomVariable implements Variable {
 
   updateOptions() {
     // extract options in comma separated string (use backslash to escape wanted commas)
-    this.options = _.map(this.query.split(/(?<!\\),+/), text => {
+    this.options = _.map(this.query.match(/(?:\\,|[^,])+/g), text => {
       text = text.replace('\\,', ',');
       return { text: text.trim(), value: text.trim() };
     });