fix(supernova): combine initial and url filters

Author: taymoor89

apps/supernova/src/lib/urlStateUtils.ts

@@ -16,8 +16,8 @@ export const readLegacyUrlState = (state: any) => {
   const activeFilters = state?.[ACTIVE_FILTERS]
   const pausedFilters = state?.[PAUSED_FILTERS]
   const searchTerm = state?.[SEARCH_TERM]
-  const predefinedFilter = state?.[ACTIVE_PREDEFINED_FILTER]
-  const showDetailsFor = state?.[DETAILS_FOR]
+  const predefinedFilter = !isNaN(state?.[ACTIVE_PREDEFINED_FILTER]) ? state?.[ACTIVE_PREDEFINED_FILTER] : undefined // for some reason old state return NaN if the value not present
+  const showDetailsFor = !isNaN(state?.[DETAILS_FOR]) ? state?.[DETAILS_FOR] : undefined // for some reason old state return NaN if the value not present
   const activeTab = state?.[ACTIVE_TAB]
   const silencesRegEx = state?.[SILENCE_REG_EX]
   const silencesStatus = state?.[SILENCE_STATUS]
@@ -65,8 +65,8 @@ export const getFiltersForUrl = (prefix: string, filters: any) => {
 }
 
 export const convertAppStateToUrlState = (appState: any) => {
-  const activeFiltersForUrl = getFiltersForUrl("f_", appState.activeFilters)
-  const pausedFiltersForUrl = getFiltersForUrl("pf_", appState.pausedFilters)
+  const activeFiltersForUrl = getFiltersForUrl("f_", appState.activeFilters || {})
+  const pausedFiltersForUrl = getFiltersForUrl("pf_", appState.pausedFilters || {})
 
   return {
     ...activeFiltersForUrl,

apps/supernova/src/routes/alerts.tsx

@@ -12,7 +12,7 @@ import RegionsList from "../components/regions/RegionsList"
 import AlertsTab from "../components/alerts/AlertsTab"
 import { ACTIVE_FILTERS_PREFIX, PAUSED_FILTERS_PREFIX } from "../constants"
 import { convertUrlStateToAppState } from "../lib/urlStateUtils"
-import { useGlobalsActions, useFilterActions } from "../components/StoreProvider"
+import { useGlobalsActions, useFilterActions, useActiveFilters } from "../components/StoreProvider"
 
 const searchSchema = z
   .object({
@@ -61,14 +61,15 @@ function RouteComponent() {
     appStateFromUrl: { activeFilters, pausedFilters, predefinedFilter, searchTerm, showDetailsFor },
   } = Route.useRouteContext()
   const { setShowDetailsFor } = useGlobalsActions()
+  const existingActiveFilters = useActiveFilters()
   const { setActiveFilters, setPausedFilters, setActivePredefinedFilter, setSearchTerm } = useFilterActions()
 
   /**
    * TODO: remove it later because we don't need to sync the URL state with the Zustand store
    * we can directly consume it from the route context anywhere
    * */
   useLayoutEffect(() => {
-    setActiveFilters(activeFilters)
+    setActiveFilters({ ...existingActiveFilters, ...activeFilters }) // combine existing/initial filters with filters from URL state
     setPausedFilters(pausedFilters)
     setActivePredefinedFilter(predefinedFilter)
     setSearchTerm(searchTerm)