Bump history to v5.0.1

package.json

@@ -75,11 +75,14 @@
   },
   "resolutions": {
     "**/@babel/runtime": "^7.17.9",
+    "**/@types/history": "5.0.0",
     "**/@types/node": "16.11.7",
+    "**/@types/react-router": "5.1.18",
     "**/chokidar": "^3.4.3",
     "**/deepmerge": "^4.2.2",
     "**/fast-deep-equal": "^3.1.1",
     "**/handlebars/uglify-js": "^3.14.3",
+    "**/history": "^5.3.0",
     "**/hoist-non-react-statics": "^3.3.2",
     "**/html-minifier/uglify-js": "^3.14.3",
     "**/isomorphic-fetch/node-fetch": "^2.6.7",
@@ -279,7 +282,7 @@
     "globby": "^11.0.3",
     "handlebars": "4.7.7",
     "he": "^1.2.0",
-    "history": "^4.9.0",
+    "history": "^5.3.0",
     "hjson": "3.2.1",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^5.0.0",
@@ -378,9 +381,9 @@
     "react-resizable": "^1.7.5",
     "react-resize-detector": "^4.2.0",
     "react-reverse-portal": "^1.0.4",
-    "react-router": "^5.2.0",
+    "react-router": "^6.3.0",
     "react-router-config": "^5.1.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-router-redux": "^4.0.8",
     "react-shortcuts": "^2.0.0",
     "react-sizeme": "^2.3.6",
@@ -595,7 +598,6 @@
     "@types/hapi__inert": "^5.2.3",
     "@types/has-ansi": "^3.0.0",
     "@types/he": "^1.1.1",
-    "@types/history": "^4.7.9",
     "@types/hjson": "^2.4.2",
     "@types/http-proxy": "^1.17.4",
     "@types/http-proxy-agent": "^2.0.2",
@@ -745,9 +747,7 @@
     "@types/react-intl": "^2.3.15",
     "@types/react-redux": "^7.1.9",
     "@types/react-resize-detector": "^4.0.1",
-    "@types/react-router": "^5.1.7",
-    "@types/react-router-config": "^5.0.2",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-config": "^5.0.6",
     "@types/react-test-renderer": "^16.9.1",
     "@types/react-virtualized": "^9.18.7",
     "@types/react-vis": "^1.11.9",

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

@@ -87,17 +87,18 @@ TYPES_DEPS = [
   "@npm//exit-hook",
   "@npm//form-data",
   "@npm//getopts",
+  "@npm//history",
   "@npm//jest",
   "@npm//jest-cli",
   "@npm//jest-snapshot",
+  "@npm//react-router-dom",
   "@npm//redux",
   "@npm//rxjs",
   "@npm//xmlbuilder",
   "@npm//@types/chance",
   "@npm//@types/dedent",
   "@npm//@types/enzyme",
   "@npm//@types/he",
-  "@npm//@types/history",
   "@npm//@types/jest",
   "@npm//@types/jest-axe",
   "@npm//@types/joi",
@@ -109,7 +110,6 @@ TYPES_DEPS = [
   "@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-jest-helpers/src/router_helpers.tsx

@@ -7,31 +7,23 @@
  */
 
 import React, { Component, ComponentType } from 'react';
-import { MemoryRouter, Route, withRouter } from 'react-router-dom';
-import { History, LocationDescriptor } from 'history';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { History, Location, To, InitialEntry } from 'history';
 
-const stringifyPath = (path: LocationDescriptor): string => {
+const stringifyPath = (path: To): string => {
   if (typeof path === 'string') {
     return path;
   }
 
   return path.pathname || '/';
 };
 
-const locationDescriptorToRoutePath = (
-  paths: LocationDescriptor | LocationDescriptor[]
-): string | string[] => {
-  if (Array.isArray(paths)) {
-    return paths.map((path: LocationDescriptor) => {
-      return stringifyPath(path);
-    });
-  }
-
+const locationDescriptorToRoutePath = (paths: To): string => {
   return stringifyPath(paths);
 };
 
 export const WithMemoryRouter =
-  (initialEntries: LocationDescriptor[] = ['/'], initialIndex: number = 0) =>
+  (initialEntries: InitialEntry[] = ['/'], initialIndex: number = 0) =>
   (WrappedComponent: ComponentType) =>
   (props: any) =>
     (
@@ -41,13 +33,12 @@ export const WithMemoryRouter =
     );
 
 export const WithRoute =
-  (
-    componentRoutePath: LocationDescriptor | LocationDescriptor[] = ['/'],
-    onRouter = (router: any) => {}
-  ) =>
+  (componentRoutePath: InitialEntry = '/', onRouter = (router: any) => {}) =>
   (WrappedComponent: ComponentType) => {
     // Create a class component that will catch the router
     // and forward it to our "onRouter()" handler.
+    // TODO: withRouter is no longer a thing, need to use FC/hooks instead AND stop accessing history or router
+    //       as those are no longer exported by react-router-dom
     const CatchRouter = withRouter(
       class extends Component<any> {
         componentDidMount() {
@@ -63,36 +54,37 @@ export const WithRoute =
     );
 
     return (props: any) => (
-      <Route
-        path={locationDescriptorToRoutePath(componentRoutePath)}
-        render={(routerProps) => <CatchRouter {...routerProps} {...props} />}
-      />
+      <Route path={locationDescriptorToRoutePath(componentRoutePath)}>
+        <CatchRouter {...props} />
+      </Route>
     );
   };
 
 interface Router {
   history: Partial<History>;
   route: {
-    location: LocationDescriptor;
+    location: Location;
   };
 }
 
 export const reactRouterMock: Router = {
   history: {
     push: () => {},
-    createHref: (location) => location.pathname!,
+    createHref: (location) => (typeof location === 'string' ? location : location.pathname!),
     location: {
+      key: 'default',
       pathname: '',
       search: '',
-      state: '',
+      state: {},
       hash: '',
     },
   },
   route: {
     location: {
+      key: 'default',
       pathname: '',
       search: '',
-      state: '',
+      state: {},
       hash: '',
     },
   },

packages/kbn-test-jest-helpers/src/testbed/types.ts

@@ -8,7 +8,7 @@
 
 import { Store } from 'redux';
 import { ReactWrapper as GenericReactWrapper } from 'enzyme';
-import { LocationDescriptor } from 'history';
+import { InitialEntry } from 'history';
 
 export type AsyncSetupFunc<T> = (props?: any) => Promise<TestBed<T>>;
 export type SyncSetupFunc<T> = (props?: any) => TestBed<T>;
@@ -156,11 +156,11 @@ export interface MemoryRouterConfig {
   /** Flag to add or not the `MemoryRouter`. If set to `false`, there won't be any router and the component won't be wrapped on a `<Route />`. */
   wrapComponent?: boolean;
   /** The React Router **initial entries** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */
-  initialEntries?: LocationDescriptor[];
+  initialEntries?: InitialEntry[];
   /** The React Router **initial index** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */
   initialIndex?: number;
   /** The route **path** for the mounted component (defaults to `"/"`) */
-  componentRoutePath?: LocationDescriptor | LocationDescriptor[];
+  componentRoutePath?: InitialEntry;
   /** A callBack that will be called with the React Router instance once mounted  */
   onRouter?: (router: any) => void;
 }

packages/kbn-test/BUILD.bazel

@@ -100,6 +100,8 @@ TYPES_DEPS = [
   "@npm//jest",
   "@npm//jest-cli",
   "@npm//jest-snapshot",
+  "@npm//history",
+  "@npm//react-router-dom",
   "@npm//redux",
   "@npm//rxjs",
   "@npm//xmlbuilder",
@@ -108,7 +110,6 @@ TYPES_DEPS = [
   "@npm//@types/dedent",
   "@npm//@types/enzyme",
   "@npm//@types/he",
-  "@npm//@types/history",
   "@npm//@types/jest",
   "@npm//@types/js-yaml",
   "@npm//@types/joi",
@@ -119,7 +120,6 @@ TYPES_DEPS = [
   "@npm//@types/prettier",
   "@npm//@types/react-dom",
   "@npm//@types/react-redux",
-  "@npm//@types/react-router-dom",
   "@npm//@types/semver",
   "@npm//@types/uuid",
   "@npm//@types/xml2js",

packages/kbn-typed-react-router-config/BUILD.bazel

@@ -45,13 +45,13 @@ TYPES_DEPS = [
   "@npm//fp-ts",
   "@npm//query-string",
   "@npm//utility-types",
-  "@npm//@types/history",
+  "@npm//history",
+  "@npm//react-router-dom",
   "@npm//@types/jest",
   "@npm//@types/lodash",
   "@npm//@types/node",
   "@npm//@types/react",
   "@npm//@types/react-router-config",
-  "@npm//@types/react-router-dom",
 ]
 
 jsts_transpiler(

packages/kbn-typed-react-router-config/src/router_provider.tsx

@@ -7,7 +7,7 @@
  */
 import { History } from 'history';
 import React from 'react';
-import { Router as ReactRouter } from 'react-router-dom';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
 import { RouteMap, Router } from './types';
 import { RouterContextProvider } from './use_router';
 
@@ -21,8 +21,8 @@ export function RouterProvider({
   children: React.ReactNode;
 }) {
   return (
-    <ReactRouter history={history}>
+    <HistoryRouter history={history}>
       <RouterContextProvider router={router}>{children}</RouterContextProvider>
-    </ReactRouter>
+    </HistoryRouter>
   );
 }

packages/kbn-typed-react-router-config/src/use_params.ts

@@ -25,7 +25,7 @@ export function useParams(...args: any[]) {
 
   const paths = args as string[];
 
-  const getParamsArgs = [...paths, location, optional] as [never, Location<any>, boolean];
+  const getParamsArgs = [...paths, location, optional] as [never, Location, boolean];
 
   return router.getParams(...getParamsArgs);
 }