Explore: Fix encoding of internal URLs (#36919)

* Encode internal explore url

* Fix tests

* Fix comma

packages/grafana-data/src/field/fieldOverrides.test.ts

@@ -644,7 +644,7 @@ describe('getLinksSupplier', () => {
     expect(links[0]).toEqual(
       expect.objectContaining({
         title: 'testDS',
-        href: '/explore?left={"datasource":"testDS","queries":["12345"]}',
+        href: `/explore?left=${encodeURIComponent('{"datasource":"testDS","queries":["12345"]}')}`,
         onClick: undefined,
       })
     );

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

@@ -31,7 +31,7 @@ describe('mapInternalLinkToExplore', () => {
     expect(link).toEqual(
       expect.objectContaining({
         title: 'dsName',
-        href: '/explore?left={"datasource":"dsName","queries":[{"query":"12344"}]}',
+        href: `/explore?left=${encodeURIComponent('{"datasource":"dsName","queries":[{"query":"12344"}]}')}`,
         onClick: undefined,
       })
     );

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

@@ -67,11 +67,13 @@ export function mapInternalLinkToExplore(options: LinkToExploreOptions): LinkMod
  */
 function generateInternalHref<T extends DataQuery = any>(datasourceName: string, query: T, range: TimeRange): string {
   return locationUtil.assureBaseUrl(
-    `/explore?left=${serializeStateToUrlParam({
-      range: range.raw,
-      datasource: datasourceName,
-      queries: [query],
-    })}`
+    `/explore?left=${encodeURIComponent(
+      serializeStateToUrlParam({
+        range: range.raw,
+        datasource: datasourceName,
+        queries: [query],
+      })
+    )}`
   );
 }