pr changes

x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx

@@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
 import uuid from 'uuid';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { Note } from '../../../lib/note';
 import { Notes } from '../../notes';
@@ -30,7 +30,7 @@ import { NOTES_PANEL_WIDTH } from './notes_size';
 import { ButtonContainer, DescriptionContainer, LabelText, NameField, StyledStar } from './styles';
 import * as i18n from './translations';
 import { SiemPageName } from '../../../pages/home/types';
-import { timelineActions, timelineSelectors } from '../../../store/timeline';
+import { timelineSelectors } from '../../../store/timeline';
 import { State } from '../../../store';
 
 export const historyToolTip = 'The chronological history of actions related to this timeline';

x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
@@ -129,20 +129,25 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
     id: '',
   });
   const [deleteBulk, setDeleteBulk] = useState<DeleteCase[]>([]);
-  const [isRefetchFilters, setIsRefetchFilters] = useState(false);
+  const filterRefetch = useRef<() => void>();
+  const setFilterRefetch = useCallback(
+    (refetchFilter: () => void) => {
+      filterRefetch.current = refetchFilter;
+    },
+    [filterRefetch.current]
+  );
   const refreshCases = useCallback(
     (dataRefresh = true) => {
       if (dataRefresh) refetchCases();
       fetchCasesStatus();
       setSelectedCases([]);
       setDeleteBulk([]);
-      setIsRefetchFilters(true);
+      if (filterRefetch.current != null) {
+        filterRefetch.current();
+      }
     },
-    [filterOptions, queryParams]
+    [filterOptions, queryParams, filterRefetch.current]
   );
-  useEffect(() => {
-    refreshCases(false);
-  }, [filterOptions, queryParams]);
 
   useEffect(() => {
     if (isDeleted) {
@@ -254,6 +259,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
         };
       }
       setQueryParams(newQueryParams);
+      refreshCases(false);
     },
     [queryParams]
   );
@@ -266,6 +272,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
         setQueryParams({ sortField: SortFieldCase.createdAt });
       }
       setFilters(newFilterOptions);
+      refreshCases(false);
     },
     [filterOptions, queryParams]
   );
@@ -354,8 +361,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
             tags: filterOptions.tags,
             status: filterOptions.status,
           }}
-          isRefetchFilters={isRefetchFilters}
-          setIsRefetchFilters={setIsRefetchFilters}
+          setFilterRefetch={setFilterRefetch}
         />
         {isCasesLoading && isDataEmpty ? (
           <Div>

x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/table_filters.test.tsx

@@ -20,15 +20,14 @@ jest.mock('../../../../containers/case/use_get_tags');
 const onFilterChanged = jest.fn();
 const fetchReporters = jest.fn();
 const fetchTags = jest.fn();
-const setIsRefetchFilters = jest.fn();
+const setFilterRefetch = jest.fn();
 
 const props = {
   countClosedCases: 1234,
   countOpenCases: 99,
   onFilterChanged,
   initial: DEFAULT_FILTER_OPTIONS,
-  isRefetchFilters: false,
-  setIsRefetchFilters,
+  setFilterRefetch,
 };
 describe('CasesTableFilters ', () => {
   beforeEach(() => {
@@ -122,15 +121,13 @@ describe('CasesTableFilters ', () => {
 
     expect(onFilterChanged).toBeCalledWith({ status: 'closed' });
   });
-  it('should refetch tags and reporters when isRefetchFilters is true', () => {
+  it('should call on load setFilterRefetch', () => {
     mount(
       <TestProviders>
-        <CasesTableFilters {...{ ...props, isRefetchFilters: true }} />
+        <CasesTableFilters {...props} />
       </TestProviders>
     );
-    expect(fetchReporters).toHaveBeenCalledTimes(1);
-    expect(fetchTags).toHaveBeenCalledTimes(1);
-    expect(setIsRefetchFilters).toHaveBeenCalledWith(false);
+    expect(setFilterRefetch).toHaveBeenCalled();
   });
   it('should remove tag from selected tags when tag no longer exists', () => {
     const ourProps = {

x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx

@@ -25,8 +25,7 @@ interface CasesTableFiltersProps {
   countOpenCases: number | null;
   onFilterChanged: (filterOptions: Partial<FilterOptions>) => void;
   initial: FilterOptions;
-  isRefetchFilters: boolean;
-  setIsRefetchFilters: (val: boolean) => void;
+  setFilterRefetch: (val: () => void) => void;
 }
 
 /**
@@ -43,8 +42,7 @@ const CasesTableFiltersComponent = ({
   countOpenCases,
   onFilterChanged,
   initial = defaultInitial,
-  isRefetchFilters,
-  setIsRefetchFilters,
+  setFilterRefetch,
 }: CasesTableFiltersProps) => {
   const [selectedReporters, setSelectedReporters] = useState(
     initial.reporters.map(r => r.full_name ?? r.username ?? '')
@@ -54,14 +52,15 @@ const CasesTableFiltersComponent = ({
   const [showOpenCases, setShowOpenCases] = useState(initial.status === 'open');
   const { tags, fetchTags } = useGetTags();
   const { reporters, respReporters, fetchReporters } = useGetReporters();
-
+  const refetch = useCallback(() => {
+    fetchTags();
+    fetchReporters();
+  }, [fetchReporters, fetchTags]);
   useEffect(() => {
-    if (isRefetchFilters) {
-      fetchTags();
-      fetchReporters();
-      setIsRefetchFilters(false);
+    if (setFilterRefetch != null) {
+      setFilterRefetch(refetch);
     }
-  }, [isRefetchFilters]);
+  }, [refetch, setFilterRefetch]);
   useEffect(() => {
     if (selectedReporters.length) {
       const newReporters = selectedReporters.filter(r => reporters.includes(r));