feat(issues): New stack trace component

.github/CODEOWNERS

@@ -661,6 +661,7 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py          @get
 /static/app/components/events/eventTags/                    @getsentry/issue-workflow
 /static/app/components/events/highlights/                   @getsentry/issue-workflow
 /static/app/components/issues/                              @getsentry/issue-workflow
+/static/app/components/stackTrace/                          @getsentry/issue-workflow
 /static/app/views/issueList/                                @getsentry/issue-workflow
 /static/app/views/issueList/pages/supergroups.tsx           @getsentry/issue-detection-frontend
 /static/app/views/issueList/supergroups/                    @getsentry/issue-detection-frontend

static/app/components/stackTrace/displayOptions.tsx

@@ -0,0 +1,121 @@
+import {CompactSelect} from '@sentry/scraps/compactSelect';
+import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
+
+import {useStackTraceViewState} from 'sentry/components/stackTrace/stackTraceContext';
+import {IconSettings} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+const VIEW_OPTION_VALUES = [
+  'most-relevant',
+  'full-stack-trace',
+  'raw-stack-trace',
+] as const;
+const SORT_OPTION_VALUES = ['newest', 'oldest'] as const;
+
+/**
+ * A single dropdown that consolidates view, sort, and display toggles.
+ */
+export function DisplayOptions() {
+  const {
+    view,
+    setView,
+    hasMinifiedStacktrace,
+    isMinified,
+    setIsMinified,
+    isNewestFirst,
+    setIsNewestFirst,
+    platform,
+  } = useStackTraceViewState();
+
+  const isJavaScriptPlatform =
+    platform?.startsWith('javascript') || platform?.startsWith('node');
+  const minifiedLabel = isJavaScriptPlatform ? t('Minified') : t('Unsymbolicated');
+  const minifiedUnavailableTooltip = isJavaScriptPlatform
+    ? t('Minified version not available')
+    : t('Unsymbolicated version not available');
+
+  const currentViewVal =
+    view === 'raw'
+      ? 'raw-stack-trace'
+      : view === 'full'
+        ? 'full-stack-trace'
+        : 'most-relevant';
+  const currentSortVal = isNewestFirst ? 'newest' : 'oldest';
+
+  const value = [currentViewVal, currentSortVal, ...(isMinified ? ['minified'] : [])];
+
+  function handleChange(opts: Array<{value: string}>) {
+    const vals = opts.map(o => o.value);
+
+    // Mutually exclusive view selection: pick the newly added view option
+    const newViewVals = vals.filter(v =>
+      VIEW_OPTION_VALUES.includes(v as (typeof VIEW_OPTION_VALUES)[number])
+    );
+    const newViewVal =
+      newViewVals.find(v => v !== currentViewVal) ?? newViewVals[0] ?? currentViewVal;
+    if (newViewVal === 'raw-stack-trace') {
+      setView('raw');
+    } else if (newViewVal === 'full-stack-trace') {
+      setView('full');
+    } else {
+      setView('app');
+    }
+
+    // Mutually exclusive sort selection: pick the newly added sort option
+    const newSortVals = vals.filter(v =>
+      SORT_OPTION_VALUES.includes(v as (typeof SORT_OPTION_VALUES)[number])
+    );
+    const newSortVal =
+      newSortVals.find(v => v !== currentSortVal) ?? newSortVals[0] ?? currentSortVal;
+    setIsNewestFirst(newSortVal === 'newest');
+
+    setIsMinified(vals.includes('minified'));
+  }
+
+  return (
+    <CompactSelect
+      trigger={triggerProps => (
+        <OverlayTrigger.Button
+          {...triggerProps}
+          size="xs"
+          icon={<IconSettings />}
+          aria-label={t('Display options')}
+        >
+          {t('Display')}
+        </OverlayTrigger.Button>
+      )}
+      multiple
+      position="bottom-end"
+      value={value}
+      onChange={handleChange}
+      options={[
+        {
+          label: t('View'),
+          options: [
+            {label: t('Most Relevant'), value: 'most-relevant'},
+            {label: t('Full Stack Trace'), value: 'full-stack-trace'},
+            {label: t('Raw Stack Trace'), value: 'raw-stack-trace'},
+          ],
+        },
+        {
+          label: t('Sort'),
+          options: [
+            {label: t('Newest'), value: 'newest'},
+            {label: t('Oldest'), value: 'oldest'},
+          ],
+        },
+        {
+          label: t('Display'),
+          options: [
+            {
+              label: minifiedLabel,
+              value: 'minified',
+              disabled: !hasMinifiedStacktrace,
+              tooltip: hasMinifiedStacktrace ? undefined : minifiedUnavailableTooltip,
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}

static/app/components/stackTrace/exceptionGroup.spec.tsx

@@ -0,0 +1,140 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import type {ExceptionValue} from 'sentry/types/event';
+
+import {
+  RelatedExceptionsTree,
+  ToggleRelatedExceptionsButton,
+  useHiddenExceptions,
+} from './exceptionGroup';
+
+/**
+ * Tree structure:
+ *   ExceptionGroup (id=0, root)
+ *   ├── ValueError (id=1)
+ *   └── ExceptionGroup (id=2, nested)
+ *       ├── TypeError (id=3)
+ *       └── KeyError (id=4)
+ */
+function makeValues(): ExceptionValue[] {
+  const stub = {
+    stacktrace: null,
+    module: null,
+    threadId: null,
+    rawStacktrace: null,
+  };
+  return [
+    {
+      ...stub,
+      type: 'ExceptionGroup',
+      value: 'root',
+      mechanism: {
+        handled: true,
+        type: '',
+        exception_id: 0,
+        is_exception_group: true,
+      },
+    },
+    {
+      ...stub,
+      type: 'ValueError',
+      value: 'bad value',
+      mechanism: {handled: true, type: '', exception_id: 1, parent_id: 0},
+    },
+    {
+      ...stub,
+      type: 'ExceptionGroup',
+      value: 'nested',
+      mechanism: {
+        handled: true,
+        type: '',
+        exception_id: 2,
+        parent_id: 0,
+        is_exception_group: true,
+      },
+    },
+    {
+      ...stub,
+      type: 'TypeError',
+      value: 'type err',
+      mechanism: {handled: true, type: '', exception_id: 3, parent_id: 2},
+    },
+    {
+      ...stub,
+      type: 'KeyError',
+      value: 'key err',
+      mechanism: {handled: true, type: '', exception_id: 4, parent_id: 2},
+    },
+  ];
+}
+
+function TestHarness({values}: {values: ExceptionValue[]}) {
+  const {hiddenExceptions, toggleRelatedExceptions, expandException} =
+    useHiddenExceptions(values);
+
+  return (
+    <div>
+      {values.map(exc => {
+        const id = exc.mechanism?.exception_id;
+        const parentId = exc.mechanism?.parent_id;
+
+        if (parentId !== undefined && hiddenExceptions[parentId]) {
+          return null;
+        }
+
+        return (
+          <div key={id} data-test-id={`exc-${id}`}>
+            <span>{exc.type}</span>
+            <ToggleRelatedExceptionsButton
+              exception={exc}
+              hiddenExceptions={hiddenExceptions}
+              toggleRelatedExceptions={toggleRelatedExceptions}
+              values={values}
+            />
+            <RelatedExceptionsTree
+              exception={exc}
+              allExceptions={values}
+              newestFirst={false}
+              onExceptionClick={expandException}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+describe('exceptionGroup', () => {
+  it('hides nested group children by default, reveals on toggle, and expands via tree link', async () => {
+    render(<TestHarness values={makeValues()} />);
+
+    // Root group and its direct children are visible
+    expect(screen.getByTestId('exc-0')).toBeInTheDocument();
+    expect(screen.getByTestId('exc-1')).toBeInTheDocument();
+    expect(screen.getByTestId('exc-2')).toBeInTheDocument();
+
+    // Nested group's children are hidden
+    expect(screen.queryByTestId('exc-3')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('exc-4')).not.toBeInTheDocument();
+
+    // Toggle reveals nested group's children
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Show 2 related exceptions'})
+    );
+    expect(screen.getByTestId('exc-3')).toBeInTheDocument();
+    expect(screen.getByTestId('exc-4')).toBeInTheDocument();
+
+    // Toggle hides them again
+    await userEvent.click(
+      screen.getByRole('button', {name: 'Hide 2 related exceptions'})
+    );
+    expect(screen.queryByTestId('exc-3')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('exc-4')).not.toBeInTheDocument();
+
+    // Clicking a child link in the nested group's tree calls expandException,
+    // which un-hides the parent group's children
+    await userEvent.click(screen.getByRole('button', {name: 'TypeError: type err'}));
+    expect(screen.getByTestId('exc-3')).toBeInTheDocument();
+    expect(screen.getByTestId('exc-4')).toBeInTheDocument();
+  });
+});