fix: multi valued query variables did not work correctly, fixes #10539

public/app/stores/ViewStore/ViewStore.jest.ts

@@ -0,0 +1,26 @@
+import { ViewStore } from './ViewStore';
+import { toJS } from 'mobx';
+
+describe('ViewStore', () => {
+  let store;
+
+  beforeAll(() => {
+    store = ViewStore.create({
+      path: '',
+      query: {},
+    });
+  });
+
+  it('Can update path and query', () => {
+    store.updatePathAndQuery('/hello', { key: 1, otherParam: 'asd' });
+    expect(store.path).toBe('/hello');
+    expect(store.query.get('key')).toBe(1);
+    expect(store.currentUrl).toBe('/hello?key=1&otherParam=asd');
+  });
+
+  it('Query can contain arrays', () => {
+    store.updatePathAndQuery('/hello', { values: ['A', 'B'] });
+    expect(store.query.get('values').toJS()).toMatchObject(['A', 'B']);
+    expect(store.currentUrl).toBe('/hello?values=A&values=B');
+  });
+});

public/app/stores/ViewStore/ViewStore.ts

@@ -1,15 +1,9 @@
 import { types } from 'mobx-state-tree';
+import { toJS } from 'mobx';
+import { toUrlParams } from 'app/core/utils/url';
 
-const QueryValueType = types.union(types.string, types.boolean, types.number);
-const urlParameterize = queryObj => {
-  const keys = Object.keys(queryObj);
-  const newQuery = keys.reduce((acc: string, key: string, idx: number) => {
-    const preChar = idx === 0 ? '?' : '&';
-    return acc + preChar + key + '=' + queryObj[key];
-  }, '');
-
-  return newQuery;
-};
+const QueryInnerValueType = types.union(types.string, types.boolean, types.number);
+const QueryValueType = types.union(QueryInnerValueType, types.array(QueryInnerValueType));
 
 export const ViewStore = types
   .model({
@@ -21,7 +15,7 @@ export const ViewStore = types
       let path = self.path;
 
       if (self.query.size) {
-        path += urlParameterize(self.query.toJS());
+        path += '?' + toUrlParams(toJS(self.query));
       }
       return path;
     },