fix(starfish): Special cursor name for span table cursor (#50966)

The other tables on endpoint overview try to apply
the cursor and it breaks the page!

static/app/views/starfish/queries/useSpanList.tsx

@@ -30,7 +30,8 @@ export const useSpanList = (
   spanCategory?: string,
   orderBy?: string,
   limit?: number,
-  referrer = 'use-span-list'
+  referrer = 'use-span-list',
+  cursor?: string
 ) => {
   const location = useLocation();
 
@@ -48,6 +49,7 @@ export const useSpanList = (
     initialData: [],
     limit,
     referrer,
+    cursor,
   });
 
   return {isLoading, data, pageLinks};

static/app/views/starfish/utils/useSpansQuery.tsx

@@ -27,7 +27,9 @@ export function useSpansQuery<T = any[]>({
   limit,
   enabled,
   referrer = 'use-spans-query',
+  cursor,
 }: {
+  cursor?: string;
   enabled?: boolean;
   eventView?: EventView;
   initialData?: any;
@@ -41,7 +43,7 @@ export function useSpansQuery<T = any[]>({
   });
   if (isDiscoverFunction(queryFunction) || isDiscoverTimeseriesFunction(queryFunction)) {
     if (eventView) {
-      return queryFunction({eventView, initialData, limit, enabled, referrer});
+      return queryFunction({eventView, initialData, limit, enabled, referrer, cursor});
     }
     throw new Error(
       'eventView argument must be defined when Starfish useDiscover is true'
@@ -96,8 +98,10 @@ export function useWrappedDiscoverTimeseriesQuery({
   enabled,
   initialData,
   referrer,
+  cursor,
 }: {
   eventView: EventView;
+  cursor?: string;
   enabled?: boolean;
   initialData?: any;
   referrer?: string;
@@ -122,6 +126,7 @@ export function useWrappedDiscoverTimeseriesQuery({
       partial: 1,
       orderby: eventView.sorts?.[0] ? encodeSort(eventView.sorts?.[0]) : undefined,
       interval: eventView.interval,
+      cursor,
     }),
     options: {
       enabled,
@@ -144,8 +149,10 @@ export function useWrappedDiscoverQuery({
   enabled,
   referrer,
   limit,
+  cursor,
 }: {
   eventView: EventView;
+  cursor?: string;
   enabled?: boolean;
   initialData?: any;
   limit?: number;
@@ -158,6 +165,7 @@ export function useWrappedDiscoverQuery({
     orgSlug: organization.slug,
     location,
     referrer,
+    cursor,
     limit,
     options: {
       enabled,

static/app/views/starfish/views/spans/spansTable.tsx

@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {urlEncode} from '@sentry/utils';
 
@@ -8,7 +9,8 @@ import GridEditable, {
 } from 'sentry/components/gridEditable';
 import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
-import Pagination from 'sentry/components/pagination';
+import Pagination, {CursorHandler} from 'sentry/components/pagination';
+import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {TableColumnSort} from 'sentry/views/discover/table/types';
 import DurationCell from 'sentry/views/starfish/components/tableCells/durationCell';
@@ -18,6 +20,8 @@ import {useSpanList} from 'sentry/views/starfish/queries/useSpanList';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
+const SPANS_CURSOR_NAME = 'spansCursor';
+
 type Props = {
   moduleName: ModuleName;
   onSetOrderBy: (orderBy: string) => void;
@@ -61,14 +65,24 @@ export default function SpansTable({
   limit = 25,
 }: Props) {
   const location = useLocation();
+  const spansCursor = decodeScalar(location.query?.[SPANS_CURSOR_NAME]);
   const {isLoading, data, pageLinks} = useSpanList(
     moduleName ?? ModuleName.ALL,
     undefined,
     spanCategory,
     orderBy,
-    limit
+    limit,
+    'use-span-list',
+    spansCursor
   );
 
+  const handleCursor: CursorHandler = (cursor, pathname, query) => {
+    browserHistory.push({
+      pathname,
+      query: {...query, [SPANS_CURSOR_NAME]: cursor},
+    });
+  };
+
   return (
     <Fragment>
       <GridEditable
@@ -84,7 +98,7 @@ export default function SpansTable({
         }}
         location={location}
       />
-      <Pagination pageLinks={pageLinks} />
+      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
     </Fragment>
   );
 }