URL: Encode certain special characters (#51806)

* refactor: add encoding of certain special characters in url

* refactor: add related test

packages/grafana-data/src/utils/url.test.ts

@@ -13,9 +13,6 @@ describe('toUrlParams', () => {
     });
     expect(url).toBe('server=backend-01&hasSpace=has%20space&many=1&many=2&many=3&true&number=20&isNull=&isUndefined=');
   });
-});
-
-describe('toUrlParams', () => {
   it('should encode the same way as angularjs', () => {
     const url = urlUtil.toUrlParams({
       server: ':@',
@@ -30,6 +27,12 @@ describe('toUrlParams', () => {
     });
     expect(url).toBe('bool1&bool2=false');
   });
+  it("should encode the following special characters [!'()*]", () => {
+    const url = urlUtil.toUrlParams({
+      datasource: "testDs[!'()*]",
+    });
+    expect(url).toBe('datasource=testDs%5B%21%27%28%29%2A%5D');
+  });
 });
 
 describe('parseKeyValue', () => {

packages/grafana-data/src/utils/url.ts

@@ -32,7 +32,10 @@ function encodeURIComponentAsAngularJS(val: string, pctEncodeSpaces?: boolean) {
     .replace(/%24/g, '$')
     .replace(/%2C/gi, ',')
     .replace(/%3B/gi, ';')
-    .replace(/%20/g, pctEncodeSpaces ? '%20' : '+');
+    .replace(/%20/g, pctEncodeSpaces ? '%20' : '+')
+    .replace(/[!'()*]/g, function (c) {
+      return '%' + c.charCodeAt(0).toString(16).toUpperCase();
+    });
 }
 
 function toUrlParams(a: any) {