feat(replays) - add playlist support from Issue Details and Insights (#103007)

Depends on #102583

Issue Details:

![issue_details_to_replays](https://github.com/user-attachments/assets/8d474998-7bbc-4ad2-a971-55343fa0297b)

Performance: 

![performance_replay_carousal](https://github.com/user-attachments/assets/9e6c3ba2-0872-44f5-8e0c-a832da3dac12)

Author: jerryzhou196

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

@@ -1,6 +1,7 @@
 import type {ComponentProps} from 'react';
 import {useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
+import type {Query} from 'history';
 
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
@@ -38,6 +39,7 @@ import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
 import type {ReplayListRecord, ReplayRecord} from 'sentry/views/replays/types';
 
 export default function ReplayPreviewPlayer({
+  query,
   errorBeforeReplayStart,
   replayId,
   fullReplayButtonProps,
@@ -56,6 +58,7 @@ export default function ReplayPreviewPlayer({
   handleForwardClick?: () => void;
   overlayContent?: React.ReactNode;
   playPausePriority?: ComponentProps<typeof ReplayPlayPauseButton>['priority'];
+  query?: Query;
   showNextAndPrevious?: boolean;
 }) {
   const routes = useRoutes();
@@ -100,6 +103,7 @@ export default function ReplayPreviewPlayer({
       )}
       <HeaderWrapper>
         <ReplaySessionColumn.Component
+          query={query}
           replay={replayRecord as ReplayListRecord}
           rowIndex={0}
           columnIndex={0}
@@ -117,6 +121,7 @@ export default function ReplayPreviewPlayer({
               t_main: fromFeedback ? TabKey.BREADCRUMBS : TabKey.ERRORS,
               t: (currentTime + startOffsetMs) / 1000,
               groupId,
+              ...query,
             },
           }}
           {...fullReplayButtonProps}

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

@@ -1,5 +1,6 @@
 import type {RefObject} from 'react';
 import styled from '@emotion/styled';
+import type {Query} from 'history';
 
 import {Alert} from 'sentry/components/core/alert';
 import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
@@ -26,10 +27,12 @@ type Props = SortProps & {
   isPending: boolean;
   replays: ReplayListRecord[];
   showDropdownFilters: boolean;
+  query?: Query;
   ref?: RefObject<HTMLDivElement | null>;
 };
 
 export default function ReplayTable({
+  query,
   columns,
   error,
   isPending,
@@ -110,6 +113,7 @@ export default function ReplayTable({
           {columns.map((column, columnIndex) => (
             <RowCell key={`${replay.id}-${columnIndex}-${column.sortKey}`}>
               <column.Component
+                query={query}
                 columnIndex={columnIndex}
                 replay={replay}
                 rowIndex={rowIndex}

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

@@ -18,7 +18,6 @@ import NumericDropdownFilter from 'sentry/components/replays/table/filters/numer
 import OSBrowserDropdownFilter from 'sentry/components/replays/table/filters/osBrowserDropdownFilter';
 import ScoreBar from 'sentry/components/scoreBar';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
-import {parseStatsPeriod} from 'sentry/components/timeRangeSelector/utils';
 import {IconNot} from 'sentry/icons';
 import {IconCursorArrow} from 'sentry/icons/iconCursorArrow';
 import {IconFire} from 'sentry/icons/iconFire';
@@ -27,7 +26,6 @@ import {IconPlay} from 'sentry/icons/iconPlay';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import EventView from 'sentry/utils/discover/eventView';
 import {spanOperationRelativeBreakdownRenderer} from 'sentry/utils/discover/fieldRenderers';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
@@ -58,6 +56,7 @@ interface CellProps {
   replay: ListRecord;
   rowIndex: number;
   showDropdownFilters: boolean;
+  query?: Query;
 }
 
 export interface ReplayTableColumn {
@@ -316,10 +315,15 @@ export const ReplayDetailsLinkColumn: ReplayTableColumn = {
   Header: '',
   interactive: true,
   sortKey: undefined,
-  Component: ({replay}) => {
+  Component: ({replay, query}) => {
     const organization = useOrganization();
     return (
-      <DetailsLink to={makeReplaysPathname({path: `/${replay.id}/`, organization})}>
+      <DetailsLink
+        to={{
+          pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
+          query,
+        }}
+      >
         <Tooltip title={t('See Full Replay')}>
           <IconOpen />
         </Tooltip>
@@ -507,9 +511,10 @@ export const ReplaySessionColumn: ReplayTableColumn = {
   interactive: true,
   sortKey: 'started_at',
   width: 'minmax(150px, 1fr)',
-  Component: ({replay}) => {
+  Component: ({replay, query}) => {
     const routes = useRoutes();
-    const location = useLocation();
+    const referrer = getRouteStringFromRoutes(routes);
+
     const organization = useOrganization();
     const project = useProjectFromId({project_id: replay.project_id ?? undefined});
 
@@ -522,50 +527,6 @@ export const ReplaySessionColumn: ReplayTableColumn = {
       'For TypeScript: replay.started_at is implied because replay.is_archived is false'
     );
 
-    const referrer = getRouteStringFromRoutes(routes);
-    const eventView = EventView.fromLocation(location);
-
-    const {statsPeriod, start, end, ...eventViewQuery} =
-      eventView.generateQueryStringObject();
-
-    const detailsTabQuery: Query = {
-      referrer,
-      ...eventViewQuery,
-    };
-
-    if (typeof statsPeriod === 'string') {
-      const {start: playlistStart, end: playlistEnd} = parseStatsPeriod(
-        statsPeriod,
-        undefined,
-        true
-      );
-      detailsTabQuery.playlistStart = playlistStart;
-      detailsTabQuery.playlistEnd = playlistEnd;
-    } else if (start && end) {
-      detailsTabQuery.playlistStart = start;
-      detailsTabQuery.playlistEnd = end;
-    }
-
-    // Because the sort and cursor field is only generated in EventView conditionally and we
-    // want to avoid dirtying the URL with fields, we manually add them to the query here.
-    if (location.query.sort) {
-      detailsTabQuery.playlistSort = location.query.sort;
-    }
-    if (location.query.cursor) {
-      detailsTabQuery.cursor = location.query.cursor;
-    }
-
-    const replayDetailsPathname = makeReplaysPathname({
-      path: `/${replay.id}/`,
-      organization,
-    });
-
-    const detailsTab = () => {
-      return {
-        pathname: replayDetailsPathname,
-        query: detailsTabQuery,
-      };
-    };
     const trackNavigationEvent = () =>
       trackAnalytics('replay.list-navigate-to-details', {
         project_id: project?.id,
@@ -576,7 +537,13 @@ export const ReplaySessionColumn: ReplayTableColumn = {
       });
 
     return (
-      <CellLink to={detailsTab()} onClick={trackNavigationEvent}>
+      <CellLink
+        to={{
+          pathname: makeReplaysPathname({path: `/${replay.id}/`, organization}),
+          query,
+        }}
+        onClick={trackNavigationEvent}
+      >
         <ReplayBadge replay={replay} />
       </CellLink>
     );

static/app/components/replays/usePlaylistQuery.tsx

@@ -0,0 +1,50 @@
+import type {Query} from 'history';
+
+import {parseStatsPeriod} from 'sentry/components/timeRangeSelector/utils';
+import EventView from 'sentry/utils/discover/eventView';
+import {useLocation} from 'sentry/utils/useLocation';
+import type {ReplayListQueryReferrer} from 'sentry/views/replays/types';
+
+export function usePlaylistQuery(
+  referrer: ReplayListQueryReferrer,
+  eventView?: EventView
+): Query {
+  const location = useLocation();
+  if (!eventView) {
+    eventView = EventView.fromLocation(location);
+  }
+
+  const {statsPeriod, start, end, query, project, environment} =
+    eventView.generateQueryStringObject();
+
+  const eventViewQuery: Query = {
+    query,
+    referrer,
+    project,
+    environment,
+  };
+
+  if (typeof statsPeriod === 'string') {
+    const {start: playlistStart, end: playlistEnd} = parseStatsPeriod(
+      statsPeriod,
+      undefined,
+      true
+    );
+    eventViewQuery.playlistStart = playlistStart;
+    eventViewQuery.playlistEnd = playlistEnd;
+  } else if (start && end) {
+    eventViewQuery.playlistStart = start;
+    eventViewQuery.playlistEnd = end;
+  }
+
+  // Because the sort and cursor field is only generated in EventView conditionally and we
+  // want to avoid dirtying the URL with fields, we manually add them to the query here.
+  if (location.query.sort) {
+    eventViewQuery.playlistSort = location.query.sort;
+  }
+  if (location.query.cursor) {
+    eventViewQuery.cursor = location.query.cursor;
+  }
+  eventViewQuery.referrer = referrer;
+  return eventViewQuery;
+}

static/app/views/issueDetails/groupReplays/groupReplays.spec.tsx

@@ -414,7 +414,7 @@ describe('GroupReplays', () => {
       expect(await screen.findAllByText('testDisplayName')).toHaveLength(2);
 
       const expectedQuery =
-        'playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-09-14T23%3A29%3A13&query=&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&yAxis=count%28%29';
+        'playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-06-30T23%3A29%3A13&query=id%3A%5B346789a703f6454384f1de473b8b9fcc%2Cb05dae9b6be54d21a4d5ad9f8f02b780%5D&referrer=issueReplays';
 
       // Expect the first row to have the correct href
       expect(

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -1,7 +1,7 @@
 import {Fragment, useEffect, useMemo} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
-import type {Location} from 'history';
+import type {Location, Query} from 'history';
 
 import {Button} from 'sentry/components/core/button';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -22,6 +22,7 @@ import {
   ReplayPlayPauseColumn,
   ReplaySessionColumn,
 } from 'sentry/components/replays/table/replayTableColumns';
+import {usePlaylistQuery} from 'sentry/components/replays/usePlaylistQuery';
 import {replayMobilePlatforms} from 'sentry/data/platformCategories';
 import {IconPlay, IconUser} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
@@ -165,6 +166,7 @@ export default function GroupReplays({group}: Props) {
 
 function SelectedReplayWrapper({
   children,
+  query,
   group,
   replaySlug,
   overlayContent,
@@ -175,6 +177,7 @@ function SelectedReplayWrapper({
   overlayContent: React.ReactNode;
   replaySlug: string;
   replays: ReplayListRecord[] | undefined;
+  query?: Query;
 }) {
   const organization = useOrganization();
   const readerResult = useLoadReplayReader({
@@ -195,6 +198,7 @@ function SelectedReplayWrapper({
       autoStart
     >
       <GroupReplaysPlayer
+        query={query}
         replayReaderResult={readerResult}
         overlayContent={overlayContent}
         handleForwardClick={
@@ -242,9 +246,11 @@ function GroupReplaysTable({
   });
   const {replays} = replayListData;
   const selectedReplay = replays?.[selectedReplayIndex];
+  const playlistQuery = usePlaylistQuery('issueReplays', eventView);
 
   const replayTable = (
     <ReplayTable
+      query={playlistQuery}
       columns={[
         ...(selectedReplay ? [ReplayPlayPauseColumn] : []),
         ...(allMobileProj ? VISIBLE_COLUMNS_MOBILE : VISIBLE_COLUMNS),
@@ -265,6 +271,7 @@ function GroupReplaysTable({
         group={group}
         replaySlug={selectedReplay.id}
         replays={replays}
+        query={playlistQuery}
       >
         {replayTable}
       </SelectedReplayWrapper>

static/app/views/issueDetails/groupReplays/groupReplaysPlayer.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import type {Query} from 'history';
 
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
 import {REPLAY_LOADING_HEIGHT_LARGE} from 'sentry/components/events/eventReplay/constants';
@@ -21,10 +22,12 @@ interface Props {
   handleForwardClick: undefined | (() => void);
   overlayContent: React.ReactNode;
   replayReaderResult: ReturnType<typeof useLoadReplayReader>;
+  query?: Query;
 }
 
 export default function GroupReplaysPlayer({
   analyticsContext,
+  query,
   handleForwardClick,
   handleBackClick,
   overlayContent,
@@ -65,6 +68,7 @@ export default function GroupReplaysPlayer({
               <ReplayReaderProvider replay={replay}>
                 <ReplayPlayerStateContextProvider>
                   <ReplayPreviewPlayer
+                    query={query}
                     errorBeforeReplayStart={replay.getErrorBeforeReplayStart()}
                     replayId={replayReaderResult.replayId}
                     replayRecord={replayReaderResult.replayRecord!}

static/app/views/performance/transactionSummary/transactionReplays/index.spec.tsx

@@ -207,7 +207,7 @@ describe('TransactionReplays', () => {
     expect(screen.getAllByText('testDisplayName')).toHaveLength(2);
 
     const expectedQuery =
-      'playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-09-14T23%3A29%3A13&project=1&query=test&referrer=replays%2F&yAxis=count%28%29';
+      'playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-09-14T23%3A29%3A13&query=test&referrer=transactionReplays';
     // Expect the first row to have the correct href
     expect(
       screen.getByRole('link', {

static/app/views/performance/transactionSummary/transactionReplays/transactionReplays.tsx

@@ -14,6 +14,7 @@ import {
   ReplaySessionColumn,
   ReplaySlowestTransactionColumn,
 } from 'sentry/components/replays/table/replayTableColumns';
+import {usePlaylistQuery} from 'sentry/components/replays/usePlaylistQuery';
 import type {Organization} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import useReplayList from 'sentry/utils/replays/hooks/useReplayList';
@@ -89,6 +90,7 @@ function ReplaysContent({
   if (!eventView.query) {
     eventView.query = String(location.query.query ?? '');
   }
+  const playlistQuery = usePlaylistQuery('transactionReplays', eventView);
 
   const newLocation = useMemo(
     () => ({query: {}}) as Location<ReplayListLocationQuery>,
@@ -121,6 +123,7 @@ function ReplaysContent({
   return (
     <Layout.Main width="full">
       <ReplayTable
+        query={playlistQuery}
         columns={[
           ReplaySessionColumn,
           ...(hasRoomForColumns ? [ReplaySlowestTransactionColumn] : []),