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-overview/overview-statuses.tsx

@@ -26,12 +26,14 @@ import { observer } from "mobx-react";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
 import { workloadStores } from "../+workloads";
-import { namespaceStore } from "../+namespaces/namespace.store";
+import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
 import type { KubeResource } from "../../../common/rbac";
 import { ResourceNames } from "../../utils/rbac";
 import { boundMethod } from "../../utils";
 import { workloadURL } from "../../../common/routes";
 import { isAllowedResource } from "../../../common/utils/allowed-resource";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
 
 const resources: KubeResource[] = [
   "pods",
@@ -43,8 +45,12 @@ const resources: KubeResource[] = [
   "cronjobs",
 ];
 
+interface Dependencies {
+  namespaceStore: NamespaceStore
+}
+
 @observer
-export class OverviewStatuses extends React.Component {
+class NonInjectedOverviewStatuses extends React.Component<Dependencies> {
   @boundMethod
   renderWorkload(resource: KubeResource): React.ReactElement {
     const store = workloadStores.get(resource);
@@ -53,7 +59,7 @@ export class OverviewStatuses extends React.Component {
       return null;
     }
 
-    const items = store.getAllByNs(namespaceStore.contextNamespaces);
+    const items = store.getAllByNs(this.props.namespaceStore.contextNamespaces);
 
     return (
       <div className="workload" key={resource}>
@@ -79,3 +85,13 @@ export class OverviewStatuses extends React.Component {
     );
   }
 }
+
+export const OverviewStatuses = withInjectables<Dependencies>(
+  NonInjectedOverviewStatuses,
+
+  {
+    getProps: (di) => ({
+      namespaceStore: di.inject(namespaceStoreInjectable),
+    }),
+  },
+);

src/renderer/components/+workloads-overview/overview.tsx

@@ -32,32 +32,41 @@ import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
-import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 import { WorkloadsOverviewDetailRegistry } from "../../../extensions/registries";
 import type { WorkloadsOverviewRouteParams } from "../../../common/routes";
 import { makeObservable, observable, reaction } from "mobx";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { Icon } from "../icon";
 import { TooltipPosition } from "../tooltip";
-import type { ClusterContext } from "../../../common/k8s-api/cluster-context";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import clusterFrameContextInjectable from "../../cluster-frame-context/cluster-frame-context.injectable";
+import type { ClusterFrameContext } from "../../cluster-frame-context/cluster-frame-context";
+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 type { KubeWatchSubscribeStoreOptions } from "../../kube-watch-api/kube-watch-api";
 
 interface Props extends RouteComponentProps<WorkloadsOverviewRouteParams> {
 }
 
-@observer
-export class WorkloadsOverview extends React.Component<Props> {
-  static clusterContext: ClusterContext;
+interface Dependencies {
+  clusterFrameContext: ClusterFrameContext
+  subscribeStores: (stores: KubeObjectStore<KubeObject>[], options: KubeWatchSubscribeStoreOptions) => Disposer
+}
 
+@observer
+class NonInjectedWorkloadsOverview extends React.Component<Props & Dependencies> {
   @observable loadErrors: string[] = [];
 
-  constructor(props: Props) {
+  constructor(props: Props & Dependencies) {
     super(props);
     makeObservable(this);
   }
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      kubeWatchApi.subscribeStores([
+      this.props.subscribeStores([
         cronJobStore,
         daemonSetStore,
         deploymentStore,
@@ -69,7 +78,7 @@ export class WorkloadsOverview extends React.Component<Props> {
       ], {
         onLoadFailure: error => this.loadErrors.push(String(error)),
       }),
-      reaction(() => WorkloadsOverview.clusterContext.contextNamespaces.slice(), () => {
+      reaction(() => this.props.clusterFrameContext.contextNamespaces.slice(), () => {
         // clear load errors
         this.loadErrors.length = 0;
       }),
@@ -117,3 +126,15 @@ export class WorkloadsOverview extends React.Component<Props> {
     );
   }
 }
+
+export const WorkloadsOverview = withInjectables<Dependencies, Props>(
+  NonInjectedWorkloadsOverview,
+
+  {
+    getProps: (di, props) => ({
+      clusterFrameContext: di.inject(clusterFrameContextInjectable),
+      subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
+      ...props,
+    }),
+  },
+);