mobx-6 migration -- part 2 (npx mobx-undecorate --keepDecorators)

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

docs/extensions/guides/stores.md

@@ -25,7 +25,7 @@ The following example code creates a store for the `appPreferences` guide exampl
 
 ``` typescript
 import { Store } from "@k8slens/extensions";
-import { observable, toJS } from "mobx";
+import { observable, toJS, makeObservable } from "mobx";
 
 export type ExamplePreferencesModel = {
   enabled: boolean;
@@ -42,6 +42,7 @@ export class ExamplePreferencesStore extends Store.ExtensionStore<ExamplePrefere
         enabled: false
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: ExamplePreferencesModel): 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/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, CatalogEntityKindData } from "./catalog-entity";
 
 export class CatalogCategoryRegistry {
   @observable protected categories: CatalogCategory[] = [];
 
+  constructor() {
+    makeObservable(this);
+  }
+
   @action add(category: CatalogCategory) {
     this.categories.push(category);
   }

src/common/catalog/catalog-entity-registry.ts

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

src/common/catalog/catalog-entity.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "events";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 
 type ExtractEntityMetadataType<Entity> = Entity extends CatalogEntity<infer Metadata> ? Metadata : never;
 type ExtractEntityStatusType<Entity> = Entity extends CatalogEntity<any, infer Status> ? Status : never;
@@ -123,6 +123,7 @@ export abstract class CatalogEntity<
   @observable spec: Spec;
 
   constructor(data: CatalogEntityData<Metadata, Status, Spec>) {
+    makeObservable(this);
     this.metadata = data.metadata;
     this.status = data.status;
     this.spec = data.spec;

src/common/cluster-store.ts

@@ -1,7 +1,7 @@
 import path from "path";
 import { app, ipcMain, 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";
@@ -127,6 +127,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";
 import * as uuid from "uuid";
@@ -46,6 +46,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
       },
       migrations,
     });
+    makeObservable(this);
   }
 
   get activeHotbarId() {

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, computed, observable, reaction, toJS } from "mobx";
+import { action, computed, observable, reaction, toJS, makeObservable } from "mobx";
 import moment from "moment-timezone";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store";
@@ -52,6 +52,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
       configName: "lens-user-store",
       migrations,
     });
+    makeObservable(this);
   }
 
   @observable lastSeenAppVersion = "0.0.0";

src/common/utils/extended-map.ts

@@ -1,4 +1,10 @@
-import { action, IEnhancer, IObservableMapInitialValues, ObservableMap } from "mobx";
+import {
+  action,
+  IEnhancer,
+  IObservableMapInitialValues,
+  ObservableMap,
+  makeObservable,
+} from "mobx";
 
 export class ExtendedMap<K, V> extends Map<K, V> {
   constructor(protected getDefault: () => V, entries?: readonly (readonly [K, V])[] | null) {
@@ -33,6 +39,7 @@ export class ExtendedMap<K, V> extends Map<K, V> {
 export class ExtendedObservableMap<K, V> extends ObservableMap<K, V> {
   constructor(protected getDefault: () => V, initialData?: IObservableMapInitialValues<K, V>, enhancer?: IEnhancer<V>, name?: string) {
     super(initialData, enhancer, name);
+    makeObservable(this);
   }
 
   @action

src/common/utils/toggle-set.ts

@@ -1,4 +1,4 @@
-import { action, ObservableSet } from "mobx";
+import { action, IEnhancer, IObservableSetInitialValues, makeObservable, ObservableSet } from "mobx";
 
 export class ToggleSet<T> extends Set<T> {
   public toggle(value: T): void {
@@ -10,6 +10,12 @@ export class ToggleSet<T> extends Set<T> {
 }
 
 export class ObservableToggleSet<T> extends ObservableSet<T> {
+  constructor(data?: IObservableSetInitialValues<T>, enhancer?: IEnhancer<T>) {
+    super(data, enhancer);
+
+    makeObservable(this);
+  }
+
   @action
   public toggle(value: T): void {
     if (!this.delete(value)) {

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/catalog";
 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/extension-discovery.ts

@@ -2,7 +2,7 @@ import { watch } from "chokidar";
 import { ipcRenderer } from "electron";
 import { EventEmitter } from "events";
 import fse 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";
@@ -72,6 +72,12 @@ export class ExtensionDiscovery extends Singleton {
 
   public events = new EventEmitter();
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   get localFolderPath(): string {
     return path.join(os.homedir(), ".k8slens", "extensions");
   }
@@ -350,7 +356,7 @@ export class ExtensionDiscovery extends Singleton {
     const userExtensions = await this.loadFromFolder(this.localFolderPath, bundledExtensions.map((extension) => extension.manifest.name));
 
     for (const extension of userExtensions) {
-      if (await fse.pathExists(extension.manifestPath) === false) {
+      if ((await fse.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, when } from "mobx";
+import { action, computed, observable, reaction, when, makeObservable } from "mobx";
 import path from "path";
 import { getHostedCluster } from "../common/cluster-store";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
@@ -39,6 +39,12 @@ export class ExtensionLoader extends Singleton {
   @observable isLoaded = false;
   whenLoaded = when(() => this.isLoaded);
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @computed get userExtensions(): Map<LensExtensionId, InstalledExtension> {
     const extensions = this.toJSON();
 
@@ -234,7 +240,7 @@ export class ExtensionLoader extends Singleton {
     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 { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { LensExtension } from "../lens-extension";
 import { CatalogEntity } from "../../common/catalog";
 
@@ -20,6 +20,12 @@ export interface CommandRegistration {
 export class CommandRegistry extends BaseRegistry<CommandRegistration> {
   @observable activeEntity: CatalogEntity;
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   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,6 +22,12 @@ export interface PageMenuComponents {
 }
 
 export class PageMenuRegistry<T extends PageMenuRegistration> extends BaseRegistry<T> {
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   add(items: T[], ext: LensExtension) {
     const normalizedItems = items.map(menuItem => {

src/main/catalog-sources/kubeconfig-sync.ts

@@ -1,4 +1,12 @@
-import { action, observable, IComputedValue, computed, ObservableMap, runInAction } from "mobx";
+import {
+  action,
+  observable,
+  IComputedValue,
+  computed,
+  ObservableMap,
+  runInAction,
+  makeObservable,
+} from "mobx";
 import { CatalogEntity, catalogEntityRegistry } from "../../common/catalog";
 import { watch } from "chokidar";
 import fs from "fs";
@@ -23,6 +31,12 @@ export class KubeconfigSyncManager extends Singleton {
 
   protected static readonly syncName = "lens:kube-sync";
 
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
   @action
   startSync(): void {
     if (this.syncing) {

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, reaction, toJS } from "mobx";
+import { action, autorun, reaction, toJS, makeObservable } from "mobx";
 import { ClusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
@@ -14,6 +14,8 @@ export class ClusterManager extends Singleton {
   constructor() {
     super();
 
+    makeObservable(this);
+
     reaction(() => toJS(ClusterStore.getInstance().clustersList), () => {
       this.updateCatalog(ClusterStore.getInstance().clustersList);
     }, { fireImmediately: true });

src/main/cluster.ts

@@ -1,6 +1,15 @@
 import { ipcMain } from "electron";
 import type { ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences, ClusterPrometheusPreferences, UpdateClusterModel } from "../common/cluster-store";
-import { action, comparer, computed, observable, reaction, toJS, when } from "mobx";
+import {
+  action,
+  comparer,
+  computed,
+  observable,
+  reaction,
+  toJS,
+  when,
+  makeObservable,
+} from "mobx";
 import { broadcastMessage, ClusterListNamespaceForbiddenChannel } from "../common/ipc";
 import { ContextHandler } from "./context-handler";
 import { AuthorizationV1Api, CoreV1Api, HttpError, KubeConfig, V1ResourceAttributes } from "@kubernetes/client-node";
@@ -217,6 +226,7 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   constructor(model: ClusterModel) {
+    makeObservable(this);
     this.id = model.id;
     this.updateModel(model);
 

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/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";
@@ -23,6 +23,7 @@ export class WindowManager extends Singleton {
 
   constructor() {
     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,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, makeObservable } from "mobx";
 import { broadcastMessage, subscribeToBroadcast } from "../../common/ipc";
 import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegistry, CatalogCategoryRegistry, CatalogEntityKindData } from "../../common/catalog";
 import "../../common/catalog-entities";
@@ -7,7 +7,9 @@ export class CatalogEntityRegistry {
   @observable protected _items: CatalogEntity[] = observable.array([], { deep: true });
   @observable protected _activeEntity: CatalogEntity;
 
-  constructor(private categoryRegistry: CatalogCategoryRegistry) {}
+  constructor(private categoryRegistry: CatalogCategoryRegistry) {
+    makeObservable(this);
+  }
 
   init() {
     subscribeToBroadcast("catalog:items", (ev, items: (CatalogEntityData & CatalogEntityKindData)[]) => {

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

@@ -1,7 +1,7 @@
 import "./add-cluster.scss";
 import React from "react";
 import { observer } from "mobx-react";
-import { action, observable, runInAction } from "mobx";
+import { action, observable, runInAction, makeObservable } from "mobx";
 import { KubeConfig } from "@kubernetes/client-node";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
@@ -29,6 +29,11 @@ export class AddCluster extends React.Component {
 
   kubeContexts = observable.map<string, KubeConfig>();
 
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     appEventBus.emit({ name: "cluster-add", action: "start" });
   }

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 { getChartDetails, HelmChart } 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";
@@ -27,6 +27,11 @@ export class HelmChartDetails extends Component<Props> {
 
   private abortController?: AbortController;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentWillUnmount() {
     this.abortController?.abort();
   }

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 { getChartDetails, HelmChart, listCharts } 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);
+  }
+
   async loadAll() {
     try {
       const res = await this.loadItems(() => listCharts());

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 } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
 import { getRelease, getReleaseValues, HelmRelease, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
@@ -64,6 +64,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,5 @@
 import isEqual from "lodash/isEqual";
-import { action, observable, reaction, when } from "mobx";
+import { action, observable, reaction, when, makeObservable } from "mobx";
 import { autobind } from "../../utils";
 import { createRelease, deleteRelease, HelmRelease, IReleaseCreatePayload, IReleaseUpdatePayload, listReleases, rollbackRelease, updateRelease } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
@@ -14,6 +14,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
 
   constructor() {
     super();
+    makeObservable(this);
     when(() => secretsStore.isLoaded, () => {
       this.releaseSecrets.replace(this.getReleaseSecrets());
     });

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

@@ -3,7 +3,7 @@ import React from "react";
 import { SpeedDial, SpeedDialAction } from "@material-ui/lab";
 import { Icon } from "../icon";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction } from "mobx";
+import { observable, reaction, makeObservable } from "mobx";
 import { autobind } from "../../../common/utils";
 import { CatalogCategory, CatalogEntityAddMenuContext, CatalogEntityContextMenu } from "../../api/catalog-entity";
 import { EventEmitter } from "events";
@@ -18,6 +18,11 @@ export class CatalogAddButton extends React.Component<CatalogAddButtonProps> {
   @observable protected isOpen = false;
   protected menuItems = observable.array<CatalogEntityContextMenu>([]);
 
+  constructor(props: CatalogAddButtonProps) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     disposeOnUnmount(this, [
       reaction(() => this.props.category, (category) => {

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";
 
 export class CatalogEntityItem implements ItemObject {
-  constructor(public entity: CatalogEntity) {}
+  constructor(public entity: CatalogEntity) {
+    makeObservable(this);
+  }
 
   get name() {
     return this.entity.metadata.name;
@@ -67,6 +69,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 catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity));

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 { action, observable, reaction } from "mobx";
+import { action, observable, reaction, makeObservable } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
@@ -29,6 +29,11 @@ export class Catalog extends React.Component {
   @observable.deep private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab?: string;
 
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     this.contextMenu = {
       menuItems: [],

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";
@@ -41,6 +41,11 @@ export class ClusterIssues extends React.Component<Props> {
     [sortBy.age]: (warning: IWarning) => warning.timeDiffFromNow,
   };
 
+  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 { autorun, observable } from "mobx";
+import { autorun, observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
@@ -22,6 +22,11 @@ export class ConfigMapDetails extends React.Component<Props> {
   @observable isSaving = false;
   @observable data = observable.map();
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     disposeOnUnmount(this, [
       autorun(() => {

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";
@@ -27,6 +27,11 @@ enum columnId {
 
 @observer
 export class CrdList extends React.Component {
+  constructor(props: {}) {
+    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 } from "mobx";
+import { computed, reaction, 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(() => this.items.toJSON(), items => items.forEach(initStore));
   }

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -1,7 +1,7 @@
 import "./entity-settings.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { RouteComponentProps } from "react-router";
 import { observer } from "mobx-react";
 import { PageLayout } from "../layout/page-layout";
@@ -19,6 +19,11 @@ interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 export class EntitySettings extends React.Component<Props> {
   @observable activeTab: string;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   get entityId() {
     return this.props.match.params.entityId;
   }

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,7 +1,7 @@
 import "./extensions.scss";
 import { remote, shell } from "electron";
 import fse from "fs-extra";
-import { computed, observable, reaction, when } from "mobx";
+import { computed, observable, reaction, when, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import os from "os";
 import path from "path";
@@ -462,6 +462,11 @@ export class Extensions extends React.Component {
   @observable search = "";
   @observable installPath = "";
 
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get searchedForExtensions() {
     const searchText = this.search.toLowerCase();
 

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";
@@ -33,6 +42,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   constructor() {
     super();
+    makeObservable(this);
     this.init();
   }
 

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, HelmRepoManager } 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: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options(): SelectOption<HelmRepo>[] {
     return this.repos.map(repo => ({
       label: repo.name,

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

@@ -2,7 +2,7 @@ import React from "react";
 import { remote } from "electron";
 import { Avatar, IconButton, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, Paper } from "@material-ui/core";
 import { Description, Folder, Delete, HelpOutline } from "@material-ui/icons";
-import { action, computed, observable, reaction } from "mobx";
+import { action, computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import fse from "fs-extra";
 import { KubeconfigSyncEntry, KubeconfigSyncValue, UserStore } from "../../../common/user-store";
@@ -53,6 +53,11 @@ export class KubeconfigSyncs extends React.Component {
   syncs = observable.map<string, Value>();
   @observable loaded = false;
 
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     const mapEntries = await Promise.all(
       iter.map(

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

@@ -2,7 +2,7 @@ import "./preferences.scss";
 
 import React from "react";
 import moment from "moment-timezone";
-import { computed, observable, reaction } from "mobx";
+import { computed, observable, reaction, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 
 import { isWindows } from "../../../common/vars";
@@ -35,6 +35,11 @@ export class Preferences extends React.Component {
   @observable shell = UserStore.getInstance().shell || "";
   @observable activeTab = Pages.Application;
 
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get themeOptions(): SelectOption<string>[] {
     return ThemeStore.getInstance().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/+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-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/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: {}) {
+    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.getInstance().getById(this.props.clusterId);
   }

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

@@ -12,6 +12,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/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: {}) {
+    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";
@@ -32,6 +32,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

@@ -5,7 +5,7 @@ import path from "path";
 import fs from "fs-extra";
 import {Select, GroupSelectOption, SelectOption} from "../select";
 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";
@@ -27,6 +27,11 @@ export class CreateResource extends React.Component<Props> {
   @observable error = "";
   @observable templates:GroupSelectOption<SelectOption>[] = [];
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   componentDidMount() {
     createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v));
     createResourceStore.watchUserTemplates(() => createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v)));

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