Revert switch to react-router-dom by installing history as dependency

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

package.json

@@ -227,6 +227,7 @@
     "got": "^11.8.3",
     "grapheme-splitter": "^1.0.4",
     "handlebars": "^4.7.7",
+    "history": "^4.10.1",
     "http-proxy": "^1.18.1",
     "immer": "^9.0.12",
     "joi": "^17.6.0",

src/renderer/bootstrap.tsx

@@ -34,7 +34,7 @@ import userStoreInjectable from "../common/user-store/user-store.injectable";
 import initRootFrameInjectable from "./frames/root-frame/init-root-frame/init-root-frame.injectable";
 import initClusterFrameInjectable from "./frames/cluster-frame/init-cluster-frame/init-cluster-frame.injectable";
 import commandOverlayInjectable from "./components/command-palette/command-overlay.injectable";
-import { Router } from "react-router-dom";
+import { Router } from "react-router";
 import historyInjectable from "./navigation/history.injectable";
 import themeStoreInjectable from "./themes/store.injectable";
 import navigateToAddClusterInjectable  from "../common/front-end-routing/routes/add-cluster/navigate-to-add-cluster.injectable";
@@ -178,9 +178,11 @@ export async function bootstrap(di: DiContainer) {
     });
   }
 
+  const history = di.inject(historyInjectable);
+
   render(
     <DiContextProvider value={{ di }}>
-      <Router history={di.inject(historyInjectable)}>
+      <Router history={history}>
         {DefaultProps(App)}
       </Router>
     </DiContextProvider>,

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -6,7 +6,7 @@
 import "./cluster-manager.scss";
 
 import React from "react";
-import { Redirect } from "react-router-dom";
+import { Redirect } from "react-router";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { StatusBar } from "../status-bar/status-bar";
 import { HotbarMenu } from "../hotbar/hotbar-menu";

src/renderer/components/layout/tab-layout.tsx

@@ -7,7 +7,7 @@ import "./tab-layout.scss";
 
 import type { ReactNode } from "react";
 import React from "react";
-import { matchPath, Redirect, Route, Switch } from "react-router-dom";
+import { matchPath, Redirect, Route, Switch } from "react-router";
 import { observer } from "mobx-react";
 import type { IClassName } from "../../utils";
 import { cssNames } from "../../utils";

src/renderer/components/test-utils/get-application-builder.tsx

@@ -10,7 +10,7 @@ import type { IObservableArray } from "mobx";
 import { computed, observable, runInAction } from "mobx";
 import { renderFor } from "./renderFor";
 import React from "react";
-import { Router } from "react-router-dom";
+import { Router } from "react-router";
 import { Observer } from "mobx-react";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
 import allowedResourcesInjectable from "../../../common/cluster-store/allowed-resources.injectable";
@@ -323,7 +323,7 @@ export const getApplicationBuilder = () => {
       await startFrame();
 
       const render = renderFor(rendererDi);
-      const history = rendererDi.inject(historyInjectable) as any;
+      const history = rendererDi.inject(historyInjectable);
       const currentRouteComponent = rendererDi.inject(currentRouteComponentInjectable);
 
       for (const callback of beforeRenderCallbacks) {

src/renderer/frames/cluster-frame/cluster-frame.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect } from "react";
 import type { IComputedValue } from "mobx";
 import { observer } from "mobx-react";
-import { Redirect } from "react-router-dom";
+import { Redirect } from "react-router";
 import { ConfirmDialog } from "../../components/confirm-dialog";
 import { DeploymentScaleDialog } from "../../components/+workloads-deployments/scale/dialog";
 import { CronJobTriggerDialog } from "../../components/+workloads-cronjobs/cronjob-trigger-dialog";

src/renderer/navigation/history.injectable.ts

@@ -4,10 +4,11 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { createBrowserHistory } from "history";
+import type { History } from "history";
 
 const historyInjectable = getInjectable({
   id: "history",
-  instantiate: () => createBrowserHistory(),
+  instantiate: (): History => createBrowserHistory(),
 });
 
 export default historyInjectable;