ref(feedback): when bulk resolve/unresolve, header checkbox unchecks (#59147)

when bulk resolve/unresolve clicked, the header checkbox is no longer
selected since we can't see the selected feedbacks anymore (they're in
the other mailbox). however, when bulk mark as read/unread, the checkbox
stays selected because we can still see the feedbacks.


https://github.com/getsentry/sentry/assets/56095982/0bcc423e-6ecf-4255-b9a9-081d5aa5461a

Author: michellewzhang

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

@@ -43,7 +43,7 @@ export default function FeedbackList() {
   const {setParamValue} = useUrlParams('query');
   const clearSearchTerm = () => setParamValue('');
 
-  const {checked, toggleChecked} = useListItemCheckboxState();
+  const {checked, uncheckAll, toggleChecked} = useListItemCheckboxState();
 
   const listRef = useRef<ReactVirtualizedList>(null);
 
@@ -87,7 +87,7 @@ export default function FeedbackList() {
 
   return (
     <Fragment>
-      <FeedbackListHeader checked={checked} toggleChecked={toggleChecked} />
+      <FeedbackListHeader checked={checked} uncheckAll={uncheckAll} />
       <OverflowPanelItem noPadding>
         <InfiniteLoader
           isRowLoaded={isRowLoaded}

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

@@ -24,10 +24,10 @@ import useUrlParams from 'sentry/utils/useUrlParams';
 
 interface Props {
   checked: string[];
-  toggleChecked: (id: string) => void;
+  uncheckAll: (ids: string[]) => void;
 }
 
-export default function FeedbackListHeader({checked, toggleChecked}: Props) {
+export default function FeedbackListHeader({checked, uncheckAll}: Props) {
   const {mailbox} = useLocationQuery({
     fields: {
       mailbox: decodeMailbox,
@@ -40,19 +40,19 @@ export default function FeedbackListHeader({checked, toggleChecked}: Props) {
       <Checkbox
         checked={checked.length ? 'indeterminate' : false}
         onChange={() => {
-          checked.length ? checked.forEach(c => toggleChecked(c)) : null;
+          checked.length ? uncheckAll(checked) : null;
         }}
       />
       {checked.length ? (
-        <HasSelection checked={checked} mailbox={mailbox} />
+        <HasSelection checked={checked} mailbox={mailbox} uncheckAll={uncheckAll} />
       ) : (
         <MailboxPicker value={mailbox} onChange={setMailbox} />
       )}
     </HeaderPanelItem>
   );
 }
 
-function HasSelection({checked, mailbox}) {
+function HasSelection({checked, mailbox, uncheckAll}) {
   const organization = useOrganization();
   const {markAsRead, resolve} = useMutateFeedback({
     feedbackIds: checked,
@@ -81,6 +81,7 @@ function HasSelection({checked, mailbox}) {
               const newStatus =
                 mailbox === 'resolved' ? GroupStatus.UNRESOLVED : GroupStatus.RESOLVED;
               resolve(newStatus, mutationOptions);
+              uncheckAll(checked);
             }}
           >
             {mailbox === 'resolved' ? t('Unresolve') : t('Resolve')}

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

@@ -17,8 +17,13 @@ export default function useListItemCheckboxState() {
     });
   }, []);
 
+  const uncheckAll = useCallback(() => {
+    setState({});
+  }, []);
+
   return {
     checked,
     toggleChecked,
+    uncheckAll,
   };
 }