Variable: Support more variable formatting. (#21622)

* Support more variable formatting.
Co-Authored-By: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
Co-authored-by: Arve Knudsen <arve.knudsen@gmail.com>

docs/sources/reference/templating.md

@@ -114,6 +114,33 @@ String to interpolate: '${servers:percentencode}'
 Interpolation result: 'foo%28%29bar%20BAZ%2Ctest2'
 Interpolation result: 'foo%28%29bar%20BAZ%2Ctest2'
 ```
 ```
 
 
+### Singlequote
+Formats single- and multi-valued variables into a comma-separated string, escapes `'` in each value by `\'` and quotes each value with `'`.
+
+```bash
+servers = ['test1', 'test2']
+String to interpolate: '${servers:singlequote}'
+Interpolation result: "'test1','test2'"
+```
+
+### Doublequote
+Formats single- and multi-valued variables into a comma-separated string, escapes `"` in each value by `\"` and quotes each value with `"`.
+
+```bash
+servers = ['test1', 'test2']
+String to interpolate: '${servers:doublequote}'
+Interpolation result: '"test1","test2"'
+```
+
+### Sqlstring
+Formats single- and multi-valued variables into a comma-separated string, escapes `'` in each value by `''` and quotes each value with `'`.
+
+```bash
+servers = ["test'1", "test2"]
+String to interpolate: '${servers:sqlstring}'
+Interpolation result: "'test''1','test2'"
+```
+
 Test the formatting options on the [Grafana Play site](https://play.grafana.org/d/cJtIfcWiz/template-variable-formatting-options?orgId=1).
 Test the formatting options on the [Grafana Play site](https://play.grafana.org/d/cJtIfcWiz/template-variable-formatting-options?orgId=1).
 
 
 If any invalid formatting option is specified, then `glob` is the default/fallback option.
 If any invalid formatting option is specified, then `glob` is the default/fallback option.

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

@@ -338,6 +338,36 @@ describe('templateSrv', () => {
       const result = _templateSrv.formatValue('Gi3/14', 'regex');
       const result = _templateSrv.formatValue('Gi3/14', 'regex');
       expect(result).toBe('Gi3\\/14');
       expect(result).toBe('Gi3\\/14');
     });
     });
+
+    it('single value and singlequote format should render string with value enclosed in single quotes', () => {
+      const result = _templateSrv.formatValue('test', 'singlequote');
+      expect(result).toBe("'test'");
+    });
+
+    it('multi value and singlequote format should render string with values enclosed in single quotes', () => {
+      const result = _templateSrv.formatValue(['test', "test'2"], 'singlequote');
+      expect(result).toBe("'test','test\\'2'");
+    });
+
+    it('single value and doublequote format should render string with value enclosed in double quotes', () => {
+      const result = _templateSrv.formatValue('test', 'doublequote');
+      expect(result).toBe('"test"');
+    });
+
+    it('multi value and doublequote format should render string with values enclosed in double quotes', () => {
+      const result = _templateSrv.formatValue(['test', 'test"2'], 'doublequote');
+      expect(result).toBe('"test","test\\"2"');
+    });
+
+    it('single value and sqlstring format should render string with value enclosed in single quotes', () => {
+      const result = _templateSrv.formatValue("test'value", 'sqlstring');
+      expect(result).toBe(`'test''value'`);
+    });
+
+    it('multi value and sqlstring format should render string with values enclosed in single quotes', () => {
+      const result = _templateSrv.formatValue(['test', "test'value2"], 'sqlstring');
+      expect(result).toBe(`'test','test''value2'`);
+    });
   });
   });
 
 
   describe('can check if variable exists', () => {
   describe('can check if variable exists', () => {

public/app/features/templating/template_srv.ts

@@ -195,6 +195,30 @@ export class TemplateSrv {
         }
         }
         return this.encodeURIComponentStrict(value);
         return this.encodeURIComponentStrict(value);
       }
       }
+      case 'singlequote': {
+        // escape single quotes with backslash
+        const regExp = new RegExp(`'`, 'g');
+        if (_.isArray(value)) {
+          return _.map(value, v => `'${_.replace(v, regExp, `\\'`)}'`).join(',');
+        }
+        return `'${_.replace(value, regExp, `\\'`)}'`;
+      }
+      case 'doublequote': {
+        // escape double quotes with backslash
+        const regExp = new RegExp('"', 'g');
+        if (_.isArray(value)) {
+          return _.map(value, v => `"${_.replace(v, regExp, '\\"')}"`).join(',');
+        }
+        return `"${_.replace(value, regExp, '\\"')}"`;
+      }
+      case 'sqlstring': {
+        // escape single quotes by pairing them
+        const regExp = new RegExp(`'`, 'g');
+        if (_.isArray(value)) {
+          return _.map(value, v => `'${_.replace(v, regExp, "''")}'`).join(',');
+        }
+        return `'${_.replace(value, regExp, "''")}'`;
+      }
       default: {
       default: {
         if (_.isArray(value) && value.length > 1) {
         if (_.isArray(value) && value.length > 1) {
           return '{' + value.join(',') + '}';
           return '{' + value.join(',') + '}';