Explore: fix URL encoding on load (#70503)

public/app/features/explore/hooks/useStateSync/index.test.tsx

@@ -129,7 +129,7 @@ describe('useStateSync', () => {
     const { location, waitForNextUpdate, store } = setup({
       queryParams: {
         panes: JSON.stringify({
-          one: { datasource: 'loki-uid', queries: [{ datasource: { name: 'loki', uid: 'loki-uid' } }] },
+          one: { datasource: 'loki-uid', queries: [{ datasource: { name: 'loki', uid: 'loki-uid' }, refId: '1+2' }] },
           two: { datasource: 'elastic-uid', queries: [{ datasource: { name: 'elastic', uid: 'elastic-uid' } }] },
         }),
         schemaVersion: 1,
@@ -145,6 +145,13 @@ describe('useStateSync', () => {
     const search = location.getSearchObject();
     expect(search.panes).toBeDefined();
     expect(Object.keys(store.getState().explore.panes)).toHaveLength(2);
+
+    // check if the URL is properly encoded when finishing rendering the hook. (this would '1 2' otherwise)
+    const panes = location.getSearch().get('panes');
+    expect(panes).not.toBeNull();
+    if (panes !== null) {
+      expect(JSON.parse(panes)['one'].queries[0].refId).toBe('1+2');
+    }
   });
 
   it('inits with a default query from the root level datasource when there are no valid queries in the URL', async () => {

public/app/features/explore/hooks/useStateSync/index.ts

@@ -238,15 +238,20 @@ export function useStateSync(params: ExploreQueryParams) {
 
         initState.current = 'done';
 
-        location.replace({
-          search: Object.entries({
+        // we need to use partial here beacuse replace doesn't encode the query params.
+        location.partial(
+          {
+            // partial doesn't remove other parameters, so we delete all the current one before adding the new ones.
+            ...Object.keys(location.getSearchObject()).reduce<Record<string, unknown>>((acc, key) => {
+              acc[key] = undefined;
+              return acc;
+            }, {}),
             panes: JSON.stringify(newParams.panes),
             schemaVersion: urlState.schemaVersion,
             orgId,
-          })
-            .map(([key, value]) => `${key}=${value}`)
-            .join('&'),
-        });
+          },
+          true
+        );
       });
     }