feat(replays): add ability to travel to previous and next replay

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

@@ -17,6 +17,7 @@ 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';
@@ -522,18 +523,40 @@ export const ReplaySessionColumn: ReplayTableColumn = {
 
     const referrer = getRouteStringFromRoutes(routes);
     const eventView = EventView.fromLocation(location);
+
+    const {statsPeriod, ...eventViewQuery} = eventView.generateQueryStringObject();
+
+    let query = {
+      referrer,
+      ...eventViewQuery,
+    };
+
+    if (!eventViewQuery.start && !eventViewQuery.end && typeof statsPeriod === 'string') {
+      const {start: playlistStart, end: playlistEnd} = parseStatsPeriod(statsPeriod);
+      query = {...query, ...{playlistStart, playlistEnd}};
+    }
+
+    if (location.query.cursor) {
+      query = {...query, ...{cursor: location.query.cursor}};
+    }
+
+    // Because the sort field is only generated if the corresponding fields are also in the URL, but we
+    // want to avoid dirtying the URL with fields, we manually add the sort field to the query here.
+    if (location.query.sort) {
+      query = {...query, ...{playlistSort: location.query.sort}};
+    }
+
     const replayDetailsPathname = makeReplaysPathname({
       path: `/${replay.id}/`,
       organization,
     });
 
-    const detailsTab = () => ({
-      pathname: replayDetailsPathname,
-      query: {
-        referrer,
-        ...eventView.generateQueryStringObject(),
-      },
-    });
+    const detailsTab = () => {
+      return {
+        pathname: replayDetailsPathname,
+        query,
+      };
+    };
     const trackNavigationEvent = () =>
       trackAnalytics('replay.list-navigate-to-details', {
         project_id: project?.id,

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';
+        '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';
 
       // Expect the first row to have the correct href
       expect(

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

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

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

@@ -1,18 +1,25 @@
-import {useEffect, type ReactNode} from 'react';
+import {useEffect, useMemo, type ReactNode} from 'react';
 
 import {LocalStorageReplayPreferences} from 'sentry/components/replays/preferences/replayPreferences';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useInitialTimeOffsetMs from 'sentry/utils/replays/hooks/useInitialTimeOffsetMs';
 import useLogReplayDataLoaded from 'sentry/utils/replays/hooks/useLogReplayDataLoaded';
 import useMarkReplayViewed from 'sentry/utils/replays/hooks/useMarkReplayViewed';
+import useReplayListQueryKey from 'sentry/utils/replays/hooks/useReplayListQueryKey';
 import {ReplayPlayerPluginsContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerPluginsContext';
 import {ReplayPlayerSizeContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerSizeContext';
 import {ReplayPlayerStateContextProvider} from 'sentry/utils/replays/playback/providers/replayPlayerStateContext';
+import {ReplayPlaylistProvider} from 'sentry/utils/replays/playback/providers/replayPlaylistProvider';
 import {ReplayPreferencesContextProvider} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
 import {ReplayReaderProvider} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
+import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 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';
 
 interface Props {
   children: ReactNode;
@@ -38,6 +45,44 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
     }
   }, [markAsViewed, organization, projectSlug, replayRecord]);
 
+  const query = useLocationQuery({
+    fields: {
+      cursor: decodeScalar,
+      end: decodeScalar,
+      environment: decodeList,
+      project: decodeList,
+      query: decodeScalar,
+      start: decodeScalar,
+      utc: decodeScalar,
+      playlistStart: decodeScalar,
+      playlistEnd: decodeScalar,
+      playlistSort: decodeScalar,
+      sort: decodeScalar,
+    },
+  });
+
+  const {playlistStart, playlistEnd, playlistSort, ...newQuery} = query;
+
+  if (playlistStart && playlistEnd) {
+    newQuery.start = playlistStart;
+    newQuery.end = playlistEnd;
+  }
+  if (playlistSort) {
+    newQuery.sort = playlistSort;
+  }
+
+  const queryKey = useReplayListQueryKey({
+    options: {query: newQuery},
+    organization,
+    queryReferrer: 'playlist',
+  });
+  const {data} = useApiQuery<{
+    data: ReplayListRecord[];
+    enabled: true;
+  }>(queryKey, {staleTime: 0});
+
+  const replays = useMemo(() => data?.data?.map(mapResponseToReplayRecord) ?? [], [data]);
+
   useLogReplayDataLoaded({projectId: replayRecord.project_id, replay});
 
   return (
@@ -53,7 +98,9 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
                 replay={replay}
               >
                 <ReplaySummaryContextProvider replay={replay} projectSlug={projectSlug}>
-                  {children}
+                  <ReplayPlaylistProvider replays={replays}>
+                    {children}
+                  </ReplayPlaylistProvider>
                 </ReplaySummaryContextProvider>
               </ReplayContextProvider>
             </ReplayPlayerSizeContextProvider>

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx

@@ -1,19 +1,21 @@
-import {useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
-import {Button} from 'sentry/components/core/button';
+import {Button, ButtonBar} from 'sentry/components/core/button';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import {IconCopy} from 'sentry/icons';
+import {IconCopy, IconNext, IconPrevious} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 import EventView from 'sentry/utils/discover/eventView';
 import {getShortEventId} from 'sentry/utils/events';
 import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
+import {useReplayPlaylist} from 'sentry/utils/replays/playback/providers/replayPlaylistProvider';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -33,6 +35,26 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
   const [isHovered, setIsHovered] = useState(false);
   const {currentTime} = useReplayContext();
 
+  const replays = useReplayPlaylist();
+
+  const initialLocation = useRef(location);
+
+  const currentReplayIndex = useMemo(
+    () => replays?.findIndex(r => r.id === replayRecord?.id) ?? -1,
+    [replays, replayRecord]
+  );
+
+  const nextReplay = useMemo(
+    () =>
+      currentReplayIndex >= 0 && currentReplayIndex < (replays?.length ?? 0) - 1
+        ? replays?.[currentReplayIndex + 1]
+        : undefined,
+    [replays, currentReplayIndex]
+  );
+  const previousReplay = useMemo(
+    () => (currentReplayIndex > 0 ? replays?.[currentReplayIndex - 1] : undefined),
+    [replays, currentReplayIndex]
+  );
   // Create URL with current timestamp for copying
   const replayUrlWithTimestamp = replayRecord
     ? (() => {
@@ -74,22 +96,53 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
 
   const replayCrumb = {
     label: replayRecord ? (
-      <Flex
-        align="center"
-        gap="xs"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <div
-          onClick={() =>
-            copy(replayUrlWithTimestamp, {
-              successMessage: t('Copied replay link to clipboard'),
-            })
-          }
+      <Flex>
+        <Flex
+          align="center"
+          gap="xs"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
         >
-          {getShortEventId(replayRecord?.id)}
-        </div>
-        {isHovered && (
+          {organization.features.includes('replay-playlist-view') && (
+            <Flex>
+              <ButtonBar merged gap="0">
+                <LinkButton
+                  size="xs"
+                  icon={<IconPrevious />}
+                  disabled={!previousReplay}
+                  to={{
+                    pathname: previousReplay
+                      ? makeReplaysPathname({
+                          path: `/${previousReplay.id}/`,
+                          organization,
+                        })
+                      : undefined,
+                    query: initialLocation.current.query,
+                  }}
+                />
+                <LinkButton
+                  size="xs"
+                  icon={<IconNext />}
+                  disabled={!nextReplay}
+                  to={{
+                    pathname: nextReplay
+                      ? makeReplaysPathname({path: `/${nextReplay.id}/`, organization})
+                      : undefined,
+                    query: initialLocation.current.query,
+                  }}
+                />
+              </ButtonBar>
+            </Flex>
+          )}
+          <StyledDiv
+            onClick={() =>
+              copy(replayUrlWithTimestamp, {
+                successMessage: t('Copied replay link to clipboard'),
+              })
+            }
+          >
+            {getShortEventId(replayRecord?.id)}
+          </StyledDiv>
           <Tooltip title={t('Copy link to replay at current timestamp')}>
             <Button
               aria-label={t('Copy link to replay at current timestamp')}
@@ -100,10 +153,11 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
               }
               size="zero"
               borderless
+              style={isHovered ? {} : {visibility: 'hidden'}}
               icon={<IconCopy size="xs" color="subText" />}
             />
           </Tooltip>
-        )}
+        </Flex>
       </Flex>
     ) : (
       <Placeholder width="100%" height="16px" />
@@ -122,3 +176,7 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
 const StyledBreadcrumbs = styled(Breadcrumbs)`
   padding: 0;
 `;
+
+const StyledDiv = styled('div')`
+  margin-left: 10px;
+`;

static/app/views/replays/detail/header/replayDetailsUserBadge.tsx

@@ -179,7 +179,7 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) {
       renderError={() => null}
       renderThrottled={() => null}
       renderLoading={() =>
-        replayRecord ? badge : <Placeholder width="30%" height="45px" />
+        replayRecord ? badge : <Placeholder width="30%" height="66px" />
       }
       renderMissing={() => null}
       renderProcessingError={() => badge}

static/app/views/replays/types.tsx

@@ -203,7 +203,8 @@ export type ReplayListLocationQuery = {
 export type ReplayListQueryReferrer =
   | 'replayList'
   | 'issueReplays'
-  | 'transactionReplays';
+  | 'transactionReplays'
+  | 'playlist';
 
 // Sync with ReplayListRecord below
 // Skip some fields because the backend doesn't support them in the field list: