migration additions -- part 3 (adding makeObservable to constructor)

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

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

@@ -2,7 +2,7 @@ import "./add-cluster.scss";
 import os from "os";
 import React from "react";
 import { observer } from "mobx-react";
-import { action, observable, runInAction } from "mobx";
+import { action, observable, runInAction, makeObservable } from "mobx";
 import { remote } from "electron";
 import { KubeConfig } from "@kubernetes/client-node";
 import { Select, SelectOption } from "../select";
@@ -43,6 +43,11 @@ export class AddCluster extends React.Component {
   @observable isWaiting = false;
   @observable showSettings = false;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     clusterStore.setActive(null);
     this.setKubeConfig(userStore.kubeConfigPath);

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

@@ -2,7 +2,7 @@ import "./helm-chart-details.scss";
 
 import React, { Component } from "react";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { autobind, stopPropagation } from "../../utils";
@@ -28,6 +28,11 @@ export class HelmChartDetails extends Component<Props> {
 
   private chartPromise: CancelablePromise<{ readme: string; versions: HelmChart[] }>;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentWillUnmount() {
     this.chartPromise?.cancel();
   }

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

@@ -1,5 +1,5 @@
 import semver from "semver";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
 import { ItemStore } from "../../item.store";
@@ -14,6 +14,12 @@ export interface IChartVersion {
 export class HelmChartStore extends ItemStore<HelmChart> {
   @observable versions = observable.map<string, IChartVersion[]>();
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   loadAll() {
     return this.loadItems(() => helmChartsApi.list());
   }

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

@@ -3,7 +3,7 @@ import "./release-details.scss";
 import React, { Component } from "react";
 import groupBy from "lodash/groupBy";
 import isEqual from "lodash/isEqual";
-import { observable, reaction, toJS } from "mobx";
+import { observable, reaction, toJS, makeObservable } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
 import { HelmRelease, helmReleasesApi, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
@@ -61,6 +61,11 @@ export class ReleaseDetails extends Component<Props> {
     this.releaseSecret = secret;
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async loadDetails() {
     const { release } = this.props;
 

src/renderer/components/+apps-releases/release-rollback-dialog.tsx

@@ -1,7 +1,7 @@
 import "./release-rollback-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
   @observable revision: IReleaseRevision;
   @observable revisions = observable.array<IReleaseRevision>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(release: HelmRelease) {
     ReleaseRollbackDialog.isOpen = true;
     ReleaseRollbackDialog.release = release;

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

@@ -1,5 +1,13 @@
 import isEqual from "lodash/isEqual";
-import { action, IReactionDisposer, observable, reaction, toJS, when } from "mobx";
+import {
+  action,
+  IReactionDisposer,
+  observable,
+  reaction,
+  toJS,
+  when,
+  makeObservable,
+} from "mobx";
 import { autobind } from "../../utils";
 import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayload } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
@@ -15,6 +23,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
 
   constructor() {
     super();
+    makeObservable(this);
     when(() => secretsStore.isLoaded, () => {
       this.releaseSecrets = this.getReleaseSecrets();
     });

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

@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
+import { action, computed, IReactionDisposer, observable, reaction, makeObservable } from "mobx";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { CatalogEntity, CatalogEntityActionContext } from "../../api/catalog-entity";
 import { ItemObject, ItemStore } from "../../item.store";
@@ -6,7 +6,9 @@ import { autobind } from "../../utils";
 import { CatalogCategory } from "../../../common/catalog-entity";
 
 export class CatalogEntityItem implements ItemObject {
-  constructor(public entity: CatalogEntity) {}
+  constructor(public entity: CatalogEntity) {
+    makeObservable(this);
+  }
 
   get name() {
     return this.entity.metadata.name;
@@ -58,6 +60,12 @@ export class CatalogEntityItem implements ItemObject {
 export class CatalogEntityStore extends ItemStore<CatalogEntityItem> {
   @observable activeCategory: CatalogCategory;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get entities() {
     if (!this.activeCategory) return [];
 

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

@@ -2,7 +2,7 @@ import "./catalog.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
@@ -30,6 +30,11 @@ export class Catalog extends React.Component {
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab: string;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     this.contextMenu = {
       menuItems: [],

src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { EditableList } from "../../editable-list";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 interface Props {
   cluster: Cluster;
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterAccessibleNamespaces extends React.Component<Props> {
   @observable namespaces = new Set(this.props.cluster.accessibleNamespaces);
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     return (
       <>

src/renderer/components/+cluster-settings/components/cluster-home-dir-setting.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterHomeDirSetting extends React.Component<Props> {
   @observable directory = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {

src/renderer/components/+cluster-settings/components/cluster-metrics-setting.tsx

@@ -7,7 +7,7 @@ import { Icon } from "../../icon/icon";
 import { Button } from "../../button/button";
 import { SubTitle } from "../../layout/sub-title";
 import { Cluster } from "../../../../main/cluster";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 
 interface Props {
   cluster: Cluster;
@@ -30,6 +30,11 @@ export enum ResourceType {
 export class ClusterMetricsSetting extends React.Component<Props> {
   @observable hiddenMetrics = observable.set<string>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
 

src/renderer/components/+cluster-settings/components/cluster-name-setting.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Cluster } from "../../../../main/cluster";
 import { Input } from "../../input";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { SubTitle } from "../../layout/sub-title";
 import { isRequired } from "../../input/input_validators";
@@ -14,6 +14,11 @@ interface Props {
 export class ClusterNameSetting extends React.Component<Props> {
   @observable name = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {

src/renderer/components/+cluster-settings/components/cluster-prometheus-setting.tsx

@@ -5,7 +5,7 @@ import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { Select, SelectOption } from "../../select";
 import { Input } from "../../input";
-import { observable, computed, autorun } from "mobx";
+import { observable, computed, autorun, makeObservable } from "mobx";
 
 const options: SelectOption<string>[] = [
   { value: "", label: "Auto detect" },
@@ -21,6 +21,11 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   @observable path = "";
   @observable provider = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get canEditPrometheusPath() {
     if (this.provider === "" || this.provider === "lens") return false;
 

src/renderer/components/+cluster-settings/components/cluster-proxy-setting.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, autorun } from "mobx";
+import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
 import { Input, InputValidators } from "../../input";
@@ -13,6 +13,11 @@ interface Props {
 export class ClusterProxySetting extends React.Component<Props> {
   @observable proxy = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       autorun(() => {

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { clusterStore } from "../../../../common/cluster-store";
 import { Cluster } from "../../../../main/cluster";
@@ -12,6 +13,11 @@ interface Props {
 
 @observer
 export class RemoveClusterButton extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   confirmRemoveCluster() {
     const { cluster } = this.props;

src/renderer/components/+cluster-settings/components/show-metrics.tsx

@@ -3,7 +3,7 @@ import "./cluster-metrics-setting.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Cluster } from "../../../../main/cluster";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { Badge } from "../../badge/badge";
 import { Icon } from "../../icon/icon";
 
@@ -15,6 +15,11 @@ interface Props {
 export class ShowMetricsSetting extends React.Component<Props> {
   @observable hiddenMetrics = observable.set<string>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.hiddenMetrics = observable.set<string>(this.props.cluster.preferences.hiddenMetrics ?? []);
 

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

@@ -2,7 +2,7 @@ import "./cluster-issues.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -40,6 +40,11 @@ export class ClusterIssues extends React.Component<Props> {
     [sortBy.age]: (warning: IWarning) => warning.age || "",
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get warnings() {
     const warnings: IWarning[] = [];
 

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

@@ -1,4 +1,4 @@
-import { action, observable, reaction, when } from "mobx";
+import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
 import { autobind, createStorage } from "../../utils";
@@ -51,6 +51,7 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
 
   constructor() {
     super();
+    makeObservable(this);
     this.init();
   }
 

src/renderer/components/+config-maps/config-map-details.tsx

@@ -1,7 +1,7 @@
 import "./config-map-details.scss";
 
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
@@ -45,6 +45,11 @@ export class ConfigMapDetails extends React.Component<Props> {
     }
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { object: configMap } = this.props;
 

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -1,7 +1,7 @@
 import "./add-quota-dialog.scss";
 
 import React from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -51,6 +51,11 @@ export class AddQuotaDialog extends React.Component<Props> {
   @observable namespace = this.defaultNamespace;
   @observable quotas = AddQuotaDialog.defaultQuotas;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddQuotaDialog.isOpen = true;
   }

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -1,7 +1,7 @@
 import "./add-secret-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -40,6 +40,11 @@ type ISecretField = keyof ISecretTemplate;
 export class AddSecretDialog extends React.Component<Props> {
   @observable static isOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddSecretDialog.isOpen = true;
   }

src/renderer/components/+config-secrets/secret-details.tsx

@@ -2,7 +2,7 @@ import "./secret-details.scss";
 
 import React from "react";
 import isEmpty from "lodash/isEmpty";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
@@ -25,6 +25,11 @@ export class SecretDetails extends React.Component<Props> {
   @observable data: { [name: string]: string } = {};
   @observable revealSecret: { [name: string]: boolean } = {};
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {

src/renderer/components/+custom-resources/crd-list.tsx

@@ -1,7 +1,7 @@
 import "./crd-list.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { stopPropagation } from "../../utils";
@@ -29,6 +29,11 @@ enum columnId {
 
 @observer
 export class CrdList extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   get selectedGroups(): string[] {
     return crdGroupsUrlParam.get();
   }

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -3,7 +3,7 @@ import "./crd-resource-details.scss";
 import React from "react";
 import jsonPath from "jsonpath";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
@@ -39,6 +39,11 @@ function convertSpecValue(value: any): any {
 
 @observer
 export class CrdResourceDetails extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get crd() {
     return crdStore.getByObject(this.props.object);
   }

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -7,7 +7,7 @@ import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObject } from "../../api/kube-object";
 import { ICRDRouteParams } from "./crd.route";
-import { autorun, computed } from "mobx";
+import { autorun, computed, makeObservable } from "mobx";
 import { crdStore } from "./crd.store";
 import { TableSortCallback } from "../table";
 import { apiManager } from "../../api/api-manager";
@@ -24,6 +24,11 @@ enum columnId {
 
 @observer
 export class CrdResources extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {

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

@@ -1,4 +1,4 @@
-import { computed, reaction, toJS } from "mobx";
+import { computed, reaction, toJS, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
@@ -25,6 +25,8 @@ export class CRDStore extends KubeObjectStore<CustomResourceDefinition> {
   constructor() {
     super();
 
+    makeObservable(this);
+
     // auto-init stores for crd-s
     reaction(() => toJS(this.items), items => items.forEach(initStore));
   }

src/renderer/components/+events/events.tsx

@@ -1,7 +1,7 @@
 import "./events.scss";
 
 import React, { Fragment } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { orderBy } from "lodash";
 import { TabLayout } from "../layout/tab-layout";
@@ -60,6 +60,11 @@ export class Events extends React.Component<Props> {
     onSort: params => this.sorting = params,
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get store(): EventStore {
     return eventStore;
   }

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

@@ -1,6 +1,6 @@
 import { remote, shell } from "electron";
 import fse from "fs-extra";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import os from "os";
 import path from "path";
@@ -50,6 +50,11 @@ export class Extensions extends React.Component {
     }
   };
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   get extensionStateStore() {
     return ExtensionStateStore.getInstance<ExtensionStateStore>();
   }

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -1,7 +1,7 @@
 import "./add-namespace-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -21,6 +21,11 @@ export class AddNamespaceDialog extends React.Component<Props> {
   @observable static isOpen = false;
   @observable namespace = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddNamespaceDialog.isOpen = true;
   }

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

@@ -1,7 +1,7 @@
 import "./namespace-details.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
@@ -19,6 +19,11 @@ interface Props extends KubeObjectDetailsProps<Namespace> {
 
 @observer
 export class NamespaceDetails extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get quotas() {
     const namespace = this.props.object.getName();
 

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

@@ -1,7 +1,7 @@
 import "./namespace-select.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Select, SelectOption, SelectProps } from "../select";
 import { cssNames } from "../../utils";
@@ -36,6 +36,11 @@ function GradientValueContainer<T>({children, ...rest}: ValueContainerProps<T>)
 export class NamespaceSelect extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       kubeWatchApi.subscribeStores([namespaceStore], {

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

@@ -1,4 +1,13 @@
-import { action, comparer, computed, IReactionDisposer, IReactionOptions, observable, reaction } from "mobx";
+import {
+  action,
+  comparer,
+  computed,
+  IReactionDisposer,
+  IReactionOptions,
+  observable,
+  reaction,
+  makeObservable,
+} from "mobx";
 import { autobind, createStorage } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
@@ -35,6 +44,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   constructor() {
     super();
+    makeObservable(this);
     this.init();
   }
 

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

@@ -1,6 +1,7 @@
 import "./endpoint-subset-list.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -16,6 +17,10 @@ interface Props {
 
 @observer
 export class EndpointSubsetList extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
 
   getAddressTableRow(ip: string) {
     const { subset } = this.props;

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

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
@@ -9,6 +9,12 @@ export class IngressStore extends KubeObjectStore<Ingress> {
   api = ingressApi;
   @observable metrics: IIngressMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(ingress: Ingress) {
     this.metrics = await this.api.getMetrics(ingress.getName(), ingress.getNs());
   }

src/renderer/components/+network-services/service-port-component.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Service, ServicePort } from "../../api/endpoints";
 import { apiBase } from "../../api";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Spinner } from "../spinner";
@@ -18,6 +18,11 @@ interface Props {
 export class ServicePortComponent extends React.Component<Props> {
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async portForward() {
     const { service, port } = this.props;
 

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

@@ -1,5 +1,5 @@
 import { sum } from "lodash";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { clusterApi, IClusterMetrics, INodeMetrics, Node, nodesApi } from "../../api/endpoints";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
@@ -14,6 +14,12 @@ export class NodesStore extends KubeObjectStore<Node> {
   @observable metricsLoading = false;
   @observable metricsLoaded = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadUsageMetrics() {
     this.metricsLoading = true;

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -2,7 +2,7 @@ import "./add-helm-repo-dialog.scss";
 
 import React from "react";
 import { remote, FileFilter } from "electron";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -34,6 +34,11 @@ export class AddHelmRepoDialog extends React.Component<Props> {
 
   @observable static isOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddHelmRepoDialog.isOpen = true;
   }

src/renderer/components/+preferences/helm-charts.tsx

@@ -1,7 +1,7 @@
 import "./helm-charts.scss";
 
 import React from "react";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 
 import { HelmRepo, repoManager } from "../../../main/helm/helm-repo-manager";
 import { Button } from "../button";
@@ -17,6 +17,11 @@ export class HelmCharts extends React.Component {
   @observable repos: HelmRepo[] = [];
   @observable addedRepos = observable.map<string, HelmRepo>();
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options(): SelectOption<HelmRepo>[] {
     return this.repos.map(repo => ({
       label: repo.name,

src/renderer/components/+preferences/preferences.tsx

@@ -1,7 +1,7 @@
 import "./preferences.scss";
 
 import React from "react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { userStore } from "../../../common/user-store";
@@ -33,6 +33,11 @@ export class Preferences extends React.Component {
   @observable shell = userStore.preferences.shell || "";
   @observable activeTab = Pages.Application;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get themeOptions(): SelectOption<string>[] {
     return themeStore.themes.map(theme => ({
       label: theme.name,

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

@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { IPvcMetrics, PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
@@ -9,6 +9,12 @@ export class VolumeClaimStore extends KubeObjectStore<PersistentVolumeClaim> {
   api = pvcApi;
   @observable metrics: IPvcMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadMetrics(pvc: PersistentVolumeClaim) {
     this.metrics = await pvcApi.getMetrics(pvc.getName(), pvc.getNs());

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

@@ -1,6 +1,7 @@
 import "./volume-details-list.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PersistentVolume } from "../../api/endpoints/persistent-volume.api";
 import { autobind } from "../../../common/utils/autobind";
@@ -33,6 +34,11 @@ export class VolumeDetailsList extends React.Component<Props> {
     [sortBy.status]: (volume: PersistentVolume) => volume.getStatus(),
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   getTableRow(uid: string) {
     const { persistentVolumes } = this.props;

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

@@ -1,7 +1,7 @@
 import "./add-role-binding-dialog.scss";
 
 import React from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -35,6 +35,11 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   @observable static isOpen = false;
   @observable static data: RoleBinding = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(roleBinding?: RoleBinding) {
     AddRoleBindingDialog.isOpen = true;
     AddRoleBindingDialog.data = roleBinding;

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

@@ -9,7 +9,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { roleBindingsStore } from "./role-bindings.store";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -23,6 +23,11 @@ interface Props extends KubeObjectDetailsProps<RoleBinding> {
 export class RoleBindingDetails extends React.Component<Props> {
   @observable selectedSubjects = observable.array<IRoleBindingSubject>([], { deep: false });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.object, () => {

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

@@ -1,7 +1,7 @@
 import "./add-role-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -22,6 +22,11 @@ export class AddRoleDialog extends React.Component<Props> {
   @observable roleName = "";
   @observable namespace = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     AddRoleDialog.isOpen = true;
   }

src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx

@@ -1,7 +1,7 @@
 import "./create-service-account-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   @observable name = "";
   @observable namespace = "default";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open() {
     CreateServiceAccountDialog.isOpen = true;
   }

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

@@ -1,7 +1,7 @@
 import "./service-accounts-details.scss";
 
 import React from "react";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { Spinner } from "../spinner";
 import { ServiceAccountsSecret } from "./service-accounts-secret";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -45,6 +45,11 @@ export class ServiceAccountsDetails extends React.Component<Props> {
     this.imagePullSecrets = await Promise.all(imagePullSecrets);
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   renderSecrets() {
     const { secrets } = this;
 

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx

@@ -1,7 +1,7 @@
 import "./cronjob-trigger-dialog.scss";
 
 import React, { Component } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class CronJobTriggerDialog extends Component<Props> {
 
   @observable ready = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(cronjob: CronJob) {
     CronJobTriggerDialog.isOpen = true;
     CronJobTriggerDialog.data = cronjob;

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

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
 import { DaemonSet, daemonSetApi, IPodMetrics, Pod, podsApi, PodStatus } from "../../api/endpoints";
@@ -11,6 +11,12 @@ export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
 
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(daemonSet: DaemonSet) {
     const pods = this.getChildPods(daemonSet);
 

src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx

@@ -1,7 +1,7 @@
 import "./deployment-scale-dialog.scss";
 
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class DeploymentScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(deployment: Deployment) {
     DeploymentScaleDialog.isOpen = true;
     DeploymentScaleDialog.data = deployment;

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

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../../api/endpoints";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind } from "../../utils";
@@ -10,6 +10,12 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   protected sortItems(items: Deployment[]) {
     return super.sortItems(items, [
       item => item.getReplicas(),

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

@@ -1,6 +1,7 @@
 import "./overview-statuses.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
@@ -23,6 +24,11 @@ const resources: KubeResource[] = [
 
 @observer
 export class OverviewStatuses extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   renderWorkload(resource: KubeResource): React.ReactElement {
     const store = workloadStores[resource];

src/renderer/components/+workloads-overview/overview-workload-status.tsx

@@ -3,7 +3,7 @@ import "./overview-workload-status.scss";
 import React from "react";
 import capitalize from "lodash/capitalize";
 import { findDOMNode } from "react-dom";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { PieChart } from "../chart";
 import { cssVar } from "../../utils";
@@ -24,6 +24,11 @@ interface Props {
 export class OverviewWorkloadStatus extends React.Component<Props> {
   @observable elem: HTMLElement;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     // eslint-disable-next-line react/no-find-dom-node
     this.elem = findDOMNode(this) as HTMLElement;

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Pod } from "../../api/endpoints";
 import { apiBase } from "../../api";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Spinner } from "../spinner";
@@ -22,6 +22,11 @@ interface Props {
 export class PodContainerPort extends React.Component<Props> {
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async portForward() {
     const { pod, port } = this.props;
 

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

@@ -2,7 +2,7 @@ import "./pod-details-list.scss";
 
 import React from "react";
 import kebabCase from "lodash/kebabCase";
-import { reaction } from "mobx";
+import { reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "./pods.store";
 import { Pod } from "../../api/endpoints";
@@ -50,6 +50,11 @@ export class PodDetailsList extends React.Component<Props> {
     [sortBy.memory]: (pod: Pod) => podsStore.getPodKubeMetrics(pod).memory,
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.metricsWatcher.start(true);
     disposeOnUnmount(this, [

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

@@ -2,7 +2,7 @@ import "./pod-details-secrets.scss";
 
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Pod, Secret, secretsApi } from "../../api/endpoints";
 import { getDetailsUrl } from "../kube-object";
@@ -29,6 +29,11 @@ export class PodDetailsSecrets extends Component<Props> {
     secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
   });
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { pod } = this.props;
 

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

@@ -4,7 +4,7 @@ import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
-import { autorun, observable, reaction, toJS } from "mobx";
+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";
@@ -34,6 +34,11 @@ export class PodDetails extends React.Component<Props> {
 
   private watcher = interval(60, () => this.loadMetrics());
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {

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

@@ -1,5 +1,5 @@
 import countBy from "lodash/countBy";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { autobind, cpuUnitsToNumber, unitsToBytes } from "../../utils";
 import { IPodMetrics, Pod, PodMetrics, podMetricsApi, podsApi } from "../../api/endpoints";
@@ -13,6 +13,12 @@ export class PodsStore extends KubeObjectStore<Pod> {
   @observable metrics: IPodMetrics = null;
   @observable kubeMetrics = observable.array<PodMetrics>([]);
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   async loadMetrics(pod: Pod) {
     this.metrics = await podsApi.getMetrics([pod], pod.getNs());

src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx

@@ -1,7 +1,7 @@
 import "./replicaset-scale-dialog.scss";
 
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class ReplicaSetScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(replicaSet: ReplicaSet) {
     ReplicaSetScaleDialog.isOpen = true;
     ReplicaSetScaleDialog.data = replicaSet;

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

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Deployment, IPodMetrics, podsApi, ReplicaSet, replicaSetApi } from "../../api/endpoints";
@@ -11,6 +11,12 @@ export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
   api = replicaSetApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(replicaSet: ReplicaSet) {
     const pods = this.getChildPods(replicaSet);
 

src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx

@@ -2,7 +2,7 @@ import "./statefulset-scale-dialog.scss";
 
 import { StatefulSet, statefulSetApi } from "../../api/endpoints";
 import React, { Component } from "react";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -23,6 +23,11 @@ export class StatefulSetScaleDialog extends Component<Props> {
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(statefulSet: StatefulSet) {
     StatefulSetScaleDialog.isOpen = true;
     StatefulSetScaleDialog.data = statefulSet;

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

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { KubeObjectStore } from "../../kube-object.store";
 import { IPodMetrics, podsApi, PodStatus, StatefulSet, statefulSetApi } from "../../api/endpoints";
@@ -10,6 +10,12 @@ export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi;
   @observable metrics: IPodMetrics = null;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   async loadMetrics(statefulSet: StatefulSet) {
     const pods = this.getChildPods(statefulSet);
 

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

@@ -3,6 +3,7 @@
 import "./ace-editor.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import AceBuild, { Ace } from "ace-builds";
 import { autobind, cssNames, noop } from "../../utils";
@@ -44,6 +45,7 @@ export class AceEditor extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
+    makeObservable(this);
     require("ace-builds/src-noconflict/mode-yaml");
     require("ace-builds/src-noconflict/theme-terminal");
     require("ace-builds/src-noconflict/ext-searchbox");

src/renderer/components/animate/animate.tsx

@@ -1,6 +1,6 @@
 import "./animate.scss";
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { autobind, cssNames, noop } from "../../utils";
 
@@ -30,6 +30,11 @@ export class Animate extends React.Component<AnimateProps> {
     leave: false
   };
 
+  constructor(props: AnimateProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get contentElem() {
     return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
   }

src/renderer/components/app.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
 import { history } from "../navigation";
@@ -53,6 +53,11 @@ import { clusterContext } from "./context";
 
 @observer
 export class App extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   static async init() {
     const frameId = webFrame.routingId;
     const clusterId = getHostedClusterId();

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -4,7 +4,7 @@ import "./cluster-status.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { ipcRenderer } from "electron";
-import { computed, observable } from "mobx";
+import { computed, observable, makeObservable } from "mobx";
 import { requestMain, subscribeToBroadcast } from "../../../common/ipc";
 import { Icon } from "../icon";
 import { Button } from "../button";
@@ -24,6 +24,11 @@ export class ClusterStatus extends React.Component<Props> {
   @observable authOutput: KubeAuthProxyLog[] = [];
   @observable isReconnecting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get cluster(): Cluster {
     return clusterStore.getById(this.props.clusterId);
   }

src/renderer/components/command-palette/command-container.tsx

@@ -1,6 +1,6 @@
 
 import "./command-container.scss";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { Dialog } from "../dialog";
@@ -29,6 +29,11 @@ export class CommandOverlay {
 export class CommandContainer extends React.Component<{ clusterId?: string }> {
   @observable.ref commandComponent: React.ReactElement;
 
+  constructor(props: { clusterId?: string }) {
+    super(props);
+    makeObservable(this);
+  }
+
   private escHandler(event: KeyboardEvent) {
     if (event.key === "Escape") {
       event.stopPropagation();

src/renderer/components/command-palette/command-dialog.tsx

@@ -1,6 +1,6 @@
 
 import { Select } from "../select";
-import { computed, observable, toJS } from "mobx";
+import { computed, observable, toJS, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
@@ -14,6 +14,11 @@ import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 export class CommandDialog extends React.Component {
   @observable menuIsOpen = true;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options() {
     const context = {
       entity: commandRegistry.activeEntity

src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -1,7 +1,7 @@
 import "./confirm-dialog.scss";
 
 import React, { ReactNode } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "../../utils";
 import { Button, ButtonProps } from "../button";
@@ -28,6 +28,11 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
 
   @observable isSaving = false;
 
+  constructor(props: ConfirmDialogProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(params: ConfirmDialogParams) {
     ConfirmDialog.isOpen = true;
     ConfirmDialog.params = params;

src/renderer/components/dock/create-resource.tsx

@@ -2,7 +2,7 @@ import "./create-resource.scss";
 
 import React from "react";
 import jsYaml from "js-yaml";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { createResourceStore } from "./create-resource.store";
@@ -22,6 +22,11 @@ interface Props {
 export class CreateResource extends React.Component<Props> {
   @observable error = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.tab.id;
   }

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

@@ -7,7 +7,7 @@ import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 export interface DockTabProps extends TabProps<IDockTab> {
   moreActions?: React.ReactNode;
@@ -17,6 +17,11 @@ export interface DockTabProps extends TabProps<IDockTab> {
 export class DockTab extends React.Component<DockTabProps> {
   @observable menuVisible = false;
 
+  constructor(props: DockTabProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.value.id;
   }

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

@@ -1,5 +1,5 @@
 import MD5 from "crypto-js/md5";
-import { action, computed, IReactionOptions, observable, reaction } from "mobx";
+import { action, computed, IReactionOptions, observable, reaction, makeObservable } from "mobx";
 import { autobind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
 
@@ -81,6 +81,7 @@ export class DockStore implements DockStorageState {
   }
 
   constructor() {
+    makeObservable(this);
     this.init();
   }
 

src/renderer/components/dock/edit-resource.tsx

@@ -1,7 +1,7 @@
 import "./edit-resource.scss";
 
 import React from "react";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
 import { IDockTab } from "./dock.store";
@@ -22,6 +22,11 @@ interface Props {
 export class EditResource extends React.Component<Props> {
   @observable error = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get tabId() {
     return this.props.tab.id;
   }

src/renderer/components/dock/editor-panel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import jsYaml from "js-yaml";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { AceEditor } from "../ace-editor";
@@ -23,6 +23,11 @@ export class EditorPanel extends React.Component<Props> {
 
   @observable yamlError = "";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     // validate and run callback with optional error
     this.onChange(this.props.value || "");

src/renderer/components/dock/info-panel.tsx

@@ -1,7 +1,7 @@
 import "./info-panel.scss";
 
 import React, { Component, ReactNode } from "react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
@@ -44,6 +44,11 @@ export class InfoPanel extends Component<Props> {
   @observable error = "";
   @observable waiting = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.tabId, () => {

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

@@ -1,4 +1,4 @@
-import { action, autorun } from "mobx";
+import { action, autorun, makeObservable } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
@@ -24,6 +24,7 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
     super({
       storageKey: "install_charts"
     });
+    makeObservable(this);
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 

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

@@ -1,7 +1,7 @@
 import "./install-chart.scss";
 
 import React, { Component } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { dockStore, IDockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
@@ -29,6 +29,11 @@ export class InstallChart extends Component<Props> {
   @observable error = "";
   @observable showNotes = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get values() {
     return this.chartData.values;
   }

src/renderer/components/dock/log-list.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import AnsiUp from "ansi_up";
 import DOMPurify from "dompurify";
 import debounce from "lodash/debounce";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Align, ListOnScrollProps } from "react-window";
 
@@ -35,6 +35,11 @@ export class LogList extends React.Component<Props> {
   private virtualListRef = React.createRef<VirtualList>(); // A reference for VirtualList component
   private lineHeight = 18; // Height of a log line. Should correlate with styles in pod-log-list.scss
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.scrollToBottom();
   }

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

@@ -1,4 +1,4 @@
-import { autorun, computed, observable } from "mobx";
+import { autorun, computed, observable, makeObservable } from "mobx";
 
 import { IPodLogsQuery, Pod, podsApi } from "../../api/endpoints";
 import { autobind, interval } from "../../utils";
@@ -21,6 +21,7 @@ export class LogStore {
   @observable podLogs = observable.map<TabId, PodLogLine[]>();
 
   constructor() {
+    makeObservable(this);
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 

src/renderer/components/dock/logs.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { searchStore } from "../../../common/search-store";
@@ -24,6 +24,11 @@ export class Logs extends React.Component<Props> {
 
   private logListElement = React.createRef<LogList>(); // A reference for VirtualList component
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this,
       reaction(() => this.props.tab.id, this.reload, { fireImmediately: true })

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

@@ -7,13 +7,18 @@ import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
 import { dockStore } from "./dock.store";
-import { reaction } from "mobx";
+import { reaction, makeObservable } from "mobx";
 
 interface Props extends DockTabProps {
 }
 
 @observer
 export class TerminalTab extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     reaction(() => this.isDisconnected === true, () => {
       dockStore.closeTab(this.tabId);

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

@@ -1,4 +1,4 @@
-import { action, autorun, IReactionDisposer, reaction } from "mobx";
+import { action, autorun, IReactionDisposer, reaction, makeObservable } from "mobx";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { DockTabStore } from "./dock-tab.store";
 import { HelmRelease, helmReleasesApi } from "../../api/endpoints/helm-releases.api";
@@ -19,6 +19,8 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
       storageKey: "chart_releases"
     });
 
+    makeObservable(this);
+
     autorun(() => {
       const { selectedTab, isOpen } = dockStore;
 

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

@@ -1,7 +1,7 @@
 import "./upgrade-chart.scss";
 
 import React from "react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { IDockTab } from "./dock.store";
@@ -26,6 +26,11 @@ export class UpgradeChart extends React.Component<Props> {
   @observable versions = observable.array<IChartVersion>();
   @observable version: IChartVersion;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.loadVersions();
 

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

@@ -3,7 +3,7 @@ import "./editable-list.scss";
 import React from "react";
 import { Icon } from "../icon";
 import { Input } from "../input";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind } from "../../utils";
 
@@ -28,6 +28,11 @@ export class EditableList<T> extends React.Component<Props<T>> {
   static defaultProps = defaultProps as Props<any>;
   @observable currentNewItem = "";
 
+  constructor(props: Props<T>) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   onSubmit(val: string) {
     const { add } = this.props;

src/renderer/components/file-picker/file-picker.tsx

@@ -5,7 +5,7 @@ import fse from "fs-extra";
 import path from "path";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import _ from "lodash";
 
@@ -81,6 +81,11 @@ export class FilePicker extends React.Component<Props> {
   @observable status = FileInputStatus.CLEAR;
   @observable errorText?: string;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   handleFileCount(files: File[]): File[] {
     const { limit: [minLimit, maxLimit] = [0, Infinity], onOverLimit } = this.props;
 

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -8,7 +8,7 @@ import { Avatar } from "@material-ui/core";
 import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog-entity";
 import { Menu, MenuItem } from "../menu";
 import { Icon } from "../icon";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { navigate } from "../../navigation";
 import { hotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -26,6 +26,11 @@ export class HotbarIcon extends React.Component<Props> {
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
   @observable menuOpen = false;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     this.contextMenu = {
       menuItems: [],

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

@@ -1,7 +1,7 @@
 import "./drop-file-input.scss";
 import React from "react";
 import { autobind, cssNames, IClassName } from "../../utils";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import logger from "../../../main/logger";
 
@@ -19,6 +19,11 @@ export interface DropFileMeta<T extends HTMLElement = any> {
 export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
   @observable dropAreaActive = false;
 
+  constructor(props: DropFileInputProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   onDragEnter() {
     this.dropAreaActive = true;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import debounce from "lodash/debounce";
-import { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { InputProps } from "./input";
 import { SearchInput } from "./search-input";
@@ -42,6 +42,11 @@ export class SearchInputUrl extends React.Component<Props> {
     }
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   render() {
     const { inputVal } = this;
 

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

@@ -1,6 +1,7 @@
 import "./search-input.scss";
 
 import React, { createRef } from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { Icon } from "../icon";
@@ -28,6 +29,11 @@ export class SearchInput extends React.Component<Props> {
 
   private inputRef = createRef<Input>();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     if (!this.props.bindGlobalFocusHotkey) return;
     window.addEventListener("keydown", this.onGlobalKey);

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

@@ -2,7 +2,7 @@ import "./item-list-layout.scss";
 import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
-import { computed } from "mobx";
+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";
@@ -102,6 +102,11 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     showFilters: false, // setup defaults
   });
 
+  constructor(props: ItemListLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get showFilters(): boolean {
     return this.storage.get().showFilters;
   }

src/renderer/components/item-object-list/page-filters-select.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { GroupSelectOption, Select, SelectOption, SelectProps } from "../select";
 import { FilterType, pageFilters } from "./page-filters.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
@@ -26,6 +26,11 @@ export class PageFiltersSelect extends React.Component<Props> {
     disableFilters: {},
   };
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get groupedOptions() {
     const options: GroupSelectOption<SelectOptionFilter>[] = [];
     const { disableFilters } = this.props;

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

@@ -1,4 +1,4 @@
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { searchUrlParam } from "../input/search-input-url";
 
@@ -22,6 +22,7 @@ export class PageFiltersStore {
   }
 
   constructor() {
+    makeObservable(this);
     this.syncWithGlobalSearch();
   }
 

src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx

@@ -6,13 +6,18 @@ import { KubeObject } from "../../api/kube-object";
 import { cssNames, formatDuration } from "../../utils";
 import { KubeObjectStatusRegistration, kubeObjectStatusRegistry } from "../../../extensions/registries/kube-object-status-registry";
 import { KubeObjectStatus, KubeObjectStatusLevel } from "../../..//extensions/renderer-api/k8s-api";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 
 interface Props {
   object: KubeObject;
 }
 
 export class KubeObjectStatusIcon extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get objectStatuses() {
     const { object } = this.props;
     const registrations = kubeObjectStatusRegistry.getItemsForKind(object.kind, object.apiVersion);

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

@@ -2,7 +2,7 @@ import "./kube-object-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { createPageParam, navigation } from "../../navigation";
 import { Drawer } from "../drawer";
 import { KubeObject } from "../../api/kube-object";
@@ -70,6 +70,11 @@ export class KubeObjectDetails extends React.Component {
   @observable isLoading = false;
   @observable.ref loadingError: React.ReactNode;
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get path() {
     return kubeDetailsUrlParam.get();
   }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { KubeObject } from "../../api/kube-object";
@@ -17,6 +17,11 @@ export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
 
 @observer
 export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutProps> {
+  constructor(props: KubeObjectListLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get selectedItem() {
     return this.props.store.getByPath(kubeSelectedUrlParam.get());
   }

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -1,7 +1,7 @@
 import "./kubeconfig-dialog.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
 import { AceEditor } from "../ace-editor";
@@ -30,6 +30,11 @@ export class KubeConfigDialog extends React.Component<Props> {
   @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
   @observable config = ""; // parsed kubeconfig in yaml format
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   static open(data: IKubeconfigDialogData) {
     KubeConfigDialog.isOpen = true;
     KubeConfigDialog.data = data;

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

@@ -1,6 +1,7 @@
 import "./page-layout.scss";
 
 import React from "react";
+import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
@@ -27,6 +28,11 @@ const defaultProps: Partial<PageLayoutProps> = {
 export class PageLayout extends React.Component<PageLayoutProps> {
   static defaultProps = defaultProps as object;
 
+  constructor(props: PageLayoutProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   back(evt?: React.MouseEvent | KeyboardEvent) {
     if (this.props.back) {
@@ -64,7 +70,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
 
     return (
       <div {...elemProps} className={className}>
-        { navigation && (
+        {navigation && (
           <nav className="sidebarRegion">
             <div className="sidebar">
               {navigation}
@@ -76,7 +82,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
             {children}
           </div>
           <div className="toolsRegion">
-            { this.props.provideBackButtonNavigation && (
+            {this.props.provideBackButtonNavigation && (
               <div className="fixedTools">
                 <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
                   <Icon material="close"/>

src/renderer/components/layout/sidebar-item.tsx

@@ -1,7 +1,7 @@
 import "./sidebar-item.scss";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { cssNames, prevDefault } from "../../utils";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
@@ -32,6 +32,11 @@ interface SidebarItemProps {
 export class SidebarItem extends React.Component<SidebarItemProps> {
   static displayName = "SidebarItem";
 
+  constructor(props: SidebarItemProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   get id(): string {
     return this.props.id;
   }

src/renderer/components/layout/sidebar.tsx

@@ -2,7 +2,7 @@ import "./sidebar.scss";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { cssNames } from "../../utils";
@@ -41,6 +41,11 @@ interface Props {
 export class Sidebar extends React.Component<Props> {
   static displayName = "Sidebar";
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     crdStore.reloadAll();
   }

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

@@ -1,7 +1,7 @@
 import "./menu-actions.scss";
 
 import React, { isValidElement } from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -38,6 +38,11 @@ export class MenuActions extends React.Component<MenuActionsProps> {
     this.isOpen = !this.isOpen;
   };
 
+  constructor(props: MenuActionsProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   @autobind()
   remove() {
     const { removeAction } = this.props;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import uniqueId from "lodash/uniqueId";
 import { JsonApiErrorParsed } from "../../api/json-api";
@@ -27,6 +27,10 @@ export class NotificationsStore {
 
   protected autoHideTimers = new Map<NotificationId, number>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getById(id: NotificationId): Notification | null {
     return this.notifications.find(item => item.id === id) ?? null;
   }