feat(issue-details): Show supergroup in issue details sidebar (#112543)

Adds a compact supergroup card to the bottom of the issue details
sidebar when the current issue belongs to a supergroup. Uses the
existing `useSuperGroups` hook to fetch data for the single group ID and
renders the error type, title, code area, and issue count. Clicking the
card opens the existing supergroup detail drawer.

Everything is behind the `top-issues-ui` feature flag - no request is
made and nothing renders without it.

<img width="369" height="258" alt="image"
src="https://github.com/user-attachments/assets/972f6084-4faf-494e-acbd-0377b9e055f0"
/>

Author: scttcper

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

@@ -30,6 +30,7 @@ import {MergedIssuesSidebarSection} from 'sentry/views/issueDetails/streamline/s
 import {PeopleSection} from 'sentry/views/issueDetails/streamline/sidebar/peopleSection';
 import {SeerSection} from 'sentry/views/issueDetails/streamline/sidebar/seerSection';
 import {SimilarIssuesSidebarSection} from 'sentry/views/issueDetails/streamline/sidebar/similarIssuesSidebarSection';
+import {SupergroupSection} from 'sentry/views/issueDetails/streamline/sidebar/supergroupSection';
 
 type Props = {group: Group; project: Project; event?: Event};
 
@@ -130,6 +131,9 @@ export function StreamlinedSidebar({group, event, project}: Props) {
           {issueTypeConfig.detector.enabled && (
             <DetectorSection group={group} project={project} />
           )}
+          <ErrorBoundary mini>
+            <SupergroupSection group={group} />
+          </ErrorBoundary>
         </Side>
       )}
     </SharedTourElement>

static/app/views/issueDetails/streamline/sidebar/supergroupSection.spec.tsx

@@ -0,0 +1,36 @@
+import {GroupFixture} from 'sentry-fixture/group';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {SupergroupSection} from 'sentry/views/issueDetails/streamline/sidebar/supergroupSection';
+
+describe('SupergroupSection', () => {
+  it('renders supergroup info when issue belongs to one', async () => {
+    const organization = OrganizationFixture({features: ['top-issues-ui']});
+    const group = GroupFixture({id: '1'});
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/seer/supergroups/by-group/`,
+      body: {
+        data: [
+          {
+            id: 10,
+            title: 'Null pointer in auth flow',
+            error_type: 'TypeError',
+            code_area: 'auth/login',
+            summary: '',
+            group_ids: [1, 2, 3],
+            created_at: '2024-01-01T00:00:00Z',
+            updated_at: '2024-01-01T00:00:00Z',
+          },
+        ],
+      },
+    });
+
+    render(<SupergroupSection group={group} />, {organization});
+
+    expect(await screen.findByText('TypeError')).toBeInTheDocument();
+    expect(screen.getByText('Null pointer in auth flow')).toBeInTheDocument();
+    expect(screen.getByText('3 issues')).toBeInTheDocument();
+  });
+});

static/app/views/issueDetails/streamline/sidebar/supergroupSection.tsx

@@ -0,0 +1,110 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
+import {Flex, Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {useDrawer} from 'sentry/components/globalDrawer';
+import {IconStack} from 'sentry/icons';
+import {t, tn} from 'sentry/locale';
+import type {Group} from 'sentry/types/group';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';
+import {SupergroupDetailDrawer} from 'sentry/views/issueList/supergroups/supergroupDrawer';
+import {useSuperGroups} from 'sentry/views/issueList/supergroups/useSuperGroups';
+
+interface SupergroupSectionProps {
+  group: Group;
+}
+
+export function SupergroupSection({group}: SupergroupSectionProps) {
+  const organization = useOrganization();
+  const {openDrawer} = useDrawer();
+  const {data: lookup, isLoading} = useSuperGroups([group.id]);
+  const supergroup = lookup[group.id];
+
+  if (!organization.features.includes('top-issues-ui')) {
+    return null;
+  }
+
+  if (isLoading || !supergroup) {
+    return null;
+  }
+
+  const issueCount = supergroup.group_ids.length;
+
+  const handleClick = () => {
+    openDrawer(
+      () => (
+        <SupergroupDetailDrawer supergroup={supergroup} matchedGroupIds={[group.id]} />
+      ),
+      {
+        ariaLabel: t('Supergroup details'),
+        drawerKey: 'supergroup-drawer',
+      }
+    );
+  };
+
+  return (
+    <div>
+      <SidebarSectionTitle>{t('Supergroup')}</SidebarSectionTitle>
+      <SupergroupCard onClick={handleClick} aria-label={t('Supergroup details')}>
+        <InteractionStateLayer />
+        <Flex gap="sm" align="start">
+          <AccentIcon size="sm" />
+          <Stack gap="xs" style={{overflow: 'hidden'}}>
+            {supergroup.error_type ? (
+              <Text size="sm" bold ellipsis>
+                {supergroup.error_type}
+              </Text>
+            ) : null}
+            <Text size="sm" variant="muted" ellipsis>
+              {supergroup.title}
+            </Text>
+            <Flex gap="sm" align="center">
+              {supergroup.code_area ? (
+                <Fragment>
+                  <Text size="xs" variant="muted" ellipsis>
+                    {supergroup.code_area}
+                  </Text>
+                  <Dot />
+                </Fragment>
+              ) : null}
+              <Text size="xs" variant="muted" style={{flexShrink: 0}}>
+                {tn('%s issue', '%s issues', issueCount)}
+              </Text>
+            </Flex>
+          </Stack>
+        </Flex>
+      </SupergroupCard>
+    </div>
+  );
+}
+
+const SupergroupCard = styled('button')`
+  position: relative;
+  width: 100%;
+  padding: ${p => p.theme.space.md};
+  border: 1px solid ${p => p.theme.tokens.border.primary};
+  border-radius: ${p => p.theme.radius.md};
+  cursor: pointer;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+`;
+
+const AccentIcon = styled(IconStack)`
+  color: ${p => p.theme.tokens.graphics.accent.vibrant};
+  flex-shrink: 0;
+  margin-top: 2px;
+`;
+
+const Dot = styled('div')`
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentcolor;
+  flex-shrink: 0;
+`;