Bump redux (4.2.0), reselect (4.1.6), @reduxjs/toolkit (1.7.2), redux…

…-thunk (2.4.1) and immer (9.0.15) (#138818)

* Upgrade Redux to 4.2.0 and Reselect to 4.1.6

* Fix typing in timelines TypedUseSelectorHook

* Upgrade reduxjs-toolkit and fix types

* Upgrade more dependencies and fix types

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Undo unnecessary type fixes

* Add renovate.json config for redux

* Add caret to @reduxjs/toolkit version

* Update package.json

Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

* Update package.json

Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

* Update package.json

Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

* yarn bootstrap

* Ts-ignore failing types in presentation_util redux_embeddables

* Downgrade @reduxjs/toolkit to 1.7.2

* Undo ts-ignores in redux-embeddables

* Remove CombinedState comment

* Rebase onto main

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

package.json

@@ -364,7 +364,7 @@
     "@opentelemetry/resources": "^1.4.0",
     "@opentelemetry/sdk-metrics-base": "^0.30.0",
     "@opentelemetry/semantic-conventions": "^1.4.0",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "1.7.2",
     "@slack/webhook": "^5.0.4",
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.2.1",
@@ -443,7 +443,7 @@
     "https-proxy-agent": "^5.0.0",
     "i18n-iso-countries": "^4.3.1",
     "icalendar": "0.7.1",
-    "immer": "^9.0.6",
+    "immer": "^9.0.15",
     "inquirer": "^7.3.3",
     "intl": "^1.2.5",
     "intl-format-cache": "^2.1.0",
@@ -544,18 +544,18 @@
     "react-visibility-sensor": "^5.1.1",
     "recompose": "^0.30.0",
     "reduce-reducers": "^1.0.4",
-    "redux": "^4.1.0",
+    "redux": "^4.2.0",
     "redux-actions": "^2.6.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
     "redux-observable": "2.0.0",
     "redux-saga": "^1.1.3",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.1",
     "redux-thunks": "^1.0.0",
     "remark-parse": "^8.0.3",
     "remark-stringify": "^8.0.3",
     "require-in-the-middle": "^5.1.0",
-    "reselect": "^4.0.0",
+    "reselect": "^4.1.6",
     "resize-observer-polyfill": "^1.5.1",
     "rison-node": "1.0.2",
     "rrule": "2.6.4",

packages/kbn-test-jest-helpers/BUILD.bazel

@@ -108,7 +108,6 @@ TYPES_DEPS = [
   "@npm//@types/prettier",
   "@npm//@types/react",
   "@npm//@types/react-dom",
-  "@npm//@types/react-redux",
   "@npm//@types/react-router-dom",
   "@npm//@types/semver",
   "@npm//@types/xml2js",

packages/kbn-test/BUILD.bazel

@@ -121,7 +121,6 @@ TYPES_DEPS = [
   "@npm//@types/node",
   "@npm//@types/prettier",
   "@npm//@types/react-dom",
-  "@npm//@types/react-redux",
   "@npm//@types/react-router-dom",
   "@npm//@types/semver",
   "@npm//@types/supertest",

renovate.json

@@ -191,6 +191,22 @@
       "matchBaseBranches": ["main"],
       "labels": ["release_note:skip", "backport:skip", "ci:all-cypress-suites"],
       "enabled": true
+    },
+    {
+      "groupName": "redux",
+      "packageNames": ["redux", "react-redux"],
+      "reviewers":[
+        "team:enterprise-search-frontend",
+        "team:kibana-presentation",
+        "team:kibana-data-discovery",
+        "team:platform-deployment-management",
+        "team:infra-monitoring-ui",
+        "team:kibana-gis",
+        "team:security-solution"
+      ],
+      "matchBaseBranches": ["main"],
+      "labels": ["release_note:skip", "backport:skip", "ci:all-cypress-suites"],
+      "enabled": true
     }
   ]
 }

x-pack/plugins/security_solution/public/common/store/types.ts

@@ -22,7 +22,7 @@ import type { ManagementPluginState } from '../../management';
 import type { UsersPluginState } from '../../users/store';
 import type { GlobalUrlParam } from './global_url_param';
 
-export type StoreState = HostsPluginState &
+export type State = HostsPluginState &
   UsersPluginState &
   NetworkPluginState &
   UsersPluginState &
@@ -34,13 +34,6 @@ export type StoreState = HostsPluginState &
     sourcerer: SourcererState;
     globalUrlParam: GlobalUrlParam;
   };
-/**
- * The redux `State` type for the Security App.
- * We use `CombinedState` to wrap our shape because we create our reducer using `combineReducers`.
- * `combineReducers` returns a type wrapped in `CombinedState`.
- * `CombinedState` is required for redux to know what keys to make optional when preloaded state into a store.
- */
-export type State = CombinedState<StoreState>;
 
 /**
  * like redux's `MiddlewareAPI` but `getState` returns an `Immutable` version of

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts

@@ -174,7 +174,7 @@ export const showView: (state: EndpointState) => EndpointIndexUIQueryParams['sho
  * Returns the Host Status which is connected the fleet agent
  */
 export const hostStatusInfo: (state: Immutable<EndpointState>) => HostStatus = createSelector(
-  (state) => state.hostStatus,
+  (state: Immutable<EndpointState>) => state.hostStatus,
   (hostStatus) => {
     return hostStatus ? hostStatus : HostStatus.UNHEALTHY;
   }
@@ -184,7 +184,7 @@ export const hostStatusInfo: (state: Immutable<EndpointState>) => HostStatus = c
  * Returns the Policy Response overall status
  */
 export const policyResponseStatus: (state: Immutable<EndpointState>) => string = createSelector(
-  (state) => state.policyResponse,
+  (state: Immutable<EndpointState>) => state.policyResponse,
   (policyResponse) => {
     return (policyResponse && policyResponse?.Endpoint?.policy?.applied?.status) || '';
   }

x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/selectors/policy_settings_selectors.ts

@@ -105,7 +105,7 @@ export const license = (state: Immutable<PolicyDetailsState>) => {
 
 /** Returns the policyId from the url */
 export const policyIdFromParams: (state: Immutable<PolicyDetailsState>) => string = createSelector(
-  (state) => state.location,
+  (state: Immutable<PolicyDetailsState>) => state.location,
   (location: PolicyDetailsState['location']) => {
     return (
       matchPath<ManagementRoutePolicyDetailsParams>(location?.pathname ?? '', {

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

@@ -62,9 +62,7 @@ export const useNetworkTls = ({
   type,
 }: UseNetworkTls): [boolean, NetworkTlsArgs] => {
   const getTlsSelector = useMemo(() => networkSelectors.tlsSelector(), []);
-  const { activePage, limit, sort } = useDeepEqualSelector((state) =>
-    getTlsSelector(state, type, flowTarget)
-  );
+  const { activePage, limit, sort } = useDeepEqualSelector((state) => getTlsSelector(state, type));
 
   const [networkTlsRequest, setNetworkTlsRequest] = useState<NetworkTlsRequestOptions | null>(null);
 

x-pack/plugins/security_solution/public/resolver/store/camera/selectors.ts

@@ -64,8 +64,8 @@ function animationIsActive(animation: CameraAnimationState, time: number): boole
  *
  */
 export const scale: (state: CameraState) => (time: number) => Vector2 = createSelector(
-  (state) => state.scalingFactor,
-  (state) => state.animation,
+  (state: CameraState) => state.scalingFactor,
+  (state: CameraState) => state.animation,
   (scalingFactor, animation) => {
     const scaleNotCountingAnimation = scaleFromScalingFactor(scalingFactor);
     /**
@@ -277,7 +277,7 @@ export const scale: (state: CameraState) => (time: number) => Vector2 = createSe
  */
 export const clippingPlanes: (state: CameraState) => (time: number) => ClippingPlanes =
   createSelector(
-    (state) => state.rasterSize,
+    (state: CameraState) => state.rasterSize,
     scale,
     (rasterSize, scaleAtTime) =>
       /**
@@ -305,7 +305,7 @@ export const clippingPlanes: (state: CameraState) => (time: number) => ClippingP
  * Whether or not the camera is animating, at a given time.
  */
 export const isAnimating: (state: CameraState) => (time: number) => boolean = createSelector(
-  (state) => state.animation,
+  (state: CameraState) => state.animation,
   (animation) => (time) => {
     return animation !== undefined && animationIsActive(animation, time);
   }
@@ -324,10 +324,10 @@ export const isAnimating: (state: CameraState) => (time: number) => boolean = cr
  * We could update the translation as the user moved the mouse but floating point drift (round-off error) could occur.
  */
 export const translation: (state: CameraState) => (time: number) => Vector2 = createSelector(
-  (state) => state.panning,
-  (state) => state.translationNotCountingCurrentPanning,
+  (state: CameraState) => state.panning,
+  (state: CameraState) => state.translationNotCountingCurrentPanning,
   scale,
-  (state) => state.animation,
+  (state: CameraState) => state.animation,
   (panning, translationNotCountingCurrentPanning, scaleAtTime, animation) => {
     /**
      * Memoizing this for object reference equality.

x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts

@@ -554,28 +554,9 @@ export const nodesAndEdgelines: (state: DataState) => (
       processNodePositions: visibleProcessNodePositions,
       connectingEdgeLineSegments,
     };
-  }, aaBBEqualityCheck);
+  }, aabbModel.isEqual);
 });
 
-function isAABBType(value: unknown): value is AABB {
-  const castValue = value as AABB;
-  return castValue.maximum !== undefined && castValue.minimum !== undefined;
-}
-
-/**
- * This is needed to avoid the TS error that is caused by using aabbModel.isEqual directly. Ideally we could
- * just pass that function instead of having to check the type of the parameters. It might be worth doing a PR to
- * the reselect library to correct the type.
- */
-function aaBBEqualityCheck<T>(a: T, b: T, index: number): boolean {
-  if (isAABBType(a) && isAABBType(b)) {
-    return aabbModel.isEqual(a, b);
-  } else {
-    // this is equivalent to the default equality check for defaultMemoize
-    return a === b;
-  }
-}
-
 /**
  * If there is a pending request that's for a entity ID that doesn't matche the `entityID`, then we should cancel it.
  */

x-pack/plugins/security_solution/public/resolver/store/selectors.ts

@@ -9,7 +9,13 @@ import { createSelector, defaultMemoize } from 'reselect';
 import * as cameraSelectors from './camera/selectors';
 import * as dataSelectors from './data/selectors';
 import * as uiSelectors from './ui/selectors';
-import type { ResolverState, IsometricTaxiLayout, DataState } from '../types';
+import type {
+  ResolverState,
+  IsometricTaxiLayout,
+  DataState,
+  VisibleEntites,
+  NodeData,
+} from '../types';
 import type { EventStats } from '../../../common/endpoint/types';
 import * as nodeModel from '../../../common/endpoint/models/node';
 
@@ -211,14 +217,9 @@ export const statsTotalForNode = composeSelectors(
 export const visibleNodesAndEdgeLines = createSelector(
   nodesAndEdgelines,
   boundingBox,
-  function (
-    /* eslint-disable @typescript-eslint/no-shadow */
-    nodesAndEdgelines,
-    boundingBox
-    /* eslint-enable @typescript-eslint/no-shadow */
-  ) {
+  function (nodesAndEdgelinesFn, boundingBoxFn) {
     // `boundingBox` and `nodesAndEdgelines` are each memoized.
-    return (time: number) => nodesAndEdgelines(boundingBox(time));
+    return (time: number) => nodesAndEdgelinesFn(boundingBoxFn(time));
   }
 );
 
@@ -240,12 +241,13 @@ export const originID: (state: ResolverState) => string | undefined = composeSel
  * Takes a nodeID (aka entity_id) and returns the node ID of the node that aria should 'flowto' or null
  * If the node has a flowto candidate that is currently visible, that will be returned, otherwise null.
  */
-export const ariaFlowtoNodeID: (
-  state: ResolverState
-) => (time: number) => (nodeID: string) => string | null = createSelector(
+export const ariaFlowtoNodeID = createSelector(
   visibleNodesAndEdgeLines,
   composeSelectors(dataStateSelector, dataSelectors.ariaFlowtoCandidate),
-  (visibleNodesAndEdgeLinesAtTime, ariaFlowtoCandidate) => {
+  function (
+    visibleNodesAndEdgeLinesAtTime: (time: number) => VisibleEntites,
+    ariaFlowtoCandidate: (nodeId: string) => string | null
+  ) {
     return defaultMemoize((time: number) => {
       // get the visible nodes at `time`
       const { processNodePositions } = visibleNodesAndEdgeLinesAtTime(time);
@@ -361,7 +363,10 @@ export const newIDsToRequest: (state: ResolverState) => (time: number) => Set<st
   createSelector(
     composeSelectors(dataStateSelector, (dataState: DataState) => dataState.nodeData),
     visibleNodesAndEdgeLines,
-    function (nodeData, visibleNodesAndEdgeLinesAtTime) {
+    function (
+      nodeData: Map<string, NodeData> | undefined,
+      visibleNodesAndEdgeLinesAtTime: (time: number) => VisibleEntites
+    ) {
       return defaultMemoize((time: number) => {
         const { processNodePositions: nodesInView } = visibleNodesAndEdgeLinesAtTime(time);
 

x-pack/plugins/synthetics/public/apps/synthetics/state/root_reducer.ts

@@ -7,16 +7,30 @@
 
 import { combineReducers } from '@reduxjs/toolkit';
 
-import { syntheticsMonitorReducer } from './monitor_summary/synthetics_montior_reducer';
-import { monitorStatusReducer } from './monitor_summary';
-import { uiReducer } from './ui';
-import { indexStatusReducer } from './index_status';
-import { syntheticsEnablementReducer } from './synthetics_enablement';
-import { monitorListReducer } from './monitor_list';
-import { serviceLocationsReducer } from './service_locations';
-import { monitorOverviewReducer } from './overview';
+import {
+  syntheticsMonitorReducer,
+  SyntheticsMonitorState,
+} from './monitor_summary/synthetics_montior_reducer';
+import { monitorStatusReducer, MonitorSummaryState } from './monitor_summary';
+import { uiReducer, UiState } from './ui';
+import { indexStatusReducer, IndexStatusState } from './index_status';
+import { syntheticsEnablementReducer, SyntheticsEnablementState } from './synthetics_enablement';
+import { monitorListReducer, MonitorListState } from './monitor_list';
+import { serviceLocationsReducer, ServiceLocationsState } from './service_locations';
+import { monitorOverviewReducer, MonitorOverviewState } from './overview';
 
-export const rootReducer = combineReducers({
+export interface SyntheticsAppState {
+  ui: UiState;
+  indexStatus: IndexStatusState;
+  syntheticsEnablement: SyntheticsEnablementState;
+  monitorList: MonitorListState;
+  serviceLocations: ServiceLocationsState;
+  monitorStatus: MonitorSummaryState;
+  syntheticsMonitor: SyntheticsMonitorState;
+  overview: MonitorOverviewState;
+}
+
+export const rootReducer = combineReducers<SyntheticsAppState>({
   ui: uiReducer,
   indexStatus: indexStatusReducer,
   syntheticsEnablement: syntheticsEnablementReducer,
@@ -26,5 +40,3 @@ export const rootReducer = combineReducers({
   syntheticsMonitor: syntheticsMonitorReducer,
   overview: monitorOverviewReducer,
 });
-
-export type SyntheticsAppState = ReturnType<typeof rootReducer>;

x-pack/plugins/synthetics/public/legacy_uptime/state/index.ts

@@ -11,9 +11,9 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import createSagaMiddleware from 'redux-saga';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { rootEffect } from './effects';
-import { rootReducer } from './reducers';
+import { rootReducer, RootState } from './reducers';
 
-export type AppState = ReturnType<typeof rootReducer>;
+export type AppState = RootState;
 
 const sagaMW = createSagaMiddleware();