Removed package "autobind-decorator" and @boundMethod in favour of "auto-bind" util for constructors-only. (#5218)

package.json

@@ -210,7 +210,6 @@
     "@types/circular-dependency-plugin": "5.0.5",
     "abort-controller": "^3.0.0",
     "auto-bind": "^4.0.0",
-    "autobind-decorator": "^2.4.0",
     "await-lock": "^2.1.0",
     "byline": "^5.0.0",
     "chokidar": "^3.5.3",

src/common/utils/autobind.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { boundMethod, boundClass } from "autobind-decorator";
 import type { Options } from "auto-bind";
 import autoBindClass from "auto-bind";
 import autoBindReactClass from "auto-bind/react";
@@ -16,10 +15,3 @@ export function autoBind<T extends object>(obj: T, opts?: Options): T {
 
   return autoBindClass(obj, opts);
 }
-
-// Class/method decorators
-// Note: @boundClass doesn't work with mobx-6.x/@action decorator
-export {
-  boundClass,
-  boundMethod,
-};

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

@@ -9,7 +9,7 @@ import { SpeedDial, SpeedDialAction } from "@material-ui/lab";
 import { Icon } from "../icon";
 import { observer } from "mobx-react";
 import { observable, makeObservable, action } from "mobx";
-import { boundMethod } from "../../../common/utils";
+import { autoBind } from "../../../common/utils";
 import type { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityAddMenu } from "../../api/catalog-entity";
 import { EventEmitter } from "events";
 import { navigate } from "../../navigation";
@@ -29,6 +29,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
   constructor(props: CatalogAddButtonProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   componentDidMount() {
@@ -74,17 +75,14 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
     return category.filteredItems(this.menuItems.get(category.getId()) || []);
   };
 
-  @boundMethod
   onOpen() {
     this.isOpen = true;
   }
 
-  @boundMethod
   onClose() {
     this.isOpen = false;
   }
 
-  @boundMethod
   onButtonClick() {
     const defaultAction = this.items.find(item => item.defaultAction)?.onClick;
     const clickAction = defaultAction || (this.items.length === 1 ? this.items[0].onClick : null);

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

@@ -13,7 +13,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 { boundMethod, cssNames, prevDefault } from "../../utils";
+import { cssNames, prevDefault } from "../../utils";
 import type { ItemObject } from "../../../common/item.store";
 import { Spinner } from "../spinner";
 import { ThemeStore } from "../../theme.store";
@@ -72,8 +72,7 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
     ];
   }
 
-  @boundMethod
+  getTableRow = (uid: string) => {
-  getTableRow(uid: string) {
     const { warnings } = this;
     const warning = warnings.find(warn => warn.getId() == uid);
     const { getId, getName, message, kind, selfLink, renderAge } = warning;
@@ -99,7 +98,7 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
         </TableCell>
       </TableRow>
     );
-  }
+  };
 
   renderContent() {
     const { warnings } = this;

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

@@ -11,7 +11,7 @@ import { getChartDetails } from "../../../common/k8s-api/endpoints/helm-charts.a
 import { observable, makeObservable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
-import { boundMethod, stopPropagation } from "../../utils";
+import { autoBind, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
@@ -48,6 +48,7 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
   constructor(props: HelmChartDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   componentWillUnmount() {
@@ -77,7 +78,6 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
     ]);
   }
 
-  @boundMethod
   async onVersionChange({ value: chart }: SelectOption<HelmChart>) {
     this.selectedChart = chart;
     this.readme = null;
@@ -94,7 +94,6 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
     }
   }
 
-  @boundMethod
   install() {
     this.props.createInstallChartTab(this.selectedChart);
     this.props.hideDetails();

src/renderer/components/+namespaces/namespace-details.tsx

@@ -10,7 +10,7 @@ import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import type { Disposer } from "../../utils";
-import { boundMethod, cssNames } from "../../utils";
+import {  cssNames } from "../../utils";
 import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
@@ -71,10 +71,9 @@ class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps
     return limitRangeStore.getAllByNs(namespace);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     this.metrics = await getMetricsForNamespace(this.props.object.getName(), "");
-  }
+  };
 
   render() {
     const { object: namespace } = this.props;

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

@@ -9,10 +9,10 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { EndpointSubset, Endpoint, EndpointAddress } from "../../../common/k8s-api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { boundMethod } from "../../utils";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import { Link } from "react-router-dom";
 import { getDetailsUrl } from "../kube-detail-params";
+import { autoBind } from "../../../common/utils";
 
 export interface EndpointSubsetListProps {
   subset: EndpointSubset;
@@ -21,6 +21,10 @@ export interface EndpointSubsetListProps {
 
 @observer
 export class EndpointSubsetList extends React.Component<EndpointSubsetListProps> {
+  constructor(props: EndpointSubsetListProps) {
+    super(props);
+    autoBind(this);
+  }
 
   getAddressTableRow(ip: string) {
     const { subset } = this.props;
@@ -29,7 +33,6 @@ export class EndpointSubsetList extends React.Component<EndpointSubsetListProps>
     return this.renderAddressTableRow(address);
   }
 
-  @boundMethod
   getNotReadyAddressTableRow(ip: string) {
     const { subset } = this.props;
     const address = subset.getNotReadyAddresses().find(address => address.getId() == ip);
@@ -37,7 +40,6 @@ export class EndpointSubsetList extends React.Component<EndpointSubsetListProps>
     return this.renderAddressTableRow(address);
   }
 
-  @boundMethod
   renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
     return (
       <div>
@@ -63,7 +65,6 @@ export class EndpointSubsetList extends React.Component<EndpointSubsetListProps>
     );
   }
 
-  @boundMethod
   renderAddressTableRow(address: EndpointAddress) {
     const { endpoint } = this.props;
 

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -19,7 +19,6 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { computeRuleDeclarations, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 
 export interface IngressDetailsProps extends KubeObjectDetailsProps<Ingress> {
@@ -42,12 +41,11 @@ export class IngressDetails extends React.Component<IngressDetailsProps> {
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: ingress } = this.props;
 
     this.metrics = await getMetricsForIngress(ingress.getName(), ingress.getNs());
-  }
+  };
 
   renderPaths(ingress: Ingress) {
     return ingress.getRules()

src/renderer/components/+network-port-forwards/port-forward-menu.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import type { PortForwardItem, PortForwardStore } from "../../port-forward";
 import { openPortForward } from "../../port-forward";
 import type { MenuActionsProps } from "../menu/menu-actions";
@@ -26,8 +26,12 @@ interface Dependencies {
   openPortForwardDialog: (item: PortForwardItem) => void;
 }
 
-class NonInjectedPortForwardMenu extends React.Component<PortForwardMenuProps & Dependencies> {
+class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependencies> extends React.Component<Props> {
-  @boundMethod
+  constructor(props: Props) {
+    super(props);
+    autoBind(this);
+  }
+
   remove() {
     const { portForward } = this.props;
 

src/renderer/components/+nodes/details.tsx

@@ -25,7 +25,6 @@ import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { NodeDetailsResources } from "./details-resources";
 import { DrawerTitle } from "../drawer/drawer-title";
 import type { Disposer } from "../../utils";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
@@ -61,12 +60,11 @@ class NonInjectedNodeDetails extends React.Component<NodeDetailsProps & Dependen
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: node } = this.props;
 
     this.metrics = await getMetricsByNodeNames([node.getName()]);
-  }
+  };
 
   render() {
     const { object: node } = this.props;

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -20,7 +20,6 @@ import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { getDetailsUrl } from "../kube-detail-params";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 
 export interface PersistentVolumeClaimDetailsProps extends KubeObjectDetailsProps<PersistentVolumeClaim> {
@@ -43,12 +42,11 @@ export class PersistentVolumeClaimDetails extends React.Component<PersistentVolu
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: volumeClaim } = this.props;
 
     this.metrics = await getMetricsForPvc(volumeClaim);
-  }
+  };
 
   render() {
     const { object: volumeClaim } = this.props;

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

@@ -8,7 +8,6 @@ import "./volume-details-list.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import type { PersistentVolume } from "../../../common/k8s-api/endpoints/persistent-volume.api";
-import { boundMethod } from "../../../common/utils/autobind";
 import { TableRow } from "../table/table-row";
 import { cssNames, prevDefault } from "../../utils";
 import { showDetails } from "../kube-detail-params";
@@ -38,8 +37,7 @@ export class VolumeDetailsList extends React.Component<VolumeDetailsListProps> {
     [sortBy.status]: (volume: PersistentVolume) => volume.getStatus(),
   };
 
-  @boundMethod
+  getTableRow = (uid: string) => {
-  getTableRow(uid: string) {
     const { persistentVolumes } = this.props;
     const volume = persistentVolumes.find(volume => volume.getId() === uid);
 
@@ -55,7 +53,7 @@ export class VolumeDetailsList extends React.Component<VolumeDetailsListProps> {
         <TableCell className={cssNames("status", kebabCase(volume.getStatus()))}>{volume.getStatus()}</TableCell>
       </TableRow>
     );
-  }
+  };
 
   render() {
     const { persistentVolumes } = this.props;

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

@@ -9,7 +9,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
 import type { RoleBinding, RoleBindingSubject } from "../../../../common/k8s-api/endpoints";
-import { prevDefault, boundMethod } from "../../../utils";
+import { prevDefault } from "../../../utils";
 import { AddRemoveButtons } from "../../add-remove-buttons";
 import { ConfirmDialog } from "../../confirm-dialog";
 import { DrawerTitle } from "../../drawer";
@@ -36,8 +36,7 @@ export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps>
     ]);
   }
 
-  @boundMethod
+  removeSelectedSubjects = () => {
-  removeSelectedSubjects() {
     const { object: roleBinding } = this.props;
     const { selectedSubjects } = this;
 
@@ -48,7 +47,7 @@ export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps>
         <p>Remove selected bindings for <b>{roleBinding.getName()}</b>?</p>
       ),
     });
-  }
+  };
 
   render() {
     const { selectedSubjects } = this;

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -24,7 +24,6 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Disposer } from "../../utils";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
@@ -59,12 +58,11 @@ class NonInjectedDaemonSetDetails extends React.Component<DaemonSetDetailsProps
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: daemonSet } = this.props;
 
     this.metrics = await getMetricsForDaemonSets([daemonSet], daemonSet.getNs(), "");
-  }
+  };
 
   render() {
     const { object: daemonSet } = this.props;

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -26,7 +26,6 @@ import { DeploymentReplicaSets } from "./deployment-replicasets";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Disposer } from "../../utils";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
@@ -63,12 +62,11 @@ class NonInjectedDeploymentDetails extends React.Component<DeploymentDetailsProp
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: deployment } = this.props;
 
     this.metrics = await getMetricsForDeployments([deployment], deployment.getNs(), "");
-  }
+  };
 
   render() {
     const { object: deployment } = this.props;

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -25,7 +25,6 @@ import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ResourceMetrics } from "../resource-metrics";
-import { boundMethod } from "autobind-decorator";
 import { getDetailsUrl } from "../kube-detail-params";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import logger from "../../../common/logger";
@@ -63,12 +62,11 @@ class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependenci
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: job } = this.props;
 
     this.metrics = await getMetricsForJobs([job], job.getNs(), "");
-  }
+  };
 
   render() {
     const { object: job } = this.props;

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

@@ -11,7 +11,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "./pods.store";
 import type { Pod } from "../../../common/k8s-api/endpoints";
-import { boundMethod, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
+import { autoBind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
 import { LineProgress } from "../line-progress";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -36,6 +36,11 @@ export interface PodDetailsListProps {
 
 @observer
 export class PodDetailsList extends React.Component<PodDetailsListProps> {
+  constructor(props: PodDetailsListProps) {
+    super(props);
+    autoBind(this);
+  }
+
   private metricsWatcher = interval(120, () => {
     podsStore.loadKubeMetrics(this.props.owner.getNs());
   });
@@ -88,7 +93,6 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
     );
   }
 
-  @boundMethod
   getTableRow(uid: string) {
     const { pods } = this.props;
     const pod = pods.find(pod => pod.getId() == uid);

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

@@ -13,7 +13,7 @@ import { observable, reaction, makeObservable } from "mobx";
 import { type IPodMetrics, nodesApi, Pod, getMetricsForPods } from "../../../common/k8s-api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
-import { boundMethod, cssNames, toJS } from "../../utils";
+import { cssNames, toJS } from "../../utils";
 import { PodDetailsContainer } from "./pod-details-container";
 import { PodDetailsAffinities } from "./pod-details-affinities";
 import { PodDetailsTolerations } from "./pod-details-tolerations";
@@ -51,13 +51,12 @@ export class PodDetails extends React.Component<PodDetailsProps> {
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: pod } = this.props;
 
     this.metrics = await getMetricsForPods([pod], pod.getNs());
     this.containerMetrics = await getMetricsForPods([pod], pod.getNs(), "container, namespace");
-  }
+  };
 
   render() {
     const { object: pod } = this.props;

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -23,7 +23,6 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Disposer } from "../../utils";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
@@ -59,12 +58,11 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: replicaSet } = this.props;
 
     this.metrics = await getMetricsForReplicaSets([replicaSet], replicaSet.getNs(), "");
-  }
+  };
 
   render() {
     const { object: replicaSet } = this.props;

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -24,7 +24,6 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { Disposer } from "../../utils";
-import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
@@ -60,12 +59,11 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
     ]);
   }
 
-  @boundMethod
+  loadMetrics = async () => {
-  async loadMetrics() {
     const { object: statefulSet } = this.props;
 
     this.metrics = await getMetricsForStatefulSets([statefulSet], statefulSet.getNs(), "");
-  }
+  };
 
   render() {
     const { object: statefulSet } = this.props;

src/renderer/components/badge/badge.tsx

@@ -11,7 +11,7 @@ import { observer } from "mobx-react";
 import { cssNames } from "../../utils/cssNames";
 import type { TooltipDecoratorProps } from "../tooltip";
 import { withTooltip } from "../tooltip";
-import { boundMethod } from "../../utils";
+import { autoBind } from "../../utils";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
@@ -44,6 +44,7 @@ export class Badge extends React.Component<BadgeProps> {
   constructor(props: BadgeProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   @computed get isExpandable() {
@@ -52,7 +53,6 @@ export class Badge extends React.Component<BadgeProps> {
     return this.elem?.clientWidth < this.elem?.scrollWidth;
   }
 
-  @boundMethod
   onMouseUp() {
     if (!this.isExpandable || Badge.badgeMeta.hasTextSelected) {
       Badge.badgeMeta.hasTextSelected = false;
@@ -61,7 +61,6 @@ export class Badge extends React.Component<BadgeProps> {
     }
   }
 
-  @boundMethod
   bindRef(elem: HTMLElement) {
     this.elem = elem;
   }

src/renderer/components/checkbox/checkbox.tsx

@@ -5,7 +5,7 @@
 
 import "./checkbox.scss";
 import React from "react";
-import { boundMethod, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 
 export interface CheckboxProps<T = boolean> {
   className?: string;
@@ -19,12 +19,11 @@ export interface CheckboxProps<T = boolean> {
 export class Checkbox extends React.PureComponent<CheckboxProps> {
   private input: HTMLInputElement;
 
-  @boundMethod
+  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/cluster-settings/components/cluster-icon-settings.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import type { Cluster } from "../../../../common/cluster/cluster";
-import { boundMethod } from "../../../utils";
+import { autoBind } from "../../../utils";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import type { KubernetesCluster } from "../../../../common/catalog-entities";
@@ -28,9 +28,13 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
   @observable status = GeneralInputStatus.CLEAN;
   @observable errorText?: string;
 
+  constructor(props: ClusterIconSettingProps) {
+    super(props);
+    autoBind(this);
+  }
+
   private element = React.createRef<HTMLDivElement>();
 
-  @boundMethod
   async onIconPick([file]: File[]) {
     if (!file) {
       return;
@@ -56,7 +60,6 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
     this.props.cluster.preferences.icon = null;
   }
 
-  @boundMethod
   onUploadClick() {
     this.element
       .current

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

@@ -7,7 +7,6 @@ import React from "react";
 import type { Cluster } from "../../../../common/cluster/cluster";
 import { observer } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
-import { boundMethod } from "../../../../common/utils";
 import { shell } from "electron";
 import { Notice } from "../../+extensions/notice";
 
@@ -17,13 +16,11 @@ export interface ClusterKubeconfigProps {
 
 @observer
 export class ClusterKubeconfig extends React.Component<ClusterKubeconfigProps> {
-
+  openKubeconfig = () => {
-  @boundMethod
-  openKubeconfig() {
     const { cluster } = this.props;
 
     shell.showItemInFolder(cluster.kubeConfigPath);
-  }
+  };
 
   render() {
     return (

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

@@ -11,7 +11,7 @@ import React from "react";
 import { Button } from "../button";
 import { saveKubeconfig } from "./save-config";
 import { Notifications } from "../notifications";
-import { boundMethod } from "autobind-decorator";
+import { autoBind } from "../../../common/utils";
 import { Dialog } from "../dialog";
 import { Icon } from "../icon";
 import { Select } from "../select";
@@ -36,9 +36,9 @@ class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
   constructor(props: Dependencies) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
-  @boundMethod
   onOpen() {
     this.newCurrentContext = "";
 
@@ -47,7 +47,6 @@ class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
     }
   }
 
-  @boundMethod
   onClose() {
     this.props.model.close();
     this.showContextSwitch = false;
@@ -65,7 +64,6 @@ class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
     }
   }
 
-  @boundMethod
   async onDelete() {
     const { cluster, config } = this.props.model;
 

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

@@ -7,7 +7,7 @@ import styles from "./dock-tab.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames, prevDefault, isMiddleClick } from "../../utils";
+import { autoBind, cssNames, prevDefault, isMiddleClick } from "../../utils";
 import type { DockStore, DockTab as DockTabModel } from "./dock/store";
 import type { TabProps } from "../tabs";
 import { Tab } from "../tabs";
@@ -34,13 +34,13 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
   constructor(props: DockTabProps & Dependencies) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   get tabId() {
     return this.props.value.id;
   }
 
-  @boundMethod
   close() {
     this.props.dockStore.closeTab(this.tabId);
   }

src/renderer/components/dock/logs/list.tsx

@@ -15,7 +15,7 @@ import moment from "moment-timezone";
 import type { Align, ListOnScrollProps } from "react-window";
 import { SearchStore } from "../../../search-store/search-store";
 import { UserStore } from "../../../../common/user-store";
-import { array, boundMethod, cssNames } from "../../../utils";
+import { array, autoBind, cssNames } from "../../../utils";
 import { VirtualList } from "../../virtual-list";
 import { ToBottom } from "./to-bottom";
 import type { LogTabViewModel } from "../logs/logs-view-model";
@@ -39,6 +39,7 @@ export class LogList extends React.Component<LogListProps> {
   constructor(props: LogListProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   componentDidMount() {
@@ -51,14 +52,12 @@ export class LogList extends React.Component<LogListProps> {
     ]);
   }
 
-  @boundMethod
   onLogsInitialLoad(logs: string[], prevLogs: string[]) {
     if (!prevLogs.length && logs.length) {
       this.isLastLineVisible = true;
     }
   }
 
-  @boundMethod
   onLogsUpdate() {
     if (this.isLastLineVisible) {
       setTimeout(() => {
@@ -67,7 +66,6 @@ export class LogList extends React.Component<LogListProps> {
     }
   }
 
-  @boundMethod
   onUserScrolledUp(logs: string[], prevLogs: string[]) {
     if (!this.virtualListDiv.current) return;
 

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

@@ -5,8 +5,8 @@
 
 import "./terminal-dock-tab.scss";
 import React from "react";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../../utils";
+import { autoBind, cssNames } from "../../../utils";
 import type { DockTabProps } from "../dock-tab";
 import { DockTab } from "../dock-tab";
 import { Icon } from "../../icon";
@@ -26,11 +26,18 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedTerminalTab extends React.Component<TerminalTabProps & Dependencies> {
+class NonInjectedTerminalTab<Props extends TerminalTabProps & Dependencies> extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    autoBind(this);
+  }
+
   componentDidMount() {
-    reaction(() => this.isDisconnected === true, () => {
+    disposeOnUnmount(this, [
-      this.props.dockStore.closeTab(this.tabId);
+      reaction(() => this.isDisconnected === true, () => {
-    });
+        this.props.dockStore.closeTab(this.tabId);
+      }),
+    ]);
   }
 
   get tabId() {
@@ -41,7 +48,6 @@ class NonInjectedTerminalTab extends React.Component<TerminalTabProps & Dependen
     return this.props.terminalStore.isDisconnected(this.tabId);
   }
 
-  @boundMethod
   reconnect() {
     this.props.terminalStore.reconnect(this.tabId);
   }

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

@@ -11,7 +11,7 @@ import React from "react";
 import { Icon } from "../icon";
 import type { InputProps, InputValidator } from "../input";
 import { Input } from "../input";
-import { boundMethod } from "../../utils";
+import { autoBind } from "../../utils";
 
 export interface EditableListProps<T> {
   items: T[];
@@ -36,7 +36,11 @@ const defaultProps: Partial<EditableListProps<any>> = {
 export class EditableList<T> extends React.Component<EditableListProps<T>> {
   static defaultProps = defaultProps as EditableListProps<any>;
 
-  @boundMethod
+  constructor(props: EditableListProps<T>) {
+    super(props);
+    autoBind(this);
+  }
+
   onSubmit(val: string, evt: React.KeyboardEvent) {
     if (val) {
       evt.preventDefault();

src/renderer/components/icon/icon.tsx

@@ -9,7 +9,7 @@ import type { ReactNode } from "react";
 import React, { createRef } from "react";
 import { NavLink } from "react-router-dom";
 import type { LocationDescriptor } from "history";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import type { TooltipDecoratorProps } from "../tooltip";
 import { withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
@@ -43,13 +43,17 @@ export class Icon extends React.PureComponent<IconProps> {
     return String(content).includes("svg+xml"); // data-url for raw svg-icon
   }
 
+  constructor(props: IconProps) {
+    super(props);
+    autoBind(this);
+  }
+
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
 
     return interactive ?? !!(onClick || href || link);
   }
 
-  @boundMethod
   onClick(evt: React.MouseEvent) {
     if (this.props.disabled) {
       return;
@@ -60,7 +64,6 @@ export class Icon extends React.PureComponent<IconProps> {
     }
   }
 
-  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<any>) {
     switch (evt.nativeEvent.code) {
       case "Space":

src/renderer/components/input/drop-file-input.tsx

@@ -6,7 +6,7 @@
 import "./drop-file-input.scss";
 import React from "react";
 import type { IClassName } from "../../utils";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import logger from "../../../main/logger";
@@ -29,15 +29,14 @@ export class DropFileInput<T extends HTMLElement = any> extends React.Component<
   constructor(props: DropFileInputProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
-  @boundMethod
   onDragEnter() {
     this.dragCounter++;
     this.dropAreaActive = true;
   }
 
-  @boundMethod
   onDragLeave() {
     this.dragCounter--;
 
@@ -46,7 +45,6 @@ export class DropFileInput<T extends HTMLElement = any> extends React.Component<
     }
   }
 
-  @boundMethod
   onDragOver(evt: React.DragEvent<T>) {
     if (this.props.onDragOver) {
       this.props.onDragOver(evt);
@@ -55,7 +53,6 @@ export class DropFileInput<T extends HTMLElement = any> extends React.Component<
     evt.dataTransfer.dropEffect = "move";
   }
 
-  @boundMethod
   onDrop(evt: React.DragEvent<T>) {
     if (this.props.onDrop) {
       this.props.onDrop(evt);

src/renderer/components/input/input.tsx

@@ -7,7 +7,7 @@ import "./input.scss";
 
 import type { DOMAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import React from "react";
-import { boundMethod, cssNames, debouncePromise, getRandId } from "../../utils";
+import { autoBind, cssNames, debouncePromise, getRandId } from "../../utils";
 import { Icon } from "../icon";
 import type { TooltipProps } from "../tooltip";
 import { Tooltip } from "../tooltip";
@@ -91,6 +91,11 @@ export class Input extends React.Component<InputProps, State> {
     submitted: false,
   };
 
+  constructor(props: InputProps) {
+    super(props);
+    autoBind(this);
+  }
+
   componentWillUnmount(): void {
     this.setDirtyOnChange.cancel();
   }
@@ -220,7 +225,6 @@ export class Input extends React.Component<InputProps, State> {
     this.setState({ dirty });
   }
 
-  @boundMethod
   onFocus(evt: React.FocusEvent<InputElement>) {
     const { onFocus, autoSelectOnFocus } = this.props;
 
@@ -229,7 +233,6 @@ export class Input extends React.Component<InputProps, State> {
     this.setState({ focused: true });
   }
 
-  @boundMethod
   onBlur(evt: React.FocusEvent<InputElement>) {
     this.props.onBlur?.(evt);
     this.setState({ focused: false });
@@ -237,7 +240,6 @@ export class Input extends React.Component<InputProps, State> {
 
   setDirtyOnChange = debounce(() => this.setDirty(), 500);
 
-  @boundMethod
   onChange(evt: React.ChangeEvent<any>) {
     this.props.onChange?.(evt.currentTarget.value, evt);
     this.validate();
@@ -251,7 +253,6 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
-  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<InputElement>) {
     this.props.onKeyDown?.(evt);
 
@@ -329,7 +330,6 @@ export class Input extends React.Component<InputProps, State> {
     };
   }
 
-  @boundMethod
   bindRef(elem: InputElement) {
     this.input = elem;
   }

src/renderer/components/input/search-input.tsx

@@ -7,7 +7,7 @@ import "./search-input.scss";
 
 import React, { createRef } from "react";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../utils";
+import { cssNames, autoBind } from "../../utils";
 import { Icon } from "../icon";
 import type { InputProps } from "./input";
 import { Input } from "./input";
@@ -33,6 +33,11 @@ export class SearchInput extends React.Component<SearchInputProps> {
 
   private inputRef = createRef<Input>();
 
+  constructor(props: SearchInputProps) {
+    super(props);
+    autoBind(this);
+  }
+
   componentDidMount() {
     if (!this.props.bindGlobalFocusHotkey) return;
     window.addEventListener("keydown", this.onGlobalKey);
@@ -42,14 +47,12 @@ export class SearchInput extends React.Component<SearchInputProps> {
     window.removeEventListener("keydown", this.onGlobalKey);
   }
 
-  @boundMethod
   onGlobalKey(evt: KeyboardEvent) {
     if (evt.key === "f" && (isMac ? evt.metaKey : evt.ctrlKey)) {
       this.inputRef.current.focus();
     }
   }
 
-  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<any>) {
     this.props.onKeyDown?.(evt);
 
@@ -59,7 +62,6 @@ export class SearchInput extends React.Component<SearchInputProps> {
     }
   }
 
-  @boundMethod
   clear() {
     if (this.props.onClear) {
       this.props.onClear();

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

@@ -14,7 +14,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import type { IClassName } from "../../utils";
-import { boundMethod, cssNames, isReactNode, prevDefault, stopPropagation } from "../../utils";
+import { autoBind, cssNames, isReactNode, prevDefault, stopPropagation } from "../../utils";
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
@@ -68,13 +68,13 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
   constructor(props: ItemListLayoutContentProps<I>) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   @computed get failedToLoad() {
     return this.props.store.failedLoading;
   }
 
-  @boundMethod
   renderRow(item: I) {
     return this.getTableRow(item);
   }
@@ -133,7 +133,6 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
     );
   }
 
-  @boundMethod
   getRow(uid: string) {
     return (
       <div key={uid}>
@@ -150,7 +149,6 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
     );
   }
 
-  @boundMethod
   removeItemsDialog(selectedItems: I[]) {
     const { customizeRemoveDialog, store } = this.props;
     const visibleMaxNamesCount = 5;

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

@@ -11,7 +11,7 @@ import { computed, makeObservable, untracked } from "mobx";
 import type { ConfirmDialogParams } from "../confirm-dialog";
 import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table";
 import type { IClassName, StorageHelper } from "../../utils";
-import { boundMethod, cssNames, noop } from "../../utils";
+import { autoBind, cssNames, noop } from "../../utils";
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import type { ItemObject, ItemStore } from "../../../common/item.store";
 import type { SearchInputUrlProps } from "../input";
@@ -120,6 +120,7 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
   constructor(props: ItemListLayoutProps<I> & Dependencies) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   async componentDidMount() {
@@ -160,7 +161,6 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
     return activeFilters;
   }
 
-  @boundMethod
   toggleFilters() {
     this.showFilters = !this.showFilters;
   }

src/renderer/components/kube-object-menu/kube-object-menu.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import type { MenuActionsProps } from "../menu";
 import { MenuActions } from "../menu";
@@ -31,7 +31,11 @@ interface Dependencies {
   createEditResourceTab: (kubeObject: KubeObject) => void;
 }
 
-class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject> extends React.Component<KubeObjectMenuProps<TKubeObject> & Dependencies> {
+class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject, Props extends KubeObjectMenuProps<TKubeObject> & Dependencies> extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    autoBind(this);
+  }
 
   get store() {
     const { object } = this.props;
@@ -49,13 +53,11 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject> extends React.Co
     return this.props.removable ?? Boolean(this.store?.remove);
   }
 
-  @boundMethod
   async update() {
     this.props.hideDetails();
     this.props.createEditResourceTab(this.props.object);
   }
 
-  @boundMethod
   async remove() {
     this.props.hideDetails();
     const { object, removeAction } = this.props;
@@ -64,7 +66,6 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject> extends React.Co
     else await this.store.remove(object);
   }
 
-  @boundMethod
   renderRemoveMessage() {
     const { object } = this.props;
 

src/renderer/components/menu/menu-actions.tsx

@@ -8,7 +8,7 @@ import "./menu-actions.scss";
 import React, { isValidElement } from "react";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import type { IconProps } from "../icon";
 import { Icon } from "../icon";
@@ -48,9 +48,9 @@ export class MenuActions extends React.Component<MenuActionsProps> {
   constructor(props: MenuActionsProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
-  @boundMethod
   remove() {
     const { removeAction } = this.props;
     let { removeConfirmationMessage } = this.props;

src/renderer/components/render-delay/render-delay.tsx

@@ -6,7 +6,6 @@
 import React from "react";
 import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import { boundMethod } from "../../utils";
 
 export interface RenderDelayProps {
   placeholder?: React.ReactNode;
@@ -32,10 +31,7 @@ export class RenderDelay extends React.Component<RenderDelayProps> {
     window.cancelIdleCallback(this.showContents);
   }
 
-  @boundMethod
+  showContents = () => this.isVisible = true;
-  showContents() {
-    this.isVisible = true;
-  }
 
   render() {
     if (!this.isVisible) {

src/renderer/components/select/select.tsx

@@ -17,7 +17,7 @@ import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } fr
 import type { CreatableProps } from "react-select/creatable";
 
 import { ThemeStore } from "../../theme.store";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 
 const { Menu } = components;
 
@@ -52,6 +52,7 @@ export class Select extends React.Component<SelectProps> {
   constructor(props: SelectProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   @computed get themeClass() {
@@ -97,14 +98,12 @@ export class Select extends React.Component<SelectProps> {
     return options as SelectOption[];
   }
 
-  @boundMethod
   onChange(value: SelectOption, meta: ActionMeta<any>) {
     if (this.props.onChange) {
       this.props.onChange(value, meta);
     }
   }
 
-  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);

src/renderer/components/table/table-cell.tsx

@@ -8,7 +8,7 @@ import type { TableSortBy, TableSortParams } from "./table";
 
 import type { ReactNode } from "react";
 import React from "react";
-import { boundMethod, cssNames, displayBooleans } from "../../utils";
+import { autoBind, cssNames, displayBooleans } from "../../utils";
 import { Icon } from "../icon";
 import { Checkbox } from "../checkbox";
 
@@ -78,7 +78,11 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
 }
 
 export class TableCell extends React.Component<TableCellProps> {
-  @boundMethod
+  constructor(props: TableCellProps) {
+    super(props);
+    autoBind(this);
+  }
+
   onClick(evt: React.MouseEvent<HTMLDivElement>) {
     if (this.props.onClick) {
       this.props.onClick(evt);

src/renderer/components/table/table.tsx

@@ -7,7 +7,7 @@ import "./table.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import type { TableRowElem, TableRowProps } from "./table-row";
 import { TableRow } from "./table-row";
 import type { TableHeadElem, TableHeadProps } from "./table-head";
@@ -99,6 +99,7 @@ class NonInjectedTable<Item> extends React.Component<TableProps<Item> & Dependen
   constructor(props: TableProps<Item> & Dependencies) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   componentDidMount() {
@@ -173,7 +174,6 @@ class NonInjectedTable<Item> extends React.Component<TableProps<Item> & Dependen
     onSort?.({ sortBy, orderBy });
   }
 
-  @boundMethod
   sort(colName: TableSortBy) {
     const { sortBy, orderBy } = this.sortParams;
     const sameColumn = sortBy == colName;

src/renderer/components/tabs/tabs.tsx

@@ -6,7 +6,7 @@
 import "./tabs.scss";
 import type { DOMAttributes } from "react";
 import React from "react";
-import { boundMethod, cssNames } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import { Icon } from "../icon";
 
 const TabsContext = React.createContext<TabsContextValue>({});
@@ -28,10 +28,7 @@ export interface TabsProps<D = any> extends TabsContextValue<D>, Omit<DOMAttribu
 export class Tabs extends React.PureComponent<TabsProps> {
   public elem: HTMLElement;
 
-  @boundMethod
+  bindRef = (elem: HTMLElement) => this.elem = elem;
-  protected bindRef(elem: HTMLElement) {
-    this.elem = elem;
-  }
 
   render() {
     const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props;
@@ -69,6 +66,11 @@ export class Tab extends React.PureComponent<TabProps> {
   declare context: TabsContextValue;
   public ref = React.createRef<HTMLDivElement>();
 
+  constructor(props: TabProps) {
+    super(props);
+    autoBind(this);
+  }
+
   get isActive() {
     const { active, value } = this.props;
 
@@ -84,7 +86,6 @@ export class Tab extends React.PureComponent<TabProps> {
     this.ref.current?.scrollIntoViewIfNeeded?.();
   }
 
-  @boundMethod
   onClick(evt: React.MouseEvent<HTMLElement>) {
     const { value, active, disabled, onClick } = this.props;
 
@@ -96,13 +97,11 @@ export class Tab extends React.PureComponent<TabProps> {
     this.context.onChange?.(value);
   }
 
-  @boundMethod
   onFocus(evt: React.FocusEvent<HTMLElement>) {
     this.props.onFocus?.(evt);
     this.scrollIntoView();
   }
 
-  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
     if (evt.key === " " || evt.key === "Enter") {
       this.ref.current?.click();

src/renderer/components/tooltip/tooltip.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 import type { IClassName } from "../../utils";
-import { boundMethod, cssNames } from "../../utils";
+import { cssNames, autoBind } from "../../utils";
 import { observable, makeObservable, action } from "mobx";
 
 export enum TooltipPosition {
@@ -61,6 +61,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   constructor(props: TooltipProps) {
     super(props);
     makeObservable(this);
+    autoBind(this);
   }
 
   get targetElem(): HTMLElement {
@@ -89,19 +90,18 @@ export class Tooltip extends React.Component<TooltipProps> {
     this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget);
   }
 
-  @action.bound
+  @action
   protected onEnterTarget() {
     this.isVisible = true;
     requestAnimationFrame(action(() => this.isContentVisible = true));
   }
 
-  @action.bound
+  @action
   protected onLeaveTarget() {
     this.isVisible = false;
     this.isContentVisible = false;
   }
 
-  @boundMethod
   refreshPosition() {
     const { preferredPositions } = this.props;
     const { elem, targetElem } = this;
@@ -219,7 +219,6 @@ export class Tooltip extends React.Component<TooltipProps> {
     };
   }
 
-  @boundMethod
   bindRef(elem: HTMLElement) {
     this.elem = elem;
   }

src/renderer/search-store/search-store.ts

@@ -4,7 +4,7 @@
  */
 
 import { action, computed, observable, makeObservable } from "mobx";
-import { boundMethod } from "../utils";
+import autoBind from "auto-bind";
 
 export class SearchStore {
   /**
@@ -15,6 +15,11 @@ export class SearchStore {
     return value ? value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") : "";
   }
 
+  constructor() {
+    makeObservable(this);
+    autoBind(this);
+  }
+
   /**
    * Text in the search input
    *
@@ -36,10 +41,6 @@ export class SearchStore {
    */
   @observable activeOverlayIndex = -1;
 
-  constructor() {
-    makeObservable(this);
-  }
-
   /**
    * Sets default activeOverlayIndex
    * @param text An array of any textual data (logs, for example)
@@ -109,12 +110,10 @@ export class SearchStore {
     return prev;
   }
 
-  @boundMethod
   public setNextOverlayActive(): void {
     this.activeOverlayIndex = this.getNextOverlay(true);
   }
 
-  @boundMethod
   public setPrevOverlayActive(): void {
     this.activeOverlayIndex = this.getPrevOverlay(true);
   }
@@ -140,7 +139,6 @@ export class SearchStore {
    * @param line Index of the line where overlay is located
    * @param occurrence Number of the overlay within one line
    */
-  @boundMethod
   public isActiveOverlay(line: number, occurrence: number): boolean {
     const firstLineIndex = this.occurrences.findIndex(item => item === line);
 

yarn.lock

@@ -2913,11 +2913,6 @@ auto-bind@^4.0.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
-autobind-decorator@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-2.4.0.tgz#ea9e1c98708cf3b5b356f7cf9f10f265ff18239c"
-  integrity sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==
-
 await-lock@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/await-lock/-/await-lock-2.1.0.tgz#bc78c51d229a34d5d90965a1c94770e772c6145e"