[Cases] Reset selected cases when refreshing (#121867)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/cases/public/common/test_utils.ts

@@ -20,3 +20,8 @@ export async function waitForComponentToPaint<P = {}>(wrapper: ReactWrapper<P>,
     wrapper.update();
   });
 }
+
+export const waitForComponentToUpdate = async () =>
+  act(async () => {
+    return Promise.resolve();
+  });

x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx

@@ -8,8 +8,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment-timezone';
-import { act, waitFor } from '@testing-library/react';
+import { act, render, waitFor, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
 
 import '../../common/mock/match_media';
 import { TestProviders } from '../../common/mock';
@@ -36,6 +37,7 @@ import { CasesColumns, GetCasesColumn, useCasesColumns } from './columns';
 import { triggersActionsUiMock } from '../../../../triggers_actions_ui/public/mocks';
 import { registerConnectorsToMockActionRegistry } from '../../common/mock/register_connectors';
 import { createStartServicesMock } from '../../common/lib/kibana/kibana_react.mock';
+import { waitForComponentToUpdate } from '../../common/test_utils';
 
 jest.mock('../../containers/use_bulk_update_case');
 jest.mock('../../containers/use_delete_cases');
@@ -777,4 +779,73 @@ describe('AllCasesListGeneric', () => {
 
     expect(doRefresh).toHaveBeenCalled();
   });
+
+  it('should deselect cases when refreshing', async () => {
+    useGetCasesMock.mockReturnValue({
+      ...defaultGetCases,
+      selectedCases: [],
+    });
+
+    render(
+      <TestProviders>
+        <AllCasesList />
+      </TestProviders>
+    );
+
+    userEvent.click(screen.getByTestId('checkboxSelectAll'));
+    const checkboxes = await screen.findAllByRole('checkbox');
+
+    for (const checkbox of checkboxes) {
+      expect(checkbox).toBeChecked();
+    }
+
+    userEvent.click(screen.getByText('Refresh'));
+    for (const checkbox of checkboxes) {
+      expect(checkbox).not.toBeChecked();
+    }
+
+    waitForComponentToUpdate();
+  });
+
+  it('should deselect cases when changing filters', async () => {
+    useGetCasesMock.mockReturnValue({
+      ...defaultGetCases,
+      selectedCases: [],
+    });
+
+    const { rerender } = render(
+      <TestProviders>
+        <AllCasesList />
+      </TestProviders>
+    );
+
+    /** Something really weird is going on and we have to rerender
+     * to get the correct html output. Not sure why.
+     *
+     * If you run the test alone the rerender is not needed.
+     * If you run the test along with the above test
+     * then you need the rerender
+     */
+    rerender(
+      <TestProviders>
+        <AllCasesList />
+      </TestProviders>
+    );
+
+    userEvent.click(screen.getByTestId('checkboxSelectAll'));
+    const checkboxes = await screen.findAllByRole('checkbox');
+
+    for (const checkbox of checkboxes) {
+      expect(checkbox).toBeChecked();
+    }
+
+    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('case-status-filter-closed'));
+
+    for (const checkbox of checkboxes) {
+      expect(checkbox).not.toBeChecked();
+    }
+
+    waitForComponentToUpdate();
+  });
 });

x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx

@@ -97,23 +97,30 @@ export const AllCasesList = React.memo<AllCasesListProps>(
 
     const filterRefetch = useRef<() => void>();
     const tableRef = useRef<EuiBasicTable>();
+    const [isLoading, handleIsLoading] = useState<boolean>(false);
+
     const setFilterRefetch = useCallback(
       (refetchFilter: () => void) => {
         filterRefetch.current = refetchFilter;
       },
       [filterRefetch]
     );
-    const [isLoading, handleIsLoading] = useState<boolean>(false);
+
+    const deselectCases = useCallback(() => {
+      setSelectedCases([]);
+      tableRef.current?.setSelection([]);
+    }, [setSelectedCases]);
+
     const refreshCases = useCallback(
       (dataRefresh = true) => {
+        deselectCases();
         if (dataRefresh) refetchCases();
         if (doRefresh) doRefresh();
-        setSelectedCases([]);
         if (filterRefetch.current != null) {
           filterRefetch.current();
         }
       },
-      [doRefresh, filterRefetch, refetchCases, setSelectedCases]
+      [deselectCases, doRefresh, refetchCases]
     );
 
     const tableOnChangeCallback = useCallback(
@@ -152,12 +159,11 @@ export const AllCasesList = React.memo<AllCasesListProps>(
           setQueryParams({ sortField: SortFieldCase.createdAt });
         }
 
-        setSelectedCases([]);
-        tableRef.current?.setSelection([]);
+        deselectCases();
         setFilters(newFilterOptions);
         refreshCases(false);
       },
-      [setSelectedCases, setFilters, refreshCases, setQueryParams]
+      [deselectCases, setFilters, refreshCases, setQueryParams]
     );
 
     const showActions = userCanCrud && !isSelectorView;