normalize usages of #observable-value.toJSON() / attempt to catch the wind

Signed-off-by: Roman <ixrock@gmail.com>

src/common/base-store.ts

@@ -2,9 +2,8 @@ import path from "path";
 import Config from "conf";
 import { Options as ConfOptions } from "conf/dist/source/types";
 import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron";
-import { IReactionOptions, observable, reaction, runInAction, when, makeObservable } from "mobx";
-import Singleton from "./utils/singleton";
-import { getAppVersion } from "./utils/app-version";
+import { IReactionOptions, makeObservable, observable, reaction, runInAction, when } from "mobx";
+import { getAppVersion, Singleton, toJS } from "./utils";
 import logger from "../main/logger";
 import { broadcastMessage, subscribeToBroadcast, unsubscribeFromBroadcast } from "./ipc";
 import isEqual from "lodash/isEqual";
@@ -94,7 +93,11 @@ export abstract class BaseStore<T = any> extends Singleton {
 
   enableSync() {
     this.syncDisposers.push(
-      reaction(() => this.toJSON(), model => this.onModelChange(model), this.params.syncOptions),
+      reaction(
+        () => toJS(this.toJSON()), // unwrap possible observables and react to everything
+        model => this.onModelChange(model),
+        this.params.syncOptions,
+      ),
     );
 
     if (ipcMain) {

src/common/cluster-store.ts

@@ -290,7 +290,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
 
   @action
   protected fromStore({ activeCluster, clusters = [] }: ClusterStoreModel = {}) {
-    const currentClusters = toJS(this.clusters);
+    const currentClusters = new Map(this.clusters);
     const newClusters = new Map<ClusterId, Cluster>();
     const removedClusters = new Map<ClusterId, Cluster>();
 

src/extensions/extension-loader.ts

@@ -5,7 +5,7 @@ import { action, computed, observable, reaction, when, makeObservable } from "mo
 import path from "path";
 import { getHostedCluster } from "../common/cluster-store";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
-import { Singleton } from "../common/utils";
+import { Singleton, toJS } from "../common/utils";
 import logger from "../main/logger";
 import type { InstalledExtension } from "./extension-discovery";
 import { ExtensionsStore } from "./extensions-store";
@@ -146,7 +146,7 @@ export class ExtensionLoader extends Singleton {
     this.loadOnMain();
 
     reaction(() => this.toJSON(), () => {
-      this.broadcastExtensions();
+      this.broadcastExtensions(ExtensionLoader.extensionsMainChannel);
     });
 
     handleRequest(ExtensionLoader.extensionsMainChannel, () => {
@@ -174,7 +174,7 @@ export class ExtensionLoader extends Singleton {
     };
 
     reaction(() => this.toJSON(), () => {
-      this.broadcastExtensions(false);
+      this.broadcastExtensions(ExtensionLoader.extensionsRendererChannel);
     });
 
     requestMain(ExtensionLoader.extensionsMainChannel).then(extensionListHandler);
@@ -317,10 +317,10 @@ export class ExtensionLoader extends Singleton {
   }
 
   toJSON(): Map<LensExtensionId, InstalledExtension> {
-    return new Map(this.extensions.toJSON());
+    return toJS(this.extensions);
   }
 
-  broadcastExtensions(main = true) {
-    broadcastMessage(main ? ExtensionLoader.extensionsMainChannel : ExtensionLoader.extensionsRendererChannel, Array.from(this.toJSON()));
+  broadcastExtensions(channel = ExtensionLoader.extensionsMainChannel) {
+    broadcastMessage(channel, Array.from(this.extensions));
   }
 }

src/extensions/extensions-store.ts

@@ -49,7 +49,7 @@ export class ExtensionsStore extends BaseStore<LensExtensionsStoreModel> {
 
   toJSON(): LensExtensionsStoreModel {
     return toJS({
-      extensions: Object.fromEntries(this.state.toJSON()),
+      extensions: Object.fromEntries(this.state),
     });
   }
 }

src/main/cluster-manager.ts

@@ -16,9 +16,9 @@ export class ClusterManager extends Singleton {
 
     makeObservable(this);
 
-    reaction(() => toJS(ClusterStore.getInstance().clustersList), () => {
-      this.updateCatalog(ClusterStore.getInstance().clustersList);
-    }, { fireImmediately: true });
+    reaction(() => ClusterStore.getInstance().clustersList, this.updateCatalog, {
+      fireImmediately: true
+    });
 
     reaction(() => catalogEntityRegistry.getItemsForApiKind<KubernetesCluster>("entity.k8slens.dev/v1alpha1", "KubernetesCluster"), (entities) => {
       this.syncClustersFromCatalog(entities);
@@ -43,7 +43,8 @@ export class ClusterManager extends Singleton {
     ipcMain.on("network:online", () => { this.onNetworkOnline(); });
   }
 
-  @action protected updateCatalog(clusters: Cluster[]) {
+  @action.bound
+  protected updateCatalog(clusters: Cluster[]) {
     for (const cluster of clusters) {
       const index = catalogEntityRegistry.items.findIndex((entity) => entity.metadata.uid === cluster.id);
 

src/main/extension-filesystem.ts

@@ -52,7 +52,7 @@ export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {
 
   toJSON(): FSProvisionModel {
     return toJS({
-      extensions: Object.fromEntries(this.registeredExtensions.toJSON()),
+      extensions: Object.fromEntries(this.registeredExtensions),
     });
   }
 }

src/main/window-manager.ts

@@ -10,7 +10,7 @@ import { Singleton } from "../common/utils";
 import { ClusterFrameInfo, clusterFrameMap } from "../common/cluster-frames";
 import { IpcRendererNavigationEvents } from "../renderer/navigation/events";
 import logger from "./logger";
-import { productName } from "../common/vars";
+import { isProduction, productName } from "../common/vars";
 import { LensProxy } from "./proxy/lens-proxy";
 
 export class WindowManager extends Singleton {
@@ -85,6 +85,7 @@ export class WindowManager extends Singleton {
           shell.openExternal(url);
         })
         .on("dom-ready", () => {
+          // this.mainWindow.webContents.openDevTools({ mode: "right", activate: !isProduction });
           appEventBus.emit({ name: "app", action: "dom-ready" });
         })
         .on("did-fail-load", (_event, code, desc) => {

src/renderer/components/+apps-releases/release-details.tsx

@@ -51,7 +51,7 @@ export class ReleaseDetails extends Component<Props> {
   );
 
   @disposeOnUnmount
-  secretWatcher = reaction(() => secretsStore.items.toJSON(), () => {
+  secretWatcher = reaction(() => secretsStore.getItems(), () => {
     if (!this.props.release) return;
     const { getReleaseSecret } = releaseStore;
     const { release } = this.props;

src/renderer/components/+apps-releases/release.store.ts

@@ -22,7 +22,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
   }
 
   watchAssociatedSecrets(): (() => void) {
-    return reaction(() => secretsStore.items.toJSON(), () => {
+    return reaction(() => secretsStore.getItems(), () => {
       if (this.isLoading) return;
       const newSecrets = this.getReleaseSecrets();
       const amountChanged = newSecrets.length !== this.releaseSecrets.size;

src/renderer/components/+config-maps/config-map-details.tsx

@@ -1,7 +1,7 @@
 import "./config-map-details.scss";
 
 import React from "react";
-import { autorun, observable, makeObservable } from "mobx";
+import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
@@ -20,7 +20,7 @@ interface Props extends KubeObjectDetailsProps<ConfigMap> {
 @observer
 export class ConfigMapDetails extends React.Component<Props> {
   @observable isSaving = false;
-  @observable data = observable.map();
+  @observable data = observable.map<string, string>();
 
   constructor(props: Props) {
     super(props);
@@ -44,7 +44,10 @@ export class ConfigMapDetails extends React.Component<Props> {
 
     try {
       this.isSaving = true;
-      await configMapsStore.update(configMap, { ...configMap, data: Object.fromEntries(this.data.toJSON()) });
+      await configMapsStore.update(configMap, {
+        ...configMap,
+        data: Object.fromEntries(this.data),
+      });
       Notifications.ok(
         <p>
           <>ConfigMap <b>{configMap.getName()}</b> successfully updated.</>
@@ -59,17 +62,17 @@ export class ConfigMapDetails extends React.Component<Props> {
     const { object: configMap } = this.props;
 
     if (!configMap) return null;
-    const data = this.data.toJSON();
+    const dataEntries = Object.entries(this.data);
 
     return (
       <div className="ConfigMapDetails">
         <KubeObjectMeta object={configMap}/>
         {
-          data.length > 0 && (
+          dataEntries.length > 0 && (
             <>
               <DrawerTitle title="Data"/>
               {
-                data.map(([name, value]) => {
+                dataEntries.map(([name, value]) => {
                   return (
                     <div key={name} className="data">
                       <div className="name">{name}</div>

src/renderer/components/+custom-resources/crd.store.ts

@@ -28,7 +28,7 @@ export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
     autoBind(this);
 
     // auto-init stores for crd-s
-    reaction(() => this.items.toJSON(), items => items.forEach(initStore));
+    reaction(() => this.getItems(), items => items.forEach(initStore));
   }
 
   protected sortItems(items: CustomResourceDefinition[]) {

src/renderer/item.store.ts

@@ -28,7 +28,7 @@ export abstract class ItemStore<T extends ItemObject = ItemObject> {
   }
 
   public getItems(): T[] {
-    return this.items.toJSON();
+    return Array.from(this.items);
   }
 
   public getTotalCount(): number {

src/renderer/kube-object.store.ts

@@ -366,7 +366,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
 
   @action
   protected updateFromEventsBuffer() {
-    const items = this.items.toJSON();
+    const items = this.getItems();
 
     for (const { type, object } of this.eventsBuffer.clear()) {
       const index = items.findIndex(item => item.getId() === object.metadata?.uid);

src/renderer/utils/__tests__/storageHelper.test.ts

@@ -1,17 +1,8 @@
 import { reaction } from "mobx";
 import { StorageAdapter, StorageHelper } from "../storageHelper";
 import { delay } from "../../../common/utils/delay";
-import { ClusterStore } from "../../../common/cluster-store";
 
 describe("renderer/utils/StorageHelper", () => {
-  beforeEach(() => {
-    ClusterStore.createInstance();
-  });
-
-  afterEach(() => {
-    ClusterStore.resetInstance();
-  });
-
   describe("window.localStorage might be used as StorageAdapter", () => {
     type StorageModel = string;