Fix Dialog not being openable, rearrange tabs

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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

@@ -37,22 +37,18 @@ interface Props extends Partial<DialogProps> {
 
 @observer
 export class AddClusterRoleDialog extends React.Component<Props> {
-  @observable static isOpen = false;
+  static isOpen = observable.box(false);
 
   @observable clusterRoleName = "";
 
   static open() {
-    AddClusterRoleDialog.isOpen = true;
+    this.isOpen.set(true);
   }
 
   static close() {
-    AddClusterRoleDialog.isOpen = false;
+    this.isOpen.set(false);
   }
 
-  close = () => {
-    AddClusterRoleDialog.close();
-  };
-
   reset = () => {
     this.clusterRoleName = "";
   };
@@ -63,7 +59,7 @@ export class AddClusterRoleDialog extends React.Component<Props> {
 
       showDetails(role.selfLink);
       this.reset();
-      this.close();
+      AddClusterRoleDialog.close();
     } catch (err) {
       Notifications.error(err.toString());
     }
@@ -77,10 +73,10 @@ export class AddClusterRoleDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleDialog"
-        isOpen={AddClusterRoleDialog.isOpen}
+        isOpen={AddClusterRoleDialog.isOpen.get()}
-        close={this.close}
+        close={AddClusterRoleDialog.close}
       >
-        <Wizard header={header} done={this.close}>
+        <Wizard header={header} done={AddClusterRoleDialog.close}>
           <WizardStep
             contentClass="flex gaps column"
             nextLabel="Create"

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

@@ -37,12 +37,10 @@ import { rolesStore } from "./store";
 interface Props extends Partial<DialogProps> {
 }
 
-const dialogState = observable.object({
-  isOpen: false,
-});
-
 @observer
 export class AddRoleDialog extends React.Component<Props> {
+  static isOpen = observable.box(false);
+  
   @observable roleName = "";
   @observable namespace = "";
 
@@ -52,11 +50,11 @@ export class AddRoleDialog extends React.Component<Props> {
   }
 
   static open() {
-    dialogState.isOpen = true;
+    this.isOpen.set(true);
   }
 
   static close() {
-    dialogState.isOpen = false;
+    this.isOpen.set(false);
   }
 
   close = () => {
@@ -88,7 +86,7 @@ export class AddRoleDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="AddRoleDialog"
-        isOpen={dialogState.isOpen}
+        isOpen={AddRoleDialog.isOpen.get()}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

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

@@ -38,12 +38,10 @@ import { serviceAccountsStore } from "./store";
 interface Props extends Partial<DialogProps> {
 }
 
-const dialogState = observable.object({
-  isOpen: false,
-});
-
 @observer
 export class CreateServiceAccountDialog extends React.Component<Props> {
+  static isOpen = observable.box(false);
+
   @observable name = "";
   @observable namespace = "default";
 
@@ -53,11 +51,11 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   }
 
   static open() {
-    dialogState.isOpen = true;
+    this.isOpen.set(true);
   }
 
   static close() {
-    dialogState.isOpen = false;
+    this.isOpen.set(false);
   }
 
   close = () => {
@@ -87,7 +85,7 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
       <Dialog
         {...dialogProps}
         className="CreateServiceAccountDialog"
-        isOpen={dialogState.isOpen}
+        isOpen={CreateServiceAccountDialog.isOpen.get()}
         close={this.close}
       >
         <Wizard header={header} done={this.close}>

src/renderer/components/+user-management/user-management.tsx

@@ -61,30 +61,12 @@ export class UserManagement extends React.Component {
       });
     }
 
-    if (isAllowedResource("podsecuritypolicies")) {
+    if (isAllowedResource("clusterroles")) {
       tabRoutes.push({
-        title: "Pod Security Policies",
+        title: "Cluster Roles",
-        component: PodSecurityPolicies,
+        component: ClusterRoles,
-        url: podSecurityPoliciesURL(),
+        url: clusterRolesURL(),
-        routePath: podSecurityPoliciesRoute.path.toString(),
+        routePath: clusterRolesRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("rolebindings")) {
-      tabRoutes.push({
-        title: "Role Bindings",
-        component: RoleBindings,
-        url: roleBindingsURL(),
-        routePath: roleBindingsRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("clusterrolebindings")) {
-      tabRoutes.push({
-        title: "Cluster Role Bindings",
-        component: ClusterRoleBindings,
-        url: clusterRoleBindingsURL(),
-        routePath: clusterRoleBindingsRoute.path.toString(),
       });
     }
 
@@ -97,12 +79,30 @@ export class UserManagement extends React.Component {
       });
     }
 
-    if (isAllowedResource("clusterroles")) {
+    if (isAllowedResource("clusterrolebindings")) {
       tabRoutes.push({
-        title: "Cluster Roles",
+        title: "Cluster Role Bindings",
-        component: ClusterRoles,
+        component: ClusterRoleBindings,
-        url: clusterRolesURL(),
+        url: clusterRoleBindingsURL(),
-        routePath: clusterRolesRoute.path.toString(),
+        routePath: clusterRoleBindingsRoute.path.toString(),
+      });
+    }
+
+    if (isAllowedResource("rolebindings")) {
+      tabRoutes.push({
+        title: "Role Bindings",
+        component: RoleBindings,
+        url: roleBindingsURL(),
+        routePath: roleBindingsRoute.path.toString(),
+      });
+    }
+
+    if (isAllowedResource("podsecuritypolicies")) {
+      tabRoutes.push({
+        title: "Pod Security Policies",
+        component: PodSecurityPolicies,
+        url: podSecurityPoliciesURL(),
+        routePath: podSecurityPoliciesRoute.path.toString(),
       });
     }