feat(helpful-event): Use /helpful endpoint on issue details page (#51771)

Closes https://github.com/getsentry/sentry/issues/51736

static/app/views/issueDetails/groupDetails.spec.jsx

@@ -303,4 +303,22 @@ describe('groupDetails', () => {
       await screen.findByText('The project other-project-slug does not exist')
     ).toBeInTheDocument();
   });
+
+  it('uses /helpful endpoint when feature flag is on and no event is provided', async function () {
+    const helpfulMock = MockApiClient.addMockResponse({
+      url: `/issues/${group.id}/events/helpful/`,
+      statusCode: 200,
+      body: event,
+    });
+
+    createWrapper({
+      ...defaultInit,
+      organization: {
+        ...defaultInit.organization,
+        features: ['issue-details-most-helpful-event'],
+      },
+    });
+
+    await waitFor(() => expect(helpfulMock).toHaveBeenCalledTimes(1));
+  });
 });

static/app/views/issueDetails/groupDetails.tsx

@@ -231,24 +231,43 @@ function useRefetchGroupForReprocessing({
   }, [hasReprocessingV2Feature, refetchGroup]);
 }
 
-function useEventApiQuery(
-  eventID: string,
-  queryKey: [string, {query: {environment?: string[]}}]
-) {
-  const isLatest = eventID === 'latest';
-  const latestEventQuery = useApiQuery<Event>(queryKey, {
+function useEventApiQuery({
+  groupId,
+  eventId,
+  environments,
+}: {
+  environments: string[];
+  groupId: string;
+  eventId?: string;
+}) {
+  const organization = useOrganization();
+  const hasMostHelpfulEventFeature = organization.features.includes(
+    'issue-details-most-helpful-event'
+  );
+  const eventIdUrl = eventId ?? (hasMostHelpfulEventFeature ? 'helpful' : 'latest');
+
+  const queryKey: ApiQueryKey = [
+    `/issues/${groupId}/events/${eventIdUrl}/`,
+    {query: getGroupEventDetailsQueryData({environments})},
+  ];
+
+  const isLatestOrHelpfulEvent = eventIdUrl === 'latest' || eventIdUrl === 'helpful';
+
+  const latestOrHelpfulEvent = useApiQuery<Event>(queryKey, {
+    // Latest/helpful event will change over time, so only cache for 30 seconds
     staleTime: 30000,
     cacheTime: 30000,
-    enabled: isLatest,
+    enabled: isLatestOrHelpfulEvent,
     retry: (_, error) => error.status !== 404,
   });
   const otherEventQuery = useApiQuery<Event>(queryKey, {
+    // Oldest/specific events will never change
     staleTime: Infinity,
-    enabled: !isLatest,
+    enabled: !isLatestOrHelpfulEvent,
     retry: (_, error) => error.status !== 404,
   });
 
-  return isLatest ? latestEventQuery : otherEventQuery;
+  return isLatestOrHelpfulEvent ? latestOrHelpfulEvent : otherEventQuery;
 }
 
 type FetchGroupQueryParameters = {
@@ -309,19 +328,13 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
   const environments = useEnvironmentsFromUrl();
 
   const groupId = params.groupId;
-  const eventId = params.eventId ?? 'latest';
-
-  const eventUrl = `/issues/${groupId}/events/${eventId}/`;
 
   const {
     data: eventData,
     isLoading: loadingEvent,
     isError,
     refetch: refetchEvent,
-  } = useEventApiQuery(eventId, [
-    eventUrl,
-    {query: getGroupEventDetailsQueryData({environments})},
-  ]);
+  } = useEventApiQuery({groupId, eventId: params.eventId, environments});
 
   const {
     data: groupData,