feat(issues): Add thread navigators, compact dropdown (#80969)

Author: scttcper

static/app/components/events/interfaces/threads.spec.tsx

@@ -1267,6 +1267,18 @@ describe('Threads', function () {
         within(threadSelector).getByText('ViewController.causeCrash');
       });
 
+      it('can navigate to next/previous thread', async function () {
+        render(<Threads {...props} />, {organization});
+        const threadSelector = await screen.findByTestId('thread-selector');
+        expect(threadSelector).toHaveTextContent('Thread #0');
+        await userEvent.click(await screen.findByRole('button', {name: 'Next Thread'}));
+        expect(threadSelector).toHaveTextContent('Thread #1');
+        await userEvent.click(
+          await screen.findByRole('button', {name: 'Previous Thread'})
+        );
+        expect(threadSelector).toHaveTextContent('Thread #0');
+      });
+
       it('renders raw stack trace', async function () {
         MockApiClient.addMockResponse({
           url: `/projects/${organization.slug}/${project.slug}/events/${event.id}/apple-crash-report?minified=false`,

static/app/components/events/interfaces/threads.tsx

@@ -1,6 +1,8 @@
-import {Fragment, useEffect, useState} from 'react';
+import {Fragment, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
 import {CommitRow} from 'sentry/components/commitRow';
 import {Flex} from 'sentry/components/container/flex';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -15,7 +17,14 @@ import Pill from 'sentry/components/pill';
 import Pills from 'sentry/components/pills';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import TextOverflow from 'sentry/components/textOverflow';
-import {IconClock, IconInfo, IconLock, IconPlay, IconTimer} from 'sentry/icons';
+import {
+  IconChevron,
+  IconClock,
+  IconInfo,
+  IconLock,
+  IconPlay,
+  IconTimer,
+} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event, Thread} from 'sentry/types/event';
@@ -101,15 +110,22 @@ const useActiveThreadState = (
 };
 
 export function Threads({data, event, projectSlug, groupingCurrentLevel, group}: Props) {
-  const threads = data.values ?? [];
+  // Sort threads by crashed first
+  const threads = useMemo(
+    () => (data.values ?? []).toSorted((a, b) => Number(b.crashed) - Number(a.crashed)),
+    [data.values]
+  );
   const hasStreamlinedUI = useHasStreamlinedUI();
   const [activeThread, setActiveThread] = useActiveThreadState(event, threads);
 
   const stackTraceNotFound = !threads.length;
 
   const hasMoreThanOneThread = threads.length > 1;
 
-  const exception = getThreadException(event, activeThread);
+  const exception = useMemo(
+    () => getThreadException(event, activeThread),
+    [event, activeThread]
+  );
 
   const entryIndex = exception
     ? event.entries.findIndex(entry => entry.type === EntryType.EXCEPTION)
@@ -226,6 +242,18 @@ export function Threads({data, event, projectSlug, groupingCurrentLevel, group}:
   const {id: activeThreadId, name: activeThreadName} = activeThread ?? {};
   const hideThreadTags = activeThreadId === undefined || !activeThreadName;
 
+  function handleChangeThread(direction: 'previous' | 'next') {
+    const currentIndex = threads.findIndex(thread => thread.id === activeThreadId);
+    let nextIndex = direction === 'previous' ? currentIndex - 1 : currentIndex + 1;
+    if (nextIndex < 0) {
+      nextIndex = threads.length - 1;
+    } else if (nextIndex >= threads.length) {
+      nextIndex = 0;
+    }
+
+    setActiveThread(threads[nextIndex]);
+  }
+
   const threadComponent = (
     <Fragment>
       {hasMoreThanOneThread && (
@@ -235,6 +263,28 @@ export function Threads({data, event, projectSlug, groupingCurrentLevel, group}:
               <ThreadHeading>{t('Threads')}</ThreadHeading>
               {activeThread && (
                 <Wrapper>
+                  <ButtonBar merged>
+                    <Button
+                      title={t('Previous Thread')}
+                      tooltipProps={{delay: 1000}}
+                      icon={<IconChevron direction="left" />}
+                      aria-label={t('Previous Thread')}
+                      size="xs"
+                      onClick={() => {
+                        handleChangeThread('previous');
+                      }}
+                    />
+                    <Button
+                      title={t('Next Thread')}
+                      tooltipProps={{delay: 1000}}
+                      icon={<IconChevron direction="right" />}
+                      aria-label={t('Next Thread')}
+                      size="xs"
+                      onClick={() => {
+                        handleChangeThread('next');
+                      }}
+                    />
+                  </ButtonBar>
                   <ThreadSelector
                     threads={threads}
                     activeThread={activeThread}
@@ -398,6 +448,8 @@ const LockReason = styled(TextOverflow)`
 `;
 
 const Wrapper = styled('div')`
+  display: flex;
+  gap: ${space(1)};
   align-items: center;
   flex-wrap: wrap;
   flex-grow: 1;

static/app/components/events/interfaces/threads/threadSelector/filterThreadInfo.tsx

@@ -8,7 +8,6 @@ import type {StacktraceType} from 'sentry/types/stacktrace';
 import getRelevantFrame from './getRelevantFrame';
 import getThreadException from './getThreadException';
 import getThreadStacktrace from './getThreadStacktrace';
-import trimFilename from './trimFilename';
 
 type ThreadInfo = {
   crashedInfo?: EntryData;
@@ -17,6 +16,11 @@ type ThreadInfo = {
   state?: ThreadStates;
 };
 
+function trimFilename(filename: string) {
+  const pieces = filename.split(/\//g);
+  return pieces[pieces.length - 1];
+}
+
 function filterThreadInfo(
   event: Event,
   thread: Thread,