feat(issues): Split out issue event navigation

Fixes an issue where preloading the next event didn't have the correct query parameters, meaning preloading wasn't working. Splits out the hooks and components for all that preloading stuff into its own component.
getsentry · Jan 7, 2025 · fbc6b70 · fbc6b70
1 parent bb58388
commit fbc6b70
Show file tree

Hide file tree

Showing 6 changed files with 349 additions and 304 deletions.
diff --git a/static/app/views/issueDetails/groupDetails.tsx b/static/app/views/issueDetails/groupDetails.tsx
@@ -238,7 +238,6 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
   } = useGroupEvent({
     groupId,
     eventId: params.eventId,
-    environments,
   });
 
   const {

diff --git a/static/app/views/issueDetails/streamline/eventNavigation.spec.tsx b/static/app/views/issueDetails/streamline/eventNavigation.spec.tsx
@@ -5,9 +5,8 @@ import {LocationFixture} from 'sentry-fixture/locationFixture';
 import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import * as useMedia from 'sentry/utils/useMedia';
 import {SectionKey, useIssueDetails} from 'sentry/views/issueDetails/streamline/context';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 
@@ -16,7 +15,7 @@ import {IssueEventNavigation} from './eventNavigation';
 jest.mock('sentry/views/issueDetails/streamline/context');
 
 describe('EventNavigation', () => {
-  const {organization, router} = initializeOrg();
+  const {organization} = initializeOrg();
   const group = GroupFixture({id: 'group-id'});
   const testEvent = EventFixture({
     id: 'event-id',
@@ -91,96 +90,6 @@ describe('EventNavigation', () => {
     });
   });
 
-  describe('recommended event tabs', () => {
-    it('can navigate to the oldest event', async () => {
-      jest.spyOn(useMedia, 'default').mockReturnValue(true);
-
-      render(<IssueEventNavigation {...defaultProps} />, {router});
-
-      await userEvent.click(await screen.findByRole('tab', {name: 'First'}));
-
-      expect(router.push).toHaveBeenCalledWith({
-        pathname: '/organizations/org-slug/issues/group-id/events/oldest/',
-        query: {referrer: 'oldest-event'},
-      });
-    });
-
-    it('can navigate to the latest event', async () => {
-      jest.spyOn(useMedia, 'default').mockReturnValue(true);
-
-      render(<IssueEventNavigation {...defaultProps} />, {router});
-
-      await userEvent.click(await screen.findByRole('tab', {name: 'Last'}));
-
-      expect(router.push).toHaveBeenCalledWith({
-        pathname: '/organizations/org-slug/issues/group-id/events/latest/',
-        query: {referrer: 'latest-event'},
-      });
-    });
-
-    it('can navigate to the recommended event', async () => {
-      jest.spyOn(useMedia, 'default').mockReturnValue(true);
-
-      const recommendedEventRouter = RouterFixture({
-        params: {eventId: 'latest'},
-        location: LocationFixture({
-          pathname: `/organizations/org-slug/issues/group-id/events/latest/`,
-        }),
-      });
-
-      render(<IssueEventNavigation {...defaultProps} />, {
-        router: recommendedEventRouter,
-      });
-
-      await userEvent.click(await screen.findByRole('tab', {name: 'Rec.'}));
-
-      expect(recommendedEventRouter.push).toHaveBeenCalledWith({
-        pathname: '/organizations/org-slug/issues/group-id/events/recommended/',
-        query: {referrer: 'recommended-event'},
-      });
-    });
-  });
-
-  it('can navigate next/previous events', async () => {
-    render(<IssueEventNavigation {...defaultProps} />);
-
-    expect(await screen.findByRole('button', {name: 'Previous Event'})).toHaveAttribute(
-      'href',
-      `/organizations/org-slug/issues/group-id/events/prev-event-id/?referrer=previous-event`
-    );
-    expect(screen.getByRole('button', {name: 'Next Event'})).toHaveAttribute(
-      'href',
-      `/organizations/org-slug/issues/group-id/events/next-event-id/?referrer=next-event`
-    );
-  });
-
-  it('can preload next/previous events', async () => {
-    const event = EventFixture({
-      nextEventID: 'next-event-id',
-      previousEventID: 'prev-event-id',
-    });
-    const mockNextEvent = MockApiClient.addMockResponse({
-      url: `/organizations/org-slug/issues/group-id/events/next-event-id/`,
-      body: EventFixture(),
-    });
-    const mockPreviousEvent = MockApiClient.addMockResponse({
-      url: `/organizations/org-slug/issues/group-id/events/prev-event-id/`,
-      body: EventFixture(),
-    });
-    render(<IssueEventNavigation {...defaultProps} event={event} />);
-
-    expect(mockNextEvent).not.toHaveBeenCalled();
-    expect(mockPreviousEvent).not.toHaveBeenCalled();
-
-    await userEvent.hover(await screen.findByRole('button', {name: 'Next Event'}));
-
-    await waitFor(() => expect(mockNextEvent).toHaveBeenCalled());
-    expect(mockPreviousEvent).not.toHaveBeenCalled();
-
-    await userEvent.hover(screen.getByRole('button', {name: 'Previous Event'}));
-    await waitFor(() => expect(mockPreviousEvent).toHaveBeenCalled());
-  });
-
   describe('counts', () => {
     it('renders default counts', async () => {
       render(<IssueEventNavigation {...defaultProps} />);