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

static/app/components/events/eventReplay/replayClipPreview.spec.tsx

@@ -24,7 +24,7 @@ const mockReplayId = '761104e184c64d439ee1014b72b4d83b';
 const mockEventTimestamp = new Date('2022-09-22T16:59:41Z');
 const mockEventTimestampMs = mockEventTimestamp.getTime();
 
-const mockButtonHref = `/organizations/${mockOrgSlug}/explore/replays/761104e184c64d439ee1014b72b4d83b/?referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&t=57&t_main=errors`;
+const mockButtonHref = `/organizations/${mockOrgSlug}/explore/replays/761104e184c64d439ee1014b72b4d83b/?playlistEnd=2017-10-17T02%3A41%3A20&playlistStart=2017-10-03T02%3A41%3A20&query=&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&t=57&t_main=errors&yAxis=count%28%29`;
 
 // Get replay data with the mocked replay reader params
 const mockReplay = ReplayReader.factory({

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

@@ -16,9 +16,11 @@ import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButt
 import {ReplaySidebarToggleButton} from 'sentry/components/replays/replaySidebarToggleButton';
 import {ReplaySessionColumn} from 'sentry/components/replays/table/replayTableColumns';
 import TimeAndScrubberGrid from 'sentry/components/replays/timeAndScrubberGrid';
+import {usePlaylistQuery} from 'sentry/components/replays/usePlaylistQuery';
 import {IconNext, IconPrevious} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type EventView from 'sentry/utils/discover/eventView';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useMarkReplayViewed from 'sentry/utils/replays/hooks/useMarkReplayViewed';
@@ -38,6 +40,7 @@ import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
 import type {ReplayListRecord, ReplayRecord} from 'sentry/views/replays/types';
 
 export default function ReplayPreviewPlayer({
+  eventView,
   errorBeforeReplayStart,
   replayId,
   fullReplayButtonProps,
@@ -51,6 +54,7 @@ export default function ReplayPreviewPlayer({
   errorBeforeReplayStart: boolean;
   replayId: string;
   replayRecord: ReplayRecord;
+  eventView?: EventView;
   fullReplayButtonProps?: Partial<Omit<LinkButtonProps, 'external'>>;
   handleBackClick?: () => void;
   handleForwardClick?: () => void;
@@ -89,6 +93,8 @@ export default function ReplayPreviewPlayer({
     }
   }, [isFetching, isPlaying, markAsViewed, organization, replayRecord]);
 
+  const playlistQuery = usePlaylistQuery(eventView);
+
   return (
     <PlayerPanel>
       {errorBeforeReplayStart && (
@@ -100,6 +106,7 @@ export default function ReplayPreviewPlayer({
       )}
       <HeaderWrapper>
         <ReplaySessionColumn.Component
+          query={playlistQuery}
           replay={replayRecord as ReplayListRecord}
           rowIndex={0}
           columnIndex={0}
@@ -117,6 +124,7 @@ export default function ReplayPreviewPlayer({
               t_main: fromFeedback ? TabKey.BREADCRUMBS : TabKey.ERRORS,
               t: (currentTime + startOffsetMs) / 1000,
               groupId,
+              ...playlistQuery,
             },
           }}
           {...fullReplayButtonProps}

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

@@ -6,8 +6,10 @@ import InteractionStateLayer from 'sentry/components/core/interactionStateLayer'
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import type {ReplayTableColumn} from 'sentry/components/replays/table/replayTableColumns';
 import ReplayTableHeader from 'sentry/components/replays/table/replayTableHeader';
+import {usePlaylistQuery} from 'sentry/components/replays/usePlaylistQuery';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t} from 'sentry/locale';
+import type EventView from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {ERROR_MAP} from 'sentry/utils/requestError/requestError';
@@ -26,10 +28,12 @@ type Props = SortProps & {
   isPending: boolean;
   replays: ReplayListRecord[];
   showDropdownFilters: boolean;
+  eventView?: EventView;
   ref?: RefObject<HTMLDivElement | null>;
 };
 
 export default function ReplayTable({
+  eventView,
   columns,
   error,
   isPending,
@@ -41,6 +45,7 @@ export default function ReplayTable({
 }: Props) {
   const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
   const hasInteractiveColumn = columns.some(col => col.interactive);
+  const playlistQuery = usePlaylistQuery(eventView);
 
   if (isPending) {
     return (
@@ -110,6 +115,7 @@ export default function ReplayTable({
           {columns.map((column, columnIndex) => (
             <RowCell key={`${replay.id}-${columnIndex}-${column.sortKey}`}>
               <column.Component
+                query={playlistQuery}
                 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,23 @@ export const ReplayDetailsLinkColumn: ReplayTableColumn = {
   Header: '',
   interactive: true,
   sortKey: undefined,
-  Component: ({replay}) => {
+  Component: ({replay, query}) => {
     const organization = useOrganization();
+    const replayDetailsPathname = makeReplaysPathname({
+      path: `/${replay.id}/`,
+      organization,
+    });
+
+    const routes = useRoutes();
+    const referrer = getRouteStringFromRoutes(routes);
+
+    const detailsTab = () => ({
+      pathname: replayDetailsPathname,
+      query: {referrer, ...query},
+    });
+
     return (
-      <DetailsLink to={makeReplaysPathname({path: `/${replay.id}/`, organization})}>
+      <DetailsLink to={detailsTab()}>
         <Tooltip title={t('See Full Replay')}>
           <IconOpen />
         </Tooltip>
@@ -507,9 +519,8 @@ 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 organization = useOrganization();
     const project = useProjectFromId({project_id: replay.project_id ?? undefined});
 
@@ -523,38 +534,11 @@ export const ReplaySessionColumn: ReplayTableColumn = {
     );
 
     const referrer = getRouteStringFromRoutes(routes);
-    const eventView = EventView.fromLocation(location);
-
-    const {statsPeriod, start, end, ...eventViewQuery} =
-      eventView.generateQueryStringObject();
-
     const detailsTabQuery: Query = {
       referrer,
-      ...eventViewQuery,
+      ...query,
     };
 
-    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,

static/app/components/replays/usePlaylistQuery.tsx

@@ -0,0 +1,37 @@
+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';
+
+export function usePlaylistQuery(eventView?: EventView): Query {
+  const location = useLocation();
+  if (!eventView) {
+    eventView = EventView.fromLocation(location);
+  }
+  const {statsPeriod, start, end, ...eventViewQuery} =
+    eventView.generateQueryStringObject();
+
+  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;
+  }
+  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';
+        'field=activity&field=browser.name&field=browser.version&field=count_dead_clicks&field=count_errors&field=count_infos&field=count_rage_clicks&field=count_segments&field=count_urls&field=count_warnings&field=device.brand&field=device.family&field=device.model_id&field=device.name&field=dist&field=duration&field=environment&field=error_ids&field=finished_at&field=has_viewed&field=id&field=info_ids&field=is_archived&field=os.name&field=os.version&field=platform&field=project_id&field=releases&field=sdk.name&field=sdk.version&field=started_at&field=tags&field=trace_ids&field=urls&field=user&field=warning_ids&id=&name=&playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-06-30T23%3A29%3A13&query=id%3A%5B346789a703f6454384f1de473b8b9fcc%2Cb05dae9b6be54d21a4d5ad9f8f02b780%5D&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&sort=-started_at&yAxis=count%28%29';
 
       // Expect the first row to have the correct href
       expect(

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

@@ -165,12 +165,14 @@ export default function GroupReplays({group}: Props) {
 
 function SelectedReplayWrapper({
   children,
+  eventView,
   group,
   replaySlug,
   overlayContent,
   replays,
 }: {
   children: React.ReactNode;
+  eventView: EventView;
   group: Group;
   overlayContent: React.ReactNode;
   replaySlug: string;
@@ -195,6 +197,7 @@ function SelectedReplayWrapper({
       autoStart
     >
       <GroupReplaysPlayer
+        eventView={eventView}
         replayReaderResult={readerResult}
         overlayContent={overlayContent}
         handleForwardClick={
@@ -245,6 +248,7 @@ function GroupReplaysTable({
 
   const replayTable = (
     <ReplayTable
+      eventView={eventView}
       columns={[
         ...(selectedReplay ? [ReplayPlayPauseColumn] : []),
         ...(allMobileProj ? VISIBLE_COLUMNS_MOBILE : VISIBLE_COLUMNS),
@@ -265,6 +269,7 @@ function GroupReplaysTable({
         group={group}
         replaySlug={selectedReplay.id}
         replays={replays}
+        eventView={eventView}
       >
         {replayTable}
       </SelectedReplayWrapper>

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

@@ -8,6 +8,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
 import {t} from 'sentry/locale';
+import type EventView from 'sentry/utils/discover/eventView';
 import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import useLogEventReplayStatus from 'sentry/utils/replays/hooks/useLogEventReplayStatus';
 import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
@@ -21,10 +22,12 @@ interface Props {
   handleForwardClick: undefined | (() => void);
   overlayContent: React.ReactNode;
   replayReaderResult: ReturnType<typeof useLoadReplayReader>;
+  eventView?: EventView;
 }
 
 export default function GroupReplaysPlayer({
   analyticsContext,
+  eventView,
   handleForwardClick,
   handleBackClick,
   overlayContent,
@@ -65,6 +68,7 @@ export default function GroupReplaysPlayer({
               <ReplayReaderProvider replay={replay}>
                 <ReplayPlayerStateContextProvider>
                   <ReplayPreviewPlayer
+                    eventView={eventView}
                     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';
+      'field=activity&field=browser.name&field=browser.version&field=count_dead_clicks&field=count_errors&field=count_infos&field=count_rage_clicks&field=count_segments&field=count_urls&field=count_warnings&field=device.brand&field=device.family&field=device.model_id&field=device.name&field=dist&field=duration&field=environment&field=error_ids&field=finished_at&field=has_viewed&field=id&field=info_ids&field=is_archived&field=os.name&field=os.version&field=platform&field=project_id&field=releases&field=sdk.name&field=sdk.version&field=started_at&field=tags&field=trace_ids&field=urls&field=user&field=warning_ids&id=&name=&playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-09-14T23%3A29%3A13&query=test&referrer=replays%2F&sort=-started_at&yAxis=count%28%29';
     // Expect the first row to have the correct href
     expect(
       screen.getByRole('link', {

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

@@ -121,6 +121,7 @@ function ReplaysContent({
   return (
     <Layout.Main width="full">
       <ReplayTable
+        eventView={eventView}
         columns={[
           ReplaySessionColumn,
           ...(hasRoomForColumns ? [ReplaySlowestTransactionColumn] : []),

static/app/views/replays/detail/body/replayDetailsProviders.tsx

@@ -20,7 +20,11 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import useOrganization from 'sentry/utils/useOrganization';
 import {ReplaySummaryContextProvider} from 'sentry/views/replays/detail/ai/replaySummaryContext';
-import {type ReplayListRecord} from 'sentry/views/replays/types';
+import {
+  REPLAY_LIST_QUERY_REFERRERS,
+  type ReplayListQueryReferrer,
+  type ReplayListRecord,
+} from 'sentry/views/replays/types';
 
 interface Props {
   children: ReactNode;
@@ -59,6 +63,7 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
       playlistEnd: decodeScalar,
       playlistSort: decodeScalar,
       sort: decodeScalar,
+      referrer: decodeScalar,
     },
   });
 
@@ -71,10 +76,16 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
   query.sort =
     !playlistSort || playlistSort === '' ? DEFAULT_REPLAY_LIST_SORT : playlistSort;
 
+  const queryReferrer = REPLAY_LIST_QUERY_REFERRERS.includes(
+    query.referrer as ReplayListQueryReferrer
+  )
+    ? (query.referrer as ReplayListQueryReferrer)
+    : 'replayList';
+
   const queryKey = useReplayListQueryKey({
     options: {query},
     organization,
-    queryReferrer: 'replaysPlayList',
+    queryReferrer,
   });
   const {data} = useApiQuery<{
     data: ReplayListRecord[];

static/app/views/replays/types.tsx

@@ -200,11 +200,13 @@ export type ReplayListLocationQuery = {
   utc?: 'true' | 'false';
 };
 
-export type ReplayListQueryReferrer =
-  | 'replayList'
-  | 'issueReplays'
-  | 'transactionReplays'
-  | 'replaysPlayList';
+export const REPLAY_LIST_QUERY_REFERRERS = [
+  'replayList',
+  'issueReplays',
+  'transactionReplays',
+] as const;
+
+export type ReplayListQueryReferrer = (typeof REPLAY_LIST_QUERY_REFERRERS)[number];
 
 // Sync with ReplayListRecord below
 // Skip some fields because the backend doesn't support them in the field list: