mobx-6: replacing @autobind() as method-decorator to @boundMethod

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

package.json

@@ -184,6 +184,7 @@
     "abort-controller": "^3.0.0",
     "array-move": "^3.0.0",
     "auto-bind": "^4.0.0",
+    "autobind-decorator": "^2.4.0",
     "await-lock": "^2.1.0",
     "byline": "^5.0.0",
     "chalk": "^4.1.0",

src/common/search-store.ts

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

src/common/utils/autobind.ts

@@ -1,8 +1,8 @@
-// Automatically bind methods to their class instance
-// API: https://github.com/sindresorhus/auto-bind
+import {boundMethod, boundClass} from "autobind-decorator";
 import autoBindClass, { Options } from "auto-bind";
 import autoBindReactClass from "auto-bind/react";
 
+// Automatically bind methods to their class instance
 export function autoBind<T extends object>(obj: T, opts?: Options): T {
   if ("componentWillUnmount" in obj) {
     return autoBindReactClass(obj as any, opts);
@@ -11,6 +11,9 @@ export function autoBind<T extends object>(obj: T, opts?: Options): T {
   return autoBindClass(obj, opts);
 }
 
-export function autobind(): any {
-  return (): void => undefined; // noop
-}
+// Class/method decorators
+// Note: @boundClass doesn't work with mobx-6.x/@action decorator
+export {
+  boundClass,
+  boundMethod,
+};

src/renderer/api/terminal-api.ts

@@ -1,5 +1,5 @@
 import { stringify } from "querystring";
-import { autobind, base64, EventEmitter } from "../utils";
+import { boundMethod, base64, EventEmitter } from "../utils";
 import { WebSocketApi } from "./websocket-api";
 import isEqual from "lodash/isEqual";
 import { isDevelopment } from "../../common/vars";
@@ -85,7 +85,7 @@ export class TerminalApi extends WebSocketApi {
     this.onReady.removeAllListeners();
   }
 
-  @autobind()
+  @boundMethod
   protected _onReady(data: string) {
     if (!data) return;
     this.isReady = true;

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

@@ -5,7 +5,7 @@ import { getChartDetails, HelmChart } from "../../api/endpoints/helm-charts.api"
 import { observable, autorun, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
-import { autobind, stopPropagation } from "../../utils";
+import { boundMethod, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
@@ -51,7 +51,7 @@ export class HelmChartDetails extends Component<Props> {
       });
   });
 
-  @autobind()
+  @boundMethod
   async onVersionChange({ value: version }: SelectOption<string>) {
     this.selectedChart = this.chartVersions.find(chart => chart.version === version);
     this.readme = null;
@@ -68,7 +68,7 @@ export class HelmChartDetails extends Component<Props> {
     }
   }
 
-  @autobind()
+  @boundMethod
   install() {
     createInstallChartTab(this.selectedChart);
     this.props.hideDetails();

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 { boundMethod, cssNames } from "../../utils";
 import { releaseStore } from "./release.store";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
 import { MenuItem } from "../menu";
@@ -14,12 +14,12 @@ interface Props extends MenuActionsProps {
 }
 
 export class HelmReleaseMenu extends React.Component<Props> {
-  @autobind()
+  @boundMethod
   remove() {
     return releaseStore.remove(this.props.release);
   }
 
-  @autobind()
+  @boundMethod
   upgrade() {
     const { release, hideDetails } = this.props;
 
@@ -27,7 +27,7 @@ export class HelmReleaseMenu extends React.Component<Props> {
     hideDetails && hideDetails();
   }
 
-  @autobind()
+  @boundMethod
   rollback() {
     ReleaseRollbackDialog.open(this.props.release);
   }

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

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

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

@@ -12,7 +12,7 @@ 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 { boundMethod } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Tab, Tabs } from "../tabs";
 import { catalogCategoryRegistry } from "../../../common/catalog";
@@ -114,7 +114,7 @@ export class Catalog extends React.Component {
     );
   }
 
-  @autobind()
+  @boundMethod
   renderItemMenu(item: CatalogEntityItem) {
     const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source);
 

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 { boundMethod, cssNames, prevDefault } from "../../utils";
 import { ItemObject } from "../../item.store";
 import { Spinner } from "../spinner";
 import { ThemeStore } from "../../theme.store";
@@ -87,7 +87,7 @@ export class ClusterIssues extends React.Component<Props> {
     return warnings;
   }
 
-  @autobind()
+  @boundMethod
   getTableRow(uid: string) {
     const { warnings } = this;
     const warning = warnings.find(warn => warn.getId() == uid);

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

@@ -6,7 +6,7 @@ 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 { boundMethod, 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";
@@ -519,7 +519,7 @@ export class Extensions extends React.Component {
     );
   }
 
-  @autobind()
+  @boundMethod
   renderExtension(extension: InstalledExtension) {
     const { id, isEnabled, manifest } = extension;
     const { name, description, version } = manifest;

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

@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { autobind } from "../../utils";
+import { boundMethod } from "../../utils";
 import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { getDetailsUrl } from "../kube-object";
@@ -24,7 +24,7 @@ export class EndpointSubsetList extends React.Component<Props> {
     return this.renderAddressTableRow(address);
   }
 
-  @autobind()
+  @boundMethod
   getNotReadyAddressTableRow(ip: string) {
     const { subset} = this.props;
     const address = subset.getNotReadyAddresses().find(address => address.getId() == ip);
@@ -32,7 +32,7 @@ export class EndpointSubsetList extends React.Component<Props> {
     return this.renderAddressTableRow(address);
   }
 
-  @autobind()
+  @boundMethod
   renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
     return (
       <div>
@@ -58,7 +58,7 @@ export class EndpointSubsetList extends React.Component<Props> {
     );
   }
 
-  @autobind()
+  @boundMethod
   renderAddressTableRow(address: EndpointAddress) {
     const { endpoint } = this.props;
 

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

@@ -3,7 +3,7 @@ import "./volume-details-list.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { PersistentVolume } from "../../api/endpoints/persistent-volume.api";
-import { autobind } from "../../../common/utils/autobind";
+import { boundMethod } from "../../../common/utils/autobind";
 import { TableRow } from "../table/table-row";
 import { cssNames, prevDefault } from "../../utils";
 import { showDetails } from "../kube-object/kube-object-details";
@@ -33,7 +33,7 @@ export class VolumeDetailsList extends React.Component<Props> {
     [sortBy.status]: (volume: PersistentVolume) => volume.getStatus(),
   };
 
-  @autobind()
+  @boundMethod
   getTableRow(uid: string) {
     const { persistentVolumes } = this.props;
     const volume = persistentVolumes.find(volume => volume.getId() === uid);

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

@@ -3,7 +3,7 @@ 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 { boundMethod, prevDefault } from "../../utils";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { ConfirmDialog } from "../confirm-dialog";
 import { DrawerTitle } from "../drawer";
@@ -47,7 +47,7 @@ export class RoleBindingDetails extends React.Component<Props> {
     );
   }
 
-  @autobind()
+  @boundMethod
   removeSelectedSubjects() {
     const { object: roleBinding } = this.props;
     const { selectedSubjects } = this;

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

@@ -9,7 +9,7 @@ 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";
+import { boundMethod } from "../../utils";
 
 const resources: KubeResource[] = [
   "pods",
@@ -23,7 +23,7 @@ const resources: KubeResource[] = [
 
 @observer
 export class OverviewStatuses extends React.Component {
-  @autobind()
+  @boundMethod
   renderWorkload(resource: KubeResource): React.ReactElement {
     const store = workloadStores[resource];
     const items = store.getAllByNs(namespaceStore.contextNamespaces);

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 { boundMethod, 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,7 +103,7 @@ export class PodDetailsList extends React.Component<Props> {
     );
   }
 
-  @autobind()
+  @boundMethod
   getTableRow(uid: string) {
     const { pods } = this.props;
     const pod = pods.find(pod => pod.getId() == uid);

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

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

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

@@ -5,7 +5,7 @@ import "./ace-editor.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
-import { autobind, cssNames, noop } from "../../utils";
+import { boundMethod, cssNames, noop } from "../../utils";
 
 interface Props extends Partial<Ace.EditorOptions> {
   className?: string;
@@ -128,7 +128,7 @@ export class AceEditor extends React.Component<Props, State> {
     });
   }
 
-  @autobind()
+  @boundMethod
   onCursorPosChange() {
     const { onCursorPosChange } = this.props;
 
@@ -137,7 +137,7 @@ export class AceEditor extends React.Component<Props, State> {
     }
   }
 
-  @autobind()
+  @boundMethod
   onChange(delta: Ace.Delta) {
     const { onChange } = 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 { boundMethod, cssNames, noop } from "../../utils";
 
 export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
 
@@ -71,7 +71,7 @@ export class Animate extends React.Component<AnimateProps> {
     this.statusClassName.leave = false;
   }
 
-  @autobind()
+  @boundMethod
   onTransitionEnd(evt: React.TransitionEvent) {
     const { enter, leave } = this.statusClassName;
     const { onTransitionEnd } = this.contentElem.props;

src/renderer/components/checkbox/checkbox.tsx

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

src/renderer/components/clipboard/clipboard.tsx

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

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

@@ -2,7 +2,7 @@ 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 { boundMethod } from "../../../../common/utils";
 import { shell } from "electron";
 
 interface Props {
@@ -12,7 +12,7 @@ interface Props {
 @observer
 export class ClusterKubeconfig extends React.Component<Props> {
 
-  @autobind()
+  @boundMethod
   openKubeconfig() {
     const { cluster } = this.props;
 

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

@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { ClusterStore } from "../../../../common/cluster-store";
 import { Cluster } from "../../../../main/cluster";
-import { autobind } from "../../../utils";
+import { boundMethod } from "../../../utils";
 import { Button } from "../../button";
 import { ConfirmDialog } from "../../confirm-dialog";
 
@@ -12,7 +12,7 @@ interface Props {
 
 @observer
 export class RemoveClusterButton extends React.Component<Props> {
-  @autobind()
+  @boundMethod
   confirmRemoveCluster() {
     const { cluster } = this.props;
 

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 { boundMethod, cssNames, prevDefault } from "../../utils";
 import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
@@ -26,7 +26,7 @@ export class DockTab extends React.Component<DockTabProps> {
     return this.props.value.id;
   }
 
-  @autobind()
+  @boundMethod
   close() {
     dockStore.closeTab(this.tabId);
   }

src/renderer/components/dock/install-chart.tsx

@@ -7,7 +7,7 @@ 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 { boundMethod, prevDefault } from "../../utils";
 import { IChartInstallData, installChartStore } from "./install-chart.store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
@@ -54,7 +54,7 @@ export class InstallChart extends Component<Props> {
     return installChartStore.details.getData(this.tabId);
   }
 
-  @autobind()
+  @boundMethod
   viewRelease() {
     const { release } = this.releaseDetails;
 
@@ -67,14 +67,14 @@ export class InstallChart extends Component<Props> {
     dockStore.closeTab(this.tabId);
   }
 
-  @autobind()
+  @boundMethod
   save(data: Partial<IChartInstallData>) {
     const chart = { ...this.chartData, ...data };
 
     installChartStore.setData(this.tabId, chart);
   }
 
-  @autobind()
+  @boundMethod
   onVersionChange(option: SelectOption) {
     const version = option.value;
 
@@ -82,18 +82,18 @@ export class InstallChart extends Component<Props> {
     installChartStore.loadValues(this.tabId);
   }
 
-  @autobind()
+  @boundMethod
   onValuesChange(values: string, error?: string) {
     this.error = error;
     this.save({ values });
   }
 
-  @autobind()
+  @boundMethod
   onNamespaceChange(opt: SelectOption) {
     this.save({ namespace: opt.value });
   }
 
-  @autobind()
+  @boundMethod
   onReleaseNameChange(name: string) {
     this.save({ releaseName: name });
   }

src/renderer/components/dock/logs.tsx

@@ -3,7 +3,7 @@ import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { searchStore } from "../../../common/search-store";
-import { autobind } from "../../utils";
+import { boundMethod } from "../../utils";
 import { IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
 import { LogResourceSelector } from "./log-resource-selector";
@@ -54,7 +54,7 @@ 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()
+  @boundMethod
   onSearch() {
     this.toOverlay();
   }
@@ -62,7 +62,7 @@ export class Logs extends React.Component<Props> {
   /**
    * Scrolling to active overlay (search word highlight)
    */
-  @autobind()
+  @boundMethod
   toOverlay() {
     const { activeOverlayLine } = searchStore;
 

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

@@ -2,7 +2,7 @@ import "./terminal-tab.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
@@ -33,7 +33,7 @@ export class TerminalTab extends React.Component<Props> {
     return terminalStore.isDisconnected(this.tabId);
   }
 
-  @autobind()
+  @boundMethod
   reconnect() {
     terminalStore.reconnect(this.tabId);
   }

src/renderer/components/dock/terminal.ts

@@ -5,7 +5,7 @@ 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 } from "../../utils";
+import { boundMethod } from "../../utils";
 import { isMac } from "../../../common/vars";
 import { camelCase } from "lodash";
 
@@ -36,7 +36,7 @@ export class Terminal {
   public scrollPos = 0;
   public disposers: Function[] = [];
 
-  @autobind()
+  @boundMethod
   protected setTheme(colors: Record<string, string>) {
     // Replacing keys stored in styles to format accepted by terminal
     // E.g. terminalBrightBlack -> brightBlack

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

@@ -5,7 +5,7 @@ import { Icon } from "../icon";
 import { Input } from "../input";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { autobind } from "../../utils";
+import { boundMethod } from "../../utils";
 
 export interface Props<T> {
   items: T[],
@@ -33,7 +33,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
     makeObservable(this);
   }
 
-  @autobind()
+  @boundMethod
   onSubmit(val: string) {
     const { add } = this.props;
 

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 { boundMethod, cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
 
@@ -36,7 +36,7 @@ export class Icon extends React.PureComponent<IconProps> {
     return interactive ?? !!(onClick || href || link);
   }
 
-  @autobind()
+  @boundMethod
   onClick(evt: React.MouseEvent) {
     if (this.props.disabled) {
       return;
@@ -47,7 +47,7 @@ export class Icon extends React.PureComponent<IconProps> {
     }
   }
 
-  @autobind()
+  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<any>) {
     switch (evt.nativeEvent.code) {
       case "Space":

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

@@ -1,6 +1,6 @@
 import "./drop-file-input.scss";
 import React from "react";
-import { autobind, cssNames, IClassName } from "../../utils";
+import { boundMethod, cssNames, IClassName } from "../../utils";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import logger from "../../../main/logger";
@@ -24,17 +24,17 @@ export class DropFileInput<T extends HTMLElement = any> extends React.Component<
     makeObservable(this);
   }
 
-  @autobind()
+  @boundMethod
   onDragEnter() {
     this.dropAreaActive = true;
   }
 
-  @autobind()
+  @boundMethod
   onDragLeave() {
     this.dropAreaActive = false;
   }
 
-  @autobind()
+  @boundMethod
   onDragOver(evt: React.DragEvent<T>) {
     if (this.props.onDragOver) {
       this.props.onDragOver(evt);
@@ -43,7 +43,7 @@ export class DropFileInput<T extends HTMLElement = any> extends React.Component<
     evt.dataTransfer.dropEffect = "move";
   }
 
-  @autobind()
+  @boundMethod
   onDrop(evt: React.DragEvent<T>) {
     if (this.props.onDrop) {
       this.props.onDrop(evt);

src/renderer/components/input/input.tsx

@@ -1,7 +1,7 @@
 import "./input.scss";
 
 import React, { DOMAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-import { autobind, cssNames, debouncePromise, getRandId } from "../../utils";
+import { boundMethod, cssNames, debouncePromise, getRandId } from "../../utils";
 import { Icon } from "../icon";
 import { Tooltip, TooltipProps } from "../tooltip";
 import * as Validators from "./input_validators";
@@ -195,7 +195,7 @@ export class Input extends React.Component<InputProps, State> {
     this.setState({ dirty });
   }
 
-  @autobind()
+  @boundMethod
   onFocus(evt: React.FocusEvent<InputElement>) {
     const { onFocus, autoSelectOnFocus } = this.props;
 
@@ -204,7 +204,7 @@ export class Input extends React.Component<InputProps, State> {
     this.setState({ focused: true });
   }
 
-  @autobind()
+  @boundMethod
   onBlur(evt: React.FocusEvent<InputElement>) {
     const { onBlur } = this.props;
 
@@ -213,7 +213,7 @@ export class Input extends React.Component<InputProps, State> {
     this.setState({ focused: false });
   }
 
-  @autobind()
+  @boundMethod
   onChange(evt: React.ChangeEvent<any>) {
     if (this.props.onChange) {
       this.props.onChange(evt.currentTarget.value, evt);
@@ -232,7 +232,7 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
-  @autobind()
+  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<any>) {
     const modified = evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey;
 
@@ -281,7 +281,7 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
-  @autobind()
+  @boundMethod
   bindRef(elem: InputElement) {
     this.input = elem;
   }

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

@@ -2,7 +2,7 @@ import "./search-input.scss";
 
 import React, { createRef } from "react";
 import { observer } from "mobx-react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { Input, InputProps } from "./input";
 
@@ -37,7 +37,7 @@ export class SearchInput extends React.Component<Props> {
     window.removeEventListener("keydown", this.onGlobalKey);
   }
 
-  @autobind()
+  @boundMethod
   onGlobalKey(evt: KeyboardEvent) {
     const meta = evt.metaKey || evt.ctrlKey;
 
@@ -46,7 +46,7 @@ export class SearchInput extends React.Component<Props> {
     }
   }
 
-  @autobind()
+  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<any>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);
@@ -60,7 +60,7 @@ export class SearchInput extends React.Component<Props> {
     }
   }
 
-  @autobind()
+  @boundMethod
   clear() {
     if (this.props.onClear) {
       this.props.onClear();

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

@@ -6,7 +6,7 @@ import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
-import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
+import { boundMethod, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
 import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
@@ -221,7 +221,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     return this.applyFilters(filterItems.concat(this.props.filterItems), items);
   }
 
-  @autobind()
+  @boundMethod
   getRow(uid: string) {
     const {
       isSelectable, renderTableHeader, renderTableContents, renderItemMenu,
@@ -274,7 +274,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     );
   }
 
-  @autobind()
+  @boundMethod
   removeItemsDialog() {
     const { customizeRemoveDialog, store } = this.props;
     const { selectedItems, removeSelectedItems } = store;
@@ -294,7 +294,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     });
   }
 
-  @autobind()
+  @boundMethod
   toggleFilters() {
     this.showFilters = !this.showFilters;
   }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
 import { editResourceTab } from "../dock/edit-resource.store";
 import { MenuActions, MenuActionsProps } from "../menu/menu-actions";
@@ -34,13 +34,13 @@ export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeOb
     return removable !== undefined ? removable : !!(this.store && this.store.remove);
   }
 
-  @autobind()
+  @boundMethod
   async update() {
     hideDetails();
     editResourceTab(this.props.object);
   }
 
-  @autobind()
+  @boundMethod
   async remove() {
     hideDetails();
     const { object, removeAction } = this.props;
@@ -49,7 +49,7 @@ export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeOb
     else await this.store.remove(object);
   }
 
-  @autobind()
+  @boundMethod
   renderRemoveMessage() {
     const { object } = this.props;
 

src/renderer/components/layout/page-layout.tsx

@@ -2,7 +2,7 @@ import "./page-layout.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { autobind, cssNames, IClassName } from "../../utils";
+import { boundMethod, cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
 import { Icon } from "../icon";
 
@@ -25,7 +25,7 @@ const defaultProps: Partial<PageLayoutProps> = {
 export class PageLayout extends React.Component<PageLayoutProps> {
   static defaultProps = defaultProps as object;
 
-  @autobind()
+  @boundMethod
   back(evt?: React.MouseEvent | KeyboardEvent) {
     if (this.props.back) {
       this.props.back(evt);

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

@@ -3,7 +3,7 @@ import "./menu-actions.scss";
 import React, { isValidElement } from "react";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Icon, IconProps } from "../icon";
 import { Menu, MenuItem, MenuProps } from "../menu";
@@ -43,7 +43,7 @@ export class MenuActions extends React.Component<MenuActionsProps> {
     makeObservable(this);
   }
 
-  @autobind()
+  @boundMethod
   remove() {
     const { removeAction } = this.props;
     let { removeConfirmationMessage } = this.props;

src/renderer/components/select/select.tsx

@@ -5,7 +5,7 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select";
 import Creatable, { CreatableProps } from "react-select/creatable";
 import { ThemeStore } from "../../theme.store";
@@ -85,14 +85,14 @@ export class Select extends React.Component<SelectProps> {
     return options as SelectOption[];
   }
 
-  @autobind()
+  @boundMethod
   onChange(value: SelectOption, meta: ActionMeta<any>) {
     if (this.props.onChange) {
       this.props.onChange(value, meta);
     }
   }
 
-  @autobind()
+  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);

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

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

src/renderer/components/table/table.tsx

@@ -3,7 +3,7 @@ import "./table.scss";
 import React from "react";
 import { orderBy } from "lodash";
 import { observer } from "mobx-react";
-import { autobind, cssNames, noop } from "../../utils";
+import { boundMethod, cssNames, noop } from "../../utils";
 import { TableRow, TableRowElem, TableRowProps } from "./table-row";
 import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
 import { TableCellElem } from "./table-cell";
@@ -120,7 +120,7 @@ export class Table extends React.Component<TableProps> {
     return orderBy(items, sortingCallback, order as any);
   }
 
-  @autobind()
+  @boundMethod
   protected onSort({ sortBy, orderBy }: TableSortParams) {
     setSortParams(this.props.tableId, { sortBy, orderBy });
     const { sortSyncWithUrl, onSort } = this.props;
@@ -135,7 +135,7 @@ export class Table extends React.Component<TableProps> {
     }
   }
 
-  @autobind()
+  @boundMethod
   sort(colName: TableSortBy) {
     const { sortBy, orderBy } = this.sortParams;
     const sameColumn = sortBy == colName;

src/renderer/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
 import "./tabs.scss";
 import React, { DOMAttributes } from "react";
-import { autobind, cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
 import { Icon } from "../icon";
 
 const TabsContext = React.createContext<TabsContextValue>({});
@@ -24,7 +24,7 @@ export interface TabsProps<D = any> extends TabsContextValue<D>, Omit<DOMAttribu
 export class Tabs extends React.PureComponent<TabsProps> {
   public elem: HTMLElement;
 
-  @autobind()
+  @boundMethod
   protected bindRef(elem: HTMLElement) {
     this.elem = elem;
   }
@@ -82,7 +82,7 @@ export class Tab extends React.PureComponent<TabProps> {
     });
   }
 
-  @autobind()
+  @boundMethod
   onClick(evt: React.MouseEvent<HTMLElement>) {
     const { value, active, disabled, onClick } = this.props;
     const { onChange } = this.context;
@@ -92,7 +92,7 @@ export class Tab extends React.PureComponent<TabProps> {
     if (onChange) onChange(value);
   }
 
-  @autobind()
+  @boundMethod
   onFocus(evt: React.FocusEvent<HTMLElement>) {
     const { onFocus } = this.props;
 
@@ -100,7 +100,7 @@ export class Tab extends React.PureComponent<TabProps> {
     this.scrollIntoView();
   }
 
-  @autobind()
+  @boundMethod
   onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
     const ENTER_KEY = evt.keyCode === 13;
     const SPACE_KEY = evt.keyCode === 32;
@@ -117,7 +117,7 @@ export class Tab extends React.PureComponent<TabProps> {
     }
   }
 
-  @autobind()
+  @boundMethod
   protected bindRef(elem: HTMLElement) {
     this.elem = elem;
   }

src/renderer/components/tooltip/tooltip.tsx

@@ -3,7 +3,7 @@ import "./tooltip.scss";
 import React from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
-import { autobind, cssNames, IClassName } from "../../utils";
+import { boundMethod, cssNames, IClassName } from "../../utils";
 import { observable, makeObservable } from "mobx";
 
 export enum TooltipPosition {
@@ -78,18 +78,18 @@ export class Tooltip extends React.Component<TooltipProps> {
     this.hoverTarget.removeEventListener("mouseleave", this.onLeaveTarget);
   }
 
-  @autobind()
+  @boundMethod
   protected onEnterTarget() {
     this.isVisible = true;
     this.refreshPosition();
   }
 
-  @autobind()
+  @boundMethod
   protected onLeaveTarget() {
     this.isVisible = false;
   }
 
-  @autobind()
+  @boundMethod
   refreshPosition() {
     const { preferredPositions } = this.props;
     const { elem, targetElem } = this;
@@ -199,7 +199,7 @@ export class Tooltip extends React.Component<TooltipProps> {
     };
   }
 
-  @autobind()
+  @boundMethod
   bindRef(elem: HTMLElement) {
     this.elem = elem;
   }

src/renderer/item.store.ts

@@ -1,5 +1,5 @@
 import orderBy from "lodash/orderBy";
-import { autobind, noop } from "./utils";
+import { autoBind, noop } from "./utils";
 import { action, computed, observable, when, makeObservable } from "mobx";
 
 export interface ItemObject {
@@ -7,7 +7,6 @@ export interface ItemObject {
   getName(): string;
 }
 
-@autobind()
 export abstract class ItemStore<T extends ItemObject = ItemObject> {
   abstract loadAll(...args: any[]): Promise<void | T[]>;
 
@@ -21,6 +20,7 @@ export abstract class ItemStore<T extends ItemObject = ItemObject> {
 
   constructor() {
     makeObservable(this);
+    autoBind(this);
   }
 
   @computed get selectedItems(): T[] {

src/renderer/kube-object.store.ts

@@ -1,7 +1,7 @@
 import type { ClusterContext } from "./components/context";
 
 import { action, computed, observable, reaction, when, makeObservable } from "mobx";
-import { autobind, noop, rejectPromiseBy } from "./utils";
+import { autoBind, noop, rejectPromiseBy } from "./utils";
 import { KubeObject, KubeStatus } from "./api/kube-object";
 import { IKubeWatchEvent } from "./api/kube-watch-api";
 import { ItemStore } from "./item.store";
@@ -16,7 +16,6 @@ export interface KubeObjectStoreLoadingParams {
   reqInit?: RequestInit;
 }
 
-@autobind()
 export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemStore<T> {
   static defaultContext = observable.box<ClusterContext>(); // TODO: support multiple cluster contexts
 
@@ -31,6 +30,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
   constructor() {
     super();
     makeObservable(this);
+    autoBind(this);
     this.bindWatchEventsUpdater();
   }
 

src/renderer/protocol-handler/router.ts

@@ -2,7 +2,7 @@ import { ipcRenderer } from "electron";
 import * as proto from "../../common/protocol-handler";
 import logger from "../../main/logger";
 import Url from "url-parse";
-import { autobind } from "../utils";
+import { boundMethod } from "../utils";
 
 export class LensProtocolRouterRenderer extends proto.LensProtocolRouter {
   /**
@@ -14,7 +14,7 @@ export class LensProtocolRouterRenderer extends proto.LensProtocolRouter {
       .on(proto.ProtocolHandlerExtension, this.ipcExtensionHandler);
   }
 
-  @autobind()
+  @boundMethod
   private ipcInternalHandler(event: Electron.IpcRendererEvent, ...args: any[]): void {
     if (args.length !== 1) {
       return void logger.warn(`${proto.LensProtocolRouter.LoggingPrefix}: unexpected number of args`, { args });
@@ -26,7 +26,7 @@ export class LensProtocolRouterRenderer extends proto.LensProtocolRouter {
     this._routeToInternal(url);
   }
 
-  @autobind()
+  @boundMethod
   private ipcExtensionHandler(event: Electron.IpcRendererEvent, ...args: any[]): void {
     if (args.length !== 1) {
       return void logger.warn(`${proto.LensProtocolRouter.LoggingPrefix}: unexpected number of args`, { args });

src/renderer/theme.store.ts

@@ -1,5 +1,5 @@
 import { computed, observable, reaction, makeObservable } from "mobx";
-import { autoBind, autobind, Singleton } from "./utils";
+import { autoBind, boundMethod, Singleton } from "./utils";
 import { UserStore } from "../common/user-store";
 import logger from "../main/logger";
 
@@ -77,7 +77,7 @@ export class ThemeStore extends Singleton {
     return this.allThemes.get(themeId);
   }
 
-  @autobind()
+  @boundMethod
   protected async loadTheme(themeId: ThemeId): Promise<Theme> {
     try {
       const existingTheme = this.getThemeById(themeId);

yarn.lock

@@ -2713,6 +2713,11 @@ 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"