From 755d1b383bc213baa1280a82992315b4a3672d0e Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Mon, 7 Jun 2021 10:07:31 -0400
Subject: [PATCH] Fix not being able to select ServiceAccounts

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../+cluster-role-bindings/dialog.tsx         | 34 +++++++++-------
 .../+role-bindings/dialog.tsx                 | 39 +++++++++++++------
 ...f-select-option.tsx => select-options.tsx} |  3 ++
 3 files changed, 50 insertions(+), 26 deletions(-)
 rename src/renderer/components/+user-management/{role-ref-select-option.tsx => select-options.tsx} (92%)

diff --git a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx b/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx
index 87882b8933..cb88e80635 100644
--- a/src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx
+++ b/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: name,
+        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.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>[]) => {
-            this.selectedAccounts.toggle(value);
+          value={this.selectedServiceAccountOptions}
+          onChange={(selected: ServiceAccountOption[] | null) => {
+            if (selected) {
+              this.selectedAccounts.replace(selected.map(opt => opt.account));
+            } else {
+              this.selectedAccounts.clear();
+            }
           }}
           maxMenuHeight={200}
         />
diff --git a/src/renderer/components/+user-management/+role-bindings/dialog.tsx b/src/renderer/components/+user-management/+role-bindings/dialog.tsx
index ce76871eba..7b1c59ce10 100644
--- a/src/renderer/components/+user-management/+role-bindings/dialog.tsx
+++ b/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>[] {
-    return serviceAccountsStore.items
-      .filter(role => role.getNs() === this.bindingNamespace)
-      .map(account => ({
-        value: account,
-        label: <><Icon small material="account_box" /> {account.getName()}</>
-      }));
+  @computed get serviceAccountOptions(): ServiceAccountOption[] {
+    return serviceAccountsStore.items.map(account => {
+      const name = account.getName();
+      const namespace = account.getNs();
+
+      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>[]) => {
-            this.selectedAccounts.toggle(value);
+          value={this.selectedServiceAccountOptions}
+          onChange={(selected: ServiceAccountOption[] | null) => {
+            if (selected) {
+              this.selectedAccounts.replace(selected.map(opt => opt.account));
+            } else {
+              this.selectedAccounts.clear();
+            }
           }}
           maxMenuHeight={200}
         />
diff --git a/src/renderer/components/+user-management/role-ref-select-option.tsx b/src/renderer/components/+user-management/select-options.tsx
similarity index 92%
rename from src/renderer/components/+user-management/role-ref-select-option.tsx
rename to src/renderer/components/+user-management/select-options.tsx
index 4389ff95b9..65bfeeec9e 100644
--- a/src/renderer/components/+user-management/role-ref-select-option.tsx
+++ b/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,