diff --git a/src/renderer/components/drawer/drawer.tsx b/src/renderer/components/drawer/drawer.tsx index ce06c26945..deaf6bad2b 100644 --- a/src/renderer/components/drawer/drawer.tsx +++ b/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(); - private stopListenLocation = history.listen(() => { + private stopListenLocation = this.props.history.listen(() => { this.restoreScrollPos(); }); @@ -111,14 +113,14 @@ class NonInjectedDrawer extends React.Component { 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( { getProps: (di, props) => ({ + history: di.inject(historyInjectable), drawerStorage: di.inject(drawerStorageInjectable), ...props, }), diff --git a/src/renderer/frames/cluster-frame/cluster-frame.tsx b/src/renderer/frames/cluster-frame/cluster-frame.tsx index 8cc1277e6c..cad742f485 100755 --- a/src/renderer/frames/cluster-frame/cluster-frame.tsx +++ b/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[]) => Disposer @@ -135,10 +135,11 @@ class NonInjectedClusterFrame extends React.Component { render() { return ( - + } footer={}> + @@ -181,6 +182,7 @@ class NonInjectedClusterFrame extends React.Component { export const ClusterFrame = withInjectables(NonInjectedClusterFrame, { getProps: di => ({ + history: di.inject(historyInjectable), namespaceStore: di.inject(namespaceStoreInjectable), hostedClusterId: di.inject(hostedClusterInjectable).id, subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores, diff --git a/src/renderer/frames/root-frame/root-frame.tsx b/src/renderer/frames/root-frame/root-frame.tsx index bc148f3a70..2216865b67 100644 --- a/src/renderer/frames/root-frame/root-frame.tsx +++ b/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 { static displayName = "RootFrame"; - constructor(props: {}) { + constructor(props: Dependencies) { super(props); ClusterFrameHandler.createInstance(); @@ -35,7 +41,7 @@ export class RootFrame extends React.Component { render() { return ( - + @@ -48,3 +54,7 @@ export class RootFrame extends React.Component { ); } } + +export const RootFrame = withInjectables(NonInjectedRootFrame, { + getProps: (di) => ({ history: di.inject(historyInjectable) }), +}); diff --git a/src/renderer/navigation/history.injectable.ts b/src/renderer/navigation/history.injectable.ts new file mode 100644 index 0000000000..0f5acaa2d8 --- /dev/null +++ b/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; diff --git a/src/renderer/navigation/history.ts b/src/renderer/navigation/history.ts index 87c5625209..fa7df172b4 100644 --- a/src/renderer/navigation/history.ts +++ b/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, }); diff --git a/src/renderer/navigation/observable-history.injectable.ts b/src/renderer/navigation/observable-history.injectable.ts new file mode 100644 index 0000000000..db50db04f2 --- /dev/null +++ b/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;