feat(supergroups): Add checkbox to supergroup rows for bulk selection (#112301)

Add checkbox to supergroup rows for bulk issue selection, plus small QoL
fixes.

- Checkbox below the stack icon selects/deselects all member groups at
once (indeterminate when partial). Hidden until hover or checked.
- New `setSelectionForIds` action on the issue selection context for
multi-ID dispatch.
- Label switches from "issues matched" to bold "issues selected" when
any are checked.
- `retry: false` on supergroups query, it 404s when they're not found
etc.

<img width="550" height="94" alt="image"
src="https://github.com/user-attachments/assets/27df4440-76e5-4376-bc3d-24000045f207"
/>

fixes
https://linear.app/getsentry/issue/ID-1442/figuring-out-what-happens-when-selecting-a-supergroup

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: scttcper

.github/CODEOWNERS

@@ -692,7 +692,7 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py          @get
 /static/app/components/events/highlights/                   @getsentry/issue-workflow
 /static/app/components/issues/                              @getsentry/issue-workflow
 /static/app/components/stackTrace/                          @getsentry/issue-workflow
-/static/app/components/stream/supergroupRow.tsx             @getsentry/issue-detection-frontend
+/static/app/components/stream/supergroups/                  @getsentry/issue-detection-frontend
 /static/app/views/issueList/                                @getsentry/issue-workflow
 /static/app/views/issueList/issueListSeerComboBox.tsx       @getsentry/issue-workflow @getsentry/machine-learning-ai
 /static/app/views/issueList/pages/supergroups.tsx           @getsentry/issue-detection-frontend

static/app/components/stream/supergroups/supergroupCheckbox.tsx

@@ -0,0 +1,61 @@
+import {useCallback} from 'react';
+import styled from '@emotion/styled';
+
+import {Checkbox} from '@sentry/scraps/checkbox';
+
+import {t} from 'sentry/locale';
+import {useOptionalIssueSelectionActions} from 'sentry/views/issueList/issueSelectionContext';
+
+interface SupergroupCheckboxProps {
+  matchedGroupIds: string[];
+  selectedCount: number;
+}
+
+export function SupergroupCheckbox({
+  matchedGroupIds,
+  selectedCount,
+}: SupergroupCheckboxProps) {
+  const actions = useOptionalIssueSelectionActions();
+
+  const checkedState =
+    selectedCount === 0
+      ? false
+      : selectedCount === matchedGroupIds.length
+        ? true
+        : ('indeterminate' as const);
+
+  const handleChange = useCallback(
+    (evt: React.MouseEvent) => {
+      evt.stopPropagation();
+      const nextValue = checkedState !== true;
+      actions?.setSelectionForIds(matchedGroupIds, nextValue);
+    },
+    [actions, matchedGroupIds, checkedState]
+  );
+
+  if (!actions) {
+    return null;
+  }
+
+  return (
+    <CheckboxLabel>
+      <CheckboxWithBackground
+        aria-label={t('Select supergroup issues')}
+        checked={checkedState}
+        onChange={() => {}}
+        onClick={handleChange}
+      />
+    </CheckboxLabel>
+  );
+}
+
+export const CheckboxLabel = styled('label')`
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const CheckboxWithBackground = styled(Checkbox)`
+  background-color: ${p => p.theme.tokens.background.primary};
+`;

…/app/components/stream/supergroupRow.tsx …nts/stream/supergroups/supergroupRow.tsxstatic/app/components/stream/supergroupRow.tsx renamed to static/app/components/stream/supergroups/supergroupRow.tsx static/app/components/stream/supergroupRow.tsx renamed to static/app/components/stream/supergroups/supergroupRow.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
@@ -11,10 +11,15 @@ import {Count} from 'sentry/components/count';
 import {useDrawer} from 'sentry/components/globalDrawer';
 import {PanelItem} from 'sentry/components/panels/panelItem';
 import {Placeholder} from 'sentry/components/placeholder';
+import {
+  CheckboxLabel,
+  SupergroupCheckbox,
+} from 'sentry/components/stream/supergroups/supergroupCheckbox';
 import {TimeSince} from 'sentry/components/timeSince';
 import {IconStack} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {COLUMN_BREAKPOINTS} from 'sentry/views/issueList/actions/utils';
+import {useOptionalIssueSelectionSummary} from 'sentry/views/issueList/issueSelectionContext';
 import type {AggregatedSupergroupStats} from 'sentry/views/issueList/supergroups/aggregateSupergroupStats';
 import {SupergroupDetailDrawer} from 'sentry/views/issueList/supergroups/supergroupDrawer';
 import type {SupergroupDetail} from 'sentry/views/issueList/supergroups/types';
@@ -53,13 +58,31 @@ export function SupergroupRow({
     );
   };
 
+  const summary = useOptionalIssueSelectionSummary();
+  const selectedCount = useMemo(() => {
+    if (!summary) {
+      return 0;
+    }
+    let count = 0;
+    for (const id of matchedGroupIds) {
+      if (summary.records.get(id)) {
+        count++;
+      }
+    }
+    return count;
+  }, [summary, matchedGroupIds]);
+
   const highlighted = isActive && isDrawerOpen;
 
   return (
     <Wrapper onClick={handleClick} highlighted={highlighted}>
       <InteractionStateLayer />
       <IconArea>
         <AccentIcon size="md" />
+        <SupergroupCheckbox
+          matchedGroupIds={matchedGroupIds}
+          selectedCount={selectedCount}
+        />
       </IconArea>
       <Summary>
         {supergroup.error_type ? (
@@ -78,8 +101,14 @@ export function SupergroupRow({
           ) : null}
           {supergroup.code_area && matchedCount > 0 ? <Dot /> : null}
           {matchedCount > 0 ? (
-            <Text size="sm" variant="muted">
-              {matchedCount} / {supergroup.group_ids.length} {t('issues matched')}
+            <Text
+              size="sm"
+              variant={selectedCount > 0 ? 'primary' : 'muted'}
+              bold={selectedCount > 0}
+            >
+              {selectedCount > 0
+                ? `${selectedCount} / ${supergroup.group_ids.length} ${t('issues selected')}`
+                : `${matchedCount} / ${supergroup.group_ids.length} ${t('issues matched')}`}
             </Text>
           ) : null}
         </MetaRow>
@@ -167,6 +196,12 @@ const Wrapper = styled(PanelItem)<{highlighted: boolean}>`
   min-height: 82px;
   background: ${p =>
     p.highlighted ? p.theme.tokens.background.secondary : 'transparent'};
+
+  &:not(:hover):not(:has(input:checked)):not(:has(input:indeterminate)) {
+    ${CheckboxLabel} {
+      ${p => p.theme.visuallyHidden};
+    }
+  }
 `;
 
 const Summary = styled('div')`
@@ -185,10 +220,11 @@ const IconArea = styled('div')`
   align-self: flex-start;
   width: 32px;
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: flex-end;
   flex-shrink: 0;
   padding-top: ${p => p.theme.space.sm};
+  gap: ${p => p.theme.space.xs};
 `;
 
 const AccentIcon = styled(IconStack)`

static/app/views/issueList/groupListBody.tsx

@@ -6,7 +6,7 @@ import type {GroupListColumn} from 'sentry/components/issues/groupList';
 import {LoadingError} from 'sentry/components/loadingError';
 import {PanelBody} from 'sentry/components/panels/panelBody';
 import {LoadingStreamGroup, StreamGroup} from 'sentry/components/stream/group';
-import {SupergroupRow} from 'sentry/components/stream/supergroupRow';
+import {SupergroupRow} from 'sentry/components/stream/supergroups/supergroupRow';
 import {GroupStore} from 'sentry/stores/groupStore';
 import type {Group} from 'sentry/types/group';
 import {useApi} from 'sentry/utils/useApi';

static/app/views/issueList/issueSelectionContext.spec.tsx

@@ -109,6 +109,30 @@ describe('IssueSelectionContext', () => {
     expect(result.current.lastSelected).toBe('14');
   });
 
+  it('sets selection for a subset of ids', () => {
+    const {result} = renderSelectionHook({
+      visibleGroupIds: ['1', '2', '3', '4'],
+    });
+
+    act(() => result.current.setSelectionForIds(['2', '3'], true));
+    expect(result.current.records.get('1')).toBe(false);
+    expect(result.current.records.get('2')).toBe(true);
+    expect(result.current.records.get('3')).toBe(true);
+    expect(result.current.records.get('4')).toBe(false);
+
+    act(() => result.current.setSelectionForIds(['2', '3'], false));
+    expect(result.current.records.get('2')).toBe(false);
+    expect(result.current.records.get('3')).toBe(false);
+  });
+
+  it('ignores unknown ids in setSelectionForIds', () => {
+    const {result} = renderSelectionHook({visibleGroupIds: ['1', '2']});
+
+    act(() => result.current.setSelectionForIds(['1', 'unknown'], true));
+    expect(result.current.records.get('1')).toBe(true);
+    expect(result.current.records.has('unknown')).toBe(false);
+  });
+
   it('resets all-in-query selection when selection changes', () => {
     const {result} = renderSelectionHook({visibleGroupIds: ['1', '2']});
 

static/app/views/issueList/issueSelectionContext.tsx

@@ -14,7 +14,8 @@ type IssueSelectionAction =
   | {groupId: string; type: 'SHIFT_TOGGLE_SELECT'; visibleGroupIds: string[]}
   | {type: 'TOGGLE_SELECT_ALL_VISIBLE'}
   | {type: 'DESELECT_ALL'}
-  | {type: 'SET_ALL_IN_QUERY_SELECTED'; value: boolean};
+  | {type: 'SET_ALL_IN_QUERY_SELECTED'; value: boolean}
+  | {groupIds: string[]; type: 'SET_SELECTION_FOR_IDS'; value: boolean};
 
 interface IssueSelectionSummary extends IssueSelectionState {
   anySelected: boolean;
@@ -27,6 +28,7 @@ interface IssueSelectionActions {
   deselectAll: () => void;
   reconcileVisibleGroupIds: (groupIds: string[]) => void;
   setAllInQuerySelected: (value: boolean) => void;
+  setSelectionForIds: (groupIds: string[], value: boolean) => void;
   shiftToggleSelect: (groupId: string) => void;
   toggleSelect: (groupId: string) => void;
   toggleSelectAllVisible: () => void;
@@ -193,6 +195,19 @@ function issueSelectionReducer(
         records: nextRecords,
       };
     }
+    case 'SET_SELECTION_FOR_IDS': {
+      const nextRecords = new Map(state.records);
+      for (const id of action.groupIds) {
+        if (nextRecords.has(id)) {
+          nextRecords.set(id, action.value);
+        }
+      }
+      return {
+        ...state,
+        allInQuerySelected: false,
+        records: nextRecords,
+      };
+    }
     case 'SET_ALL_IN_QUERY_SELECTED':
       return {...state, allInQuerySelected: action.value};
     default:
@@ -243,6 +258,10 @@ export function IssueSelectionProvider({
     dispatch({type: 'DESELECT_ALL'});
   }, []);
 
+  const setSelectionForIds = useCallback((groupIds: string[], value: boolean) => {
+    dispatch({type: 'SET_SELECTION_FOR_IDS', groupIds, value});
+  }, []);
+
   const setAllInQuerySelected = useCallback((value: boolean) => {
     dispatch({type: 'SET_ALL_IN_QUERY_SELECTED', value});
   }, []);
@@ -271,6 +290,7 @@ export function IssueSelectionProvider({
       shiftToggleSelect,
       toggleSelectAllVisible,
       deselectAll,
+      setSelectionForIds,
       setAllInQuerySelected,
       reconcileVisibleGroupIds,
     }),
@@ -279,6 +299,7 @@ export function IssueSelectionProvider({
       shiftToggleSelect,
       toggleSelectAllVisible,
       deselectAll,
+      setSelectionForIds,
       setAllInQuerySelected,
       reconcileVisibleGroupIds,
     ]

static/app/views/issueList/supergroups/useSuperGroups.tsx

@@ -52,6 +52,7 @@ export function useSuperGroups(groupIds: string[]): {
     {
       staleTime: 30_000,
       enabled,
+      retry: false,
       placeholderData: previousData => {
         if (!previousData) {
           return undefined;