Mobx package upgrade (#4357)

src/common/base-store.ts

@@ -23,7 +23,7 @@ import path from "path";
 import Config from "conf";
 import type { Options as ConfOptions } from "conf/dist/source/types";
 import { ipcMain, ipcRenderer } from "electron";
-import { IReactionOptions, makeObservable, reaction, runInAction } from "mobx";
+import { IEqualsComparer, makeObservable, reaction, runInAction } from "mobx";
 import { getAppVersion, Singleton, toJS, Disposer } from "./utils";
 import logger from "../main/logger";
 import { broadcastMessage, ipcMainOn, ipcRendererOn } from "./ipc";
@@ -33,7 +33,10 @@ import { kebabCase } from "lodash";
 import { AppPaths } from "./app-paths";
 
 export interface BaseStoreParams<T> extends ConfOptions<T> {
-  syncOptions?: IReactionOptions;
+  syncOptions?: {
+    fireImmediately?: boolean;
+    equals?: IEqualsComparer<T>;
+  };
 }
 
 /**

src/common/configure-packages.ts

@@ -29,7 +29,6 @@ export default function configurePackages() {
   // Docs: https://mobx.js.org/configuration.html
   Mobx.configure({
     enforceActions: "never",
-    isolateGlobalState: true,
 
     // TODO: enable later (read more: https://mobx.js.org/migrating-from-4-or-5.html)
     // computedRequiresReaction: true,

src/renderer/components/+namespaces/namespace.store.ts

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { action, comparer, computed, IReactionDisposer, IReactionOptions, makeObservable, reaction } from "mobx";
+import { action, comparer, computed, IReactionDisposer, makeObservable, reaction } from "mobx";
 import { autoBind, createStorage, noop, ToggleSet } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../../common/k8s-api/kube-object.store";
 import { Namespace, namespacesApi } from "../../../common/k8s-api/endpoints/namespaces.api";
@@ -45,10 +45,10 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     this.autoLoadAllowedNamespaces();
   }
 
-  public onContextChange(callback: (namespaces: string[]) => void, opts: IReactionOptions = {}): IReactionDisposer {
+  public onContextChange(callback: (namespaces: string[]) => void, opts: { fireImmediately?: boolean } = {}): IReactionDisposer {
     return reaction(() => Array.from(this.contextNamespaces), callback, {
+      fireImmediately: opts.fireImmediately,
       equals: comparer.shallow,
-      ...opts,
     });
   }
 
@@ -205,7 +205,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
    * explicitly deselected.
    * @param namespace The name of a namespace
    */
-  toggleSingle(namespace: string){
+  toggleSingle(namespace: string) {
     const nextState = new ToggleSet(this.contextNamespaces);
 
     nextState.toggle(namespace);

src/renderer/components/delete-cluster-dialog/delete-cluster-dialog.tsx

@@ -52,15 +52,12 @@ type Props = {};
 
 @observer
 export class DeleteClusterDialog extends React.Component {
-  showContextSwitch = false;
-  newCurrentContext = "";
+  @observable showContextSwitch = false;
+  @observable newCurrentContext = "";
 
   constructor(props: Props) {
     super(props);
-    makeObservable(this, {
-      showContextSwitch: observable,
-      newCurrentContext: observable,
-    });
+    makeObservable(this);
   }
 
   static open({ config, cluster }: Partial<DialogState>) {

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

@@ -20,7 +20,7 @@
  */
 
 import * as uuid from "uuid";
-import { action, comparer, computed, IReactionOptions, makeObservable, observable, reaction, runInAction } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 import { autoBind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
 
@@ -94,7 +94,11 @@ export interface DockTabChangeEvent {
   prevTab?: DockTab;
 }
 
-export interface DockTabChangeEventOptions extends IReactionOptions {
+export interface DockTabChangeEventOptions {
+  /**
+   * apply a callback right after initialization
+   */
+  fireImmediately?: boolean;
   /**
    * filter: by dockStore.selectedTab.kind == tabKind
    */
@@ -195,11 +199,13 @@ export class DockStore implements DockStorageState {
     if (this.height > this.maxHeight) this.height = this.maxHeight;
   }
 
-  onResize(callback: () => void, options?: IReactionOptions) {
-    return reaction(() => [this.height, this.fullSize], callback, options);
+  onResize(callback: () => void, opts: { fireImmediately?: boolean } = {}) {
+    return reaction(() => [this.height, this.fullSize], callback, {
+      fireImmediately: opts.fireImmediately,
+    });
   }
 
-  onTabClose(callback: (evt: DockTabCloseEvent) => void, options: IReactionOptions = {}) {
+  onTabClose(callback: (evt: DockTabCloseEvent) => void, opts: { fireImmediately?: boolean } = {}) {
     return reaction(() => dockStore.tabs.map(tab => tab.id), (tabs: TabId[], prevTabs?: TabId[]) => {
       if (!Array.isArray(prevTabs)) {
         return; // tabs not yet modified
@@ -214,7 +220,7 @@ export class DockStore implements DockStorageState {
       }
     }, {
       equals: comparer.structural,
-      ...options,
+      fireImmediately: opts.fireImmediately,
     });
   }