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/+workloads-pods/__tests__/pod-tolerations.test.tsx

@@ -21,9 +21,13 @@
 
 import React from "react";
 import "@testing-library/jest-dom/extend-expect";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
 import type { IToleration } from "../../../../common/k8s-api/workload-kube-object";
 import { PodTolerations } from "../pod-tolerations";
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import { DiRender, renderFor } from "../../test-utils/renderFor";
+import directoryForLensLocalStorageInjectable
+  from "../../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
 
 jest.mock("electron", () => ({
   app: {
@@ -47,6 +51,21 @@ const tolerations: IToleration[] =[
 ];
 
 describe("<PodTolerations />", () => {
+  let render: DiRender;
+
+  beforeEach(async () => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    di.override(
+      directoryForLensLocalStorageInjectable,
+      () => "some-directory-for-lens-local-storage",
+    );
+
+    await di.runSetups();
+
+    render = renderFor(di);
+  });
+
   it("renders w/o errors", () => {
     const { container } = render(<PodTolerations tolerations={tolerations} />);
 

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -28,9 +28,16 @@ import { observable, makeObservable, reaction } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
-import { aboutPortForwarding, addPortForward, getPortForward, getPortForwards, openPortForward, PortForwardDialog, portForwardStore, predictProtocol, removePortForward } from "../../port-forward";
+import { aboutPortForwarding, getPortForward, getPortForwards, openPortForward, PortForwardStore, predictProtocol } from "../../port-forward";
 import type { ForwardedPort } from "../../port-forward";
 import { Spinner } from "../spinner";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
+import removePortForwardInjectable from "../../port-forward/port-forward-store/remove-port-forward/remove-port-forward.injectable";
+import portForwardDialogModelInjectable
+  from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
+import addPortForwardInjectable
+  from "../../port-forward/port-forward-store/add-port-forward/add-port-forward.injectable";
 
 interface Props {
   pod: Pod;
@@ -41,13 +48,20 @@ interface Props {
   }
 }
 
+interface Dependencies {
+  portForwardStore: PortForwardStore;
+  removePortForward: (item: ForwardedPort) => Promise<void>;
+  addPortForward: (item: ForwardedPort) => Promise<number>;
+  openPortForwardDialog: (item: ForwardedPort, options: { openInBrowser: boolean }) => void;
+}
+
 @observer
-export class PodContainerPort extends React.Component<Props> {
+class NonInjectedPodContainerPort extends React.Component<Props & Dependencies> {
   @observable waiting = false;
   @observable forwardPort = 0;
   @observable isPortForwarded = false;
 
-  constructor(props: Props) {
+  constructor(props: Props & Dependencies) {
     super(props);
     makeObservable(this);
     this.checkExistingPortForwarding();
@@ -55,7 +69,7 @@ export class PodContainerPort extends React.Component<Props> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => [portForwardStore.portForwards, this.props.pod], () => this.checkExistingPortForwarding()),
+      reaction(() => [this.props.portForwardStore.portForwards, this.props.pod], () => this.checkExistingPortForwarding()),
     ]);
   }
 
@@ -100,7 +114,7 @@ export class PodContainerPort extends React.Component<Props> {
       // determine how many port-forwards are already active
       const { length } = await getPortForwards();
 
-      this.forwardPort = await addPortForward(portForward);
+      this.forwardPort = await this.props.addPortForward(portForward);
 
       if (this.forwardPort) {
         portForward.forwardPort = this.forwardPort;
@@ -133,7 +147,7 @@ export class PodContainerPort extends React.Component<Props> {
     this.waiting = true;
 
     try {
-      await removePortForward(portForward);
+      await this.props.removePortForward(portForward);
       this.isPortForwarded = false;
     } catch (error) {
       Notifications.error(`Error occurred stopping the port-forward from port ${portForward.forwardPort}.`);
@@ -161,7 +175,7 @@ export class PodContainerPort extends React.Component<Props> {
           protocol: predictProtocol(port.name),
         };
 
-        PortForwardDialog.open(portForward, { openInBrowser: true });
+        this.props.openPortForwardDialog(portForward, { openInBrowser: true });
       }
     };
 
@@ -178,3 +192,17 @@ export class PodContainerPort extends React.Component<Props> {
     );
   }
 }
+
+export const PodContainerPort = withInjectables<Dependencies, Props>(
+  NonInjectedPodContainerPort,
+
+  {
+    getProps: (di, props) => ({
+      portForwardStore: di.inject(portForwardStoreInjectable),
+      removePortForward: di.inject(removePortForwardInjectable),
+      addPortForward: di.inject(addPortForwardInjectable),
+      openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
+      ...props,
+    }),
+  },
+);

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -35,8 +35,10 @@ import { ContainerCharts } from "./container-charts";
 import { LocaleDate } from "../locale-date";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { portForwardStore } from "../../port-forward/port-forward.store";
+import type { PortForwardStore } from "../../port-forward";
 import { disposeOnUnmount, observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 
 interface Props {
   pod: Pod;
@@ -44,12 +46,16 @@ interface Props {
   metrics?: { [key: string]: IMetrics };
 }
 
+interface Dependencies {
+  portForwardStore: PortForwardStore
+}
+
 @observer
-export class PodDetailsContainer extends React.Component<Props> {
+class NonInjectedPodDetailsContainer extends React.Component<Props & Dependencies> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      portForwardStore.watch(),
+      this.props.portForwardStore.watch(),
     ]);
   }
 
@@ -200,3 +206,14 @@ export class PodDetailsContainer extends React.Component<Props> {
     );
   }
 }
+
+export const PodDetailsContainer = withInjectables<Dependencies, Props>(
+  NonInjectedPodDetailsContainer,
+
+  {
+    getProps: (di, props) => ({
+      portForwardStore: di.inject(portForwardStoreInjectable),
+      ...props,
+    }),
+  },
+);