TemplateSrv: Fix interpolating strings with object variables (#28171)

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

@@ -687,4 +687,35 @@ describe('templateSrv', () => {
       expect(target).toBe('2020-07');
       expect(target).toBe('2020-07');
     });
     });
   });
   });
+
+  describe('handle objects gracefully', () => {
+    beforeEach(() => {
+      initTemplateSrv([{ type: 'query', name: 'test', current: { value: { test: 'A' } } }]);
+    });
+
+    it('should not pass object to custom function', () => {
+      let passedValue: any = null;
+      _templateSrv.replace('this.${test}.filters', {}, (value: any) => {
+        passedValue = value;
+      });
+
+      expect(passedValue).toBe('[object Object]');
+    });
+  });
+
+  describe('handle objects gracefully and call toString if defined', () => {
+    beforeEach(() => {
+      const value = { test: 'A', toString: () => 'hello' };
+      initTemplateSrv([{ type: 'query', name: 'test', current: { value } }]);
+    });
+
+    it('should not pass object to custom function', () => {
+      let passedValue: any = null;
+      _templateSrv.replace('this.${test}.filters', {}, (value: any) => {
+        passedValue = value;
+      });
+
+      expect(passedValue).toBe('hello');
+    });
+  });
 });
 });

public/app/features/templating/template_srv.ts

@@ -112,6 +112,15 @@ export class TemplateSrv implements BaseTemplateSrv {
     // for some scopedVars there is no variable
     // for some scopedVars there is no variable
     variable = variable || {};
     variable = variable || {};
 
 
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    // if it's an object transform value to string
+    if (!Array.isArray(value) && typeof value === 'object') {
+      value = `${value}`;
+    }
+
     if (typeof format === 'function') {
     if (typeof format === 'function') {
       return format(value, variable, this.formatValue);
       return format(value, variable, this.formatValue);
     }
     }