Fix not being able to select ServiceAccounts

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

src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx

@@ -21,7 +21,7 @@
 
 import "./dialog.scss";
 
-import { computed, makeObservable, observable, reaction } from "mobx";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import React from "react";
 
@@ -37,15 +37,9 @@ import { Select, SelectOption } from "../../select";
 import { Wizard, WizardStep } from "../../wizard";
 import { clusterRoleBindingsStore } from "./store";
 import { clusterRolesStore } from "../+cluster-roles/store";
-import { getRoleRefSelectOption } from "../role-ref-select-option";
+import { getRoleRefSelectOption, ServiceAccountOption } from "../select-options";
 import { ObservableHashSet, nFircate } from "../../../utils";
 
-interface BindingSelectOption extends SelectOption {
-  value: string; // binding name
-  item?: ServiceAccount | any;
-  subject?: ClusterRoleBindingSubject; // used for new user/group when users-management-api not available
-}
-
 interface Props extends Partial<DialogProps> {
 }
 
@@ -121,19 +115,24 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
     return clusterRolesStore.items.map(getRoleRefSelectOption);
   }
 
-  @computed get serviceAccountOptions(): BindingSelectOption[] {
+  @computed get serviceAccountOptions(): ServiceAccountOption[] {
     return serviceAccountsStore.items.map(account => {
       const name = account.getName();
       const namespace = account.getNs();
 
       return {
-        item: account,
+        value: `${account.getName()}%${account.getNs()}`,
-        value: name,
+        account,
         label: <><Icon small material="account_box" /> {name} ({namespace})</>
       };
     });
   }
 
+  @computed get selectedServiceAccountOptions(): ServiceAccountOption[] {
+    return this.serviceAccountOptions.filter(({ account }) => this.selectedAccounts.has(account));
+  }
+
+  @action
   onOpen = () => {
     const binding = this.clusterRoleBinding;
 
@@ -153,10 +152,12 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
       serviceAccountsStore.items
         .filter(sa => accountNames.has(sa.getName()))
     );
+    console.log("onOpen", this.selectedAccounts.size, this.selectedAccounts.toJSON());
     this.selectedUsers.replace(uSubjects.map(user => user.name));
     this.selectedGroups.replace(gSubjects.map(group => group.name));
   };
 
+  @action
   reset = () => {
     this.selectedRoleRef = undefined;
     this.bindingName = "";
@@ -221,11 +222,16 @@ export class ClusterRoleBindingDialog extends React.Component<Props> {
         <Select
           isMulti
           themeName="light"
-          placeholder="Select service accounts"
+          placeholder="Select service accounts ..."
           autoConvertOptions={false}
           options={this.serviceAccountOptions}
-          onChange={([{ value }]: SelectOption<ServiceAccount>[]) => {
+          value={this.selectedServiceAccountOptions}
-            this.selectedAccounts.toggle(value);
+          onChange={(selected: ServiceAccountOption[] | null) => {
+            if (selected) {
+              this.selectedAccounts.replace(selected.map(opt => opt.account));
+            } else {
+              this.selectedAccounts.clear();
+            }
           }}
           maxMenuHeight={200}
         />

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

@@ -21,7 +21,7 @@
 
 import "./dialog.scss";
 
-import { computed, observable, makeObservable } from "mobx";
+import { computed, observable, makeObservable, action } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 
@@ -40,7 +40,7 @@ import { Wizard, WizardStep } from "../../wizard";
 import { roleBindingsStore } from "./store";
 import { clusterRolesStore } from "../+cluster-roles/store";
 import { Input } from "../../input";
-import { getRoleRefSelectOption } from "../role-ref-select-option";
+import { getRoleRefSelectOption, ServiceAccountOption } from "../select-options";
 import { ObservableHashSet, nFircate } from "../../../utils";
 
 interface Props extends Partial<DialogProps> {
@@ -124,15 +124,24 @@ export class RoleBindingDialog extends React.Component<Props> {
     ];
   }
 
-  @computed get serviceAccountOptions(): SelectOption<ServiceAccount>[] {
+  @computed get serviceAccountOptions(): ServiceAccountOption[] {
-    return serviceAccountsStore.items
+    return serviceAccountsStore.items.map(account => {
-      .filter(role => role.getNs() === this.bindingNamespace)
+      const name = account.getName();
-      .map(account => ({
+      const namespace = account.getNs();
-        value: account,
+
-        label: <><Icon small material="account_box" /> {account.getName()}</>
+      return {
-      }));
+        value: `${account.getName()}%${account.getNs()}`,
+        account,
+        label: <><Icon small material="account_box" /> {name} ({namespace})</>
+      };
+    });
   }
 
+  @computed get selectedServiceAccountOptions(): ServiceAccountOption[] {
+    return this.serviceAccountOptions.filter(({ account }) => this.selectedAccounts.has(account));
+  }
+
+  @action
   onOpen = () => {
     const binding = this.roleBinding;
 
@@ -158,6 +167,7 @@ export class RoleBindingDialog extends React.Component<Props> {
     this.selectedGroups.replace(gSubjects.map(group => group.name));
   };
 
+  @action
   reset = () => {
     this.selectedRoleRef = undefined;
     this.bindingName = "";
@@ -247,11 +257,16 @@ export class RoleBindingDialog extends React.Component<Props> {
         <Select
           isMulti
           themeName="light"
-          placeholder="Bind to Service Accounts ..."
+          placeholder="Select service accounts ..."
           autoConvertOptions={false}
           options={this.serviceAccountOptions}
-          onChange={([{ value }]: SelectOption<ServiceAccount>[]) => {
+          value={this.selectedServiceAccountOptions}
-            this.selectedAccounts.toggle(value);
+          onChange={(selected: ServiceAccountOption[] | null) => {
+            if (selected) {
+              this.selectedAccounts.replace(selected.map(opt => opt.account));
+            } else {
+              this.selectedAccounts.clear();
+            }
           }}
           maxMenuHeight={200}
         />

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

@@ -20,11 +20,14 @@
  */
 
 import React from "react";
+import type { ServiceAccount } from "../../api/endpoints";
 import type { KubeObject } from "../../api/kube-object";
 import { Icon } from "../icon";
 import type { SelectOption } from "../select";
 import { TooltipPosition } from "../tooltip";
 
+export type ServiceAccountOption = SelectOption<string> & { account: ServiceAccount };
+
 export function getRoleRefSelectOption<T extends KubeObject>(item: T): SelectOption<T> {
   return {
     value: item,