master-merge fixes, upgrading packages: mobx-observable-history@2.0, mobx@6.3, mobx-react

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

src/main/catalog-pusher.ts

@@ -15,13 +15,13 @@ export class CatalogPusher {
     const disposers: Disposer[] = [];
 
     disposers.push(reaction(() => this.catalog.items, (items) => {
-      broadcastMessage("catalog:items", toJS(items, { recurseEverything: true }));
+      broadcastMessage("catalog:items", toJS(items));
     }, {
       fireImmediately: true,
     }));
 
     const listener = subscribeToBroadcast("catalog:broadcast", () => {
-      broadcastMessage("catalog:items", toJS(this.catalog.items, { recurseEverything: true }));
+      broadcastMessage("catalog:items", toJS(this.catalog.items));
     });
 
     disposers.push(() => unsubscribeFromBroadcast("catalog:broadcast", listener));

src/main/catalog-sources/kubeconfig-sync.ts

@@ -1,4 +1,4 @@
-import { action, observable, IComputedValue, computed, ObservableMap, runInAction } from "mobx";
+import { action, computed, IComputedValue, observable, ObservableMap, runInAction } from "mobx";
 import { CatalogEntity, catalogEntityRegistry } from "../../common/catalog";
 import { watch } from "chokidar";
 import fs from "fs";
@@ -47,7 +47,7 @@ export class KubeconfigSyncManager extends Singleton {
       this.startNewSync(filePath, port);
     }
 
-    this.syncListDisposer = UserStore.getInstance().syncKubeconfigEntries.observe(change => {
+    this.syncListDisposer = UserStore.getInstance().syncKubeconfigEntries.observe_(change => {
       switch (change.type) {
         case "add":
           this.startNewSync(change.name, port);

src/main/cluster-manager.ts

@@ -1,8 +1,8 @@
 import "../common/cluster-ipc";
 import type http from "http";
 import { ipcMain } from "electron";
-import { action, autorun, observable, reaction, makeObservable } from "mobx";
-import { Singleton, toJS } from "../common/utils";
+import { action, autorun, makeObservable, observable, reaction } from "mobx";
+import { Singleton } from "../common/utils";
 import { ClusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
@@ -32,15 +32,14 @@ export class ClusterManager extends Singleton {
 
     }, { fireImmediately: true });
 
-    reaction(() => toJS(ClusterStore.getInstance().enabledClustersList, { recurseEverything: true }), () => {
-      this.updateCatalogSource(ClusterStore.getInstance().enabledClustersList);
+    reaction(() => ClusterStore.getInstance().enabledClustersList, (enabledClusters) => {
+      this.updateCatalogSource(enabledClusters);
     }, { fireImmediately: true });
 
     reaction(() => catalogEntityRegistry.getItemsForApiKind<KubernetesCluster>("entity.k8slens.dev/v1alpha1", "KubernetesCluster"), (entities) => {
       this.syncClustersFromCatalog(entities);
     });
 
-
     // auto-stop removed clusters
     autorun(() => {
       const removedClusters = Array.from(ClusterStore.getInstance().removedClusters.values());
@@ -60,7 +59,8 @@ export class ClusterManager extends Singleton {
     ipcMain.on("network:online", () => { this.onNetworkOnline(); });
   }
 
-  @action protected updateCatalogSource(clusters: Cluster[]) {
+  @action
+  protected updateCatalogSource(clusters: Cluster[]) {
     this.catalogSource.replace(this.catalogSource.filter(entity => (
       clusters.find((cluster) => entity.metadata.uid === cluster.id)
     )));
@@ -175,9 +175,7 @@ export class ClusterManager extends Singleton {
 }
 
 export function catalogEntityFromCluster(cluster: Cluster) {
-  return new KubernetesCluster(toJS({
-    apiVersion: "entity.k8slens.dev/v1alpha1",
-    kind: "KubernetesCluster",
+  return new KubernetesCluster({
     metadata: {
       uid: cluster.id,
       name: cluster.name,
@@ -196,5 +194,5 @@ export function catalogEntityFromCluster(cluster: Cluster) {
       message: "",
       active: !cluster.disconnected
     }
-  }));
+  });
 }

src/renderer/components/dialog/dialog.tsx

@@ -42,7 +42,7 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
   };
 
   @disposeOnUnmount
-  closeOnNavigate = reaction(() => navigation.getPath(), () => this.close());
+  closeOnNavigate = reaction(() => navigation.toString(), () => this.close());
 
   public state: DialogState = {
     isOpen: this.props.isOpen,

src/renderer/components/error-boundary/error-boundary.tsx

@@ -21,7 +21,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
 
   @disposeOnUnmount
   resetOnNavigate = reaction(
-    () => navigation.getPath(),
+    () => navigation.toString(),
     () => this.setState({ error: null, errorInfo: null })
   );
 

src/renderer/navigation/history.ts

@@ -4,7 +4,14 @@ import { createObservableHistory } from "mobx-observable-history";
 import logger from "../../main/logger";
 
 export const history = ipcRenderer ? createBrowserHistory() : createMemoryHistory();
-export const navigation = createObservableHistory(history);
+
+export const navigation = createObservableHistory(history, {
+  searchParams: {
+    skipEmpty: true, // skip empty params, e.g. "?x=&y2=" will be "?y=2"
+    joinArrays: false, // join multiple params with same name, e.g. "?x=1&x=2" => "?x=1,2"
+    joinArraysWith: ",", // param values splitter, applicable only with {joinArrays:true}
+  }
+});
 
 navigation.listen((location, action) => {
   const isClusterView = !process.isMainFrame;

src/renderer/navigation/page-param.ts

@@ -1,5 +1,6 @@
 // Manage observable URL-param from document.location.search
-import { IObservableHistory } from "mobx-observable-history";
+// TODO: refactor / streamline with mobx-observable-history@2.x
+import type { ObservableHistory } from "mobx-observable-history";
 
 export interface PageParamInit<V = any> {
   name: string;
@@ -22,7 +23,7 @@ export class PageParam<V = any> {
   readonly name: string;
   readonly urlName: string;
 
-  constructor(readonly init: PageParamInit<V> | PageSystemParamInit<V>, protected history: IObservableHistory) {
+  constructor(readonly init: PageParamInit<V> | PageSystemParamInit<V>, protected history: ObservableHistory<{}>) {
     const { isSystem, name } = init as PageSystemParamInit;
 
     this.name = name;
@@ -93,9 +94,14 @@ export class PageParam<V = any> {
 
   getRaw(): string[] {
     const { history, urlName } = this;
-    const { multiValueSep } = this.init;
+    const { multiValueSep, multiValues } = this.init;
+    const values = history.searchParams.getAll(urlName);
 
-    return history.searchParams.getAsArray(urlName, multiValueSep);
+    if (multiValues) {
+      return values.flatMap(value => value.split(multiValueSep));
+    }
+
+    return values;
   }
 
   getDefaultValue() {