migration additions -- part 1

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

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());
   }
 }