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

src/sentry/replays/blueprints/api.md

@@ -24,7 +24,7 @@ This document is structured by resource with each resource having actions that c
     Default: 7d
     Members: + s + m + h + d + w
   - start (optional, string) - ISO 8601 format (`YYYY-MM-DDTHH:mm:ss.sssZ`)
-  - end (optional, string) - ISO 8601 format. Required if `start` is set.
+  - end (optional, string) - ISO 8601 format.
   - per_page (optional, number)
     Default: 10
   - offset (optional, number)

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

@@ -8,9 +8,11 @@ import type {ReplayTableColumn} from 'sentry/components/replays/table/replayTabl
 import ReplayTableHeader from 'sentry/components/replays/table/replayTableHeader';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t} from 'sentry/locale';
+import 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';
+import {useLocation} from 'sentry/utils/useLocation';
 import type {ReplayListRecord} from 'sentry/views/replays/types';
 
 type SortProps =
@@ -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,10 @@ export default function ReplayTable({
 }: Props) {
   const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
   const hasInteractiveColumn = columns.some(col => col.interactive);
+  const location = useLocation();
+  if (!eventView) {
+    eventView = EventView.fromLocation(location);
+  }
 
   if (isPending) {
     return (
@@ -111,6 +119,7 @@ export default function ReplayTable({
             <RowCell key={`${replay.id}-${columnIndex}-${column.sortKey}`}>
               <column.Component
                 columnIndex={columnIndex}
+                eventView={eventView}
                 replay={replay}
                 rowIndex={rowIndex}
                 showDropdownFilters={showDropdownFilters}

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

@@ -1,6 +1,7 @@
 import type {ReactNode} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
+import type {Query} from 'history';
 import invariant from 'invariant';
 import {PlatformIcon} from 'platformicons';
 
@@ -15,8 +16,10 @@ import ReplayBadge from 'sentry/components/replays/replayBadge';
 import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
 import NumericDropdownFilter from 'sentry/components/replays/table/filters/numericDropdownFilter';
 import OSBrowserDropdownFilter from 'sentry/components/replays/table/filters/osBrowserDropdownFilter';
+import {DEFAULT_SORT} from 'sentry/components/replays/table/useReplayTableSort';
 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';
@@ -25,7 +28,7 @@ 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 EventView, {encodeSort} 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';
@@ -42,6 +45,7 @@ import type {
   ReplayListRecord,
   ReplayRecordNestedFieldName,
 } from 'sentry/views/replays/types';
+import {REPLAY_LIST_FIELDS} from 'sentry/views/replays/types';
 
 type ListRecord = ReplayListRecord | ReplayListRecordWithTx;
 
@@ -56,6 +60,7 @@ interface CellProps {
   replay: ListRecord;
   rowIndex: number;
   showDropdownFilters: boolean;
+  eventView?: EventView;
 }
 
 export interface ReplayTableColumn {
@@ -90,6 +95,17 @@ export interface ReplayTableColumn {
   width?: string;
 }
 
+function generateQueryStringObjectWithPlaylist(eventView: EventView) {
+  const {statsPeriod, ...eventViewQuery} = eventView.generateQueryStringObject();
+  let queryStringObject = {...eventViewQuery};
+
+  if (!eventViewQuery.start && !eventViewQuery.end && typeof statsPeriod === 'string') {
+    const {start, end} = parseStatsPeriod(statsPeriod);
+    queryStringObject = {...queryStringObject, ...{start, end}};
+  }
+  return queryStringObject;
+}
+
 export const ReplayActivityColumn: ReplayTableColumn = {
   Header: () => (
     <Tooltip
@@ -314,10 +330,29 @@ export const ReplayDetailsLinkColumn: ReplayTableColumn = {
   Header: '',
   interactive: true,
   sortKey: undefined,
-  Component: ({replay}) => {
+  Component: ({replay, eventView}) => {
+    const routes = useRoutes();
     const organization = useOrganization();
+
+    const referrer = getRouteStringFromRoutes(routes);
+    let query = {referrer};
+
+    if (eventView) {
+      query = {...query, ...generateQueryStringObjectWithPlaylist(eventView)};
+    }
+
+    const replayDetailsPathname = makeReplaysPathname({
+      path: `/${replay.id}/`,
+      organization,
+    });
+
+    const detailsTab = () => ({
+      pathname: replayDetailsPathname,
+      query,
+    });
+
     return (
-      <DetailsLink to={makeReplaysPathname({path: `/${replay.id}/`, organization})}>
+      <DetailsLink to={detailsTab()}>
         <Tooltip title={t('See Full Replay')}>
           <IconOpen />
         </Tooltip>
@@ -505,7 +540,7 @@ export const ReplaySessionColumn: ReplayTableColumn = {
   interactive: true,
   sortKey: 'started_at',
   width: 'minmax(150px, 1fr)',
-  Component: ({replay}) => {
+  Component: ({replay, eventView}) => {
     const routes = useRoutes();
     const location = useLocation();
     const organization = useOrganization();
@@ -521,18 +556,28 @@ export const ReplaySessionColumn: ReplayTableColumn = {
     );
 
     const referrer = getRouteStringFromRoutes(routes);
-    const eventView = EventView.fromLocation(location);
+
+    let query: Query = {referrer};
+
+    if (eventView) {
+      query = {...query, ...generateQueryStringObjectWithPlaylist(eventView)};
+    }
+
+    query.sort = location.query.sort ?? encodeSort(DEFAULT_SORT);
+    query.field = REPLAY_LIST_FIELDS;
+
+    if (location.query.cursor) {
+      query.cursor = location.query.cursor;
+    }
+
     const replayDetailsPathname = makeReplaysPathname({
       path: `/${replay.id}/`,
       organization,
     });
 
     const detailsTab = () => ({
       pathname: replayDetailsPathname,
-      query: {
-        referrer,
-        ...eventView.generateQueryStringObject(),
-      },
+      query,
     });
     const trackNavigationEvent = () =>
       trackAnalytics('replay.list-navigate-to-details', {

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

@@ -12,7 +12,7 @@ interface Props {
   queryParamKey?: string;
 }
 
-const DEFAULT_SORT = {field: 'started_at', kind: 'desc'} as const;
+export const DEFAULT_SORT = {field: 'started_at', kind: 'desc'} as const;
 
 export default function useReplayTableSort({
   defaultSort = DEFAULT_SORT,

static/app/utils/replays/fetchReplayList.tsx

@@ -76,13 +76,7 @@ async function fetchReplayList({
     return {
       fetchError: undefined,
       pageLinks,
-      replays: payload.query ? data.map(mapResponseToReplayRecord) : [],
-      // for the replay tab in transactions, if payload.query is undefined,
-      // this means the transaction has no related replays.
-      // but because we cannot query for an empty list of IDs (e.g. `id:[]` breaks our search endpoint),
-      // and leaving query empty results in ALL replays being returned for a specified project
-      // (which doesn't make sense as we want to show no replays),
-      // we essentially want to hardcode no replays being returned.
+      replays: data.map(mapResponseToReplayRecord),
     };
   } catch (error: any) {
     if (error.responseJSON?.detail) {

static/app/utils/replays/hooks/useReplayList.tsx

@@ -15,6 +15,7 @@ type Options = {
   eventView: EventView;
   location: Location<ReplayListLocationQuery>;
   organization: Organization;
+  enabled?: boolean;
   perPage?: number;
   queryReferrer?: ReplayListQueryReferrer;
 };
@@ -24,6 +25,7 @@ type State = Awaited<ReturnType<typeof fetchReplayList>> & {isFetching: boolean}
 type Result = State;
 
 function useReplayList({
+  enabled = true,
   eventView,
   location,
   organization,
@@ -44,8 +46,11 @@ function useReplayList({
     api.clear();
     setData(prev => ({
       ...prev,
-      isFetching: true,
+      isFetching: enabled ? true : false,
     }));
+    if (!enabled) {
+      return;
+    }
     const response = await fetchReplayList({
       api,
       organization,
@@ -57,7 +62,16 @@ function useReplayList({
     });
 
     setData({...response, isFetching: false});
-  }, [api, organization, location, eventView, queryReferrer, perPage, selection]);
+  }, [
+    api,
+    organization,
+    location,
+    eventView,
+    queryReferrer,
+    perPage,
+    selection,
+    enabled,
+  ]);
 
   useEffect(() => {
     loadReplays();

static/app/utils/replays/playback/providers/replayPlaylistProvider.tsx

@@ -0,0 +1,19 @@
+import type {ReactNode} from 'react';
+import {createContext, useContext} from 'react';
+
+import type {ReplayListRecord} from 'sentry/views/replays/types';
+
+interface Props {
+  children: ReactNode;
+  replays: ReplayListRecord[] | undefined;
+}
+
+const Context = createContext<ReplayListRecord[] | undefined>(undefined);
+
+export function ReplayPlaylistProvider({children, replays}: Props) {
+  return <Context value={replays}>{children}</Context>;
+}
+
+export function useReplayPlaylist() {
+  return useContext(Context);
+}

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

@@ -414,7 +414,7 @@ describe('GroupReplays', () => {
       expect(await screen.findAllByText('testDisplayName')).toHaveLength(2);
 
       const expectedQuery =
-        'query=&referrer=%2Forganizations%2F%3AorgId%2Fissues%2F%3AgroupId%2Freplays%2F&statsPeriod=14d&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

@@ -244,6 +244,7 @@ function GroupReplaysTable({
 
   const replayTable = (
     <ReplayTable
+      eventView={eventView}
       columns={[
         ...(selectedReplay ? [ReplayPlayPauseColumn] : []),
         ...(allMobileProj ? VISIBLE_COLUMNS_MOBILE : VISIBLE_COLUMNS),

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

@@ -72,7 +72,6 @@ const renderComponent = ({
 
 describe('TransactionReplays', () => {
   let eventsMockApi: jest.Mock<any, any>;
-  let replaysMockApi: jest.Mock<any, any>;
   beforeEach(() => {
     MockApiClient.addMockResponse({
       method: 'GET',
@@ -97,13 +96,6 @@ describe('TransactionReplays', () => {
       },
       statusCode: 200,
     });
-    replaysMockApi = MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/replays/',
-      body: {
-        data: [],
-      },
-      statusCode: 200,
-    });
   });
 
   afterEach(() => {
@@ -140,29 +132,10 @@ describe('TransactionReplays', () => {
     });
   });
 
-  it('should snapshot empty state', async () => {
-    const mockApi = MockApiClient.addMockResponse({
-      url: mockReplaysUrl,
-      body: {
-        data: [],
-      },
-      statusCode: 200,
-    });
-
-    renderComponent();
-
-    await waitFor(() => {
-      expect(mockApi).toHaveBeenCalledTimes(1);
-    });
-  });
-
   it('should show empty message when no replays are found', async () => {
     renderComponent();
 
-    await waitFor(() => {
-      expect(replaysMockApi).toHaveBeenCalledTimes(1);
-    });
-    expect(screen.getByText('No replays found')).toBeInTheDocument();
+    await screen.findByText('No replays found');
   });
 
   it('should show loading indicator when loading replays', async () => {
@@ -234,7 +207,8 @@ describe('TransactionReplays', () => {
     expect(screen.getAllByText('testDisplayName')).toHaveLength(2);
 
     const expectedQuery =
-      'project=1&query=test&referrer=replays%2F&statsPeriod=14d&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

@@ -98,6 +98,13 @@ function ReplaysContent({
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.sm})`);
 
   const {replays, isFetching, fetchError} = useReplayList({
+    enabled: Boolean(eventView.query !== ''),
+    // for the replay tab in transactions, if payload.query is undefined,
+    // this means the transaction has no related replays.
+    // but because we cannot query for an empty list of IDs (e.g. `id:[]` breaks our search endpoint),
+    // and leaving query empty results in ALL replays being returned for a specified project
+    // (which doesn't make sense as we want to show no replays),
+    // we essentially want to hardcode no replays being returned.
     eventView,
     location: newLocation,
     organization,
@@ -114,6 +121,7 @@ function ReplaysContent({
   return (
     <Layout.Main width="full">
       <ReplayTable
+        eventView={eventView}
         columns={[
           ReplaySessionColumn,
           ...(hasRoomForColumns ? [ReplaySlowestTransactionColumn] : []),