fix: namespace-store refactoring / saving selected-namespaces to external json-file

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

src/renderer/components/+apps/apps.tsx

@@ -3,12 +3,10 @@ import { observer } from "mobx-react";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { HelmCharts, helmChartsRoute, helmChartsURL } from "../+apps-helm-charts";
 import { HelmReleases, releaseRoute, releaseURL } from "../+apps-releases";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 
 @observer
 export class Apps extends React.Component {
   static get tabRoutes(): TabLayoutRoute[] {
-    const query = namespaceUrlParam.toObjectParam();
 
     return [
       {
@@ -20,7 +18,7 @@ export class Apps extends React.Component {
       {
         title: "Releases",
         component: HelmReleases,
-        url: releaseURL({ query }),
+        url: releaseURL(),
         routePath: releaseRoute.path.toString(),
       },
     ];

src/renderer/components/+config/config.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { ConfigMaps, configMapsRoute, configMapsURL } from "../+config-maps";
 import { Secrets, secretsRoute, secretsURL } from "../+config-secrets";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { resourceQuotaRoute, ResourceQuotas, resourceQuotaURL } from "../+config-resource-quotas";
 import { pdbRoute, pdbURL, PodDisruptionBudgets } from "../+config-pod-disruption-budgets";
 import { HorizontalPodAutoscalers, hpaRoute, hpaURL } from "../+config-autoscalers";
@@ -13,14 +12,13 @@ import { LimitRanges, limitRangesRoute, limitRangeURL } from "../+config-limit-r
 @observer
 export class Config extends React.Component {
   static get tabRoutes(): TabLayoutRoute[] {
-    const query = namespaceUrlParam.toObjectParam();
     const routes: TabLayoutRoute[] = [];
 
     if (isAllowedResource("configmaps")) {
       routes.push({
         title: "ConfigMaps",
         component: ConfigMaps,
-        url: configMapsURL({ query }),
+        url: configMapsURL(),
         routePath: configMapsRoute.path.toString(),
       });
     }
@@ -29,7 +27,7 @@ export class Config extends React.Component {
       routes.push({
         title: "Secrets",
         component: Secrets,
-        url: secretsURL({ query }),
+        url: secretsURL(),
         routePath: secretsRoute.path.toString(),
       });
     }
@@ -38,7 +36,7 @@ export class Config extends React.Component {
       routes.push({
         title: "Resource Quotas",
         component: ResourceQuotas,
-        url: resourceQuotaURL({ query }),
+        url: resourceQuotaURL(),
         routePath: resourceQuotaRoute.path.toString(),
       });
     }
@@ -47,7 +45,7 @@ export class Config extends React.Component {
       routes.push({
         title: "Limit Ranges",
         component: LimitRanges,
-        url: limitRangeURL({ query }),
+        url: limitRangeURL(),
         routePath: limitRangesRoute.path.toString(),
       });
     }
@@ -56,7 +54,7 @@ export class Config extends React.Component {
       routes.push({
         title: "HPA",
         component: HorizontalPodAutoscalers,
-        url: hpaURL({ query }),
+        url: hpaURL(),
         routePath: hpaRoute.path.toString(),
       });
     }
@@ -65,7 +63,7 @@ export class Config extends React.Component {
       routes.push({
         title: "Pod Disruption Budgets",
         component: PodDisruptionBudgets,
-        url: pdbURL({ query }),
+        url: pdbURL(),
         routePath: pdbRoute.path.toString(),
       });
     }

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

@@ -1,35 +1,18 @@
-import { action, comparer, computed, IReactionDisposer, IReactionOptions, makeObservable, observable, reaction, } from "mobx";
+import { action, comparer, computed, IReactionDisposer, IReactionOptions, makeObservable, reaction, when, } from "mobx";
 import { autoBind, createStorage } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
-import { createPageParam } from "../../navigation";
 import { apiManager } from "../../api/api-manager";
 
-// FIXME: something fishy with sync selected-namespaces with URL
-const selectedNamespaces = createStorage<string[] | undefined>("selected_namespaces", undefined);
-
-export const namespaceUrlParam = createPageParam<string[]>({
-  name: "namespaces",
-  defaultValue: [],
-});
-
-export function getDummyNamespace(name: string) {
-  return new Namespace({
-    kind: Namespace.kind,
-    apiVersion: "v1",
-    metadata: {
-      name,
-      uid: "",
-      resourceVersion: "",
-      selfLink: `/api/v1/namespaces/${name}`
-    }
-  });
-}
-
 export class NamespaceStore extends KubeObjectStore<Namespace> {
   api = namespacesApi;
 
-  @observable private contextNs = observable.set<string>();
+  private defaultNamespaces: string[] = [];
+  private storage = createStorage<string[]>("selected_namespaces", this.defaultNamespaces);
+
+  @computed get selectedNamespaces(): string[] {
+    return this.storage.get();
+  }
 
   constructor() {
     super();
@@ -41,29 +24,19 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   private async init() {
     await this.contextReady;
-    await selectedNamespaces.whenReady;
+    await when(() => this.storage.initialized);
 
     this.setContext(this.initialNamespaces);
     this.autoLoadAllowedNamespaces();
-    this.autoUpdateUrlAndLocalStorage();
   }
 
-  public onContextChange(callback: (contextNamespaces: string[]) => void, opts: IReactionOptions = {}): IReactionDisposer {
+  public onContextChange(callback: (namespaces: string[]) => void, opts: IReactionOptions = {}): IReactionDisposer {
-    return reaction(() => Array.from(this.contextNs), callback, {
+    return reaction(() => Array.from(this.selectedNamespaces), callback, {
       equals: comparer.shallow,
       ...opts,
     });
   }
 
-  private autoUpdateUrlAndLocalStorage(): IReactionDisposer {
-    return this.onContextChange(namespaces => {
-      selectedNamespaces.set(namespaces); // save to local-storage
-      namespaceUrlParam.set(namespaces, { replaceHistory: true }); // update url
-    }, {
-      fireImmediately: true,
-    });
-  }
-
   private autoLoadAllowedNamespaces(): IReactionDisposer {
     return reaction(() => this.allowedNamespaces, namespaces => this.loadAll({ namespaces }), {
       fireImmediately: true,
@@ -72,19 +45,18 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   private get initialNamespaces(): string[] {
-    const namespaces = new Set(this.allowedNamespaces);
+    const { allowedNamespaces, selectedNamespaces, defaultNamespaces } = this;
-    const prevSelectedNamespaces = selectedNamespaces.get();
 
     // return previously saved namespaces from local-storage (if any)
-    if (prevSelectedNamespaces) {
+    if (selectedNamespaces !== defaultNamespaces) {
-      return prevSelectedNamespaces.filter(namespace => namespaces.has(namespace));
+      return selectedNamespaces.filter(namespace => allowedNamespaces.includes(namespace));
     }
 
     // otherwise select "default" or first allowed namespace
-    if (namespaces.has("default")) {
+    if (allowedNamespaces.includes("default")) {
       return ["default"];
-    } else if (namespaces.size) {
+    } else if (allowedNamespaces.length) {
-      return [Array.from(namespaces)[0]];
+      return [allowedNamespaces[0]];
     }
 
     return [];
@@ -98,13 +70,11 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   @computed get contextNamespaces(): string[] {
-    const namespaces = Array.from(this.contextNs);
+    if (!this.selectedNamespaces.length) {
-
-    if (!namespaces.length) {
       return this.allowedNamespaces; // show all namespaces when nothing selected
     }
 
-    return namespaces;
+    return this.selectedNamespaces;
   }
 
   getSubscribeApis() {
@@ -132,30 +102,39 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   @action
   setContext(namespace: string | string[]) {
-    const namespaces = [namespace].flat();
+    const namespaces = Array.from(new Set([namespace].flat()));
 
-    this.contextNs.replace(namespaces);
+    this.storage.set(namespaces);
   }
 
   @action
-  resetContext() {
+  resetContext(namespaces?: string | string[]) {
-    this.contextNs.clear();
+    if (namespaces) {
+      const resettingNamespaces = [namespaces].flat();
+      const newNamespaces = this.storage.get().filter(ns => !resettingNamespaces.includes(ns));
+
+      this.storage.set(newNamespaces);
+    } else {
+      this.storage.reset();
+    }
   }
 
-  hasContext(namespaces: string | string[]) {
+  hasContext(namespaces: string | string[]): boolean {
-    return [namespaces].flat().every(namespace => this.contextNs.has(namespace));
+    return [namespaces]
+      .flat()
+      .every(namespace => this.selectedNamespaces.includes(namespace));
   }
 
   @computed get hasAllContexts(): boolean {
-    return this.contextNs.size === this.allowedNamespaces.length;
+    return this.selectedNamespaces.length === this.allowedNamespaces.length;
   }
 
   @action
-  toggleContext(namespace: string) {
+  toggleContext(namespaces: string | string[]) {
-    if (this.hasContext(namespace)) {
+    if (this.hasContext(namespaces)) {
-      this.contextNs.delete(namespace);
+      this.resetContext(namespaces);
     } else {
-      this.contextNs.add(namespace);
+      this.setContext([this.selectedNamespaces, namespaces].flat());
     }
   }
 
@@ -175,9 +154,22 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   @action
   async remove(item: Namespace) {
     await super.remove(item);
-    this.contextNs.delete(item.getName());
+    this.resetContext(item.getName());
   }
 }
 
 export const namespaceStore = new NamespaceStore();
 apiManager.registerStore(namespaceStore);
+
+export function getDummyNamespace(name: string) {
+  return new Namespace({
+    kind: Namespace.kind,
+    apiVersion: "v1",
+    metadata: {
+      name,
+      uid: "",
+      resourceVersion: "",
+      selfLink: `/api/v1/namespaces/${name}`
+    }
+  });
+}

src/renderer/components/+network/network.tsx

@@ -7,20 +7,18 @@ import { Services, servicesRoute, servicesURL } from "../+network-services";
 import { endpointRoute, Endpoints, endpointURL } from "../+network-endpoints";
 import { Ingresses, ingressRoute, ingressURL } from "../+network-ingresses";
 import { NetworkPolicies, networkPoliciesRoute, networkPoliciesURL } from "../+network-policies";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { isAllowedResource } from "../../../common/rbac";
 
 @observer
 export class Network extends React.Component {
   static get tabRoutes(): TabLayoutRoute[] {
-    const query = namespaceUrlParam.toObjectParam();
     const routes: TabLayoutRoute[] = [];
 
     if (isAllowedResource("services")) {
       routes.push({
         title: "Services",
         component: Services,
-        url: servicesURL({ query }),
+        url: servicesURL(),
         routePath: servicesRoute.path.toString(),
       });
     }
@@ -29,7 +27,7 @@ export class Network extends React.Component {
       routes.push({
         title: "Endpoints",
         component: Endpoints,
-        url: endpointURL({ query }),
+        url: endpointURL(),
         routePath: endpointRoute.path.toString(),
       });
     }
@@ -38,7 +36,7 @@ export class Network extends React.Component {
       routes.push({
         title: "Ingresses",
         component: Ingresses,
-        url: ingressURL({ query }),
+        url: ingressURL(),
         routePath: ingressRoute.path.toString(),
       });
     }
@@ -47,7 +45,7 @@ export class Network extends React.Component {
       routes.push({
         title: "Network Policies",
         component: NetworkPolicies,
-        url: networkPoliciesURL({ query }),
+        url: networkPoliciesURL(),
         routePath: networkPoliciesRoute.path.toString(),
       });
     }

src/renderer/components/+storage/storage.tsx

@@ -6,20 +6,18 @@ import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { PersistentVolumes, volumesRoute, volumesURL } from "../+storage-volumes";
 import { StorageClasses, storageClassesRoute, storageClassesURL } from "../+storage-classes";
 import { PersistentVolumeClaims, volumeClaimsRoute, volumeClaimsURL } from "../+storage-volume-claims";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { isAllowedResource } from "../../../common/rbac";
 
 @observer
 export class Storage extends React.Component {
   static get tabRoutes() {
     const tabRoutes: TabLayoutRoute[] = [];
-    const query = namespaceUrlParam.toObjectParam();
 
     if (isAllowedResource("persistentvolumeclaims")) {
       tabRoutes.push({
         title: "Persistent Volume Claims",
         component: PersistentVolumeClaims,
-        url: volumeClaimsURL({ query }),
+        url: volumeClaimsURL(),
         routePath: volumeClaimsRoute.path.toString(),
       });
     }

src/renderer/components/+user-management/user-management.tsx

@@ -6,7 +6,6 @@ import { Roles } from "../+user-management-roles";
 import { RoleBindings } from "../+user-management-roles-bindings";
 import { ServiceAccounts } from "../+user-management-service-accounts";
 import { podSecurityPoliciesRoute, podSecurityPoliciesURL, roleBindingsRoute, roleBindingsURL, rolesRoute, rolesURL, serviceAccountsRoute, serviceAccountsURL } from "./user-management.route";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { PodSecurityPolicies } from "../+pod-security-policies";
 import { isAllowedResource } from "../../../common/rbac";
 
@@ -14,25 +13,24 @@ import { isAllowedResource } from "../../../common/rbac";
 export class UserManagement extends React.Component {
   static get tabRoutes() {
     const tabRoutes: TabLayoutRoute[] = [];
-    const query = namespaceUrlParam.toObjectParam();
 
     tabRoutes.push(
       {
         title: "Service Accounts",
         component: ServiceAccounts,
-        url: serviceAccountsURL({ query }),
+        url: serviceAccountsURL(),
         routePath: serviceAccountsRoute.path.toString(),
       },
       {
         title: "Role Bindings",
         component: RoleBindings,
-        url: roleBindingsURL({ query }),
+        url: roleBindingsURL(),
         routePath: roleBindingsRoute.path.toString(),
       },
       {
         title: "Roles",
         component: Roles,
-        url: rolesURL({ query }),
+        url: rolesURL(),
         routePath: rolesRoute.path.toString(),
       },
     );

src/renderer/components/+workloads/workloads.tsx

@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { WorkloadsOverview } from "../+workloads-overview/overview";
 import { cronJobsRoute, cronJobsURL, daemonSetsRoute, daemonSetsURL, deploymentsRoute, deploymentsURL, jobsRoute, jobsURL, overviewRoute, overviewURL, podsRoute, podsURL, replicaSetsRoute, replicaSetsURL, statefulSetsRoute, statefulSetsURL } from "./workloads.route";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { Pods } from "../+workloads-pods";
 import { Deployments } from "../+workloads-deployments";
 import { DaemonSets } from "../+workloads-daemonsets";
@@ -18,12 +17,11 @@ import { ReplicaSets } from "../+workloads-replicasets";
 @observer
 export class Workloads extends React.Component {
   static get tabRoutes(): TabLayoutRoute[] {
-    const query = namespaceUrlParam.toObjectParam();
     const routes: TabLayoutRoute[] = [
       {
         title: "Overview",
         component: WorkloadsOverview,
-        url: overviewURL({ query }),
+        url: overviewURL(),
         routePath: overviewRoute.path.toString()
       }
     ];
@@ -32,7 +30,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "Pods",
         component: Pods,
-        url: podsURL({ query }),
+        url: podsURL(),
         routePath: podsRoute.path.toString()
       });
     }
@@ -41,7 +39,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "Deployments",
         component: Deployments,
-        url: deploymentsURL({ query }),
+        url: deploymentsURL(),
         routePath: deploymentsRoute.path.toString(),
       });
     }
@@ -50,7 +48,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "DaemonSets",
         component: DaemonSets,
-        url: daemonSetsURL({ query }),
+        url: daemonSetsURL(),
         routePath: daemonSetsRoute.path.toString(),
       });
     }
@@ -59,7 +57,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "StatefulSets",
         component: StatefulSets,
-        url: statefulSetsURL({ query }),
+        url: statefulSetsURL(),
         routePath: statefulSetsRoute.path.toString(),
       });
     }
@@ -68,7 +66,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "ReplicaSets",
         component: ReplicaSets,
-        url: replicaSetsURL({ query }),
+        url: replicaSetsURL(),
         routePath: replicaSetsRoute.path.toString(),
       });
     }
@@ -77,7 +75,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "Jobs",
         component: Jobs,
-        url: jobsURL({ query }),
+        url: jobsURL(),
         routePath: jobsRoute.path.toString(),
       });
     }
@@ -86,7 +84,7 @@ export class Workloads extends React.Component {
       routes.push({
         title: "CronJobs",
         component: CronJobs,
-        url: cronJobsURL({ query }),
+        url: cronJobsURL(),
         routePath: cronJobsRoute.path.toString(),
       });
     }

src/renderer/components/layout/sidebar.tsx

@@ -16,7 +16,6 @@ import { clusterRoute, clusterURL } from "../+cluster";
 import { Config, configRoute, configURL } from "../+config";
 import { eventRoute, eventsURL } from "../+events";
 import { Apps, appsRoute, appsURL } from "../+apps";
-import { namespaceUrlParam } from "../+namespaces/namespace.store";
 import { Workloads } from "../+workloads";
 import { UserManagement } from "../+user-management";
 import { Storage } from "../+storage";
@@ -48,7 +47,7 @@ export class Sidebar extends React.Component<Props> {
     if (crdStore.isLoading) {
       return (
         <div className="flex justify-center">
-          <Spinner />
+          <Spinner/>
         </div>
       );
     }
@@ -154,7 +153,6 @@ export class Sidebar extends React.Component<Props> {
 
   render() {
     const { toggle, compact, className } = this.props;
-    const query = namespaceUrlParam.toObjectParam();
 
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", { compact }, className)}>
@@ -193,7 +191,7 @@ export class Sidebar extends React.Component<Props> {
             text="Workloads"
             isActive={isActiveRoute(workloadsRoute)}
             isHidden={Workloads.tabRoutes.length == 0}
-            url={workloadsURL({ query })}
+            url={workloadsURL()}
             icon={<Icon svg="workloads"/>}
           >
             {this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
@@ -203,7 +201,7 @@ export class Sidebar extends React.Component<Props> {
             text="Configuration"
             isActive={isActiveRoute(configRoute)}
             isHidden={Config.tabRoutes.length == 0}
-            url={configURL({ query })}
+            url={configURL()}
             icon={<Icon material="list"/>}
           >
             {this.renderTreeFromTabRoutes(Config.tabRoutes)}
@@ -213,7 +211,7 @@ export class Sidebar extends React.Component<Props> {
             text="Network"
             isActive={isActiveRoute(networkRoute)}
             isHidden={Network.tabRoutes.length == 0}
-            url={networkURL({ query })}
+            url={networkURL()}
             icon={<Icon material="device_hub"/>}
           >
             {this.renderTreeFromTabRoutes(Network.tabRoutes)}
@@ -223,7 +221,7 @@ export class Sidebar extends React.Component<Props> {
             text="Storage"
             isActive={isActiveRoute(storageRoute)}
             isHidden={Storage.tabRoutes.length == 0}
-            url={storageURL({ query })}
+            url={storageURL()}
             icon={<Icon svg="storage"/>}
           >
             {this.renderTreeFromTabRoutes(Storage.tabRoutes)}
@@ -241,14 +239,14 @@ export class Sidebar extends React.Component<Props> {
             text="Events"
             isActive={isActiveRoute(eventRoute)}
             isHidden={!isAllowedResource("events")}
-            url={eventsURL({ query })}
+            url={eventsURL()}
             icon={<Icon material="access_time"/>}
           />
           <SidebarItem
             id="apps"
             text="Apps" // helm charts
             isActive={isActiveRoute(appsRoute)}
-            url={appsURL({ query })}
+            url={appsURL()}
             icon={<Icon material="apps"/>}
           >
             {this.renderTreeFromTabRoutes(Apps.tabRoutes)}
@@ -257,7 +255,7 @@ export class Sidebar extends React.Component<Props> {
             id="users"
             text="Access Control"
             isActive={isActiveRoute(usersManagementRoute)}
-            url={usersManagementURL({ query })}
+            url={usersManagementURL()}
             icon={<Icon material="security"/>}
           >
             {this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}

src/renderer/navigation/page-param.ts

@@ -4,7 +4,7 @@ import { action, makeObservable } from "mobx";
 
 export interface PageParamInit<V = any> {
   name: string;
-  defaultValue?: V;
+  defaultValue?: V; // multi-values param must be defined with array-value, e.g. []
   prefix?: string; // name prefix, for extensions it's `${extension.id}:`
   parse?(value: string | string[]): V; // from URL
   stringify?(value: V): string | string[]; // to URL
@@ -106,10 +106,4 @@ export class PageParam<V = any> {
 
     return `${withPrefix ? "?" : ""}${searchParams}`;
   }
-
-  toObjectParam(): Record<string, V> {
-    return {
-      [this.name]: this.get(),
-    };
-  }
 }

src/renderer/utils/createStorage.ts

@@ -8,12 +8,10 @@ import { StorageHelper } from "./storageHelper";
 import { ClusterStore, getHostedClusterId } from "../../common/cluster-store";
 import logger from "../../main/logger";
 
-const LOG_PREFIX = "[LocalStorageHelper]:";
-
 const storage = observable({
   initialized: false,
   loaded: false,
-  data: {} as { [key: string]: any }, // json-compatible state
+  data: {} as Record<string/*key*/, any>, // json-serializable
 });
 
 /**
@@ -22,6 +20,7 @@ const storage = observable({
  * @param defaultValue
  */
 export function createStorage<T>(key: string, defaultValue: T) {
+  const { logPrefix } = StorageHelper;
   const clusterId = getHostedClusterId();
   const folder = path.resolve((app || remote.app).getPath("userData"), "lens-local-storage");
   const fileName = `${clusterId ?? "app"}.json`;
@@ -39,7 +38,7 @@ export function createStorage<T>(key: string, defaultValue: T) {
       .then(data => storage.data = data)
       .catch(() => null) // ignore empty / non-existing / invalid json files
       .finally(() => {
-        logger.info(`${LOG_PREFIX} loaded local-storage file "${filePath}"`);
+        logger.info(`${logPrefix} loading finished for ${filePath}`);
         storage.loaded = true;
       });
 
@@ -55,20 +54,20 @@ export function createStorage<T>(key: string, defaultValue: T) {
     }
 
     async function saveFile(state: Record<string, any> = {}) {
-      logger.info(`${LOG_PREFIX} saving ${filePath}`);
+      logger.info(`${logPrefix} saving ${filePath}`);
 
       try {
         await fse.ensureDir(folder, { mode: 0o755 });
         await fse.writeJson(filePath, state, { spaces: 2 });
       } catch (error) {
-        logger.error(`${LOG_PREFIX} saving failed: ${error}`, {
+        logger.error(`${logPrefix} saving failed: ${error}`, {
           json: state, jsonFilePath: filePath
         });
       }
     }
 
     function removeFile() {
-      logger.debug(`${LOG_PREFIX} removing ${filePath}`);
+      logger.debug(`${logPrefix} removing ${filePath}`);
       fse.unlink(filePath).catch(Function);
     }
   }

src/renderer/utils/storageHelper.ts

@@ -1,6 +1,6 @@
 // Helper for working with storages (e.g. window.localStorage, NodeJS/file-system, etc.)
 
-import { action, comparer, IObservableValue, makeObservable, observable, toJS, when, } from "mobx";
+import { action, IObservableValue, makeObservable, observable, toJS, when, } from "mobx";
 import produce, { Draft } from "immer";
 import { isEqual, isFunction, isPlainObject } from "lodash";
 import logger from "../../main/logger";
@@ -20,33 +20,30 @@ export interface StorageHelperOptions<T> {
 }
 
 export class StorageHelper<T> {
-  static readonly defaultOptions: Partial<StorageHelperOptions<any>> = {
+  static logPrefix = "[StorageHelper]:";
-    autoInit: true,
-  };
 
+  readonly storage: StorageAdapter<T>;
   private data: IObservableValue<T>;
-  @observable initialized = false;
-  whenReady = when(() => this.initialized);
 
-  public readonly storage: StorageAdapter<T>;
+  @observable initialized = false;
-  public readonly defaultValue: T;
+  whenReady = when(() => this.initialized); // FIXME: invalid, use when() at the place of usage
+
+  get defaultValue(): T {
+    // return as-is since options.defaultValue might be a getter too
+    return this.options.defaultValue;
+  }
 
   constructor(readonly key: string, private options: StorageHelperOptions<T>) {
+    const { storage, defaultValue, autoInit = true } = options;
     makeObservable(this);
 
-    this.storage = options.storage;
+    this.storage = storage;
-    this.defaultValue = options.defaultValue;
+    this.data = observable.box<T>(defaultValue);
-    this.data = observable.box<T>(this.defaultValue, {
-      autoBind: true,
-      deep: true,
-      equals: comparer.structural,
-    });
-
     this.data.observe_(({ newValue, oldValue }) => {
       this.onChange(newValue as T, oldValue as T);
     });
 
-    if (this.options.autoInit) {
+    if (autoInit) {
       this.init();
     }
   }
@@ -63,7 +60,7 @@ export class StorageHelper<T> {
   };
 
   private onError = (error: any): void => {
-    logger.error(`[load]: ${error}`, this);
+    logger.error(`${StorageHelper.logPrefix} loading error: ${error}`, this);
   };
 
   @action
@@ -101,21 +98,21 @@ export class StorageHelper<T> {
 
       this.storage.onChange?.({ value, oldValue, key: this.key });
     } catch (error) {
-      logger.error(`[change]: ${error}`, this, { value, oldValue });
+      logger.error(`${StorageHelper.logPrefix} updating storage: ${error}`, this, { value, oldValue });
     }
   }
 
   get(): T {
-    return this.data.get();
+    const value = this.data.get();
+
+    // return real default-value (not a copy from observable when it's an object, e.g. [])
+    // this will allow to compare values by link with == operator
+    return this.isDefaultValue(value) ? this.defaultValue : value;
   }
 
   @action
   set(value: T) {
-    if (value == null) {
+    this.data.set(value);
-      this.reset();
-    } else {
-      this.data.set(value);
-    }
   }
 
   @action