From 89cdb477f11a8a27fec2a63b8b608c70dd80cfa2 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Wed, 22 Dec 2021 19:16:25 +0200 Subject: [PATCH] [Cases] Reset selected cases when refreshing (#121867) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../plugins/cases/public/common/test_utils.ts | 5 ++ .../all_cases/all_cases_list.test.tsx | 73 ++++++++++++++++++- .../components/all_cases/all_cases_list.tsx | 18 +++-- 3 files changed, 89 insertions(+), 7 deletions(-) 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;