feat(issue-details): Allow filters for first/last/recommended (#82476)

This PR does a few things, but mostly addresses the inconsistencies with
filtering in the streamlined UI.

- Filters will now apply to the queries for First/Last/Recommended to
ensure better results for the loaded event, matching the user
expectations. These filters are env, date range, and queries.
- The missing event state has been redesigned to be more helpful,
letting users easily click to recommended/clear filters and adds a
graphic.
- The first/last/recommended buttons will now be accessible even when an
event is not loaded

**Specific event missing**

<img width="1213" alt="image"
src="https://github.com/user-attachments/assets/8ad3aedc-a159-4c51-b733-a693301b4779"
/>

**Query doesn't find anything**

<img width="1182" alt="image"
src="https://github.com/user-attachments/assets/9847c5c3-b6ef-4314-8c57-b032bc1da17e"
/>


**todo**
- [x] Add or update tests

Author: leeandher

static/app/views/issueDetails/groupDetails.tsx

@@ -41,7 +41,6 @@ import useApi from 'sentry/utils/useApi';
 import {useDetailedProject} from 'sentry/utils/useDetailedProject';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useMemoWithPrevious} from 'sentry/utils/useMemoWithPrevious';
-import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import useProjects from 'sentry/utils/useProjects';
@@ -223,8 +222,6 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
   const organization = useOrganization();
   const router = useRouter();
   const params = router.params;
-  const navigate = useNavigate();
-  const defaultIssueEvent = useDefaultIssueEvent();
 
   const [allProjectChanged, setAllProjectChanged] = useState<boolean>(false);
 
@@ -236,7 +233,6 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
   const {
     data: event,
     isPending: loadingEvent,
-    isError: isEventError,
     refetch: refetchEvent,
   } = useGroupEvent({
     groupId,
@@ -252,27 +248,6 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
     refetch: refetchGroupCall,
   } = useGroup({groupId});
 
-  useEffect(() => {
-    const eventIdUrl = params.eventId ?? defaultIssueEvent;
-    const isLatestOrRecommendedEvent =
-      eventIdUrl === 'latest' || eventIdUrl === 'recommended';
-
-    if (isLatestOrRecommendedEvent && isEventError && router.location.query.query) {
-      // If we get an error from the helpful event endpoint, it probably means
-      // the query failed validation. We should remove the query to try again.
-      navigate(
-        {
-          ...router.location,
-          query: {
-            ...router.location.query,
-            query: undefined,
-          },
-        },
-        {replace: true}
-      );
-    }
-  }, [defaultIssueEvent, isEventError, navigate, router.location, params.eventId]);
-
   /**
    * Allows the GroupEventHeader to display the previous event while the new event is loading.
    * This is not closer to the GroupEventHeader because it is unmounted

static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx

@@ -33,7 +33,7 @@ function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) {
   const location = useLocation();
   const organization = useOrganization();
   const hasStreamlinedUI = useHasStreamlinedUI();
-  const eventQuery = useEventQuery({group});
+  const eventQuery = useEventQuery({groupId: group.id});
   const eventView = useIssueDetailsEventView({group});
   const activeAttachmentsTab =
     (location.query.attachmentFilter as EventAttachmentFilter | undefined) ??

static/app/views/issueDetails/groupEventAttachments/useGroupEventAttachments.tsx

@@ -106,7 +106,7 @@ export function useGroupEventAttachments({
   const hasStreamlinedUI = useHasStreamlinedUI();
   const location = useLocation();
   const organization = useOrganization();
-  const eventQuery = useEventQuery({group});
+  const eventQuery = useEventQuery({groupId: group.id});
   const eventView = useIssueDetailsEventView({group});
 
   const fetchAllAvailable = hasStreamlinedUI ? options?.fetchAllAvailable : true;

static/app/views/issueDetails/groupEventDetails/groupEventDetails.tsx

@@ -162,13 +162,11 @@ function GroupEventDetails() {
 
   const renderContent = () => {
     if (isLoadingEvent) {
-      if (hasStreamlinedUI) {
-        return <GroupEventDetailsLoading />;
-      }
-      return <LoadingIndicator />;
+      return hasStreamlinedUI ? <GroupEventDetailsLoading /> : <LoadingIndicator />;
     }
 
-    if (isEventError) {
+    // The streamlined UI uses a different error interface
+    if (isEventError && !hasStreamlinedUI) {
       return (
         <GroupEventDetailsLoadingError
           environments={environments}

static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx

@@ -90,7 +90,7 @@ export function EventDetailsContent({
   group,
   event,
   project,
-}: Required<EventDetailsContentProps>) {
+}: Required<Pick<EventDetailsContentProps, 'group' | 'event' | 'project'>>) {
   const organization = useOrganization();
   const location = useLocation();
   const hasStreamlinedUI = useHasStreamlinedUI();
@@ -463,6 +463,10 @@ export default function GroupEventDetailsContent({
 }: EventDetailsContentProps) {
   const hasStreamlinedUI = useHasStreamlinedUI();
 
+  if (hasStreamlinedUI) {
+    return <EventDetails event={event} group={group} project={project} />;
+  }
+
   if (!event) {
     return (
       <NotFoundMessage>
@@ -471,11 +475,7 @@ export default function GroupEventDetailsContent({
     );
   }
 
-  return hasStreamlinedUI ? (
-    <EventDetails event={event} group={group} project={project} />
-  ) : (
-    <EventDetailsContent group={group} event={event} project={project} />
-  );
+  return <EventDetailsContent group={group} event={event} project={project} />;
 }
 
 /**

static/app/views/issueDetails/streamline/context.tsx

@@ -92,6 +92,8 @@ export interface EventDetailsContextType extends EventDetailsState {
 
 export const EventDetailsContext = createContext<EventDetailsContextType>({
   sectionData: {},
+  navScrollMargin: 0,
+  eventCount: 0,
   dispatch: () => {},
 });
 
@@ -103,6 +105,7 @@ export interface EventDetailsState {
   sectionData: {
     [key in SectionKey]?: SectionConfig;
   };
+  eventCount?: number;
   navScrollMargin?: number;
 }
 
@@ -117,7 +120,15 @@ type UpdateDetailsAction = {
   state?: Omit<EventDetailsState, 'sectionData'>;
 };
 
-export type EventDetailsActions = UpdateSectionAction | UpdateDetailsAction;
+type UpdateEventCountAction = {
+  count: number;
+  type: 'UPDATE_EVENT_COUNT';
+};
+
+export type EventDetailsActions =
+  | UpdateSectionAction
+  | UpdateDetailsAction
+  | UpdateEventCountAction;
 
 function updateSection(
   state: EventDetailsState,
@@ -151,6 +162,8 @@ export function useEventDetailsReducer() {
           return updateSection(state, action.key, action.config ?? {});
         case 'UPDATE_DETAILS':
           return {...state, ...action.state};
+        case 'UPDATE_EVENT_COUNT':
+          return {...state, eventCount: action.count};
         default:
           return state;
       }

static/app/views/issueDetails/streamline/eventDetails.tsx

@@ -13,31 +13,30 @@ import {
   EventDetailsContent,
   type EventDetailsContentProps,
 } from 'sentry/views/issueDetails/groupEventDetails/groupEventDetailsContent';
-import {
-  EventDetailsContext,
-  useEventDetails,
-  useEventDetailsReducer,
-} from 'sentry/views/issueDetails/streamline/context';
+import {useEventDetails} from 'sentry/views/issueDetails/streamline/context';
+import {EventMissingBanner} from 'sentry/views/issueDetails/streamline/eventMissingBanner';
 import {EventTitle} from 'sentry/views/issueDetails/streamline/eventTitle';
 
-export function EventDetails({
-  group,
-  event,
-  project,
-}: Required<EventDetailsContentProps>) {
-  const {eventDetails, dispatch} = useEventDetailsReducer();
+export function EventDetails({group, event, project}: EventDetailsContentProps) {
+  if (!event) {
+    return (
+      <GroupContent role="main">
+        <BannerPadding>
+          <EventMissingBanner />
+        </BannerPadding>
+      </GroupContent>
+    );
+  }
 
   return (
-    <EventDetailsContext.Provider value={{...eventDetails, dispatch}}>
-      <PageErrorBoundary mini message={t('There was an error loading the event content')}>
-        <GroupContent role="main">
-          <StickyEventNav event={event} group={group} />
-          <ContentPadding>
-            <EventDetailsContent group={group} event={event} project={project} />
-          </ContentPadding>
-        </GroupContent>
-      </PageErrorBoundary>
-    </EventDetailsContext.Provider>
+    <PageErrorBoundary mini message={t('There was an error loading the event content')}>
+      <GroupContent role="main">
+        <StickyEventNav event={event} group={group} />
+        <ContentPadding>
+          <EventDetailsContent group={group} event={event} project={project} />
+        </ContentPadding>
+      </GroupContent>
+    </PageErrorBoundary>
   );
 }
 
@@ -97,6 +96,10 @@ const ContentPadding = styled('div')`
   padding: ${space(1)} ${space(1.5)};
 `;
 
+const BannerPadding = styled('div')`
+  padding: 40px;
+`;
+
 const PageErrorBoundary = styled(ErrorBoundary)`
   margin: 0;
   border: 1px solid ${p => p.theme.translucentBorder};

static/app/views/issueDetails/streamline/eventDetailsHeader.tsx

@@ -36,7 +36,7 @@ export function EventDetailsHeader({
   const navigate = useNavigate();
   const location = useLocation();
   const environments = useEnvironmentsFromUrl();
-  const searchQuery = useEventQuery({group});
+  const searchQuery = useEventQuery({groupId: group.id});
   const {baseUrl} = useGroupDetailsRoute();
 
   const issueTypeConfig = getConfigForIssueType(group, project);

static/app/views/issueDetails/streamline/eventGraph.tsx

@@ -1,4 +1,4 @@
-import {type CSSProperties, useMemo, useState} from 'react';
+import {type CSSProperties, useEffect, useMemo, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import Color from 'color';
@@ -26,6 +26,7 @@ import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {getBucketSize} from 'sentry/views/dashboards/widgetCard/utils';
+import {useEventDetails} from 'sentry/views/issueDetails/streamline/context';
 import {useCurrentEventMarklineSeries} from 'sentry/views/issueDetails/streamline/hooks/useEventMarkLineSeries';
 import useFlagSeries from 'sentry/views/issueDetails/streamline/hooks/useFlagSeries';
 import {
@@ -74,6 +75,7 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
   );
   const eventView = useIssueDetailsEventView({group});
   const config = getConfigForIssueType(group, group.project);
+  const {dispatch} = useEventDetails();
 
   const {
     data: groupStats = {},
@@ -136,6 +138,12 @@ export function EventGraph({group, event, ...styleProps}: EventGraphProps) {
     }
     return createSeriesAndCount(groupStats['count()']);
   }, [groupStats]);
+
+  // Ensure the dropdown can access the new filtered event count
+  useEffect(() => {
+    dispatch({type: 'UPDATE_EVENT_COUNT', count: eventCount});
+  }, [eventCount, dispatch]);
+
   const {series: unfilteredEventSeries} = useMemo(() => {
     if (!unfilteredGroupStats?.['count()']) {
       return {series: []};

static/app/views/issueDetails/streamline/eventMissingBanner.spec.tsx

@@ -0,0 +1,43 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {EventMissingBanner} from 'sentry/views/issueDetails/streamline/eventMissingBanner';
+
+describe('EventMissingBanner', () => {
+  it('renders elements for known event IDs', () => {
+    const organization = OrganizationFixture();
+    const router = RouterFixture({params: {groupId: 'group-1', eventId: 'recommended'}});
+
+    render(<EventMissingBanner />, {organization, router});
+
+    // Header
+    expect(screen.getByText(/We couldn't track down an event/)).toBeInTheDocument();
+    // Body
+    expect(screen.getByText(/here are some things to try/)).toBeInTheDocument();
+    expect(screen.getByText(/Change up your filters./)).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Clear event filters'})).toBeInTheDocument();
+    // Image
+    expect(screen.getByAltText('Compass illustration')).toBeInTheDocument();
+  });
+
+  it('renders elements for specific event IDs', () => {
+    const organization = OrganizationFixture();
+    const router = RouterFixture({params: {groupId: 'group-1', eventId: 'abc123'}});
+
+    render(<EventMissingBanner />, {organization, router});
+
+    // Header
+    expect(screen.getByText(/We couldn't track down that event/)).toBeInTheDocument();
+    expect(screen.getByText(/(abc123)/)).toBeInTheDocument();
+    // Body
+    expect(screen.getByText(/here are some things to try/)).toBeInTheDocument();
+    expect(screen.getByText(/Double check the event ID./)).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', {name: 'View recommended event'})
+    ).toBeInTheDocument();
+    // Image
+    expect(screen.getByAltText('Compass illustration')).toBeInTheDocument();
+  });
+});