fix: @observable static decorators doesn't work without makeObservable(this)

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

src/common/utils/toJS.ts

@@ -1,25 +1,13 @@
 // Converts mobx-observable or partially observable object to corresponding plain JS-structure.
 // Since mobx >= 6.x toJS() recursively converts only top-level observables.
 import * as mobx from "mobx";
+import { isObservable, observable } from "mobx";
 
 export function toJS<T>(data: T): T {
-  if (mobx.isObservable(data)) {
-    return mobx.toJS(data); // data recursively converted, nothing to worry about.
+  if (isObservable(data)) {
+    return mobx.toJS(data);
   }
 
-  // convert top-level plain array or object
-  if (typeof data === "object" && data !== null) {
-    let convertedData: any[] | T;
-
-    if (Array.isArray(data)) {
-      convertedData = data.map(toJS);
-    } else {
-      convertedData = Object.fromEntries(
-        Object.entries(data).map(([key, value]) => [key, toJS(value)])
-      ) as T;
-    }
-    Object.assign(data, convertedData);
-  }
-
-  return data;
+  // make data observable for recursive toJS()-call
+  return mobx.toJS(observable.box(data).get());
 }

src/main/helm/helm-repo-manager.ts

@@ -125,7 +125,7 @@ export class HelmRepoManager extends Singleton {
     return stdout;
   }
 
-  public static async addСustomRepo(repoAttributes : HelmRepo) {
+  public static async addCustomRepo(repoAttributes : HelmRepo) {
     logger.info(`[HELM]: adding repo "${repoAttributes.name}" from ${repoAttributes.url}`);
     const helm = await helmCli.binaryPath();
 

src/renderer/components/+apps-releases/release-rollback-dialog.tsx

@@ -1,7 +1,7 @@
 import "./release-rollback-dialog.scss";
 
 import React from "react";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -16,8 +16,10 @@ interface Props extends DialogProps {
 
 @observer
 export class ReleaseRollbackDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable.ref static release: HelmRelease = null;
+  static metadata = observable({
+    isOpen: false,
+    release: null as HelmRelease,
+  });
 
   @observable isLoading = false;
   @observable revision: IReleaseRevision;
@@ -29,16 +31,16 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
   }
 
   static open(release: HelmRelease) {
-    ReleaseRollbackDialog.isOpen = true;
-    ReleaseRollbackDialog.release = release;
+    ReleaseRollbackDialog.metadata.isOpen = true;
+    ReleaseRollbackDialog.metadata.release = release;
   }
 
   static close() {
-    ReleaseRollbackDialog.isOpen = false;
+    ReleaseRollbackDialog.metadata.isOpen = false;
   }
 
   get release(): HelmRelease {
-    return ReleaseRollbackDialog.release;
+    return ReleaseRollbackDialog.metadata.release;
   }
 
   onOpen = async () => {
@@ -99,7 +101,7 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="ReleaseRollbackDialog"
-        isOpen={ReleaseRollbackDialog.isOpen}
+        isOpen={ReleaseRollbackDialog.metadata.isOpen}
         onOpen={this.onOpen}
         close={this.close}
       >

src/renderer/components/+cluster/cluster-overview.store.ts

@@ -1,7 +1,7 @@
 import { action, makeObservable, observable, reaction, when } from "mobx";
 import { KubeObjectStore } from "../../kube-object.store";
 import { Cluster, clusterApi, IClusterMetrics } from "../../api/endpoints";
-import { createStorage } from "../../utils";
+import { createStorage, StorageHelper } from "../../utils";
 import { IMetricsReqParams, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { nodesStore } from "../+nodes/nodes.store";
 import { apiManager } from "../../api/api-manager";
@@ -24,14 +24,22 @@ export interface ClusterOverviewStorageState {
 export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements ClusterOverviewStorageState {
   api = clusterApi;
 
+  private storage: StorageHelper<ClusterOverviewStorageState>;
   @observable metrics: Partial<IClusterMetrics> = {};
   @observable metricsLoaded = false;
 
-  private storage = createStorage<ClusterOverviewStorageState>("cluster_overview", {
+  constructor() {
+    super();
+
+    this.storage = createStorage<ClusterOverviewStorageState>("cluster_overview", {
       metricType: MetricType.CPU, // setup defaults
       metricNodeRole: MetricNodeRole.WORKER,
     });
 
+    makeObservable(this);
+    this.init();
+  }
+
   get metricType(): MetricType {
     return this.storage.get().metricType;
   }
@@ -48,12 +56,6 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
     this.storage.merge({ metricNodeRole: value });
   }
 
-  constructor() {
-    super();
-    makeObservable(this);
-    this.init();
-  }
-
   private init() {
     // TODO: refactor, seems not a correct place to be
     // auto-refresh metrics on user-action

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -20,7 +20,9 @@ interface Props extends DialogProps {
 
 @observer
 export class AddQuotaDialog extends React.Component<Props> {
-  @observable static isOpen = false;
+  static metadata = observable({
+    isOpen: false,
+  });
 
   static defaultQuotas: IResourceQuotaValues = {
     "limits.cpu": "",
@@ -57,11 +59,11 @@ export class AddQuotaDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddQuotaDialog.isOpen = true;
+    AddQuotaDialog.metadata.isOpen = true;
   }
 
   static close() {
-    AddQuotaDialog.isOpen = false;
+    AddQuotaDialog.metadata.isOpen = false;
   }
 
   @computed get quotaEntries() {
@@ -138,7 +140,7 @@ export class AddQuotaDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddQuotaDialog"
-        isOpen={AddQuotaDialog.isOpen}
+        isOpen={AddQuotaDialog.metadata.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -38,19 +38,21 @@ type ISecretField = keyof ISecretTemplate;
 
 @observer
 export class AddSecretDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
+  static metadata = observable({
+    isOpen: false,
+  });
+
   static open() {
-    AddSecretDialog.isOpen = true;
+    AddSecretDialog.metadata.isOpen = true;
   }
 
   static close() {
-    AddSecretDialog.isOpen = false;
+    AddSecretDialog.metadata.isOpen = false;
   }
 
   private secretTemplate: { [p: string]: ISecretTemplate } = {
@@ -189,7 +191,7 @@ export class AddSecretDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddSecretDialog"
-        isOpen={AddSecretDialog.isOpen}
+        isOpen={AddSecretDialog.metadata.isOpen}
         onOpen={this.reset}
         close={this.close}
       >

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -18,7 +18,10 @@ interface Props extends DialogProps {
 
 @observer
 export class AddNamespaceDialog extends React.Component<Props> {
-  @observable static isOpen = false;
+  static metadata = observable({
+    isOpen: false,
+  });
+
   @observable namespace = "";
 
   constructor(props: Props) {
@@ -27,11 +30,11 @@ export class AddNamespaceDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddNamespaceDialog.isOpen = true;
+    AddNamespaceDialog.metadata.isOpen = true;
   }
 
   static close() {
-    AddNamespaceDialog.isOpen = false;
+    AddNamespaceDialog.metadata.isOpen = false;
   }
 
   reset = () => {
@@ -62,7 +65,7 @@ export class AddNamespaceDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddNamespaceDialog"
-        isOpen={AddNamespaceDialog.isOpen}
+        isOpen={AddNamespaceDialog.metadata.isOpen}
         onOpen={this.reset}
         close={AddNamespaceDialog.close}
       >

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -1,15 +1,15 @@
 import "./add-helm-repo-dialog.scss";
 
 import React from "react";
-import { remote, FileFilter } from "electron";
-import { observable, makeObservable } from "mobx";
+import { FileFilter, remote } from "electron";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Input } from "../input";
 import { Checkbox } from "../checkbox";
 import { Button } from "../button";
-import { systemName, isUrl, isPath } from "../input/input_validators";
+import { isPath, isUrl, systemName } from "../input/input_validators";
 import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
@@ -27,12 +27,16 @@ enum FileType {
 
 @observer
 export class AddHelmRepoDialog extends React.Component<Props> {
-  private emptyRepo = {name: "", url: "", username: "", password: "", insecureSkipTlsVerify: false, caFile:"", keyFile: "", certFile: ""};
+  static metadata = observable({
+    isOpen: false,
+  });
 
   private static keyExtensions = ["key", "keystore", "jks", "p12", "pfx", "pem"];
   private static certExtensions = ["crt", "cer", "ca-bundle", "p7b", "p7c", "p7s", "p12", "pfx", "pem"];
 
-  @observable static isOpen = false;
+  private emptyRepo = {
+    name: "", url: "", username: "", password: "", insecureSkipTlsVerify: false, caFile: "", keyFile: "", certFile: ""
+  };
 
   constructor(props: Props) {
     super(props);
@@ -40,11 +44,11 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddHelmRepoDialog.isOpen = true;
+    AddHelmRepoDialog.metadata.isOpen = true;
   }
 
   static close() {
-    AddHelmRepoDialog.isOpen = false;
+    AddHelmRepoDialog.metadata.isOpen = false;
   }
 
   @observable helmRepo: HelmRepo = this.emptyRepo;
@@ -84,7 +88,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
 
   async addCustomRepo() {
     try {
-      await HelmRepoManager.addСustomRepo(this.helmRepo);
+      await HelmRepoManager.addCustomRepo(this.helmRepo);
       Notifications.ok(<>Helm repository <b>{this.helmRepo.name}</b> has added</>);
       this.props.onAddRepo();
       this.close();
@@ -145,11 +149,13 @@ export class AddHelmRepoDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddHelmRepoDialog"
-        isOpen={AddHelmRepoDialog.isOpen}
+        isOpen={AddHelmRepoDialog.metadata.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>
-          <WizardStep contentClass="flow column" nextLabel="Add" next={()=>{this.addCustomRepo();}}>
+          <WizardStep contentClass="flow column" nextLabel="Add" next={() => {
+            this.addCustomRepo();
+          }}>
             <div className="flex column gaps">
               <Input
                 autoFocus required

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -32,8 +32,10 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class AddRoleBindingDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: RoleBinding = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as RoleBinding,
+  });
 
   constructor(props: Props) {
     super(props);
@@ -41,16 +43,16 @@ export class AddRoleBindingDialog extends React.Component<Props> {
   }
 
   static open(roleBinding?: RoleBinding) {
-    AddRoleBindingDialog.isOpen = true;
-    AddRoleBindingDialog.data = roleBinding;
+    AddRoleBindingDialog.metadata.isOpen = true;
+    AddRoleBindingDialog.metadata.data = roleBinding;
   }
 
   static close() {
-    AddRoleBindingDialog.isOpen = false;
+    AddRoleBindingDialog.metadata.isOpen = false;
   }
 
   get roleBinding(): RoleBinding {
-    return AddRoleBindingDialog.data;
+    return AddRoleBindingDialog.metadata.data;
   }
 
   @observable isLoading = false;
@@ -276,7 +278,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleBindingDialog"
-        isOpen={AddRoleBindingDialog.isOpen}
+        isOpen={AddRoleBindingDialog.metadata.isOpen}
         onOpen={this.onOpen}
         close={this.close}
       >

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, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -17,7 +17,9 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class AddRoleDialog extends React.Component<Props> {
-  @observable static isOpen = false;
+  static metadata = observable({
+    isOpen: false,
+  });
 
   @observable roleName = "";
   @observable namespace = "";
@@ -28,11 +30,11 @@ export class AddRoleDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddRoleDialog.isOpen = true;
+    AddRoleDialog.metadata.isOpen = true;
   }
 
   static close() {
-    AddRoleDialog.isOpen = false;
+    AddRoleDialog.metadata.isOpen = false;
   }
 
   close = () => {
@@ -64,7 +66,7 @@ export class AddRoleDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleDialog"
-        isOpen={AddRoleDialog.isOpen}
+        isOpen={AddRoleDialog.metadata.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

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, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -18,7 +18,9 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class CreateServiceAccountDialog extends React.Component<Props> {
-  @observable static isOpen = false;
+  static metadata = observable({
+    isOpen: false,
+  });
 
   @observable name = "";
   @observable namespace = "default";
@@ -29,11 +31,11 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   }
 
   static open() {
-    CreateServiceAccountDialog.isOpen = true;
+    CreateServiceAccountDialog.metadata.isOpen = true;
   }
 
   static close() {
-    CreateServiceAccountDialog.isOpen = false;
+    CreateServiceAccountDialog.metadata.isOpen = false;
   }
 
   close = () => {
@@ -63,7 +65,7 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="CreateServiceAccountDialog"
-        isOpen={CreateServiceAccountDialog.isOpen}
+        isOpen={CreateServiceAccountDialog.metadata.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx

@@ -16,11 +16,12 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class CronJobTriggerDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: CronJob = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as CronJob,
+  });
 
   @observable jobName = "";
-
   @observable ready = false;
 
   constructor(props: Props) {
@@ -29,16 +30,16 @@ export class CronJobTriggerDialog extends Component<Props> {
   }
 
   static open(cronjob: CronJob) {
-    CronJobTriggerDialog.isOpen = true;
-    CronJobTriggerDialog.data = cronjob;
+    CronJobTriggerDialog.metadata.isOpen = true;
+    CronJobTriggerDialog.metadata.data = cronjob;
   }
 
   static close() {
-    CronJobTriggerDialog.isOpen = false;
+    CronJobTriggerDialog.metadata.isOpen = false;
   }
 
   get cronjob() {
-    return CronJobTriggerDialog.data;
+    return CronJobTriggerDialog.metadata.data;
   }
 
   close = () => {
@@ -112,7 +113,7 @@ export class CronJobTriggerDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={CronJobTriggerDialog.isOpen}
+        isOpen={CronJobTriggerDialog.metadata.isOpen}
         className={cssNames("CronJobTriggerDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -16,8 +16,10 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class DeploymentScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: Deployment = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as Deployment,
+  });
 
   @observable ready = false;
   @observable currentReplicas = 0;
@@ -29,16 +31,16 @@ export class DeploymentScaleDialog extends Component<Props> {
   }
 
   static open(deployment: Deployment) {
-    DeploymentScaleDialog.isOpen = true;
-    DeploymentScaleDialog.data = deployment;
+    DeploymentScaleDialog.metadata.isOpen = true;
+    DeploymentScaleDialog.metadata.data = deployment;
   }
 
   static close() {
-    DeploymentScaleDialog.isOpen = false;
+    DeploymentScaleDialog.metadata.isOpen = false;
   }
 
   get deployment() {
-    return DeploymentScaleDialog.data;
+    return DeploymentScaleDialog.metadata.data;
   }
 
   close = () => {
@@ -149,7 +151,7 @@ export class DeploymentScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={DeploymentScaleDialog.isOpen}
+        isOpen={DeploymentScaleDialog.metadata.isOpen}
         className={cssNames("DeploymentScaleDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -16,8 +16,10 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class ReplicaSetScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: ReplicaSet = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as ReplicaSet,
+  });
 
   @observable ready = false;
   @observable currentReplicas = 0;
@@ -29,16 +31,16 @@ export class ReplicaSetScaleDialog extends Component<Props> {
   }
 
   static open(replicaSet: ReplicaSet) {
-    ReplicaSetScaleDialog.isOpen = true;
-    ReplicaSetScaleDialog.data = replicaSet;
+    ReplicaSetScaleDialog.metadata.isOpen = true;
+    ReplicaSetScaleDialog.metadata.data = replicaSet;
   }
 
   static close() {
-    ReplicaSetScaleDialog.isOpen = false;
+    ReplicaSetScaleDialog.metadata.isOpen = false;
   }
 
   get replicaSet() {
-    return ReplicaSetScaleDialog.data;
+    return ReplicaSetScaleDialog.metadata.data;
   }
 
   close = () => {
@@ -151,7 +153,7 @@ export class ReplicaSetScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={ReplicaSetScaleDialog.isOpen}
+        isOpen={ReplicaSetScaleDialog.metadata.isOpen}
         className={cssNames("ReplicaSetScaleDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
@@ -16,8 +16,10 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class StatefulSetScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: StatefulSet = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as StatefulSet,
+  });
 
   @observable ready = false;
   @observable currentReplicas = 0;
@@ -29,16 +31,16 @@ export class StatefulSetScaleDialog extends Component<Props> {
   }
 
   static open(statefulSet: StatefulSet) {
-    StatefulSetScaleDialog.isOpen = true;
-    StatefulSetScaleDialog.data = statefulSet;
+    StatefulSetScaleDialog.metadata.isOpen = true;
+    StatefulSetScaleDialog.metadata.data = statefulSet;
   }
 
   static close() {
-    StatefulSetScaleDialog.isOpen = false;
+    StatefulSetScaleDialog.metadata.isOpen = false;
   }
 
   get statefulSet() {
-    return StatefulSetScaleDialog.data;
+    return StatefulSetScaleDialog.metadata.data;
   }
 
   close = () => {
@@ -151,7 +153,7 @@ export class StatefulSetScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={StatefulSetScaleDialog.isOpen}
+        isOpen={StatefulSetScaleDialog.metadata.isOpen}
         className={cssNames("StatefulSetScaleDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

src/renderer/components/app.tsx

@@ -83,7 +83,7 @@ export class App extends React.Component {
     whatInput.ask(); // Start to monitor user input device
 
     // Setup hosted cluster context
-    KubeObjectStore.defaultContext = clusterContext;
+    KubeObjectStore.metadata.context = clusterContext;
     kubeWatchApi.context = clusterContext;
   }
 

src/renderer/components/confirm-dialog/confirm-dialog.tsx

@@ -1,7 +1,7 @@
 import "./confirm-dialog.scss";
 
 import React, { ReactNode } from "react";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { cssNames, noop, prevDefault } from "../../utils";
 import { Button, ButtonProps } from "../button";
@@ -23,8 +23,10 @@ export interface ConfirmDialogParams {
 
 @observer
 export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
-  @observable static isOpen = false;
-  @observable.ref static params: ConfirmDialogParams;
+  static metadata = observable({
+    isOpen: false,
+    params: null as ConfirmDialogParams,
+  });
 
   @observable isSaving = false;
 
@@ -34,12 +36,12 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
   }
 
   static open(params: ConfirmDialogParams) {
-    ConfirmDialog.isOpen = true;
-    ConfirmDialog.params = params;
+    ConfirmDialog.metadata.isOpen = true;
+    ConfirmDialog.metadata.params = params;
   }
 
   static close() {
-    ConfirmDialog.isOpen = false;
+    ConfirmDialog.metadata.isOpen = false;
   }
 
   public defaultParams: ConfirmDialogParams = {
@@ -50,7 +52,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
   };
 
   get params(): ConfirmDialogParams {
-    return Object.assign({}, this.defaultParams, ConfirmDialog.params);
+    return Object.assign({}, this.defaultParams, ConfirmDialog.metadata.params);
   }
 
   ok = async () => {
@@ -83,7 +85,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       <Dialog
         {...dialogProps}
         className={cssNames("ConfirmDialog", className)}
-        isOpen={ConfirmDialog.isOpen}
+        isOpen={ConfirmDialog.metadata.isOpen}
         onClose={this.onClose}
         close={this.close}
       >

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

@@ -1,6 +1,6 @@
 import MD5 from "crypto-js/md5";
 import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
-import { autobind, createStorage } from "../../utils";
+import { autobind, createStorage, StorageHelper } from "../../utils";
 import throttle from "lodash/throttle";
 
 export type TabId = string;
@@ -30,20 +30,21 @@ export interface DockStorageState {
 
 export class DockStore implements DockStorageState {
   constructor() {
-    makeObservable(this);
-    this.init();
-  }
-
-  readonly minHeight = 100;
-  @observable fullSize = false;
-
-  private storage = createStorage<DockStorageState>("dock", {
+    this.storage = createStorage<DockStorageState>("dock", {
       height: 300,
       tabs: [
         { id: "terminal", kind: TabKind.TERMINAL, title: "Terminal" },
       ],
     });
 
+    makeObservable(this);
+    this.init();
+  }
+
+  private storage: StorageHelper<DockStorageState>;
+  public readonly minHeight = 100;
+  @observable fullSize = false;
+
   get isOpen(): boolean {
     return this.storage.get().isOpen;
   }

src/renderer/components/dock/terminal-tab.tsx

@@ -1,24 +1,19 @@
 import "./terminal-tab.scss";
 
 import React from "react";
+import { reaction } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { DockTab, DockTabProps } from "./dock-tab";
 import { Icon } from "../icon";
 import { terminalStore } from "./terminal.store";
 import { dockStore } from "./dock.store";
-import { reaction, makeObservable } from "mobx";
 
 interface Props extends DockTabProps {
 }
 
 @observer
 export class TerminalTab extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
   componentDidMount() {
     reaction(() => this.isDisconnected === true, () => {
       dockStore.closeTab(this.tabId);

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, makeObservable } from "mobx";
+import { computed, makeObservable, observable } from "mobx";
 import { navigate } from "../../navigation";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -58,7 +58,9 @@ export class HotbarIcon extends React.Component<Props> {
   }
 
   @computed get iconString() {
-    const [rawFirst, rawSecond, rawThird] = getNameParts(this.props.entity.metadata.name);
+    const { name, labels } = this.props.entity.metadata;
+    const iconSourceText = name ?? labels?.distro ?? "";
+    const [rawFirst, rawSecond, rawThird] = getNameParts(iconSourceText);
     const splitter = new GraphemeSplitter();
     const first = splitter.iterateGraphemes(rawFirst);
     const second = rawSecond ? splitter.iterateGraphemes(rawSecond) : first;

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -24,8 +24,10 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class KubeConfigDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: IKubeconfigDialogData = null;
+  static metadata = observable({
+    isOpen: false,
+    data: null as IKubeconfigDialogData,
+  });
 
   @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
   @observable config = ""; // parsed kubeconfig in yaml format
@@ -36,16 +38,16 @@ export class KubeConfigDialog extends React.Component<Props> {
   }
 
   static open(data: IKubeconfigDialogData) {
-    KubeConfigDialog.isOpen = true;
-    KubeConfigDialog.data = data;
+    KubeConfigDialog.metadata.isOpen = true;
+    KubeConfigDialog.metadata.data = data;
   }
 
   static close() {
-    KubeConfigDialog.isOpen = false;
+    KubeConfigDialog.metadata.isOpen = false;
   }
 
   get data(): IKubeconfigDialogData {
-    return KubeConfigDialog.data;
+    return KubeConfigDialog.metadata.data;
   }
 
   close = () => {
@@ -76,7 +78,7 @@ export class KubeConfigDialog extends React.Component<Props> {
   };
 
   render() {
-    const { isOpen, data = {} } = KubeConfigDialog;
+    const { isOpen, data = {} } = KubeConfigDialog.metadata;
     const { ...dialogProps } = this.props;
     const yamlConfig = this.config;
     const header = <h5>{data.title || "Kubeconfig File"}</h5>;

src/renderer/kube-object.store.ts

@@ -13,7 +13,9 @@ export interface KubeObjectStoreLoadingParams {
 }
 
 export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemStore<T> {
-  @observable static defaultContext: ClusterContext; // TODO: support multiple cluster contexts
+  static metadata = observable({
+    context: null as ClusterContext, // TODO: support multiple cluster contexts
+  });
 
   abstract api: KubeApi<T>;
   public readonly limit?: number;
@@ -29,7 +31,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
   }
 
   get context(): ClusterContext {
-    return KubeObjectStore.defaultContext;
+    return KubeObjectStore.metadata.context;
   }
 
   @computed get contextItems(): T[] {