refactor(replay): update replay components to use linkQuery for navigation

static/app/components/events/eventReplay/replayPreviewPlayer.tsx

@@ -103,7 +103,10 @@ export default function ReplayPreviewPlayer({
       )}
       <HeaderWrapper>
         <ReplaySessionColumn.Component
-          query={query}
+          linkQuery={{
+            pathname: makeReplaysPathname({path: `/${replayId}/`, organization}),
+            query,
+          }}
           replay={replayRecord as ReplayListRecord}
           rowIndex={0}
           columnIndex={0}

static/app/components/replays/table/replayTable.tsx

@@ -12,6 +12,8 @@ import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {ERROR_MAP} from 'sentry/utils/requestError/requestError';
+import useOrganization from 'sentry/utils/useOrganization';
+import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
 
 type SortProps =
@@ -49,6 +51,7 @@ export default function ReplayTable({
 }: Props) {
   const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
   const hasInteractiveColumn = columns.some(col => col.interactive);
+  const organization = useOrganization();
 
   if (isPending) {
     return (
@@ -126,7 +129,10 @@ export default function ReplayTable({
           {columns.map((column, columnIndex) => (
             <RowCell key={`${replay.id}-${columnIndex}-${column.sortKey}`}>
               <column.Component
-                query={query}
+                linkQuery={{
+                  pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
+                  query,
+                }}
                 columnIndex={columnIndex}
                 replay={replay}
                 rowIndex={rowIndex}

static/app/components/replays/table/replayTableColumns.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
-import type {Query} from 'history';
+import type {LocationDescriptor} from 'history';
 import invariant from 'invariant';
 import {PlatformIcon} from 'platformicons';
 
@@ -37,7 +37,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
 import {useRoutes} from 'sentry/utils/useRoutes';
 import type {ReplayListRecordWithTx} from 'sentry/views/performance/transactionSummary/transactionReplays/useReplaysWithTxData';
-import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
 import type {
   ReplayListRecord,
   ReplayRecordNestedFieldName,
@@ -53,10 +52,11 @@ interface HeaderProps {
 
 interface CellProps {
   columnIndex: number;
+  linkQuery: string | LocationDescriptor;
   replay: ListRecord;
   rowIndex: number;
   showDropdownFilters: boolean;
-  query?: Query;
+  className?: string;
 }
 
 export interface ReplayTableColumn {
@@ -315,15 +315,9 @@ export const ReplayDetailsLinkColumn: ReplayTableColumn = {
   Header: '',
   interactive: true,
   sortKey: undefined,
-  Component: ({replay, query}) => {
-    const organization = useOrganization();
+  Component: ({linkQuery}) => {
     return (
-      <DetailsLink
-        to={{
-          pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
-          query,
-        }}
-      >
+      <DetailsLink to={linkQuery}>
         <Tooltip title={t('See Full Replay')}>
           <IconOpen />
         </Tooltip>
@@ -511,7 +505,7 @@ export const ReplaySessionColumn: ReplayTableColumn = {
   interactive: true,
   sortKey: 'started_at',
   width: 'minmax(150px, 1fr)',
-  Component: ({replay, query}) => {
+  Component: ({replay, linkQuery, className}) => {
     const routes = useRoutes();
     const referrer = getRouteStringFromRoutes(routes);
 
@@ -537,13 +531,7 @@ export const ReplaySessionColumn: ReplayTableColumn = {
       });
 
     return (
-      <CellLink
-        to={{
-          pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
-          query,
-        }}
-        onClick={trackNavigationEvent}
-      >
+      <CellLink className={className} to={linkQuery} onClick={trackNavigationEvent}>
         <ReplayBadge replay={replay} />
       </CellLink>
     );