From 4d1da2ecd2bedfa4c9e6600460c4b9fc6b89777d Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 22 Nov 2022 14:37:18 +0200
Subject: [PATCH] improved toQueryParams version, fixed infinite reload on
 Incidents due to using 'replace' instead of 'partial'

---
 .../src/pages/incidents/Incidents.tsx         |  6 ++++--
 grafana-plugin/src/utils/LocationHelper.ts    | 20 ++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index a72fdc05..ac6df386 100644
--- a/grafana-plugin/src/pages/incidents/Incidents.tsx
+++ b/grafana-plugin/src/pages/incidents/Incidents.tsx
@@ -150,7 +150,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
   fetchIncidentData = (filters: IncidentsFiltersType, isOnMount: boolean) => {
     const { store } = this.props;
     store.alertGroupStore.updateIncidentFilters(filters, isOnMount); // this line fetches incidents
-    LocationHelper.update({ page: 'incidents', ...store.alertGroupStore.incidentFilters }, 'replace');
+    LocationHelper.update({ page: 'incidents', ...store.alertGroupStore.incidentFilters }, 'partial');
   };
 
   onChangeCursor = (cursor: string, direction: 'prev' | 'next') => {
@@ -579,7 +579,9 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
   }
 
   setPollingInterval(filters: IncidentsFiltersType = this.state.filters, isOnMount = false) {
-    this.pollingIntervalId = setInterval(() => this.fetchIncidentData(filters, isOnMount), POLLING_NUM_SECONDS * 1000);
+    this.pollingIntervalId = setInterval(() => {
+      this.fetchIncidentData(filters, isOnMount);
+    }, POLLING_NUM_SECONDS * 1000);
   }
 }
 
diff --git a/grafana-plugin/src/utils/LocationHelper.ts b/grafana-plugin/src/utils/LocationHelper.ts
index ce233afd..27bfe38f 100644
--- a/grafana-plugin/src/utils/LocationHelper.ts
+++ b/grafana-plugin/src/utils/LocationHelper.ts
@@ -10,23 +10,25 @@ class LocationHelper {
     const sortedExistingParams = sort(queryParams);
     const sortedNewParams = sort(params);
 
-    if (getPathFromQueryParams(sortedExistingParams) !== getPathFromQueryParams(sortedNewParams)) {
+    if (toQueryString(sortedExistingParams) !== toQueryString(sortedNewParams)) {
       if (method === 'partial') {
         locationService.partial(params);
       } else {
-        locationService[method](getPathFromQueryParams(sortedNewParams));
+        locationService[method](toQueryString(sortedNewParams));
       }
     }
   }
 }
 
-function getPathFromQueryParams(queryParams) {
-  return Object.keys(queryParams)
-    .map((key) => `${key}=${queryParams[key]}`)
-    .reduce((result, param, index) => {
-      const delimitator = `${index > 0 ? '&' : ''}`;
-      return `${result}${delimitator}${param}`;
-    }, '?');
+function toQueryString(queryParams: KeyValue) {
+  const urlParams = new URLSearchParams(queryParams);
+  for (const [key, value] of Object.entries(queryParams)) {
+    if (Array.isArray(value)) {
+      urlParams.delete(key);
+      value.forEach((v) => urlParams.append(key, v));
+    }
+  }
+  return urlParams.toString();
 }
 
 function sort(object: KeyValue) {