Refactoring network users to use useSearchStrategy (#136204)

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

x-pack/plugins/security_solution/public/network/containers/users/index.test.tsx

@@ -7,29 +7,78 @@
 
 import { act, renderHook } from '@testing-library/react-hooks';
 import { TestProviders } from '../../../common/mock';
-import { ID, useNetworkUsers } from '.';
-import { NetworkType } from '../../store/model';
+import { useNetworkUsers, ID } from '.';
+import { useSearchStrategy } from '../../../common/containers/use_search_strategy';
+import { networkModel } from '../../store';
 import { FlowTargetSourceDest } from '../../../../common/search_strategy';
 
+jest.mock('../../../common/containers/use_search_strategy', () => ({
+  useSearchStrategy: jest.fn(),
+}));
+const mockUseSearchStrategy = useSearchStrategy as jest.Mock;
+const mockSearch = jest.fn();
+
+const props = {
+  endDate: '2020-07-08T08:20:18.966Z',
+  flowTarget: FlowTargetSourceDest.source,
+  id: ID,
+  indexNames: ['auditbeat-*'],
+  ip: '192.168.1.1',
+  skip: false,
+  startDate: '2020-07-07T08:20:18.966Z',
+  type: networkModel.NetworkType.details,
+};
+
 describe('useNetworkUsers', () => {
-  it('skip = true will cancel any running request', () => {
-    const abortSpy = jest.spyOn(AbortController.prototype, 'abort');
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseSearchStrategy.mockReturnValue({
+      loading: false,
+      result: {
+        edges: [],
+        totalCount: -1,
+        pageInfo: {
+          activePage: 0,
+          fakeTotalCount: 0,
+          showMorePagesIndicator: false,
+        },
+      },
+      search: mockSearch,
+      refetch: jest.fn(),
+      inspect: {},
+    });
+  });
+
+  it('runs search', () => {
+    renderHook(() => useNetworkUsers(props), {
+      wrapper: TestProviders,
+    });
+
+    expect(mockSearch).toHaveBeenCalled();
+  });
+
+  it('does not run search when skip = true', () => {
     const localProps = {
-      docValueFields: [],
-      id: `${ID}-${NetworkType.page}`,
-      ip: '1.1.1.1',
-      flowTarget: FlowTargetSourceDest.source,
-      startDate: '2020-07-07T08:20:18.966Z',
-      endDate: '2020-07-08T08:20:18.966Z',
-      indexNames: ['cool'],
-      type: NetworkType.page,
-      skip: false,
+      ...props,
+      skip: true,
+    };
+    renderHook(() => useNetworkUsers(localProps), {
+      wrapper: TestProviders,
+    });
+
+    expect(mockSearch).not.toHaveBeenCalled();
+  });
+
+  it('skip = true will cancel any running request', () => {
+    const localProps = {
+      ...props,
     };
     const { rerender } = renderHook(() => useNetworkUsers(localProps), {
       wrapper: TestProviders,
     });
     localProps.skip = true;
     act(() => rerender());
-    expect(abortSpy).toHaveBeenCalledTimes(4);
+    expect(mockUseSearchStrategy).toHaveBeenCalledTimes(3);
+    expect(mockUseSearchStrategy.mock.calls[2][0].abort).toEqual(true);
   });
 });

x-pack/plugins/security_solution/public/network/containers/users/index.tsx

@@ -5,12 +5,9 @@
  * 2.0.
  */
 
-import { noop } from 'lodash/fp';
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import deepEqual from 'fast-deep-equal';
-import { Subscription } from 'rxjs';
 
-import { isCompleteResponse, isErrorResponse } from '@kbn/data-plugin/common';
 import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import type { ESTermQuery } from '../../../../common/typed_json';
 import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
@@ -26,10 +23,9 @@ import type {
 } from '../../../../common/search_strategy/security_solution/network';
 import { NetworkQueries } from '../../../../common/search_strategy/security_solution/network';
 import * as i18n from './translations';
-import { getInspectResponse } from '../../../helpers';
 import type { InspectResponse } from '../../../types';
 import type { PageInfoPaginated } from '../../../../common/search_strategy';
-import { useAppToasts } from '../../../common/hooks/use_app_toasts';
+import { useSearchStrategy } from '../../../common/containers/use_search_strategy';
 
 export const ID = 'networkUsersQuery';
 
@@ -66,12 +62,8 @@ export const useNetworkUsers = ({
 }: UseNetworkUsers): [boolean, NetworkUsersArgs] => {
   const getNetworkUsersSelector = useMemo(() => networkSelectors.usersSelector(), []);
   const { activePage, sort, limit } = useDeepEqualSelector(getNetworkUsersSelector);
-  const { data, uiSettings } = useKibana().services;
-  const refetch = useRef<inputsModel.Refetch>(noop);
-  const abortCtrl = useRef(new AbortController());
-  const searchSubscription$ = useRef(new Subscription());
+  const { uiSettings } = useKibana().services;
   const defaultIndex = uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
-  const [loading, setLoading] = useState(false);
 
   const [networkUsersRequest, setNetworkUsersRequest] = useState<NetworkUsersRequestOptions | null>(
     null
@@ -93,74 +85,51 @@ export const useNetworkUsers = ({
     [limit]
   );
 
-  const [networkUsersResponse, setNetworkUsersResponse] = useState<NetworkUsersArgs>({
-    networkUsers: [],
-    id,
-    inspect: {
-      dsl: [],
-      response: [],
+  const {
+    loading,
+    result: response,
+    search,
+    refetch,
+    inspect,
+  } = useSearchStrategy<NetworkQueries.users>({
+    factoryQueryType: NetworkQueries.users,
+    initialResult: {
+      edges: [],
+      totalCount: -1,
+      pageInfo: {
+        activePage: 0,
+        fakeTotalCount: 0,
+        showMorePagesIndicator: false,
+      },
     },
-    isInspected: false,
-    loadPage: wrappedLoadMore,
-    pageInfo: {
-      activePage: 0,
-      fakeTotalCount: 0,
-      showMorePagesIndicator: false,
-    },
-    refetch: refetch.current,
-    totalCount: -1,
+    errorMessage: i18n.FAIL_NETWORK_USERS,
+    abort: skip,
   });
-  const { addError, addWarning } = useAppToasts();
 
-  const networkUsersSearch = useCallback(
-    (request: NetworkUsersRequestOptions | null) => {
-      if (request == null || skip) {
-        return;
-      }
-
-      const asyncSearch = async () => {
-        abortCtrl.current = new AbortController();
-        setLoading(true);
-
-        searchSubscription$.current = data.search
-          .search<NetworkUsersRequestOptions, NetworkUsersStrategyResponse>(request, {
-            strategy: 'securitySolutionSearchStrategy',
-            abortSignal: abortCtrl.current.signal,
-          })
-          .subscribe({
-            next: (response) => {
-              if (isCompleteResponse(response)) {
-                setLoading(false);
-                setNetworkUsersResponse((prevResponse) => ({
-                  ...prevResponse,
-                  networkUsers: response.edges,
-                  inspect: getInspectResponse(response, prevResponse.inspect),
-                  pageInfo: response.pageInfo,
-                  refetch: refetch.current,
-                  totalCount: response.totalCount,
-                }));
-                searchSubscription$.current.unsubscribe();
-              } else if (isErrorResponse(response)) {
-                setLoading(false);
-                addWarning(i18n.ERROR_NETWORK_USERS);
-                searchSubscription$.current.unsubscribe();
-              }
-            },
-            error: (msg) => {
-              setLoading(false);
-              addError(msg, {
-                title: i18n.FAIL_NETWORK_USERS,
-              });
-              searchSubscription$.current.unsubscribe();
-            },
-          });
-      };
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
-      asyncSearch();
-      refetch.current = asyncSearch;
-    },
-    [data.search, addError, addWarning, skip]
+  const networkUsersResponse = useMemo(
+    () => ({
+      endDate,
+      networkUsers: response.edges,
+      id,
+      inspect,
+      isInspected: false,
+      loadPage: wrappedLoadMore,
+      pageInfo: response.pageInfo,
+      refetch,
+      startDate,
+      totalCount: response.totalCount,
+    }),
+    [
+      endDate,
+      id,
+      inspect,
+      refetch,
+      response.edges,
+      response.pageInfo,
+      response.totalCount,
+      startDate,
+      wrappedLoadMore,
+    ]
   );
 
   useEffect(() => {
@@ -188,20 +157,10 @@ export const useNetworkUsers = ({
   }, [activePage, defaultIndex, endDate, filterQuery, limit, startDate, sort, ip, flowTarget]);
 
   useEffect(() => {
-    networkUsersSearch(networkUsersRequest);
-    return () => {
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
-    };
-  }, [networkUsersRequest, networkUsersSearch]);
-
-  useEffect(() => {
-    if (skip) {
-      setLoading(false);
-      searchSubscription$.current.unsubscribe();
-      abortCtrl.current.abort();
+    if (!skip && networkUsersRequest) {
+      search(networkUsersRequest);
     }
-  }, [skip]);
+  }, [networkUsersRequest, search, skip]);
 
   return [loading, networkUsersResponse];
 };