From ae1b840df77b13134d67d516dc2ff92775ceb0c8 Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 6 May 2021 15:39:11 +0300 Subject: [PATCH] mobx-6 migration -- part 2 (npx mobx-undecorate --keepDecorators) Signed-off-by: Roman --- docs/extensions/guides/stores.md | 3 ++- src/common/base-store.ts | 3 ++- src/common/catalog/catalog-category-registry.ts | 6 +++++- src/common/catalog/catalog-entity-registry.ts | 13 ++++++++++++- src/common/catalog/catalog-entity.ts | 3 ++- src/common/cluster-store.ts | 4 +++- src/common/hotbar-store.ts | 3 ++- src/common/search-store.ts | 3 ++- src/common/user-store.ts | 3 ++- src/common/utils/extended-map.ts | 9 ++++++++- src/common/utils/toggle-set.ts | 8 +++++++- src/extensions/cluster-feature.ts | 7 +++++-- src/extensions/extension-discovery.ts | 10 ++++++++-- src/extensions/extension-loader.ts | 10 ++++++++-- src/extensions/extensions-store.ts | 3 ++- src/extensions/lens-extension.ts | 3 ++- src/extensions/registries/base-registry.ts | 6 +++++- src/extensions/registries/command-registry.ts | 8 +++++++- src/extensions/registries/page-menu-registry.ts | 8 +++++++- src/main/catalog-sources/kubeconfig-sync.ts | 16 +++++++++++++++- src/main/cluster-manager.ts | 4 +++- src/main/cluster.ts | 12 +++++++++++- src/main/extension-filesystem.ts | 3 ++- src/main/protocol-handler/router.ts | 8 +++++++- src/main/window-manager.ts | 3 ++- src/renderer/api/api-manager.ts | 6 +++++- src/renderer/api/catalog-entity-registry.ts | 6 ++++-- src/renderer/api/kube-watch-api.ts | 6 +++++- src/renderer/api/websocket-api.ts | 3 ++- .../components/+add-cluster/add-cluster.tsx | 7 ++++++- .../+apps-helm-charts/helm-chart-details.tsx | 7 ++++++- .../+apps-helm-charts/helm-chart.store.ts | 8 +++++++- .../+apps-releases/release-details.tsx | 7 ++++++- .../+apps-releases/release-rollback-dialog.tsx | 7 ++++++- .../components/+apps-releases/release.store.ts | 3 ++- .../components/+catalog/catalog-add-button.tsx | 7 ++++++- .../components/+catalog/catalog-entity.store.ts | 12 ++++++++++-- src/renderer/components/+catalog/catalog.tsx | 7 ++++++- .../components/+cluster/cluster-issues.tsx | 7 ++++++- .../+cluster/cluster-overview.store.ts | 3 ++- .../+config-maps/config-map-details.tsx | 7 ++++++- .../+config-resource-quotas/add-quota-dialog.tsx | 7 ++++++- .../+config-secrets/add-secret-dialog.tsx | 7 ++++++- .../+config-secrets/secret-details.tsx | 7 ++++++- .../components/+custom-resources/crd-list.tsx | 7 ++++++- .../+custom-resources/crd-resource-details.tsx | 7 ++++++- .../+custom-resources/crd-resources.tsx | 7 ++++++- .../components/+custom-resources/crd.store.ts | 4 +++- .../+entity-settings/entity-settings.tsx | 7 ++++++- src/renderer/components/+events/events.tsx | 7 ++++++- .../components/+extensions/extensions.tsx | 7 ++++++- .../+namespaces/add-namespace-dialog.tsx | 7 ++++++- .../components/+namespaces/namespace-details.tsx | 7 ++++++- .../components/+namespaces/namespace-select.tsx | 7 ++++++- .../components/+namespaces/namespace.store.ts | 12 +++++++++++- .../+network-ingresses/ingress.store.ts | 8 +++++++- .../+network-services/service-port-component.tsx | 7 ++++++- src/renderer/components/+nodes/nodes.store.ts | 8 +++++++- .../+preferences/add-helm-repo-dialog.tsx | 7 ++++++- .../components/+preferences/helm-charts.tsx | 7 ++++++- .../components/+preferences/kubeconfig-syncs.tsx | 7 ++++++- .../components/+preferences/preferences.tsx | 7 ++++++- .../+storage-volume-claims/volume-claim.store.ts | 8 +++++++- .../add-role-binding-dialog.tsx | 7 ++++++- .../role-binding-details.tsx | 7 ++++++- .../+user-management-roles/add-role-dialog.tsx | 7 ++++++- .../create-service-account-dialog.tsx | 7 ++++++- .../service-accounts-details.tsx | 7 ++++++- .../cronjob-trigger-dialog.tsx | 7 ++++++- .../+workloads-daemonsets/daemonsets.store.ts | 8 +++++++- .../deployment-scale-dialog.tsx | 7 ++++++- .../+workloads-deployments/deployments.store.ts | 8 +++++++- .../overview-workload-status.tsx | 7 ++++++- .../+workloads-pods/pod-container-port.tsx | 7 ++++++- .../+workloads-pods/pod-details-list.tsx | 7 ++++++- .../+workloads-pods/pod-details-secrets.tsx | 7 ++++++- .../components/+workloads-pods/pod-details.tsx | 7 ++++++- .../components/+workloads-pods/pods.store.ts | 8 +++++++- .../replicaset-scale-dialog.tsx | 7 ++++++- .../+workloads-replicasets/replicasets.store.ts | 8 +++++++- .../statefulset-scale-dialog.tsx | 7 ++++++- .../+workloads-statefulsets/statefulset.store.ts | 8 +++++++- src/renderer/components/animate/animate.tsx | 7 ++++++- src/renderer/components/app.tsx | 7 ++++++- .../cluster-manager/cluster-status.tsx | 7 ++++++- .../components/cluster-accessible-namespaces.tsx | 7 ++++++- .../components/cluster-home-dir-setting.tsx | 7 ++++++- .../components/cluster-metrics-setting.tsx | 7 ++++++- .../components/cluster-name-setting.tsx | 7 ++++++- .../components/cluster-prometheus-setting.tsx | 7 ++++++- .../components/cluster-proxy-setting.tsx | 7 ++++++- .../components/remove-cluster-button.tsx | 5 +++++ .../cluster-settings/components/show-metrics.tsx | 7 ++++++- .../command-palette/command-container.tsx | 7 ++++++- .../command-palette/command-dialog.tsx | 7 ++++++- .../components/confirm-dialog/confirm-dialog.tsx | 7 ++++++- src/renderer/components/dock/create-resource.tsx | 7 ++++++- src/renderer/components/dock/dock-tab.tsx | 7 ++++++- src/renderer/components/dock/dock.store.ts | 3 ++- src/renderer/components/dock/edit-resource.tsx | 7 ++++++- src/renderer/components/dock/editor-panel.tsx | 7 ++++++- src/renderer/components/dock/info-panel.tsx | 7 ++++++- .../components/dock/install-chart.store.ts | 3 ++- src/renderer/components/dock/install-chart.tsx | 7 ++++++- src/renderer/components/dock/log-list.tsx | 7 ++++++- src/renderer/components/dock/log.store.ts | 3 ++- src/renderer/components/dock/logs.tsx | 7 ++++++- src/renderer/components/dock/terminal-tab.tsx | 7 ++++++- .../components/dock/upgrade-chart.store.ts | 4 +++- src/renderer/components/dock/upgrade-chart.tsx | 7 ++++++- .../components/editable-list/editable-list.tsx | 7 ++++++- .../components/file-picker/file-picker.tsx | 7 ++++++- src/renderer/components/hotbar/hotbar-icon.tsx | 7 ++++++- .../components/hotbar/hotbar-remove-command.tsx | 7 ++++++- .../components/hotbar/hotbar-switch-command.tsx | 7 ++++++- .../components/input/drop-file-input.tsx | 7 ++++++- .../components/input/search-input-url.tsx | 7 ++++++- .../item-object-list/item-list-layout.tsx | 7 ++++++- .../item-object-list/page-filters-select.tsx | 7 ++++++- .../item-object-list/page-filters.store.ts | 3 ++- .../kube-object/kube-object-details.tsx | 7 ++++++- .../kube-object/kube-object-list-layout.tsx | 7 ++++++- .../kubeconfig-dialog/kubeconfig-dialog.tsx | 7 ++++++- src/renderer/components/layout/sidebar-item.tsx | 7 ++++++- src/renderer/components/menu/menu-actions.tsx | 7 ++++++- .../notifications/notifications.store.tsx | 6 +++++- .../resizing-anchor/resizing-anchor.tsx | 4 +++- src/renderer/components/select/select.tsx | 7 ++++++- src/renderer/components/table/table.tsx | 7 ++++++- src/renderer/components/tooltip/tooltip.tsx | 7 ++++++- src/renderer/item.store.ts | 6 +++++- src/renderer/kube-object.store.ts | 3 ++- src/renderer/navigation/page-param.ts | 3 ++- src/renderer/theme.store.ts | 4 +++- src/renderer/utils/storageHelper.ts | 3 ++- 135 files changed, 750 insertions(+), 139 deletions(-) diff --git a/docs/extensions/guides/stores.md b/docs/extensions/guides/stores.md index 704ca8ee18..9b8fdbb556 100644 --- a/docs/extensions/guides/stores.md +++ b/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 extends Singleton { protected constructor(protected params: BaseStoreParams) { super(); + makeObservable(this); this.params = { autoLoad: false, syncEnabled: true, diff --git a/src/common/catalog/catalog-category-registry.ts b/src/common/catalog/catalog-category-registry.ts index 13e81aa165..adc37eab8c 100644 --- a/src/common/catalog/catalog-category-registry.ts +++ b/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); } diff --git a/src/common/catalog/catalog-entity-registry.ts b/src/common/catalog/catalog-entity-registry.ts index bdb5ed5bc4..ae42a6693a 100644 --- a/src/common/catalog/catalog-entity-registry.ts +++ b/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>([], { deep: true }); + constructor() { + makeObservable(this); + } + @action addObservableSource(id: string, source: IObservableArray) { this.sources.set(id, computed(() => source)); } diff --git a/src/common/catalog/catalog-entity.ts b/src/common/catalog/catalog-entity.ts index 2062347f4a..485ea8ad2d 100644 --- a/src/common/catalog/catalog-entity.ts +++ b/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 extends CatalogEntity ? Metadata : never; type ExtractEntityStatusType = Entity extends CatalogEntity ? Status : never; @@ -123,6 +123,7 @@ export abstract class CatalogEntity< @observable spec: Spec; constructor(data: CatalogEntityData) { + makeObservable(this); this.metadata = data.metadata; this.status = data.status; this.spec = data.spec; diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index 8eb4a86e35..6ffb11213a 100644 --- a/src/common/cluster-store.ts +++ b/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 { migrations, }); + makeObservable(this); + this.pushStateToViewsAutomatically(); } diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 9a9bbd9594..9696acfd69 100644 --- a/src/common/hotbar-store.ts +++ b/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 { }, migrations, }); + makeObservable(this); } get activeHotbarId() { diff --git a/src/common/search-store.ts b/src/common/search-store.ts index c4e34ba5a2..01d38bce9d 100644 --- a/src/common/search-store.ts +++ b/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(); }); diff --git a/src/common/user-store.ts b/src/common/user-store.ts index 2c1f800469..78dbf7f5a3 100644 --- a/src/common/user-store.ts +++ b/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 { configName: "lens-user-store", migrations, }); + makeObservable(this); } @observable lastSeenAppVersion = "0.0.0"; diff --git a/src/common/utils/extended-map.ts b/src/common/utils/extended-map.ts index 24fa49b696..1a32b3b4a9 100644 --- a/src/common/utils/extended-map.ts +++ b/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 extends Map { constructor(protected getDefault: () => V, entries?: readonly (readonly [K, V])[] | null) { @@ -33,6 +39,7 @@ export class ExtendedMap extends Map { export class ExtendedObservableMap extends ObservableMap { constructor(protected getDefault: () => V, initialData?: IObservableMapInitialValues, enhancer?: IEnhancer, name?: string) { super(initialData, enhancer, name); + makeObservable(this); } @action diff --git a/src/common/utils/toggle-set.ts b/src/common/utils/toggle-set.ts index 1a8b22f186..7f73dc8564 100644 --- a/src/common/utils/toggle-set.ts +++ b/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 extends Set { public toggle(value: T): void { @@ -10,6 +10,12 @@ export class ToggleSet extends Set { } export class ObservableToggleSet extends ObservableSet { + constructor(data?: IObservableSetInitialValues, enhancer?: IEnhancer) { + super(data, enhancer); + + makeObservable(this); + } + @action public toggle(value: T): void { if (!this.delete(value)) { diff --git a/src/extensions/cluster-feature.ts b/src/extensions/cluster-feature.ts index fa4fe0e48f..3a45089578 100644 --- a/src/extensions/cluster-feature.ts +++ b/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; + constructor() { + makeObservable(this); + } + /** * this is a helper method that conveniently applies kubernetes resources to the cluster. * diff --git a/src/extensions/extension-discovery.ts b/src/extensions/extension-discovery.ts index afdf1aebf1..6a7c33cf3b 100644 --- a/src/extensions/extension-discovery.ts +++ b/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); } } diff --git a/src/extensions/extension-loader.ts b/src/extensions/extension-loader.ts index 6687efd1a8..1044e598a0 100644 --- a/src/extensions/extension-loader.ts +++ b/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 { 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 []; } diff --git a/src/extensions/extensions-store.ts b/src/extensions/extensions-store.ts index 1c963833e1..083e07bcc2 100644 --- a/src/extensions/extensions-store.ts +++ b/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; @@ -16,6 +16,7 @@ export class ExtensionsStore extends BaseStore { super({ configName: "lens-extensions", }); + makeObservable(this); } @computed diff --git a/src/extensions/lens-extension.ts b/src/extensions/lens-extension.ts index 466de0360a..d9968f63a0 100644 --- a/src/extensions/lens-extension.ts +++ b/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; diff --git a/src/extensions/registries/base-registry.ts b/src/extensions/registries/base-registry.ts index 052a483cbd..6bc4894e63 100644 --- a/src/extensions/registries/base-registry.ts +++ b/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 { private items = observable.map(); + constructor() { + makeObservable(this); + } + getItems(): I[] { return Array.from(this.items.values()); } diff --git a/src/extensions/registries/command-registry.ts b/src/extensions/registries/command-registry.ts index c8c4eedb75..865b33a491 100644 --- a/src/extensions/registries/command-registry.ts +++ b/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 { @observable activeEntity: CatalogEntity; + constructor() { + super(); + + makeObservable(this); + } + @action add(items: CommandRegistration | CommandRegistration[], extension?: LensExtension) { const itemArray = [items].flat(); diff --git a/src/extensions/registries/page-menu-registry.ts b/src/extensions/registries/page-menu-registry.ts index 25796bbda5..e54bc7067e 100644 --- a/src/extensions/registries/page-menu-registry.ts +++ b/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 extends BaseRegistry { + constructor() { + super(); + + makeObservable(this); + } + @action add(items: T[], ext: LensExtension) { const normalizedItems = items.map(menuItem => { diff --git a/src/main/catalog-sources/kubeconfig-sync.ts b/src/main/catalog-sources/kubeconfig-sync.ts index 44f46f0448..643d6f1a17 100644 --- a/src/main/catalog-sources/kubeconfig-sync.ts +++ b/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) { diff --git a/src/main/cluster-manager.ts b/src/main/cluster-manager.ts index 3c649ff579..5ca5e38b7e 100644 --- a/src/main/cluster-manager.ts +++ b/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 }); diff --git a/src/main/cluster.ts b/src/main/cluster.ts index d757b36346..58c6bb96b3 100644 --- a/src/main/cluster.ts +++ b/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); diff --git a/src/main/extension-filesystem.ts b/src/main/extension-filesystem.ts index 9d807669ec..0d0d1a672a 100644 --- a/src/main/extension-filesystem.ts +++ b/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 { configName: "lens-filesystem-provisioner-store", accessPropertiesByDotNotation: false, // To make dots safe in cluster context names }); + makeObservable(this); } /** diff --git a/src/main/protocol-handler/router.ts b/src/main/protocol-handler/router.ts index 20962372b2..73402ad6ab 100644 --- a/src/main/protocol-handler/router.ts +++ b/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; @@ -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. * diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts index 7324a3df1a..c0da361108 100644 --- a/src/main/window-manager.ts +++ b/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(); diff --git a/src/renderer/api/api-manager.ts b/src/renderer/api/api-manager.ts index 90e63f692b..f30e0816ed 100644 --- a/src/renderer/api/api-manager.ts +++ b/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(); private stores = observable.map(); + constructor() { + makeObservable(this); + } + getApi(pathOrCallback: string | ((api: KubeApi) => boolean)) { if (typeof pathOrCallback === "string") { return this.apis.get(pathOrCallback) || this.apis.get(parseKubeApi(pathOrCallback).apiBase); diff --git a/src/renderer/api/catalog-entity-registry.ts b/src/renderer/api/catalog-entity-registry.ts index c542c86d43..af8a8771b5 100644 --- a/src/renderer/api/catalog-entity-registry.ts +++ b/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)[]) => { diff --git a/src/renderer/api/kube-watch-api.ts b/src/renderer/api/kube-watch-api.ts index f2f50193db..4599626c08 100644 --- a/src/renderer/api/kube-watch-api.ts +++ b/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)); } diff --git a/src/renderer/api/websocket-api.ts b/src/renderer/api/websocket-api.ts index 79a92cf99e..26dc005d53 100644 --- a/src/renderer/api/websocket-api.ts +++ b/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; diff --git a/src/renderer/components/+add-cluster/add-cluster.tsx b/src/renderer/components/+add-cluster/add-cluster.tsx index b6d24f46e5..3ff118ea8f 100644 --- a/src/renderer/components/+add-cluster/add-cluster.tsx +++ b/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(); + constructor(props: {}) { + super(props); + makeObservable(this); + } + componentDidMount() { appEventBus.emit({ name: "cluster-add", action: "start" }); } diff --git a/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx b/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx index e0dfb6c77e..0f71d046a1 100644 --- a/src/renderer/components/+apps-helm-charts/helm-chart-details.tsx +++ b/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 { private abortController?: AbortController; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentWillUnmount() { this.abortController?.abort(); } diff --git a/src/renderer/components/+apps-helm-charts/helm-chart.store.ts b/src/renderer/components/+apps-helm-charts/helm-chart.store.ts index a5663e00cb..6d7df9b0d3 100644 --- a/src/renderer/components/+apps-helm-charts/helm-chart.store.ts +++ b/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 { @observable versions = observable.map(); + constructor() { + super(); + + makeObservable(this); + } + async loadAll() { try { const res = await this.loadItems(() => listCharts()); diff --git a/src/renderer/components/+apps-releases/release-details.tsx b/src/renderer/components/+apps-releases/release-details.tsx index 5bcca57c14..980532ffab 100644 --- a/src/renderer/components/+apps-releases/release-details.tsx +++ b/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 { this.releaseSecret = secret; }); + constructor(props: Props) { + super(props); + makeObservable(this); + } + async loadDetails() { const { release } = this.props; diff --git a/src/renderer/components/+apps-releases/release-rollback-dialog.tsx b/src/renderer/components/+apps-releases/release-rollback-dialog.tsx index 3b363d9e4e..4166111934 100644 --- a/src/renderer/components/+apps-releases/release-rollback-dialog.tsx +++ b/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 { @observable revision: IReleaseRevision; @observable revisions = observable.array(); + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(release: HelmRelease) { ReleaseRollbackDialog.isOpen = true; ReleaseRollbackDialog.release = release; diff --git a/src/renderer/components/+apps-releases/release.store.ts b/src/renderer/components/+apps-releases/release.store.ts index 3f8e23456c..35d248cf58 100644 --- a/src/renderer/components/+apps-releases/release.store.ts +++ b/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 { constructor() { super(); + makeObservable(this); when(() => secretsStore.isLoaded, () => { this.releaseSecrets.replace(this.getReleaseSecrets()); }); diff --git a/src/renderer/components/+catalog/catalog-add-button.tsx b/src/renderer/components/+catalog/catalog-add-button.tsx index 22ef59df15..1521998d89 100644 --- a/src/renderer/components/+catalog/catalog-add-button.tsx +++ b/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 { @observable protected isOpen = false; protected menuItems = observable.array([]); + constructor(props: CatalogAddButtonProps) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, [ reaction(() => this.props.category, (category) => { diff --git a/src/renderer/components/+catalog/catalog-entity.store.ts b/src/renderer/components/+catalog/catalog-entity.store.ts index bb77ea7224..e5f59ea1d7 100644 --- a/src/renderer/components/+catalog/catalog-entity.store.ts +++ b/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 { @observable activeCategory?: CatalogCategory; + constructor() { + super(); + + makeObservable(this); + } + @computed get entities() { if (!this.activeCategory) { return catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity)); diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 1db5d2d2c6..fa9f4b484d 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/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: [], diff --git a/src/renderer/components/+cluster/cluster-issues.tsx b/src/renderer/components/+cluster/cluster-issues.tsx index 4e6b961d03..fabfd1c3cd 100644 --- a/src/renderer/components/+cluster/cluster-issues.tsx +++ b/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 { [sortBy.age]: (warning: IWarning) => warning.timeDiffFromNow, }; + constructor(props: Props) { + super(props); + makeObservable(this); + } + @computed get warnings() { const warnings: IWarning[] = []; diff --git a/src/renderer/components/+cluster/cluster-overview.store.ts b/src/renderer/components/+cluster/cluster-overview.store.ts index 0158b405d0..500039762f 100644 --- a/src/renderer/components/+cluster/cluster-overview.store.ts +++ b/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 implements Cl constructor() { super(); + makeObservable(this); this.init(); } diff --git a/src/renderer/components/+config-maps/config-map-details.tsx b/src/renderer/components/+config-maps/config-map-details.tsx index cc24904f04..0c6463b4a5 100644 --- a/src/renderer/components/+config-maps/config-map-details.tsx +++ b/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 { @observable isSaving = false; @observable data = observable.map(); + constructor(props: Props) { + super(props); + makeObservable(this); + } + async componentDidMount() { disposeOnUnmount(this, [ autorun(() => { diff --git a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx b/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx index 95f50c935b..c7d3a24502 100644 --- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx +++ b/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 { @observable namespace = this.defaultNamespace; @observable quotas = AddQuotaDialog.defaultQuotas; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { AddQuotaDialog.isOpen = true; } diff --git a/src/renderer/components/+config-secrets/add-secret-dialog.tsx b/src/renderer/components/+config-secrets/add-secret-dialog.tsx index 2fae17d30d..f0608510f9 100644 --- a/src/renderer/components/+config-secrets/add-secret-dialog.tsx +++ b/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 { @observable static isOpen = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { AddSecretDialog.isOpen = true; } diff --git a/src/renderer/components/+config-secrets/secret-details.tsx b/src/renderer/components/+config-secrets/secret-details.tsx index ab7bc59e46..3b59ed3d4f 100644 --- a/src/renderer/components/+config-secrets/secret-details.tsx +++ b/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 { @observable data: { [name: string]: string } = {}; @observable revealSecret: { [name: string]: boolean } = {}; + constructor(props: Props) { + super(props); + makeObservable(this); + } + async componentDidMount() { disposeOnUnmount(this, [ autorun(() => { diff --git a/src/renderer/components/+custom-resources/crd-list.tsx b/src/renderer/components/+custom-resources/crd-list.tsx index 4eba921448..78987e66db 100644 --- a/src/renderer/components/+custom-resources/crd-list.tsx +++ b/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(); } diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx index b322524e3e..605eddd7a9 100644 --- a/src/renderer/components/+custom-resources/crd-resource-details.tsx +++ b/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 { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @computed get crd() { return crdStore.getByObject(this.props.object); } diff --git a/src/renderer/components/+custom-resources/crd-resources.tsx b/src/renderer/components/+custom-resources/crd-resources.tsx index c60a93f063..0a3ee3bfe2 100644 --- a/src/renderer/components/+custom-resources/crd-resources.tsx +++ b/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 { + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, [ autorun(() => { diff --git a/src/renderer/components/+custom-resources/crd.store.ts b/src/renderer/components/+custom-resources/crd.store.ts index e4bd8c64bc..a8d95ab200 100644 --- a/src/renderer/components/+custom-resources/crd.store.ts +++ b/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 { constructor() { super(); + makeObservable(this); + // auto-init stores for crd-s reaction(() => this.items.toJSON(), items => items.forEach(initStore)); } diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx index ef21e2b3ad..3249f315e3 100644 --- a/src/renderer/components/+entity-settings/entity-settings.tsx +++ b/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 { export class EntitySettings extends React.Component { @observable activeTab: string; + constructor(props: Props) { + super(props); + makeObservable(this); + } + get entityId() { return this.props.match.params.entityId; } diff --git a/src/renderer/components/+events/events.tsx b/src/renderer/components/+events/events.tsx index 4b7b64dd15..78adcc1c70 100644 --- a/src/renderer/components/+events/events.tsx +++ b/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 { onSort: params => this.sorting = params, }; + constructor(props: Props) { + super(props); + makeObservable(this); + } + get store(): EventStore { return eventStore; } diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx index 968f16c63e..2d9baba1d4 100644 --- a/src/renderer/components/+extensions/extensions.tsx +++ b/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(); diff --git a/src/renderer/components/+namespaces/add-namespace-dialog.tsx b/src/renderer/components/+namespaces/add-namespace-dialog.tsx index 1ad2efae59..c62d93e628 100644 --- a/src/renderer/components/+namespaces/add-namespace-dialog.tsx +++ b/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 { @observable static isOpen = false; @observable namespace = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { AddNamespaceDialog.isOpen = true; } diff --git a/src/renderer/components/+namespaces/namespace-details.tsx b/src/renderer/components/+namespaces/namespace-details.tsx index d43b348ce5..e4e7909b10 100644 --- a/src/renderer/components/+namespaces/namespace-details.tsx +++ b/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 { @observer export class NamespaceDetails extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @computed get quotas() { const namespace = this.props.object.getName(); diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx index d398f91f0a..9fa8570238 100644 --- a/src/renderer/components/+namespaces/namespace-select.tsx +++ b/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({children, ...rest}: ValueContainerProps) export class NamespaceSelect extends React.Component { static defaultProps = defaultProps as object; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, [ kubeWatchApi.subscribeStores([namespaceStore], { diff --git a/src/renderer/components/+namespaces/namespace.store.ts b/src/renderer/components/+namespaces/namespace.store.ts index f9512a9031..fb92c942c0 100644 --- a/src/renderer/components/+namespaces/namespace.store.ts +++ b/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 { constructor() { super(); + makeObservable(this); this.init(); } diff --git a/src/renderer/components/+network-ingresses/ingress.store.ts b/src/renderer/components/+network-ingresses/ingress.store.ts index 37156c2741..a80599fdcd 100644 --- a/src/renderer/components/+network-ingresses/ingress.store.ts +++ b/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 { api = ingressApi; @observable metrics: IIngressMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + async loadMetrics(ingress: Ingress) { this.metrics = await this.api.getMetrics(ingress.getName(), ingress.getNs()); } diff --git a/src/renderer/components/+network-services/service-port-component.tsx b/src/renderer/components/+network-services/service-port-component.tsx index 77070390e0..044f580b9e 100644 --- a/src/renderer/components/+network-services/service-port-component.tsx +++ b/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 { @observable waiting = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + async portForward() { const { service, port } = this.props; diff --git a/src/renderer/components/+nodes/nodes.store.ts b/src/renderer/components/+nodes/nodes.store.ts index b301015747..362ae378ac 100644 --- a/src/renderer/components/+nodes/nodes.store.ts +++ b/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 { @observable metricsLoading = false; @observable metricsLoaded = false; + constructor() { + super(); + + makeObservable(this); + } + @action async loadUsageMetrics() { this.metricsLoading = true; diff --git a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx b/src/renderer/components/+preferences/add-helm-repo-dialog.tsx index bb34c1a1eb..5ffec819f8 100644 --- a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx +++ b/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 { @observable static isOpen = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { AddHelmRepoDialog.isOpen = true; } diff --git a/src/renderer/components/+preferences/helm-charts.tsx b/src/renderer/components/+preferences/helm-charts.tsx index e32b26ed7d..742f23318f 100644 --- a/src/renderer/components/+preferences/helm-charts.tsx +++ b/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(); + constructor(props: {}) { + super(props); + makeObservable(this); + } + @computed get options(): SelectOption[] { return this.repos.map(repo => ({ label: repo.name, diff --git a/src/renderer/components/+preferences/kubeconfig-syncs.tsx b/src/renderer/components/+preferences/kubeconfig-syncs.tsx index 89432dcac8..a7e16b73d9 100644 --- a/src/renderer/components/+preferences/kubeconfig-syncs.tsx +++ b/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(); @observable loaded = false; + constructor(props: {}) { + super(props); + makeObservable(this); + } + async componentDidMount() { const mapEntries = await Promise.all( iter.map( diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx index ea529320b8..f148151fa8 100644 --- a/src/renderer/components/+preferences/preferences.tsx +++ b/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[] { return ThemeStore.getInstance().themes.map(theme => ({ label: theme.name, diff --git a/src/renderer/components/+storage-volume-claims/volume-claim.store.ts b/src/renderer/components/+storage-volume-claims/volume-claim.store.ts index 8c4baaaf76..41b4f3bcc6 100644 --- a/src/renderer/components/+storage-volume-claims/volume-claim.store.ts +++ b/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 { api = pvcApi; @observable metrics: IPvcMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + @action async loadMetrics(pvc: PersistentVolumeClaim) { this.metrics = await pvcApi.getMetrics(pvc.getName(), pvc.getNs()); diff --git a/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx b/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx index e7a676365c..d06e5b8e53 100644 --- a/src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx +++ b/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 { @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; diff --git a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx b/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx index e72463d184..eb28725422 100644 --- a/src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx +++ b/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 { export class RoleBindingDetails extends React.Component { @observable selectedSubjects = observable.array([], { deep: false }); + constructor(props: Props) { + super(props); + makeObservable(this); + } + async componentDidMount() { disposeOnUnmount(this, [ reaction(() => this.props.object, () => { diff --git a/src/renderer/components/+user-management-roles/add-role-dialog.tsx b/src/renderer/components/+user-management-roles/add-role-dialog.tsx index 555a6e6c84..1b39762563 100644 --- a/src/renderer/components/+user-management-roles/add-role-dialog.tsx +++ b/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 { @observable roleName = ""; @observable namespace = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { AddRoleDialog.isOpen = true; } diff --git a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx b/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx index e9a27979cf..8ebb871e37 100644 --- a/src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx +++ b/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 { @observable name = ""; @observable namespace = "default"; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open() { CreateServiceAccountDialog.isOpen = true; } diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx b/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx index 0a45b5a2f9..e7a91fb385 100644 --- a/src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx +++ b/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 { this.imagePullSecrets = await Promise.all(imagePullSecrets); }); + constructor(props: Props) { + super(props); + makeObservable(this); + } + renderSecrets() { const { secrets } = this; diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx index e8a561ea0e..65df8abea4 100644 --- a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx +++ b/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 { @observable ready = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(cronjob: CronJob) { CronJobTriggerDialog.isOpen = true; CronJobTriggerDialog.data = cronjob; diff --git a/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts b/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts index b8c8dee573..fd41192fee 100644 --- a/src/renderer/components/+workloads-daemonsets/daemonsets.store.ts +++ b/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 { @observable metrics: IPodMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + async loadMetrics(daemonSet: DaemonSet) { const pods = this.getChildPods(daemonSet); diff --git a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx b/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx index 41ad886eee..f452a849bf 100644 --- a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx +++ b/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 { @observable currentReplicas = 0; @observable desiredReplicas = 0; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(deployment: Deployment) { DeploymentScaleDialog.isOpen = true; DeploymentScaleDialog.data = deployment; diff --git a/src/renderer/components/+workloads-deployments/deployments.store.ts b/src/renderer/components/+workloads-deployments/deployments.store.ts index b9dc85eae5..bf9c8e41d3 100644 --- a/src/renderer/components/+workloads-deployments/deployments.store.ts +++ b/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 { api = deploymentApi; @observable metrics: IPodMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + protected sortItems(items: Deployment[]) { return super.sortItems(items, [ item => item.getReplicas(), diff --git a/src/renderer/components/+workloads-overview/overview-workload-status.tsx b/src/renderer/components/+workloads-overview/overview-workload-status.tsx index acab487e91..9701edd2da 100644 --- a/src/renderer/components/+workloads-overview/overview-workload-status.tsx +++ b/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 { @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; diff --git a/src/renderer/components/+workloads-pods/pod-container-port.tsx b/src/renderer/components/+workloads-pods/pod-container-port.tsx index 4f2124ec3d..261453744b 100644 --- a/src/renderer/components/+workloads-pods/pod-container-port.tsx +++ b/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 { @observable waiting = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + async portForward() { const { pod, port } = this.props; diff --git a/src/renderer/components/+workloads-pods/pod-details-list.tsx b/src/renderer/components/+workloads-pods/pod-details-list.tsx index c5d9023334..f4a4542f4c 100644 --- a/src/renderer/components/+workloads-pods/pod-details-list.tsx +++ b/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 { [sortBy.memory]: (pod: Pod) => podsStore.getPodKubeMetrics(pod).memory, }; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.metricsWatcher.start(true); disposeOnUnmount(this, [ diff --git a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx index b2c7cd14c3..ee5efb05fa 100644 --- a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx +++ b/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 { secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret)); }); + constructor(props: Props) { + super(props); + makeObservable(this); + } + render() { const { pod } = this.props; diff --git a/src/renderer/components/+workloads-pods/pod-details.tsx b/src/renderer/components/+workloads-pods/pod-details.tsx index 4150f5807d..930dc5b5aa 100644 --- a/src/renderer/components/+workloads-pods/pod-details.tsx +++ b/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 { private watcher = interval(60, () => this.loadMetrics()); + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, [ autorun(() => { diff --git a/src/renderer/components/+workloads-pods/pods.store.ts b/src/renderer/components/+workloads-pods/pods.store.ts index 5a535cec66..6ae56e5066 100644 --- a/src/renderer/components/+workloads-pods/pods.store.ts +++ b/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 { @observable metrics: IPodMetrics = null; @observable kubeMetrics = observable.array([]); + constructor() { + super(); + + makeObservable(this); + } + @action async loadMetrics(pod: Pod) { this.metrics = await podsApi.getMetrics([pod], pod.getNs()); diff --git a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx b/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx index 3a21c7116f..e39fee2f0c 100644 --- a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx +++ b/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 { @observable currentReplicas = 0; @observable desiredReplicas = 0; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(replicaSet: ReplicaSet) { ReplicaSetScaleDialog.isOpen = true; ReplicaSetScaleDialog.data = replicaSet; diff --git a/src/renderer/components/+workloads-replicasets/replicasets.store.ts b/src/renderer/components/+workloads-replicasets/replicasets.store.ts index ca58006930..fbcb4f878b 100644 --- a/src/renderer/components/+workloads-replicasets/replicasets.store.ts +++ b/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 { api = replicaSetApi; @observable metrics: IPodMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + async loadMetrics(replicaSet: ReplicaSet) { const pods = this.getChildPods(replicaSet); diff --git a/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx b/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx index 38c7cd4898..d65b205f51 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.tsx +++ b/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 { @observable currentReplicas = 0; @observable desiredReplicas = 0; + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(statefulSet: StatefulSet) { StatefulSetScaleDialog.isOpen = true; StatefulSetScaleDialog.data = statefulSet; diff --git a/src/renderer/components/+workloads-statefulsets/statefulset.store.ts b/src/renderer/components/+workloads-statefulsets/statefulset.store.ts index 6ee4bb5c28..2faed90fb1 100644 --- a/src/renderer/components/+workloads-statefulsets/statefulset.store.ts +++ b/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 { api = statefulSetApi; @observable metrics: IPodMetrics = null; + constructor() { + super(); + + makeObservable(this); + } + async loadMetrics(statefulSet: StatefulSet) { const pods = this.getChildPods(statefulSet); diff --git a/src/renderer/components/animate/animate.tsx b/src/renderer/components/animate/animate.tsx index e114e0bbb7..4006d25c5b 100644 --- a/src/renderer/components/animate/animate.tsx +++ b/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 { leave: false }; + constructor(props: AnimateProps) { + super(props); + makeObservable(this); + } + get contentElem() { return React.Children.only(this.props.children) as React.ReactElement>; } diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx index 8199da8c2e..ef2a7363a5 100755 --- a/src/renderer/components/app.tsx +++ b/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(); diff --git a/src/renderer/components/cluster-manager/cluster-status.tsx b/src/renderer/components/cluster-manager/cluster-status.tsx index 797b79e709..92ed9d0ecc 100644 --- a/src/renderer/components/cluster-manager/cluster-status.tsx +++ b/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 { @observable authOutput: KubeAuthProxyLog[] = []; @observable isReconnecting = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + get cluster(): Cluster { return ClusterStore.getInstance().getById(this.props.clusterId); } diff --git a/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx b/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx index 0fb3e7e08f..eb067be630 100644 --- a/src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx +++ b/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 { @observable namespaces = new Set(this.props.cluster.accessibleNamespaces); + constructor(props: Props) { + super(props); + makeObservable(this); + } + render() { return ( <> diff --git a/src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx index e5dfdad130..d2a984f92d 100644 --- a/src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx +++ b/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 { @observable directory = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, autorun(() => { diff --git a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx index bc51ddf061..1cdb168c84 100644 --- a/src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx +++ b/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 { @observable hiddenMetrics = observable.set(); + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.hiddenMetrics = observable.set(this.props.cluster.preferences.hiddenMetrics ?? []); diff --git a/src/renderer/components/cluster-settings/components/cluster-name-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-name-setting.tsx index 46f80597df..7b07d5894d 100644 --- a/src/renderer/components/cluster-settings/components/cluster-name-setting.tsx +++ b/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 { @observable name = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, autorun(() => { diff --git a/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx index f42ecbd321..c3ee5d6a11 100644 --- a/src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx +++ b/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[] = [ { value: "", label: "Auto detect" }, @@ -21,6 +21,11 @@ export class ClusterPrometheusSetting extends React.Component { @observable path = ""; @observable provider = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + @computed get canEditPrometheusPath() { if (this.provider === "" || this.provider === "lens") return false; diff --git a/src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx b/src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx index 1fe5c2d6af..9ef62fa366 100644 --- a/src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx +++ b/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 { @observable proxy = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, autorun(() => { diff --git a/src/renderer/components/cluster-settings/components/remove-cluster-button.tsx b/src/renderer/components/cluster-settings/components/remove-cluster-button.tsx index b41aa4d9aa..32f7bedc64 100644 --- a/src/renderer/components/cluster-settings/components/remove-cluster-button.tsx +++ b/src/renderer/components/cluster-settings/components/remove-cluster-button.tsx @@ -12,6 +12,11 @@ interface Props { @observer export class RemoveClusterButton extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @autobind() confirmRemoveCluster() { const { cluster } = this.props; diff --git a/src/renderer/components/cluster-settings/components/show-metrics.tsx b/src/renderer/components/cluster-settings/components/show-metrics.tsx index a3e071182f..8f2b88515a 100644 --- a/src/renderer/components/cluster-settings/components/show-metrics.tsx +++ b/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 { @observable hiddenMetrics = observable.set(); + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.hiddenMetrics = observable.set(this.props.cluster.preferences.hiddenMetrics ?? []); diff --git a/src/renderer/components/command-palette/command-container.tsx b/src/renderer/components/command-palette/command-container.tsx index 848b7d7335..49ff413a76 100644 --- a/src/renderer/components/command-palette/command-container.tsx +++ b/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(); diff --git a/src/renderer/components/command-palette/command-dialog.tsx b/src/renderer/components/command-palette/command-dialog.tsx index 38ce1f7d58..389a540145 100644 --- a/src/renderer/components/command-palette/command-dialog.tsx +++ b/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 diff --git a/src/renderer/components/confirm-dialog/confirm-dialog.tsx b/src/renderer/components/confirm-dialog/confirm-dialog.tsx index 0c29b40c02..06d75dbd97 100644 --- a/src/renderer/components/confirm-dialog/confirm-dialog.tsx +++ b/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 { @observable isSaving = false; + constructor(props: ConfirmDialogProps) { + super(props); + makeObservable(this); + } + static open(params: ConfirmDialogParams) { ConfirmDialog.isOpen = true; ConfirmDialog.params = params; diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx index 29e2bf60e7..5bc7f9818e 100644 --- a/src/renderer/components/dock/create-resource.tsx +++ b/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 { @observable error = ""; @observable templates:GroupSelectOption[] = []; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v)); createResourceStore.watchUserTemplates(() => createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v))); diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx index 104fdcc15c..bcee911757 100644 --- a/src/renderer/components/dock/dock-tab.tsx +++ b/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 { moreActions?: React.ReactNode; @@ -17,6 +17,11 @@ export interface DockTabProps extends TabProps { export class DockTab extends React.Component { @observable menuVisible = false; + constructor(props: DockTabProps) { + super(props); + makeObservable(this); + } + get tabId() { return this.props.value.id; } diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts index 3a8ab4333c..ece3dc334d 100644 --- a/src/renderer/components/dock/dock.store.ts +++ b/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(); } diff --git a/src/renderer/components/dock/edit-resource.tsx b/src/renderer/components/dock/edit-resource.tsx index b84d8f9103..077de845ba 100644 --- a/src/renderer/components/dock/edit-resource.tsx +++ b/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 { @observable error = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + get tabId() { return this.props.tab.id; } diff --git a/src/renderer/components/dock/editor-panel.tsx b/src/renderer/components/dock/editor-panel.tsx index d0ddcf56c6..b194e5bb39 100644 --- a/src/renderer/components/dock/editor-panel.tsx +++ b/src/renderer/components/dock/editor-panel.tsx @@ -1,6 +1,6 @@ import React from "react"; import jsYaml from "js-yaml"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../utils"; import { AceEditor } from "../ace-editor"; @@ -23,6 +23,11 @@ export class EditorPanel extends React.Component { @observable yamlError = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { // validate and run callback with optional error this.onChange(this.props.value || ""); diff --git a/src/renderer/components/dock/info-panel.tsx b/src/renderer/components/dock/info-panel.tsx index c4f4c22d1b..0faed9dc6f 100644 --- a/src/renderer/components/dock/info-panel.tsx +++ b/src/renderer/components/dock/info-panel.tsx @@ -1,7 +1,7 @@ import "./info-panel.scss"; import React, { Component, ReactNode } from "react"; -import { computed, observable, reaction } from "mobx"; +import { computed, observable, reaction, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../utils"; import { Button } from "../button"; @@ -44,6 +44,11 @@ export class InfoPanel extends Component { @observable error = ""; @observable waiting = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, [ reaction(() => this.props.tabId, () => { diff --git a/src/renderer/components/dock/install-chart.store.ts b/src/renderer/components/dock/install-chart.store.ts index 3e06a2de43..a3efc706a3 100644 --- a/src/renderer/components/dock/install-chart.store.ts +++ b/src/renderer/components/dock/install-chart.store.ts @@ -1,4 +1,4 @@ -import { action, autorun } from "mobx"; +import { action, autorun, makeObservable } from "mobx"; import { dockStore, IDockTab, TabId, TabKind } from "./dock.store"; import { DockTabStore } from "./dock-tab.store"; import { getChartDetails, getChartValues, HelmChart } from "../../api/endpoints/helm-charts.api"; @@ -24,6 +24,7 @@ export class InstallChartStore extends DockTabStore { super({ storageKey: "install_charts" }); + makeObservable(this); autorun(() => { const { selectedTab, isOpen } = dockStore; diff --git a/src/renderer/components/dock/install-chart.tsx b/src/renderer/components/dock/install-chart.tsx index 4f651f7a3a..c146ba32e6 100644 --- a/src/renderer/components/dock/install-chart.tsx +++ b/src/renderer/components/dock/install-chart.tsx @@ -1,7 +1,7 @@ import "./install-chart.scss"; import React, { Component } from "react"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import { dockStore, IDockTab } from "./dock.store"; import { InfoPanel } from "./info-panel"; @@ -29,6 +29,11 @@ export class InstallChart extends Component { @observable error = ""; @observable showNotes = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + get values() { return this.chartData.values; } diff --git a/src/renderer/components/dock/log-list.tsx b/src/renderer/components/dock/log-list.tsx index 1eafe0f15a..ee11d2f2e5 100644 --- a/src/renderer/components/dock/log-list.tsx +++ b/src/renderer/components/dock/log-list.tsx @@ -4,7 +4,7 @@ import React from "react"; import AnsiUp from "ansi_up"; import DOMPurify from "dompurify"; import debounce from "lodash/debounce"; -import { action, computed, observable } from "mobx"; +import { action, computed, observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import moment from "moment-timezone"; import { Align, ListOnScrollProps } from "react-window"; @@ -37,6 +37,11 @@ export class LogList extends React.Component { private virtualListRef = React.createRef(); // A reference for VirtualList component private lineHeight = 18; // Height of a log line. Should correlate with styles in pod-log-list.scss + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.scrollToBottom(); } diff --git a/src/renderer/components/dock/log.store.ts b/src/renderer/components/dock/log.store.ts index 8b5cc73359..f7694ccdc4 100644 --- a/src/renderer/components/dock/log.store.ts +++ b/src/renderer/components/dock/log.store.ts @@ -1,4 +1,4 @@ -import { autorun, computed, observable } from "mobx"; +import { autorun, computed, observable, makeObservable } from "mobx"; import { IPodLogsQuery, Pod, podsApi } from "../../api/endpoints"; import { autobind, interval } from "../../utils"; @@ -21,6 +21,7 @@ export class LogStore { @observable podLogs = observable.map(); constructor() { + makeObservable(this); autorun(() => { const { selectedTab, isOpen } = dockStore; diff --git a/src/renderer/components/dock/logs.tsx b/src/renderer/components/dock/logs.tsx index 07f65c6e63..e698c543ca 100644 --- a/src/renderer/components/dock/logs.tsx +++ b/src/renderer/components/dock/logs.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { observable, reaction } from "mobx"; +import { observable, reaction, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { searchStore } from "../../../common/search-store"; @@ -24,6 +24,11 @@ export class Logs extends React.Component { private logListElement = React.createRef(); // A reference for VirtualList component + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { disposeOnUnmount(this, reaction(() => this.props.tab.id, this.reload, { fireImmediately: true }), diff --git a/src/renderer/components/dock/terminal-tab.tsx b/src/renderer/components/dock/terminal-tab.tsx index 1e84a9501e..cd1de7b1a9 100644 --- a/src/renderer/components/dock/terminal-tab.tsx +++ b/src/renderer/components/dock/terminal-tab.tsx @@ -7,13 +7,18 @@ import { DockTab, DockTabProps } from "./dock-tab"; import { Icon } from "../icon"; import { terminalStore } from "./terminal.store"; import { dockStore } from "./dock.store"; -import { reaction } from "mobx"; +import { reaction, makeObservable } from "mobx"; interface Props extends DockTabProps { } @observer export class TerminalTab extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { reaction(() => this.isDisconnected === true, () => { dockStore.closeTab(this.tabId); diff --git a/src/renderer/components/dock/upgrade-chart.store.ts b/src/renderer/components/dock/upgrade-chart.store.ts index 656902d5fe..687aafc7be 100644 --- a/src/renderer/components/dock/upgrade-chart.store.ts +++ b/src/renderer/components/dock/upgrade-chart.store.ts @@ -1,4 +1,4 @@ -import { action, autorun, IReactionDisposer, reaction } from "mobx"; +import { action, autorun, IReactionDisposer, reaction, makeObservable } from "mobx"; import { dockStore, IDockTab, TabId, TabKind } from "./dock.store"; import { DockTabStore } from "./dock-tab.store"; import { getReleaseValues, HelmRelease } from "../../api/endpoints/helm-releases.api"; @@ -19,6 +19,8 @@ export class UpgradeChartStore extends DockTabStore { storageKey: "chart_releases" }); + makeObservable(this); + autorun(() => { const { selectedTab, isOpen } = dockStore; diff --git a/src/renderer/components/dock/upgrade-chart.tsx b/src/renderer/components/dock/upgrade-chart.tsx index c5253cb5b1..90787fc79f 100644 --- a/src/renderer/components/dock/upgrade-chart.tsx +++ b/src/renderer/components/dock/upgrade-chart.tsx @@ -1,7 +1,7 @@ import "./upgrade-chart.scss"; import React from "react"; -import { observable, reaction } from "mobx"; +import { observable, reaction, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../utils"; import { IDockTab } from "./dock.store"; @@ -26,6 +26,11 @@ export class UpgradeChart extends React.Component { @observable versions = observable.array(); @observable version: IChartVersion; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.loadVersions(); diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx index 3c6309b344..c2eaa703f7 100644 --- a/src/renderer/components/editable-list/editable-list.tsx +++ b/src/renderer/components/editable-list/editable-list.tsx @@ -3,7 +3,7 @@ import "./editable-list.scss"; import React from "react"; import { Icon } from "../icon"; import { Input } from "../input"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import { autobind } from "../../utils"; @@ -28,6 +28,11 @@ export class EditableList extends React.Component> { static defaultProps = defaultProps as Props; @observable currentNewItem = ""; + constructor(props: Props) { + super(props); + makeObservable(this); + } + @autobind() onSubmit(val: string) { const { add } = this.props; diff --git a/src/renderer/components/file-picker/file-picker.tsx b/src/renderer/components/file-picker/file-picker.tsx index 1a52fe4973..5cdb9b3b17 100644 --- a/src/renderer/components/file-picker/file-picker.tsx +++ b/src/renderer/components/file-picker/file-picker.tsx @@ -5,7 +5,7 @@ import fse from "fs-extra"; import path from "path"; import { Icon } from "../icon"; import { Spinner } from "../spinner"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import _ from "lodash"; @@ -81,6 +81,11 @@ export class FilePicker extends React.Component { @observable status = FileInputStatus.CLEAR; @observable errorText?: string; + constructor(props: Props) { + super(props); + makeObservable(this); + } + handleFileCount(files: File[]): File[] { const { limit: [minLimit, maxLimit] = [0, Infinity], onOverLimit } = this.props; diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 82be0ee88c..4f7491dd7e 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -8,7 +8,7 @@ import { Avatar } from "@material-ui/core"; import { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../../common/catalog"; import { Menu, MenuItem } from "../menu"; import { Icon } from "../icon"; -import { computed, observable } from "mobx"; +import { computed, observable, makeObservable } from "mobx"; import { navigate } from "../../navigation"; import { HotbarStore } from "../../../common/hotbar-store"; import { ConfirmDialog } from "../confirm-dialog"; @@ -45,6 +45,11 @@ export class HotbarIcon extends React.Component { @observable.deep private contextMenu: CatalogEntityContextMenuContext; @observable menuOpen = false; + constructor(props: Props) { + super(props); + makeObservable(this); + } + componentDidMount() { this.contextMenu = { menuItems: [], diff --git a/src/renderer/components/hotbar/hotbar-remove-command.tsx b/src/renderer/components/hotbar/hotbar-remove-command.tsx index 14cc9350a1..a07a1f229f 100644 --- a/src/renderer/components/hotbar/hotbar-remove-command.tsx +++ b/src/renderer/components/hotbar/hotbar-remove-command.tsx @@ -1,13 +1,18 @@ import React from "react"; import { observer } from "mobx-react"; import { Select } from "../select"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { ConfirmDialog } from "../confirm-dialog"; @observer export class HotbarRemoveCommand extends React.Component { + constructor(props: {}) { + super(props); + makeObservable(this); + } + @computed get options() { return HotbarStore.getInstance().hotbars.map((hotbar) => { return { value: hotbar.id, label: hotbar.name }; diff --git a/src/renderer/components/hotbar/hotbar-switch-command.tsx b/src/renderer/components/hotbar/hotbar-switch-command.tsx index 4e6b928346..39a06e2419 100644 --- a/src/renderer/components/hotbar/hotbar-switch-command.tsx +++ b/src/renderer/components/hotbar/hotbar-switch-command.tsx @@ -1,7 +1,7 @@ import React from "react"; import { observer } from "mobx-react"; import { Select } from "../select"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { HotbarAddCommand } from "./hotbar-add-command"; @@ -12,6 +12,11 @@ export class HotbarSwitchCommand extends React.Component { private static addActionId = "__add__"; private static removeActionId = "__remove__"; + constructor(props: {}) { + super(props); + makeObservable(this); + } + @computed get options() { const hotbarStore = HotbarStore.getInstance(); const options = hotbarStore.hotbars.map((hotbar) => { diff --git a/src/renderer/components/input/drop-file-input.tsx b/src/renderer/components/input/drop-file-input.tsx index a462a117d3..81cbb2d5f9 100644 --- a/src/renderer/components/input/drop-file-input.tsx +++ b/src/renderer/components/input/drop-file-input.tsx @@ -1,7 +1,7 @@ import "./drop-file-input.scss"; import React from "react"; import { autobind, cssNames, IClassName } from "../../utils"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import logger from "../../../main/logger"; @@ -19,6 +19,11 @@ export interface DropFileMeta { export class DropFileInput extends React.Component { @observable dropAreaActive = false; + constructor(props: DropFileInputProps) { + super(props); + makeObservable(this); + } + @autobind() onDragEnter() { this.dropAreaActive = true; diff --git a/src/renderer/components/input/search-input-url.tsx b/src/renderer/components/input/search-input-url.tsx index a3d2494bc1..16bbd9d2b6 100644 --- a/src/renderer/components/input/search-input-url.tsx +++ b/src/renderer/components/input/search-input-url.tsx @@ -1,6 +1,6 @@ import React from "react"; import debounce from "lodash/debounce"; -import { autorun, observable } from "mobx"; +import { autorun, observable, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { InputProps } from "./input"; import { SearchInput } from "./search-input"; @@ -41,6 +41,11 @@ export class SearchInputUrl extends React.Component { } }; + constructor(props: Props) { + super(props); + makeObservable(this); + } + render() { const { inputVal } = this; diff --git a/src/renderer/components/item-object-list/item-list-layout.tsx b/src/renderer/components/item-object-list/item-list-layout.tsx index d3424f2c0a..33217cdf5d 100644 --- a/src/renderer/components/item-object-list/item-list-layout.tsx +++ b/src/renderer/components/item-object-list/item-list-layout.tsx @@ -2,7 +2,7 @@ import "./item-list-layout.scss"; import groupBy from "lodash/groupBy"; import React, { ReactNode } from "react"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog"; import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table"; @@ -102,6 +102,11 @@ export class ItemListLayout extends React.Component { showFilters: false, // setup defaults }); + constructor(props: ItemListLayoutProps) { + super(props); + makeObservable(this); + } + get showFilters(): boolean { return this.storage.get().showFilters; } diff --git a/src/renderer/components/item-object-list/page-filters-select.tsx b/src/renderer/components/item-object-list/page-filters-select.tsx index af9768f149..a1fb209657 100644 --- a/src/renderer/components/item-object-list/page-filters-select.tsx +++ b/src/renderer/components/item-object-list/page-filters-select.tsx @@ -1,6 +1,6 @@ import React from "react"; import { observer } from "mobx-react"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { GroupSelectOption, Select, SelectOption, SelectProps } from "../select"; import { FilterType, pageFilters } from "./page-filters.store"; import { namespaceStore } from "../+namespaces/namespace.store"; @@ -26,6 +26,11 @@ export class PageFiltersSelect extends React.Component { disableFilters: {}, }; + constructor(props: Props) { + super(props); + makeObservable(this); + } + @computed get groupedOptions() { const options: GroupSelectOption[] = []; const { disableFilters } = this.props; diff --git a/src/renderer/components/item-object-list/page-filters.store.ts b/src/renderer/components/item-object-list/page-filters.store.ts index 933a94c06b..ef07fafab3 100644 --- a/src/renderer/components/item-object-list/page-filters.store.ts +++ b/src/renderer/components/item-object-list/page-filters.store.ts @@ -1,4 +1,4 @@ -import { computed, observable, reaction } from "mobx"; +import { computed, observable, reaction, makeObservable } from "mobx"; import { autobind } from "../../utils"; import { searchUrlParam } from "../input/search-input-url"; @@ -22,6 +22,7 @@ export class PageFiltersStore { } constructor() { + makeObservable(this); this.syncWithGlobalSearch(); } diff --git a/src/renderer/components/kube-object/kube-object-details.tsx b/src/renderer/components/kube-object/kube-object-details.tsx index dd63f9e3ff..44f606acad 100644 --- a/src/renderer/components/kube-object/kube-object-details.tsx +++ b/src/renderer/components/kube-object/kube-object-details.tsx @@ -2,7 +2,7 @@ import "./kube-object-details.scss"; import React from "react"; import { disposeOnUnmount, observer } from "mobx-react"; -import { computed, observable, reaction } from "mobx"; +import { computed, observable, reaction, makeObservable } from "mobx"; import { createPageParam, navigation } from "../../navigation"; import { Drawer } from "../drawer"; import { KubeObject } from "../../api/kube-object"; @@ -68,6 +68,11 @@ export class KubeObjectDetails extends React.Component { @observable isLoading = false; @observable.ref loadingError: React.ReactNode; + constructor(props: {}) { + super(props); + makeObservable(this); + } + @computed get path() { return kubeDetailsUrlParam.get(); } diff --git a/src/renderer/components/kube-object/kube-object-list-layout.tsx b/src/renderer/components/kube-object/kube-object-list-layout.tsx index ddae968dc9..bcd22eb788 100644 --- a/src/renderer/components/kube-object/kube-object-list-layout.tsx +++ b/src/renderer/components/kube-object/kube-object-list-layout.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import { cssNames } from "../../utils"; import { KubeObject } from "../../api/kube-object"; @@ -23,6 +23,11 @@ const defaultProps: Partial = { export class KubeObjectListLayout extends React.Component { static defaultProps = defaultProps as object; + constructor(props: KubeObjectListLayoutProps) { + super(props); + makeObservable(this); + } + @computed get selectedItem() { return this.props.store.getByPath(kubeSelectedUrlParam.get()); } diff --git a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx index 21684549e1..c8d2fe34a9 100644 --- a/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx +++ b/src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx @@ -1,7 +1,7 @@ import "./kubeconfig-dialog.scss"; import React from "react"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import jsYaml from "js-yaml"; import { AceEditor } from "../ace-editor"; @@ -30,6 +30,11 @@ export class KubeConfigDialog extends React.Component { @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text @observable config = ""; // parsed kubeconfig in yaml format + constructor(props: Props) { + super(props); + makeObservable(this); + } + static open(data: IKubeconfigDialogData) { KubeConfigDialog.isOpen = true; KubeConfigDialog.data = data; diff --git a/src/renderer/components/layout/sidebar-item.tsx b/src/renderer/components/layout/sidebar-item.tsx index 64956842aa..573d657f96 100644 --- a/src/renderer/components/layout/sidebar-item.tsx +++ b/src/renderer/components/layout/sidebar-item.tsx @@ -1,7 +1,7 @@ import "./sidebar-item.scss"; import React from "react"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { cssNames, prevDefault } from "../../utils"; import { observer } from "mobx-react"; import { NavLink } from "react-router-dom"; @@ -32,6 +32,11 @@ interface SidebarItemProps { export class SidebarItem extends React.Component { static displayName = "SidebarItem"; + constructor(props: SidebarItemProps) { + super(props); + makeObservable(this); + } + get id(): string { return this.props.id; } diff --git a/src/renderer/components/menu/menu-actions.tsx b/src/renderer/components/menu/menu-actions.tsx index d6d044f3bb..6415018d95 100644 --- a/src/renderer/components/menu/menu-actions.tsx +++ b/src/renderer/components/menu/menu-actions.tsx @@ -1,7 +1,7 @@ import "./menu-actions.scss"; import React, { isValidElement } from "react"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; import { observer } from "mobx-react"; import { autobind, cssNames } from "../../utils"; import { ConfirmDialog } from "../confirm-dialog"; @@ -38,6 +38,11 @@ export class MenuActions extends React.Component { this.isOpen = !this.isOpen; }; + constructor(props: MenuActionsProps) { + super(props); + makeObservable(this); + } + @autobind() remove() { const { removeAction } = this.props; diff --git a/src/renderer/components/notifications/notifications.store.tsx b/src/renderer/components/notifications/notifications.store.tsx index 45c1eb9a6b..d1c18d2e19 100644 --- a/src/renderer/components/notifications/notifications.store.tsx +++ b/src/renderer/components/notifications/notifications.store.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { action, observable } from "mobx"; +import { action, observable, makeObservable } from "mobx"; import { autobind } from "../../utils"; import uniqueId from "lodash/uniqueId"; import { JsonApiErrorParsed } from "../../api/json-api"; @@ -27,6 +27,10 @@ export class NotificationsStore { protected autoHideTimers = new Map(); + constructor() { + makeObservable(this); + } + getById(id: NotificationId): Notification | null { return this.notifications.find(item => item.id === id) ?? null; } diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.tsx b/src/renderer/components/resizing-anchor/resizing-anchor.tsx index 464e357b96..97374ad161 100644 --- a/src/renderer/components/resizing-anchor/resizing-anchor.tsx +++ b/src/renderer/components/resizing-anchor/resizing-anchor.tsx @@ -1,6 +1,6 @@ import "./resizing-anchor.scss"; import React from "react"; -import { action, observable } from "mobx"; +import { action, observable, makeObservable } from "mobx"; import _ from "lodash"; import { cssNames, noop } from "../../utils"; @@ -165,6 +165,8 @@ export class ResizingAnchor extends React.PureComponent { constructor(props: Props) { super(props); + makeObservable(this); + if (props.maxExtent < props.minExtent) { throw new Error("maxExtent must be >= minExtent"); } diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx index c0491cf54e..543433bb06 100644 --- a/src/renderer/components/select/select.tsx +++ b/src/renderer/components/select/select.tsx @@ -3,7 +3,7 @@ import "./select.scss"; import React, { ReactNode } from "react"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; import { observer } from "mobx-react"; import { autobind, cssNames } from "../../utils"; import ReactSelect, { ActionMeta, components, Props as ReactSelectProps, Styles } from "react-select"; @@ -39,6 +39,11 @@ export class Select extends React.Component { menuPlacement: "auto", }; + constructor(props: SelectProps) { + super(props); + makeObservable(this); + } + @computed get theme() { return this.props.themeName || ThemeStore.getInstance().activeTheme.type; } diff --git a/src/renderer/components/table/table.tsx b/src/renderer/components/table/table.tsx index 5adbab2fee..5f39895d50 100644 --- a/src/renderer/components/table/table.tsx +++ b/src/renderer/components/table/table.tsx @@ -11,7 +11,7 @@ import { VirtualList } from "../virtual-list"; import { createPageParam } from "../../navigation"; import { ItemObject } from "../../item.store"; import { getSortParams, setSortParams } from "./table.storage"; -import { computed } from "mobx"; +import { computed, makeObservable } from "mobx"; export type TableSortBy = string; export type TableOrderBy = "asc" | "desc" | string; @@ -62,6 +62,11 @@ export class Table extends React.Component { sortSyncWithUrl: true, }; + constructor(props: TableProps) { + super(props); + makeObservable(this); + } + componentDidMount() { const { sortable, tableId } = this.props; diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index 922d25130a..69a88aabe4 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -4,7 +4,7 @@ import React from "react"; import { createPortal } from "react-dom"; import { observer } from "mobx-react"; import { autobind, cssNames, IClassName } from "../../utils"; -import { observable } from "mobx"; +import { observable, makeObservable } from "mobx"; export enum TooltipPosition { TOP = "top", @@ -51,6 +51,11 @@ export class Tooltip extends React.Component { @observable activePosition: TooltipPosition; @observable isVisible = !!this.props.visible; + constructor(props: TooltipProps) { + super(props); + makeObservable(this); + } + get targetElem(): HTMLElement { return document.getElementById(this.props.targetId); } diff --git a/src/renderer/item.store.ts b/src/renderer/item.store.ts index 31990631ed..7aa6ff33c2 100644 --- a/src/renderer/item.store.ts +++ b/src/renderer/item.store.ts @@ -1,6 +1,6 @@ import orderBy from "lodash/orderBy"; import { autobind, noop } from "./utils"; -import { action, computed, observable, when } from "mobx"; +import { action, computed, observable, when, makeObservable } from "mobx"; export interface ItemObject { getId(): string; @@ -19,6 +19,10 @@ export abstract class ItemStore { @observable items = observable.array([], { deep: false }); @observable selectedItemsIds = observable.map(); + constructor() { + makeObservable(this); + } + @computed get selectedItems(): T[] { return this.items.filter(item => this.selectedItemsIds.get(item.getId())); } diff --git a/src/renderer/kube-object.store.ts b/src/renderer/kube-object.store.ts index ff64679ce7..42ba553f51 100644 --- a/src/renderer/kube-object.store.ts +++ b/src/renderer/kube-object.store.ts @@ -1,6 +1,6 @@ import type { ClusterContext } from "./components/context"; -import { action, computed, observable, reaction, when } from "mobx"; +import { action, computed, observable, reaction, when, makeObservable } from "mobx"; import { autobind, noop, rejectPromiseBy } from "./utils"; import { KubeObject, KubeStatus } from "./api/kube-object"; import { IKubeWatchEvent } from "./api/kube-watch-api"; @@ -30,6 +30,7 @@ export abstract class KubeObjectStore extends ItemSt constructor() { super(); + makeObservable(this); this.bindWatchEventsUpdater(); } diff --git a/src/renderer/navigation/page-param.ts b/src/renderer/navigation/page-param.ts index 005f0b0425..040efcfce2 100644 --- a/src/renderer/navigation/page-param.ts +++ b/src/renderer/navigation/page-param.ts @@ -1,6 +1,6 @@ // Manage observable param from document's location.search import type { ObservableHistory } from "mobx-observable-history"; -import { action, computed } from "mobx"; +import { action, computed, makeObservable } from "mobx"; export interface PageParamInit { name: string; @@ -16,6 +16,7 @@ export class PageParam { readonly isMulti: boolean; constructor(private init: PageParamInit, private history: ObservableHistory) { + makeObservable(this); const { prefix, name, defaultValue } = init; this.name = `${prefix ?? ""}${name}`; // actual prefixed URL-name diff --git a/src/renderer/theme.store.ts b/src/renderer/theme.store.ts index 07b663a5cc..231da05149 100644 --- a/src/renderer/theme.store.ts +++ b/src/renderer/theme.store.ts @@ -1,4 +1,4 @@ -import { computed, observable, reaction } from "mobx"; +import { computed, observable, reaction, makeObservable } from "mobx"; import { autobind, Singleton } from "./utils"; import { UserStore } from "../common/user-store"; import logger from "../main/logger"; @@ -53,6 +53,8 @@ export class ThemeStore extends Singleton { constructor() { super(); + makeObservable(this); + // auto-apply active theme reaction(() => this.activeThemeId, async themeId => { try { diff --git a/src/renderer/utils/storageHelper.ts b/src/renderer/utils/storageHelper.ts index 182b0254e9..8bb55c42da 100755 --- a/src/renderer/utils/storageHelper.ts +++ b/src/renderer/utils/storageHelper.ts @@ -1,6 +1,6 @@ // Helper for working with storages (e.g. window.localStorage, NodeJS/file-system, etc.) -import { action, comparer, CreateObservableOptions, IObservableValue, observable, toJS, when } from "mobx"; +import { action, comparer, CreateObservableOptions, IObservableValue, makeObservable, observable, toJS, when, } from "mobx"; import produce, { Draft } from "immer"; import { isEqual, isFunction, isPlainObject } from "lodash"; import logger from "../../main/logger"; @@ -37,6 +37,7 @@ export class StorageHelper { public readonly defaultValue: T; constructor(readonly key: string, private options: StorageHelperOptions) { + makeObservable(this); this.data = observable.box(this.options.defaultValue, { ...StorageHelper.defaultOptions.observable, ...(options.observable ?? {})