From 3323c25be3a8b64cb36aac4eb6f968347efe2918 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 26 Apr 2021 15:28:04 +0300 Subject: [PATCH] - replacing mobx.toJS()-calls to common/utils/toJS - adding missing makeObservable(this) - fix docs Signed-off-by: Roman --- docs/extensions/guides/stores.md | 3 ++- .../catalog/catalog-category-registry.ts | 3 ++- src/common/catalog/catalog-entity-registry.ts | 5 ++-- src/common/cluster-store.ts | 7 +++--- src/common/hotbar-store.ts | 4 ++-- src/common/user-store.ts | 4 ++-- src/common/utils/index.ts | 1 + src/extensions/extension-discovery.ts | 4 ++-- src/extensions/extension-loader.ts | 4 ++-- src/extensions/extensions-store.ts | 4 ++-- src/main/catalog-pusher.ts | 8 ++++--- src/main/cluster-manager.ts | 8 +++---- src/main/cluster.ts | 8 +++---- src/main/extension-filesystem.ts | 4 ++-- .../+apps-releases/release-details.tsx | 7 +++--- .../+apps-releases/release.store.ts | 4 +++- .../+catalog/catalog-add-button.tsx | 17 ++++++++----- src/renderer/components/+catalog/catalog.tsx | 24 +++++++++---------- .../components/+custom-resources/crd.store.ts | 3 ++- .../+entity-settings/entity-settings.tsx | 13 ++++++---- .../service-accounts-details.tsx | 10 ++++---- .../+workloads-pods/pod-details-secrets.tsx | 10 ++++---- .../+workloads-pods/pod-details.tsx | 14 +++++------ .../components/dock/create-resource.tsx | 10 ++++---- .../components/dock/dock-tab.store.ts | 4 ++-- src/renderer/components/dock/dock.store.ts | 10 ++++---- src/renderer/components/dock/terminal.ts | 4 ++-- .../components/hotbar/hotbar-icon.tsx | 2 +- 28 files changed, 108 insertions(+), 91 deletions(-) diff --git a/docs/extensions/guides/stores.md b/docs/extensions/guides/stores.md index 8a8a460fc3..6d191bc8ef 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>([], { 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(apiVersion: string, kind: string): T[] { diff --git a/src/common/cluster-store.ts b/src/common/cluster-store.ts index 36fa6a7fe7..f4787a9f14 100644 --- a/src/common/cluster-store.ts +++ b/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 { } toJSON(): ClusterStoreModel { - return cloneJson({ + return toJS({ activeCluster: this.activeCluster, clusters: this.clustersList.map(cluster => cluster.toJSON()), }); diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index a6855f255b..25fd220398 100644 --- a/src/common/hotbar-store.ts +++ b/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 { } toJSON(): HotbarStoreModel { - return cloneJson({ + return toJS({ hotbars: this.hotbars, activeHotbarId: this.activeHotbarId }); diff --git a/src/common/user-store.ts b/src/common/user-store.ts index ec08d69167..67dacc05e9 100644 --- a/src/common/user-store.ts +++ b/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 { } toJSON(): UserStoreModel { - return cloneJson({ + return toJS({ kubeConfigPath: this.kubeConfigPath, lastSeenAppVersion: this.lastSeenAppVersion, seenContexts: Array.from(this.seenContexts), diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index 16a077277e..0bad5c7101 100644 --- a/src/common/utils/index.ts +++ b/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"; diff --git a/src/extensions/extension-discovery.ts b/src/extensions/extension-discovery.ts index 7fba0b2b2b..8c587896d2 100644 --- a/src/extensions/extension-discovery.ts +++ b/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 }); } diff --git a/src/extensions/extension-loader.ts b/src/extensions/extension-loader.ts index 03e6335806..54637c4f7a 100644 --- a/src/extensions/extension-loader.ts +++ b/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"; diff --git a/src/extensions/extensions-store.ts b/src/extensions/extensions-store.ts index 10a98c776e..a9a07d150f 100644 --- a/src/extensions/extensions-store.ts +++ b/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; @@ -48,7 +48,7 @@ export class ExtensionsStore extends BaseStore { } toJSON(): LensExtensionsStoreModel { - return cloneJson({ + return toJS({ extensions: Object.fromEntries(this.state), }); } diff --git a/src/main/catalog-pusher.ts b/src/main/catalog-pusher.ts index 88d179384e..90530c71ea 100644 --- a/src/main/catalog-pusher.ts +++ b/src/main/catalog-pusher.ts @@ -1,6 +1,7 @@ -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 { CatalogEntityRegistry } from "../common/catalog"; import "../common/catalog-entities/kubernetes-cluster"; export class CatalogPusher { @@ -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; }[] = []; diff --git a/src/main/cluster-manager.ts b/src/main/cluster-manager.ts index 5df44b8fd7..b3361db3d7 100644 --- a/src/main/cluster-manager.ts +++ b/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 { cloneJson, Singleton } from "../common/utils"; +import { CatalogEntity, CatalogEntityData, catalogEntityRegistry } from "../common/catalog"; +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: { diff --git a/src/main/cluster.ts b/src/main/cluster.ts index 3e70258170..6be3283a0c 100644 --- a/src/main/cluster.ts +++ b/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, diff --git a/src/main/extension-filesystem.ts b/src/main/extension-filesystem.ts index 3fa1003917..f475fdb627 100644 --- a/src/main/extension-filesystem.ts +++ b/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; // extension names to paths @@ -51,7 +51,7 @@ export class FilesystemProvisionerStore extends BaseStore { } toJSON(): FSProvisionModel { - return cloneJson({ + return toJS({ extensions: Object.fromEntries(this.registeredExtensions), }); } diff --git a/src/renderer/components/+apps-releases/release-details.tsx b/src/renderer/components/+apps-releases/release-details.tsx index c2cf74c3a9..b93dc1d71c 100644 --- a/src/renderer/components/+apps-releases/release-details.tsx +++ b/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 { this.loadDetails(); this.loadValues(); this.releaseSecret = null; - } - ); + }); @disposeOnUnmount secretWatcher = reaction(() => toJS(secretsStore.items), () => { diff --git a/src/renderer/components/+apps-releases/release.store.ts b/src/renderer/components/+apps-releases/release.store.ts index 582151e14d..8f8aa824db 100644 --- a/src/renderer/components/+apps-releases/release.store.ts +++ b/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 { releaseSecrets = observable.map(); @@ -13,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 6da733af7c..33ae38eba1 100644 --- a/src/renderer/components/+catalog/catalog-add-button.tsx +++ b/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 { @observable protected isOpen = false; protected menuItems = observable.array([]); + 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 { } @autobind() - onClose() { + onClose() { this.isOpen = false; } @@ -57,13 +62,13 @@ export class CatalogAddButton extends React.Component { open={this.isOpen} onOpen={this.onOpen} onClose={this.onClose} - icon={} + icon={} direction="up" > - { this.menuItems.map((menuItem, index) => { + {this.menuItems.map((menuItem, index) => { return } + icon={} tooltipTitle={menuItem.title} onClick={() => menuItem.onClick()} />; diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 00e3c87482..b0dbf2b9a3 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/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) { @@ -68,7 +69,7 @@ export class Catalog extends React.Component { return; } - hotbar.items.push({ entity: { uid: item.id }}); + hotbar.items.push({ entity: { uid: item.id } }); } onDetails(item: CatalogEntityItem) { @@ -112,8 +113,8 @@ export class Catalog extends React.Component {
Catalog
- { this.categories.map((category, index) => { - return ; + {this.categories.map((category, index) => { + return ; })}
@@ -129,10 +130,10 @@ export class Catalog extends React.Component { return ( onOpen()}> - this.addToHotbar(item) }> + this.addToHotbar(item)}> Add to Hotbar - { menuItems.map((menuItem, index) => { + {menuItems.map((menuItem, index) => { return ( this.onMenuItemClick(menuItem)}> {menuItem.title} @@ -143,7 +144,6 @@ export class Catalog extends React.Component { ); } - render() { if (!this.catalogEntityStore) { return null; @@ -180,13 +180,13 @@ export class Catalog extends React.Component { renderTableContents={(item: CatalogEntityItem) => [ item.name, item.source, - item.labels.map((label) => ), + item.labels.map((label) => ), { title: item.phase, className: kebabCase(item.phase) } ]} - onDetails={(item: CatalogEntityItem) => this.onDetails(item) } + onDetails={(item: CatalogEntityItem) => this.onDetails(item)} renderItemMenu={this.renderItemMenu} /> - + ); } diff --git a/src/renderer/components/+custom-resources/crd.store.ts b/src/renderer/components/+custom-resources/crd.store.ts index 571e5f3f83..0ad576bb58 100644 --- a/src/renderer/components/+custom-resources/crd.store.ts +++ b/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(); diff --git a/src/renderer/components/+entity-settings/entity-settings.tsx b/src/renderer/components/+entity-settings/entity-settings.tsx index ef21e2b3ad..0374357ae2 100644 --- a/src/renderer/components/+entity-settings/entity-settings.tsx +++ b/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 { @observer export class EntitySettings extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @observable activeTab: string; get entityId() { @@ -51,7 +56,7 @@ export class EntitySettings extends React.Component {

{this.entity.metadata.name}

Settings
- { this.menuItems.map((setting) => ( + {this.menuItems.map((setting) => ( {

{activeSetting.title}

- +
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 e7a91fb385..ff72a04020 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 @@ -20,6 +20,11 @@ interface Props extends KubeObjectDetailsProps { @observer export class ServiceAccountsDetails extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @observable secrets: Secret[]; @observable imagePullSecrets: Secret[]; @@ -45,11 +50,6 @@ 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-pods/pod-details-secrets.tsx b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx index ee5efb05fa..d94f4e87e9 100644 --- a/src/renderer/components/+workloads-pods/pod-details-secrets.tsx +++ b/src/renderer/components/+workloads-pods/pod-details-secrets.tsx @@ -13,6 +13,11 @@ interface Props { @observer export class PodDetailsSecrets extends Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @observable secrets: Map = observable.map(); @disposeOnUnmount @@ -29,11 +34,6 @@ 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 930dc5b5aa..f21b32b68b 100644 --- a/src/renderer/components/+workloads-pods/pod-details.tsx +++ b/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 { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints"; +import { autorun, makeObservable, observable, reaction } from "mobx"; +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"; @@ -183,7 +183,7 @@ export class PodDetails extends React.Component { {type} - { type == "configMap" && ( + {type == "configMap" && (
{configMap && ( @@ -197,14 +197,14 @@ export class PodDetails extends React.Component { )}
)} - { type === "emptyDir" && ( + {type === "emptyDir" && (
- { volume.emptyDir.medium && ( + {volume.emptyDir.medium && ( {volume.emptyDir.medium} )} - { volume.emptyDir.sizeLimit && ( + {volume.emptyDir.sizeLimit && ( {volume.emptyDir.sizeLimit} diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx index cd8ae5c92b..c802a46ccb 100644 --- a/src/renderer/components/dock/create-resource.tsx +++ b/src/renderer/components/dock/create-resource.tsx @@ -23,6 +23,11 @@ interface Props { @observer export class CreateResource extends React.Component { + constructor(props: Props) { + super(props); + makeObservable(this); + } + @observable currentTemplates:Map = new Map(); @observable error = ""; @observable templates:GroupSelectOption[] = []; @@ -43,11 +48,6 @@ export class CreateResource extends React.Component { return {label: group, options}; } - constructor(props: Props) { - super(props); - makeObservable(this); - } - get tabId() { return this.props.tab.id; } diff --git a/src/renderer/components/dock/dock-tab.store.ts b/src/renderer/components/dock/dock-tab.store.ts index 2db0694cb9..f524fbfda7 100644 --- a/src/renderer/components/dock/dock-tab.store.ts +++ b/src/renderer/components/dock/dock-tab.store.ts @@ -1,5 +1,5 @@ -import { autorun, observable, reaction, toJS } from "mobx"; -import { createStorage, StorageHelper } from "../../utils"; +import { autorun, observable, reaction } from "mobx"; +import { createStorage, StorageHelper, toJS } from "../../utils"; import { dockStore, TabId } from "./dock.store"; export interface DockTabStoreOptions { diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts index 8faa8a8ba6..23d6c750e8 100644 --- a/src/renderer/components/dock/dock.store.ts +++ b/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)); diff --git a/src/renderer/components/dock/terminal.ts b/src/renderer/components/dock/terminal.ts index 29a810cf17..96c07f5c73 100644 --- a/src/renderer/components/dock/terminal.ts +++ b/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), diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 49cd67b011..7ed27518c2 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -42,7 +42,7 @@ function getNameParts(name: string): string[] { @observer export class HotbarIcon extends React.Component { - @observable.deep private contextMenu: CatalogEntityContextMenuContext; + @observable private contextMenu: CatalogEntityContextMenuContext; @observable menuOpen = false; constructor(props: Props) {