Add helper for <Select>.isMulti for storing in a Set<Value>

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

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

@@ -18,7 +18,7 @@ import { Icon } from "../../icon";
 import { showDetails } from "../../kube-detail-params";
 import { SubTitle } from "../../layout/sub-title";
 import { Notifications } from "../../notifications";
-import { Select } from "../../select";
+import { onMultiSelectFor, Select } from "../../select";
 import { Wizard, WizardStep } from "../../wizard";
 import { clusterRoleBindingStore } from "./legacy-store";
 import { clusterRoleStore } from "../+cluster-roles/legacy-store";
@@ -244,25 +244,7 @@ export class ClusterRoleBindingDialog extends React.Component<ClusterRoleBinding
               {` ${option.label}`}
             </>
           )}
-          onChange={(selected, meta) => {
+          onChange={onMultiSelectFor(this.selectedAccounts)}
-            switch (meta.action) {
-              case "clear":
-                this.selectedAccounts.clear();
-                break;
-              case "deselect-option":
-              case "remove-value":
-              case "pop-value":
-                if (meta.option) {
-                  this.selectedAccounts.delete(meta.option.value);
-                }
-                break;
-              case "select-option":
-                if (meta.option) {
-                  this.selectedAccounts.add(meta.option.value);
-                }
-                break;
-            }
-          }}
           maxMenuHeight={200}
         />
       </>

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

@@ -22,7 +22,7 @@ import { showDetails } from "../../kube-detail-params";
 import { SubTitle } from "../../layout/sub-title";
 import { Notifications } from "../../notifications";
 import type { SelectOption } from "../../select";
-import { Select } from "../../select";
+import { onMultiSelectFor, Select } from "../../select";
 import { Wizard, WizardStep } from "../../wizard";
 import { roleBindingStore } from "./legacy-store";
 import { clusterRoleStore } from "../+cluster-roles/legacy-store";
@@ -252,25 +252,7 @@ export class RoleBindingDialog extends React.Component<RoleBindingDialogProps> {
               {` ${option.label}`}
             </>
           )}
-          onChange={(selected, meta) => {
+          onChange={onMultiSelectFor(this.selectedAccounts)}
-            switch (meta.action) {
-              case "clear":
-                this.selectedAccounts.clear();
-                break;
-              case "deselect-option":
-              case "remove-value":
-              case "pop-value":
-                if (meta.option) {
-                  this.selectedAccounts.delete(meta.option.value);
-                }
-                break;
-              case "select-option":
-                if (meta.option) {
-                  this.selectedAccounts.add(meta.option.value);
-                }
-                break;
-            }
-          }}
           maxMenuHeight={200}
         />
       </>

src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Select } from "../../select/select";
+import { onMultiSelectFor, Select } from "../../select/select";
 import { Icon } from "../../icon/icon";
 import { Button } from "../../button/button";
 import { SubTitle } from "../../layout/sub-title";
@@ -70,10 +70,7 @@ export class ClusterMetricsSetting extends React.Component<ClusterMetricsSetting
           closeMenuOnSelect={false}
           controlShouldRenderValue={false}
           options={metricResourceTypeOptions}
-          onChange={(options) => {
+          onChange={onMultiSelectFor(this.hiddenMetrics)}
-            this.hiddenMetrics.replace(options.map(opt => opt.value));
-            this.save();
-          }}
           formatOptionLabel={(option) => (
             <div className="flex gaps align-center">
               <span>{option.value}</span>

src/renderer/components/select/select.tsx

@@ -8,6 +8,7 @@
 import "./select.scss";
 
 import React from "react";
+import type { ObservableSet } from "mobx";
 import { action, computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import ReactSelect, { components, createFilter } from "react-select";
@@ -81,6 +82,28 @@ interface Dependencies {
   themeStore: ThemeStore;
 }
 
+export function onMultiSelectFor<Value, Option extends SelectOption<Value>, Group extends GroupBase<Option> = GroupBase<Option>>(collection: Set<Value> | ObservableSet<Value>): SelectProps<Value, Option, true, Group>["onChange"] {
+  return action((newValue, meta) => {
+    switch (meta.action) {
+      case "clear":
+        collection.clear();
+        break;
+      case "deselect-option":
+      case "remove-value":
+      case "pop-value":
+        if (meta.option) {
+          collection.delete(meta.option.value);
+        }
+        break;
+      case "select-option":
+        if (meta.option) {
+          collection.add(meta.option.value);
+        }
+        break;
+    }
+  });
+}
+
 @observer
 class NonInjectedSelect<
   Value,