migration additions -- part 1

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

src/common/cluster-store.ts

@@ -331,8 +331,6 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     return toJS({
       activeCluster: this.activeCluster,
       clusters: this.clustersList.map(cluster => cluster.toJSON()),
-    }, {
-      recurseEverything: true
     });
   }
 }

src/common/hotbar-store.ts

@@ -54,12 +54,8 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   }
 
   toJSON(): HotbarStoreModel {
-    const model: HotbarStoreModel = {
+    return toJS({
       hotbars: this.hotbars
-    };
-
-    return toJS(model, {
-      recurseEverything: true,
     });
   }
 }

src/common/ipc/ipc.ts

@@ -18,7 +18,7 @@ export async function requestMain(channel: string, ...args: any[]) {
 }
 
 function getSubFrames(): ClusterFrameInfo[] {
-  return toJS(Array.from(clusterFrameMap.values()), { recurseEverything: true });
+  return toJS(Array.from(clusterFrameMap.values()));
 }
 
 export async function broadcastMessage(channel: string, ...args: any[]) {

src/common/user-store.ts

@@ -175,15 +175,11 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   toJSON(): UserStoreModel {
-    const model: UserStoreModel = {
+    return toJS({
       kubeConfigPath: this.kubeConfigPath,
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),
       preferences: this.preferences,
-    };
-
-    return toJS(model, {
-      recurseEverything: true,
     });
   }
 }

src/extensions/extension-discovery.ts

@@ -453,8 +453,6 @@ export class ExtensionDiscovery {
   toJSON(): ExtensionDiscoveryChannelMessage {
     return toJS({
       isLoaded: this.isLoaded
-    }, {
-      recurseEverything: true
     });
   }
 

src/extensions/extension-loader.ts

@@ -319,10 +319,7 @@ export class ExtensionLoader {
   }
 
   toJSON(): Map<LensExtensionId, InstalledExtension> {
-    return toJS(this.extensions, {
-      exportMapsAsObjects: false,
-      recurseEverything: true,
-    });
+    return toJS(this.extensions);
   }
 
   broadcastExtensions(main = true) {

src/extensions/extensions-store.ts

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

src/extensions/registries/command-registry.ts

@@ -1,7 +1,7 @@
 // Extensions API -> Commands
 
 import { BaseRegistry } from "./base-registry";
-import { action, observable } from "mobx";
+import { observable } from "mobx";
 import { LensExtension } from "../lens-extension";
 import { CatalogEntity } from "../../common/catalog-entity";
 
@@ -20,7 +20,6 @@ export interface CommandRegistration {
 export class CommandRegistry extends BaseRegistry<CommandRegistration> {
   @observable activeEntity: CatalogEntity;
 
-  @action
   add(items: CommandRegistration | CommandRegistration[], extension?: LensExtension) {
     const itemArray = [items].flat();
 

src/main/catalog-pusher.ts

@@ -27,6 +27,6 @@ export class CatalogPusher {
   }
 
   broadcast() {
-    broadcastMessage("catalog:items", toJS(this.catalog.items, { recurseEverything: true }));
+    broadcastMessage("catalog:items", toJS(this.catalog.items));
   }
 }

src/main/cluster-manager.ts

@@ -31,7 +31,7 @@ export class ClusterManager extends Singleton {
 
     }, { fireImmediately: true });
 
-    reaction(() => toJS(clusterStore.enabledClustersList, { recurseEverything: true }), () => {
+    reaction(() => toJS(clusterStore.enabledClustersList), () => {
       this.updateCatalogSource(clusterStore.enabledClustersList);
     }, { fireImmediately: true });
 

src/main/cluster.ts

@@ -240,9 +240,7 @@ export class Cluster implements ClusterModel, ClusterState {
   @computed get prometheusPreferences(): ClusterPrometheusPreferences {
     const { prometheus, prometheusProvider } = this.preferences;
 
-    return toJS({ prometheus, prometheusProvider }, {
-      recurseEverything: true,
-    });
+    return toJS({ prometheus, prometheusProvider });
   }
 
   /**
@@ -616,9 +614,7 @@ export class Cluster implements ClusterModel, ClusterState {
       accessibleNamespaces: this.accessibleNamespaces,
     };
 
-    return toJS(model, {
-      recurseEverything: true
-    });
+    return toJS(model);
   }
 
   /**
@@ -640,9 +636,7 @@ export class Cluster implements ClusterModel, ClusterState {
       isGlobalWatchEnabled: this.isGlobalWatchEnabled,
     };
 
-    return toJS(state, {
-      recurseEverything: true
-    });
+    return toJS(state);
   }
 
   /**

src/main/extension-filesystem.ts

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

src/renderer/api/endpoints/configmap.api.ts

@@ -3,6 +3,8 @@ import { KubeJsonApiData } from "../kube-json-api";
 import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
+export type ConfigMapData = Record<string, string>;
+
 @autobind()
 export class ConfigMap extends KubeObject {
   static kind = "ConfigMap";
@@ -14,9 +16,7 @@ export class ConfigMap extends KubeObject {
     this.data = this.data || {};
   }
 
-  data: {
-    [param: string]: string;
-  };
+  data: ConfigMapData;
 
   getKeys(): string[] {
     return Object.keys(this.data);

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 } from "mobx";
+import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
@@ -10,7 +10,7 @@ import { Button } from "../button";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { configMapsStore } from "./config-maps.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { ConfigMap } from "../../api/endpoints";
+import { ConfigMap, ConfigMapData } from "../../api/endpoints";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
@@ -20,26 +20,21 @@ interface Props extends KubeObjectDetailsProps<ConfigMap> {
 @observer
 export class ConfigMapDetails extends React.Component<Props> {
   @observable isSaving = false;
-  @observable data = observable.map();
+  @observable data: ConfigMapData = {};
 
-  async componentDidMount() {
-    disposeOnUnmount(this, [
-      autorun(() => {
-        const { object: configMap } = this.props;
-
-        if (configMap) {
-          this.data.replace(configMap.data); // refresh
-        }
-      })
-    ]);
-  }
+  @disposeOnUnmount
+  autoCopyData = reaction(() => this.props.object, configMap => {
+    this.data = configMap?.data ?? {}; // copy-or-update config-map's data for editing
+  }, {
+    fireImmediately: true,
+  });
 
   save = async () => {
     const { object: configMap } = this.props;
 
     try {
       this.isSaving = true;
-      await configMapsStore.update(configMap, { ...configMap, data: this.data.toJSON() });
+      await configMapsStore.update(configMap, { ...configMap, data: this.data });
       Notifications.ok(
         <p>
           <>ConfigMap <b>{configMap.getName()}</b> successfully updated.</>
@@ -53,18 +48,21 @@ export class ConfigMapDetails extends React.Component<Props> {
   render() {
     const { object: configMap } = this.props;
 
-    if (!configMap) return null;
-    const data = Object.entries(this.data.toJSON());
+    if (!configMap) {
+      return null;
+    }
+
+    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>
@@ -74,7 +72,7 @@ export class ConfigMapDetails extends React.Component<Props> {
                           theme="round-black"
                           className="box grow"
                           value={value}
-                          onChange={v => this.data.set(name, v)}
+                          onChange={v => this.data[name] = v}
                         />
                       </div>
                     </div>

src/renderer/components/dock/dock-tab.store.ts

@@ -54,7 +54,7 @@ export class DockTabStore<T> {
   }
 
   protected getStorableData(): DockTabStorageState<T> {
-    const allTabsData = toJS(this.data, { recurseEverything: true });
+    const allTabsData = toJS(this.data);
 
     return Object.fromEntries(
       Object.entries(allTabsData).map(([tabId, tabData]) => {

src/renderer/kube-object.store.ts

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

src/renderer/utils/storageHelper.ts

@@ -1,9 +1,8 @@
 // Helper for working with storages (e.g. window.localStorage, NodeJS/file-system, etc.)
 
-import type { CreateObservableOptions } from "mobx";
-import { action, comparer, observable, toJS, when } from "mobx";
+import { action, comparer, CreateObservableOptions, IObservableValue, observable, reaction, toJS, when } from "mobx";
 import produce, { Draft, enableMapSet, setAutoFreeze } from "immer";
-import { isEqual, isFunction, isPlainObject } from "lodash";
+import { isEqual, isFunction, isPlainObject, merge } from "lodash";
 import logger from "../../main/logger";
 
 setAutoFreeze(false); // allow to merge observables
@@ -33,7 +32,7 @@ export class StorageHelper<T> {
     }
   };
 
-  @observable private data = observable.box<T>();
+  private data: IObservableValue<T>;
   @observable initialized = false;
   whenReady = when(() => this.initialized);
 
@@ -46,9 +45,8 @@ export class StorageHelper<T> {
   }
 
   constructor(readonly key: string, private options: StorageHelperOptions<T>) {
-    this.options = { ...StorageHelper.defaultOptions, ...options };
-    this.configureObservable();
-    this.reset();
+    this.options = merge({}, StorageHelper.defaultOptions, options);
+    this.observeData();
 
     if (this.options.autoInit) {
       this.init();
@@ -99,17 +97,17 @@ export class StorageHelper<T> {
     return isEqual(value, this.defaultValue);
   }
 
-  @action
-  private configureObservable(options = this.options.observable) {
-    this.data = observable.box<T>(this.data.get(), {
+  private observeData(value = this.options.defaultValue) {
+    const observableOptions: CreateObservableOptions = {
       ...StorageHelper.defaultOptions.observable, // inherit default observability options
-      ...(options ?? {}),
-    });
-    this.data.observe(change => {
-      const { newValue, oldValue } = toJS(change, { recurseEverything: true });
+      ...this.options.observable,
+    };
 
+    this.data = observable.box<T>(value, observableOptions);
+
+    return reaction(() => toJS(this.data.get()), (newValue, oldValue) => {
       this.onChange(newValue, oldValue);
-    });
+    }, observableOptions);
   }
 
   protected onChange(value: T, oldValue?: T) {
@@ -158,6 +156,6 @@ export class StorageHelper<T> {
   }
 
   toJS() {
-    return toJS(this.get(), { recurseEverything: true });
+    return toJS(this.get());
   }
 }