ref(replays): Rename and export default sort constant for replay list; update usages across components (#103248)

- Changed `DEFAULT_SORT` to `DEFAULT_REPLAY_LIST_SORT` for clarity and
consistency.
- Updated `useReplayTableSort` to use the new constant.
- Removed unused `DEFAULT_SORT` from `fetchReplayList`.
- Updated sorting logic in `useReplaysFromIssue` and
`useReplaysFromTransaction` to utilize the new constant.
- Marked `useReplayList` as deprecated in favor of `useApiQuery`.

Author: jerryzhou196

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

@@ -12,10 +12,11 @@ interface Props {
   queryParamKey?: string;
 }
 
-const DEFAULT_SORT = {field: 'started_at', kind: 'desc'} as const;
+const DECODED_DEFAULT_REPLAY_LIST_SORT: Sort = {field: 'started_at', kind: 'desc'};
+export const DEFAULT_REPLAY_LIST_SORT = encodeSort(DECODED_DEFAULT_REPLAY_LIST_SORT);
 
 export default function useReplayTableSort({
-  defaultSort = DEFAULT_SORT,
+  defaultSort = DECODED_DEFAULT_REPLAY_LIST_SORT,
   queryParamKey = 'sort',
 }: Props = {}) {
   const organization = useOrganization();

static/app/utils/replays/fetchReplayList.tsx

@@ -10,8 +10,6 @@ import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import type {ReplayListQueryReferrer, ReplayListRecord} from 'sentry/views/replays/types';
 
-export const DEFAULT_SORT = '-started_at';
-
 type State = {
   fetchError: undefined | RequestError;
   pageLinks: null | string;

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

@@ -24,6 +24,10 @@ type State = Awaited<ReturnType<typeof fetchReplayList>> & {isFetching: boolean}
 
 type Result = State;
 
+/**
+ * @deprecated due to its reliance on EventView which is unpleasant to work with
+ * Use useApiQuery instead
+ */
 function useReplayList({
   enabled = true,
   eventView,

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

@@ -2,12 +2,12 @@ import {useCallback, useEffect, useMemo, useState} from 'react';
 import * as Sentry from '@sentry/react';
 import type {Location} from 'history';
 
+import {DEFAULT_REPLAY_LIST_SORT} from 'sentry/components/replays/table/useReplayTableSort';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {IssueCategory, type Group} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {decodeScalar} from 'sentry/utils/queryString';
-import {DEFAULT_SORT} from 'sentry/utils/replays/fetchReplayList';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
 import useCleanQueryParamsOnRouteLeave from 'sentry/utils/useCleanQueryParamsOnRouteLeave';
@@ -66,7 +66,7 @@ export default function useReplaysFromIssue({
       query: replayIds.length ? `id:[${String(replayIds)}]` : `id:1`,
       range: '90d',
       projects: [],
-      orderby: decodeScalar(location.query.sort, DEFAULT_SORT),
+      orderby: decodeScalar(location.query.sort, DEFAULT_REPLAY_LIST_SORT),
     });
   }, [location.query.sort, replayIds]);
 

static/app/views/performance/transactionSummary/transactionReplays/useReplaysFromTransaction.tsx

@@ -2,11 +2,11 @@ import {useCallback, useEffect, useMemo, useState} from 'react';
 import * as Sentry from '@sentry/react';
 import type {Location} from 'history';
 
+import {DEFAULT_REPLAY_LIST_SORT} from 'sentry/components/replays/table/useReplayTableSort';
 import type {Organization} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
 import {doDiscoverQuery} from 'sentry/utils/discover/genericDiscoverQuery';
 import {decodeScalar} from 'sentry/utils/queryString';
-import {DEFAULT_SORT} from 'sentry/utils/replays/fetchReplayList';
 import useApi from 'sentry/utils/useApi';
 import type {ReplayListLocationQuery} from 'sentry/views/replays/types';
 import {REPLAY_LIST_FIELDS} from 'sentry/views/replays/types';
@@ -90,7 +90,7 @@ function useReplaysFromTransaction({
       fields: REPLAY_LIST_FIELDS,
       projects: [],
       query: response.replayIds.length ? `id:[${String(response.replayIds)}]` : undefined,
-      orderby: decodeScalar(location.query.sort, DEFAULT_SORT),
+      orderby: decodeScalar(location.query.sort, DEFAULT_REPLAY_LIST_SORT),
     });
   }, [location.query.sort, response.replayIds]);