Fix for Filters discarding the query param (#2155)

# What this PR does

Original escalation:
https://github.com/grafana/support-escalations/issues/6237

Now instead of always reading the values from local storage, we first
check for query params instead and then for local storage. On the first
render we skip re-updating the local storage, therefore if you visit
alert groups with `team 1` and `team 2`, while local storage had `team
3`, this will not overwrite the local storage but it **WILL** do so once
the teams value change in the dropdown.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed bug on Filters where team param from URL was discarded [#6237](https://github.com/grafana/support-escalations/issues/6237)
 - Fix receive channel filter in alert groups API [#2140](https://github.com/grafana/oncall/pull/2140)
 - Helm chart: Fix usage of `env` settings as map;
   Fix usage of `mariadb.auth.database` and `mariadb.auth.username` for MYSQL env variables by @alexintech [#2146](https://github.com/grafana/oncall/pull/2146)

grafana-plugin/src/containers/RemoteFilters/RemoteFilters.helpers.ts

@@ -10,12 +10,18 @@ const normalize = (value: any) => {
   return value;
 };
 
-export function parseFilters(query: { [key: string]: any }, filterOptions: FilterOption[]) {
-  const filters = filterOptions.filter((filterOption: FilterOption) => filterOption.name in query);
+export function parseFilters(
+  data: { [key: string]: any },
+  filterOptions: FilterOption[],
+  query: { [key: string]: any }
+) {
+  const filters = filterOptions.filter((filterOption: FilterOption) => filterOption.name in data);
 
   const values = filters.reduce((memo: any, filterOption: FilterOption) => {
-    const rawValue = query[filterOption.name];
+    const rawValue = query[filterOption.name] || data[filterOption.name]; // query takes priority over local storage
+
     let value: any = rawValue;
+
     if (filterOption.type === 'options' || filterOption.type === 'team_select') {
       if (!Array.isArray(rawValue)) {
         value = [rawValue];

grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx

@@ -69,17 +69,10 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
 
     const filterOptions = await filtersStore.updateOptionsForPage(page);
 
-    let { filters, values } = parseFilters({ ...query, ...filtersStore.globalValues }, filterOptions);
+    let { filters, values } = parseFilters({ ...query, ...filtersStore.globalValues }, filterOptions, query);
 
     if (isEmpty(values)) {
-      let newQuery = defaultFilters || { team: [] };
-      /*  if (filtersStore.values[page]) {
-        newQuery = { ...filtersStore.values[page] };
-      } else {
-        newQuery = defaultFilters || { team: [] };
-      } */
-
-      ({ filters, values } = parseFilters(newQuery, filterOptions));
+      ({ filters, values } = parseFilters(defaultFilters || { team: [] }, filterOptions, query));
     }
 
     this.setState({ filterOptions, filters, values }, () => this.onChange(true));
@@ -369,17 +362,20 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
 
     store.filtersStore.updateValuesForPage(page, values);
 
-    Object.keys({ ...store.filtersStore.globalValues }).forEach((key) => {
-      if (!(key in values)) {
-        delete store.filtersStore.globalValues[key];
-      }
-    });
+    if (!isOnMount) {
+      // Skip updating local storage for mounting, this way URL won't overwrite local storage but subsequent actions WILL do
+      Object.keys({ ...store.filtersStore.globalValues }).forEach((key) => {
+        if (!(key in values)) {
+          delete store.filtersStore.globalValues[key];
+        }
+      });
 
-    const newGlobalValues = pickBy(values, (_, key) =>
-      filterOptions.some((option) => option.name === key && option.global)
-    );
+      const newGlobalValues = pickBy(values, (_, key) =>
+        filterOptions.some((option) => option.name === key && option.global)
+      );
 
-    store.filtersStore.globalValues = newGlobalValues;
+      store.filtersStore.globalValues = newGlobalValues;
+    }
 
     LocationHelper.update({ ...values }, 'partial');
     onChange(values, isOnMount);