Fix restoration of ad-hoc variable value issue (#8057)

* Fix restoration of ad-hoc variable value issue

* Escape delimiters in ad-hoc variable URL

* Remove unnecessary newline

public/app/features/templating/adhoc_variable.ts

@@ -45,7 +45,9 @@ export class AdhocVariable implements Variable {
     }
     }
 
 
     this.filters = urlValue.map(item => {
     this.filters = urlValue.map(item => {
-      var values = item.split('|');
+      var values = item.split('|').map(value => {
+        return this.unescapeDelimiter(value);
+      });
       return {
       return {
         key: values[0],
         key: values[0],
         operator: values[1],
         operator: values[1],
@@ -58,10 +60,20 @@ export class AdhocVariable implements Variable {
 
 
   getValueForUrl() {
   getValueForUrl() {
     return this.filters.map(filter => {
     return this.filters.map(filter => {
-      return filter.key + '|' + filter.operator + '|' + filter.value;
+      return [filter.key, filter.operator, filter.value].map(value => {
+        return this.escapeDelimiter(value);
+      }).join('|');
     });
     });
   }
   }
 
 
+  escapeDelimiter(value) {
+    return value.replace('|', '__gfpipe');
+  }
+
+  unescapeDelimiter(value) {
+    return value.replace('__gfpipe', '|');
+  }
+
   setFilters(filters: any[]) {
   setFilters(filters: any[]) {
     this.filters = filters;
     this.filters = filters;
   }
   }

public/app/features/templating/specs/adhoc_variable_specs.ts

@@ -11,10 +11,11 @@ describe('AdhocVariable', function() {
         filters: [
         filters: [
           {key: 'key1', operator: '=', value: 'value1'},
           {key: 'key1', operator: '=', value: 'value1'},
           {key: 'key2', operator: '!=', value: 'value2'},
           {key: 'key2', operator: '!=', value: 'value2'},
+          {key: 'key3', operator: '=', value: 'value3a|value3b'},
         ]
         ]
       });
       });
       var urlValue = variable.getValueForUrl();
       var urlValue = variable.getValueForUrl();
-      expect(urlValue).to.eql(["key1|=|value1", "key2|!=|value2"]);
+      expect(urlValue).to.eql(["key1|=|value1", "key2|!=|value2", "key3|=|value3a__gfpipevalue3b"]);
     });
     });
 
 
   });
   });
@@ -23,7 +24,7 @@ describe('AdhocVariable', function() {
 
 
     it('should restore filters', function() {
     it('should restore filters', function() {
       var variable = new AdhocVariable({});
       var variable = new AdhocVariable({});
-      variable.setValueFromUrl(["key1|=|value1", "key2|!=|value2"]);
+      variable.setValueFromUrl(["key1|=|value1", "key2|!=|value2", "key3|=|value3a__gfpipevalue3b"]);
 
 
       expect(variable.filters[0].key).to.be('key1');
       expect(variable.filters[0].key).to.be('key1');
       expect(variable.filters[0].operator).to.be('=');
       expect(variable.filters[0].operator).to.be('=');
@@ -32,6 +33,10 @@ describe('AdhocVariable', function() {
       expect(variable.filters[1].key).to.be('key2');
       expect(variable.filters[1].key).to.be('key2');
       expect(variable.filters[1].operator).to.be('!=');
       expect(variable.filters[1].operator).to.be('!=');
       expect(variable.filters[1].value).to.be('value2');
       expect(variable.filters[1].value).to.be('value2');
+
+      expect(variable.filters[2].key).to.be('key3');
+      expect(variable.filters[2].operator).to.be('=');
+      expect(variable.filters[2].value).to.be('value3a|value3b');
     });
     });
 
 
   });
   });