fix(replay): fix useReplayList hook (#103063)

#79136 fixed a bug, but the hardcoding should be specific to
`transactionReplays`, rather than the `fetchReplayList` hook.

Author: jerryzhou196

static/app/utils/replays/fetchReplayList.tsx

@@ -76,13 +76,7 @@ async function fetchReplayList({
     return {
       fetchError: undefined,
       pageLinks,
-      replays: payload.query ? data.map(mapResponseToReplayRecord) : [],
-      // for the replay tab in transactions, if payload.query is undefined,
-      // this means the transaction has no related replays.
-      // but because we cannot query for an empty list of IDs (e.g. `id:[]` breaks our search endpoint),
-      // and leaving query empty results in ALL replays being returned for a specified project
-      // (which doesn't make sense as we want to show no replays),
-      // we essentially want to hardcode no replays being returned.
+      replays: data.map(mapResponseToReplayRecord),
     };
   } catch (error: any) {
     if (error.responseJSON?.detail) {

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

@@ -12,6 +12,7 @@ import type {
 } from 'sentry/views/replays/types';
 
 type Options = {
+  enabled: boolean;
   eventView: EventView;
   location: Location<ReplayListLocationQuery>;
   organization: Organization;
@@ -24,6 +25,7 @@ type State = Awaited<ReturnType<typeof fetchReplayList>> & {isFetching: boolean}
 type Result = State;
 
 function useReplayList({
+  enabled = true,
   eventView,
   location,
   organization,
@@ -46,6 +48,13 @@ function useReplayList({
       ...prev,
       isFetching: true,
     }));
+    if (!enabled) {
+      setData(prev => ({
+        ...prev,
+        isFetching: false,
+      }));
+      return;
+    }
     const response = await fetchReplayList({
       api,
       organization,
@@ -57,7 +66,16 @@ function useReplayList({
     });
 
     setData({...response, isFetching: false});
-  }, [api, organization, location, eventView, queryReferrer, perPage, selection]);
+  }, [
+    api,
+    organization,
+    location,
+    eventView,
+    queryReferrer,
+    perPage,
+    selection,
+    enabled,
+  ]);
 
   useEffect(() => {
     loadReplays();

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

@@ -234,6 +234,7 @@ function GroupReplaysTable({
   });
 
   const replayListData = useReplayList({
+    enabled: true,
     eventView,
     location: useMemo(() => ({query: {}}) as Location<ReplayListLocationQuery>, []),
     organization,

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

@@ -72,7 +72,6 @@ const renderComponent = ({
 
 describe('TransactionReplays', () => {
   let eventsMockApi: jest.Mock<any, any>;
-  let replaysMockApi: jest.Mock<any, any>;
   beforeEach(() => {
     MockApiClient.addMockResponse({
       method: 'GET',
@@ -97,13 +96,6 @@ describe('TransactionReplays', () => {
       },
       statusCode: 200,
     });
-    replaysMockApi = MockApiClient.addMockResponse({
-      url: '/organizations/org-slug/replays/',
-      body: {
-        data: [],
-      },
-      statusCode: 200,
-    });
   });
 
   afterEach(() => {
@@ -140,29 +132,10 @@ describe('TransactionReplays', () => {
     });
   });
 
-  it('should snapshot empty state', async () => {
-    const mockApi = MockApiClient.addMockResponse({
-      url: mockReplaysUrl,
-      body: {
-        data: [],
-      },
-      statusCode: 200,
-    });
-
-    renderComponent();
-
-    await waitFor(() => {
-      expect(mockApi).toHaveBeenCalledTimes(1);
-    });
-  });
-
   it('should show empty message when no replays are found', async () => {
     renderComponent();
 
-    await waitFor(() => {
-      expect(replaysMockApi).toHaveBeenCalledTimes(1);
-    });
-    expect(screen.getByText('No replays found')).toBeInTheDocument();
+    await screen.findByText('No replays found');
   });
 
   it('should show loading indicator when loading replays', async () => {

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

@@ -98,6 +98,13 @@ function ReplaysContent({
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.sm})`);
 
   const {replays, isFetching, fetchError} = useReplayList({
+    enabled: eventView.query !== '',
+    // for the replay tab in transactions, if payload.query is undefined,
+    // this means the transaction has no related replays.
+    // but because we cannot query for an empty list of IDs (e.g. `id:[]` breaks our search endpoint),
+    // and leaving query empty results in ALL replays being returned for a specified project
+    // (which doesn't make sense as we want to show no replays),
+    // we essentially want to hardcode no replays being returned.
     eventView,
     location: newLocation,
     organization,

static/app/views/replays/selectors/exampleReplaysList.tsx

@@ -74,6 +74,7 @@ export default function ExampleReplaysList({
   );
 
   const {replays, isFetching, fetchError} = useReplayList({
+    enabled: true,
     eventView,
     location: emptyLocation,
     organization,