fix: only reload query when events are added / changed (not all removed)

products/error_tracking/frontend/scenes/ErrorTrackingScene/errorTrackingSceneLogic.ts

@@ -1,6 +1,10 @@
+import equal from 'fast-deep-equal'
 import { actions, connect, kea, path, reducers, selectors } from 'kea'
+import { actionToUrl, router, urlToAction } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 
+import { Params } from 'scenes/sceneTypes'
+
 import { SIDE_PANEL_CONTEXT_KEY, SidePanelSceneContext } from '~/layout/navigation-3000/sidepanel/types'
 import { DataTableNode } from '~/queries/schema/schema-general'
 import { ActivityScope, Breadcrumb } from '~/types'
@@ -10,16 +14,20 @@ import { issueFiltersLogic } from '../../components/IssueFilters/issueFiltersLog
 import { issueQueryOptionsLogic } from '../../components/IssueQueryOptions/issueQueryOptionsLogic'
 import { bulkSelectLogic } from '../../logics/bulkSelectLogic'
 import { errorTrackingQuery } from '../../queries'
-import { ERROR_TRACKING_LISTING_RESOLUTION } from '../../utils'
+import { ERROR_TRACKING_LISTING_RESOLUTION, syncSearchParams, updateSearchParams } from '../../utils'
 import type { errorTrackingSceneLogicType } from './errorTrackingSceneLogicType'
 
 export const ERROR_TRACKING_SCENE_LOGIC_KEY = 'ErrorTrackingScene'
 
+const DEFAULT_ACTIVE_TAB = 'issues'
+
+export type ErrorTrackingSceneActiveTab = 'issues' | 'impact'
+
 export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
     path(['products', 'error_tracking', 'scenes', 'ErrorTrackingScene', 'errorTrackingSceneLogic']),
 
     actions({
-        setActiveTab: (activeTab: string) => ({ activeTab }),
+        setActiveTab: (activeTab: ErrorTrackingSceneActiveTab) => ({ activeTab }),
     }),
 
     connect(() => ({
@@ -34,7 +42,7 @@ export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
 
     reducers({
         activeTab: [
-            'issues',
+            DEFAULT_ACTIVE_TAB as ErrorTrackingSceneActiveTab,
             {
                 setActiveTab: (_, { activeTab }) => activeTab,
             },
@@ -103,4 +111,35 @@ export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
     subscriptions(({ actions }) => ({
         query: () => actions.setSelectedIssueIds([]),
     })),
+
+    actionToUrl(({ values }) => {
+        const buildURL = (): [
+            string,
+            Params,
+            Record<string, any>,
+            {
+                replace: boolean
+            },
+        ] => {
+            return syncSearchParams(router, (params: Params) => {
+                updateSearchParams(params, 'activeTab', values.activeTab, DEFAULT_ACTIVE_TAB)
+                return params
+            })
+        }
+
+        return {
+            setActiveTab: () => buildURL(),
+        }
+    }),
+
+    urlToAction(({ actions, values }) => {
+        const urlToAction = (_: any, params: Params): void => {
+            if (params.activeTab && !equal(params.activeTab, values.activeTab)) {
+                actions.setActiveTab(params.activeTab)
+            }
+        }
+        return {
+            '*': urlToAction,
+        }
+    }),
 ])

products/error_tracking/frontend/scenes/ErrorTrackingScene/tabs/impact/errorTrackingImpactListLogic.tsx

@@ -1,14 +1,18 @@
+import equal from 'fast-deep-equal'
 import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
+import { actionToUrl, router, urlToAction } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 import posthog from 'posthog-js'
 
 import api from 'lib/api'
+import { Params } from 'scenes/sceneTypes'
 
 import { ErrorTrackingCorrelatedIssue } from '~/queries/schema/schema-general'
 
 import { bulkSelectLogic } from 'products/error_tracking/frontend/logics/bulkSelectLogic'
 import { errorTrackingIssueCorrelationQuery } from 'products/error_tracking/frontend/queries'
+import { syncSearchParams, updateSearchParams } from 'products/error_tracking/frontend/utils'
 
 import type { errorTrackingImpactListLogicType } from './errorTrackingImpactListLogicType'
 
@@ -89,11 +93,44 @@ export const errorTrackingImpactListLogic = kea<errorTrackingImpactListLogicType
         },
         setEvents: () => {
             posthog.capture('error_tracking_impact_event_selected')
-            actions.loadIssues()
+            if (values.events && values.events.length > 0) {
+                actions.loadIssues()
+            }
         },
     })),
 
     subscriptions(({ actions }) => ({
         events: () => actions.setSelectedIssueIds([]),
     })),
+
+    actionToUrl(({ values }) => {
+        const buildURL = (): [
+            string,
+            Params,
+            Record<string, any>,
+            {
+                replace: boolean
+            },
+        ] => {
+            return syncSearchParams(router, (params: Params) => {
+                updateSearchParams(params, 'events', values.events, null)
+                return params
+            })
+        }
+
+        return {
+            setEvents: () => buildURL(),
+        }
+    }),
+
+    urlToAction(({ actions, values }) => {
+        const urlToAction = (_: any, params: Params): void => {
+            if (params.events && !equal(params.events, values.events)) {
+                actions.setEvents(params.events)
+            }
+        }
+        return {
+            '*': urlToAction,
+        }
+    }),
 ])