[Security Solution] [Sourcerer] Make use of reselect in sourcerer selectors (#176916)

## Summary
This pr should change nothing functionally, but changes the selectors
used in components for sourcerer to make use of createSelector and
benefit from memoization at all times,

Author: kqualters-elastic

x-pack/plugins/security_solution/public/assistant/send_to_timeline/index.tsx

@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { useAssistantContext } from '@kbn/elastic-assistant';
-import { useDeepEqualSelector } from '../../common/hooks/use_selector';
 import { sourcererSelectors } from '../../common/store';
 import { sourcererActions } from '../../common/store/actions';
 import { inputsActions } from '../../common/store/inputs';
@@ -63,13 +62,8 @@ export const SendToTimelineButton: React.FunctionComponent<SendToTimelineButtonP
 
   const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
 
-  const getDataViewsSelector = useMemo(
-    () => sourcererSelectors.getSourcererDataViewsSelector(),
-    []
-  );
-  const { defaultDataView, signalIndexName } = useDeepEqualSelector((state) =>
-    getDataViewsSelector(state)
-  );
+  const signalIndexName = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
 
   const hasTemplateProviders =
     dataProviders && dataProviders.find((provider) => provider.type === 'template');

x-pack/plugins/security_solution/public/common/components/event_details/table/investigate_in_timeline_button.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import React, { useMemo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { EuiButton, EuiButtonEmpty } from '@elastic/eui';
 import type { IconType } from '@elastic/eui';
 import type { Filter } from '@kbn/es-query';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { sourcererSelectors } from '../../../store';
 import { InputsModelId } from '../../../store/inputs/constants';
@@ -23,7 +23,6 @@ import { TimelineId } from '../../../../../common/types/timeline';
 import { TimelineType } from '../../../../../common/api/timeline';
 import { useCreateTimeline } from '../../../../timelines/hooks/use_create_timeline';
 import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../../../detections/components/alerts_table/translations';
-import { useDeepEqualSelector } from '../../../hooks/use_selector';
 
 export interface InvestigateInTimelineButtonProps {
   asEmptyButton: boolean;
@@ -49,13 +48,8 @@ export const InvestigateInTimelineButton: React.FunctionComponent<
 }) => {
   const dispatch = useDispatch();
 
-  const getDataViewsSelector = useMemo(
-    () => sourcererSelectors.getSourcererDataViewsSelector(),
-    []
-  );
-  const { defaultDataView, signalIndexName } = useDeepEqualSelector((state) =>
-    getDataViewsSelector(state)
-  );
+  const signalIndexName = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
 
   const hasTemplateProviders =
     dataProviders && dataProviders.find((provider) => provider.type === 'template');

x-pack/plugins/security_solution/public/common/components/sourcerer/index.tsx

@@ -15,13 +15,13 @@ import {
 } from '@elastic/eui';
 import type { ChangeEventHandler } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import * as i18n from './translations';
 import type { sourcererModel } from '../../store/sourcerer';
 import { sourcererActions, sourcererSelectors } from '../../store/sourcerer';
-import { useDeepEqualSelector } from '../../hooks/use_selector';
 import type { SourcererUrlState } from '../../store/sourcerer/model';
+import type { State } from '../../store';
 import type { ModifiedTypes } from './use_pick_index_patterns';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { usePickIndexPatterns } from './use_pick_index_patterns';
@@ -129,17 +129,18 @@ export const Sourcerer = React.memo<SourcererComponentProps>(({ scope: scopeId }
   const isDefaultSourcerer = scopeId === SourcererScopeName.default;
   const updateUrlParam = useUpdateUrlParam<SourcererUrlState>(URL_PARAM_KEY.sourcerer);
 
-  const sourcererScopeSelector = useMemo(() => sourcererSelectors.getSourcererScopeSelector(), []);
-  const {
-    defaultDataView,
-    kibanaDataViews,
-    signalIndexName,
-    sourcererScope: {
-      selectedDataViewId,
-      selectedPatterns,
-      missingPatterns: sourcererMissingPatterns,
-    },
-  } = useDeepEqualSelector((state) => sourcererScopeSelector(state, scopeId));
+  const signalIndexName = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
+  const kibanaDataViews = useSelector(sourcererSelectors.kibanaDataViews);
+  const selectedDataViewId = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedDataViewId(state, scopeId);
+  });
+  const selectedPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedPatterns(state, scopeId);
+  });
+  const sourcererMissingPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeMissingPatterns(state, scopeId);
+  });
   const { pollForSignalIndex } = useSignalHelpers();
 
   useEffect(() => {

x-pack/plugins/security_solution/public/common/containers/sourcerer/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import { matchPath } from 'react-router-dom';
 import { sourcererActions, sourcererSelectors } from '../../store/sourcerer';
@@ -36,6 +36,7 @@ import { useAppToasts } from '../../hooks/use_app_toasts';
 import { createSourcererDataView } from './create_sourcerer_data_view';
 import { getDataViewStateFromIndexFields, useDataView } from '../source/use_data_view';
 import { useFetchIndex } from '../source';
+import type { State } from '../../store';
 import { useInitializeUrlParam, useUpdateUrlParam } from '../../utils/global_query_string';
 import { URL_PARAM_KEY } from '../../hooks/use_url_state';
 import { sortWithExcludesAtEnd } from '../../../../common/utils/sourcerer';
@@ -54,14 +55,8 @@ export const useInitSourcerer = (
   const { loading: loadingSignalIndex, isSignalIndexExists, signalIndexName } = useUserInfo();
   const updateUrlParam = useUpdateUrlParam<SourcererUrlState>(URL_PARAM_KEY.sourcerer);
 
-  const getDataViewsSelector = useMemo(
-    () => sourcererSelectors.getSourcererDataViewsSelector(),
-    []
-  );
-  const { defaultDataView, signalIndexName: signalIndexNameSourcerer } = useDeepEqualSelector(
-    (state) => getDataViewsSelector(state)
-  );
-
+  const signalIndexNameSourcerer = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
   const { addError, addWarning } = useAppToasts();
 
   useEffect(() => {
@@ -83,19 +78,29 @@ export const useInitSourcerer = (
     getTimelineSelector(state, TimelineId.active)
   );
 
-  const sourcererScopeSelector = useMemo(() => sourcererSelectors.getSourcererScopeSelector(), []);
-  const {
-    sourcererScope: { selectedDataViewId: scopeDataViewId, selectedPatterns, missingPatterns },
-  } = useDeepEqualSelector((state) => sourcererScopeSelector(state, scopeId));
+  const scopeDataViewId = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedDataViewId(state, scopeId);
+  });
+  const selectedPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedPatterns(state, scopeId);
+  });
+  const missingPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeMissingPatterns(state, scopeId);
+  });
 
-  const {
-    selectedDataView: timelineSelectedDataView,
-    sourcererScope: {
-      selectedDataViewId: timelineDataViewId,
-      selectedPatterns: timelineSelectedPatterns,
-      missingPatterns: timelineMissingPatterns,
-    },
-  } = useDeepEqualSelector((state) => sourcererScopeSelector(state, SourcererScopeName.timeline));
+  const kibanaDataViews = useSelector(sourcererSelectors.kibanaDataViews);
+  const timelineDataViewId = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedDataViewId(state, SourcererScopeName.timeline);
+  });
+  const timelineSelectedPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedPatterns(state, SourcererScopeName.timeline);
+  });
+  const timelineMissingPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeMissingPatterns(state, SourcererScopeName.timeline);
+  });
+  const timelineSelectedDataView = useMemo(() => {
+    return kibanaDataViews.find((dataView) => dataView.id === timelineDataViewId);
+  }, [kibanaDataViews, timelineDataViewId]);
 
   const { indexFieldsSearch } = useDataView();
 
@@ -387,26 +392,23 @@ export const useInitSourcerer = (
 export const useSourcererDataView = (
   scopeId: SourcererScopeName = SourcererScopeName.default
 ): SelectedDataView => {
-  const { getDataViewsSelector, getSourcererDataViewSelector, getScopeSelector } = useMemo(
-    () => ({
-      getDataViewsSelector: sourcererSelectors.getSourcererDataViewsSelector(),
-      getSourcererDataViewSelector: sourcererSelectors.sourcererDataViewSelector(),
-      getScopeSelector: sourcererSelectors.scopeIdSelector(),
-    }),
-    []
-  );
-  const {
-    defaultDataView,
-    signalIndexName,
-    selectedDataView,
-    sourcererScope: { missingPatterns, selectedPatterns: scopeSelectedPatterns, loading },
-  }: sourcererSelectors.SourcererScopeSelector = useDeepEqualSelector((state) => {
-    const sourcererScope = getScopeSelector(state, scopeId);
-    return {
-      ...getDataViewsSelector(state),
-      selectedDataView: getSourcererDataViewSelector(state, sourcererScope.selectedDataViewId),
-      sourcererScope,
-    };
+  const kibanaDataViews = useSelector(sourcererSelectors.kibanaDataViews);
+  const signalIndexName = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
+  const selectedDataViewId = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedDataViewId(state, scopeId);
+  });
+  const selectedDataView = useMemo(() => {
+    return kibanaDataViews.find((dataView) => dataView.id === selectedDataViewId);
+  }, [kibanaDataViews, selectedDataViewId]);
+  const loading = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeIsLoading(state, scopeId);
+  });
+  const scopeSelectedPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeSelectedPatterns(state, scopeId);
+  });
+  const missingPatterns = useSelector((state: State) => {
+    return sourcererSelectors.sourcererScopeMissingPatterns(state, scopeId);
   });
 
   const selectedPatterns = useMemo(

x-pack/plugins/security_solution/public/common/containers/sourcerer/use_signal_helpers.tsx

@@ -7,9 +7,8 @@
 
 import { useCallback, useMemo, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { sourcererSelectors } from '../../store';
-import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { useSourcererDataView } from '.';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useDataView } from '../source/use_data_view';
@@ -33,17 +32,8 @@ export const useSignalHelpers = (): {
     data: { dataViews },
   } = useKibana().services;
 
-  const getDefaultDataViewSelector = useMemo(
-    () => sourcererSelectors.defaultDataViewSelector(),
-    []
-  );
-  const getSignalIndexNameSelector = useMemo(
-    () => sourcererSelectors.signalIndexNameSelector(),
-    []
-  );
-  const signalIndexNameSourcerer = useDeepEqualSelector(getSignalIndexNameSelector);
-  const defaultDataView = useDeepEqualSelector(getDefaultDataViewSelector);
-
+  const signalIndexNameSourcerer = useSelector(sourcererSelectors.signalIndexName);
+  const defaultDataView = useSelector(sourcererSelectors.defaultDataView);
   const signalIndexNeedsInit = useMemo(
     () => !defaultDataView.title.includes(`${signalIndexNameSourcerer}`),
     [defaultDataView.title, signalIndexNameSourcerer]

x-pack/plugins/security_solution/public/common/hooks/use_get_field_spec.ts

@@ -5,17 +5,21 @@
  * 2.0.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import type { SourcererScopeName } from '../store/sourcerer/model';
-import { getSelectedDataviewSelector } from '../store/sourcerer/selectors';
-import { useDeepEqualSelector } from './use_selector';
-
-// Calls it from the module scope due to non memoized selectors https://github.com/elastic/kibana/issues/159315
-const selectedDataviewSelector = getSelectedDataviewSelector();
+import { sourcererSelectors } from '../store/sourcerer';
+import type { State } from '../store';
 
 export const useGetFieldSpec = (scopeId: SourcererScopeName) => {
-  const dataView = useDeepEqualSelector((state) => selectedDataviewSelector(state, scopeId));
-
+  const kibanaDataViews = useSelector(sourcererSelectors.kibanaDataViews);
+  const selectedDataViewId = useSelector((state: State) =>
+    sourcererSelectors.sourcererScopeSelectedDataViewId(state, scopeId)
+  );
+  const dataView = useMemo(
+    () => kibanaDataViews.find((dv) => dv.id === selectedDataViewId),
+    [kibanaDataViews, selectedDataViewId]
+  );
   return useCallback(
     (fieldName: string) => {
       const fields = dataView?.fields;

x-pack/plugins/security_solution/public/common/store/reducer.test.ts renamed to x-pack/plugins/security_solution/public/common/store/reducer.test.tsx

@@ -4,30 +4,47 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import React from 'react';
 import { parseExperimentalConfigValue } from '../../../common/experimental_features';
 import type { SecuritySubPlugins } from '../../app/types';
 import { createInitialState } from './reducer';
-import { mockIndexPattern, mockSourcererState } from '../mock';
+import { mockIndexPattern, mockSourcererState, TestProviders, createMockStore } from '../mock';
 import { useSourcererDataView } from '../containers/sourcerer';
-import { useDeepEqualSelector } from '../hooks/use_selector';
 import { renderHook } from '@testing-library/react-hooks';
 import { initialGroupingState } from './grouping/reducer';
 import { initialAnalyzerState } from '../../resolver/store/helpers';
 
 jest.mock('../hooks/use_selector');
-jest.mock('../lib/kibana', () => ({
-  KibanaServices: {
-    get: jest.fn(() => ({ uiSettings: { get: () => ({ from: 'now-24h', to: 'now' }) } })),
-  },
-}));
+jest.mock('../lib/kibana', () => {
+  const original = jest.requireActual('../lib/kibana');
+  return {
+    ...original,
+    useKibana: () => ({
+      ...original.useKibana(),
+      services: {
+        ...original.useKibana().services,
+        upselling: {
+          ...original.useKibana().services.upselling,
+          featureUsage: {
+            ...original.useKibana().services.upselling.featureUsage,
+            hasShown: jest.fn(),
+          },
+        },
+      },
+    }),
+    KibanaServices: {
+      get: jest.fn(() => ({ uiSettings: { get: () => ({ from: 'now-24h', to: 'now' }) } })),
+    },
+  };
+});
 jest.mock('../containers/source', () => ({
   useFetchIndex: () => [
     false,
     { indexes: [], indicesExist: true, indexPatterns: mockIndexPattern },
   ],
 }));
 
+// TODO: this is more of a hook test, a reducer is a pure function and should not need hooks and context to test.
 describe('createInitialState', () => {
   describe('sourcerer -> default -> indicesExist', () => {
     const mockPluginState = {} as Omit<
@@ -53,15 +70,13 @@ describe('createInitialState', () => {
         analyzer: initialAnalyzerState,
       }
     );
-    beforeEach(() => {
-      (useDeepEqualSelector as jest.Mock).mockImplementation((cb) => cb(initState));
-    });
-    afterEach(() => {
-      (useDeepEqualSelector as jest.Mock).mockClear();
-    });
 
     test('indicesExist should be TRUE if patternList is NOT empty', async () => {
-      const { result } = renderHook(() => useSourcererDataView());
+      const { result } = renderHook(() => useSourcererDataView(), {
+        wrapper: ({ children }) => (
+          <TestProviders store={createMockStore(initState)}>{children}</TestProviders>
+        ),
+      });
       expect(result.current.indicesExist).toEqual(true);
     });
 
@@ -93,8 +108,11 @@ describe('createInitialState', () => {
           analyzer: initialAnalyzerState,
         }
       );
-      (useDeepEqualSelector as jest.Mock).mockImplementation((cb) => cb(state));
-      const { result } = renderHook(() => useSourcererDataView());
+      const { result } = renderHook(() => useSourcererDataView(), {
+        wrapper: ({ children }) => (
+          <TestProviders store={createMockStore(state)}>{children}</TestProviders>
+        ),
+      });
       expect(result.current.indicesExist).toEqual(false);
     });
   });