ref: Update useListItemCheckboxState to allow toggling lists of items at once (#95188)

The two big things are that `toggleSelected` now accepts `(id: string |
string[])` instead of only `string`. And there's a provider now, to
hoist the state up and share it between multiple children.

The provider/state change means that we can avoid prop-drilling
everything all over the place now. It's still optional though, without a
provider it'll use it's own internal state as before.

Related to REPLAY-509

Author: ryan953

static/app/components/feedback/list/feedbackList.tsx

@@ -20,7 +20,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useFetchInfiniteListData from 'sentry/utils/api/useFetchInfiniteListData';
 import type {FeedbackIssueListItem} from 'sentry/utils/feedback/types';
-import useListItemCheckboxState from 'sentry/utils/list/useListItemCheckboxState';
+import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
 
 // Ensure this object is created once as it is an input to
@@ -57,7 +57,7 @@ export default function FeedbackList() {
     enabled: Boolean(listQueryKey),
   });
 
-  const checkboxState = useListItemCheckboxState({
+  const checkboxState = useListItemCheckboxContext({
     hits,
     knownIds: issues.map(issue => issue.id),
     queryKey: listQueryKey,

static/app/components/feedback/list/feedbackListBulkSelection.tsx

@@ -8,11 +8,11 @@ import {IconEllipsis} from 'sentry/icons/iconEllipsis';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {GroupStatus} from 'sentry/types/group';
-import type useListItemCheckboxState from 'sentry/utils/list/useListItemCheckboxState';
+import type {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 
 interface Props
   extends Pick<
-    ReturnType<typeof useListItemCheckboxState>,
+    ReturnType<typeof useListItemCheckboxContext>,
     'countSelected' | 'deselectAll' | 'selectedIds'
   > {
   mailbox: ReturnType<typeof decodeMailbox>;

static/app/components/feedback/list/feedbackListHeader.tsx

@@ -11,13 +11,13 @@ import useFeedbackQueryKeys from 'sentry/components/feedback/useFeedbackQueryKey
 import {IconRefresh} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type useListItemCheckboxState from 'sentry/utils/list/useListItemCheckboxState';
+import type {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import useUrlParams from 'sentry/utils/url/useUrlParams';
 
 interface Props
   extends Pick<
-    ReturnType<typeof useListItemCheckboxState>,
+    ReturnType<typeof useListItemCheckboxContext>,
     | 'countSelected'
     | 'deselectAll'
     | 'isAllSelected'

static/app/components/feedback/list/useBulkEditFeedbacks.tsx

@@ -11,7 +11,7 @@ import useMutateFeedback from 'sentry/components/feedback/useMutateFeedback';
 import {t, tct} from 'sentry/locale';
 import {GroupStatus} from 'sentry/types/group';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import type useListItemCheckboxState from 'sentry/utils/list/useListItemCheckboxState';
+import type {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import {decodeList} from 'sentry/utils/queryString';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -30,7 +30,7 @@ const statusToText: Record<string, string> = {
 
 interface Props
   extends Pick<
-    ReturnType<typeof useListItemCheckboxState>,
+    ReturnType<typeof useListItemCheckboxContext>,
     'deselectAll' | 'selectedIds'
   > {}
 

static/app/utils/list/useListItemCheckboxState.spec.ts

@@ -0,0 +1,284 @@
+import {act, renderHook} from 'sentry-test/reactTestingLibrary';
+
+import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
+
+const queryKey: ApiQueryKey = ['test'];
+
+describe('useListItemCheckboxContext', () => {
+  describe('All hits are already known', () => {
+    it('should return the correct initial state', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 3, knownIds: ['1', '2', '3'], queryKey})
+      );
+      expect(result.current).toEqual({
+        countSelected: 0,
+        deselectAll: expect.any(Function),
+        hits: 3,
+        isAllSelected: false,
+        isAnySelected: false,
+        isSelected: expect.any(Function),
+        knownIds: ['1', '2', '3'],
+        queryKey,
+        selectAll: expect.any(Function),
+        selectedIds: [],
+        toggleSelected: expect.any(Function),
+      });
+    });
+
+    it('should allow selecting an individual item when all hits are known', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 3, knownIds: ['1', '2', '3'], queryKey})
+      );
+
+      // Initially nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+
+      // Select item '1'
+      act(() => {
+        result.current.toggleSelected('1');
+      });
+
+      // Check that only item '1' is selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(1);
+      expect(result.current.selectedIds).toEqual(['1']);
+
+      // Select item '2' as well
+      act(() => {
+        result.current.toggleSelected('2');
+      });
+
+      // Check that both items are selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(2);
+      expect(result.current.selectedIds).toEqual(['1', '2']);
+
+      // Deselect item '1'
+      act(() => {
+        result.current.toggleSelected('1');
+      });
+
+      // Check that only item '2' is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(1);
+      expect(result.current.selectedIds).toEqual(['2']);
+    });
+
+    it('sets isAllSelected to true when all items are selected', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 3, knownIds: ['1', '2', '3'], queryKey})
+      );
+
+      // Initially nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+
+      act(() => {
+        result.current.toggleSelected('1');
+        result.current.toggleSelected('2');
+        result.current.toggleSelected('3');
+      });
+
+      // Check that all items are selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(true);
+      expect(result.current.isAllSelected).toBe(true);
+    });
+
+    it('should allow selecting all items with selectAll', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 3, knownIds: ['1', '2', '3'], queryKey})
+      );
+
+      // Initially nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+
+      // Select all items
+      act(() => {
+        result.current.selectAll();
+      });
+
+      // Check that all items are selected (including virtual items not yet loaded)
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(true);
+      expect(result.current.isAllSelected).toBe(true);
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(3); // Total hits count
+      expect(result.current.selectedIds).toBe('all'); // Special sentinel value
+
+      // Deselect all
+      act(() => {
+        result.current.deselectAll();
+      });
+
+      // Check that nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+      expect(result.current.selectedIds).toEqual([]);
+    });
+  });
+
+  describe('More hits to load', () => {
+    it('should return the correct initial state', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 10, knownIds: ['1', '2', '3'], queryKey})
+      );
+      expect(result.current).toEqual({
+        countSelected: 0,
+        deselectAll: expect.any(Function),
+        hits: 10,
+        isAllSelected: false,
+        isAnySelected: false,
+        isSelected: expect.any(Function),
+        knownIds: ['1', '2', '3'],
+        queryKey,
+        selectAll: expect.any(Function),
+        selectedIds: [],
+        toggleSelected: expect.any(Function),
+      });
+    });
+
+    it('should allow selecting individual items when there are more hits to load', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 10, knownIds: ['1', '2', '3'], queryKey})
+      );
+
+      // Initially nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+
+      // Select item '1'
+      act(() => {
+        result.current.toggleSelected('1');
+      });
+
+      // Check that only item '1' is selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(1);
+      expect(result.current.selectedIds).toEqual(['1']);
+
+      // Select item '2' as well
+      act(() => {
+        result.current.toggleSelected('2');
+      });
+
+      // Check that both items are selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(2);
+      expect(result.current.selectedIds).toEqual(['1', '2']);
+
+      // Select item '3' to select all known items
+      act(() => {
+        result.current.toggleSelected('3');
+      });
+
+      // Check that all known items are selected
+      expect(result.current.isSelected('1')).toBe(true);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(true);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(3);
+      expect(result.current.selectedIds).toEqual(['1', '2', '3']);
+
+      // Deselect item '1'
+      act(() => {
+        result.current.toggleSelected('1');
+      });
+
+      // Check that only items '2' and '3' are selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(true);
+      expect(result.current.isSelected('3')).toBe(true);
+      expect(result.current.isAllSelected).toBe('indeterminate');
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(2);
+      expect(result.current.selectedIds).toEqual(['2', '3']);
+    });
+
+    it('should allow selecting all items with selectAll', () => {
+      const {result} = renderHook(() =>
+        useListItemCheckboxContext({hits: 10, knownIds: ['1', '2', '3'], queryKey})
+      );
+
+      // Initially nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+
+      // Select all items
+      act(() => {
+        result.current.selectAll();
+      });
+
+      // Check that all items are selected (including virtual items not yet loaded)
+      expect(result.current.isSelected('1')).toBe('all-selected');
+      expect(result.current.isSelected('2')).toBe('all-selected');
+      expect(result.current.isSelected('3')).toBe('all-selected');
+      expect(result.current.isAllSelected).toBe(true);
+      expect(result.current.isAnySelected).toBe(true);
+      expect(result.current.countSelected).toBe(10); // Total hits count
+      expect(result.current.selectedIds).toBe('all'); // Special sentinel value
+
+      // Deselect all
+      act(() => {
+        result.current.deselectAll();
+      });
+
+      // Check that nothing is selected
+      expect(result.current.isSelected('1')).toBe(false);
+      expect(result.current.isSelected('2')).toBe(false);
+      expect(result.current.isSelected('3')).toBe(false);
+      expect(result.current.isAllSelected).toBe(false);
+      expect(result.current.isAnySelected).toBe(false);
+      expect(result.current.countSelected).toBe(0);
+      expect(result.current.selectedIds).toEqual([]);
+    });
+  });
+});