feat(replay): Add pagination to Playlist view

This adds our normal pagination at the end of the replays table in the Playlist view

Author: billyvg

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

@@ -8,25 +8,32 @@ interface Props {
   currentReplay: ReplayListRecord | undefined;
   isLoading: boolean;
   replays: ReplayListRecord[];
+  pageLinks?: string | null;
 }
 
 const Context = createContext<{
   currentReplayIndex: number;
   isLoading: boolean;
+  pageLinks: string | null;
   replays: ReplayListRecord[];
-}>({currentReplayIndex: -1, replays: [], isLoading: false});
+}>({currentReplayIndex: -1, replays: [], isLoading: false, pageLinks: null});
 
 export function ReplayPlaylistProvider({
   children,
   currentReplay,
   isLoading,
+  pageLinks = null,
   replays,
 }: Props) {
   const currentReplayIndex = useMemo(
     () => replays?.findIndex(r => r.id === currentReplay?.id) ?? -1,
     [replays, currentReplay]
   );
-  return <Context value={{replays, currentReplayIndex, isLoading}}>{children}</Context>;
+  return (
+    <Context value={{replays, currentReplayIndex, isLoading, pageLinks}}>
+      {children}
+    </Context>
+  );
 }
 
 export function useReplayPlaylist() {

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

@@ -81,13 +81,14 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
       ? (query.referrer as ReplayListQueryReferrer)
       : 'replayList',
   });
-  const {data, isLoading} = useApiQuery<{
+  const {data, isLoading, getResponseHeader} = useApiQuery<{
     data: ReplayListRecord[];
     enabled: boolean;
   }>(queryKey, {
     staleTime: 0,
     enabled: Boolean(playlistStart && playlistEnd),
   });
+  const pageLinks = getResponseHeader?.('Link') ?? null;
 
   const replays = useMemo(() => data?.data?.map(mapResponseToReplayRecord) ?? [], [data]);
 
@@ -109,6 +110,7 @@ export default function ReplayDetailsProviders({children, replay, projectSlug}:
                   <ReplayPlaylistProvider
                     currentReplay={replayRecord}
                     isLoading={isLoading}
+                    pageLinks={pageLinks}
                     replays={replays}
                   >
                     {children}

static/app/views/replays/detail/playlist/index.tsx

@@ -4,6 +4,7 @@ import {Flex, Grid} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {Alert} from 'sentry/components/core/alert';
+import Pagination from 'sentry/components/pagination';
 import ReplayTable from 'sentry/components/replays/table/replayTable';
 import {
   ReplayBrowserColumn,
@@ -16,6 +17,7 @@ import {ProvidedFormattedQuery} from 'sentry/components/searchQueryBuilder/forma
 import {t} from 'sentry/locale';
 import {useReplayPlaylist} from 'sentry/utils/replays/playback/providers/replayPlaylistProvider';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 
 const VISIBLE_COLUMNS = [
@@ -34,8 +36,9 @@ const MOBILE_COLUMNS = [
 ];
 
 export default function Playlist() {
-  const {replays, currentReplayIndex, isLoading} = useReplayPlaylist();
+  const {replays, currentReplayIndex, isLoading, pageLinks} = useReplayPlaylist();
   const location = useLocation();
+  const navigate = useNavigate();
   const [query] = useQueryState('query', parseAsString.withDefault(''));
 
   const {allMobileProj} = useAllMobileProj({});
@@ -55,17 +58,28 @@ export default function Playlist() {
             <Text>{t('This playlist is filtered by:')} </Text>
           </Alert>
         ) : null}
-        <ReplayTable
-          columns={columns}
-          error={null}
-          highlightedRowIndex={currentReplayIndex}
-          // we prefer isLoading since isPending is true even if not enabled
-          isPending={isLoading}
-          query={location.query}
-          replays={replays}
-          showDropdownFilters={false}
-          stickyHeader
-        />
+        <Flex direction="column" gap="md">
+          <ReplayTable
+            columns={columns}
+            error={null}
+            highlightedRowIndex={currentReplayIndex}
+            // we prefer isLoading since isPending is true even if not enabled
+            isPending={isLoading}
+            query={location.query}
+            replays={replays}
+            showDropdownFilters={false}
+            stickyHeader
+          />
+          <Pagination
+            pageLinks={pageLinks}
+            onCursor={(cursor, path, searchQuery) => {
+              navigate({
+                pathname: path,
+                query: {...searchQuery, cursor},
+              });
+            }}
+          />
+        </Flex>
       </Grid>
     </Flex>
   );