- replacing mobx.toJS()-calls to common/utils/toJS

- adding missing makeObservable(this)
- fix docs

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

docs/extensions/guides/stores.md

@@ -25,7 +25,7 @@ The following example code creates a store for the `appPreferences` guide exampl
 
 ``` typescript
 import { Store } from "@k8slens/extensions";
-import { observable, toJS } from "mobx";
+import { observable, toJS, makeObservable } from "mobx";
 
 export type ExamplePreferencesModel = {
   enabled: boolean;
@@ -42,6 +42,7 @@ export class ExamplePreferencesStore extends Store.ExtensionStore<ExamplePrefere
         enabled: false
       }
     });
+    makeObservable(this);
   }
 
   protected fromStore({ enabled }: ExamplePreferencesModel): void {

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

@@ -1,5 +1,6 @@
-import { action, computed, observable, toJS, makeObservable } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
+import { toJS } from "../utils";
 
 export class CatalogCategoryRegistry {
   @observable protected categories: CatalogCategory[] = [];

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

@@ -1,5 +1,6 @@
-import { action, computed, IObservableArray, makeObservable, observable, toJS } from "mobx";
+import { action, computed, IObservableArray, makeObservable, observable } from "mobx";
 import { CatalogEntity } from "./catalog-entity";
+import { toJS } from "../utils";
 
 export class CatalogEntityRegistry {
   protected sources = observable.map<string, IObservableArray<CatalogEntity>>([], { deep: true });
@@ -17,7 +18,7 @@ export class CatalogEntityRegistry {
   }
 
   @computed get items(): CatalogEntity[] {
-    return Array.from(toJS(this.sources).values()).flat();
+    return toJS(Array.from(this.sources.values()).flat());
   }
 
   getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {

src/common/cluster-store.ts

@@ -1,18 +1,17 @@
 import path from "path";
 import { app, ipcRenderer, remote, webFrame } from "electron";
 import { unlink } from "fs-extra";
-import { action, comparer, computed, makeObservable, observable, reaction, toJS } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction } from "mobx";
 import { BaseStore } from "./base-store";
 import { Cluster, ClusterState } from "../main/cluster";
 import migrations from "../migrations/cluster-store";
 import logger from "../main/logger";
 import { appEventBus } from "./event-bus";
 import { dumpConfigYaml } from "./kube-helpers";
-import { saveToAppFiles } from "./utils/saveToAppFiles";
+import { saveToAppFiles, toJS } from "./utils";
 import { KubeConfig } from "@kubernetes/client-node";
 import { handleRequest, requestMain, subscribeToBroadcast, unsubscribeAllFromBroadcast } from "./ipc";
 import { ResourceType } from "../renderer/components/cluster-settings/components/cluster-metrics-setting";
-import { cloneJson } from "./utils";
 
 export interface ClusterIconUpload {
   clusterId: string;
@@ -331,7 +330,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   toJSON(): ClusterStoreModel {
-    return cloneJson({
+    return toJS({
       activeCluster: this.activeCluster,
       clusters: this.clustersList.map(cluster => cluster.toJSON()),
     });

src/common/hotbar-store.ts

@@ -2,7 +2,7 @@ import { action, comparer, makeObservable, observable } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
 import * as uuid from "uuid";
-import { cloneJson } from "./utils";
+import { toJS } from "./utils";
 
 export interface HotbarItem {
   entity: {
@@ -141,7 +141,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
   }
 
   toJSON(): HotbarStoreModel {
-    return cloneJson({
+    return toJS({
       hotbars: this.hotbars,
       activeHotbarId: this.activeHotbarId
     });

src/common/user-store.ts

@@ -6,7 +6,7 @@ import { action, computed, makeObservable, observable, reaction } from "mobx";
 import moment from "moment-timezone";
 import { BaseStore } from "./base-store";
 import migrations, { fileNameMigration } from "../migrations/user-store";
-import { cloneJson, getAppVersion } from "./utils";
+import { getAppVersion, toJS } from "./utils";
 import { kubeConfigDefaultPath, loadConfig } from "./kube-helpers";
 import { appEventBus } from "./event-bus";
 import logger from "../main/logger";
@@ -180,7 +180,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   toJSON(): UserStoreModel {
-    return cloneJson({
+    return toJS({
       kubeConfigPath: this.kubeConfigPath,
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),

src/common/utils/index.ts

@@ -6,6 +6,7 @@ export * from "./app-version";
 export * from "./autobind";
 export * from "./base64";
 export * from "./camelCase";
+export * from "./toJS";
 export * from "./cloneJson";
 export * from "./delay";
 export * from "./debouncePromise";

src/extensions/extension-discovery.ts

@@ -6,7 +6,7 @@ import { makeObservable, observable, reaction, when } from "mobx";
 import os from "os";
 import path from "path";
 import { broadcastMessage, handleRequest, requestMain, subscribeToBroadcast } from "../common/ipc";
-import { cloneJson, Singleton } from "../common/utils";
+import { Singleton, toJS } from "../common/utils";
 import logger from "../main/logger";
 import { extensionInstaller, PackageJson } from "./extension-installer";
 import { ExtensionsStore } from "./extensions-store";
@@ -445,7 +445,7 @@ export class ExtensionDiscovery extends Singleton {
   }
 
   toJSON(): ExtensionDiscoveryChannelMessage {
-    return cloneJson({
+    return toJS({
       isLoaded: this.isLoaded
     });
   }

src/extensions/extension-loader.ts

@@ -1,11 +1,11 @@
 import { app, ipcRenderer, remote } from "electron";
 import { EventEmitter } from "events";
 import { isEqual } from "lodash";
-import { action, computed, observable, reaction, toJS, when, makeObservable } 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";
-import { Singleton } from "../common/utils";
+import { Singleton, toJS } from "../common/utils";
 import logger from "../main/logger";
 import type { InstalledExtension } from "./extension-discovery";
 import { ExtensionsStore } from "./extensions-store";

src/extensions/extensions-store.ts

@@ -1,7 +1,7 @@
 import type { LensExtensionId } from "./lens-extension";
 import { BaseStore } from "../common/base-store";
 import { action, computed, makeObservable, observable } from "mobx";
-import { cloneJson } from "../common/utils";
+import { toJS } from "../common/utils";
 
 export interface LensExtensionsStoreModel {
   extensions: Record<LensExtensionId, LensExtensionState>;
@@ -48,7 +48,7 @@ export class ExtensionsStore extends BaseStore<LensExtensionsStoreModel> {
   }
 
   toJSON(): LensExtensionsStoreModel {
-    return cloneJson({
+    return toJS({
       extensions: Object.fromEntries(this.state),
     });
   }

src/main/catalog-pusher.ts

@@ -1,4 +1,5 @@
-import { autorun, toJS } from "mobx";
+import { autorun } from "mobx";
+import { toJS } from "../common/utils";
 import { broadcastMessage, subscribeToBroadcast, unsubscribeFromBroadcast } from "../common/ipc";
 import { CatalogEntityRegistry } from "../common/catalog";
 import "../common/catalog-entities/kubernetes-cluster";
@@ -8,7 +9,8 @@ export class CatalogPusher {
     new CatalogPusher(catalog).init();
   }
 
-  private constructor(private catalog: CatalogEntityRegistry) {}
+  private constructor(private catalog: CatalogEntityRegistry) {
+  }
 
   init() {
     const disposers: { (): void; }[] = [];

src/main/cluster-manager.ts

@@ -1,13 +1,13 @@
 import "../common/cluster-ipc";
 import type http from "http";
 import { ipcMain } from "electron";
-import { action, autorun, makeObservable, observable, reaction, toJS } from "mobx";
+import { action, autorun, makeObservable, observable, reaction } from "mobx";
 import { ClusterStore, getClusterIdFromHost } from "../common/cluster-store";
 import { Cluster } from "./cluster";
 import logger from "./logger";
 import { apiKubePrefix } from "../common/vars";
-import { CatalogEntity, catalogEntityRegistry, CatalogEntityData } from "../common/catalog";
+import { CatalogEntity, CatalogEntityData, catalogEntityRegistry } from "../common/catalog";
-import { cloneJson, Singleton } from "../common/utils";
+import { Singleton, toJS } from "../common/utils";
 import { KubernetesCluster } from "../common/catalog-entities/kubernetes-cluster";
 
 const clusterOwnerRef = "ClusterManager";
@@ -124,7 +124,7 @@ export class ClusterManager extends Singleton {
   }
 
   protected catalogEntityFromCluster(cluster: Cluster) {
-    const data: CatalogEntityData = cloneJson({
+    const data: CatalogEntityData = toJS({
       apiVersion: "entity.k8slens.dev/v1alpha1",
       kind: "KubernetesCluster",
       metadata: {

src/main/cluster.ts

@@ -15,7 +15,7 @@ import logger from "./logger";
 import { VersionDetector } from "./cluster-detectors/version-detector";
 import { detectorRegistry } from "./cluster-detectors/detector-registry";
 import plimit from "p-limit";
-import { cloneJson } from "../common/utils";
+import { toJS } from "../common/utils";
 
 export enum ClusterStatus {
   AccessGranted = 2,
@@ -241,7 +241,7 @@ export class Cluster implements ClusterModel, ClusterState {
   @computed get prometheusPreferences(): ClusterPrometheusPreferences {
     const { prometheus, prometheusProvider } = this.preferences;
 
-    return cloneJson({ prometheus, prometheusProvider });
+    return toJS({ prometheus, prometheusProvider });
   }
 
   /**
@@ -605,7 +605,7 @@ export class Cluster implements ClusterModel, ClusterState {
   }
 
   toJSON(): ClusterModel {
-    return cloneJson({
+    return toJS({
       id: this.id,
       contextName: this.contextName,
       kubeConfigPath: this.kubeConfigPath,
@@ -621,7 +621,7 @@ export class Cluster implements ClusterModel, ClusterState {
    * Serializable cluster-state used for sync btw main <-> renderer
    */
   getState(): ClusterState {
-    return cloneJson({
+    return toJS({
       initialized: this.initialized,
       enabled: this.enabled,
       apiUrl: this.apiUrl,

src/main/extension-filesystem.ts

@@ -6,7 +6,7 @@ import { action, makeObservable, observable } from "mobx";
 import path from "path";
 import { BaseStore } from "../common/base-store";
 import { LensExtensionId } from "../extensions/lens-extension";
-import { cloneJson } from "../common/utils";
+import { toJS } from "../common/utils";
 
 interface FSProvisionModel {
   extensions: Record<string, string>; // extension names to paths
@@ -51,7 +51,7 @@ export class FilesystemProvisionerStore extends BaseStore<FSProvisionModel> {
   }
 
   toJSON(): FSProvisionModel {
-    return cloneJson({
+    return toJS({
       extensions: Object.fromEntries(this.registeredExtensions),
     });
   }

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

@@ -3,14 +3,14 @@ import "./release-details.scss";
 import React, { Component } from "react";
 import groupBy from "lodash/groupBy";
 import isEqual from "lodash/isEqual";
-import { observable, reaction, toJS, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
 import { getRelease, getReleaseValues, HelmRelease, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
 import { HelmReleaseMenu } from "./release-menu";
 import { Drawer, DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
-import { cssNames, stopPropagation } from "../../utils";
+import { cssNames, stopPropagation, toJS } from "../../utils";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Spinner } from "../spinner";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -47,8 +47,7 @@ export class ReleaseDetails extends Component<Props> {
     this.loadDetails();
     this.loadValues();
     this.releaseSecret = null;
-  }
+  });
-  );
 
   @disposeOnUnmount
   secretWatcher = reaction(() => toJS(secretsStore.items), () => {

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

@@ -1,11 +1,12 @@
 import isEqual from "lodash/isEqual";
-import { action, makeObservable, observable, reaction, toJS, when, } from "mobx";
+import { action, makeObservable, observable, reaction, when, } from "mobx";
 import { createRelease, deleteRelease, HelmRelease, IReleaseCreatePayload, IReleaseUpdatePayload, listReleases, rollbackRelease, updateRelease } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
 import { Secret } from "../../api/endpoints";
 import { secretsStore } from "../+config-secrets/secrets.store";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { Notifications } from "../notifications";
+import { toJS } from "../../../common/utils";
 
 export class ReleaseStore extends ItemStore<HelmRelease> {
   releaseSecrets = observable.map<string, Secret>();
@@ -13,6 +14,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
   constructor() {
     super();
     makeObservable(this);
+
     when(() => secretsStore.isLoaded, () => {
       this.releaseSecrets.replace(this.getReleaseSecrets());
     });

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

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

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

@@ -2,12 +2,12 @@ import "./catalog.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list";
-import { action, observable, reaction, makeObservable } from "mobx";
+import { action, makeObservable, observable, reaction } from "mobx";
 import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
 import { navigate } from "../../navigation";
 import { kebabCase } from "lodash";
 import { PageLayout } from "../layout/page-layout";
-import { MenuItem, MenuActions } from "../menu";
+import { MenuActions, MenuItem } from "../menu";
 import { Icon } from "../icon";
 import { CatalogEntityContextMenu, CatalogEntityContextMenuContext, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Badge } from "../badge";
@@ -24,10 +24,11 @@ enum sortBy {
   source = "source",
   status = "status"
 }
+
 @observer
 export class Catalog extends React.Component {
   @observable private catalogEntityStore?: CatalogEntityStore;
-  @observable.deep private contextMenu: CatalogEntityContextMenuContext;
+  @observable private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab: string;
 
   constructor(props: object) {
@@ -143,7 +144,6 @@ export class Catalog extends React.Component {
     );
   }
 
-
   render() {
     if (!this.catalogEntityStore) {
       return null;

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

@@ -1,10 +1,11 @@
-import { computed, makeObservable, reaction, toJS } from "mobx";
+import { computed, makeObservable, reaction } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
 import { apiManager } from "../../api/api-manager";
 import { KubeApi } from "../../api/kube-api";
 import { CRDResourceStore } from "./crd-resource.store";
 import { KubeObject } from "../../api/kube-object";
+import { toJS } from "../../../common/utils";
 
 function initStore(crd: CustomResourceDefinition) {
   const apiBase = crd.getResourceApiBase();

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

@@ -1,12 +1,12 @@
 import "./entity-settings.scss";
 
 import React from "react";
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { RouteComponentProps } from "react-router";
 import { observer } from "mobx-react";
 import { PageLayout } from "../layout/page-layout";
 import { navigation } from "../../navigation";
-import { Tabs, Tab } from "../tabs";
+import { Tab, Tabs } from "../tabs";
 import { CatalogEntity } from "../../api/catalog-entity";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { entitySettingRegistry } from "../../../extensions/registries";
@@ -17,6 +17,11 @@ interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
 
 @observer
 export class EntitySettings extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable activeTab: string;
 
   get entityId() {

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

@@ -20,6 +20,11 @@ interface Props extends KubeObjectDetailsProps<ServiceAccount> {
 
 @observer
 export class ServiceAccountsDetails extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable secrets: Secret[];
   @observable imagePullSecrets: Secret[];
 
@@ -45,11 +50,6 @@ export class ServiceAccountsDetails extends React.Component<Props> {
     this.imagePullSecrets = await Promise.all(imagePullSecrets);
   });
 
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
   renderSecrets() {
     const { secrets } = this;
 

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

@@ -13,6 +13,11 @@ interface Props {
 
 @observer
 export class PodDetailsSecrets extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable secrets: Map<string, Secret> = observable.map<string, Secret>();
 
   @disposeOnUnmount
@@ -29,11 +34,6 @@ export class PodDetailsSecrets extends Component<Props> {
     secrets.forEach(secret => secret && this.secrets.set(secret.getName(), secret));
   });
 
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
   render() {
     const { pod } = this.props;
 

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

@@ -4,11 +4,11 @@ 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, makeObservable } from "mobx";
+import { autorun, makeObservable, observable, reaction } from "mobx";
-import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
+import { configMapApi, IPodMetrics, nodesApi, Pod, pvcApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
-import { autobind, cssNames, interval } from "../../utils";
+import { autobind, cssNames, interval, toJS } from "../../utils";
 import { PodDetailsContainer } from "./pod-details-container";
 import { PodDetailsAffinities } from "./pod-details-affinities";
 import { PodDetailsTolerations } from "./pod-details-tolerations";

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

@@ -23,6 +23,11 @@ interface Props {
 
 @observer
 export class CreateResource extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @observable currentTemplates:Map<string,SelectOption> = new Map();
   @observable error = "";
   @observable templates:GroupSelectOption<SelectOption>[] = [];
@@ -43,11 +48,6 @@ export class CreateResource extends React.Component<Props> {
     return {label: group, options};
   }
 
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
   get tabId() {
     return this.props.tab.id;
   }

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

@@ -1,5 +1,5 @@
-import { autorun, observable, reaction, toJS } from "mobx";
+import { autorun, observable, reaction } from "mobx";
-import { createStorage, StorageHelper } from "../../utils";
+import { createStorage, StorageHelper, toJS } from "../../utils";
 import { dockStore, TabId } from "./dock.store";
 
 export interface DockTabStoreOptions {

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

@@ -29,6 +29,11 @@ export interface DockStorageState {
 }
 
 export class DockStore implements DockStorageState {
+  constructor() {
+    makeObservable(this);
+    this.init();
+  }
+
   readonly minHeight = 100;
   @observable fullSize = false;
 
@@ -79,11 +84,6 @@ export class DockStore implements DockStorageState {
     return this.tabs.find(tab => tab.id === this.selectedTabId);
   }
 
-  constructor() {
-    makeObservable(this);
-    this.init();
-  }
-
   private init() {
     // adjust terminal height if window size changes
     window.addEventListener("resize", throttle(this.adjustHeight, 250));

src/renderer/components/dock/terminal.ts

@@ -4,7 +4,7 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi } from "../../api/terminal-api";
 import { ThemeStore } from "../../theme.store";
-import { autobind, cloneJson } from "../../utils";
+import { autobind, toJS } from "../../utils";
 import { isMac } from "../../../common/vars";
 import { camelCase, debounce } from "lodash";
 
@@ -103,7 +103,7 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposers.push(
-      reaction(() => cloneJson(ThemeStore.getInstance().activeTheme.colors), this.setTheme, {
+      reaction(() => toJS(ThemeStore.getInstance().activeTheme.colors), this.setTheme, {
         fireImmediately: true
       }),
       dockStore.onResize(this.onResize),

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

@@ -42,7 +42,7 @@ function getNameParts(name: string): string[] {
 
 @observer
 export class HotbarIcon extends React.Component<Props> {
-  @observable.deep private contextMenu: CatalogEntityContextMenuContext;
+  @observable private contextMenu: CatalogEntityContextMenuContext;
   @observable menuOpen = false;
 
   constructor(props: Props) {