Bump react-router

package.json

@@ -80,6 +80,7 @@
   "resolutions": {
     "**/@types/node": "10.12.27",
     "**/@types/react": "^16.9.13",
+    "**/@types/react-router": "^5.1.3",
     "**/@types/hapi": "^17.0.18",
     "**/@types/angular": "^1.6.56",
     "**/typescript": "3.7.2",
@@ -230,7 +231,7 @@
     "react-monaco-editor": "~0.27.0",
     "react-redux": "^5.1.2",
     "react-resize-detector": "^4.2.0",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.1.2",
     "react-sizeme": "^2.3.6",
     "react-use": "^13.10.2",
     "reactcss": "1.2.3",
@@ -344,7 +345,8 @@
     "@types/react-dom": "^16.9.4",
     "@types/react-redux": "^6.0.6",
     "@types/react-resize-detector": "^4.0.1",
-    "@types/react-router-dom": "^4.3.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",

packages/kbn-analytics/package.json

@@ -14,7 +14,7 @@
     "kbn:watch": "node scripts/build --source-maps --watch"
   },
   "devDependencies": {
-    "@babel/cli": "7.5.5",
+    "@babel/cli": "^7.5.5",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/babel-preset": "1.0.0",
     "typescript": "3.7.2"

x-pack/legacy/plugins/beats_management/public/components/layouts/no_data.tsx

@@ -6,29 +6,25 @@
 
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPageContent } from '@elastic/eui';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-interface LayoutProps {
+interface LayoutProps extends RouteComponentProps {
+  children: React.ReactNode;
   title: string | React.ReactNode;
   actionSection?: React.ReactNode;
-  modalClosePath?: string;
 }
 
-export const NoDataLayout: React.FC<LayoutProps> = withRouter<any>(
-  ({ actionSection, title, modalClosePath, children, history }) => {
-    return (
-      <EuiFlexGroup justifyContent="spaceAround">
-        <EuiFlexItem grow={false}>
-          <EuiPageContent>
-            <EuiEmptyPrompt
-              iconType="logoBeats"
-              title={<h2>{title}</h2>}
-              body={children}
-              actions={actionSection}
-            />
-          </EuiPageContent>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-) as any;
+export const NoDataLayout = withRouter(({ actionSection, title, children }: LayoutProps) => (
+  <EuiFlexGroup justifyContent="spaceAround">
+    <EuiFlexItem grow={false}>
+      <EuiPageContent>
+        <EuiEmptyPrompt
+          iconType="logoBeats"
+          title={<h2>{title}</h2>}
+          body={children}
+          actions={actionSection}
+        />
+      </EuiPageContent>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+));

x-pack/legacy/plugins/beats_management/public/components/navigation/connected_link.tsx

@@ -6,22 +6,24 @@
 import React from 'react';
 
 import { EuiLink } from '@elastic/eui';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 
-export function ConnectedLinkComponent({
+interface ConnectedLinkComponent extends RouteComponentProps {
+  location: any;
+  path: string;
+  disabled: boolean;
+  query: any;
+  [key: string]: any;
+}
+
+export const ConnectedLinkComponent = ({
   location,
   path,
   query,
   disabled,
   children,
   ...props
-}: {
-  location: any;
-  path: string;
-  disabled: boolean;
-  query: any;
-  [key: string]: any;
-}) {
+}: ConnectedLinkComponent) => {
   if (disabled) {
     return <EuiLink aria-disabled="true" {...props} />;
   }
@@ -36,6 +38,6 @@ export function ConnectedLinkComponent({
       className={`euiLink euiLink--primary ${props.className || ''}`}
     />
   );
-}
+};
 
-export const ConnectedLink = withRouter<any>(ConnectedLinkComponent);
+export const ConnectedLink = withRouter(ConnectedLinkComponent);

x-pack/legacy/plugins/beats_management/public/containers/with_url_state.tsx

@@ -6,7 +6,7 @@
 
 import { parse, stringify } from 'querystring';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { FlatObject } from '../frontend_types';
 import { RendererFunction } from '../utils/typed_react';
 
@@ -22,9 +22,7 @@ export interface URLStateProps<URLState = object> {
   ) => void;
   urlState: URLState;
 }
-interface ComponentProps<URLState extends object> {
-  history: any;
-  match: any;
+interface ComponentProps<URLState extends object> extends RouteComponentProps {
   children: RendererFunction<URLStateProps<URLState>>;
 }
 
@@ -66,8 +64,8 @@ export class WithURLStateComponent<URLState extends object> extends React.Compon
     }
 
     const search: string = stringify({
-      ...(pastState as any),
-      ...(newState as any),
+      ...pastState,
+      ...newState,
     });
 
     const newLocation = {
@@ -86,16 +84,12 @@ export class WithURLStateComponent<URLState extends object> extends React.Compon
     });
   };
 }
-export const WithURLState = withRouter<any>(WithURLStateComponent);
+export const WithURLState = withRouter(WithURLStateComponent);
 
-export function withUrlState<OP>(
-  UnwrappedComponent: React.ComponentType<OP & URLStateProps>
-): React.FC<any> {
-  return (origProps: OP) => {
-    return (
-      <WithURLState>
-        {(URLProps: URLStateProps) => <UnwrappedComponent {...URLProps} {...origProps} />}
-      </WithURLState>
-    );
-  };
+export function withUrlState<OP>(UnwrappedComponent: React.ComponentType<OP & URLStateProps>) {
+  return (origProps: OP) => (
+    <WithURLState>
+      {(URLProps: URLStateProps) => <UnwrappedComponent {...URLProps} {...origProps} />}
+    </WithURLState>
+  );
 }

x-pack/legacy/plugins/cross_cluster_replication/public/app/app.js

@@ -6,7 +6,7 @@
 
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 import { fatalError } from 'ui/notify';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -34,15 +34,13 @@ import {
   FollowerIndexEdit,
 } from './sections';
 
-export class App extends Component {
-  static contextTypes = {
-    router: PropTypes.shape({
-      history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-        createHref: PropTypes.func.isRequired
-      }).isRequired
-    }).isRequired
-  }
+class AppComponent extends Component {
+  static propTypes = {
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+      createHref: PropTypes.func.isRequired,
+    }).isRequired,
+  };
 
   constructor(...args) {
     super(...args);
@@ -99,8 +97,13 @@ export class App extends Component {
   }
 
   registerRouter() {
-    const { router } = this.context;
-    routing.reactRouter = router;
+    const { history, location } = this.props;
+    routing.reactRouter = {
+      history,
+      route: {
+        location,
+      },
+    };
   }
 
   render() {
@@ -196,3 +199,5 @@ export class App extends Component {
     );
   }
 }
+
+export const App = withRouter(AppComponent);

x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_logs.test.tsx

@@ -19,7 +19,6 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs/stream?logFilter=(expression:'',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
       />
     `);
@@ -34,7 +33,6 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs/stream?logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
       />
     `);
@@ -47,7 +45,6 @@ describe('RedirectToLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs/stream?logFilter=(expression:'',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
       />
     `);

x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx

@@ -35,7 +35,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=default"
       />
     `);
@@ -48,7 +47,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)&sourceId=default"
       />
     `);
@@ -61,7 +59,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)&sourceId=default"
       />
     `);
@@ -76,7 +73,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
       />
     `);
@@ -93,7 +89,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
       />
     `);
@@ -108,7 +103,6 @@ describe('RedirectToNodeLogs component', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <Redirect
-        push={false}
         to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
       />
     `);

x-pack/legacy/plugins/remote_clusters/public/app/app.js

@@ -6,21 +6,19 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
 
 import { CRUD_APP_BASE_PATH, UIM_APP_LOAD } from './constants';
 import { registerRouter, setUserHasLeftApp, trackUiMetric, METRIC_TYPE } from './services';
 import { RemoteClusterList, RemoteClusterAdd, RemoteClusterEdit } from './sections';
 
-export class App extends Component {
-  static contextTypes = {
-    router: PropTypes.shape({
-      history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-        createHref: PropTypes.func.isRequired
-      }).isRequired
-    }).isRequired
-  }
+class AppComponent extends Component {
+  static propTypes = {
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+      createHref: PropTypes.func.isRequired,
+    }).isRequired,
+  };
 
   constructor(...args) {
     super(...args);
@@ -29,8 +27,11 @@ export class App extends Component {
 
   registerRouter() {
     // Share the router with the app without requiring React or context.
-    const { router } = this.context;
-    registerRouter(router);
+    const { history, location } = this.props;
+    registerRouter({
+      history,
+      route: { location },
+    });
   }
 
   componentDidMount() {
@@ -56,3 +57,5 @@ export class App extends Component {
     );
   }
 }
+
+export const App = withRouter(AppComponent);