fix(replays): Fix a case where no replay_ids are found in useReplaysFromIssue (#45732)

Fixes #45692

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

@@ -0,0 +1,97 @@
+import {Location} from 'history';
+
+import {reactHooks} from 'sentry-test/reactTestingLibrary';
+
+import {useLocation} from 'sentry/utils/useLocation';
+import useReplaysFromIssue from 'sentry/views/issueDetails/groupReplays/useReplaysFromIssue';
+
+jest.mock('sentry/utils/useLocation');
+
+describe('useReplaysFromIssue', () => {
+  const MockUseLocation = useLocation as jest.MockedFunction<typeof useLocation>;
+
+  const location = {
+    pathname: '',
+    search: '',
+    query: {},
+    hash: '',
+    state: undefined,
+    action: 'PUSH',
+    key: '',
+  } as Location;
+  MockUseLocation.mockReturnValue(location);
+
+  const organization = TestStubs.Organization({
+    features: ['session-replay'],
+  });
+
+  it('should fetch a list of replay ids', async () => {
+    const MOCK_GROUP = TestStubs.Group();
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/replay-count/`,
+      method: 'GET',
+      body: {
+        [MOCK_GROUP.id]: ['replay42', 'replay256'],
+      },
+    });
+
+    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplaysFromIssue, {
+      initialProps: {
+        group: MOCK_GROUP,
+        location,
+        organization,
+      },
+    });
+
+    expect(result.current).toEqual({
+      eventView: null,
+      fetchError: undefined,
+      pageLinks: null,
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      eventView: expect.objectContaining({
+        query: 'id:[replay42,replay256]',
+      }),
+      fetchError: undefined,
+      pageLinks: null,
+    });
+  });
+
+  it('should return an empty EventView when there are no replay_ids returned from the count endpoint', async () => {
+    const MOCK_GROUP = TestStubs.Group();
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/replay-count/`,
+      method: 'GET',
+      body: {},
+    });
+
+    const {result, waitForNextUpdate} = reactHooks.renderHook(useReplaysFromIssue, {
+      initialProps: {
+        group: MOCK_GROUP,
+        location,
+        organization,
+      },
+    });
+
+    expect(result.current).toEqual({
+      eventView: null,
+      fetchError: undefined,
+      pageLinks: null,
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      eventView: expect.objectContaining({
+        query: 'id:[]',
+      }),
+      fetchError: undefined,
+      pageLinks: null,
+    });
+  });
+});

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

@@ -21,7 +21,7 @@ function useReplayFromIssue({
 }) {
   const api = useApi();
 
-  const [replayIds, setReplayIds] = useState<string[]>([]);
+  const [replayIds, setReplayIds] = useState<string[]>();
 
   const [fetchError, setFetchError] = useState();
 
@@ -46,7 +46,7 @@ function useReplayFromIssue({
   }, [api, organization.slug, group.id, group.project.id]);
 
   const eventView = useMemo(() => {
-    if (!replayIds.length) {
+    if (!replayIds) {
       return null;
     }
     return EventView.fromSavedQuery({