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

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

extensions/survey/src/survey-preferences-store.ts

@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS, when } from "mobx";
+import { observable, toJS, when, makeObservable } from "mobx";
 
 export type SurveyPreferencesModel = {
   enabled: boolean;
@@ -18,6 +18,7 @@ export class SurveyPreferencesStore extends Store.ExtensionStore<SurveyPreferenc
         enabled: true
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: SurveyPreferencesModel): void {

extensions/telemetry/src/telemetry-preferences-store.ts

@@ -1,5 +1,5 @@
 import { Store } from "@k8slens/extensions";
-import { observable, toJS } from "mobx";
+import { observable, toJS, makeObservable } from "mobx";
 
 export type TelemetryPreferencesModel = {
   enabled: boolean;
@@ -16,6 +16,7 @@ export class TelemetryPreferencesStore extends Store.ExtensionStore<TelemetryPre
         enabled: true
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: TelemetryPreferencesModel): void {

src/common/base-store.ts

@@ -2,7 +2,7 @@ import path from "path";
 import Config from "conf";
 import { Options as ConfOptions } from "conf/dist/source/types";
 import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron";
-import { IReactionOptions, observable, reaction, runInAction, when } from "mobx";
+import { IReactionOptions, observable, reaction, runInAction, when, makeObservable } from "mobx";
 import Singleton from "./utils/singleton";
 import { getAppVersion } from "./utils/app-version";
 import logger from "../main/logger";
@@ -27,6 +27,7 @@ export abstract class BaseStore<T = any> extends Singleton {
 
   protected constructor(protected params: BaseStoreParams) {
     super();
+    makeObservable(this);
     this.params = {
       autoLoad: false,
       syncEnabled: true,

src/common/catalog-category-registry.ts

@@ -1,9 +1,13 @@
-import { action, computed, observable, toJS } from "mobx";
+import { action, computed, observable, toJS, makeObservable } from "mobx";
 import { CatalogCategory, CatalogEntityData } from "./catalog-entity";
 
 export class CatalogCategoryRegistry {
   @observable protected categories: CatalogCategory[] = [];
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @action add(category: CatalogCategory) {
     this.categories.push(category);
   }

src/common/catalog-entities/kubernetes-cluster.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "events";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { catalogCategoryRegistry } from "../catalog-category-registry";
 import { CatalogCategory, CatalogEntity, CatalogEntityActionContext, CatalogEntityContextMenuContext, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
 import { clusterDisconnectHandler } from "../cluster-ipc";
@@ -23,6 +23,7 @@ export class KubernetesCluster implements CatalogEntity {
   @observable public spec: KubernetesClusterSpec;
 
   constructor(data: CatalogEntityData) {
+    makeObservable(this);
     this.metadata = data.metadata;
     this.status = data.status as KubernetesClusterStatus;
     this.spec = data.spec as KubernetesClusterSpec;

src/common/catalog-entities/web-link.ts

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { CatalogCategory, CatalogEntity, CatalogEntityData, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog-entity";
 import { catalogCategoryRegistry } from "../catalog-category-registry";
 
@@ -18,6 +18,7 @@ export class WebLink implements CatalogEntity {
   @observable public spec: WebLinkSpec;
 
   constructor(data: CatalogEntityData) {
+    makeObservable(this);
     this.metadata = data.metadata;
     this.status = data.status as WebLinkStatus;
     this.spec = data.spec as WebLinkSpec;

src/common/catalog-entity-registry.ts

@@ -1,9 +1,13 @@
-import { action, computed, observable, IObservableArray } from "mobx";
+import { action, computed, observable, IObservableArray, makeObservable } from "mobx";
 import { CatalogEntity } from "./catalog-entity";
 
 export class CatalogEntityRegistry {
   protected sources = observable.map<string, IObservableArray<CatalogEntity>>([], { deep: true });
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @action addSource(id: string, source: IObservableArray<CatalogEntity>) {
     this.sources.set(id, source);
   }

src/common/cluster-store.ts

@@ -1,7 +1,7 @@
 import path from "path";
 import { app, ipcRenderer, remote, webFrame } from "electron";
 import { unlink } from "fs-extra";
-import { action, comparer, computed, observable, reaction, toJS } from "mobx";
+import { action, comparer, computed, observable, reaction, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import { Cluster, ClusterState } from "../main/cluster";
 import migrations from "../migrations/cluster-store";
@@ -122,6 +122,8 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
       migrations,
     });
 
+    makeObservable(this);
+
     this.pushStateToViewsAutomatically();
   }
 

src/common/hotbar-store.ts

@@ -1,4 +1,4 @@
-import { action, comparer, observable, toJS } from "mobx";
+import { action, comparer, observable, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
 
@@ -32,6 +32,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
       },
       migrations,
     });
+    makeObservable(this);
   }
 
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {

src/common/libs-config.ts

@@ -5,7 +5,8 @@ import { enableMapSet, setAutoFreeze } from "immer";
 
 // Mobx
 configure({
-  enforceActions: "never", // allows to skip using @action when class-method updates some state
+  isolateGlobalState: true, // might allow to use different versions of mobx in extensions
+  enforceActions: "never", // skip usage of @action for class methods
 });
 
 // Immer

src/common/search-store.ts

@@ -1,4 +1,4 @@
-import { action, computed, observable,reaction } from "mobx";
+import { action, computed, observable, reaction, makeObservable } from "mobx";
 import { dockStore } from "../renderer/components/dock/dock.store";
 import { autobind } from "../renderer/utils";
 
@@ -33,6 +33,7 @@ export class SearchStore {
   @observable activeOverlayIndex = -1;
 
   constructor() {
+    makeObservable(this);
     reaction(() => dockStore.selectedTabId, () => {
       searchStore.reset();
     });

src/common/user-store.ts

@@ -2,7 +2,7 @@ import type { ThemeId } from "../renderer/theme.store";
 import { app, remote } from "electron";
 import semver from "semver";
 import { readFile } from "fs-extra";
-import { action, observable, reaction, toJS } from "mobx";
+import { action, observable, reaction, toJS, makeObservable } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store";
 import { getAppVersion } from "./utils/app-version";
@@ -42,6 +42,8 @@ export class UserStore extends BaseStore<UserStoreModel> {
       migrations,
     });
 
+    makeObservable(this);
+
     this.handleOnLoad();
   }
 

src/extensions/cluster-feature.ts

@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import hb from "handlebars";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { ResourceApplier } from "../main/resource-applier";
 import { KubernetesCluster } from "./core-api/stores";
 import logger from "../main/logger";
@@ -22,7 +22,6 @@ export interface ClusterFeatureStatus {
 }
 
 export abstract class ClusterFeature {
-
   /**
    * this field sets the template parameters that are to be applied to any templated kubernetes resources that are to be installed for the feature.
    * See the renderTemplates() method for more details
@@ -75,6 +74,10 @@ export abstract class ClusterFeature {
    */
   abstract updateStatus(cluster: KubernetesCluster): Promise<ClusterFeatureStatus>;
 
+  constructor() {
+    makeObservable(this);
+  }
+
   /**
    * this is a helper method that conveniently applies kubernetes resources to the cluster.
    *

src/extensions/core-api/catalog.ts

@@ -1,10 +1,8 @@
-
-import { computed } from "mobx";
 import { CatalogEntity } from "../../common/catalog-entity";
 import { catalogEntityRegistry as registry } from "../../common/catalog-entity-registry";
 
 export class CatalogEntityRegistry {
-  @computed getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
+  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
     return registry.getItemsForApiKind<T>(apiVersion, kind);
   }
 }

src/extensions/extension-discovery.ts

@@ -2,7 +2,7 @@ import { watch } from "chokidar";
 import { ipcRenderer } from "electron";
 import { EventEmitter } from "events";
 import fs from "fs-extra";
-import { observable, reaction, toJS, when } from "mobx";
+import { observable, reaction, toJS, when, makeObservable } from "mobx";
 import os from "os";
 import path from "path";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
@@ -67,6 +67,7 @@ export class ExtensionDiscovery {
   public events: EventEmitter;
 
   constructor() {
+    makeObservable(this);
     this.events = new EventEmitter();
   }
 
@@ -351,7 +352,7 @@ export class ExtensionDiscovery {
     const userExtensions = await this.loadFromFolder(this.localFolderPath);
 
     for (const extension of userExtensions) {
-      if (await fs.pathExists(extension.manifestPath) === false) {
+      if ((await fs.pathExists(extension.manifestPath)) === false) {
         await this.installPackage(extension.absolutePath);
       }
     }

src/extensions/extension-loader.ts

@@ -1,7 +1,7 @@
 import { app, ipcRenderer, remote } from "electron";
 import { EventEmitter } from "events";
 import { isEqual } from "lodash";
-import { action, computed, observable, reaction, toJS, when } from "mobx";
+import { action, computed, observable, reaction, toJS, when, makeObservable } from "mobx";
 import path from "path";
 import { getHostedCluster } from "../common/cluster-store";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
@@ -40,6 +40,10 @@ export class ExtensionLoader {
   @observable isLoaded = false;
   whenLoaded = when(() => this.isLoaded);
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @computed get userExtensions(): Map<LensExtensionId, InstalledExtension> {
     const extensions = toJS(this.extensions);
 
@@ -234,7 +238,7 @@ export class ExtensionLoader {
     const cluster = getHostedCluster();
 
     this.autoInitExtensions(async (extension: LensRendererExtension) => {
-      if (await extension.isEnabledForCluster(cluster) === false) {
+      if ((await extension.isEnabledForCluster(cluster)) === false) {
         return [];
       }
 

src/extensions/extensions-store.ts

@@ -1,6 +1,6 @@
 import type { LensExtensionId } from "./lens-extension";
 import { BaseStore } from "../common/base-store";
-import { action, computed, observable, toJS } from "mobx";
+import { action, computed, observable, toJS, makeObservable } from "mobx";
 
 export interface LensExtensionsStoreModel {
   extensions: Record<LensExtensionId, LensExtensionState>;
@@ -16,6 +16,7 @@ export class ExtensionsStore extends BaseStore<LensExtensionsStoreModel> {
     super({
       configName: "lens-extensions",
     });
+    makeObservable(this);
   }
 
   @computed

src/extensions/lens-extension.ts

@@ -1,5 +1,5 @@
 import type { InstalledExtension } from "./extension-discovery";
-import { action, observable, reaction } from "mobx";
+import { action, observable, reaction, makeObservable } from "mobx";
 import { filesystemProvisionerStore } from "../main/extension-filesystem";
 import logger from "../main/logger";
 import { ProtocolHandlerRegistration } from "./registries/protocol-handler-registry";
@@ -27,6 +27,7 @@ export class LensExtension {
   @observable private isEnabled = false;
 
   constructor({ id, manifest, manifestPath, isBundled }: InstalledExtension) {
+    makeObservable(this);
     this.id = id;
     this.manifest = manifest;
     this.manifestPath = manifestPath;

src/extensions/registries/base-registry.ts

@@ -1,10 +1,14 @@
 // Base class for extensions-api registries
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
 
 export class BaseRegistry<T, I = T> {
   private items = observable.map<T, I>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getItems(): I[] {
     return Array.from(this.items.values());
   }

src/extensions/registries/command-registry.ts

@@ -1,7 +1,7 @@
 // Extensions API -> Commands
 
 import { BaseRegistry } from "./base-registry";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
 import { CatalogEntity } from "../../common/catalog-entity";
 
@@ -20,6 +20,12 @@ export interface CommandRegistration {
 export class CommandRegistry extends BaseRegistry<CommandRegistration> {
   @observable activeEntity: CatalogEntity;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   add(items: CommandRegistration | CommandRegistration[], extension?: LensExtension) {
     const itemArray = [items].flat();
 

src/extensions/registries/page-menu-registry.ts

@@ -2,7 +2,7 @@
 import type { IconProps } from "../../renderer/components/icon";
 import type React from "react";
 import type { PageTarget, RegisteredPage } from "./page-registry";
-import { action } from "mobx";
+import { action, makeObservable } from "mobx";
 import { BaseRegistry } from "./base-registry";
 import { LensExtension } from "../lens-extension";
 
@@ -22,7 +22,12 @@ export interface PageMenuComponents {
 }
 
 export class PageMenuRegistry<T extends PageMenuRegistration> extends BaseRegistry<T> {
-  @action
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   add(items: T[], ext: LensExtension) {
     const normalizedItems = items.map(menuItem => {
       menuItem.target = {

src/main/cluster-manager.ts

@@ -1,7 +1,7 @@
 import "../common/cluster-ipc";
 import type http from "http";
 import { ipcMain } from "electron";
-import { action, autorun, observable, reaction, toJS } from "mobx";
+import { action, autorun, observable, reaction, toJS, makeObservable } from "mobx";
 import { clusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
@@ -19,6 +19,8 @@ export class ClusterManager extends Singleton {
   constructor(public readonly port: number) {
     super();
 
+    makeObservable(this);
+
     catalogEntityRegistry.addSource("lens:kubernetes-clusters", this.catalogSource);
     // auto-init clusters
     reaction(() => clusterStore.enabledClustersList, (clusters) => {

src/main/cluster.ts

@@ -1,9 +1,9 @@
 import { ipcMain } from "electron";
 import type { ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences, ClusterPrometheusPreferences } from "../common/cluster-store";
 import type { IMetricsReqParams } from "../renderer/api/endpoints/metrics.api";
-import { action, comparer, computed, observable, reaction, toJS, when } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction, toJS, when } from "mobx";
 import { apiKubePrefix } from "../common/vars";
-import { broadcastMessage, InvalidKubeconfigChannel, ClusterListNamespaceForbiddenChannel } from "../common/ipc";
+import { broadcastMessage, ClusterListNamespaceForbiddenChannel, InvalidKubeconfigChannel } from "../common/ipc";
 import { ContextHandler } from "./context-handler";
 import { AuthorizationV1Api, CoreV1Api, HttpError, KubeConfig, V1ResourceAttributes } from "@kubernetes/client-node";
 import { Kubectl } from "./kubectl";
@@ -251,16 +251,17 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   constructor(model: ClusterModel) {
+    makeObservable(this);
     this.updateModel(model);
 
     try {
       const kubeconfig = this.getKubeconfig();
 
-      validateKubeConfig(kubeconfig, this.contextName, { validateCluster: true, validateUser: false, validateExec: false});
+      validateKubeConfig(kubeconfig, this.contextName, { validateCluster: true, validateUser: false, validateExec: false });
       this.apiUrl = kubeconfig.getCluster(kubeconfig.getContextObject(this.contextName).cluster).server;
-    } catch(err) {
+    } catch (err) {
       logger.error(err);
-      logger.error(`[CLUSTER] Failed to load kubeconfig for the cluster '${this.name || this.contextName}' (context: ${this.contextName}, kubeconfig: ${this.kubeConfigPath}).`);
+      logger.error(`[CLUSTER] Failed to load kubeconfig for the cluster '${this.name || this.contextName}' (context: ${this.contextName}, kubeconfig: ${this.kubeConfigPath}).`);
       broadcastMessage(InvalidKubeconfigChannel, model.id);
     }
   }

src/main/extension-filesystem.ts

@@ -2,7 +2,7 @@ import { randomBytes } from "crypto";
 import { SHA256 } from "crypto-js";
 import { app, remote } from "electron";
 import fse from "fs-extra";
-import { action, observable, toJS } from "mobx";
+import { action, observable, toJS, makeObservable } from "mobx";
 import path from "path";
 import { BaseStore } from "../common/base-store";
 import { LensExtensionId } from "../extensions/lens-extension";
@@ -19,6 +19,7 @@ export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {
       configName: "lens-filesystem-provisioner-store",
       accessPropertiesByDotNotation: false, // To make dots safe in cluster context names
     });
+    makeObservable(this);
   }
 
   /**

src/main/index.ts

@@ -1,7 +1,7 @@
 // Main process
 
 import "../common/system-ca";
-import "../common/libs-config"
+import "../common/libs-config";
 import "../common/prometheus-providers";
 import * as Mobx from "mobx";
 import * as LensExtensions from "../extensions/core-api";

src/main/protocol-handler/router.ts

@@ -3,7 +3,7 @@ import * as proto from "../../common/protocol-handler";
 import Url from "url-parse";
 import { LensExtension } from "../../extensions/lens-extension";
 import { broadcastMessage } from "../../common/ipc";
-import { observable, when } from "mobx";
+import { observable, when, makeObservable } from "mobx";
 
 export interface FallbackHandler {
   (name: string): Promise<boolean>;
@@ -15,6 +15,12 @@ export class LensProtocolRouterMain extends proto.LensProtocolRouter {
   @observable rendererLoaded = false;
   @observable extensionsLoaded = false;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   /**
    * Find the most specific registered handler, if it exists, and invoke it.
    *

src/main/window-manager.ts

@@ -1,5 +1,5 @@
 import type { ClusterId } from "../common/cluster-store";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { app, BrowserWindow, dialog, shell, webContents } from "electron";
 import windowStateKeeper from "electron-window-state";
 import { appEventBus } from "../common/event-bus";
@@ -21,6 +21,7 @@ export class WindowManager extends Singleton {
 
   constructor(protected proxyPort: number) {
     super();
+    makeObservable(this);
     this.bindEvents();
     this.initMenu();
     this.initTray();

src/renderer/api/api-manager.ts

@@ -1,6 +1,6 @@
 import type { KubeObjectStore } from "../kube-object.store";
 
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { autobind } from "../utils";
 import { KubeApi, parseKubeApi } from "./kube-api";
 
@@ -9,6 +9,10 @@ export class ApiManager {
   private apis = observable.map<string, KubeApi>();
   private stores = observable.map<string, KubeObjectStore>();
 
+  constructor() {
+    makeObservable(this);
+  }
+
   getApi(pathOrCallback: string | ((api: KubeApi) => boolean)) {
     if (typeof pathOrCallback === "string") {
       return this.apis.get(pathOrCallback) || this.apis.get(parseKubeApi(pathOrCallback).apiBase);

src/renderer/api/catalog-entity-registry.ts

@@ -1,13 +1,15 @@
-import { action, observable } from "mobx";
+import "../../common/catalog-entities";
+import { action, observable, makeObservable } from "mobx";
 import { broadcastMessage, subscribeToBroadcast } from "../../common/ipc";
 import { CatalogCategory, CatalogEntity, CatalogEntityData } from "../../common/catalog-entity";
 import { catalogCategoryRegistry, CatalogCategoryRegistry } from "../../common/catalog-category-registry";
-import "../../common/catalog-entities";
 
 export class CatalogEntityRegistry {
   @observable protected _items: CatalogEntity[] = observable.array([], { deep: true });
 
-  constructor(private categoryRegistry: CatalogCategoryRegistry) {}
+  constructor(private categoryRegistry: CatalogCategoryRegistry) {
+    makeObservable(this);
+  }
 
   init() {
     subscribeToBroadcast("catalog:items", (ev, items: CatalogEntityData[]) => {

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

@@ -5,7 +5,7 @@ import type { KubeObjectStore } from "../kube-object.store";
 import type { ClusterContext } from "../components/context";
 
 import plimit from "p-limit";
-import { comparer, IReactionDisposer, observable, reaction, when } from "mobx";
+import { comparer, IReactionDisposer, observable, reaction, when, makeObservable } from "mobx";
 import { autobind, noop } from "../utils";
 import { KubeApi } from "./kube-api";
 import { KubeJsonApiData } from "./kube-json-api";
@@ -35,6 +35,10 @@ export class KubeWatchApi {
 
   contextReady = when(() => Boolean(this.context));
 
+  constructor() {
+    makeObservable(this);
+  }
+
   isAllowedApi(api: KubeApi): boolean {
     return Boolean(this.context?.cluster.isAllowedResource(api.kind));
   }

src/renderer/api/websocket-api.ts

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { EventEmitter } from "../../common/event-emitter";
 
 interface IParams {
@@ -45,6 +45,7 @@ export class WebSocketApi {
   };
 
   constructor(protected params: IParams) {
+    makeObservable(this);
     this.params = Object.assign({}, WebSocketApi.defaultParams, params);
     const { autoConnect, pingIntervalSeconds } = this.params;
 

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;
   }