From 6e840b73fcbdb08bd808e8bc255401f29252546e Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Tue, 18 Aug 2020 16:14:28 +0200 Subject: [PATCH 1/7] [Security Solution] Refactor useSelector --- .eslintrc.js | 11 ++++++++ .../components/use_all_cases_modal/index.tsx | 5 ++-- .../navigation/use_get_url_search.tsx | 5 ++-- .../containers/use_full_screen/index.tsx | 9 ++++--- .../containers/use_global_time/index.tsx | 5 ++-- .../hooks/use_shallow_equal_selector.tsx | 10 +++++++ .../public/common/store/inputs/selectors.ts | 4 +-- .../pages/endpoint_hosts/view/hooks.ts | 15 ++++++----- .../pages/policy/view/policy_hooks.ts | 20 +++++++------- .../public/resolver/view/graph_controls.tsx | 6 +++-- .../public/resolver/view/panels/index.tsx | 9 ++++--- .../resolver/view/panels/process_details.tsx | 5 ++-- .../view/panels/process_event_list.tsx | 9 ++++--- .../view/panels/process_list_with_counts.tsx | 11 ++++---- .../view/panels/related_event_detail.tsx | 11 ++++---- .../resolver/view/process_event_dot.tsx | 27 ++++++++++--------- .../view/resolver_without_providers.tsx | 13 ++++----- .../public/resolver/view/use_camera.ts | 9 ++++--- .../resolver/view/use_query_string_keys.ts | 6 +++-- .../components/graph_overlay/index.tsx | 5 ++-- .../row_renderers_browser/index.tsx | 5 ++-- .../timeline/body/actions/index.test.tsx | 19 ++++++------- .../timeline/body/actions/index.tsx | 9 ++++--- .../timeline/body/events/stateful_event.tsx | 8 +++--- .../components/timeline/body/index.test.tsx | 12 +++------ .../add_data_provider_popover.tsx | 5 ++-- .../data_providers/provider_item_badge.tsx | 5 ++-- .../insert_timeline_popover/index.tsx | 7 +++-- .../timeline/properties/helpers.tsx | 5 ++-- .../properties/use_create_timeline.tsx | 6 +++-- 30 files changed, 155 insertions(+), 121 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 5cd9809242bba..731dc5da5191d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -827,6 +827,17 @@ module.exports = { { // prevents UI code from importing server side code and then webpack including it when doing builds patterns: ['**/server/*'], + paths: [ + /* + prevents importing raw useSelector which is using different equality function than mapStateToProps, + so to make sure we keep the logic while moving to hooks let's use useShallowEqualSelector + */ + { + name: 'react-redux', + importNames: ['useSelector'], + message: 'Please use "useShallowEqualSelector" instead or create your own selector', + }, + ], }, ], }, diff --git a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx index f7fc7963b3844..7064dcd252ef7 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx @@ -5,8 +5,9 @@ */ import React, { useState, useCallback, useMemo } from 'react'; +import { useDispatch } from 'react-redux'; -import { useDispatch, useSelector } from 'react-redux'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { APP_ID } from '../../../../common/constants'; import { SecurityPageName } from '../../../app/types'; import { useKibana } from '../../../common/lib/kibana'; @@ -34,7 +35,7 @@ export const useAllCasesModal = ({ }: UseAllCasesModalProps): UseAllCasesModalReturnedValues => { const dispatch = useDispatch(); const { navigateToApp } = useKibana().services.application; - const timeline = useSelector((state: State) => + const timeline = useShallowEqualSelector((state: State) => timelineSelectors.selectTimeline(state, timelineId) ); diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx index 099c9ee3fca0a..fd48610d3e7eb 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx +++ b/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx @@ -4,17 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ -import { isEqual } from 'lodash/fp'; import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; +import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; import { makeMapStateToProps } from '../url_state/helpers'; import { getSearch } from './helpers'; import { SearchNavTab } from './types'; export const useGetUrlSearch = (tab: SearchNavTab) => { const mapState = makeMapStateToProps(); - const { urlState } = useSelector(mapState, isEqual); + const { urlState } = useShallowEqualSelector(mapState); const urlSearch = useMemo(() => getSearch(tab, urlState), [tab, urlState]); return urlSearch; }; diff --git a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx index 32591fb032436..7353b10e6a473 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx @@ -5,9 +5,10 @@ */ import { useCallback, useMemo } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants'; +import { useDispatch } from 'react-redux'; +import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants'; +import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; import { inputsSelectors } from '../../store'; import { inputsActions } from '../../store/actions'; @@ -29,8 +30,8 @@ export const resetScroll = () => { export const useFullScreen = () => { const dispatch = useDispatch(); - const globalFullScreen = useSelector(inputsSelectors.globalFullScreenSelector) ?? false; - const timelineFullScreen = useSelector(inputsSelectors.timelineFullScreenSelector) ?? false; + const globalFullScreen = useShallowEqualSelector(inputsSelectors.globalFullScreenSelector); + const timelineFullScreen = useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector); const setGlobalFullScreen = useCallback( (fullScreen: boolean) => { diff --git a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx index 52825caf9ce74..c2480314076a6 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx @@ -5,15 +5,16 @@ */ import { useCallback, useState, useEffect, useMemo } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; +import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; import { inputsSelectors } from '../../store'; import { inputsActions } from '../../store/actions'; import { SetQuery, DeleteQuery } from './types'; export const useGlobalTime = (clearAllQuery: boolean = true) => { const dispatch = useDispatch(); - const { from, to } = useSelector(inputsSelectors.globalTimeRangeSelector); + const { from, to } = useShallowEqualSelector(inputsSelectors.globalTimeRangeSelector); const [isInitializing, setIsInitializing] = useState(true); const setQuery = useCallback( diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx b/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx new file mode 100644 index 0000000000000..5a02c3339013b --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx @@ -0,0 +1,10 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +// eslint-disable-next-line no-restricted-imports +import { shallowEqual, useSelector } from 'react-redux'; + +export const useShallowEqualSelector = (selector) => useSelector(selector, shallowEqual); diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts b/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts index 9feb2f87d7e08..d82aeb979681c 100644 --- a/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts +++ b/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts @@ -41,14 +41,14 @@ export const inputsSelector = () => createSelector(selectInputs, (inputs) => inp export const timelineTimeRangeSelector = createSelector( selectTimeline, - (timeline) => timeline.timerange + (timeline) => timeline.timerange ?? false ); export const globalFullScreenSelector = createSelector(selectGlobal, (global) => global.fullScreen); export const timelineFullScreenSelector = createSelector( selectTimeline, - (timeline) => timeline.fullScreen + (timeline) => timeline.fullScreen ?? false ); export const globalTimeRangeSelector = createSelector(selectGlobal, (global) => global.timerange); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts index a9c84678c88a9..9b1f219ae27ff 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts @@ -4,24 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import { useSelector } from 'react-redux'; import { useMemo } from 'react'; + import { useKibana } from '../../../../common/lib/kibana'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { EndpointState } from '../types'; import { MANAGEMENT_STORE_ENDPOINTS_NAMESPACE, MANAGEMENT_STORE_GLOBAL_NAMESPACE, } from '../../../common/constants'; import { State } from '../../../../common/store'; -export function useEndpointSelector(selector: (state: EndpointState) => TSelected) { - return useSelector(function (state: State) { - return selector( + +export const useEndpointSelector = (selector: (state: EndpointState) => TSelected) => + useShallowEqualSelector((state: State) => + selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_ENDPOINTS_NAMESPACE ] as EndpointState - ); - }); -} + ) + ); /** * Returns an object that contains Ingest app and URL information diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts index 97436064eebe2..829d09667455a 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts @@ -4,9 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import { useSelector } from 'react-redux'; import { PolicyListState, PolicyDetailsState } from '../types'; import { State } from '../../../../common/store'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { MANAGEMENT_STORE_GLOBAL_NAMESPACE, MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE, @@ -17,28 +17,26 @@ import { * Narrows global state down to the PolicyListState before calling the provided Policy List Selector * @param selector */ -export function usePolicyListSelector(selector: (state: PolicyListState) => TSelected) { - return useSelector((state: State) => { - return selector( +export const usePolicyListSelector = (selector: (state: PolicyListState) => TSelected) => + useShallowEqualSelector((state: State) => + selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_LIST_NAMESPACE ] as PolicyListState - ); - }); -} + ) + ); /** * Narrows global state down to the PolicyDetailsState before calling the provided Policy Details Selector * @param selector */ -export function usePolicyDetailsSelector( +export const usePolicyDetailsSelector = ( selector: (state: PolicyDetailsState) => TSelected -) { - return useSelector((state: State) => +) => + useShallowEqualSelector((state: State) => selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE ] as PolicyDetailsState ) ); -} diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx index 610deef07775b..fec24eeb8ee8d 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx @@ -9,12 +9,14 @@ import React, { useCallback, useMemo, useContext } from 'react'; import styled from 'styled-components'; import { EuiRange, EuiPanel, EuiIcon } from '@elastic/eui'; -import { useSelector, useDispatch } from 'react-redux'; +import { useDispatch } from 'react-redux'; + import { SideEffectContext } from './side_effect_context'; import { Vector2 } from '../types'; import * as selectors from '../store/selectors'; import { useResolverTheme } from './assets'; import { ResolverAction } from '../store/actions'; +import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; interface StyledGraphControls { graphControlsBackground: string; @@ -64,7 +66,7 @@ const GraphControlsComponent = React.memo( className?: string; }) => { const dispatch: (action: ResolverAction) => unknown = useDispatch(); - const scalingFactor = useSelector(selectors.scalingFactor); + const scalingFactor = useShallowEqualSelector(selectors.scalingFactor); const { timestamp } = useContext(SideEffectContext); const { colorMap } = useResolverTheme(); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx index b3c4eefe5fae7..0ede687b95517 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx @@ -5,11 +5,12 @@ */ import React, { memo, useMemo, useContext, useLayoutEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; import { EuiPanel } from '@elastic/eui'; + import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import * as event from '../../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import { SideEffectContext } from '../side_effect_context'; import { ProcessEventList } from './process_event_list'; @@ -41,7 +42,7 @@ const PanelContent = memo(function PanelContent() { const { pushToQueryParams, queryParams } = useResolverQueryParams(); - const graphableProcesses = useSelector(selectors.graphableProcesses); + const graphableProcesses = useShallowEqualSelector(selectors.graphableProcesses); const graphableProcessEntityIds = useMemo(() => { return new Set(graphableProcesses.map(event.entityId)); }, [graphableProcesses]); @@ -60,7 +61,7 @@ const PanelContent = memo(function PanelContent() { // The "selected" node (and its corresponding event) in the tree control. // It may need to be synchronized with the ID indicated as selected via the `idFromParams` // memo above. When this is the case, it is handled by the layout effect below. - const selectedNode = useSelector(selectors.selectedNode); + const selectedNode = useShallowEqualSelector(selectors.selectedNode); const uiSelectedEvent = useMemo(() => { return graphableProcesses.find((evt) => event.entityId(evt) === selectedNode); }, [graphableProcesses, selectedNode]); @@ -97,7 +98,7 @@ const PanelContent = memo(function PanelContent() { } }, [dispatch, uiSelectedEvent, paramsSelectedEvent, lastUpdatedProcess, timestamp]); - const relatedEventStats = useSelector(selectors.relatedEventsStats); + const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats); const { crumbId, crumbEvent } = queryParams; const relatedStatsForIdFromParams: ResolverNodeStats | undefined = idFromParams ? relatedEventStats(idFromParams) diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx index adfcc4cc44d1f..115bea686af7c 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { memo, useMemo, HTMLAttributes } from 'react'; -import { useSelector } from 'react-redux'; import { i18n } from '@kbn/i18n'; import { htmlIdGenerator, @@ -17,8 +16,10 @@ import { import styled from 'styled-components'; import { FormattedMessage } from 'react-intl'; import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list'; + import * as selectors from '../../store/selectors'; import * as event from '../../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities'; import { processPath, @@ -51,7 +52,7 @@ export const ProcessDetails = memo(function ProcessDetails({ }) { const processName = event.eventName(processEvent); const entityId = event.entityId(processEvent); - const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId); + const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated)(entityId); const processInfoEntry: EuiDescriptionListProps['listItems'] = useMemo(() => { const eventTime = event.eventTimestamp(processEvent); const dateTime = eventTime === undefined ? null : formatDate(eventTime); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx index 101711475c938..de096007a52ba 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx @@ -7,9 +7,9 @@ import React, { memo, useMemo, useEffect, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiTitle, EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui'; -import { useSelector } from 'react-redux'; import { FormattedMessage } from 'react-intl'; import styled from 'styled-components'; + import { CrumbInfo, formatDate, @@ -18,6 +18,7 @@ import { StyledTime, } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; @@ -72,7 +73,7 @@ const DisplayList = memo(function DisplayList({ eventType: string; processEntityId: string; }) { - const relatedLookupsByCategory = useSelector(selectors.relatedEventInfoByEntityId); + const relatedLookupsByCategory = useShallowEqualSelector(selectors.relatedEventInfoByEntityId); const lookupsForThisNode = relatedLookupsByCategory(processEntityId); const shouldShowLimitWarning = lookupsForThisNode?.shouldShowLimitForCategory(eventType); const numberDisplayed = lookupsForThisNode?.numberActuallyDisplayedForCategory(eventType); @@ -160,7 +161,7 @@ export const ProcessEventList = memo(function ProcessEventList({ } ); - const relatedsReadyMap = useSelector(selectors.relatedEventsReady); + const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady); const relatedsReady = relatedsReadyMap.get(processEntityId); const dispatch = useResolverDispatch(); @@ -185,7 +186,7 @@ export const ProcessEventList = memo(function ProcessEventList({ ]; }, [pushToQueryParams, eventsString]); - const relatedByCategory = useSelector(selectors.relatedEventsByCategory); + const relatedByCategory = useShallowEqualSelector(selectors.relatedEventsByCategory); /** * A list entry will be displayed for each of these diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx index 1be4b4b055243..56930e7ba2db9 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx @@ -12,9 +12,10 @@ import { EuiInMemoryTable, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useSelector } from 'react-redux'; import styled from 'styled-components'; + import * as event from '../../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import * as selectors from '../../store/selectors'; import { CrumbInfo, formatter, StyledBreadcrumbs } from './panel_content_utilities'; import { useResolverDispatch } from '../use_resolver_dispatch'; @@ -61,7 +62,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ const dispatch = useResolverDispatch(); const { timestamp } = useContext(SideEffectContext); - const isProcessTerminated = useSelector(selectors.isProcessTerminated); + const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated); const handleBringIntoViewClick = useCallback( (processTableViewItem) => { dispatch({ @@ -149,7 +150,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ [pushToQueryParams, handleBringIntoViewClick, isProcessTerminated] ); - const { processNodePositions } = useSelector(selectors.layout); + const { processNodePositions } = useShallowEqualSelector(selectors.layout); const processTableView: ProcessTableView[] = useMemo( () => [...processNodePositions.keys()].map((processEvent) => { @@ -175,8 +176,8 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ ]; }, []); - const children = useSelector(selectors.hasMoreChildren); - const ancestors = useSelector(selectors.hasMoreAncestors); + const children = useShallowEqualSelector(selectors.hasMoreChildren); + const ancestors = useShallowEqualSelector(selectors.hasMoreAncestors); const showWarning = children === true || ancestors === true; const rowProps = useMemo(() => ({ 'data-test-subj': 'resolver:node-list:item' }), []); return ( diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx index 3579b1b2f69b8..4541038965faa 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx @@ -8,8 +8,8 @@ import React, { memo, useMemo, useEffect, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '@elastic/eui'; import styled from 'styled-components'; -import { useSelector } from 'react-redux'; import { FormattedMessage } from 'react-intl'; + import { CrumbInfo, formatDate, @@ -19,6 +19,7 @@ import { } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; import { ResolverEvent } from '../../../../common/endpoint/types'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import { PanelContentError } from './panel_content_error'; @@ -121,7 +122,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({ } ); - const relatedsReadyMap = useSelector(selectors.relatedEventsReady); + const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady); const relatedsReady = relatedsReadyMap.get(processEntityId!); const dispatch = useResolverDispatch(); @@ -138,9 +139,9 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({ } }, [relatedsReady, dispatch, processEntityId]); - const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get( - processEntityId! - ); + const relatedEventsForThisProcess = useShallowEqualSelector( + selectors.relatedEventsByEntityId + ).get(processEntityId!); const [relatedEventToShowDetailsFor, countBySameCategory, relatedEventCategory] = useMemo(() => { if (!relatedEventsForThisProcess) { diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index 2bb104801866f..7d74291289caa 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { useSelector } from 'react-redux'; + import { NodeSubMenu, subMenuAssets } from './submenu'; import { applyMatrix3 } from '../models/vector2'; import { Vector2, Matrix3 } from '../types'; @@ -17,6 +17,7 @@ import { SymbolIds, useResolverTheme, calculateResolverFontSize } from './assets import { ResolverEvent, SafeResolverEvent } from '../../../common/endpoint/types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as eventModel from '../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; import * as selectors from '../store/selectors'; import { useResolverQueryParams } from './use_resolver_query_params'; @@ -99,7 +100,9 @@ const UnstyledProcessEventDot = React.memo( */ timeAtRender: number; }) => { - const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID); + const resolverComponentInstanceID = useShallowEqualSelector( + selectors.resolverComponentInstanceID + ); // This should be unique to each instance of Resolver const htmlIDPrefix = `resolver:${resolverComponentInstanceID}`; @@ -111,14 +114,14 @@ const UnstyledProcessEventDot = React.memo( const [xScale] = projectionMatrix; // Node (html id=) IDs - const ariaActiveDescendant = useSelector(selectors.ariaActiveDescendant); - const selectedNode = useSelector(selectors.selectedNode); + const ariaActiveDescendant = useShallowEqualSelector(selectors.ariaActiveDescendant); + const selectedNode = useShallowEqualSelector(selectors.selectedNode); const nodeID: string | undefined = eventModel.entityIDSafeVersion(event); if (nodeID === undefined) { // NB: this component should be taking nodeID as a `string` instead of handling this logic here throw new Error('Tried to render a node with no ID'); } - const relatedEventStats = useSelector(selectors.relatedEventsStats)(nodeID); + const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats)(nodeID); // define a standard way of giving HTML IDs to nodes based on their entity_id/nodeID. // this is used to link nodes via aria attributes @@ -126,12 +129,12 @@ const UnstyledProcessEventDot = React.memo( htmlIDPrefix, ]); - const ariaLevel: number | null = useSelector(selectors.ariaLevel)(nodeID); + const ariaLevel: number | null = useShallowEqualSelector(selectors.ariaLevel)(nodeID); // the node ID to 'flowto' - const ariaFlowtoNodeID: string | null = useSelector(selectors.ariaFlowtoNodeID)(timeAtRender)( - nodeID - ); + const ariaFlowtoNodeID: string | null = useShallowEqualSelector(selectors.ariaFlowtoNodeID)( + timeAtRender + )(nodeID); const isShowingEventActions = xScale > 0.8; const isShowingDescriptionText = xScale >= 0.55; @@ -290,9 +293,9 @@ const UnstyledProcessEventDot = React.memo( ? subMenuAssets.initialMenuStatus : relatedEventOptions; - const grandTotal: number | null = useSelector(selectors.relatedEventTotalForProcess)( - event as ResolverEvent - ); + const grandTotal: number | null = useShallowEqualSelector( + selectors.relatedEventTotalForProcess + )(event as ResolverEvent); /* eslint-disable jsx-a11y/click-events-have-key-events */ /** diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx index 32faeec043f2d..3997e3f846818 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx @@ -7,9 +7,9 @@ /* eslint-disable react/display-name */ import React, { useContext, useCallback } from 'react'; -import { useSelector } from 'react-redux'; import { EuiLoadingSpinner } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; + import { useResolverQueryParamCleaner } from './use_resolver_query_params_cleaner'; import * as selectors from '../store/selectors'; import { EdgeLine } from './edge_line'; @@ -20,6 +20,7 @@ import { SymbolDefinitions, useResolverTheme } from './assets'; import { useStateSyncingActions } from './use_state_syncing_actions'; import { StyledMapContainer, StyledPanel, GraphContainer } from './styles'; import { entityIDSafeVersion } from '../../../common/endpoint/models/event'; +import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; import { SideEffectContext } from './side_effect_context'; import { ResolverProps } from '../types'; @@ -46,10 +47,10 @@ export const ResolverWithoutProviders = React.memo( // use this for the entire render in order to keep things in sync const timeAtRender = timestamp(); - const { processNodePositions, connectingEdgeLineSegments } = useSelector( + const { processNodePositions, connectingEdgeLineSegments } = useShallowEqualSelector( selectors.visibleNodesAndEdgeLines )(timeAtRender); - const terminatedProcesses = useSelector(selectors.terminatedProcesses); + const terminatedProcesses = useShallowEqualSelector(selectors.terminatedProcesses); const { projectionMatrix, ref: cameraRef, onMouseDown } = useCamera(); const ref = useCallback( @@ -66,9 +67,9 @@ export const ResolverWithoutProviders = React.memo( }, [cameraRef, refToForward] ); - const isLoading = useSelector(selectors.isLoading); - const hasError = useSelector(selectors.hasError); - const activeDescendantId = useSelector(selectors.ariaActiveDescendant); + const isLoading = useShallowEqualSelector(selectors.isLoading); + const hasError = useShallowEqualSelector(selectors.hasError); + const activeDescendantId = useShallowEqualSelector(selectors.ariaActiveDescendant); const { colorMap } = useResolverTheme(); return ( diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts index 661e038d04e32..ce623f13f544a 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts @@ -11,11 +11,12 @@ import React, { useLayoutEffect, useContext, } from 'react'; -import { useSelector } from 'react-redux'; + import { SideEffectContext } from './side_effect_context'; import { Matrix3 } from '../types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as selectors from '../store/selectors'; +import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; export function useCamera(): { /** @@ -40,7 +41,7 @@ export function useCamera(): { * to determine where it belongs on the screen. * The projection matrix changes over time if the camera is currently animating. */ - const projectionMatrixAtTime = useSelector(selectors.projectionMatrix); + const projectionMatrixAtTime = useShallowEqualSelector(selectors.projectionMatrix); /** * Use a ref to refer to the `projectionMatrixAtTime` function. The rAF loop @@ -61,8 +62,8 @@ export function useCamera(): { projectionMatrixAtTime(sideEffectors.timestamp()) ); - const userIsPanning = useSelector(selectors.userIsPanning); - const isAnimatingAtTime = useSelector(selectors.isAnimating); + const userIsPanning = useShallowEqualSelector(selectors.userIsPanning); + const isAnimatingAtTime = useShallowEqualSelector(selectors.isAnimating); const [elementBoundingClientRect, clientRectCallback] = useAutoUpdatingClientRect(); diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts index 11f1a30db72fc..4fe65e65f4c94 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts @@ -4,14 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ -import { useSelector } from 'react-redux'; +import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; import * as selectors from '../store/selectors'; /** * Get the query string keys used by this Resolver instance. */ export function useQueryStringKeys(): { idKey: string; eventKey: string } { - const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID); + const resolverComponentInstanceID = useShallowEqualSelector( + selectors.resolverComponentInstanceID + ); const idKey: string = `resolver-${resolverComponentInstanceID}-id`; const eventKey: string = `resolver-${resolverComponentInstanceID}-event`; return { diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx index ededf70152968..7e63735149848 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx @@ -14,7 +14,7 @@ import { } from '@elastic/eui'; import { noop } from 'lodash/fp'; import React, { useCallback, useMemo } from 'react'; -import { connect, ConnectedProps, useDispatch, useSelector } from 'react-redux'; +import { connect, ConnectedProps, useDispatch } from 'react-redux'; import styled from 'styled-components'; import { FULL_SCREEN } from '../timeline/body/column_headers/translations'; @@ -22,6 +22,7 @@ import { EXIT_FULL_SCREEN } from '../../../common/components/exit_full_screen/tr import { FULL_SCREEN_TOGGLED_CLASS_NAME } from '../../../../common/constants'; import { useFullScreen } from '../../../common/containers/use_full_screen'; import { State } from '../../../common/store'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { TimelineId, TimelineType } from '../../../../common/types/timeline'; import { timelineSelectors } from '../../store/timeline'; import { timelineDefaults } from '../../store/timeline/defaults'; @@ -107,7 +108,7 @@ const GraphOverlayComponent = ({ dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: '' })); }, [dispatch, timelineId]); - const currentTimeline = useSelector((state: State) => + const currentTimeline = useShallowEqualSelector((state: State) => timelineSelectors.selectTimeline(state, timelineId) ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx index 2792b264ba7e2..61e498f769913 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx @@ -20,10 +20,11 @@ import { EuiInMemoryTable, } from '@elastic/eui'; import React, { useState, useCallback, useRef } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { State } from '../../../common/store'; +import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; import { renderers } from './catalog'; import { setExcludedRowRendererIds as dispatchSetExcludedRowRendererIds } from '../../../timelines/store/timeline/actions'; @@ -81,7 +82,7 @@ const StatefulRowRenderersBrowserComponent: React.FC { const tableRef = useRef>(); const dispatch = useDispatch(); - const excludedRowRendererIds = useSelector( + const excludedRowRendererIds = useShallowEqualSelector( (state: State) => state.timeline.timelineById[timelineId]?.excludedRowRendererIds || [] ); const [show, setShow] = useState(false); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx index 78ee9bdd053b2..d7cd2e27ab4a1 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx @@ -5,7 +5,6 @@ */ import { mount } from 'enzyme'; import React from 'react'; -import { useSelector } from 'react-redux'; import { TestProviders, mockTimelineModel } from '../../../../../common/mock'; import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants'; @@ -13,17 +12,16 @@ import * as i18n from '../translations'; import { Actions } from '.'; import { TimelineType } from '../../../../../../common/types/timeline'; +import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; -jest.mock('react-redux', () => { - const origin = jest.requireActual('react-redux'); - return { - ...origin, - useSelector: jest.fn(), - }; -}); +jest.mock('../../../../../common/hooks/use_shallow_equal_selector', () => ({ + useShallowEqualSelector: jest.fn(), +})); describe('Actions', () => { - (useSelector as jest.Mock).mockReturnValue(mockTimelineModel); + beforeEach(() => { + (useShallowEqualSelector as jest.Mock).mockReturnValue(mockTimelineModel); + }); test('it renders a checkbox for selecting the event when `showCheckboxes` is `true`', () => { const wrapper = mount( @@ -235,7 +233,7 @@ describe('Actions', () => { }); test('it renders correct tooltip for NotesButton - timeline template', () => { - (useSelector as jest.Mock).mockReturnValue({ + (useShallowEqualSelector as jest.Mock).mockReturnValue({ ...mockTimelineModel, timelineType: TimelineType.template, }); @@ -268,7 +266,6 @@ describe('Actions', () => { expect(wrapper.find('[data-test-subj="add-note"]').prop('toolTip')).toEqual( i18n.NOTES_DISABLE_TOOLTIP ); - (useSelector as jest.Mock).mockReturnValue(mockTimelineModel); }); test('it does NOT render a pin button when isEventViewer is true', () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx index c9c8250922161..e7132135c2164 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import { useSelector } from 'react-redux'; import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; import { Note } from '../../../../../common/lib/note'; import { StoreState } from '../../../../../common/store/types'; import { TimelineType } from '../../../../../../common/types/timeline'; +import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; import { TimelineModel } from '../../../../store/timeline/model'; @@ -87,9 +87,10 @@ export const Actions = React.memo( toggleShowNotes, updateNote, }) => { - const timeline = useSelector((state) => { - return state.timeline.timelineById['timeline-1']; - }); + const timeline = useShallowEqualSelector( + (state) => state.timeline.timelineById['timeline-1'] + ); + return ( = ({ }) => { const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({}); const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({}); - const timeline = useSelector((state) => { - return state.timeline.timelineById['timeline-1']; - }); + const timeline = useShallowEqualSelector( + (state) => state.timeline.timelineById['timeline-1'] + ); const divElement = useRef(null); const onToggleShowNotes = useCallback(() => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx index 4eac5360321c1..66c7e6679edbf 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx @@ -5,7 +5,6 @@ */ import { ReactWrapper } from 'enzyme'; import React from 'react'; -import { useSelector } from 'react-redux'; import '../../../../common/mock/match_media'; import { mockBrowserFields } from '../../../../common/containers/source/mock'; @@ -28,13 +27,9 @@ const mockSort: Sort = { sortDirection: Direction.desc, }; -jest.mock('react-redux', () => { - const origin = jest.requireActual('react-redux'); - return { - ...origin, - useSelector: jest.fn(), - }; -}); +jest.mock('../../../../common/hooks/use_shallow_equal_selector', () => ({ + useShallowEqualSelector: jest.fn().mockReturnValue(mockTimelineModel), +})); jest.mock('../../../../common/components/link_to'); @@ -87,7 +82,6 @@ describe('Body', () => { toggleColumn: jest.fn(), updateNote: jest.fn(), }; - (useSelector as jest.Mock).mockReturnValue(mockTimelineModel); describe('rendering', () => { test('it renders the column headers', () => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx index 71cf81c00dc09..d0d59cd0531ec 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx @@ -15,10 +15,11 @@ import { EuiContextMenuPanelItemDescriptor, } from '@elastic/eui'; import uuid from 'uuid'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { BrowserFields } from '../../../../common/containers/source'; import { TimelineType } from '../../../../../common/types/timeline'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { StatefulEditDataProvider } from '../../edit_data_provider'; import { addContentToTimeline } from './helpers'; import { DataProviderType } from './data_provider'; @@ -36,7 +37,7 @@ const AddDataProviderPopoverComponent: React.FC = ( }) => { const dispatch = useDispatch(); const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false); - const timelineById = useSelector(timelineSelectors.timelineByIdSelector); + const timelineById = useShallowEqualSelector(timelineSelectors.timelineByIdSelector); const { dataProviders, timelineType } = timelineById[timelineId] ?? {}; const handleOpenPopover = useCallback(() => setIsAddFilterPopoverOpen(true), [ diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx index ece23d7a10886..6b70ac1ff4887 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx @@ -6,10 +6,11 @@ import { noop } from 'lodash/fp'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { TimelineType } from '../../../../../common/types/timeline'; import { BrowserFields } from '../../../../common/containers/source'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { timelineSelectors } from '../../../store/timeline'; import { OnDataProviderEdited } from '../events'; @@ -59,7 +60,7 @@ export const ProviderItemBadge = React.memo( val, type = DataProviderType.default, }) => { - const timelineById = useSelector(timelineSelectors.timelineByIdSelector); + const timelineById = useShallowEqualSelector(timelineSelectors.timelineByIdSelector); const timelineType = timelineId ? timelineById[timelineId]?.timelineType : TimelineType.default; const { getManageTimelineById } = useManageTimeline(); const isLoading = useMemo(() => getManageTimelineById(timelineId ?? '').isLoading, [ diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx index 0adf767308269..2c8cfac17cfa7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx @@ -6,7 +6,7 @@ import { EuiButtonIcon, EuiPopover, EuiSelectableOption, EuiToolTip } from '@elastic/eui'; import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { OpenTimelineResult } from '../../open_timeline/types'; import { SelectableTimeline } from '../selectable_timeline'; @@ -14,6 +14,7 @@ import * as i18n from '../translations'; import { timelineActions, timelineSelectors } from '../../../../timelines/store/timeline'; import { TimelineType } from '../../../../../common/types/timeline'; import { State } from '../../../../common/store'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { setInsertTimeline } from '../../../store/timeline/actions'; interface InsertTimelinePopoverProps { @@ -35,10 +36,8 @@ export const InsertTimelinePopoverComponent: React.FC = ({ }) => { const dispatch = useDispatch(); const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const insertTimeline = useShallowEqualSelector(timelineSelectors.selectInsertTimeline); - const insertTimeline = useSelector((state: State) => { - return timelineSelectors.selectInsertTimeline(state); - }); useEffect(() => { if (insertTimeline != null) { dispatch(timelineActions.showTimeline({ id: insertTimeline.timelineId, show: false })); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx index 86334308558b8..80522c8e4f405 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx @@ -20,7 +20,7 @@ import { import React, { useCallback, useMemo } from 'react'; import uuid from 'uuid'; import styled from 'styled-components'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { APP_ID } from '../../../../../common/constants'; import { @@ -36,6 +36,7 @@ import { getCreateCaseUrl } from '../../../../common/components/link_to'; import { State } from '../../../../common/store'; import { useKibana } from '../../../../common/lib/kibana'; import { Note } from '../../../../common/lib/note'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { Notes } from '../../notes'; import { AssociateNote, UpdateNote } from '../../notes/helpers'; @@ -159,7 +160,7 @@ interface NewCaseProps { export const NewCase = React.memo( ({ compact, graphEventId, onClosePopover, timelineId, timelineStatus, timelineTitle }) => { const dispatch = useDispatch(); - const { savedObjectId } = useSelector((state: State) => + const { savedObjectId } = useShallowEqualSelector((state: State) => timelineSelectors.selectTimeline(state, timelineId) ); const { navigateToApp } = useKibana().services.application; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx index 97f3b1df011ff..c82609265887c 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx @@ -4,8 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { useCallback } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { EuiButton, EuiButtonEmpty } from '@elastic/eui'; + import { defaultHeaders } from '../body/column_headers/default_headers'; import { timelineActions } from '../../../store/timeline'; import { useFullScreen } from '../../../../common/containers/use_full_screen'; @@ -14,6 +15,7 @@ import { TimelineType, TimelineTypeLiteral, } from '../../../../../common/types/timeline'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { inputsActions, inputsSelectors } from '../../../../common/store/inputs'; export const useCreateTimelineButton = ({ @@ -27,7 +29,7 @@ export const useCreateTimelineButton = ({ }) => { const dispatch = useDispatch(); const { timelineFullScreen, setTimelineFullScreen } = useFullScreen(); - const globalTimeRange = useSelector(inputsSelectors.globalTimeRangeSelector); + const globalTimeRange = useShallowEqualSelector(inputsSelectors.globalTimeRangeSelector); const createTimeline = useCallback( ({ id, show }) => { if (id === TimelineId.active && timelineFullScreen) { From 186d4e660f940b0c613269589e18e2d63b89dd67 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Tue, 18 Aug 2020 22:40:37 +0200 Subject: [PATCH 2/7] Fix types --- .../cases/components/use_all_cases_modal/index.tsx | 3 +-- .../public/common/containers/use_full_screen/index.tsx | 6 ++++-- .../public/common/hooks/use_shallow_equal_selector.tsx | 9 ++++++++- .../public/common/store/inputs/selectors.ts | 4 ++-- .../public/management/pages/endpoint_hosts/view/hooks.ts | 3 +-- .../public/management/pages/policy/view/policy_hooks.ts | 5 ++--- .../public/resolver/view/use_query_string_keys.ts | 4 ++-- .../public/timelines/components/graph_overlay/index.tsx | 2 +- .../timelines/components/timeline/body/actions/index.tsx | 3 +-- .../components/timeline/body/events/stateful_event.tsx | 3 +-- .../timeline/insert_timeline_popover/index.tsx | 1 - .../timelines/components/timeline/properties/helpers.tsx | 3 +-- 12 files changed, 24 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx index 7064dcd252ef7..c459b97f9c0a1 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx @@ -12,7 +12,6 @@ import { APP_ID } from '../../../../common/constants'; import { SecurityPageName } from '../../../app/types'; import { useKibana } from '../../../common/lib/kibana'; import { getCaseDetailsUrl, getCreateCaseUrl } from '../../../common/components/link_to'; -import { State } from '../../../common/store'; import { setInsertTimeline } from '../../../timelines/store/timeline/actions'; import { timelineSelectors } from '../../../timelines/store/timeline'; @@ -35,7 +34,7 @@ export const useAllCasesModal = ({ }: UseAllCasesModalProps): UseAllCasesModalReturnedValues => { const dispatch = useDispatch(); const { navigateToApp } = useKibana().services.application; - const timeline = useShallowEqualSelector((state: State) => + const timeline = useShallowEqualSelector((state) => timelineSelectors.selectTimeline(state, timelineId) ); diff --git a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx index 7353b10e6a473..711bb42f5c8aa 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx @@ -30,8 +30,10 @@ export const resetScroll = () => { export const useFullScreen = () => { const dispatch = useDispatch(); - const globalFullScreen = useShallowEqualSelector(inputsSelectors.globalFullScreenSelector); - const timelineFullScreen = useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector); + const globalFullScreen = + useShallowEqualSelector(inputsSelectors.globalFullScreenSelector) ?? false; + const timelineFullScreen = + useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector) ?? false; const setGlobalFullScreen = useCallback( (fullScreen: boolean) => { diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx b/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx index 5a02c3339013b..744eb49c54e2c 100644 --- a/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx +++ b/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx @@ -6,5 +6,12 @@ // eslint-disable-next-line no-restricted-imports import { shallowEqual, useSelector } from 'react-redux'; +import { State } from '../store'; -export const useShallowEqualSelector = (selector) => useSelector(selector, shallowEqual); +export type TypedUseSelectorHook = ( + selector: (state: TState) => TSelected, + equalityFn?: (left: TSelected, right: TSelected) => boolean +) => TSelected; + +export const useShallowEqualSelector: TypedUseSelectorHook = (selector) => + useSelector(selector, shallowEqual); diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts b/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts index d82aeb979681c..9feb2f87d7e08 100644 --- a/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts +++ b/x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts @@ -41,14 +41,14 @@ export const inputsSelector = () => createSelector(selectInputs, (inputs) => inp export const timelineTimeRangeSelector = createSelector( selectTimeline, - (timeline) => timeline.timerange ?? false + (timeline) => timeline.timerange ); export const globalFullScreenSelector = createSelector(selectGlobal, (global) => global.fullScreen); export const timelineFullScreenSelector = createSelector( selectTimeline, - (timeline) => timeline.fullScreen ?? false + (timeline) => timeline.fullScreen ); export const globalTimeRangeSelector = createSelector(selectGlobal, (global) => global.timerange); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts index 9b1f219ae27ff..e87b858069011 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts @@ -13,10 +13,9 @@ import { MANAGEMENT_STORE_ENDPOINTS_NAMESPACE, MANAGEMENT_STORE_GLOBAL_NAMESPACE, } from '../../../common/constants'; -import { State } from '../../../../common/store'; export const useEndpointSelector = (selector: (state: EndpointState) => TSelected) => - useShallowEqualSelector((state: State) => + useShallowEqualSelector((state) => selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_ENDPOINTS_NAMESPACE diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts index 829d09667455a..5f84da841835c 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts @@ -5,7 +5,6 @@ */ import { PolicyListState, PolicyDetailsState } from '../types'; -import { State } from '../../../../common/store'; import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { MANAGEMENT_STORE_GLOBAL_NAMESPACE, @@ -18,7 +17,7 @@ import { * @param selector */ export const usePolicyListSelector = (selector: (state: PolicyListState) => TSelected) => - useShallowEqualSelector((state: State) => + useShallowEqualSelector((state) => selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_LIST_NAMESPACE @@ -33,7 +32,7 @@ export const usePolicyListSelector = (selector: (state: PolicyListSta export const usePolicyDetailsSelector = ( selector: (state: PolicyDetailsState) => TSelected ) => - useShallowEqualSelector((state: State) => + useShallowEqualSelector((state) => selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts index 4fe65e65f4c94..e073261b03f90 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts @@ -10,7 +10,7 @@ import * as selectors from '../store/selectors'; /** * Get the query string keys used by this Resolver instance. */ -export function useQueryStringKeys(): { idKey: string; eventKey: string } { +export const useQueryStringKeys = (): { idKey: string; eventKey: string } => { const resolverComponentInstanceID = useShallowEqualSelector( selectors.resolverComponentInstanceID ); @@ -20,4 +20,4 @@ export function useQueryStringKeys(): { idKey: string; eventKey: string } { idKey, eventKey, }; -} +}; diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx index 7e63735149848..e45f097da4ba9 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx @@ -108,7 +108,7 @@ const GraphOverlayComponent = ({ dispatch(updateTimelineGraphEventId({ id: timelineId, graphEventId: '' })); }, [dispatch, timelineId]); - const currentTimeline = useShallowEqualSelector((state: State) => + const currentTimeline = useShallowEqualSelector((state) => timelineSelectors.selectTimeline(state, timelineId) ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx index e7132135c2164..5214db4b9daa5 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx @@ -7,7 +7,6 @@ import React from 'react'; import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; import { Note } from '../../../../../common/lib/note'; -import { StoreState } from '../../../../../common/store/types'; import { TimelineType } from '../../../../../../common/types/timeline'; import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; @@ -87,7 +86,7 @@ export const Actions = React.memo( toggleShowNotes, updateNote, }) => { - const timeline = useShallowEqualSelector( + const timeline = useShallowEqualSelector( (state) => state.timeline.timelineById['timeline-1'] ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx index 90b738df571be..c4467ba813106 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx @@ -33,7 +33,6 @@ import { getEventType } from '../helpers'; import { NoteCards } from '../../../notes/note_cards'; import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context'; import { EventColumnView } from './event_column_view'; -import { StoreState } from '../../../../../common/store'; interface Props { actionsColumnWidth: number; @@ -130,7 +129,7 @@ const StatefulEventComponent: React.FC = ({ }) => { const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({}); const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({}); - const timeline = useShallowEqualSelector( + const timeline = useShallowEqualSelector( (state) => state.timeline.timelineById['timeline-1'] ); const divElement = useRef(null); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx index 2c8cfac17cfa7..2bec3f1b2f472 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx @@ -13,7 +13,6 @@ import { SelectableTimeline } from '../selectable_timeline'; import * as i18n from '../translations'; import { timelineActions, timelineSelectors } from '../../../../timelines/store/timeline'; import { TimelineType } from '../../../../../common/types/timeline'; -import { State } from '../../../../common/store'; import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; import { setInsertTimeline } from '../../../store/timeline/actions'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx index 80522c8e4f405..2b8276b69cbfd 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx @@ -33,7 +33,6 @@ import { import { SecurityPageName } from '../../../../app/types'; import { timelineSelectors } from '../../../../timelines/store/timeline'; import { getCreateCaseUrl } from '../../../../common/components/link_to'; -import { State } from '../../../../common/store'; import { useKibana } from '../../../../common/lib/kibana'; import { Note } from '../../../../common/lib/note'; import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; @@ -160,7 +159,7 @@ interface NewCaseProps { export const NewCase = React.memo( ({ compact, graphEventId, onClosePopover, timelineId, timelineStatus, timelineTitle }) => { const dispatch = useDispatch(); - const { savedObjectId } = useShallowEqualSelector((state: State) => + const { savedObjectId } = useShallowEqualSelector((state) => timelineSelectors.selectTimeline(state, timelineId) ); const { navigateToApp } = useKibana().services.application; From 865367ae7b558510ed0e2a074074ec5845b53f2f Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Wed, 19 Aug 2020 10:17:11 +0200 Subject: [PATCH 3/7] add useDeepEqualSelector --- .../public/cases/components/use_all_cases_modal/index.tsx | 2 +- .../common/components/navigation/use_get_url_search.tsx | 4 ++-- .../public/common/containers/use_full_screen/index.tsx | 2 +- .../public/common/containers/use_global_time/index.tsx | 2 +- .../{use_shallow_equal_selector.tsx => use_selector.tsx} | 4 ++++ .../public/management/pages/endpoint_hosts/view/hooks.ts | 2 +- .../public/management/pages/policy/view/policy_hooks.ts | 2 +- .../security_solution/public/resolver/view/graph_controls.tsx | 2 +- .../security_solution/public/resolver/view/panels/index.tsx | 2 +- .../public/resolver/view/panels/process_details.tsx | 2 +- .../public/resolver/view/panels/process_event_list.tsx | 2 +- .../public/resolver/view/panels/process_list_with_counts.tsx | 2 +- .../public/resolver/view/panels/related_event_detail.tsx | 2 +- .../public/resolver/view/process_event_dot.tsx | 2 +- .../public/resolver/view/resolver_without_providers.tsx | 2 +- .../security_solution/public/resolver/view/use_camera.ts | 2 +- .../public/resolver/view/use_query_string_keys.ts | 2 +- .../public/timelines/components/graph_overlay/index.tsx | 2 +- .../timelines/components/row_renderers_browser/index.tsx | 2 +- .../timelines/components/timeline/body/actions/index.test.tsx | 4 ++-- .../timelines/components/timeline/body/actions/index.tsx | 2 +- .../components/timeline/body/events/stateful_event.tsx | 2 +- .../public/timelines/components/timeline/body/index.test.tsx | 2 +- .../timeline/data_providers/add_data_provider_popover.tsx | 2 +- .../timeline/data_providers/provider_item_badge.tsx | 2 +- .../components/timeline/insert_timeline_popover/index.tsx | 2 +- .../timelines/components/timeline/properties/helpers.tsx | 2 +- .../components/timeline/properties/use_create_timeline.tsx | 2 +- 28 files changed, 33 insertions(+), 29 deletions(-) rename x-pack/plugins/security_solution/public/common/hooks/{use_shallow_equal_selector.tsx => use_selector.tsx} (82%) diff --git a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx index c459b97f9c0a1..445ae675007cc 100644 --- a/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.tsx @@ -7,7 +7,7 @@ import React, { useState, useCallback, useMemo } from 'react'; import { useDispatch } from 'react-redux'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { APP_ID } from '../../../../common/constants'; import { SecurityPageName } from '../../../app/types'; import { useKibana } from '../../../common/lib/kibana'; diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx index fd48610d3e7eb..84f691dcd72e1 100644 --- a/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx +++ b/x-pack/plugins/security_solution/public/common/components/navigation/use_get_url_search.tsx @@ -6,14 +6,14 @@ import { useMemo } from 'react'; -import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; +import { useDeepEqualSelector } from '../../hooks/use_selector'; import { makeMapStateToProps } from '../url_state/helpers'; import { getSearch } from './helpers'; import { SearchNavTab } from './types'; export const useGetUrlSearch = (tab: SearchNavTab) => { const mapState = makeMapStateToProps(); - const { urlState } = useShallowEqualSelector(mapState); + const { urlState } = useDeepEqualSelector(mapState); const urlSearch = useMemo(() => getSearch(tab, urlState), [tab, urlState]); return urlSearch; }; diff --git a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx index 711bb42f5c8aa..8357a9d22739e 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_full_screen/index.tsx @@ -8,7 +8,7 @@ import { useCallback, useMemo } from 'react'; import { useDispatch } from 'react-redux'; import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants'; -import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../hooks/use_selector'; import { inputsSelectors } from '../../store'; import { inputsActions } from '../../store/actions'; diff --git a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx index c2480314076a6..e6c47c697c0b2 100644 --- a/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/use_global_time/index.tsx @@ -7,7 +7,7 @@ import { useCallback, useState, useEffect, useMemo } from 'react'; import { useDispatch } from 'react-redux'; -import { useShallowEqualSelector } from '../../hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../hooks/use_selector'; import { inputsSelectors } from '../../store'; import { inputsActions } from '../../store/actions'; import { SetQuery, DeleteQuery } from './types'; diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx b/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx similarity index 82% rename from x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx rename to x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx index 744eb49c54e2c..f34cad0bf27d7 100644 --- a/x-pack/plugins/security_solution/public/common/hooks/use_shallow_equal_selector.tsx +++ b/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx @@ -6,6 +6,7 @@ // eslint-disable-next-line no-restricted-imports import { shallowEqual, useSelector } from 'react-redux'; +import deepEqual from 'fast-deep-equal'; import { State } from '../store'; export type TypedUseSelectorHook = ( @@ -15,3 +16,6 @@ export type TypedUseSelectorHook = ( export const useShallowEqualSelector: TypedUseSelectorHook = (selector) => useSelector(selector, shallowEqual); + +export const useDeepEqualSelector: TypedUseSelectorHook = (selector) => + useSelector(selector, deepEqual); diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts index e87b858069011..1683d75d3ba67 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts @@ -7,7 +7,7 @@ import { useMemo } from 'react'; import { useKibana } from '../../../../common/lib/kibana'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { EndpointState } from '../types'; import { MANAGEMENT_STORE_ENDPOINTS_NAMESPACE, diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts index 5f84da841835c..46bdf1a7de565 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts @@ -5,7 +5,7 @@ */ import { PolicyListState, PolicyDetailsState } from '../types'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { MANAGEMENT_STORE_GLOBAL_NAMESPACE, MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE, diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx index fec24eeb8ee8d..3fe0818e9d481 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx @@ -16,7 +16,7 @@ import { Vector2 } from '../types'; import * as selectors from '../store/selectors'; import { useResolverTheme } from './assets'; import { ResolverAction } from '../store/actions'; -import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../common/hooks/use_selector'; interface StyledGraphControls { graphControlsBackground: string; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx index 0ede687b95517..fa96786d2bcd7 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx @@ -10,7 +10,7 @@ import { EuiPanel } from '@elastic/eui'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import { SideEffectContext } from '../side_effect_context'; import { ProcessEventList } from './process_event_list'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx index 115bea686af7c..3bffe786dc422 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx @@ -19,7 +19,7 @@ import { EuiDescriptionListProps } from '@elastic/eui/src/components/description import * as selectors from '../../store/selectors'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities'; import { processPath, diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx index de096007a52ba..21ad1719a5ac4 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx @@ -18,7 +18,7 @@ import { StyledTime, } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx index 56930e7ba2db9..1f5d54a054b8e 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx @@ -15,7 +15,7 @@ import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import * as selectors from '../../store/selectors'; import { CrumbInfo, formatter, StyledBreadcrumbs } from './panel_content_utilities'; import { useResolverDispatch } from '../use_resolver_dispatch'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx index 4541038965faa..ea1d2ad34ca48 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx @@ -19,7 +19,7 @@ import { } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; import { ResolverEvent } from '../../../../common/endpoint/types'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import { PanelContentError } from './panel_content_error'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index 7d74291289caa..d64627fb60422 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -17,7 +17,7 @@ import { SymbolIds, useResolverTheme, calculateResolverFontSize } from './assets import { ResolverEvent, SafeResolverEvent } from '../../../common/endpoint/types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as eventModel from '../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../common/hooks/use_selector'; import * as selectors from '../store/selectors'; import { useResolverQueryParams } from './use_resolver_query_params'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx index 3997e3f846818..0b5754c10f322 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx @@ -20,7 +20,7 @@ import { SymbolDefinitions, useResolverTheme } from './assets'; import { useStateSyncingActions } from './use_state_syncing_actions'; import { StyledMapContainer, StyledPanel, GraphContainer } from './styles'; import { entityIDSafeVersion } from '../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../common/hooks/use_selector'; import { SideEffectContext } from './side_effect_context'; import { ResolverProps } from '../types'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts index ce623f13f544a..c08eac5fa32ad 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts @@ -16,7 +16,7 @@ import { SideEffectContext } from './side_effect_context'; import { Matrix3 } from '../types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as selectors from '../store/selectors'; -import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../common/hooks/use_selector'; export function useCamera(): { /** diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts index e073261b03f90..644a3eeaa5b94 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { useShallowEqualSelector } from '../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../common/hooks/use_selector'; import * as selectors from '../store/selectors'; /** diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx index e45f097da4ba9..296bd9189f1f7 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx @@ -22,7 +22,7 @@ import { EXIT_FULL_SCREEN } from '../../../common/components/exit_full_screen/tr import { FULL_SCREEN_TOGGLED_CLASS_NAME } from '../../../../common/constants'; import { useFullScreen } from '../../../common/containers/use_full_screen'; import { State } from '../../../common/store'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { TimelineId, TimelineType } from '../../../../common/types/timeline'; import { timelineSelectors } from '../../store/timeline'; import { timelineDefaults } from '../../store/timeline/defaults'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx index 61e498f769913..b59360ea9815c 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/row_renderers_browser/index.tsx @@ -24,7 +24,7 @@ import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { State } from '../../../common/store'; -import { useShallowEqualSelector } from '../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { renderers } from './catalog'; import { setExcludedRowRendererIds as dispatchSetExcludedRowRendererIds } from '../../../timelines/store/timeline/actions'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx index d7cd2e27ab4a1..d9f72ff3ec609 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx @@ -12,9 +12,9 @@ import * as i18n from '../translations'; import { Actions } from '.'; import { TimelineType } from '../../../../../../common/types/timeline'; -import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector'; -jest.mock('../../../../../common/hooks/use_shallow_equal_selector', () => ({ +jest.mock('../../../../../common/hooks/use_selector', () => ({ useShallowEqualSelector: jest.fn(), })); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx index 5214db4b9daa5..bfbd8669c4ca8 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx @@ -8,7 +8,7 @@ import { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elas import { Note } from '../../../../../common/lib/note'; import { TimelineType } from '../../../../../../common/types/timeline'; -import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector'; import { TimelineModel } from '../../../../store/timeline/model'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx index c4467ba813106..1521292179928 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx @@ -9,7 +9,7 @@ import uuid from 'uuid'; import VisibilitySensor from 'react-visibility-sensor'; import { BrowserFields, DocValueFields } from '../../../../../common/containers/source'; -import { useShallowEqualSelector } from '../../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector'; import { TimelineDetailsQuery } from '../../../../containers/details'; import { TimelineItem, DetailItem, TimelineNonEcsData } from '../../../../../graphql/types'; import { Note } from '../../../../../common/lib/note'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx index 66c7e6679edbf..9a500b44347bf 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx @@ -27,7 +27,7 @@ const mockSort: Sort = { sortDirection: Direction.desc, }; -jest.mock('../../../../common/hooks/use_shallow_equal_selector', () => ({ +jest.mock('../../../../common/hooks/use_selector', () => ({ useShallowEqualSelector: jest.fn().mockReturnValue(mockTimelineModel), })); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx index d0d59cd0531ec..a22677ac07309 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx @@ -19,7 +19,7 @@ import { useDispatch } from 'react-redux'; import { BrowserFields } from '../../../../common/containers/source'; import { TimelineType } from '../../../../../common/types/timeline'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { StatefulEditDataProvider } from '../../edit_data_provider'; import { addContentToTimeline } from './helpers'; import { DataProviderType } from './data_provider'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx index 6b70ac1ff4887..0093c43a17137 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx @@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux'; import { TimelineType } from '../../../../../common/types/timeline'; import { BrowserFields } from '../../../../common/containers/source'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { timelineSelectors } from '../../../store/timeline'; import { OnDataProviderEdited } from '../events'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx index 2bec3f1b2f472..aefc5ef6f0135 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/insert_timeline_popover/index.tsx @@ -13,7 +13,7 @@ import { SelectableTimeline } from '../selectable_timeline'; import * as i18n from '../translations'; import { timelineActions, timelineSelectors } from '../../../../timelines/store/timeline'; import { TimelineType } from '../../../../../common/types/timeline'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { setInsertTimeline } from '../../../store/timeline/actions'; interface InsertTimelinePopoverProps { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx index 2b8276b69cbfd..ff930497d4f73 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx @@ -35,7 +35,7 @@ import { timelineSelectors } from '../../../../timelines/store/timeline'; import { getCreateCaseUrl } from '../../../../common/components/link_to'; import { useKibana } from '../../../../common/lib/kibana'; import { Note } from '../../../../common/lib/note'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { Notes } from '../../notes'; import { AssociateNote, UpdateNote } from '../../notes/helpers'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx index c82609265887c..c96484c204ed3 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.tsx @@ -15,7 +15,7 @@ import { TimelineType, TimelineTypeLiteral, } from '../../../../../common/types/timeline'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_shallow_equal_selector'; +import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { inputsActions, inputsSelectors } from '../../../../common/store/inputs'; export const useCreateTimelineButton = ({ From 437c6ef43a628c5b7ed69ec47bed526ab2c2a6df Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Mon, 24 Aug 2020 22:27:28 +0200 Subject: [PATCH 4/7] fix lint --- .../security_solution/public/hosts/containers/hosts/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx b/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx index 346de9f87313f..20bfc1abc74e6 100644 --- a/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx +++ b/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx @@ -7,13 +7,13 @@ import deepEqual from 'fast-deep-equal'; import { noop } from 'lodash/fp'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { useSelector } from 'react-redux'; import { DEFAULT_INDEX_KEY } from '../../../../common/constants'; import { HostsEdges, PageInfoPaginated } from '../../../graphql/types'; import { inputsModel, State } from '../../../common/store'; import { createFilter } from '../../../common/containers/helpers'; import { useKibana } from '../../../common/lib/kibana'; +import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { hostsModel, hostsSelectors } from '../../store'; import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers'; import { @@ -59,7 +59,7 @@ export const useAllHost = ({ type, }: UseAllHost): [boolean, HostsArgs] => { const getHostsSelector = hostsSelectors.hostsSelector(); - const { activePage, direction, limit, sortField } = useSelector((state: State) => + const { activePage, direction, limit, sortField } = useShallowEqualSelector((state: State) => getHostsSelector(state, type) ); const { data, notifications, uiSettings } = useKibana().services; From ce0c6bc0fdb587adc9c108a69264f04d61825326 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Tue, 25 Aug 2020 20:26:12 +0200 Subject: [PATCH 5/7] revert changes in resolver --- .eslintrc.js | 11 -------- .../pages/endpoint_hosts/view/hooks.ts | 14 +++++----- .../pages/policy/view/policy_hooks.ts | 21 ++++++++------- .../public/resolver/view/graph_controls.tsx | 6 ++--- .../public/resolver/view/panels/index.tsx | 9 +++---- .../resolver/view/panels/process_details.tsx | 5 ++-- .../view/panels/process_event_list.tsx | 9 +++---- .../view/panels/process_list_with_counts.tsx | 11 ++++---- .../view/panels/related_event_detail.tsx | 11 ++++---- .../resolver/view/process_event_dot.tsx | 27 +++++++++---------- .../view/resolver_without_providers.tsx | 13 +++++---- .../public/resolver/view/use_camera.ts | 9 +++---- .../resolver/view/use_query_string_keys.ts | 10 +++---- 13 files changed, 68 insertions(+), 88 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index d2a896a0e6795..8c2a46f80a3a8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -826,17 +826,6 @@ module.exports = { { // prevents UI code from importing server side code and then webpack including it when doing builds patterns: ['**/server/*'], - paths: [ - /* - prevents importing raw useSelector which is using different equality function than mapStateToProps, - so to make sure we keep the logic while moving to hooks let's use useShallowEqualSelector - */ - { - name: 'react-redux', - importNames: ['useSelector'], - message: 'Please use "useShallowEqualSelector" instead or create your own selector', - }, - ], }, ], }, diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts index 1683d75d3ba67..da5e33a19c293 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts @@ -4,24 +4,26 @@ * you may not use this file except in compliance with the Elastic License. */ +import { useSelector } from 'react-redux'; import { useMemo } from 'react'; import { useKibana } from '../../../../common/lib/kibana'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; import { EndpointState } from '../types'; import { MANAGEMENT_STORE_ENDPOINTS_NAMESPACE, MANAGEMENT_STORE_GLOBAL_NAMESPACE, } from '../../../common/constants'; +import { State } from '../../../../common/store'; -export const useEndpointSelector = (selector: (state: EndpointState) => TSelected) => - useShallowEqualSelector((state) => - selector( +export function useEndpointSelector(selector: (state: EndpointState) => TSelected) { + return useSelector(function (state: State) { + return selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_ENDPOINTS_NAMESPACE ] as EndpointState - ) - ); + ); + }); +} /** * Returns an object that contains Ingest app and URL information diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts index 46bdf1a7de565..97436064eebe2 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_hooks.ts @@ -4,8 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ +import { useSelector } from 'react-redux'; import { PolicyListState, PolicyDetailsState } from '../types'; -import { useShallowEqualSelector } from '../../../../common/hooks/use_selector'; +import { State } from '../../../../common/store'; import { MANAGEMENT_STORE_GLOBAL_NAMESPACE, MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE, @@ -16,26 +17,28 @@ import { * Narrows global state down to the PolicyListState before calling the provided Policy List Selector * @param selector */ -export const usePolicyListSelector = (selector: (state: PolicyListState) => TSelected) => - useShallowEqualSelector((state) => - selector( +export function usePolicyListSelector(selector: (state: PolicyListState) => TSelected) { + return useSelector((state: State) => { + return selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_LIST_NAMESPACE ] as PolicyListState - ) - ); + ); + }); +} /** * Narrows global state down to the PolicyDetailsState before calling the provided Policy Details Selector * @param selector */ -export const usePolicyDetailsSelector = ( +export function usePolicyDetailsSelector( selector: (state: PolicyDetailsState) => TSelected -) => - useShallowEqualSelector((state) => +) { + return useSelector((state: State) => selector( state[MANAGEMENT_STORE_GLOBAL_NAMESPACE][ MANAGEMENT_STORE_POLICY_DETAILS_NAMESPACE ] as PolicyDetailsState ) ); +} diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx index 3fe0818e9d481..610deef07775b 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx @@ -9,14 +9,12 @@ import React, { useCallback, useMemo, useContext } from 'react'; import styled from 'styled-components'; import { EuiRange, EuiPanel, EuiIcon } from '@elastic/eui'; -import { useDispatch } from 'react-redux'; - +import { useSelector, useDispatch } from 'react-redux'; import { SideEffectContext } from './side_effect_context'; import { Vector2 } from '../types'; import * as selectors from '../store/selectors'; import { useResolverTheme } from './assets'; import { ResolverAction } from '../store/actions'; -import { useShallowEqualSelector } from '../../common/hooks/use_selector'; interface StyledGraphControls { graphControlsBackground: string; @@ -66,7 +64,7 @@ const GraphControlsComponent = React.memo( className?: string; }) => { const dispatch: (action: ResolverAction) => unknown = useDispatch(); - const scalingFactor = useShallowEqualSelector(selectors.scalingFactor); + const scalingFactor = useSelector(selectors.scalingFactor); const { timestamp } = useContext(SideEffectContext); const { colorMap } = useResolverTheme(); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx index fa96786d2bcd7..b3c4eefe5fae7 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx @@ -5,12 +5,11 @@ */ import React, { memo, useMemo, useContext, useLayoutEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; import { EuiPanel } from '@elastic/eui'; - import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import { SideEffectContext } from '../side_effect_context'; import { ProcessEventList } from './process_event_list'; @@ -42,7 +41,7 @@ const PanelContent = memo(function PanelContent() { const { pushToQueryParams, queryParams } = useResolverQueryParams(); - const graphableProcesses = useShallowEqualSelector(selectors.graphableProcesses); + const graphableProcesses = useSelector(selectors.graphableProcesses); const graphableProcessEntityIds = useMemo(() => { return new Set(graphableProcesses.map(event.entityId)); }, [graphableProcesses]); @@ -61,7 +60,7 @@ const PanelContent = memo(function PanelContent() { // The "selected" node (and its corresponding event) in the tree control. // It may need to be synchronized with the ID indicated as selected via the `idFromParams` // memo above. When this is the case, it is handled by the layout effect below. - const selectedNode = useShallowEqualSelector(selectors.selectedNode); + const selectedNode = useSelector(selectors.selectedNode); const uiSelectedEvent = useMemo(() => { return graphableProcesses.find((evt) => event.entityId(evt) === selectedNode); }, [graphableProcesses, selectedNode]); @@ -98,7 +97,7 @@ const PanelContent = memo(function PanelContent() { } }, [dispatch, uiSelectedEvent, paramsSelectedEvent, lastUpdatedProcess, timestamp]); - const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats); + const relatedEventStats = useSelector(selectors.relatedEventsStats); const { crumbId, crumbEvent } = queryParams; const relatedStatsForIdFromParams: ResolverNodeStats | undefined = idFromParams ? relatedEventStats(idFromParams) diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx index 3bffe786dc422..adfcc4cc44d1f 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { memo, useMemo, HTMLAttributes } from 'react'; +import { useSelector } from 'react-redux'; import { i18n } from '@kbn/i18n'; import { htmlIdGenerator, @@ -16,10 +17,8 @@ import { import styled from 'styled-components'; import { FormattedMessage } from 'react-intl'; import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list'; - import * as selectors from '../../store/selectors'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities'; import { processPath, @@ -52,7 +51,7 @@ export const ProcessDetails = memo(function ProcessDetails({ }) { const processName = event.eventName(processEvent); const entityId = event.entityId(processEvent); - const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated)(entityId); + const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId); const processInfoEntry: EuiDescriptionListProps['listItems'] = useMemo(() => { const eventTime = event.eventTimestamp(processEvent); const dateTime = eventTime === undefined ? null : formatDate(eventTime); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx index 21ad1719a5ac4..101711475c938 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx @@ -7,9 +7,9 @@ import React, { memo, useMemo, useEffect, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiTitle, EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui'; +import { useSelector } from 'react-redux'; import { FormattedMessage } from 'react-intl'; import styled from 'styled-components'; - import { CrumbInfo, formatDate, @@ -18,7 +18,6 @@ import { StyledTime, } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; @@ -73,7 +72,7 @@ const DisplayList = memo(function DisplayList({ eventType: string; processEntityId: string; }) { - const relatedLookupsByCategory = useShallowEqualSelector(selectors.relatedEventInfoByEntityId); + const relatedLookupsByCategory = useSelector(selectors.relatedEventInfoByEntityId); const lookupsForThisNode = relatedLookupsByCategory(processEntityId); const shouldShowLimitWarning = lookupsForThisNode?.shouldShowLimitForCategory(eventType); const numberDisplayed = lookupsForThisNode?.numberActuallyDisplayedForCategory(eventType); @@ -161,7 +160,7 @@ export const ProcessEventList = memo(function ProcessEventList({ } ); - const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady); + const relatedsReadyMap = useSelector(selectors.relatedEventsReady); const relatedsReady = relatedsReadyMap.get(processEntityId); const dispatch = useResolverDispatch(); @@ -186,7 +185,7 @@ export const ProcessEventList = memo(function ProcessEventList({ ]; }, [pushToQueryParams, eventsString]); - const relatedByCategory = useShallowEqualSelector(selectors.relatedEventsByCategory); + const relatedByCategory = useSelector(selectors.relatedEventsByCategory); /** * A list entry will be displayed for each of these diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx index 1f5d54a054b8e..1be4b4b055243 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx @@ -12,10 +12,9 @@ import { EuiInMemoryTable, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { useSelector } from 'react-redux'; import styled from 'styled-components'; - import * as event from '../../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import * as selectors from '../../store/selectors'; import { CrumbInfo, formatter, StyledBreadcrumbs } from './panel_content_utilities'; import { useResolverDispatch } from '../use_resolver_dispatch'; @@ -62,7 +61,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ const dispatch = useResolverDispatch(); const { timestamp } = useContext(SideEffectContext); - const isProcessTerminated = useShallowEqualSelector(selectors.isProcessTerminated); + const isProcessTerminated = useSelector(selectors.isProcessTerminated); const handleBringIntoViewClick = useCallback( (processTableViewItem) => { dispatch({ @@ -150,7 +149,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ [pushToQueryParams, handleBringIntoViewClick, isProcessTerminated] ); - const { processNodePositions } = useShallowEqualSelector(selectors.layout); + const { processNodePositions } = useSelector(selectors.layout); const processTableView: ProcessTableView[] = useMemo( () => [...processNodePositions.keys()].map((processEvent) => { @@ -176,8 +175,8 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({ ]; }, []); - const children = useShallowEqualSelector(selectors.hasMoreChildren); - const ancestors = useShallowEqualSelector(selectors.hasMoreAncestors); + const children = useSelector(selectors.hasMoreChildren); + const ancestors = useSelector(selectors.hasMoreAncestors); const showWarning = children === true || ancestors === true; const rowProps = useMemo(() => ({ 'data-test-subj': 'resolver:node-list:item' }), []); return ( diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx index ea1d2ad34ca48..3579b1b2f69b8 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx @@ -8,8 +8,8 @@ import React, { memo, useMemo, useEffect, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '@elastic/eui'; import styled from 'styled-components'; +import { useSelector } from 'react-redux'; import { FormattedMessage } from 'react-intl'; - import { CrumbInfo, formatDate, @@ -19,7 +19,6 @@ import { } from './panel_content_utilities'; import * as event from '../../../../common/endpoint/models/event'; import { ResolverEvent } from '../../../../common/endpoint/types'; -import { useShallowEqualSelector } from '../../../common/hooks/use_selector'; import * as selectors from '../../store/selectors'; import { useResolverDispatch } from '../use_resolver_dispatch'; import { PanelContentError } from './panel_content_error'; @@ -122,7 +121,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({ } ); - const relatedsReadyMap = useShallowEqualSelector(selectors.relatedEventsReady); + const relatedsReadyMap = useSelector(selectors.relatedEventsReady); const relatedsReady = relatedsReadyMap.get(processEntityId!); const dispatch = useResolverDispatch(); @@ -139,9 +138,9 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({ } }, [relatedsReady, dispatch, processEntityId]); - const relatedEventsForThisProcess = useShallowEqualSelector( - selectors.relatedEventsByEntityId - ).get(processEntityId!); + const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get( + processEntityId! + ); const [relatedEventToShowDetailsFor, countBySameCategory, relatedEventCategory] = useMemo(() => { if (!relatedEventsForThisProcess) { diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index d64627fb60422..2bb104801866f 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; - +import { useSelector } from 'react-redux'; import { NodeSubMenu, subMenuAssets } from './submenu'; import { applyMatrix3 } from '../models/vector2'; import { Vector2, Matrix3 } from '../types'; @@ -17,7 +17,6 @@ import { SymbolIds, useResolverTheme, calculateResolverFontSize } from './assets import { ResolverEvent, SafeResolverEvent } from '../../../common/endpoint/types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as eventModel from '../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../common/hooks/use_selector'; import * as selectors from '../store/selectors'; import { useResolverQueryParams } from './use_resolver_query_params'; @@ -100,9 +99,7 @@ const UnstyledProcessEventDot = React.memo( */ timeAtRender: number; }) => { - const resolverComponentInstanceID = useShallowEqualSelector( - selectors.resolverComponentInstanceID - ); + const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID); // This should be unique to each instance of Resolver const htmlIDPrefix = `resolver:${resolverComponentInstanceID}`; @@ -114,14 +111,14 @@ const UnstyledProcessEventDot = React.memo( const [xScale] = projectionMatrix; // Node (html id=) IDs - const ariaActiveDescendant = useShallowEqualSelector(selectors.ariaActiveDescendant); - const selectedNode = useShallowEqualSelector(selectors.selectedNode); + const ariaActiveDescendant = useSelector(selectors.ariaActiveDescendant); + const selectedNode = useSelector(selectors.selectedNode); const nodeID: string | undefined = eventModel.entityIDSafeVersion(event); if (nodeID === undefined) { // NB: this component should be taking nodeID as a `string` instead of handling this logic here throw new Error('Tried to render a node with no ID'); } - const relatedEventStats = useShallowEqualSelector(selectors.relatedEventsStats)(nodeID); + const relatedEventStats = useSelector(selectors.relatedEventsStats)(nodeID); // define a standard way of giving HTML IDs to nodes based on their entity_id/nodeID. // this is used to link nodes via aria attributes @@ -129,12 +126,12 @@ const UnstyledProcessEventDot = React.memo( htmlIDPrefix, ]); - const ariaLevel: number | null = useShallowEqualSelector(selectors.ariaLevel)(nodeID); + const ariaLevel: number | null = useSelector(selectors.ariaLevel)(nodeID); // the node ID to 'flowto' - const ariaFlowtoNodeID: string | null = useShallowEqualSelector(selectors.ariaFlowtoNodeID)( - timeAtRender - )(nodeID); + const ariaFlowtoNodeID: string | null = useSelector(selectors.ariaFlowtoNodeID)(timeAtRender)( + nodeID + ); const isShowingEventActions = xScale > 0.8; const isShowingDescriptionText = xScale >= 0.55; @@ -293,9 +290,9 @@ const UnstyledProcessEventDot = React.memo( ? subMenuAssets.initialMenuStatus : relatedEventOptions; - const grandTotal: number | null = useShallowEqualSelector( - selectors.relatedEventTotalForProcess - )(event as ResolverEvent); + const grandTotal: number | null = useSelector(selectors.relatedEventTotalForProcess)( + event as ResolverEvent + ); /* eslint-disable jsx-a11y/click-events-have-key-events */ /** diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx index 0b5754c10f322..32faeec043f2d 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx @@ -7,9 +7,9 @@ /* eslint-disable react/display-name */ import React, { useContext, useCallback } from 'react'; +import { useSelector } from 'react-redux'; import { EuiLoadingSpinner } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; - import { useResolverQueryParamCleaner } from './use_resolver_query_params_cleaner'; import * as selectors from '../store/selectors'; import { EdgeLine } from './edge_line'; @@ -20,7 +20,6 @@ import { SymbolDefinitions, useResolverTheme } from './assets'; import { useStateSyncingActions } from './use_state_syncing_actions'; import { StyledMapContainer, StyledPanel, GraphContainer } from './styles'; import { entityIDSafeVersion } from '../../../common/endpoint/models/event'; -import { useShallowEqualSelector } from '../../common/hooks/use_selector'; import { SideEffectContext } from './side_effect_context'; import { ResolverProps } from '../types'; @@ -47,10 +46,10 @@ export const ResolverWithoutProviders = React.memo( // use this for the entire render in order to keep things in sync const timeAtRender = timestamp(); - const { processNodePositions, connectingEdgeLineSegments } = useShallowEqualSelector( + const { processNodePositions, connectingEdgeLineSegments } = useSelector( selectors.visibleNodesAndEdgeLines )(timeAtRender); - const terminatedProcesses = useShallowEqualSelector(selectors.terminatedProcesses); + const terminatedProcesses = useSelector(selectors.terminatedProcesses); const { projectionMatrix, ref: cameraRef, onMouseDown } = useCamera(); const ref = useCallback( @@ -67,9 +66,9 @@ export const ResolverWithoutProviders = React.memo( }, [cameraRef, refToForward] ); - const isLoading = useShallowEqualSelector(selectors.isLoading); - const hasError = useShallowEqualSelector(selectors.hasError); - const activeDescendantId = useShallowEqualSelector(selectors.ariaActiveDescendant); + const isLoading = useSelector(selectors.isLoading); + const hasError = useSelector(selectors.hasError); + const activeDescendantId = useSelector(selectors.ariaActiveDescendant); const { colorMap } = useResolverTheme(); return ( diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts index c08eac5fa32ad..661e038d04e32 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_camera.ts @@ -11,12 +11,11 @@ import React, { useLayoutEffect, useContext, } from 'react'; - +import { useSelector } from 'react-redux'; import { SideEffectContext } from './side_effect_context'; import { Matrix3 } from '../types'; import { useResolverDispatch } from './use_resolver_dispatch'; import * as selectors from '../store/selectors'; -import { useShallowEqualSelector } from '../../common/hooks/use_selector'; export function useCamera(): { /** @@ -41,7 +40,7 @@ export function useCamera(): { * to determine where it belongs on the screen. * The projection matrix changes over time if the camera is currently animating. */ - const projectionMatrixAtTime = useShallowEqualSelector(selectors.projectionMatrix); + const projectionMatrixAtTime = useSelector(selectors.projectionMatrix); /** * Use a ref to refer to the `projectionMatrixAtTime` function. The rAF loop @@ -62,8 +61,8 @@ export function useCamera(): { projectionMatrixAtTime(sideEffectors.timestamp()) ); - const userIsPanning = useShallowEqualSelector(selectors.userIsPanning); - const isAnimatingAtTime = useShallowEqualSelector(selectors.isAnimating); + const userIsPanning = useSelector(selectors.userIsPanning); + const isAnimatingAtTime = useSelector(selectors.isAnimating); const [elementBoundingClientRect, clientRectCallback] = useAutoUpdatingClientRect(); diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts index 644a3eeaa5b94..11f1a30db72fc 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_query_string_keys.ts @@ -4,20 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ -import { useShallowEqualSelector } from '../../common/hooks/use_selector'; +import { useSelector } from 'react-redux'; import * as selectors from '../store/selectors'; /** * Get the query string keys used by this Resolver instance. */ -export const useQueryStringKeys = (): { idKey: string; eventKey: string } => { - const resolverComponentInstanceID = useShallowEqualSelector( - selectors.resolverComponentInstanceID - ); +export function useQueryStringKeys(): { idKey: string; eventKey: string } { + const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID); const idKey: string = `resolver-${resolverComponentInstanceID}-id`; const eventKey: string = `resolver-${resolverComponentInstanceID}-event`; return { idKey, eventKey, }; -}; +} From bfdf64c4e0f894f0bee76e0f06c4c512e278e071 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Tue, 25 Aug 2020 20:27:31 +0200 Subject: [PATCH 6/7] leftovers --- .../public/management/pages/endpoint_hosts/view/hooks.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts index da5e33a19c293..a9c84678c88a9 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks.ts @@ -6,7 +6,6 @@ import { useSelector } from 'react-redux'; import { useMemo } from 'react'; - import { useKibana } from '../../../../common/lib/kibana'; import { EndpointState } from '../types'; import { @@ -14,7 +13,6 @@ import { MANAGEMENT_STORE_GLOBAL_NAMESPACE, } from '../../../common/constants'; import { State } from '../../../../common/store'; - export function useEndpointSelector(selector: (state: EndpointState) => TSelected) { return useSelector(function (state: State) { return selector( From c46389d79b4b352e18c00b23e96073cfe2ded4ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= Date: Wed, 26 Aug 2020 09:31:23 +0200 Subject: [PATCH 7/7] Update use_selector.tsx --- .../security_solution/public/common/hooks/use_selector.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx b/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx index f34cad0bf27d7..d5416acb69d14 100644 --- a/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx +++ b/x-pack/plugins/security_solution/public/common/hooks/use_selector.tsx @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -// eslint-disable-next-line no-restricted-imports import { shallowEqual, useSelector } from 'react-redux'; import deepEqual from 'fast-deep-equal'; import { State } from '../store';