Allow injection of history

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

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

src/renderer/components/drawer/drawer.tsx

@@ -11,12 +11,13 @@ import { createPortal } from "react-dom";
 import { cssNames, noop, StorageHelper } from "../../utils";
 import { Icon } from "../icon";
 import { Animate, AnimateName } from "../animate";
-import { history } from "../../navigation";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
 import drawerStorageInjectable, {
   defaultDrawerWidth,
 } from "./drawer-storage/drawer-storage.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
+import historyInjectable from "../../navigation/history.injectable";
+import type { History } from "history";
 
 export type DrawerPosition = "top" | "left" | "right" | "bottom";
 
@@ -59,6 +60,7 @@ resizingAnchorProps.set("top", [ResizeDirection.VERTICAL, ResizeSide.TRAILING, R
 resizingAnchorProps.set("bottom", [ResizeDirection.VERTICAL, ResizeSide.LEADING, ResizeGrowthDirection.BOTTOM_TO_TOP]);
 
 interface Dependencies {
+  history: History
   drawerStorage: StorageHelper<{ width: number }>;
 }
 
@@ -70,7 +72,7 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
   private scrollElem: HTMLElement;
   private scrollPos = new Map<string, number>();
 
-  private stopListenLocation = history.listen(() => {
+  private stopListenLocation = this.props.history.listen(() => {
     this.restoreScrollPos();
   });
 
@@ -111,14 +113,14 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
 
   saveScrollPos = () => {
     if (!this.scrollElem) return;
-    const key = history.location.key;
+    const key = this.props.history.location.key;
 
     this.scrollPos.set(key, this.scrollElem.scrollTop);
   };
 
   restoreScrollPos = () => {
     if (!this.scrollElem) return;
-    const key = history.location.key;
+    const key = this.props.history.location.key;
 
     this.scrollElem.scrollTop = this.scrollPos.get(key) || 0;
   };
@@ -232,6 +234,7 @@ export const Drawer = withInjectables<Dependencies, DrawerProps>(
 
   {
     getProps: (di, props) => ({
+      history: di.inject(historyInjectable),
       drawerStorage: di.inject(drawerStorageInjectable),
       ...props,
     }),

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

@@ -6,7 +6,6 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
-import { history } from "../../navigation";
 import { UserManagement } from "../../components/+user-management/user-management";
 import { ConfirmDialog } from "../../components/confirm-dialog";
 import { ClusterOverview } from "../../components/+cluster/cluster-overview";
@@ -41,17 +40,18 @@ import { PortForwardDialog } from "../../port-forward";
 import { DeleteClusterDialog } from "../../components/delete-cluster-dialog";
 import type { NamespaceStore } from "../../components/+namespaces/namespace-store/namespace.store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import namespaceStoreInjectable
-  from "../../components/+namespaces/namespace-store/namespace-store.injectable";
+import namespaceStoreInjectable  from "../../components/+namespaces/namespace-store/namespace-store.injectable";
 import type { ClusterId } from "../../../common/cluster-types";
-import hostedClusterInjectable
-  from "../../../common/cluster-store/hosted-cluster/hosted-cluster.injectable";
+import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster/hosted-cluster.injectable";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import type { Disposer } from "../../../common/utils";
 import kubeWatchApiInjectable from "../../kube-watch-api/kube-watch-api.injectable";
+import historyInjectable from "../../navigation/history.injectable";
+import type { History } from "history";
 
 interface Dependencies {
+  history: History,
   namespaceStore: NamespaceStore
   hostedClusterId: ClusterId
   subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer
@@ -135,10 +135,11 @@ class NonInjectedClusterFrame extends React.Component<Dependencies> {
 
   render() {
     return (
-      <Router history={history}>
+      <Router history={this.props.history}>
         <ErrorBoundary>
           <MainLayout sidebar={<Sidebar />} footer={<Dock />}>
             <Switch>
+
               <Route component={ClusterOverview} {...routes.clusterRoute}/>
               <Route component={Nodes} {...routes.nodesRoute}/>
               <Route component={Workloads} {...routes.workloadsRoute}/>
@@ -181,6 +182,7 @@ class NonInjectedClusterFrame extends React.Component<Dependencies> {
 
 export const ClusterFrame = withInjectables<Dependencies>(NonInjectedClusterFrame, {
   getProps: di => ({
+    history: di.inject(historyInjectable),
     namespaceStore: di.inject(namespaceStoreInjectable),
     hostedClusterId: di.inject(hostedClusterInjectable).id,
     subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,

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

@@ -7,7 +7,6 @@ import { injectSystemCAs } from "../../../common/system-ca";
 import React from "react";
 import { Route, Router, Switch } from "react-router";
 import { observer } from "mobx-react";
-import { history } from "../../navigation";
 import { ClusterManager } from "../../components/cluster-manager";
 import { ErrorBoundary } from "../../components/error-boundary";
 import { Notifications } from "../../components/notifications";
@@ -16,14 +15,21 @@ import { CommandContainer } from "../../components/command-palette/command-conta
 import { ipcRenderer } from "electron";
 import { IpcRendererNavigationEvents } from "../../navigation/events";
 import { ClusterFrameHandler } from "../../components/cluster-manager/lens-views";
+import historyInjectable from "../../navigation/history.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { History } from "history";
 
 injectSystemCAs();
 
+interface Dependencies {
+  history: History
+}
+
 @observer
-export class RootFrame extends React.Component {
+class NonInjectedRootFrame extends React.Component<Dependencies> {
   static displayName = "RootFrame";
 
-  constructor(props: {}) {
+  constructor(props: Dependencies) {
     super(props);
 
     ClusterFrameHandler.createInstance();
@@ -35,7 +41,7 @@ export class RootFrame extends React.Component {
 
   render() {
     return (
-      <Router history={history}>
+      <Router history={this.props.history}>
         <ErrorBoundary>
           <Switch>
             <Route component={ClusterManager} />
@@ -48,3 +54,7 @@ export class RootFrame extends React.Component {
     );
   }
 }
+
+export const RootFrame = withInjectables(NonInjectedRootFrame, {
+  getProps: (di) => ({ history: di.inject(historyInjectable) }),
+});

src/renderer/navigation/history.injectable.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { history } from "./history";
+
+const historyInjectable = getInjectable({
+  instantiate: () => history,
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default historyInjectable;

src/renderer/navigation/history.ts

@@ -14,8 +14,14 @@ export const searchParamsOptions: ObservableSearchParamsOptions = {
   joinArraysWith: ",", // param values splitter, applicable only with {joinArrays:true}
 };
 
+/**
+ * @deprecated: Switch to using di.inject(historyInjectable)
+ */
 export const history = ipcRenderer ? createBrowserHistory() : createMemoryHistory();
 
+/**
+ * @deprecated: Switch to using di.inject(observableHistoryInjectable)
+ */
 export const navigation = createObservableHistory(history, {
   searchParams: searchParamsOptions,
 });

src/renderer/navigation/observable-history.injectable.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+
+import { navigation as observableHistory } from "./history";
+
+const observableHistoryInjectable = getInjectable({
+  instantiate: () => observableHistory,
+
+  lifecycle: lifecycleEnum.singleton,
+});
+
+export default observableHistoryInjectable;