Upgrade to latest for all linting deps (#4755)

* Upgrade to eslint latest

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix OOM error

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* resolve PR comments

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/item.store.ts

@@ -111,7 +111,7 @@ export abstract class ItemStore<Item extends ItemObject> {
     }
   }
 
-  protected async loadItem(...args: any[]): Promise<Item>
+  protected async loadItem(...args: any[]): Promise<Item>;
   @action
   protected async loadItem(request: () => Promise<Item>, sortItems = true) {
     const item = await Promise.resolve(request()).catch(() => null);

src/common/utils/extended-map.ts

@@ -3,12 +3,14 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, ObservableMap } from "mobx";
+import { action, ObservableMap, runInAction } from "mobx";
 
 export function multiSet<T, V>(map: Map<T, V>, newEntries: [T, V][]): void {
-  for (const [key, val] of newEntries) {
-    map.set(key, val);
-  }
+  runInAction(() => {
+    for (const [key, val] of newEntries) {
+      map.set(key, val);
+    }
+  });
 }
 
 export class ExtendedMap<K, V> extends Map<K, V> {

src/extensions/extensions-store/extensions-store.ts

@@ -42,10 +42,9 @@ export class ExtensionsStore extends BaseStore<LensExtensionsStoreModel> {
     return isBundled || Boolean(this.state.get(id)?.enabled);
   }
 
-  @action
-  mergeState = (extensionsState: Record<LensExtensionId, LensExtensionState>) => {
+  mergeState = action((extensionsState: Record<LensExtensionId, LensExtensionState>) => {
     this.state.merge(extensionsState);
-  };
+  });
 
   @action
   protected fromStore({ extensions }: LensExtensionsStoreModel) {

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

@@ -70,8 +70,7 @@ class NonInjectedAddCluster extends React.Component<Dependencies> {
     ].filter(Boolean);
   }
 
-  @action
-  refreshContexts = debounce(() => {
+  readonly refreshContexts = debounce(action(() => {
     const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
 
     this.kubeContexts.replace(getContexts(config));
@@ -83,10 +82,9 @@ class NonInjectedAddCluster extends React.Component<Dependencies> {
     if (config.contexts.length === 0) {
       this.errors.push('No contexts defined, either missing the "contexts" field, or it is empty.');
     }
-  }, 500);
+  }), 500);
 
-  @action
-  addClusters = async () => {
+  addClusters = action(async () => {
     this.isWaiting = true;
     appEventBus.emit({ name: "cluster-add", action: "click" });
 
@@ -102,7 +100,7 @@ class NonInjectedAddCluster extends React.Component<Dependencies> {
     } catch (error) {
       Notifications.error(`Failed to add clusters: ${error}`);
     }
-  };
+  });
 
   render() {
     return (

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

@@ -18,8 +18,7 @@ import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import createInstallChartTabInjectable
-  from "../dock/create-install-chart-tab/create-install-chart-tab.injectable";
+import createInstallChartTabInjectable from "../dock/create-install-chart-tab/create-install-chart-tab.injectable";
 
 interface Props {
   chart: HelmChart;

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

@@ -57,8 +57,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
     }
   }
 
-  @action
-  updateCategoryItems = (category: CatalogCategory) => {
+  updateCategoryItems = action((category: CatalogCategory) => {
     if (category instanceof EventEmitter) {
       const menuItems: CatalogEntityAddMenu[] = [];
       const context: CatalogEntityAddMenuContext = {
@@ -69,7 +68,7 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
       category.emit("catalogAddMenu", context);
       this.menuItems.set(category.getId(), menuItems);
     }
-  };
+  });
 
   getCategoryFilteredItems = (category: CatalogCategory) => {
     return category.filteredItems(this.menuItems.get(category.getId()) || []);

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

@@ -143,8 +143,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
     return catalogCategoryRegistry.items;
   }
 
-  @action
-  onTabChange = (tabId: string | null) => {
+  onTabChange = action((tabId: string | null) => {
     const activeCategory = this.categories.find(category => category.getId() === tabId);
 
     if (activeCategory) {
@@ -152,7 +151,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
     } else {
       navigate(catalogURL({ params: { group: browseCatalogTab }}));
     }
-  };
+  });
 
   renderNavigation() {
     return (

src/renderer/components/+preferences/kubeconfig-syncs.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import fse from "fs-extra";
-import { action, computed, makeObservable, observable, reaction } from "mobx";
+import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
 import { Notice } from "../+extensions/notice";
@@ -93,7 +93,6 @@ export class KubeconfigSyncs extends React.Component {
     return Array.from(this.syncs.entries(), ([filePath, value]) => ({ filePath, ...value }));
   }
 
-  @action
   onPick = async (filePaths: string[]) => multiSet(this.syncs, await getAllEntries(filePaths));
 
   getIconName(entry: Entry) {

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

@@ -115,8 +115,7 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
     return this.serviceAccountOptions.filter(({ value }) => this.selectedAccounts.has(value));
   }
 
-  @action
-  onOpen = () => {
+  onOpen = action(() => {
     const binding = this.clusterRoleBinding;
 
     if (!binding) {
@@ -137,16 +136,15 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
     );
     this.selectedUsers.replace(uSubjects.map(user => user.name));
     this.selectedGroups.replace(gSubjects.map(group => group.name));
-  };
+  });
 
-  @action
-  reset = () => {
+  reset = action(() => {
     this.selectedRoleRef = undefined;
     this.bindingName = "";
     this.selectedAccounts.clear();
     this.selectedUsers.clear();
     this.selectedGroups.clear();
-  };
+  });
 
   createBindings = async () => {
     const { selectedRoleRef, selectedBindings, bindingName } = this;

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

@@ -116,8 +116,7 @@ export class RoleBindingDialog extends React.Component<Props> {
     return this.serviceAccountOptions.filter(({ value }) => this.selectedAccounts.has(value));
   }
 
-  @action
-  onOpen = () => {
+  onOpen = action(() => {
     const binding = this.roleBinding;
 
     if (!binding) {
@@ -140,17 +139,16 @@ export class RoleBindingDialog extends React.Component<Props> {
     );
     this.selectedUsers.replace(uSubjects.map(user => user.name));
     this.selectedGroups.replace(gSubjects.map(group => group.name));
-  };
+  });
 
-  @action
-  reset = () => {
+  reset = action(() => {
     this.selectedRoleRef = undefined;
     this.bindingName = "";
     this.bindingNamespace = "";
     this.selectedAccounts.clear();
     this.selectedUsers.clear();
     this.selectedGroups.clear();
-  };
+  });
 
   createBindings = async () => {
     const { selectedRoleRef, bindingNamespace: namespace, selectedBindings } = this;

src/renderer/components/+user-management/+service-accounts/details.tsx

@@ -28,27 +28,30 @@ export class ServiceAccountsDetails extends React.Component<Props> {
   @observable secrets: Secret[];
   @observable imagePullSecrets: Secret[];
 
-  @disposeOnUnmount
-  loadSecrets = autorun(async () => {
-    this.secrets = null;
-    this.imagePullSecrets = null;
-    const { object: serviceAccount } = this.props;
+  componentDidMount(): void {
+    disposeOnUnmount(this, [
+      autorun(async () => {
+        this.secrets = null;
+        this.imagePullSecrets = null;
+        const { object: serviceAccount } = this.props;
 
-    if (!serviceAccount) {
-      return;
-    }
-    const namespace = serviceAccount.getNs();
-    const secrets = serviceAccount.getSecrets().map(({ name }) => {
-      return secretsStore.load({ name, namespace });
-    });
+        if (!serviceAccount) {
+          return;
+        }
+        const namespace = serviceAccount.getNs();
+        const secrets = serviceAccount.getSecrets().map(({ name }) => {
+          return secretsStore.load({ name, namespace });
+        });
 
-    this.secrets = await Promise.all(secrets);
-    const imagePullSecrets = serviceAccount.getImagePullSecrets().map(async ({ name }) => {
-      return secretsStore.load({ name, namespace }).catch(() => this.generateDummySecretObject(name));
-    });
+        this.secrets = await Promise.all(secrets);
+        const imagePullSecrets = serviceAccount.getImagePullSecrets().map(async ({ name }) => {
+          return secretsStore.load({ name, namespace }).catch(() => this.generateDummySecretObject(name));
+        });
 
-    this.imagePullSecrets = await Promise.all(imagePullSecrets);
-  });
+        this.imagePullSecrets = await Promise.all(imagePullSecrets);
+      }),
+    ]);
+  }
 
   constructor(props: Props) {
     super(props);

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

@@ -20,19 +20,22 @@ interface Props {
 export class PodDetailsSecrets extends Component<Props> {
   @observable secrets: Map<string, Secret> = observable.map<string, Secret>();
 
-  @disposeOnUnmount
-  secretsLoader = autorun(async () => {
-    const { pod } = this.props;
+  componentDidMount(): void {
+    disposeOnUnmount(this, [
+      autorun(async () => {
+        const { pod } = this.props;
 
-    const secrets = await Promise.all(
-      pod.getSecrets().map(secretName => secretsApi.get({
-        name: secretName,
-        namespace: pod.getNs(),
-      })),
-    );
+        const secrets = await Promise.all(
+          pod.getSecrets().map(secretName => secretsApi.get({
+            name: secretName,
+            namespace: pod.getNs(),
+          })),
+        );
 
-    secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
-  });
+        secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
+      }),
+    ]);
+  }
 
   constructor(props: Props) {
     super(props);

src/renderer/components/dialog/dialog.tsx

@@ -48,9 +48,6 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
     pinned: false,
   };
 
-  @disposeOnUnmount
-  closeOnNavigate = reaction(() => navigation.toString(), () => this.close());
-
   public state: DialogState = {
     isOpen: this.props.isOpen,
   };
@@ -64,7 +61,13 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
   }
 
   componentDidMount() {
-    if (this.isOpen) this.onOpen();
+    if (this.isOpen) {
+      this.onOpen();
+    }
+
+    disposeOnUnmount(this, [
+      reaction(() => navigation.toString(), () => this.close()),
+    ]);
   }
 
   componentDidUpdate(prevProps: DialogProps) {

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

@@ -276,8 +276,7 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action
-  createTab = (rawTabDesc: DockTabCreate, addNumber = true): DockTab => {
+  createTab = action((rawTabDesc: DockTabCreate, addNumber = true): DockTab => {
     const {
       id = uuid.v4(),
       kind,
@@ -307,7 +306,7 @@ export class DockStore implements DockStorageState {
     this.open();
 
     return tab;
-  };
+  });
 
   @action
   closeTab(tabId: TabId) {

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

@@ -93,16 +93,14 @@ class NonInjectedInstallChart extends Component<Props & Dependencies> {
     this.props.installChartStore.loadValues(this.tabId);
   };
 
-  @action
-  onChange = (values: string) => {
+  onChange = action((values: string) => {
     this.error = "";
     this.save({ values });
-  };
+  });
 
-  @action
-  onError = (error: Error | string) => {
+  onError = action((error: Error | string) => {
     this.error = error.toString();
-  };
+  });
 
   onNamespaceChange = (opt: SelectOption) => {
     this.save({ namespace: opt.value });

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

@@ -103,8 +103,7 @@ export class LogList extends React.Component<LogListProps> {
    * Checks if JumpToBottom button should be visible and sets its observable
    * @param props Scrolling props from virtual list core
    */
-  @action
-  setButtonVisibility = (props: ListOnScrollProps) => {
+  setButtonVisibility = action((props: ListOnScrollProps) => {
     const offset = 100 * this.lineHeight;
     const { scrollHeight } = this.virtualListDiv.current;
     const { scrollOffset } = props;
@@ -114,19 +113,18 @@ export class LogList extends React.Component<LogListProps> {
     } else {
       this.isJumpButtonVisible = true;
     }
-  };
+  });
 
   /**
    * Checks if last log line considered visible to user, setting its observable
    * @param props Scrolling props from virtual list core
    */
-  @action
-  setLastLineVisibility = (props: ListOnScrollProps) => {
+  setLastLineVisibility = action((props: ListOnScrollProps) => {
     const { scrollHeight, clientHeight } = this.virtualListDiv.current;
     const { scrollOffset } = props;
 
     this.isLastLineVisible = (clientHeight + scrollOffset) === scrollHeight;
-  };
+  });
 
   /**
    * Check if user scrolled to top and new logs should be loaded

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

@@ -86,16 +86,14 @@ export class NonInjectedUpgradeChart extends React.Component<Props & Dependencie
     this.version = this.versions[0];
   }
 
-  @action
-  onChange = (value: string) => {
+  onChange = action((value: string) => {
     this.error = "";
     this.props.upgradeChartStore.values.setData(this.tabId, value);
-  };
+  });
 
-  @action
-  onError = (error: Error | string) => {
+  onError = action((error: Error | string) => {
     this.error = error.toString();
-  };
+  });
 
   upgrade = async () => {
     if (this.error) return null;

src/renderer/components/icon/icon.tsx

@@ -5,8 +5,7 @@
 
 import "./icon.scss";
 
-import React, { ReactNode } from "react";
-import { findDOMNode } from "react-dom";
+import React, { createRef, ReactNode } from "react";
 import { NavLink } from "react-router-dom";
 import type { LocationDescriptor } from "history";
 import { boundMethod, cssNames } from "../../utils";
@@ -31,6 +30,8 @@ export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorPr
 
 @withTooltip
 export class Icon extends React.PureComponent<IconProps> {
+  private readonly ref = createRef<HTMLAnchorElement>();
+
   static defaultProps: IconProps = {
     focusable: true,
   };
@@ -59,10 +60,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
         // fallthrough
       case "Enter": {
-        // eslint-disable-next-line react/no-find-dom-node
-        const icon = findDOMNode(this) as HTMLElement;
-
-        setTimeout(() => icon.click());
+        this.ref.current?.click();
         evt.preventDefault();
         break;
       }
@@ -123,16 +121,16 @@ export class Icon extends React.PureComponent<IconProps> {
       const { className, children } = iconProps;
 
       return (
-        <NavLink className={className} to={link}>
+        <NavLink className={className} to={link} ref={this.ref}>
           {children}
         </NavLink>
       );
     }
 
     if (href) {
-      return <a {...iconProps} href={href}/>;
+      return <a {...iconProps} href={href} ref={this.ref}/>;
     }
 
-    return <i {...iconProps} />;
+    return <i {...iconProps} ref={this.ref} />;
   }
 }

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

@@ -24,10 +24,14 @@ export interface SearchInputUrlProps extends InputProps {
 export class SearchInputUrl extends React.Component<SearchInputUrlProps> {
   @observable inputVal = ""; // fix: use empty string on init to avoid react warnings
 
-  @disposeOnUnmount
-  updateInput = autorun(() => this.inputVal = searchUrlParam.get());
   updateUrl = debounce((val: string) => searchUrlParam.set(val), 250);
 
+  componentDidMount(): void {
+    disposeOnUnmount(this, [
+      autorun(() => this.inputVal = searchUrlParam.get()),
+    ]);
+  }
+
   setValue = (value: string) => {
     this.inputVal = value;
     this.updateUrl(value);

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

@@ -51,31 +51,34 @@ export class KubeObjectDetails extends React.Component {
     }
   }
 
-  @disposeOnUnmount
-  loader = reaction(() => [
-    this.path,
-    this.object, // resource might be updated via watch-event or from already opened details
-    crdStore.items.length, // crd stores initialized after loading
-  ], async () => {
-    this.loadingError = "";
-    const { path, object } = this;
+  componentDidMount(): void {
+    disposeOnUnmount(this, [
+      reaction(() => [
+        this.path,
+        this.object, // resource might be updated via watch-event or from already opened details
+        crdStore.items.length, // crd stores initialized after loading
+      ], async () => {
+        this.loadingError = "";
+        const { path, object } = this;
 
-    if (!object) {
-      const store = apiManager.getStore(path);
+        if (!object) {
+          const store = apiManager.getStore(path);
 
-      if (store) {
-        this.isLoading = true;
+          if (store) {
+            this.isLoading = true;
 
-        try {
-          await store.loadFromPath(path);
-        } catch (err) {
-          this.loadingError = <>Resource loading has failed: <b>{err.toString()}</b></>;
-        } finally {
-          this.isLoading = false;
+            try {
+              await store.loadFromPath(path);
+            } catch (err) {
+              this.loadingError = <>Resource loading has failed: <b>{err.toString()}</b></>;
+            } finally {
+              this.isLoading = false;
+            }
+          }
         }
-      }
-    }
-  });
+      }),
+    ]);
+  }
 
   render() {
     const { object, isLoading, loadingError } = this;

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

@@ -249,8 +249,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     this.editor?.focus();
   }
 
-  @action
-  validate = (value = this.getValue()) => {
+  validate = action((value = this.getValue()) => {
     const validators: MonacoValidator[] = [
       monacoValidators[this.props.language], // parsing syntax check
     ].filter(Boolean);
@@ -262,7 +261,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
         this.props.onError?.(error); // emit error outside
       }
     }
-  };
+  });
 
   // avoid excessive validations during typing
   validateLazy = debounce(this.validate, 250);

src/renderer/components/resizing-anchor/resizing-anchor.tsx

@@ -194,8 +194,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     document.removeEventListener("mouseup", this.onDragEnd);
   }
 
-  @action
-  onDragInit = (event: React.MouseEvent) => {
+  onDragInit = action((event: React.MouseEvent) => {
     const { onStart, onlyButtons } = this.props;
 
     if (typeof onlyButtons === "number" && onlyButtons !== event.buttons) {
@@ -209,7 +208,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
 
     this.lastMouseEvent = undefined;
     onStart();
-  };
+  });
 
   calculateDelta(from: Position, to: Position): number | false {
     const node = this.ref.current;
@@ -285,8 +284,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     }
   }, 100);
 
-  @action
-  onDragEnd = () => {
+  onDragEnd = action(() => {
     this.props.onEnd();
     document.removeEventListener("mousemove", this.onDrag);
     document.removeEventListener("mouseup", this.onDragEnd);
@@ -295,7 +293,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     this.wasDragging = true;
 
     setTimeout(() => this.wasDragging = false, 200);
-  };
+  });
 
   render() {
     const { disabled, direction, placement, onDoubleClick } = this.props;