fix(most-helpful-event): One event dropdown disabled (#54070)

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

When an event doesn't have a prev or next event ID, the dropdown is
disabled.

<img width="423" alt="Screenshot 2023-08-02 at 3 09 50 PM"
src="https://github.com/getsentry/sentry/assets/22582037/6514a9cb-fef3-4fa4-938f-aba9247ed8a5">

static/app/views/issueDetails/groupEventCarousel.spec.tsx

@@ -17,12 +17,16 @@ describe('GroupEventCarousel', () => {
     nextEventID: 'next-event-id',
   });
 
+  const singleTestEvent = {...testEvent, previousEventID: null, nextEventID: null};
+
   const defaultProps = {
     event: testEvent,
     group: TestStubs.Group({id: 'group-id'}),
     projectSlug: 'project-slug',
   };
 
+  const singleEventProps = {...defaultProps, event: singleTestEvent};
+
   beforeEach(() => {
     jest.restoreAllMocks();
     Object.assign(navigator, {
@@ -91,6 +95,16 @@ describe('GroupEventCarousel', () => {
         query: {referrer: 'recommended-event'},
       });
     });
+
+    it('will disable the dropdown if there is only one event', async () => {
+      jest.spyOn(useMedia, 'default').mockReturnValue(true);
+
+      render(<GroupEventCarousel {...singleEventProps} />, {
+        organization: orgWithRecommendedEvent,
+      });
+
+      expect(await screen.getByRole('button', {name: 'Recommended'})).toBeDisabled();
+    });
   });
 
   it('can navigate next/previous events', () => {

static/app/views/issueDetails/groupEventCarousel.tsx

@@ -52,6 +52,7 @@ type GroupEventCarouselProps = {
 
 type GroupEventNavigationProps = {
   group: Group;
+  isDisabled: boolean;
   relativeTime: string;
 };
 
@@ -115,7 +116,11 @@ function EventNavigationButton({
   );
 }
 
-function EventNavigationDropdown({group, relativeTime}: GroupEventNavigationProps) {
+function EventNavigationDropdown({
+  group,
+  relativeTime,
+  isDisabled,
+}: GroupEventNavigationProps) {
   const location = useLocation();
   const params = useParams<{eventId?: string}>();
   const theme = useTheme();
@@ -182,6 +187,7 @@ function EventNavigationDropdown({group, relativeTime}: GroupEventNavigationProp
   return (
     <CompactSelect
       size="sm"
+      disabled={isDisabled}
       options={eventNavDropdownOptions}
       value={!selectedValue ? EventNavDropdownOption.CUSTOM : selectedValue}
       triggerLabel={
@@ -411,6 +417,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
           </Button>
         )}
         <EventNavigationDropdown
+          isDisabled={!hasPreviousEvent && !hasNextEvent}
           group={group}
           relativeTime={event.dateCreated ?? event.dateReceived}
         />