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

static/app/components/replays/replayController.tsx

@@ -9,7 +9,7 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {ReplayFullscreenButton} from 'sentry/components/replays/replayFullscreenButton';
 import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
 import TimeAndScrubberGrid from 'sentry/components/replays/timeAndScrubberGrid';
-import {IconNext, IconRewind10} from 'sentry/icons';
+import {IconChevron, IconRewind10} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {getNextReplayFrame} from 'sentry/utils/replays/getReplayEvent';
@@ -46,7 +46,7 @@ function ReplayPlayPauseBar({isLoading}: {isLoading?: boolean}) {
         disabled={isLoading}
         size="sm"
         title={t('Next breadcrumb')}
-        icon={<IconNext size="sm" />}
+        icon={<IconChevron direction="right" />}
         onClick={() => {
           if (!replay) {
             return;

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

@@ -1,4 +1,5 @@
 import type {RefObject} from 'react';
+import {useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
@@ -42,6 +43,17 @@ export default function ReplayTable({
   const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
   const hasInteractiveColumn = columns.some(col => col.interactive);
 
+  const start = useMemo(() => {
+    const earliestReplayStartedAt = replays.reduce(
+      (acc: number, replay) => Math.min(replay.started_at?.getTime() ?? 0, acc),
+      Infinity
+    );
+
+    return replays.length > 0
+      ? new Date(earliestReplayStartedAt).toISOString()
+      : undefined;
+  }, [replays]);
+
   if (isPending) {
     return (
       <StyledSimpleTable
@@ -112,6 +124,7 @@ export default function ReplayTable({
               <column.Component
                 columnIndex={columnIndex}
                 replay={replay}
+                start={start ?? ''}
                 rowIndex={rowIndex}
                 showDropdownFilters={showDropdownFilters}
               />

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

@@ -25,7 +25,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';
@@ -43,6 +43,8 @@ import type {
   ReplayRecordNestedFieldName,
 } from 'sentry/views/replays/types';
 
+import {DEFAULT_SORT} from './useReplayTableSort';
+
 type ListRecord = ReplayListRecord | ReplayListRecordWithTx;
 
 interface HeaderProps {
@@ -56,6 +58,7 @@ interface CellProps {
   replay: ListRecord;
   rowIndex: number;
   showDropdownFilters: boolean;
+  start: string;
 }
 
 export interface ReplayTableColumn {
@@ -505,7 +508,7 @@ export const ReplaySessionColumn: ReplayTableColumn = {
   interactive: true,
   sortKey: 'started_at',
   width: 'minmax(150px, 1fr)',
-  Component: ({replay}) => {
+  Component: ({replay, start}) => {
     const routes = useRoutes();
     const location = useLocation();
     const organization = useOrganization();
@@ -522,18 +525,25 @@ export const ReplaySessionColumn: ReplayTableColumn = {
 
     const referrer = getRouteStringFromRoutes(routes);
     const eventView = EventView.fromLocation(location);
+
+    // This is a fix to get the 'sort' query string to work without explicitly dirtying the URL with fields params
+    const sort = location.query.sort ?? encodeSort(DEFAULT_SORT);
     const replayDetailsPathname = makeReplaysPathname({
       path: `/${replay.id}/`,
       organization,
     });
 
-    const detailsTab = () => ({
-      pathname: replayDetailsPathname,
-      query: {
-        referrer,
-        ...eventView.generateQueryStringObject(),
-      },
-    });
+    const detailsTab = () => {
+      return {
+        pathname: replayDetailsPathname,
+        query: {
+          referrer,
+          ...eventView.generateQueryStringObject(),
+          playlistStart: start,
+          sort,
+        },
+      };
+    };
     const trackNavigationEvent = () =>
       trackAnalytics('replay.list-navigate-to-details', {
         project_id: project?.id,

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

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

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

@@ -1,14 +1,14 @@
-import {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';
@@ -19,20 +19,25 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
 import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
+import type {ReplayListRecord} from 'sentry/views/replays/types';
 
 interface Props {
+  nextReplay: ReplayListRecord | undefined;
+  previousReplay: ReplayListRecord | undefined;
   readerResult: ReturnType<typeof useLoadReplayReader>;
 }
 
-export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
+export default function ReplayDetailsPageBreadcrumbs({
+  readerResult,
+  nextReplay,
+  previousReplay,
+}: Props) {
   const replayRecord = readerResult.replayRecord;
   const organization = useOrganization();
   const location = useLocation();
   const eventView = EventView.fromLocation(location);
   const project = useProjectFromId({project_id: replayRecord?.project_id ?? undefined});
-  const [isHovered, setIsHovered] = useState(false);
   const {currentTime} = useReplayContext();
-
   // Create URL with current timestamp for copying
   const replayUrlWithTimestamp = replayRecord
     ? (() => {
@@ -74,12 +79,7 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
 
   const replayCrumb = {
     label: replayRecord ? (
-      <Flex
-        align="center"
-        gap="xs"
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
+      <Flex align="center" gap="xs">
         <div
           onClick={() =>
             copy(replayUrlWithTimestamp, {
@@ -89,21 +89,43 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
         >
           {getShortEventId(replayRecord?.id)}
         </div>
-        {isHovered && (
-          <Tooltip title={t('Copy link to replay at current timestamp')}>
-            <Button
-              aria-label={t('Copy link to replay at current timestamp')}
-              onClick={() =>
-                copy(replayUrlWithTimestamp, {
-                  successMessage: t('Copied replay link to clipboard'),
-                })
-              }
-              size="zero"
-              borderless
-              icon={<IconCopy size="xs" color="subText" />}
+        <Tooltip title={t('Copy link to replay at current timestamp')}>
+          <Button
+            aria-label={t('Copy link to replay at current timestamp')}
+            onClick={() =>
+              copy(replayUrlWithTimestamp, {
+                successMessage: t('Copied replay link to clipboard'),
+              })
+            }
+            size="zero"
+            borderless
+            icon={<IconCopy size="xs" color="subText" />}
+          />
+        </Tooltip>
+        <Flex>
+          <ButtonBar merged gap="0">
+            <LinkButton
+              size="xs"
+              icon={<IconPrevious />}
+              disabled={!previousReplay}
+              to={{
+                pathname: previousReplay
+                  ? `/explore/replays/${previousReplay.id}/`
+                  : undefined,
+                query: {...location.query},
+              }}
+            />
+            <LinkButton
+              size="xs"
+              icon={<IconNext />}
+              disabled={!nextReplay}
+              to={{
+                pathname: nextReplay ? `/explore/replays/${nextReplay.id}/` : undefined,
+                query: {...location.query},
+              }}
             />
-          </Tooltip>
-        )}
+          </ButtonBar>
+        </Flex>
       </Flex>
     ) : (
       <Placeholder width="100%" height="16px" />

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/details.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useMemo} from 'react';
 import styled from '@emotion/styled';
 import invariant from 'invariant';
 
@@ -8,11 +8,16 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {decodeScalar} from 'sentry/utils/queryString';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
+import useReplayListQueryKey from 'sentry/utils/replays/hooks/useReplayListQueryKey';
 import useReplayPageview from 'sentry/utils/replays/hooks/useReplayPageview';
+import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import useUrlParams from 'sentry/utils/url/useUrlParams';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
@@ -23,6 +28,7 @@ import ReplayDetailsMetadata from 'sentry/views/replays/detail/header/replayDeta
 import ReplayDetailsPageBreadcrumbs from 'sentry/views/replays/detail/header/replayDetailsPageBreadcrumbs';
 import ReplayDetailsUserBadge from 'sentry/views/replays/detail/header/replayDetailsUserBadge';
 import ReplayDetailsPage from 'sentry/views/replays/detail/page';
+import type {ReplayListRecord} from 'sentry/views/replays/types';
 
 export default function ReplayDetails() {
   const user = useUser();
@@ -41,6 +47,50 @@ export default function ReplayDetails() {
   });
   const {replay, replayRecord} = readerResult;
 
+  const {playlistStart, ...query} = useLocationQuery({
+    fields: {
+      cursor: decodeScalar,
+      environment: decodeList,
+      project: decodeList,
+      sort: decodeScalar,
+      query: decodeScalar,
+      playlistStart: decodeScalar,
+      statsPeriod: decodeScalar,
+      utc: decodeScalar,
+    },
+  });
+  const {getParamValue} = useUrlParams('sort');
+  const sortQuery = getParamValue();
+
+  const queryKey = useReplayListQueryKey({
+    options: {query: {...query, start: playlistStart, sort: sortQuery}},
+    organization,
+    queryReferrer: 'replayList',
+  });
+  const {data} = useApiQuery<{
+    data: ReplayListRecord[];
+    enabled: true;
+  }>(queryKey, {staleTime: 0});
+
+  const replays = useMemo(() => data?.data?.map(mapResponseToReplayRecord) ?? [], [data]);
+
+  const currentReplayIndex = useMemo(
+    () => replays.findIndex(r => r.id === replayRecord?.id),
+    [replays, replayRecord]
+  );
+
+  const nextReplay = useMemo(
+    () =>
+      currentReplayIndex < replays.length - 1
+        ? replays[currentReplayIndex + 1]
+        : undefined,
+    [replays, currentReplayIndex]
+  );
+  const previousReplay = useMemo(
+    () => (currentReplayIndex > 0 ? replays[currentReplayIndex - 1] : undefined),
+    [replays, currentReplayIndex]
+  );
+
   useReplayPageview('replay.details-time-spent');
   useRouteAnalyticsEventNames('replay_details.viewed', 'Replay Details: Viewed');
   useRouteAnalyticsParams({
@@ -58,7 +108,11 @@ export default function ReplayDetails() {
   const content = (
     <Fragment>
       <Header>
-        <ReplayDetailsPageBreadcrumbs readerResult={readerResult} />
+        <ReplayDetailsPageBreadcrumbs
+          readerResult={readerResult}
+          nextReplay={nextReplay}
+          previousReplay={previousReplay}
+        />
         <ReplayDetailsHeaderActions readerResult={readerResult} />
         <ReplayDetailsUserBadge readerResult={readerResult} />
         <ReplayDetailsMetadata readerResult={readerResult} />