Bump redux dependencies

package.json

@@ -79,12 +79,14 @@
   },
   "resolutions": {
     "**/@types/node": "10.12.27",
-    "**/@types/react": "^16.9.13",
+    "**/@types/react": "^16.9.17",
     "**/@types/react-router": "^5.1.3",
     "**/@types/hapi": "^17.0.18",
     "**/@types/angular": "^1.6.56",
+    "**/@types/hoist-non-react-statics": "^3.3.1",
     "**/typescript": "3.7.2",
     "**/graphql-toolkit/lodash": "^4.17.13",
+    "**/hoist-non-react-statics": "^3.3.1",
     "**/isomorphic-git/**/base64-js": "^1.2.1",
     "**/image-diff/gm/debug": "^2.6.9",
     "**/react-dom": "^16.12.0",
@@ -230,19 +232,19 @@
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.4.1",
     "react-monaco-editor": "~0.27.0",
-    "react-redux": "^5.1.2",
+    "react-redux": "^7.1.3",
     "react-resize-detector": "^4.2.0",
     "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
     "react-use": "^13.10.2",
     "reactcss": "1.2.3",
-    "redux": "4.0.0",
-    "redux-actions": "2.2.1",
-    "redux-thunk": "2.3.0",
+    "redux": "^4.0.4",
+    "redux-actions": "^2.6.5",
+    "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.3",
     "regression": "2.0.1",
     "request": "^2.88.0",
-    "reselect": "^3.0.1",
+    "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.0",
     "rison-node": "1.0.2",
     "rxjs": "^6.5.3",
@@ -310,7 +312,7 @@
     "@types/dedent": "^0.7.0",
     "@types/delete-empty": "^2.0.0",
     "@types/elasticsearch": "^5.0.33",
-    "@types/enzyme": "^3.9.0",
+    "@types/enzyme": "^3.10.4",
     "@types/eslint": "^6.1.2",
     "@types/fetch-mock": "^7.3.1",
     "@types/getopts": "^2.0.1",
@@ -342,15 +344,14 @@
     "@types/podium": "^1.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/reach__router": "^1.2.6",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
-    "@types/react-redux": "^6.0.6",
+    "@types/react-redux": "^7.1.5",
     "@types/react-resize-detector": "^4.0.1",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-virtualized": "^9.18.7",
-    "@types/redux": "^3.6.31",
-    "@types/redux-actions": "^2.2.1",
+    "@types/redux-actions": "^2.6.1",
     "@types/request": "^2.48.2",
     "@types/selenium-webdriver": "^4.0.5",
     "@types/semver": "^5.5.0",
@@ -382,9 +383,9 @@
     "classnames": "2.2.6",
     "dedent": "^0.7.0",
     "delete-empty": "^2.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-adapter-utils": "^1.12.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-utils": "^1.13.0",
     "enzyme-to-json": "^3.4.3",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",

x-pack/legacy/plugins/beats_management/public/utils/typed_react.ts

@@ -4,58 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { omit } from 'lodash';
 import React from 'react';
-import { InferableComponentEnhancerWithProps } from 'react-redux';
 
 export type RendererResult = React.ReactElement<any> | null;
 export type RendererFunction<RenderArgs, Result = RendererResult> = (args: RenderArgs) => Result;
 
-export type ChildFunctionRendererProps<RenderArgs> = {
-  children: RendererFunction<RenderArgs>;
-  initializeOnMount?: boolean;
-  resetOnUnmount?: boolean;
-} & RenderArgs;
-
-interface ChildFunctionRendererOptions<RenderArgs> {
-  onInitialize?: (props: RenderArgs) => void;
-  onCleanup?: (props: RenderArgs) => void;
-}
-
-export const asChildFunctionRenderer = <InjectedProps, OwnProps>(
-  hoc: InferableComponentEnhancerWithProps<InjectedProps, OwnProps>,
-  { onInitialize, onCleanup }: ChildFunctionRendererOptions<InjectedProps> = {}
-) =>
-  hoc(
-    class ChildFunctionRenderer extends React.Component<ChildFunctionRendererProps<InjectedProps>> {
-      public displayName = 'ChildFunctionRenderer';
-
-      public componentDidMount() {
-        if (this.props.initializeOnMount && onInitialize) {
-          onInitialize(this.getRendererArgs());
-        }
-      }
-
-      public componentWillUnmount() {
-        if (this.props.resetOnUnmount && onCleanup) {
-          onCleanup(this.getRendererArgs());
-        }
-      }
-
-      public render() {
-        return (this.props.children as ChildFunctionRendererProps<InjectedProps>['children'])(
-          this.getRendererArgs()
-        );
-      }
-
-      private getRendererArgs = () =>
-        omit(['children', 'initializeOnMount', 'resetOnUnmount'], this.props) as Pick<
-          ChildFunctionRendererProps<InjectedProps>,
-          keyof InjectedProps
-        >;
-    }
-  );
-
 export type StateUpdater<State, Props = {}> = (
   prevState: Readonly<State>,
   prevProps: Readonly<Props>

x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.test.tsx

@@ -12,6 +12,7 @@ import {
   WorkpadLoadedWithErrorsMetric,
 } from './workpad_telemetry';
 import { METRIC_TYPE } from '../../../lib/ui_metric';
+import { ResolvedArgType } from '../../../../types';
 
 jest.mock('ui/new_platform');
 const trackMetric = jest.fn();
@@ -30,15 +31,15 @@ const mockWorkpad = {
 };
 
 const resolvedArgsMatchWorkpad = {
-  '1': {},
-  '2': {},
-  '3': {},
-  '4': {},
-  '5': {},
+  '1': {} as ResolvedArgType,
+  '2': {} as ResolvedArgType,
+  '3': {} as ResolvedArgType,
+  '4': {} as ResolvedArgType,
+  '5': {} as ResolvedArgType,
 };
 
 const resolvedArgsNotMatchWorkpad = {
-  'non-matching-id': {},
+  'non-matching-id': {} as ResolvedArgType,
 };
 
 const pendingCounts = {

x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, ConnectedProps } from 'react-redux';
 // @ts-ignore: Local Untyped
 import { trackCanvasUiMetric, METRIC_TYPE } from '../../../lib/ui_metric';
 // @ts-ignore: Local Untyped
@@ -23,18 +23,6 @@ const mapStateToProps = (state: any) => ({
   telemetryResolvedArgs: getArgs(state),
 });
 
-/**
-  Counts of the loading states of workpad elements
-*/
-interface ElementCounts {
-  /** Count of elements in error state */
-  error: number;
-  /** Count of elements in pending state */
-  pending: number;
-  /** Count of elements in ready state */
-  ready: number;
-}
-
 // TODO: Build out full workpad types
 /**
   Individual Page of a Workpad
@@ -61,10 +49,8 @@ interface ResolvedArgs {
   [keys: string]: any;
 }
 
-interface ElementsLoadedTelemetryProps {
-  telemetryElementCounts: ElementCounts;
+interface ElementsLoadedTelemetryProps extends PropsFromRedux {
   workpad: Workpad;
-  telemetryResolvedArgs: {};
 }
 
 function areAllElementsInResolvedArgs(workpad: Workpad, resolvedArgs: ResolvedArgs): boolean {
@@ -77,13 +63,11 @@ function areAllElementsInResolvedArgs(workpad: Workpad, resolvedArgs: ResolvedAr
   return workpadElements.every(element => resolvedArgsElements.includes(element));
 }
 
-export const withUnconnectedElementsLoadedTelemetry = function<P extends object>(
+export const withUnconnectedElementsLoadedTelemetry = <P extends {}>(
   Component: React.ComponentType<P>,
   trackMetric = trackCanvasUiMetric
-): React.FC<P & ElementsLoadedTelemetryProps> {
-  return function ElementsLoadedTelemetry(
-    props: P & ElementsLoadedTelemetryProps
-  ): React.FunctionComponentElement<P> {
+) =>
+  function ElementsLoadedTelemetry(props: ElementsLoadedTelemetryProps) {
     const { telemetryElementCounts, workpad, telemetryResolvedArgs, ...other } = props;
 
     const [currentWorkpadId, setWorkpadId] = useState<string | undefined>(undefined);
@@ -127,11 +111,12 @@ export const withUnconnectedElementsLoadedTelemetry = function<P extends object>
 
     return <Component {...(other as P)} workpad={workpad} />;
   };
-};
 
-export const withElementsLoadedTelemetry = <P extends object>(
-  Component: React.ComponentType<P>
-) => {
+const connector = connect(mapStateToProps, {});
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const withElementsLoadedTelemetry = <P extends {}>(Component: React.ComponentType<P>) => {
   const telemetry = withUnconnectedElementsLoadedTelemetry(Component);
-  return connect(mapStateToProps)(telemetry);
+  return connector(telemetry);
 };

x-pack/legacy/plugins/canvas/public/components/router/router.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { isClassComponent } from 'recompose';
 import PropTypes from 'prop-types';
 import { routerProvider } from '../../lib/router_provider';
 import { getAppState } from '../../lib/app_state';
@@ -98,9 +97,6 @@ export class Router extends React.PureComponent {
       return React.createElement(CanvasLoading, { msg: this.props.loadingMessage });
     }
 
-    // show the activeComponent
-    return isClassComponent(this.state.activeComponent)
-      ? React.createElement(this.state.activeComponent, {})
-      : this.state.activeComponent({});
+    return <this.state.activeComponent />;
   }
 }

x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/index.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { getElementById, getSelectedPage } from '../../../state/selectors/workpad';
 import { ElementSettings as Component } from './element_settings';
@@ -33,7 +32,3 @@ const renderIfElement: React.FunctionComponent<StateProps> = props => {
 export const ElementSettings = connect<StateProps, {}, Props, State>(mapStateToProps)(
   renderIfElement
 );
-
-ElementSettings.propTypes = {
-  selectedElementId: PropTypes.string.isRequired,
-};

x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx

@@ -58,15 +58,17 @@ describe('field_manager', () => {
     store.dispatch = dispatchSpy;
 
     instance = shallow(
+      // https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
       <Provider store={store}>
-        <FieldManager pickerOpen={true} setPickerOpen={() => {}} />
+        <FieldManager pickerOpen={true} setPickerOpen={() => {}} store={store} />
       </Provider>
     );
 
     getInstance = () =>
       instance
         .find(FieldManager)
         .dive()
+        .dive()
         .dive();
   });
 

x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx

@@ -18,6 +18,7 @@ import {
   selectField,
   deselectField,
   GraphState,
+  GraphStore,
 } from '../../state_management';
 import { WorkspaceField } from '../../types';
 
@@ -35,6 +36,7 @@ export function FieldManagerComponent(props: {
   deselectField: (fieldName: string) => void;
   pickerOpen: boolean;
   setPickerOpen: (open: boolean) => void;
+  store?: GraphStore; // only for testing purpose
 }) {
   return (
     <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center">

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx

@@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Fragment, useMemo } from 'react';
 import moment from 'moment';
+import { Action } from 'typescript-fsa';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
 import { TextScale } from '../../../../common/log_text_scale';
@@ -56,8 +57,8 @@ interface ScrollableLogTextStreamViewProps {
   highlightedItem: string | null;
   currentHighlightKey: UniqueTimeKey | null;
   scrollLock: {
-    enable: () => void;
-    disable: () => void;
+    enable: (payload: void) => Action<void>;
+    disable: (payload: void) => Action<void>;
     isEnabled: boolean;
   };
 }

x-pack/legacy/plugins/infra/public/components/logging/log_time_controls.tsx

@@ -9,13 +9,14 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React from 'react';
+import { Action } from 'typescript-fsa';
 
 const noop = () => undefined;
 
 interface LogTimeControlsProps {
   currentTime: number | null;
   startLiveStreaming: () => any;
-  stopLiveStreaming: () => any;
+  stopLiveStreaming: (payload: void) => Action<void>;
   isLiveStreaming: boolean;
   jumpToTime: (time: number) => any;
 }

x-pack/legacy/plugins/infra/public/components/waffle/waffle_time_controls.tsx

@@ -8,13 +8,14 @@ import { EuiButtonEmpty, EuiDatePicker, EuiFormControlLayout } from '@elastic/eu
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React from 'react';
+import { Action } from 'typescript-fsa';
 
 interface WaffleTimeControlsProps {
   currentTime: number;
   isLiveStreaming?: boolean;
   onChangeTime?: (time: number) => void;
-  startLiveStreaming?: () => void;
-  stopLiveStreaming?: () => void;
+  startLiveStreaming?: (payload: void) => Action<void>;
+  stopLiveStreaming?: (payload: void) => Action<void>;
 }
 
 export class WaffleTimeControls extends React.Component<WaffleTimeControlsProps> {

x-pack/legacy/plugins/infra/public/utils/redux_context.tsx

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import React, { createContext } from 'react';
 import { State, initialState } from '../store';
 
 export const ReduxStateContext = createContext(initialState);
 
-const withRedux = connect((state: State) => state);
-export const ReduxStateContextProvider = withRedux(({ children, ...state }) => {
-  return <ReduxStateContext.Provider value={state as State}>{children}</ReduxStateContext.Provider>;
-});
+export const ReduxStateContextProvider = ({ children }: { children: JSX.Element }) => {
+  const state = useSelector((store: State) => store);
+  return <ReduxStateContext.Provider value={state}>{children}</ReduxStateContext.Provider>;
+};