removed common/utils/autobind

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

src/common/search-store.ts

@@ -1,6 +1,5 @@
-import { action, computed, observable, reaction, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { dockStore } from "../renderer/components/dock/dock.store";
-import { autobind } from "../renderer/utils";
 
 export class SearchStore {
   /**
@@ -108,15 +107,13 @@ export class SearchStore {
     return prev;
   }
 
-  @autobind
-  public setNextOverlayActive(): void {
+  public setNextOverlayActive = (): void => {
     this.activeOverlayIndex = this.getNextOverlay(true);
-  }
+  };
 
-  @autobind
-  public setPrevOverlayActive(): void {
+  public setPrevOverlayActive = (): void => {
     this.activeOverlayIndex = this.getPrevOverlay(true);
-  }
+  };
 
   /**
    * Gets line index of where active overlay is located
@@ -139,12 +136,11 @@ export class SearchStore {
    * @param line Index of the line where overlay is located
    * @param occurrence Number of the overlay within one line
    */
-  @autobind
-  public isActiveOverlay(line: number, occurrence: number): boolean {
+  public isActiveOverlay = (line: number, occurrence: number): boolean => {
     const firstLineIndex = this.occurrences.findIndex(item => item === line);
 
     return firstLineIndex + occurrence === this.activeOverlayIndex;
-  }
+  };
 
   @action
   private reset(): void {

src/common/utils/autobind.ts

@@ -1,47 +0,0 @@
-// Auto-binding class method(s) to proper "this"-context.
-// Useful when calling methods after object-destruction or when method copied to scope variable.
-
-type Constructor<T> = new (...args: any[]) => object;
-
-export function autobind<T extends Constructor<any>>(target: T): T;
-export function autobind<T extends object>(target: T, prop?: PropertyKey, descriptor?: PropertyDescriptor): PropertyDescriptor;
-
-export function autobind(target: any, prop?: PropertyKey, descriptor?: PropertyDescriptor) {
-  if (typeof target === "function") {
-    return bindClass(target);
-  }
-  if (typeof descriptor === "object") {
-    return bindMethod(target, prop, descriptor);
-  }
-}
-
-export function bindClass<T extends Constructor<T>>(target: T): T {
-  return new Proxy(target, {
-    construct(target, args: any[], newTarget?: any) {
-      const instance = Reflect.construct(target, args, newTarget);
-      const protoDescriptors = Object.entries(Object.getOwnPropertyDescriptors(target.prototype));
-      protoDescriptors.forEach(([prop, descriptor]) => bindMethod(instance, prop, descriptor));
-      return instance;
-    }
-  })
-}
-
-export function bindMethod<T extends object>(target: T, prop: PropertyKey, descriptor: PropertyDescriptor): PropertyDescriptor {
-  const originalMethod = descriptor.value;
-
-  if (typeof originalMethod === "function") {
-    const boundDescriptor: PropertyDescriptor = {
-      configurable: descriptor.configurable,
-      enumerable: descriptor.enumerable,
-      get() {
-        return (...args: any[]) => Reflect.apply(originalMethod, this, args);
-      },
-      set(value: any) {
-        Object.defineProperty(target, prop, { ...descriptor, value });
-      }
-    };
-
-    Object.defineProperty(target, prop, boundDescriptor);
-    return boundDescriptor;
-  }
-}

src/common/utils/index.ts

@@ -3,7 +3,6 @@
 export const noop: any = () => { /* empty */ };
 
 export * from "./app-version";
-export * from "./autobind";
 export * from "./base64";
 export * from "./camelCase";
 export * from "./toJS";

src/main/window-manager.ts

@@ -1,5 +1,5 @@
 import type { ClusterId } from "../common/cluster-store";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { app, BrowserWindow, dialog, shell, webContents } from "electron";
 import windowStateKeeper from "electron-window-state";
 import { appEventBus } from "../common/event-bus";
@@ -10,7 +10,7 @@ import { Singleton } from "../common/utils";
 import { ClusterFrameInfo, clusterFrameMap } from "../common/cluster-frames";
 import { IpcRendererNavigationEvents } from "../renderer/navigation/events";
 import logger from "./logger";
-import { productName } from "../common/vars";
+import { isDevelopment, productName } from "../common/vars";
 
 export class WindowManager extends Singleton {
   protected mainWindow: BrowserWindow;
@@ -59,7 +59,7 @@ export class WindowManager extends Singleton {
           nodeIntegration: true,
           nodeIntegrationInSubFrames: true,
           enableRemoteModule: true,
-        },
+        }
       });
       this.windowState.manage(this.mainWindow);
 
@@ -84,6 +84,7 @@ export class WindowManager extends Singleton {
           shell.openExternal(url);
         })
         .on("dom-ready", () => {
+          this.mainWindow.webContents.openDevTools({ mode: "right", activate: isDevelopment });
           appEventBus.emit({ name: "app", action: "dom-ready" });
         })
         .on("did-fail-load", (_event, code, desc) => {

src/renderer/api/api-manager.ts

@@ -1,9 +1,7 @@
 import type { KubeObjectStore } from "../kube-object.store";
 import { action, makeObservable, observable } from "mobx";
 import { KubeApi, parseKubeApi } from "./kube-api";
-import { autobind } from "../../common/utils";
 
-@autobind
 export class ApiManager {
   private apis = observable.map<string, KubeApi>();
   private stores = observable.map<string, KubeObjectStore>();

src/renderer/api/endpoints/cluster-role.api.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { Role } from "./role.api";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class ClusterRole extends Role {
   static kind = "ClusterRole";
   static namespaced = false;

src/renderer/api/endpoints/configmap.api.ts

@@ -1,11 +1,9 @@
 import { KubeObject } from "../kube-object";
 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";
   static namespaced = true;

src/renderer/api/endpoints/cron-job.api.ts

@@ -2,7 +2,6 @@ import moment from "moment";
 import { KubeObject } from "../kube-object";
 import { IPodContainer } from "./pods.api";
 import { formatDuration } from "../../utils/formatDuration";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
 export class CronJobApi extends KubeApi<CronJob> {
@@ -37,7 +36,6 @@ export class CronJobApi extends KubeApi<CronJob> {
   }
 }
 
-@autobind
 export class CronJob extends KubeObject {
   static kind = "CronJob";
   static namespaced = true;

src/renderer/api/endpoints/daemon-set.api.ts

@@ -1,10 +1,8 @@
 import get from "lodash/get";
 import { IPodContainer } from "./pods.api";
 import { IAffinity, WorkloadKubeObject } from "../workload-kube-object";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class DaemonSet extends WorkloadKubeObject {
   static kind = "DaemonSet";
   static namespaced = true;

src/renderer/api/endpoints/deployment.api.ts

@@ -1,7 +1,6 @@
 import moment from "moment";
 
 import { IAffinity, WorkloadKubeObject } from "../workload-kube-object";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
 export class DeploymentApi extends KubeApi<Deployment> {
@@ -66,7 +65,6 @@ interface IContainerProbe {
   failureThreshold?: number;
 }
 
-@autobind
 export class Deployment extends WorkloadKubeObject {
   static kind = "Deployment";
   static namespaced = true;

src/renderer/api/endpoints/endpoint.api.ts

@@ -1,4 +1,3 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
@@ -100,7 +99,6 @@ export class EndpointSubset implements IEndpointSubset {
   }
 }
 
-@autobind
 export class Endpoint extends KubeObject {
   static kind = "Endpoints";
   static namespaced = true;

src/renderer/api/endpoints/events.api.ts

@@ -1,10 +1,8 @@
 import moment from "moment";
 import { KubeObject } from "../kube-object";
 import { formatDuration } from "../../utils/formatDuration";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class KubeEvent extends KubeObject {
   static kind = "Event";
   static namespaced = true;

src/renderer/api/endpoints/helm-charts.api.ts

@@ -1,7 +1,6 @@
 import { compile } from "path-to-regexp";
 import { apiBase } from "../index";
 import { stringify } from "querystring";
-import { autobind } from "../../utils";
 
 export type RepoHelmChartList = Record<string, HelmChart[]>;
 export type HelmChartList = Record<string, RepoHelmChartList>;
@@ -62,7 +61,6 @@ export async function getChartValues(repo: string, name: string, version: string
   return apiBase.get<string>(`/v2/charts/${repo}/${name}/values?${stringify({ version })}`);
 }
 
-@autobind
 export class HelmChart {
   constructor(data: any) {
     Object.assign(this, data);

src/renderer/api/endpoints/helm-releases.api.ts

@@ -1,6 +1,6 @@
 import jsYaml from "js-yaml";
 import { compile } from "path-to-regexp";
-import { autobind, formatDuration } from "../../utils";
+import { formatDuration } from "../../utils";
 import capitalize from "lodash/capitalize";
 import { apiBase } from "../index";
 import { helmChartStore } from "../../components/+apps-helm-charts/helm-chart.store";
@@ -134,7 +134,6 @@ export async function rollbackRelease(name: string, namespace: string, revision:
   });
 }
 
-@autobind
 export class HelmRelease implements ItemObject {
   constructor(data: any) {
     Object.assign(this, data);

src/renderer/api/endpoints/ingress.api.ts

@@ -1,5 +1,4 @@
 import { KubeObject } from "../kube-object";
-import { autobind } from "../../utils";
 import { IMetrics, metricsApi } from "./metrics.api";
 import { KubeApi } from "../kube-api";
 
@@ -61,7 +60,6 @@ export const getBackendServiceNamePort = (backend: IIngressBackend) => {
   return { serviceName, servicePort };
 };
 
-@autobind
 export class Ingress extends KubeObject {
   static kind = "Ingress";
   static namespaced = true;

src/renderer/api/endpoints/job.api.ts

@@ -1,11 +1,9 @@
 import get from "lodash/get";
-import { autobind } from "../../utils";
 import { IAffinity, WorkloadKubeObject } from "../workload-kube-object";
 import { IPodContainer } from "./pods.api";
 import { KubeApi } from "../kube-api";
 import { JsonApiParams } from "../json-api";
 
-@autobind
 export class Job extends WorkloadKubeObject {
   static kind = "Job";
   static namespaced = true;

src/renderer/api/endpoints/limit-range.api.ts

@@ -1,6 +1,5 @@
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
-import { autobind } from "../../utils";
 
 export enum LimitType {
   CONTAINER = "Container",
@@ -29,7 +28,6 @@ export interface LimitRangeItem extends LimitRangeParts {
   type: string
 }
 
-@autobind
 export class LimitRange extends KubeObject {
   static kind = "LimitRange";
   static namespaced = true;

src/renderer/api/endpoints/namespaces.api.ts

@@ -1,13 +1,11 @@
 import { KubeApi } from "../kube-api";
 import { KubeObject } from "../kube-object";
-import { autobind } from "../../utils";
 
 export enum NamespaceStatus {
   ACTIVE = "Active",
   TERMINATING = "Terminating",
 }
 
-@autobind
 export class Namespace extends KubeObject {
   static kind = "Namespace";
   static namespaced = false;

src/renderer/api/endpoints/network-policy.api.ts

@@ -1,5 +1,4 @@
 import { KubeObject } from "../kube-object";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
 export interface IPolicyIpBlock {
@@ -35,7 +34,6 @@ export interface IPolicyEgress {
   }[];
 }
 
-@autobind
 export class NetworkPolicy extends KubeObject {
   static kind = "NetworkPolicy";
   static namespaced = true;

src/renderer/api/endpoints/nodes.api.ts

@@ -1,5 +1,5 @@
 import { KubeObject } from "../kube-object";
-import { autobind, cpuUnitsToNumber, unitsToBytes } from "../../utils";
+import { cpuUnitsToNumber, unitsToBytes } from "../../utils";
 import { IMetrics, metricsApi } from "./metrics.api";
 import { KubeApi } from "../kube-api";
 
@@ -28,7 +28,6 @@ export interface INodeMetrics<T = IMetrics> {
   fsSize: T;
 }
 
-@autobind
 export class Node extends KubeObject {
   static kind = "Node";
   static namespaced = false;

src/renderer/api/endpoints/persistent-volume-claims.api.ts

@@ -1,5 +1,4 @@
 import { KubeObject } from "../kube-object";
-import { autobind } from "../../utils";
 import { IMetrics, metricsApi } from "./metrics.api";
 import { Pod } from "./pods.api";
 import { KubeApi } from "../kube-api";
@@ -21,7 +20,6 @@ export interface IPvcMetrics<T = IMetrics> {
   diskCapacity: T;
 }
 
-@autobind
 export class PersistentVolumeClaim extends KubeObject {
   static kind = "PersistentVolumeClaim";
   static namespaced = true;

src/renderer/api/endpoints/persistent-volume.api.ts

@@ -1,9 +1,7 @@
 import { KubeObject } from "../kube-object";
 import { unitsToBytes } from "../../utils/convertMemory";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class PersistentVolume extends KubeObject {
   static kind = "PersistentVolume";
   static namespaced = false;

src/renderer/api/endpoints/poddisruptionbudget.api.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class PodDisruptionBudget extends KubeObject {
   static kind = "PodDisruptionBudget";
   static namespaced = true;

src/renderer/api/endpoints/pods.api.ts

@@ -1,5 +1,4 @@
 import { IAffinity, WorkloadKubeObject } from "../workload-kube-object";
-import { autobind } from "../../utils";
 import { IMetrics, metricsApi } from "./metrics.api";
 import { KubeApi } from "../kube-api";
 
@@ -181,7 +180,6 @@ export interface IPodContainerStatus {
   started?: boolean;
 }
 
-@autobind
 export class Pod extends WorkloadKubeObject {
   static kind = "Pod";
   static namespaced = true;

src/renderer/api/endpoints/podsecuritypolicy.api.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class PodSecurityPolicy extends KubeObject {
   static kind = "PodSecurityPolicy";
   static namespaced = false;

src/renderer/api/endpoints/replica-set.api.ts

@@ -1,5 +1,4 @@
 import get from "lodash/get";
-import { autobind } from "../../utils";
 import { WorkloadKubeObject } from "../workload-kube-object";
 import { IPodContainer, Pod } from "./pods.api";
 import { KubeApi } from "../kube-api";
@@ -27,7 +26,6 @@ export class ReplicaSetApi extends KubeApi<ReplicaSet> {
   }
 }
 
-@autobind
 export class ReplicaSet extends WorkloadKubeObject {
   static kind = "ReplicaSet";
   static namespaced = true;

src/renderer/api/endpoints/role-binding.api.ts

@@ -1,4 +1,3 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
@@ -9,7 +8,6 @@ export interface IRoleBindingSubject {
   apiGroup?: string;
 }
 
-@autobind
 export class RoleBinding extends KubeObject {
   static kind = "RoleBinding";
   static namespaced = true;

src/renderer/api/endpoints/secret.api.ts

@@ -1,6 +1,5 @@
 import { KubeObject } from "../kube-object";
 import { KubeJsonApiData } from "../kube-json-api";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
 export enum SecretType {
@@ -19,7 +18,6 @@ export interface ISecretRef {
   name: string;
 }
 
-@autobind
 export class Secret extends KubeObject {
   static kind = "Secret";
   static namespaced = true;

src/renderer/api/endpoints/service-accounts.api.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class ServiceAccount extends KubeObject {
   static kind = "ServiceAccount";
   static namespaced = true;

src/renderer/api/endpoints/service.api.ts

@@ -1,4 +1,3 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
@@ -29,7 +28,6 @@ export class ServicePort implements IServicePort {
   }
 }
 
-@autobind
 export class Service extends KubeObject {
   static kind = "Service";
   static namespaced = true;

src/renderer/api/endpoints/stateful-set.api.ts

@@ -1,7 +1,6 @@
 import get from "lodash/get";
 import { IPodContainer } from "./pods.api";
 import { IAffinity, WorkloadKubeObject } from "../workload-kube-object";
-import { autobind } from "../../utils";
 import { KubeApi } from "../kube-api";
 
 export class StatefulSetApi extends KubeApi<StatefulSet> {
@@ -27,7 +26,6 @@ export class StatefulSetApi extends KubeApi<StatefulSet> {
   }
 }
 
-@autobind
 export class StatefulSet extends WorkloadKubeObject {
   static kind = "StatefulSet";
   static namespaced = true;

src/renderer/api/endpoints/storage-class.api.ts

@@ -1,8 +1,6 @@
-import { autobind } from "../../utils";
 import { KubeObject } from "../kube-object";
 import { KubeApi } from "../kube-api";
 
-@autobind
 export class StorageClass extends KubeObject {
   static kind = "StorageClass";
   static namespaced = false;

src/renderer/api/kube-object.ts

@@ -2,7 +2,7 @@
 
 import moment from "moment";
 import { KubeJsonApiData, KubeJsonApiDataList, KubeJsonApiListMetadata, KubeJsonApiMetadata } from "./kube-json-api";
-import { autobind, formatDuration } from "../utils";
+import { formatDuration } from "../utils";
 import { ItemObject } from "../item.store";
 import { apiKube } from "./index";
 import { JsonApiParams } from "./json-api";
@@ -66,7 +66,6 @@ export class KubeStatus {
 
 export type IKubeMetaField = keyof IKubeObjectMetadata;
 
-@autobind
 export class KubeObject implements ItemObject {
   static readonly kind: string;
   static readonly namespaced: boolean;

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

@@ -5,7 +5,7 @@ import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";
 import plimit from "p-limit";
 import { comparer, IReactionDisposer, makeObservable, observable, reaction, when } from "mobx";
-import { autobind, noop } from "../utils";
+import { noop } from "../utils";
 import { KubeJsonApiData } from "./kube-json-api";
 import { isDebugging, isProduction } from "../../common/vars";
 
@@ -27,7 +27,6 @@ export interface IKubeWatchLog {
   cssStyle?: string;
 }
 
-@autobind
 export class KubeWatchApi {
   @observable context: ClusterContext = null;
 

src/renderer/api/terminal-api.ts

@@ -1,5 +1,5 @@
 import { stringify } from "querystring";
-import { autobind, base64, EventEmitter } from "../utils";
+import { base64, EventEmitter } from "../utils";
 import { WebSocketApi } from "./websocket-api";
 import isEqual from "lodash/isEqual";
 import { isDevelopment } from "../../common/vars";
@@ -85,8 +85,7 @@ export class TerminalApi extends WebSocketApi {
     this.onReady.removeAllListeners();
   }
 
-  @autobind
-  protected _onReady(data: string) {
+  protected _onReady = (data: string) => {
     if (!data) return;
     this.isReady = true;
     this.onReady.emit();
@@ -95,7 +94,7 @@ export class TerminalApi extends WebSocketApi {
     this.onData.emit(data); // re-emit data
 
     return false; // prevent calling rest of listeners
-  }
+  };
 
   reconnect() {
     super.reconnect();

src/renderer/components/+apps-helm-charts/helm-chart-details.tsx

@@ -2,10 +2,10 @@ import "./helm-chart-details.scss";
 
 import React, { Component } from "react";
 import { getChartDetails, HelmChart } from "../../api/endpoints/helm-charts.api";
-import { observable, autorun, makeObservable } from "mobx";
+import { autorun, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
-import { autobind, stopPropagation } from "../../utils";
+import { stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
@@ -51,8 +51,7 @@ export class HelmChartDetails extends Component<Props> {
       });
   });
 
-  @autobind
-  async onVersionChange({ value: version }: SelectOption<string>) {
+  async onVersionChange(version: string) {
     this.selectedChart = this.chartVersions.find(chart => chart.version === version);
     this.readme = null;
 
@@ -60,7 +59,7 @@ export class HelmChartDetails extends Component<Props> {
       this.abortController?.abort();
       this.abortController = new AbortController();
       const { chart: { name, repo } } = this.props;
-      const { readme } = await getChartDetails(repo, name, { version, reqInit: { signal: this.abortController.signal }});
+      const { readme } = await getChartDetails(repo, name, { version, reqInit: { signal: this.abortController.signal } });
 
       this.readme = readme;
     } catch (error) {
@@ -68,14 +67,13 @@ export class HelmChartDetails extends Component<Props> {
     }
   }
 
-  @autobind
   install() {
     createInstallChartTab(this.selectedChart);
     this.props.hideDetails();
   }
 
   renderIntroduction() {
-    const { selectedChart, chartVersions, onVersionChange } = this;
+    const { selectedChart, chartVersions } = this;
     const placeholder = require("./helm-placeholder.svg");
 
     return (
@@ -88,7 +86,7 @@ export class HelmChartDetails extends Component<Props> {
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between">
             {selectedChart.getDescription()}
-            <Button primary label="Install" onClick={this.install} />
+            <Button primary label="Install" onClick={() => this.install()}/>
           </div>
           <DrawerItem name="Version" className="version" onClick={stopPropagation}>
             <Select
@@ -96,7 +94,7 @@ export class HelmChartDetails extends Component<Props> {
               menuPortalTarget={null}
               options={chartVersions.map(chart => chart.version)}
               value={selectedChart.getVersion()}
-              onChange={onVersionChange}
+              onChange={({ value }: SelectOption<string>) => this.onVersionChange(value)}
             />
           </DrawerItem>
           <DrawerItem name="Home">
@@ -109,7 +107,7 @@ export class HelmChartDetails extends Component<Props> {
           </DrawerItem>
           {selectedChart.getKeywords().length > 0 && (
             <DrawerItem name="Keywords" labelsOnly>
-              {selectedChart.getKeywords().map(key => <Badge key={key} label={key} />)}
+              {selectedChart.getKeywords().map(key => <Badge key={key} label={key}/>)}
             </DrawerItem>
           )}
         </div>
@@ -119,19 +117,19 @@ export class HelmChartDetails extends Component<Props> {
 
   renderReadme() {
     if (this.readme === null) {
-      return <Spinner center />;
+      return <Spinner center/>;
     }
 
     return (
       <div className="chart-description">
-        <MarkdownViewer markdown={this.readme} />
+        <MarkdownViewer markdown={this.readme}/>
       </div>
     );
   }
 
   renderContent() {
     if (!this.selectedChart) {
-      return <Spinner center />;
+      return <Spinner center/>;
     }
 
     if (this.error) {

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

@@ -3,14 +3,12 @@ import { makeObservable, observable } from "mobx";
 import { getChartDetails, HelmChart, listCharts } from "../../api/endpoints/helm-charts.api";
 import { ItemStore } from "../../item.store";
 import flatten from "lodash/flatten";
-import { autobind } from "../../../common/utils";
 
 export interface IChartVersion {
   repo: string;
   version: string;
 }
 
-@autobind
 export class HelmChartStore extends ItemStore<HelmChart> {
   @observable versions = observable.map<string, IChartVersion[]>();
 

src/renderer/components/+apps-releases/release-menu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { HelmRelease } from "../../api/endpoints/helm-releases.api";
-import { autobind, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { releaseStore } from "./release.store";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
@@ -14,23 +14,20 @@ interface Props extends MenuActionsProps {
 }
 
 export class HelmReleaseMenu extends React.Component<Props> {
-  @autobind
-  remove() {
+  remove = () => {
     return releaseStore.remove(this.props.release);
-  }
+  };
 
-  @autobind
-  upgrade() {
+  upgrade = () => {
     const { release, hideDetails } = this.props;
 
     createUpgradeChartTab(release);
     hideDetails && hideDetails();
-  }
+  };
 
-  @autobind
-  rollback() {
+  rollback = () => {
     ReleaseRollbackDialog.open(this.props.release);
-  }
+  };
 
   renderContent() {
     const { release, toolbar } = this.props;

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

@@ -6,9 +6,8 @@ import { Secret } from "../../api/endpoints";
 import { secretsStore } from "../+config-secrets/secrets.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { Notifications } from "../notifications";
-import { autobind, toJS } from "../../../common/utils";
+import { toJS } from "../../../common/utils";
 
-@autobind
 export class ReleaseStore extends ItemStore<HelmRelease> {
   releaseSecrets = observable.map<string, Secret>();
 

src/renderer/components/+catalog/catalog-add-button.tsx

@@ -4,7 +4,6 @@ import { SpeedDial, SpeedDialAction } from "@material-ui/lab";
 import { Icon } from "../icon";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { makeObservable, observable, reaction } from "mobx";
-import { autobind } from "../../../common/utils";
 import { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityContextMenu } from "../../api/catalog-entity";
 import { EventEmitter } from "events";
 import { navigate } from "../../navigation";
@@ -40,22 +39,19 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
     ]);
   }
 
-  @autobind
-  onOpen() {
+  onOpen = () => {
     this.isOpen = true;
-  }
+  };
 
-  @autobind
-  onClose() {
+  onClose = () => {
     this.isOpen = false;
-  }
+  };
 
-  @autobind
-  onButtonClick() {
+  onButtonClick = () => {
     if (this.menuItems.length == 1) {
       this.menuItems[0].onClick();
     }
-  }
+  };
 
   render() {
     if (this.menuItems.length === 0) {

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

@@ -3,9 +3,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
 import { ItemObject, ItemStore } from "../../item.store";
 import { CatalogCategory } from "../../../common/catalog";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class CatalogEntityItem implements ItemObject {
   constructor(public entity: CatalogEntity) {
     makeObservable(this);
@@ -65,7 +63,6 @@ export class CatalogEntityItem implements ItemObject {
   }
 }
 
-@autobind
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   @observable activeCategory?: CatalogCategory;
 

src/renderer/components/+catalog/catalog.tsx

@@ -12,7 +12,6 @@ import { Icon } from "../icon";
 import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
 import { HotbarStore } from "../../../common/hotbar-store";
-import { autobind } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Tab, Tabs } from "../tabs";
 import { catalogCategoryRegistry } from "../../../common/catalog";
@@ -101,19 +100,18 @@ export class Catalog extends React.Component {
             data-testid="*-tab"
           />
           {this.categories.map(category => (
-              <Tab
-                value={category.getId()}
-                key={category.getId()} label={category.metadata.name} data-testid={`${category.getId()}-tab`}
-              />
-            ))
+            <Tab
+              value={category.getId()}
+              key={category.getId()} label={category.metadata.name} data-testid={`${category.getId()}-tab`}
+            />
+          ))
           }
         </div>
       </Tabs>
     );
   }
 
-  @autobind
-  renderItemMenu(item: CatalogEntityItem) {
+  renderItemMenu = (item: CatalogEntityItem) => {
     const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source);
 
     return (
@@ -122,14 +120,14 @@ export class Catalog extends React.Component {
           <Icon material="add" small interactive={true} title="Add to hotbar"/> Add to Hotbar
         </MenuItem>
         {menuItems.map((menuItem, index) => (
-            <MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
-              <Icon material={menuItem.icon} small interactive={true} title={menuItem.title} /> {menuItem.title}
-            </MenuItem>
-          ))
+          <MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
+            <Icon material={menuItem.icon} small interactive={true} title={menuItem.title}/> {menuItem.title}
+          </MenuItem>
+        ))
         }
       </MenuActions>
     );
-  }
+  };
 
   render() {
     if (!this.catalogEntityStore) {

src/renderer/components/+cluster/cluster-issues.tsx

@@ -8,7 +8,7 @@ import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { nodesStore } from "../+nodes/nodes.store";
 import { eventStore } from "../+events/event.store";
-import { autobind, cssNames, prevDefault } from "../../utils";
+import { cssNames, prevDefault } from "../../utils";
 import { ItemObject } from "../../item.store";
 import { Spinner } from "../spinner";
 import { ThemeStore } from "../../theme.store";
@@ -87,8 +87,7 @@ export class ClusterIssues extends React.Component<Props> {
     return warnings;
   }
 
-  @autobind
-  getTableRow(uid: string) {
+  getTableRow = (uid: string) => {
     const { warnings } = this;
     const warning = warnings.find(warn => warn.getId() == uid);
     const { getId, getName, message, kind, selfLink, age } = warning;
@@ -114,7 +113,7 @@ export class ClusterIssues extends React.Component<Props> {
         </TableCell>
       </TableRow>
     );
-  }
+  };
 
   renderContent() {
     const { warnings } = this;

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

@@ -1,7 +1,7 @@
 import { action, makeObservable, observable, reaction, when } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
-import { autobind, createStorage, StorageHelper } from "../../utils";
+import { createStorage, StorageHelper } 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;
 
@@ -85,7 +84,7 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
     this.metricsLoaded = true;
   }
 
-  getMetricsValues(source: Partial<IClusterMetrics>): [number, string][] {
+  getMetricsValues = (source: Partial<IClusterMetrics>): [number, string][] => {
     switch (this.metricType) {
       case MetricType.CPU:
         return normalizeMetrics(source.cpuUsage).data.result[0].values;

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

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

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

@@ -1,9 +1,7 @@
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
 import { LimitRange, limitRangeApi } from "../../api/endpoints/limit-range.api";
-import { autobind } from "../../../common/utils";
 
-@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 { ConfigMap, configMapApi } from "../../api/endpoints/configmap.api";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { pdbApi, PodDisruptionBudget } from "../../api/endpoints/poddisruptionbudget.api";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { Secret, secretsApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class SecretsStore extends KubeObjectStore<Secret> {
   api = secretsApi;
 }

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

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

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

@@ -5,7 +5,7 @@ import { apiManager } from "../../api/api-manager";
 import { KubeApi } from "../../api/kube-api";
 import { CRDResourceStore } from "./crd-resource.store";
 import { KubeObject } from "../../api/kube-object";
-import { autobind, toJS } from "../../../common/utils";
+import { toJS } from "../../../common/utils";
 
 function initStore(crd: CustomResourceDefinition) {
   const apiBase = crd.getResourceApiBase();
@@ -18,7 +18,6 @@ function initStore(crd: CustomResourceDefinition) {
   }
 }
 
-@autobind
 export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
   api = crdApi;
 

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

@@ -6,9 +6,7 @@ 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";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class EventStore extends KubeObjectStore<KubeEvent> {
   api = eventApi;
   limit = 1000;

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

@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { computed, observable } from "mobx";
 import logger from "../../../main/logger";
 import { disposer, ExtendableDisposer } from "../../utils";
 import * as uuid from "uuid";

src/renderer/components/+extensions/extensions.tsx

@@ -1,12 +1,12 @@
 import "./extensions.scss";
 import { remote, shell } from "electron";
 import fse from "fs-extra";
-import { computed, observable, reaction, when, makeObservable } from "mobx";
+import { computed, makeObservable, observable, reaction, when } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import os from "os";
 import path from "path";
 import React from "react";
-import { autobind, disposer, Disposer, downloadFile, downloadJson, ExtendableDisposer, extractTar, listTarEntries, noop, readFileFromTar } from "../../../common/utils";
+import { disposer, Disposer, downloadFile, downloadJson, ExtendableDisposer, extractTar, listTarEntries, noop, readFileFromTar } from "../../../common/utils";
 import { docsUrl } from "../../../common/vars";
 import { ExtensionDiscovery, InstalledExtension, manifestFilename } from "../../../extensions/extension-discovery";
 import { ExtensionLoader } from "../../../extensions/extension-loader";
@@ -142,7 +142,7 @@ async function validatePackage(filePath: string): Promise<LensExtensionManifest>
   // tarball from npm contains single root folder "package/*"
   const firstFile = tarFiles[0];
 
-  if(!firstFile) {
+  if (!firstFile) {
     throw new Error(`invalid extension bundle,  ${manifestFilename} not found`);
   }
 
@@ -150,7 +150,7 @@ async function validatePackage(filePath: string): Promise<LensExtensionManifest>
   const packedInRootFolder = tarFiles.every(entry => entry.startsWith(rootFolder));
   const manifestLocation = packedInRootFolder ? path.join(rootFolder, manifestFilename) : manifestFilename;
 
-  if(!tarFiles.includes(manifestLocation)) {
+  if (!tarFiles.includes(manifestLocation)) {
     throw new Error(`invalid extension bundle, ${manifestFilename} not found`);
   }
 
@@ -366,7 +366,7 @@ async function attemptInstall(request: InstallRequest, d?: ExtendableDisposer):
           } else {
             dispose();
           }
-        }} />
+        }}/>
       </div>,
       {
         onClose: dispose,
@@ -411,7 +411,7 @@ async function installFromInput(input: string) {
 
       await attemptInstall({ fileName, dataP: readFileNotify(input) });
     } else if (InputValidators.isExtensionNameInstall.validate(input)) {
-      const [{ groups: { name, version }}] = [...input.matchAll(InputValidators.isExtensionNameInstallRegex)];
+      const [{ groups: { name, version } }] = [...input.matchAll(InputValidators.isExtensionNameInstallRegex)];
 
       await attemptInstallByInfo({ name, version });
     }
@@ -471,7 +471,7 @@ export class Extensions extends React.Component {
     const searchText = this.search.toLowerCase();
 
     return Array.from(ExtensionLoader.getInstance().userExtensions.values())
-      .filter(({ manifest: { name, description }}) => (
+      .filter(({ manifest: { name, description } }) => (
         name.toLowerCase().includes(searchText)
         || description?.toLowerCase().includes(searchText)
       ));
@@ -511,7 +511,7 @@ export class Extensions extends React.Component {
   renderNoExtensions() {
     return (
       <div className="no-extensions flex box gaps justify-center">
-        <Icon material="info" />
+        <Icon material="info"/>
         <div>
           {this.renderNoExtensionsHelpText()}
         </div>
@@ -519,8 +519,7 @@ export class Extensions extends React.Component {
     );
   }
 
-  @autobind
-  renderExtension(extension: InstalledExtension) {
+  renderExtension = (extension: InstalledExtension) => {
     const { id, isEnabled, manifest } = extension;
     const { name, description, version } = manifest;
     const isUninstalling = ExtensionInstallationStateStore.isExtensionUninstalling(id);
@@ -550,11 +549,11 @@ export class Extensions extends React.Component {
         </div>
       </div>
     );
-  }
+  };
 
   renderExtensions() {
     if (!ExtensionDiscovery.getInstance().isLoaded) {
-      return <div className="spinner-wrapper"><Spinner /></div>;
+      return <div className="spinner-wrapper"><Spinner/></div>;
     }
 
     const { searchedForExtensions } = this;
@@ -579,7 +578,8 @@ export class Extensions extends React.Component {
           <h2>Lens Extensions</h2>
           <div>
             Add new features and functionality via Lens Extensions.
-            Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank" rel="noreferrer">learn more</a> or see the list of <a href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
+            Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank" rel="noreferrer">learn more</a> or see the list of <a
+              href="https://github.com/lensapp/lens-extensions/blob/main/README.md" target="_blank" rel="noreferrer">available extensions</a>.
           </div>
 
           <div className="install-extension flex column gaps">

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

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

src/renderer/components/+network-endpoints/endpoint-subset-list.tsx

@@ -3,9 +3,8 @@ import "./endpoint-subset-list.scss";
 import React from "react";
 import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
+import { Endpoint, EndpointAddress, EndpointSubset } from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { autobind } from "../../utils";
 import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { getDetailsUrl } from "../kube-object";
@@ -29,16 +28,14 @@ export class EndpointSubsetList extends React.Component<Props> {
     return this.renderAddressTableRow(address);
   }
 
-  @autobind
-  getNotReadyAddressTableRow(ip: string) {
-    const { subset} = this.props;
+  getNotReadyAddressTableRow = (ip: string) => {
+    const { subset } = this.props;
     const address = subset.getNotReadyAddresses().find(address => address.getId() == ip);
 
     return this.renderAddressTableRow(address);
-  }
+  };
 
-  @autobind
-  renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
+  renderAddressTable = (addresses: EndpointAddress[], virtual: boolean) => {
     return (
       <div>
         <div className="title flex gaps">Addresses</div>
@@ -61,10 +58,9 @@ export class EndpointSubsetList extends React.Component<Props> {
         </Table>
       </div>
     );
-  }
+  };
 
-  @autobind
-  renderAddressTableRow(address: EndpointAddress) {
+  renderAddressTableRow = (address: EndpointAddress) => {
     const { endpoint } = this.props;
 
     return (
@@ -75,7 +71,7 @@ export class EndpointSubsetList extends React.Component<Props> {
         <TableCell className="ip">{address.ip}</TableCell>
         <TableCell className="name">{address.hostname}</TableCell>
         <TableCell className="target">
-          { address.targetRef && (
+          {address.targetRef && (
             <Link to={getDetailsUrl(lookupApiLink(address.getTargetRef(), endpoint))}>
               {address.targetRef.name}
             </Link>
@@ -83,7 +79,7 @@ export class EndpointSubsetList extends React.Component<Props> {
         </TableCell>
       </TableRow>
     );
-  }
+  };
 
   render() {
     const { subset } = this.props;
@@ -92,7 +88,7 @@ export class EndpointSubsetList extends React.Component<Props> {
     const addressesVirtual = addresses.length > 100;
     const notReadyAddressesVirtual = notReadyAddresses.length > 100;
 
-    return(
+    return (
       <div className="EndpointSubsetList flex column">
         {addresses.length > 0 && (
           <div>
@@ -110,7 +106,7 @@ export class EndpointSubsetList extends React.Component<Props> {
                 <TableCell className="host">Hostname</TableCell>
                 <TableCell className="target">Target</TableCell>
               </TableHead>
-              { !addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId())) }
+              {!addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId()))}
             </Table>
           </div>
         )}
@@ -131,7 +127,7 @@ export class EndpointSubsetList extends React.Component<Props> {
                 <TableCell className="host">Hostname</TableCell>
                 <TableCell className="target">Target</TableCell>
               </TableHead>
-              { !notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId())) }
+              {!notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId()))}
             </Table>
           </div>
         )}

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

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

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

@@ -2,9 +2,7 @@ import { makeObservable, observable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { Service, serviceApi } from "../../api/endpoints/service.api";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class ServiceStore extends KubeObjectStore<Service> {
   api = serviceApi;
 }

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

@@ -3,9 +3,7 @@ import { action, computed, makeObservable, observable } from "mobx";
 import { clusterApi, IClusterMetrics, INodeMetrics, Node, nodesApi } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class PodSecurityPoliciesStore extends KubeObjectStore<PodSecurityPolicy> {
   api = pspApi;
 }

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

@@ -2,9 +2,7 @@ import { KubeObjectStore } from "../../kube-object.store";
 import { StorageClass, storageClassApi } from "../../api/endpoints/storage-class.api";
 import { apiManager } from "../../api/api-manager";
 import { volumesStore } from "../+storage-volumes/volumes.store";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class StorageClassStore extends KubeObjectStore<StorageClass> {
   api = storageClassApi;
 

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

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

src/renderer/components/+storage-volumes/volume-details-list.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PersistentVolume } from "../../api/endpoints/persistent-volume.api";
-import { autobind } from "../../../common/utils/autobind";
 import { TableRow } from "../table/table-row";
 import { cssNames, prevDefault } from "../../utils";
 import { showDetails } from "../kube-object/kube-object-details";
@@ -39,8 +38,7 @@ export class VolumeDetailsList extends React.Component<Props> {
     makeObservable(this);
   }
 
-  @autobind
-  getTableRow(uid: string) {
+  getTableRow = (uid: string) => {
     const { persistentVolumes } = this.props;
     const volume = persistentVolumes.find(volume => volume.getId() === uid);
 
@@ -56,7 +54,7 @@ export class VolumeDetailsList extends React.Component<Props> {
         <TableCell className={cssNames("status", kebabCase(volume.getStatus()))}>{volume.getStatus()}</TableCell>
       </TableRow>
     );
-  }
+  };
 
   render() {
     const { persistentVolumes } = this.props;

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

@@ -2,9 +2,7 @@ import { KubeObjectStore } from "../../kube-object.store";
 import { PersistentVolume, persistentVolumeApi } from "../../api/endpoints/persistent-volume.api";
 import { apiManager } from "../../api/api-manager";
 import { StorageClass } from "../../api/endpoints/storage-class.api";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class PersistentVolumesStore extends KubeObjectStore<PersistentVolume> {
   api = persistentVolumeApi;
 

src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx

@@ -3,13 +3,13 @@ import "./role-binding-details.scss";
 import React from "react";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { IRoleBindingSubject, RoleBinding } from "../../api/endpoints";
-import { autobind, prevDefault } from "../../utils";
+import { prevDefault } from "../../utils";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { ConfirmDialog } from "../confirm-dialog";
 import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { roleBindingsStore } from "./role-bindings.store";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -47,8 +47,7 @@ export class RoleBindingDetails extends React.Component<Props> {
     );
   }
 
-  @autobind
-  removeSelectedSubjects() {
+  removeSelectedSubjects = () => {
     const { object: roleBinding } = this.props;
     const { selectedSubjects } = this;
 
@@ -59,7 +58,7 @@ export class RoleBindingDetails extends React.Component<Props> {
         <p>Remove selected bindings for <b>{roleBinding.getName()}</b>?</p>
       )
     });
-  }
+  };
 
   render() {
     const { selectedSubjects } = this;
@@ -146,7 +145,6 @@ kubeObjectDetailRegistry.add({
   }
 });
 
-
 kubeObjectDetailRegistry.add({
   kind: "ClusterRoleBinding",
   apiVersions: ["rbac.authorization.k8s.io/v1"],

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

@@ -3,9 +3,7 @@ import uniqBy from "lodash/uniqBy";
 import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@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 { ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class ServiceAccountsStore extends KubeObjectStore<ServiceAccount> {
   api = serviceAccountsApi;
 

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

@@ -2,9 +2,7 @@ import { KubeObjectStore } from "../../kube-object.store";
 import { CronJob, cronJobApi } from "../../api/endpoints/cron-job.api";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class CronJobStore extends KubeObjectStore<CronJob> {
   api = cronJobApi;
 

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

@@ -3,9 +3,7 @@ import { KubeObjectStore } from "../../kube-object.store";
 import { DaemonSet, daemonSetApi, IPodMetrics, Pod, podsApi, PodStatus } from "../../api/endpoints";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
   api = daemonSetApi;
 

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

@@ -3,9 +3,7 @@ import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../.
 import { KubeObjectStore } from "../../kube-object.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi;
   @observable metrics: IPodMetrics = null;

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

@@ -3,9 +3,7 @@ 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";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class JobStore extends KubeObjectStore<Job> {
   api = jobApi;
 

src/renderer/components/+workloads-overview/overview-statuses.tsx

@@ -10,7 +10,6 @@ import { namespaceStore } from "../+namespaces/namespace.store";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { isAllowedResource, KubeResource } from "../../../common/rbac";
 import { ResourceNames } from "../../utils/rbac";
-import { autobind } from "../../utils";
 
 const resources: KubeResource[] = [
   "pods",
@@ -29,8 +28,7 @@ export class OverviewStatuses extends React.Component {
     makeObservable(this);
   }
 
-  @autobind
-  renderWorkload(resource: KubeResource): React.ReactElement {
+  renderWorkload = (resource: KubeResource): React.ReactElement => {
     const store = workloadStores[resource];
     const items = store.getAllByNs(namespaceStore.contextNamespaces);
 
@@ -42,7 +40,7 @@ export class OverviewStatuses extends React.Component {
         <OverviewWorkloadStatus status={store.getStatuses(items)} />
       </div>
     );
-  }
+  };
 
   render() {
     const workloads = resources

src/renderer/components/+workloads-pods/pod-details-list.tsx

@@ -6,7 +6,7 @@ import { reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "./pods.store";
 import { Pod } from "../../api/endpoints";
-import { autobind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
+import { bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
 import { LineProgress } from "../line-progress";
 import { KubeObject } from "../../api/kube-object";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -103,8 +103,7 @@ export class PodDetailsList extends React.Component<Props> {
     );
   }
 
-  @autobind
-  getTableRow(uid: string) {
+  getTableRow = (uid: string) => {
     const { pods } = this.props;
     const pod = pods.find(pod => pod.getId() == uid);
     const metrics = podsStore.getPodKubeMetrics(pod);
@@ -125,7 +124,7 @@ export class PodDetailsList extends React.Component<Props> {
         <TableCell className={cssNames("status", kebabCase(pod.getStatusMessage()))}>{pod.getStatusMessage()}</TableCell>
       </TableRow>
     );
-  }
+  };
 
   render() {
     const { pods, showTitle } = this.props;

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -8,7 +8,7 @@ import { autorun, makeObservable, observable, reaction } from "mobx";
 import { configMapApi, IPodMetrics, nodesApi, Pod, pvcApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
-import { autobind, cssNames, interval, toJS } from "../../utils";
+import { cssNames, interval, toJS } from "../../utils";
 import { PodDetailsContainer } from "./pod-details-container";
 import { PodDetailsAffinities } from "./pod-details-affinities";
 import { PodDetailsTolerations } from "./pod-details-tolerations";
@@ -56,12 +56,11 @@ export class PodDetails extends React.Component<Props> {
     podsStore.reset();
   }
 
-  @autobind
-  async loadMetrics() {
+  loadMetrics = async () => {
     const { object: pod } = this.props;
 
     this.containerMetrics = await podsStore.loadContainerMetrics(pod);
-  }
+  };
 
   render() {
     const { object: pod } = this.props;

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

@@ -1,12 +1,11 @@
 import countBy from "lodash/countBy";
 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

@@ -4,9 +4,7 @@ import { Deployment, IPodMetrics, podsApi, ReplicaSet, replicaSetApi } from "../
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
 import { PodStatus } from "../../api/endpoints/pods.api";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
   api = replicaSetApi;
   @observable metrics: IPodMetrics = null;

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

@@ -3,9 +3,7 @@ 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";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi;
   @observable metrics: IPodMetrics = null;

src/renderer/components/ace-editor/ace-editor.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
-import { autobind, cssNames, noop } from "../../utils";
+import { cssNames, noop } from "../../utils";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
@@ -130,23 +130,21 @@ export class AceEditor extends React.Component<Props, State> {
     });
   }
 
-  @autobind
-  onCursorPosChange() {
+  onCursorPosChange = () => {
     const { onCursorPosChange } = this.props;
 
     if (onCursorPosChange) {
       onCursorPosChange(this.editor.getCursorPosition());
     }
-  }
+  };
 
-  @autobind
-  onChange(delta: Ace.Delta) {
+  onChange = (delta: Ace.Delta) => {
     const { onChange } = this.props;
 
     if (onChange) {
       onChange(this.getValue(), delta);
     }
-  }
+  };
 
   render() {
     const { className, hidden } = this.props;

src/renderer/components/animate/animate.tsx

@@ -2,7 +2,7 @@ import "./animate.scss";
 import React from "react";
 import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { autobind, cssNames, noop } from "../../utils";
+import { cssNames, noop } from "../../utils";
 
 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
 
@@ -71,8 +71,7 @@ export class Animate extends React.Component<AnimateProps> {
     this.statusClassName.leave = false;
   }
 
-  @autobind
-  onTransitionEnd(evt: React.TransitionEvent) {
+  onTransitionEnd = (evt: React.TransitionEvent) => {
     const { enter, leave } = this.statusClassName;
     const { onTransitionEnd } = this.contentElem.props;
 
@@ -82,7 +81,7 @@ export class Animate extends React.Component<AnimateProps> {
     if (enter && leave) {
       this.reset();
     }
-  }
+  };
 
   render() {
     const { name } = this.props;

src/renderer/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import "./checkbox.scss";
 import React from "react";
-import { autobind, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 
 export interface CheckboxProps<T = boolean> {
   theme?: "dark" | "light";
@@ -15,12 +15,11 @@ export interface CheckboxProps<T = boolean> {
 export class Checkbox extends React.PureComponent<CheckboxProps> {
   private input: HTMLInputElement;
 
-  @autobind
-  onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+  onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       this.props.onChange(this.input.checked, evt);
     }
-  }
+  };
 
   getValue() {
     if (this.props.value !== undefined) return this.props.value;

src/renderer/components/clipboard/clipboard.tsx

@@ -1,7 +1,6 @@
 import "./clipboard.scss";
 import React from "react";
 import { findDOMNode } from "react-dom";
-import { autobind } from "../../../common/utils";
 import { Notifications } from "../notifications";
 import { copyToClipboard } from "../../utils/copyToClipboard";
 import logger from "../../../main/logger";
@@ -33,8 +32,7 @@ export class Clipboard extends React.Component<CopyToClipboardProps> {
     return React.Children.only(this.props.children) as React.ReactElement;
   }
 
-  @autobind
-  onClick(evt: React.MouseEvent) {
+  onClick = (evt: React.MouseEvent) => {
     if (this.rootReactElem.props.onClick) {
       this.rootReactElem.props.onClick(evt); // pass event to children-root-element if any
     }
@@ -48,7 +46,7 @@ export class Clipboard extends React.Component<CopyToClipboardProps> {
         Notifications.ok(getNotificationMessage(copiedText));
       }
     }
-  }
+  };
 
   render() {
     try {

src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Cluster } from "../../../../main/cluster";
 import { observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
-import { autobind } from "../../../../common/utils";
 import { shell } from "electron";
 
 interface Props {
@@ -12,17 +11,16 @@ interface Props {
 @observer
 export class ClusterKubeconfig extends React.Component<Props> {
 
-  @autobind
-  openKubeconfig() {
+  openKubeconfig = () => {
     const { cluster } = this.props;
 
     shell.showItemInFolder(cluster.kubeConfigPath);
-  }
+  };
 
   render() {
     return (
       <>
-        <SubTitle title="Kubeconfig" />
+        <SubTitle title="Kubeconfig"/>
 
         <span>
           <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>

src/renderer/components/cluster-settings/components/remove-cluster-button.tsx

@@ -3,7 +3,6 @@ import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { ClusterStore } from "../../../../common/cluster-store";
 import { Cluster } from "../../../../main/cluster";
-import { autobind } from "../../../utils";
 import { Button } from "../../button";
 import { ConfirmDialog } from "../../confirm-dialog";
 
@@ -18,8 +17,7 @@ export class RemoveClusterButton extends React.Component<Props> {
     makeObservable(this);
   }
 
-  @autobind
-  confirmRemoveCluster() {
+  confirmRemoveCluster = () => {
     const { cluster } = this.props;
 
     ConfirmDialog.open({
@@ -30,7 +28,7 @@ export class RemoveClusterButton extends React.Component<Props> {
         await ClusterStore.getInstance().removeById(cluster.id);
       }
     });
-  }
+  };
 
   render() {
     const { cluster } = this.props;

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

@@ -6,9 +6,7 @@ import filehound from "filehound";
 import { watch } from "chokidar";
 import { DockTabStore } from "./dock-tab.store";
 import { dockStore, IDockTab, TabKind } from "./dock.store";
-import { autobind } from "../../../common/utils";
 
-@autobind
 export class CreateResourceStore extends DockTabStore<string> {
 
   constructor() {

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

@@ -1,5 +1,5 @@
 import { autorun, observable, reaction } from "mobx";
-import { autobind, createStorage, StorageHelper, toJS } from "../../utils";
+import { createStorage, StorageHelper, toJS } 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-tab.tsx

@@ -2,7 +2,7 @@ import "./dock-tab.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { autobind, cssNames, prevDefault } from "../../utils";
+import { cssNames, prevDefault } from "../../utils";
 import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
@@ -26,10 +26,9 @@ export class DockTab extends React.Component<DockTabProps> {
     return this.props.value.id;
   }
 
-  @autobind
-  close() {
+  close = () => {
     dockStore.closeTab(this.tabId);
-  }
+  };
 
   renderMenu() {
     const { closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore;

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

@@ -1,6 +1,6 @@
 import MD5 from "crypto-js/md5";
 import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
-import { autobind, createStorage, StorageHelper } from "../../utils";
+import { createStorage, StorageHelper } from "../../utils";
 import throttle from "lodash/throttle";
 
 export type TabId = string;
@@ -28,7 +28,6 @@ export interface DockStorageState {
   isOpen?: boolean;
 }
 
-@autobind
 export class DockStore implements DockStorageState {
   private storage: StorageHelper<DockStorageState>;
   public readonly minHeight = 100;
@@ -119,36 +118,33 @@ export class DockStore implements DockStorageState {
     return this.tabs.length > 0;
   }
 
-  @action
-  open(fullSize?: boolean) {
+  open = action((fullSize?: boolean) => {
     this.isOpen = true;
 
     if (typeof fullSize === "boolean") {
       this.fullSize = fullSize;
     }
-  }
+  })
 
-  @action
-  close() {
+  close = action(() => {
     this.isOpen = false;
-  }
+  })
 
-  toggle() {
+  toggle = action(() => {
     if (this.isOpen) this.close();
     else this.open();
-  }
+  })
 
-  @action
-  toggleFillSize() {
+  toggleFillSize = action(() => {
     if (!this.isOpen) this.open();
     this.fullSize = !this.fullSize;
-  }
+  })
 
-  getTabById(tabId: TabId): IDockTab | undefined {
+  getTabById = (tabId: TabId): IDockTab | undefined => {
     return this.tabs.find(tab => tab.id === tabId);
   }
 
-  getTabIndex(tabId: TabId): number {
+  getTabIndex = (tabId: TabId): number => {
     return this.tabs.findIndex(tab => tab.id === tabId);
   }
 
@@ -166,8 +162,7 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action
-  createTab(anonTab: IDockTab, addNumber = true): IDockTab {
+  createTab = action((anonTab: IDockTab, addNumber = true): IDockTab => {
     const tabId = MD5(Math.random().toString() + Date.now()).toString();
     const tab: IDockTab = { id: tabId, ...anonTab };
 
@@ -181,10 +176,9 @@ export class DockStore implements DockStorageState {
     this.open();
 
     return tab;
-  }
+  })
 
-  @action
-  async closeTab(tabId: TabId) {
+  closeTab = action(async (tabId: TabId) => {
     const tab = this.getTabById(tabId);
 
     if (!tab || tab.pinned) {
@@ -208,45 +202,43 @@ export class DockStore implements DockStorageState {
         this.close();
       }
     }
-  }
+  })
 
-  closeTabs(tabs: IDockTab[]) {
+  closeTabs = (tabs: IDockTab[]) => {
     tabs.forEach(tab => this.closeTab(tab.id));
   }
 
-  closeAllTabs() {
+  closeAllTabs = () => {
     this.closeTabs([...this.tabs]);
   }
 
-  closeOtherTabs(tabId: TabId) {
+  closeOtherTabs = (tabId: TabId) => {
     const index = this.getTabIndex(tabId);
     const tabs = [...this.tabs.slice(0, index), ...this.tabs.slice(index + 1)];
 
     this.closeTabs(tabs);
   }
 
-  closeTabsToTheRight(tabId: TabId) {
+  closeTabsToTheRight = (tabId: TabId) => {
     const index = this.getTabIndex(tabId);
     const tabs = this.tabs.slice(index + 1);
 
     this.closeTabs(tabs);
   }
 
-  renameTab(tabId: TabId, title: string) {
+  renameTab = (tabId: TabId, title: string) => {
     const tab = this.getTabById(tabId);
 
     tab.title = title;
   }
 
-  @action
-  selectTab(tabId: TabId) {
+  selectTab = action((tabId: TabId) => {
     this.selectedTabId = this.getTabById(tabId)?.id ?? null;
-  }
+  })
 
-  @action
-  reset() {
+  reset = action(() => {
     this.storage?.reset();
-  }
+  });
 }
 
 export const dockStore = new DockStore();

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/install-chart.tsx

@@ -1,13 +1,13 @@
 import "./install-chart.scss";
 
 import React, { Component } from "react";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { dockStore, IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { autobind, prevDefault } from "../../utils";
+import { prevDefault } from "../../utils";
 import { IChartInstallData, installChartStore } from "./install-chart.store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
@@ -54,8 +54,7 @@ export class InstallChart extends Component<Props> {
     return installChartStore.details.getData(this.tabId);
   }
 
-  @autobind
-  viewRelease() {
+  viewRelease = () => {
     const { release } = this.releaseDetails;
 
     navigate(releaseURL({
@@ -65,38 +64,33 @@ export class InstallChart extends Component<Props> {
       }
     }));
     dockStore.closeTab(this.tabId);
-  }
+  };
 
-  @autobind
-  save(data: Partial<IChartInstallData>) {
+  save = (data: Partial<IChartInstallData>) => {
     const chart = { ...this.chartData, ...data };
 
     installChartStore.setData(this.tabId, chart);
-  }
+  };
 
-  @autobind
-  onVersionChange(option: SelectOption) {
+  onVersionChange = (option: SelectOption) => {
     const version = option.value;
 
     this.save({ version, values: "" });
     installChartStore.loadValues(this.tabId);
-  }
+  };
 
-  @autobind
-  onValuesChange(values: string, error?: string) {
+  onValuesChange = (values: string, error?: string) => {
     this.error = error;
     this.save({ values });
-  }
+  };
 
-  @autobind
-  onNamespaceChange(opt: SelectOption) {
+  onNamespaceChange = (opt: SelectOption) => {
     this.save({ namespace: opt.value });
-  }
+  };
 
-  @autobind
-  onReleaseNameChange(name: string) {
+  onReleaseNameChange = (name: string) => {
     this.save({ releaseName: name });
-  }
+  };
 
   install = async () => {
     const { repo, name, version, namespace, values, releaseName } = this.chartData;
@@ -117,14 +111,14 @@ export class InstallChart extends Component<Props> {
     const { tabId, chartData, values, versions, install } = this;
 
     if (chartData?.values === undefined || !versions) {
-      return <Spinner center />;
+      return <Spinner center/>;
     }
 
     if (this.releaseDetails) {
       return (
         <div className="InstallChartDone flex column gaps align-center justify-center">
           <p>
-            <Icon material="check" big sticker />
+            <Icon material="check" big sticker/>
           </p>
           <p>Installation complete!</p>
           <div className="flex gaps align-center">
@@ -153,7 +147,7 @@ export class InstallChart extends Component<Props> {
     const panelControls = (
       <div className="install-controls flex gaps align-center">
         <span>Chart</span>
-        <Badge label={`${repo}/${name}`} title="Repo/Name" />
+        <Badge label={`${repo}/${name}`} title="Repo/Name"/>
         <span>Version</span>
         <Select
           className="chart-version"

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

@@ -1,6 +1,6 @@
 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";
 
@@ -8,7 +8,6 @@ type PodLogLine = string;
 
 const logLinesToLoad = 500;
 
-@autobind
 export class LogStore {
   private refresher = interval(10, () => {
     const id = dockStore.selectedTabId;

src/renderer/components/dock/logs.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { observable, reaction, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { searchStore } from "../../../common/search-store";
-import { autobind } from "../../utils";
 import { IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
 import { LogResourceSelector } from "./log-resource-selector";
@@ -54,16 +53,14 @@ export class Logs extends React.Component<Props> {
    * A function for various actions after search is happened
    * @param query {string} A text from search field
    */
-  @autobind
-  onSearch() {
+  onSearch = () => {
     this.toOverlay();
-  }
+  };
 
   /**
    * Scrolling to active overlay (search word highlight)
    */
-  @autobind
-  toOverlay() {
+  toOverlay = () => {
     const { activeOverlayLine } = searchStore;
 
     if (!this.logListElement.current || activeOverlayLine === undefined) return;
@@ -76,7 +73,7 @@ export class Logs extends React.Component<Props> {
       if (!overlay) return;
       overlay.scrollIntoViewIfNeeded();
     }, 100);
-  }
+  };
 
   renderResourceSelector(data?: LogTabData) {
     if (!data) {

src/renderer/components/dock/terminal-tab.tsx

@@ -3,7 +3,7 @@ import "./terminal-tab.scss";
 import React from "react";
 import { reaction } from "mobx";
 import { observer } from "mobx-react";
-import { autobind, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
@@ -28,10 +28,9 @@ export class TerminalTab extends React.Component<Props> {
     return terminalStore.isDisconnected(this.tabId);
   }
 
-  @autobind
-  reconnect() {
+  reconnect = () => {
     terminalStore.reconnect(this.tabId);
-  }
+  };
 
   render() {
     const tabIcon = <Icon svg="terminal"/>;

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

@@ -3,7 +3,6 @@ import { Terminal } from "./terminal";
 import { TerminalApi } from "../../api/terminal-api";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { WebSocketApiState } from "../../api/websocket-api";
-import { autobind } from "../../../common/utils";
 
 export interface ITerminalTab extends IDockTab {
   node?: string; // activate node shell mode
@@ -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/dock/terminal.ts

@@ -4,7 +4,6 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi } from "../../api/terminal-api";
 import { ThemeStore } from "../../theme.store";
-import { autobind, toJS } from "../../utils";
 import { isMac } from "../../../common/vars";
 import { camelCase, debounce } from "lodash";
 
@@ -35,8 +34,7 @@ export class Terminal {
   public scrollPos = 0;
   public disposers: Function[] = [];
 
-  @autobind
-  protected setTheme(colors: Record<string, string>) {
+  protected setTheme = (colors: Record<string, string>) => {
     // Replacing keys stored in styles to format accepted by terminal
     // E.g. terminalBrightBlack -> brightBlack
     const colorPrefix = "terminal";
@@ -46,7 +44,7 @@ export class Terminal {
     const terminalColors = Object.fromEntries(terminalColorEntries);
 
     this.xterm.setOption("theme", terminalColors);
-  }
+  };
 
   get elem() {
     return this.xterm.element;
@@ -103,7 +101,7 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposers.push(
-      reaction(() => toJS(ThemeStore.getInstance().activeTheme.colors), this.setTheme, {
+      reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
         fireImmediately: true
       }),
       dockStore.onResize(this.onResize),

src/renderer/components/editable-list/editable-list.tsx

@@ -3,9 +3,8 @@ import "./editable-list.scss";
 import React from "react";
 import { Icon } from "../icon";
 import { Input } from "../input";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import { autobind } from "../../utils";
 
 export interface Props<T> {
   items: T[],
@@ -33,15 +32,14 @@ export class EditableList<T> extends React.Component<Props<T>> {
     makeObservable(this);
   }
 
-  @autobind
-  onSubmit(val: string) {
+  onSubmit = (value: string) => {
     const { add } = this.props;
 
-    if (val) {
-      add(val);
+    if (value) {
+      add(value);
       this.currentNewItem = "";
     }
-  }
+  };
 
   render() {
     const { items, remove, renderItem, placeholder } = this.props;
@@ -63,7 +61,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
               <div key={`${item}${index}`} className="el-item Badge">
                 <div>{renderItem(item, index)}</div>
                 <div className="el-value-remove">
-                  <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
+                  <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))}/>
                 </div>
               </div>
             ))

src/renderer/components/icon/icon.tsx

@@ -4,7 +4,7 @@ import React, { ReactNode } from "react";
 import { findDOMNode } from "react-dom";
 import { NavLink } from "react-router-dom";
 import { LocationDescriptor } from "history";
-import { autobind, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
 
@@ -36,8 +36,7 @@ export class Icon extends React.PureComponent<IconProps> {
     return interactive ?? !!(onClick || href || link);
   }
 
-  @autobind
-  onClick(evt: React.MouseEvent) {
+  onClick = (evt: React.MouseEvent) => {
     if (this.props.disabled) {
       return;
     }
@@ -45,10 +44,9 @@ export class Icon extends React.PureComponent<IconProps> {
     if (this.props.onClick) {
       this.props.onClick(evt);
     }
-  }
+  };
 
-  @autobind
-  onKeyDown(evt: React.KeyboardEvent<any>) {
+  onKeyDown = (evt: React.KeyboardEvent<any>) => {
     switch (evt.nativeEvent.code) {
       case "Space":
 
@@ -65,7 +63,7 @@ export class Icon extends React.PureComponent<IconProps> {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);
     }
-  }
+  };
 
   render() {
     const { isInteractive } = this;