Cascade different refactorings to eliminate global shared state from app paths

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

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

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

@@ -23,10 +23,14 @@ import styles from "./main-layout.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
+import { cssNames, StorageHelper } from "../../utils";
 import { ErrorBoundary } from "../error-boundary";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
-import { defaultSidebarWidth, sidebarStorage } from "./sidebar-storage";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import sidebarStorageInjectable, {
+  defaultSidebarWidth,
+  SidebarStorageState,
+} from "./sidebar-storage/sidebar-storage.injectable";
 
 interface Props {
   sidebar: React.ReactNode;
@@ -39,15 +43,20 @@ interface Props {
  *
  * @link https://api-docs.k8slens.dev/master/extensions/capabilities/common-capabilities/#global-pages
  */
+
+interface Dependencies {
+  sidebarStorage: StorageHelper<SidebarStorageState>
+}
+
 @observer
-export class MainLayout extends React.Component<Props> {
+class NonInjectedMainLayout extends React.Component<Props & Dependencies> {
   onSidebarResize = (width: number) => {
-    sidebarStorage.merge({ width });
+    this.props.sidebarStorage.merge({ width });
   };
 
   render() {
     const { className, footer, children, sidebar } = this.props;
-    const { width: sidebarWidth } = sidebarStorage.get();
+    const { width: sidebarWidth } = this.props.sidebarStorage.get();
     const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
 
     return (
@@ -75,3 +84,16 @@ export class MainLayout extends React.Component<Props> {
     );
   }
 }
+
+export const MainLayout = withInjectables<Dependencies, Props>(
+  NonInjectedMainLayout,
+
+  {
+    getProps: (di, props) => ({
+      sidebarStorage: di.inject(sidebarStorageInjectable),
+
+      ...props,
+    }),
+  },
+);
+

src/renderer/components/layout/sidebar-item.tsx

@@ -23,12 +23,13 @@ import "./sidebar-item.scss";
 
 import React from "react";
 import { computed, makeObservable } from "mobx";
-import { cssNames, prevDefault } from "../../utils";
+import { cssNames, prevDefault, StorageHelper } from "../../utils";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { Icon } from "../icon";
-import { sidebarStorage } from "./sidebar-storage";
 import { isActiveRoute } from "../../navigation";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import sidebarStorageInjectable, { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable";
 
 interface SidebarItemProps {
   /**
@@ -49,11 +50,15 @@ interface SidebarItemProps {
   isActive?: boolean;
 }
 
+interface Dependencies {
+  sidebarStorage: StorageHelper<SidebarStorageState>
+}
+
 @observer
-export class SidebarItem extends React.Component<SidebarItemProps> {
+class NonInjectedSidebarItem extends React.Component<SidebarItemProps & Dependencies> {
   static displayName = "SidebarItem";
 
-  constructor(props: SidebarItemProps) {
+  constructor(props: SidebarItemProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -63,7 +68,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   }
 
   @computed get expanded(): boolean {
-    return Boolean(sidebarStorage.get().expanded[this.id]);
+    return Boolean(this.props.sidebarStorage.get().expanded[this.id]);
   }
 
   @computed get isActive(): boolean {
@@ -78,7 +83,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   }
 
   toggleExpand = () => {
-    sidebarStorage.merge(draft => {
+    this.props.sidebarStorage.merge(draft => {
       draft.expanded[this.id] = !draft.expanded[this.id];
     });
   };
@@ -103,7 +108,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     if (isHidden) return null;
 
     const { isActive, id, expanded, isExpandable, toggleExpand } = this;
-    const classNames = cssNames(SidebarItem.displayName, className);
+    const classNames = cssNames("SidebarItem", className);
 
     return (
       <div className={classNames} data-test-id={id}>
@@ -124,3 +129,14 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     );
   }
 }
+
+export const SidebarItem = withInjectables<Dependencies, SidebarItemProps>(
+  NonInjectedSidebarItem,
+
+  {
+    getProps: (di, props) => ({
+      sidebarStorage: di.inject(sidebarStorageInjectable),
+      ...props,
+    }),
+  },
+);

src/renderer/components/layout/sidebar-storage/sidebar-storage.injectable.ts

@@ -18,8 +18,8 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-
-import { createStorage } from "../../utils";
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
 
 export interface SidebarStorageState {
   width: number;
@@ -30,7 +30,17 @@ export interface SidebarStorageState {
 
 export const defaultSidebarWidth = 200;
 
-export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
-  width: defaultSidebarWidth,
-  expanded: {},
+const sidebarStorageInjectable = getInjectable({
+  instantiate: (di) => {
+    const createStorage = di.inject(createStorageInjectable);
+
+    return createStorage("sidebar", {
+      width: defaultSidebarWidth,
+      expanded: {},
+    });
+  },
+
+  lifecycle: lifecycleEnum.singleton,
 });
+
+export default sidebarStorageInjectable;

src/renderer/components/layout/sidebar.tsx

@@ -24,7 +24,7 @@ import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { cssNames } from "../../utils";
+import { cssNames, Disposer } from "../../utils";
 import { Icon } from "../icon";
 import { Workloads } from "../+workloads";
 import { UserManagement } from "../+user-management";
@@ -42,19 +42,27 @@ import * as routes from "../../../common/routes";
 import { Config } from "../+config";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { SidebarCluster } from "./sidebar-cluster";
-import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
+import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import kubeWatchApiInjectable
+  from "../../kube-watch-api/kube-watch-api.injectable";
 
 interface Props {
   className?: string;
 }
 
+interface Dependencies {
+  subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer
+}
+
 @observer
-export class Sidebar extends React.Component<Props> {
+class NonInjectedSidebar extends React.Component<Props & Dependencies> {
   static displayName = "Sidebar";
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      kubeWatchApi.subscribeStores([
+      this.props.subscribeStores([
         crdStore,
       ]),
     ]);
@@ -302,3 +310,14 @@ export class Sidebar extends React.Component<Props> {
     );
   }
 }
+
+export const Sidebar = withInjectables<Dependencies, Props>(
+  NonInjectedSidebar,
+
+  {
+    getProps: (di, props) => ({
+      subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
+      ...props,
+    }),
+  },
+);