diff --git a/products/error_tracking/frontend/scenes/ErrorTrackingScene/ErrorTrackingScene.tsx b/products/error_tracking/frontend/scenes/ErrorTrackingScene/ErrorTrackingScene.tsx index a5043ba2c5b7b..e83beec738d66 100644 --- a/products/error_tracking/frontend/scenes/ErrorTrackingScene/ErrorTrackingScene.tsx +++ b/products/error_tracking/frontend/scenes/ErrorTrackingScene/ErrorTrackingScene.tsx @@ -26,7 +26,11 @@ import { ErrorTrackingIssueImpactTool } from '../../components/IssueImpactTool' import { issueQueryOptionsLogic } from '../../components/IssueQueryOptions/issueQueryOptionsLogic' import { ErrorTrackingSetupPrompt } from '../../components/SetupPrompt/SetupPrompt' import { exceptionIngestionLogic } from '../../components/SetupPrompt/exceptionIngestionLogic' -import { ERROR_TRACKING_SCENE_LOGIC_KEY, errorTrackingSceneLogic } from './errorTrackingSceneLogic' +import { + ERROR_TRACKING_SCENE_LOGIC_KEY, + ErrorTrackingSceneActiveTab, + errorTrackingSceneLogic, +} from './errorTrackingSceneLogic' import { ImpactFilters } from './tabs/impact/ImpactFilters' import { ImpactList } from './tabs/impact/ImpactList' import { IssuesFilters } from './tabs/issues/IssuesFilters' @@ -58,7 +62,7 @@ export function ErrorTrackingScene(): JSX.Element {
setActiveTab(value as ErrorTrackingSceneActiveTab)} className="border rounded bg-surface-primary" > diff --git a/products/error_tracking/frontend/scenes/ErrorTrackingScene/errorTrackingSceneLogic.ts b/products/error_tracking/frontend/scenes/ErrorTrackingScene/errorTrackingSceneLogic.ts index 3dd27ade11759..93225f27d4037 100644 --- a/products/error_tracking/frontend/scenes/ErrorTrackingScene/errorTrackingSceneLogic.ts +++ b/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([ 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([ reducers({ activeTab: [ - 'issues', + DEFAULT_ACTIVE_TAB as ErrorTrackingSceneActiveTab, { setActiveTab: (_, { activeTab }) => activeTab, }, @@ -103,4 +111,35 @@ export const errorTrackingSceneLogic = kea([ subscriptions(({ actions }) => ({ query: () => actions.setSelectedIssueIds([]), })), + + actionToUrl(({ values }) => { + const buildURL = (): [ + string, + Params, + Record, + { + 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, + } + }), ]) diff --git a/products/error_tracking/frontend/scenes/ErrorTrackingScene/tabs/impact/errorTrackingImpactListLogic.tsx b/products/error_tracking/frontend/scenes/ErrorTrackingScene/tabs/impact/errorTrackingImpactListLogic.tsx index c789390c2ff19..56e5c95a63ea9 100644 --- a/products/error_tracking/frontend/scenes/ErrorTrackingScene/tabs/impact/errorTrackingImpactListLogic.tsx +++ b/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 { 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, + { + 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, + } + }), ])