removed @observable static

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

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

@@ -14,11 +14,13 @@ import orderBy from "lodash/orderBy";
 interface Props extends DialogProps {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  release: null as HelmRelease,
+});
+
 @observer
 export class ReleaseRollbackDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable.ref static release: HelmRelease = null;
-
   @observable isLoading = false;
   @observable revision: IReleaseRevision;
   @observable revisions = observable.array<IReleaseRevision>();
@@ -29,16 +31,16 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
   }
 
   static open(release: HelmRelease) {
-    ReleaseRollbackDialog.isOpen = true;
-    ReleaseRollbackDialog.release = release;
+    dialogState.isOpen = true;
+    dialogState.release = release;
   }
 
   static close() {
-    ReleaseRollbackDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get release(): HelmRelease {
-    return ReleaseRollbackDialog.release;
+    return dialogState.release;
   }
 
   onOpen = async () => {
@@ -99,7 +101,7 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="ReleaseRollbackDialog"
-        isOpen={ReleaseRollbackDialog.isOpen}
+        isOpen={dialogState.isOpen}
         onOpen={this.onOpen}
         close={this.close}
       >

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -18,10 +18,12 @@ import { SubTitle } from "../layout/sub-title";
 interface Props extends DialogProps {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class AddQuotaDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-
   static defaultQuotas: IResourceQuotaValues = {
     "limits.cpu": "",
     "limits.memory": "",
@@ -57,11 +59,11 @@ export class AddQuotaDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddQuotaDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    AddQuotaDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   @computed get quotaEntries() {
@@ -138,7 +140,7 @@ export class AddQuotaDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddQuotaDialog"
-        isOpen={AddQuotaDialog.isOpen}
+        isOpen={dialogState.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

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

@@ -36,21 +36,23 @@ interface ISecretTemplate {
 
 type ISecretField = keyof ISecretTemplate;
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class AddSecretDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
   static open() {
-    AddSecretDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    AddSecretDialog.isOpen = false;
+    dialogState.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={dialogState.isOpen}
         onOpen={this.reset}
         close={this.close}
       >

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

@@ -16,9 +16,12 @@ interface Props extends DialogProps {
   onError?(error: any): void;
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class AddNamespaceDialog extends React.Component<Props> {
-  @observable static isOpen = false;
   @observable namespace = "";
 
   constructor(props: Props) {
@@ -27,11 +30,11 @@ export class AddNamespaceDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddNamespaceDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    AddNamespaceDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   reset = () => {
@@ -62,7 +65,7 @@ export class AddNamespaceDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddNamespaceDialog"
-        isOpen={AddNamespaceDialog.isOpen}
+        isOpen={dialogState.isOpen}
         onOpen={this.reset}
         close={AddNamespaceDialog.close}
       >

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

@@ -25,6 +25,10 @@ enum FileType {
   CertFile = "certFile",
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class AddHelmRepoDialog extends React.Component<Props> {
   private emptyRepo = {name: "", url: "", username: "", password: "", insecureSkipTlsVerify: false, caFile:"", keyFile: "", certFile: ""};
@@ -32,19 +36,17 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   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;
-
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
   static open() {
-    AddHelmRepoDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    AddHelmRepoDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   @observable helmRepo : HelmRepo = this.emptyRepo;
@@ -145,7 +147,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddHelmRepoDialog"
-        isOpen={AddHelmRepoDialog.isOpen}
+        isOpen={dialogState.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx

@@ -30,27 +30,29 @@ interface BindingSelectOption extends SelectOption {
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as RoleBinding,
+});
+
 @observer
 export class AddRoleBindingDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: RoleBinding = null;
-
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
   static open(roleBinding?: RoleBinding) {
-    AddRoleBindingDialog.isOpen = true;
-    AddRoleBindingDialog.data = roleBinding;
+    dialogState.isOpen = true;
+    dialogState.data = roleBinding;
   }
 
   static close() {
-    AddRoleBindingDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get roleBinding(): RoleBinding {
-    return AddRoleBindingDialog.data;
+    return dialogState.data;
   }
 
   @observable isLoading = false;
@@ -276,7 +278,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleBindingDialog"
-        isOpen={AddRoleBindingDialog.isOpen}
+        isOpen={dialogState.isOpen}
         onOpen={this.onOpen}
         close={this.close}
       >

src/renderer/components/+user-management-roles/add-role-dialog.tsx

@@ -15,10 +15,12 @@ import { showDetails } from "../kube-object";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class AddRoleDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-
   @observable roleName = "";
   @observable namespace = "";
 
@@ -28,11 +30,11 @@ export class AddRoleDialog extends React.Component<Props> {
   }
 
   static open() {
-    AddRoleDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    AddRoleDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   close = () => {
@@ -64,7 +66,7 @@ export class AddRoleDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleDialog"
-        isOpen={AddRoleDialog.isOpen}
+        isOpen={dialogState.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";
@@ -16,10 +16,12 @@ import { showDetails } from "../kube-object";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+});
+
 @observer
 export class CreateServiceAccountDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-
   @observable name = "";
   @observable namespace = "default";
 
@@ -29,11 +31,11 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   }
 
   static open() {
-    CreateServiceAccountDialog.isOpen = true;
+    dialogState.isOpen = true;
   }
 
   static close() {
-    CreateServiceAccountDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   close = () => {
@@ -63,7 +65,7 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="CreateServiceAccountDialog"
-        isOpen={CreateServiceAccountDialog.isOpen}
+        isOpen={dialogState.isOpen}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

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

@@ -14,13 +14,14 @@ import { systemName, maxLength } from "../input/input_validators";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as CronJob,
+});
+
 @observer
 export class CronJobTriggerDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: CronJob = null;
-
   @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;
+    dialogState.isOpen = true;
+    dialogState.data = cronjob;
   }
 
   static close() {
-    CronJobTriggerDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get cronjob() {
-    return CronJobTriggerDialog.data;
+    return dialogState.data;
   }
 
   close = () => {
@@ -112,7 +113,7 @@ export class CronJobTriggerDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={CronJobTriggerDialog.isOpen}
+        isOpen={dialogState.isOpen}
         className={cssNames("CronJobTriggerDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx

@@ -14,11 +14,13 @@ import { cssNames } from "../../utils";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as Deployment,
+});
+
 @observer
 export class DeploymentScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: Deployment = null;
-
   @observable ready = false;
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
@@ -29,16 +31,16 @@ export class DeploymentScaleDialog extends Component<Props> {
   }
 
   static open(deployment: Deployment) {
-    DeploymentScaleDialog.isOpen = true;
-    DeploymentScaleDialog.data = deployment;
+    dialogState.isOpen = true;
+    dialogState.data = deployment;
   }
 
   static close() {
-    DeploymentScaleDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get deployment() {
-    return DeploymentScaleDialog.data;
+    return dialogState.data;
   }
 
   close = () => {
@@ -149,7 +151,7 @@ export class DeploymentScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={DeploymentScaleDialog.isOpen}
+        isOpen={dialogState.isOpen}
         className={cssNames("DeploymentScaleDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.tsx

@@ -14,11 +14,13 @@ import { ReplicaSet, replicaSetApi } from "../../api/endpoints/replica-set.api";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as ReplicaSet,
+});
+
 @observer
 export class ReplicaSetScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: ReplicaSet = null;
-
   @observable ready = false;
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
@@ -29,16 +31,16 @@ export class ReplicaSetScaleDialog extends Component<Props> {
   }
 
   static open(replicaSet: ReplicaSet) {
-    ReplicaSetScaleDialog.isOpen = true;
-    ReplicaSetScaleDialog.data = replicaSet;
+    dialogState.isOpen = true;
+    dialogState.data = replicaSet;
   }
 
   static close() {
-    ReplicaSetScaleDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get replicaSet() {
-    return ReplicaSetScaleDialog.data;
+    return dialogState.data;
   }
 
   close = () => {
@@ -151,7 +153,7 @@ export class ReplicaSetScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={ReplicaSetScaleDialog.isOpen}
+        isOpen={dialogState.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";
@@ -14,11 +14,13 @@ import { cssNames } from "../../utils";
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as StatefulSet,
+});
+
 @observer
 export class StatefulSetScaleDialog extends Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: StatefulSet = null;
-
   @observable ready = false;
   @observable currentReplicas = 0;
   @observable desiredReplicas = 0;
@@ -29,16 +31,16 @@ export class StatefulSetScaleDialog extends Component<Props> {
   }
 
   static open(statefulSet: StatefulSet) {
-    StatefulSetScaleDialog.isOpen = true;
-    StatefulSetScaleDialog.data = statefulSet;
+    dialogState.isOpen = true;
+    dialogState.data = statefulSet;
   }
 
   static close() {
-    StatefulSetScaleDialog.isOpen = false;
+    dialogState.isOpen = false;
   }
 
   get statefulSet() {
-    return StatefulSetScaleDialog.data;
+    return dialogState.data;
   }
 
   close = () => {
@@ -151,7 +153,7 @@ export class StatefulSetScaleDialog extends Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        isOpen={StatefulSetScaleDialog.isOpen}
+        isOpen={dialogState.isOpen}
         className={cssNames("StatefulSetScaleDialog", className)}
         onOpen={this.onOpen}
         onClose={this.onClose}

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

@@ -25,11 +25,13 @@ export interface ConfirmDialogBooleanParams {
   cancelButtonProps?: Partial<ButtonProps>;
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  params: null as ConfirmDialogParams,
+});
+
 @observer
 export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
-  @observable static isOpen = false;
-  @observable.ref static params: ConfirmDialogParams;
-
   @observable isSaving = false;
 
   constructor(props: ConfirmDialogProps) {
@@ -38,8 +40,8 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
   }
 
   static open(params: ConfirmDialogParams) {
-    ConfirmDialog.isOpen = true;
-    ConfirmDialog.params = params;
+    dialogState.isOpen = true;
+    dialogState.params = params;
   }
 
   static confirm(params: ConfirmDialogBooleanParams): Promise<boolean> {
@@ -61,7 +63,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
   };
 
   get params(): ConfirmDialogParams {
-    return Object.assign({}, ConfirmDialog.defaultParams, ConfirmDialog.params);
+    return Object.assign({}, ConfirmDialog.defaultParams, dialogState.params);
   }
 
   ok = async () => {
@@ -70,7 +72,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       await Promise.resolve(this.params.ok()).catch(noop);
     } finally {
       this.isSaving = false;
-      ConfirmDialog.isOpen = false;
+      dialogState.isOpen = false;
     }
   };
 
@@ -83,7 +85,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       await Promise.resolve(this.params.cancel()).catch(noop);
     } finally {
       this.isSaving = false;
-      ConfirmDialog.isOpen = false;
+      dialogState.isOpen = false;
     }
   };
 
@@ -99,7 +101,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
       <Dialog
         {...dialogProps}
         className={cssNames("ConfirmDialog", className)}
-        isOpen={ConfirmDialog.isOpen}
+        isOpen={dialogState.isOpen}
         onClose={this.onClose}
         close={this.close}
       >

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

@@ -22,11 +22,13 @@ interface IKubeconfigDialogData {
 interface Props extends Partial<DialogProps> {
 }
 
+const dialogState = observable.object({
+  isOpen: false,
+  data: null as IKubeconfigDialogData,
+});
+
 @observer
 export class KubeConfigDialog extends React.Component<Props> {
-  @observable static isOpen = false;
-  @observable static data: IKubeconfigDialogData = null;
-
   @observable.ref configTextArea: HTMLTextAreaElement; // required for coping config text
   @observable config = ""; // parsed kubeconfig in yaml format
 
@@ -36,16 +38,17 @@ export class KubeConfigDialog extends React.Component<Props> {
   }
 
   static open(data: IKubeconfigDialogData) {
-    KubeConfigDialog.isOpen = true;
-    KubeConfigDialog.data = data;
+    dialogState.isOpen = true;
+    dialogState.data = data;
   }
 
   static close() {
-    KubeConfigDialog.isOpen = false;
+    dialogState.isOpen = false;
+    dialogState.data = null;
   }
 
   get data(): IKubeconfigDialogData {
-    return KubeConfigDialog.data;
+    return dialogState.data;
   }
 
   close = () => {
@@ -76,10 +79,9 @@ export class KubeConfigDialog extends React.Component<Props> {
   };
 
   render() {
-    const { isOpen, data = {} } = KubeConfigDialog;
     const { ...dialogProps } = this.props;
     const yamlConfig = this.config;
-    const header = <h5>{data.title || "Kubeconfig File"}</h5>;
+    const header = <h5>{this.data?.title || "Kubeconfig File"}</h5>;
     const buttons = (
       <div className="actions flex gaps">
         <Button plain onClick={this.copyToClipboard}>
@@ -98,7 +100,7 @@ export class KubeConfigDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className={cssNames("KubeConfigDialog")}
-        isOpen={isOpen}
+        isOpen={dialogState.isOpen}
         onOpen={this.onOpen}
         close={this.close}
       >