diff --git a/x-pack/plugins/cases/public/common/test_utils.ts b/x-pack/plugins/cases/public/common/test_utils.ts
index 2bd8f6c25368b7..0ebff7693eed88 100644
--- a/x-pack/plugins/cases/public/common/test_utils.ts
+++ b/x-pack/plugins/cases/public/common/test_utils.ts
@@ -20,3 +20,8 @@ export async function waitForComponentToPaint
(wrapper: ReactWrapper
,
wrapper.update();
});
}
+
+export const waitForComponentToUpdate = async () =>
+ act(async () => {
+ return Promise.resolve();
+ });
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
index 6a5106087ec814..aeff350e416d24 100644
--- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
+++ b/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(
+
+
+
+ );
+
+ 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(
+
+
+
+ );
+
+ /** 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(
+
+
+
+ );
+
+ 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();
+ });
});
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
index b3631155f1b6e3..37e4ef8c03d360 100644
--- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
@@ -97,23 +97,30 @@ export const AllCasesList = React.memo(
const filterRefetch = useRef<() => void>();
const tableRef = useRef();
+ const [isLoading, handleIsLoading] = useState(false);
+
const setFilterRefetch = useCallback(
(refetchFilter: () => void) => {
filterRefetch.current = refetchFilter;
},
[filterRefetch]
);
- const [isLoading, handleIsLoading] = useState(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(
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;