ref(replays): route dead/rage click in details to DOM events tab (#57421)

https://github.com/getsentry/sentry/assets/56095982/2a907f4b-22f0-4286-9a4c-e7c8a795ae94

static/app/components/replays/header/replayMetaData.tsx

@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {Link} from 'react-router';
 import styled from '@emotion/styled';
 
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
@@ -7,7 +8,11 @@ import TimeSince from 'sentry/components/timeSince';
 import {IconCalendar, IconCursorArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import EventView from 'sentry/utils/discover/eventView';
+import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {ColorOrAlias} from 'sentry/utils/theme';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useRoutes} from 'sentry/utils/useRoutes';
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
@@ -16,15 +21,32 @@ type Props = {
 };
 
 function ReplayMetaData({replayErrors, replayRecord}: Props) {
+  const location = useLocation();
+  const routes = useRoutes();
+  const referrer = getRouteStringFromRoutes(routes);
+  const eventView = EventView.fromLocation(location);
+
+  const domEventsTab = {
+    ...location,
+    query: {
+      referrer,
+      ...eventView.generateQueryStringObject(),
+      t_main: 'dom',
+      f_d_type: 'ui.slowClickDetected',
+    },
+  };
+
   return (
     <KeyMetrics>
       <KeyMetricLabel>{t('Dead Clicks')}</KeyMetricLabel>
       <KeyMetricData>
         {replayRecord?.count_dead_clicks ? (
-          <ClickCount color="yellow300">
-            <IconCursorArrow size="sm" />
-            {replayRecord.count_dead_clicks}
-          </ClickCount>
+          <Link to={domEventsTab}>
+            <ClickCount color="yellow300">
+              <IconCursorArrow size="sm" />
+              {replayRecord.count_dead_clicks}
+            </ClickCount>
+          </Link>
         ) : (
           <Count>0</Count>
         )}
@@ -33,10 +55,12 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
       <KeyMetricLabel>{t('Rage Clicks')}</KeyMetricLabel>
       <KeyMetricData>
         {replayRecord?.count_rage_clicks ? (
-          <ClickCount color="red300">
-            <IconCursorArrow size="sm" />
-            {replayRecord.count_rage_clicks}
-          </ClickCount>
+          <Link to={domEventsTab} color="red300">
+            <ClickCount color="red300">
+              <IconCursorArrow size="sm" />
+              {replayRecord.count_rage_clicks}
+            </ClickCount>
+          </Link>
         ) : (
           <Count>0</Count>
         )}

static/app/views/replays/tabs.tsx

@@ -1,11 +1,13 @@
 import {TabList, Tabs} from 'sentry/components/tabs';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 interface Props {
   selected: 'replays' | 'selectors';
 }
 
-const SELECTOR_IDX_ROUTE = 'selectors';
+const SELECTOR_IDX_ROUTE = 'selectors/';
 const REPLAY_IDX_ROUTE = '';
 
 const TABS = [
@@ -18,6 +20,7 @@ export default function ReplayTabs({selected}: Props) {
   const hasDeadClickFeature = organization.features.includes(
     'session-replay-rage-dead-selectors'
   );
+  const location = useLocation();
 
   return hasDeadClickFeature ? (
     <Tabs value={selected}>
@@ -25,7 +28,13 @@ export default function ReplayTabs({selected}: Props) {
         {TABS.map(tab => (
           <TabList.Item
             key={tab.key}
-            to={`/organizations/${organization.slug}/replays/${tab.to}`}
+            to={{
+              ...location,
+              query: location.query,
+              pathname: normalizeUrl(
+                `/organizations/${organization.slug}/replays/${tab.to}`
+              ),
+            }}
           >
             {tab.label}
           </TabList.Item>