migration additions -- part 5 (removing @autobind as class-decorator where mobx)

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

src/common/libs-config.ts

@@ -3,12 +3,13 @@
 import { configure } from "mobx";
 import { enableMapSet, setAutoFreeze } from "immer";
 
-// Mobx
+// Mobx, docs: https://mobx.js.org/configuration.html
 configure({
   isolateGlobalState: true, // allow to use different versions of mobx in app & extensions
-  enforceActions: "never", // skip usage of @action for class methods
+  enforceActions: "never", // skip required usage of @action for class methods
+  reactionRequiresObservable: true,
 });
 
 // Immer
-setAutoFreeze(false); // allow to merge observables
-enableMapSet(); // allow to merge Map() and Set()
+setAutoFreeze(false); // allow to merge mobx observables, docs: https://immerjs.github.io/immer/freezing
+enableMapSet(); // allow to merge maps and sets, docs: https://immerjs.github.io/immer/map-set

src/common/utils/autobind.ts

@@ -2,6 +2,7 @@
 // Can be applied to class or single method as @autobind()
 type Constructor<T = {}> = new (...args: any[]) => T;
 
+// FIXME-or-REMOVE: doesn't work as class-decorator with mobx-6 decorators, e.g. @action, @computed, etc.
 export function autobind() {
   return function (target: Constructor | object, prop?: string, descriptor?: PropertyDescriptor) {
     if (target instanceof Function) return bindClass(target);

src/renderer/api/api-manager.ts

@@ -1,10 +1,7 @@
 import type { KubeObjectStore } from "../kube-object.store";
-
-import { action, observable, makeObservable } from "mobx";
-import { autobind } from "../utils";
+import { action, makeObservable, observable } from "mobx";
 import { KubeApi, parseKubeApi } from "./kube-api";
 
-@autobind()
 export class ApiManager {
   private apis = observable.map<string, KubeApi>();
   private stores = observable.map<string, KubeObjectStore>();
@@ -28,7 +25,7 @@ export class ApiManager {
   registerApi(apiBase: string, api: KubeApi) {
     if (!this.apis.has(apiBase)) {
       this.stores.forEach((store) => {
-        if(store.api === api) {
+        if (store.api === api) {
           this.stores.set(apiBase, store);
         }
       });

src/renderer/api/kube-watch-api.ts

@@ -3,11 +3,9 @@
 
 import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";
-
 import plimit from "p-limit";
-import { comparer, IReactionDisposer, observable, reaction, when, makeObservable } from "mobx";
-import { autobind, noop } from "../utils";
-import { KubeApi } from "./kube-api";
+import { comparer, IReactionDisposer, makeObservable, observable, reaction, when } from "mobx";
+import { noop } from "../utils";
 import { KubeJsonApiData } from "./kube-json-api";
 import { isDebugging, isProduction } from "../../common/vars";
 
@@ -29,7 +27,6 @@ export interface IKubeWatchLog {
   cssStyle?: string;
 }
 
-@autobind()
 export class KubeWatchApi {
   @observable context: ClusterContext = null;
 
@@ -39,10 +36,6 @@ export class KubeWatchApi {
     makeObservable(this);
   }
 
-  isAllowedApi(api: KubeApi): boolean {
-    return Boolean(this.context?.cluster.isAllowedResource(api.kind));
-  }
-
   preloadStores(stores: KubeObjectStore[], opts: { namespaces?: string[], loadOnce?: boolean } = {}) {
     const limitRequests = plimit(1); // load stores one by one to allow quick skipping when fast clicking btw pages
     const preloading: Promise<any>[] = [];

src/renderer/components/+apps-helm-charts/helm-chart.store.ts

@@ -1,6 +1,5 @@
 import semver from "semver";
-import { observable, makeObservable } from "mobx";
-import { autobind } from "../../utils";
+import { makeObservable, observable } from "mobx";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { ItemStore } from "../../item.store";
 import flatten from "lodash/flatten";
@@ -10,7 +9,6 @@ export interface IChartVersion {
   version: string;
 }
 
-@autobind()
 export class HelmChartStore extends ItemStore<HelmChart> {
   @observable versions = observable.map<string, IChartVersion[]>();
 

src/renderer/components/+apps-releases/release.store.ts

@@ -1,14 +1,5 @@
 import isEqual from "lodash/isEqual";
-import {
-  action,
-  IReactionDisposer,
-  observable,
-  reaction,
-  toJS,
-  when,
-  makeObservable,
-} from "mobx";
-import { autobind } from "../../utils";
+import { action, IReactionDisposer, makeObservable, observable, reaction, toJS, when, } from "mobx";
 import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayload } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
 import { Secret } from "../../api/endpoints";
@@ -16,7 +7,6 @@ import { secretsStore } from "../+config-secrets/secrets.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { Notifications } from "../notifications";
 
-@autobind()
 export class ReleaseStore extends ItemStore<HelmRelease> {
   @observable releaseSecrets: Secret[] = [];
   @observable secretWatcher: IReactionDisposer;

src/renderer/components/+catalog/catalog-entity.store.ts

@@ -1,8 +1,7 @@
-import { action, computed, IReactionDisposer, observable, reaction, makeObservable } from "mobx";
+import { computed, IReactionDisposer, makeObservable, observable, reaction } from "mobx";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
 import { ItemObject, ItemStore } from "../../item.store";
-import { autobind } from "../../utils";
 import { CatalogCategory } from "../../../common/catalog-entity";
 
 export class CatalogEntityItem implements ItemObject {
@@ -50,13 +49,11 @@ export class CatalogEntityItem implements ItemObject {
     this.entity.onRun(ctx);
   }
 
-  @action
   async onContextMenuOpen(ctx: any) {
     return this.entity.onContextMenuOpen(ctx);
   }
 }
 
-@autobind()
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   @observable activeCategory: CatalogCategory;
 
@@ -77,7 +74,7 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   watch() {
     const disposers: IReactionDisposer[] = [
       reaction(() => this.entities, () => this.loadAll()),
-      reaction(() => this.activeCategory, () => this.loadAll(), { delay: 100})
+      reaction(() => this.activeCategory, () => this.loadAll(), { delay: 100 })
     ];
 
     return () => disposers.forEach((dispose) => dispose());

src/renderer/components/+cluster/cluster-overview.store.ts

@@ -1,7 +1,7 @@
-import { action, observable, reaction, when, makeObservable } from "mobx";
+import { action, makeObservable, observable, reaction, when } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
-import { autobind, createStorage } from "../../utils";
+import { createStorage } from "../../utils";
 import { IMetricsReqParams, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { nodesStore } from "../+nodes/nodes.store";
 import { apiManager } from "../../api/api-manager";
@@ -21,7 +21,6 @@ export interface ClusterOverviewStorageState {
   metricNodeRole: MetricNodeRole,
 }
 
-@autobind()
 export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements ClusterOverviewStorageState {
   api = clusterApi;
 

src/renderer/components/+config-autoscalers/hpa.store.ts

@@ -1,9 +1,7 @@
-import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { HorizontalPodAutoscaler, hpaApi } from "../../api/endpoints/hpa.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class HPAStore extends KubeObjectStore<HorizontalPodAutoscaler> {
   api = hpaApi;
 }

src/renderer/components/+config-limit-ranges/limit-ranges.store.ts

@@ -1,9 +1,7 @@
-import { autobind } from "../../../common/utils/autobind";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 import { LimitRange, limitRangeApi } from "../../api/endpoints/limit-range.api";
 
-@autobind()
 export class LimitRangesStore extends KubeObjectStore<LimitRange> {
   api = limitRangeApi;
 }

src/renderer/components/+config-maps/config-maps.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { ConfigMap, configMapApi } from "../../api/endpoints/configmap.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class ConfigMapsStore extends KubeObjectStore<ConfigMap> {
   api = configMapApi;
 }

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
-import { PodDisruptionBudget, pdbApi } from "../../api/endpoints/poddisruptionbudget.api";
+import { pdbApi, PodDisruptionBudget } from "../../api/endpoints/poddisruptionbudget.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class PodDisruptionBudgetsStore extends KubeObjectStore<PodDisruptionBudget> {
   api = pdbApi;
 }

src/renderer/components/+config-resource-quotas/resource-quotas.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class ResourceQuotasStore extends KubeObjectStore<ResourceQuota> {
   api = resourceQuotaApi;
 }

src/renderer/components/+config-secrets/secrets.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { Secret, secretsApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class SecretsStore extends KubeObjectStore<Secret> {
   api = secretsApi;
 }

src/renderer/components/+custom-resources/crd-resource.store.ts

@@ -1,9 +1,7 @@
-import { autobind } from "../../utils";
 import { KubeApi } from "../../api/kube-api";
 import { KubeObjectStore } from "../../kube-object.store";
 import { KubeObject } from "../../api/kube-object";
 
-@autobind()
 export class CRDResourceStore<T extends KubeObject = any> extends KubeObjectStore<T> {
   api: KubeApi;
 

src/renderer/components/+custom-resources/crd.store.ts

@@ -1,6 +1,5 @@
-import { computed, reaction, toJS, makeObservable } from "mobx";
+import { computed, makeObservable, reaction, toJS } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { apiManager } from "../../api/api-manager";
 import { KubeApi } from "../../api/kube-api";
@@ -18,13 +17,11 @@ function initStore(crd: CustomResourceDefinition) {
   }
 }
 
-@autobind()
 export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
   api = crdApi;
 
   constructor() {
     super();
-
     makeObservable(this);
 
     // auto-init stores for crd-s

src/renderer/components/+events/event.store.ts

@@ -1,14 +1,12 @@
 import groupBy from "lodash/groupBy";
 import compact from "lodash/compact";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { eventApi, KubeEvent } from "../../api/endpoints/events.api";
 import { KubeObject } from "../../api/kube-object";
 import { Pod } from "../../api/endpoints/pods.api";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class EventStore extends KubeObjectStore<KubeEvent> {
   api = eventApi;
   limit = 1000;
@@ -26,7 +24,7 @@ export class EventStore extends KubeObjectStore<KubeEvent> {
 
   getEventsByObject(obj: KubeObject): KubeEvent[] {
     return this.items.filter(evt => {
-      if(obj.kind == "Node") {
+      if (obj.kind == "Node") {
         return obj.getName() == evt.involvedObject.uid && evt.involvedObject.kind == "Node";
       }
 

src/renderer/components/+extensions/extension-install.store.ts

@@ -1,5 +1,5 @@
 import { observable } from "mobx";
-import { autobind, Singleton } from "../../utils";
+import { Singleton } from "../../utils";
 
 interface ExtensionState {
   displayName: string;
@@ -7,7 +7,6 @@ interface ExtensionState {
   state: "installing" | "uninstalling";
 }
 
-@autobind()
 export class ExtensionStateStore extends Singleton {
   extensionState = observable.map<string, ExtensionState>();
 }

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

@@ -1,14 +1,5 @@
-import {
-  action,
-  comparer,
-  computed,
-  IReactionDisposer,
-  IReactionOptions,
-  observable,
-  reaction,
-  makeObservable,
-} from "mobx";
-import { autobind, createStorage } from "../../utils";
+import { action, comparer, computed, IReactionDisposer, IReactionOptions, makeObservable, observable, reaction, } from "mobx";
+import { createStorage } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
 import { createPageParam } from "../../navigation";
@@ -36,7 +27,6 @@ export function getDummyNamespace(name: string) {
   });
 }
 
-@autobind()
 export class NamespaceStore extends KubeObjectStore<Namespace> {
   api = namespacesApi;
 

src/renderer/components/+network-endpoints/endpoints.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { Endpoint, endpointApi } from "../../api/endpoints/endpoint.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class EndpointStore extends KubeObjectStore<Endpoint> {
   api = endpointApi;
 }

src/renderer/components/+network-ingresses/ingress.store.ts

@@ -1,10 +1,8 @@
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class IngressStore extends KubeObjectStore<Ingress> {
   api = ingressApi;
   @observable metrics: IIngressMetrics = null;

src/renderer/components/+network-policies/network-policy.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class NetworkPolicyStore extends KubeObjectStore<NetworkPolicy> {
   api = networkPolicyApi;
 }

src/renderer/components/+network-services/services.store.ts

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { Service, serviceApi } from "../../api/endpoints/service.api";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class ServiceStore extends KubeObjectStore<Service> {
   api = serviceApi;
 }

src/renderer/components/+nodes/nodes.store.ts

@@ -1,11 +1,9 @@
 import { sum } from "lodash";
-import { action, computed, observable, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable } from "mobx";
 import { clusterApi, IClusterMetrics, INodeMetrics, Node, nodesApi } from "../../api/endpoints";
-import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class NodesStore extends KubeObjectStore<Node> {
   api = nodesApi;
 

src/renderer/components/+pod-security-policies/pod-security-policies.store.ts

@@ -1,9 +1,7 @@
 import { PodSecurityPolicy, pspApi } from "../../api/endpoints";
-import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class PodSecurityPoliciesStore extends KubeObjectStore<PodSecurityPolicy> {
   api = pspApi;
 }

src/renderer/components/+storage-classes/storage-class.store.ts

@@ -1,10 +1,8 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { StorageClass, storageClassApi } from "../../api/endpoints/storage-class.api";
 import { apiManager } from "../../api/api-manager";
 import { volumesStore } from "../+storage-volumes/volumes.store";
 
-@autobind()
 export class StorageClassStore extends KubeObjectStore<StorageClass> {
   api = storageClassApi;
 

src/renderer/components/+storage-volume-claims/volume-claim.store.ts

@@ -1,10 +1,8 @@
-import { action, observable, makeObservable } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { IPvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class VolumeClaimStore extends KubeObjectStore<PersistentVolumeClaim> {
   api = pvcApi;
   @observable metrics: IPvcMetrics = null;

src/renderer/components/+storage-volumes/volumes.store.ts

@@ -1,10 +1,8 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { PersistentVolume, persistentVolumeApi } from "../../api/endpoints/persistent-volume.api";
 import { apiManager } from "../../api/api-manager";
 import { StorageClass } from "../../api/endpoints/storage-class.api";
 
-@autobind()
 export class PersistentVolumesStore extends KubeObjectStore<PersistentVolume> {
   api = persistentVolumeApi;
 

src/renderer/components/+user-management-roles-bindings/role-bindings.store.ts

@@ -2,10 +2,8 @@ import difference from "lodash/difference";
 import uniqBy from "lodash/uniqBy";
 import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class RoleBindingsStore extends KubeObjectStore<RoleBinding> {
   api = clusterRoleBindingApi;
 

src/renderer/components/+user-management-roles/roles.store.ts

@@ -1,9 +1,7 @@
 import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
-import { autobind } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class RolesStore extends KubeObjectStore<Role> {
   api = clusterRoleApi;
 

src/renderer/components/+user-management-service-accounts/service-accounts.store.ts

@@ -1,9 +1,7 @@
-import { autobind } from "../../utils";
 import { ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class ServiceAccountsStore extends KubeObjectStore<ServiceAccount> {
   api = serviceAccountsApi;
 

src/renderer/components/+workloads-cronjobs/cronjob.store.ts

@@ -1,10 +1,8 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { CronJob, cronJobApi } from "../../api/endpoints/cron-job.api";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class CronJobStore extends KubeObjectStore<CronJob> {
   api = cronJobApi;
 
@@ -14,8 +12,7 @@ export class CronJobStore extends KubeObjectStore<CronJob> {
     cronJobs.forEach(cronJob => {
       if (cronJob.spec.suspend) {
         status.suspended++;
-      }
-      else {
+      } else {
         status.scheduled++;
       }
     });

src/renderer/components/+workloads-daemonsets/daemonsets.store.ts

@@ -1,11 +1,9 @@
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { DaemonSet, daemonSetApi, IPodMetrics, Pod, podsApi, PodStatus } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
   api = daemonSetApi;
 
@@ -35,11 +33,9 @@ export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
 
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
         status.failed++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
         status.pending++;
-      }
-      else {
+      } else {
         status.running++;
       }
     });

src/renderer/components/+workloads-deployments/deployments.store.ts

@@ -1,11 +1,9 @@
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi;
   @observable metrics: IPodMetrics = null;
@@ -36,11 +34,9 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
 
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
         status.failed++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
         status.pending++;
-      }
-      else {
+      } else {
         status.running++;
       }
     });

src/renderer/components/+workloads-jobs/job.store.ts

@@ -1,11 +1,9 @@
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind } from "../../utils";
 import { Job, jobApi } from "../../api/endpoints/job.api";
 import { CronJob, Pod, PodStatus } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class JobStore extends KubeObjectStore<Job> {
   api = jobApi;
 
@@ -28,14 +26,11 @@ export class JobStore extends KubeObjectStore<Job> {
 
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
         status.failed++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
         status.pending++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.RUNNING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.RUNNING)) {
         status.running++;
-      }
-      else {
+      } else {
         status.succeeded++;
       }
     });

src/renderer/components/+workloads-pods/pods.store.ts

@@ -1,12 +1,11 @@
 import countBy from "lodash/countBy";
-import { action, observable, makeObservable } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
-import { autobind, cpuUnitsToNumber, unitsToBytes } from "../../utils";
+import { cpuUnitsToNumber, unitsToBytes } from "../../utils";
 import { IPodMetrics, Pod, PodMetrics, podMetricsApi, podsApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
 import { WorkloadKubeObject } from "../../api/workload-kube-object";
 
-@autobind()
 export class PodsStore extends KubeObjectStore<Pod> {
   api = podsApi;
 

src/renderer/components/+workloads-replicasets/replicasets.store.ts

@@ -1,12 +1,10 @@
-import { observable, makeObservable } from "mobx";
-import { autobind } from "../../utils";
+import { makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Deployment, IPodMetrics, podsApi, ReplicaSet, replicaSetApi } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 import { PodStatus } from "../../api/endpoints/pods.api";
 
-@autobind()
 export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
   api = replicaSetApi;
   @observable metrics: IPodMetrics = null;
@@ -35,11 +33,9 @@ export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
 
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
         status.failed++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
         status.pending++;
-      }
-      else {
+      } else {
         status.running++;
       }
     });

src/renderer/components/+workloads-statefulsets/statefulset.store.ts

@@ -1,11 +1,9 @@
-import { observable, makeObservable } from "mobx";
-import { autobind } from "../../utils";
+import { makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { IPodMetrics, podsApi, PodStatus, StatefulSet, statefulSetApi } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 
-@autobind()
 export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi;
   @observable metrics: IPodMetrics = null;
@@ -34,11 +32,9 @@ export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
 
       if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
         status.failed++;
-      }
-      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+      } else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
         status.pending++;
-      }
-      else {
+      } else {
         status.running++;
       }
     });

src/renderer/components/dock/create-resource.store.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
 
-@autobind()
 export class CreateResourceStore extends DockTabStore<string> {
   constructor() {
     super({

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

@@ -1,5 +1,5 @@
 import { autorun, observable, reaction, toJS } from "mobx";
-import { autobind, createStorage, StorageHelper } from "../../utils";
+import { createStorage, StorageHelper } from "../../utils";
 import { dockStore, TabId } from "./dock.store";
 
 export interface DockTabStoreOptions {
@@ -9,7 +9,6 @@ export interface DockTabStoreOptions {
 
 export type DockTabStorageState<T> = Record<TabId, T>;
 
-@autobind()
 export class DockTabStore<T> {
   protected storage?: StorageHelper<DockTabStorageState<T>>;
   protected data = observable.map<TabId, T>();

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

@@ -1,5 +1,5 @@
 import MD5 from "crypto-js/md5";
-import { action, computed, IReactionOptions, observable, reaction, makeObservable } from "mobx";
+import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
 import { autobind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
 
@@ -28,7 +28,6 @@ export interface DockStorageState {
   isOpen?: boolean;
 }
 
-@autobind()
 export class DockStore implements DockStorageState {
   readonly minHeight = 100;
   @observable fullSize = false;
@@ -113,6 +112,7 @@ export class DockStore implements DockStorageState {
     return reaction(() => this.selectedTabId, callback, options);
   }
 
+  @autobind()
   hasTabs() {
     return this.tabs.length > 0;
   }
@@ -126,18 +126,18 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action
+  @action.bound
   close() {
     this.isOpen = false;
   }
 
-  @action
+  @action.bound
   toggle() {
     if (this.isOpen) this.close();
     else this.open();
   }
 
-  @action
+  @action.bound
   toggleFillSize() {
     if (!this.isOpen) this.open();
     this.fullSize = !this.fullSize;
@@ -165,7 +165,7 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action
+  @action.bound
   createTab(anonTab: IDockTab, addNumber = true): IDockTab {
     const tabId = MD5(Math.random().toString() + Date.now()).toString();
     const tab: IDockTab = { id: tabId, ...anonTab };
@@ -182,7 +182,7 @@ export class DockStore implements DockStorageState {
     return tab;
   }
 
-  @action
+  @action.bound
   async closeTab(tabId: TabId) {
     const tab = this.getTabById(tabId);
 

src/renderer/components/dock/edit-resource.store.ts

@@ -1,4 +1,4 @@
-import { autobind, noop } from "../../utils";
+import { noop } from "../../utils";
 import { DockTabStore } from "./dock-tab.store";
 import { autorun, IReactionDisposer } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
@@ -11,7 +11,6 @@ export interface EditingResource {
   draft?: string; // edited draft in yaml
 }
 
-@autobind()
 export class EditResourceStore extends DockTabStore<EditingResource> {
   private watchers = new Map<TabId, IReactionDisposer>();
 

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

@@ -1,7 +1,6 @@
-import { autorun, computed, observable, makeObservable } from "mobx";
-
+import { autorun, computed, makeObservable, observable } from "mobx";
 import { IPodLogsQuery, Pod, podsApi } from "../../api/endpoints";
-import { autobind, interval } from "../../utils";
+import { interval } from "../../utils";
 import { dockStore, TabId } from "./dock.store";
 import { isLogsTab, logTabStore } from "./log-tab.store";
 
@@ -9,7 +8,6 @@ type PodLogLine = string;
 
 const logLinesToLoad = 500;
 
-@autobind()
 export class LogStore {
   private refresher = interval(10, () => {
     const id = dockStore.selectedTabId;
@@ -48,7 +46,7 @@ export class LogStore {
 
       this.refresher.start();
       this.podLogs.set(tabId, logs);
-    } catch ({error}) {
+    } catch ({ error }) {
       const message = [
         `Failed to load logs: ${error.message}`,
         `Reason: ${error.reason} (${error.code})`
@@ -116,7 +114,6 @@ export class LogStore {
     return logs ? logs.length : 0;
   }
 
-
   /**
    * Returns logs with timestamps for selected tab
    */

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

@@ -1,5 +1,4 @@
-import { autorun, observable } from "mobx";
-import { autobind } from "../../utils";
+import { autorun, makeObservable, observable } from "mobx";
 import { Terminal } from "./terminal";
 import { TerminalApi } from "../../api/terminal-api";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
@@ -21,7 +20,6 @@ export function createTerminalTab(tabParams: Partial<ITerminalTab> = {}) {
   });
 }
 
-@autobind()
 export class TerminalStore {
   protected terminals = new Map<TabId, Terminal>();
   protected connections = observable.map<TabId, TerminalApi>();

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -269,7 +269,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   @autobind()
   removeItemsDialog() {
     const { customizeRemoveDialog, store } = this.props;
-    const { selectedItems, removeSelectedItems } = store;
+    const { selectedItems } = store;
     const visibleMaxNamesCount = 5;
     const selectedNames = selectedItems.map(ns => ns.getName()).slice(0, visibleMaxNamesCount).join(", ");
     const dialogCustomProps = customizeRemoveDialog ? customizeRemoveDialog(selectedItems) : {};
@@ -279,7 +279,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     const message = selectedCount <= 1 ? <p>Remove item <b>{selectedNames}</b>?</p> : <p>Remove <b>{selectedCount}</b> items <b>{selectedNames}</b>{tail}?</p>;
 
     ConfirmDialog.open({
-      ok: removeSelectedItems,
+      ok: () => store.removeSelectedItems(),
       labelOk: "Remove",
       message,
       ...dialogCustomProps,

src/renderer/components/item-object-list/page-filters.store.ts

@@ -1,5 +1,4 @@
-import { computed, observable, reaction, makeObservable } from "mobx";
-import { autobind } from "../../utils";
+import { computed, makeObservable, observable, reaction } from "mobx";
 import { searchUrlParam } from "../input/search-input-url";
 
 export enum FilterType {
@@ -12,7 +11,6 @@ export interface Filter {
   value: string;
 }
 
-@autobind()
 export class PageFiltersStore {
   protected filters = observable.array<Filter>([], { deep: false });
   protected isDisabled = observable.map<FilterType, boolean>();

src/renderer/components/notifications/notifications.store.tsx

@@ -18,10 +18,9 @@ export interface Notification {
   message: NotificationMessage;
   status?: NotificationStatus;
   timeout?: number; // auto-hiding timeout in milliseconds, 0 = no hide
-  onClose?(): void; // additonal logic on when the notification times out or is closed by the "x"
+  onClose?(): void; // additional logic on when the notification times out or is closed by the "x"
 }
 
-@autobind()
 export class NotificationsStore {
   public notifications = observable.array<Notification>([], { deep: false });
 
@@ -35,7 +34,7 @@ export class NotificationsStore {
     return this.notifications.find(item => item.id === id) ?? null;
   }
 
-  addAutoHideTimer(id: NotificationId) {
+  addAutoHideTimer = (id: NotificationId) => {
     const notification = this.getById(id);
 
     if (!notification) return;
@@ -48,14 +47,14 @@ export class NotificationsStore {
     }
   }
 
-  removeAutoHideTimer(id: NotificationId) {
+  removeAutoHideTimer = (id: NotificationId) => {
     if (this.autoHideTimers.has(id)) {
       clearTimeout(this.autoHideTimers.get(id));
       this.autoHideTimers.delete(id);
     }
   }
 
-  @action
+  @action.bound
   add(notification: Notification): () => void {
     const id = notification.id ?? (
       notification.id = uniqueId("notification_")
@@ -72,7 +71,7 @@ export class NotificationsStore {
     return () => this.remove(id);
   }
 
-  @action
+  @action.bound
   remove(id: NotificationId) {
     this.removeAutoHideTimer(id);
     this.notifications.remove(this.getById(id));

src/renderer/item.store.ts

@@ -1,13 +1,11 @@
-import orderBy from "lodash/orderBy";
-import { autobind, noop } from "./utils";
-import { action, computed, observable, toJS, when, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable, toJS, when } from "mobx";
+import { noop, orderBy } from "lodash";
 
 export interface ItemObject {
   getId(): string;
   getName(): string;
 }
 
-@autobind()
 export abstract class ItemStore<T extends ItemObject = ItemObject> {
   abstract loadAll(...args: any[]): Promise<void | T[]>;
 

src/renderer/kube-object.store.ts

@@ -1,7 +1,5 @@
 import type { ClusterContext } from "./components/context";
-
-import { action, computed, observable, reaction, when, makeObservable } from "mobx";
-import { autobind } from "./utils";
+import { action, computed, makeObservable, observable, reaction, when } from "mobx";
 import { KubeObject, KubeStatus } from "./api/kube-object";
 import { IKubeWatchEvent } from "./api/kube-watch-api";
 import { ItemStore } from "./item.store";
@@ -14,7 +12,6 @@ export interface KubeObjectStoreLoadingParams {
   api?: KubeApi;
 }
 
-@autobind()
 export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemStore<T> {
   @observable static defaultContext: ClusterContext; // TODO: support multiple cluster contexts
 
@@ -111,8 +108,8 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
       }
 
       const isLoadingAll = this.context.allNamespaces?.length > 1
-                            && this.context.cluster.accessibleNamespaces.length === 0
-                            && this.context.allNamespaces.every(ns => namespaces.includes(ns));
+        && this.context.cluster.accessibleNamespaces.length === 0
+        && this.context.allNamespaces.every(ns => namespaces.includes(ns));
 
       if (isLoadingAll) {
         this.loadedNamespaces = [];
@@ -316,7 +313,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
         if (timedRetry) clearTimeout(timedRetry);
         // resourceVersion has gone, let's try to reload
         timedRetry = setTimeout(() => {
-          (namespace === "" ? this.loadAll({ merge: false }) : this.loadAll({namespaces: [namespace]})).then(() => {
+          (namespace === "" ? this.loadAll({ merge: false }) : this.loadAll({ namespaces: [namespace] })).then(() => {
             api.watch({
               namespace,
               abortController,
@@ -324,7 +321,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
             });
           });
         }, 1000);
-      } else if(error) { // not sure what to do, best to retry
+      } else if (error) { // not sure what to do, best to retry
         if (timedRetry) clearTimeout(timedRetry);
 
         timedRetry = setTimeout(() => {
@@ -348,7 +345,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
     });
   }
 
-  @action
+  @action.bound
   protected updateFromEventsBuffer() {
     const items = this.items.toJSON();
 

src/renderer/theme.store.ts

@@ -1,5 +1,4 @@
-import { computed, observable, reaction, makeObservable } from "mobx";
-import { autobind } from "./utils";
+import { computed, makeObservable, observable, reaction } from "mobx";
 import { userStore } from "../common/user-store";
 import logger from "../main/logger";
 
@@ -19,7 +18,6 @@ export interface Theme {
   author?: string;
 }
 
-@autobind()
 export class ThemeStore {
   protected styles: HTMLStyleElement;
 
@@ -44,6 +42,7 @@ export class ThemeStore {
 
   constructor() {
     makeObservable(this);
+
     // auto-apply active theme
     reaction(() => this.activeThemeId, async themeId => {
       try {