Improve FilterableSelect to support optional grouping by option field

frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -1,19 +1,54 @@
 import Select, { Props } from "react-select";
 import { twMerge } from "tailwind-merge";
 
-import { ClearIndicator, DropdownIndicator, MultiValueRemove, Option } from "../Select/components";
+import {
+  ClearIndicator,
+  DropdownIndicator,
+  Group,
+  MultiValueRemove,
+  Option
+} from "../Select/components";
 
 export const FilterableSelect = <T,>({
   isMulti,
   closeMenuOnSelect,
   tabSelectsValue = false,
+  groupBy = null,
+  getGroupHeaderLabel = null,
+  options = [],
   ...props
-}: Props<T>) => (
+}: Props<T> & {
+  groupBy?: string | null;
+  getGroupHeaderLabel?: ((groupValue: any) => string) | null;
+}) => {
+  let processedOptions = options;
+
+  if (groupBy && Array.isArray(options)) {
+    const groupedOptions = options.reduce((acc, option) => {
+      const groupValue = option[groupBy];
+      const groupKey = groupValue?.toString() || "undefined";
+
+      if (!acc[groupKey]) {
+        acc[groupKey] = {
+          label: getGroupHeaderLabel ? getGroupHeaderLabel(groupValue) : groupValue,
+          options: []
+        };
+      }
+
+      acc[groupKey].options.push(option);
+      return acc;
+    }, {});
+
+    processedOptions = Object.values(groupedOptions);
+  }
+
+  return (
     <Select
       isMulti={isMulti}
       closeMenuOnSelect={closeMenuOnSelect ?? !isMulti}
       hideSelectedOptions={false}
       unstyled
+      options={processedOptions}
       styles={{
         input: (base) => ({
           ...base,
@@ -37,6 +72,7 @@ export const FilterableSelect = <T,>({
         ClearIndicator,
         MultiValueRemove,
         Option,
+        Group,
         ...props.components
       }}
       classNames={{
@@ -78,4 +114,5 @@ export const FilterableSelect = <T,>({
       }}
       {...props}
     />
-);
+  );
+};

frontend/src/components/v2/Select/components/index.tsx

@@ -2,6 +2,7 @@ import {
   ClearIndicatorProps,
   components,
   DropdownIndicatorProps,
+  GroupProps,
   MultiValueRemoveProps,
   OptionProps
 } from "react-select";
@@ -45,3 +46,7 @@ export const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) =
     </components.Option>
   );
 };
+
+export const Group = <T,>(props: GroupProps<T>) => {
+  return <components.Group {...props} />;
+};

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -23,7 +23,7 @@ import {
   useGetUserWorkspaces
 } from "@app/hooks/api";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
-import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { OrgInviteLink } from "./OrgInviteLink";
@@ -168,6 +168,21 @@ export const AddOrgMemberModal = ({
     reset();
   };
 
+  const getGroupHeaderLabel = (type: ProjectType) => {
+    switch (type) {
+      case ProjectType.SecretManager:
+        return "Secrets";
+      case ProjectType.CertificateManager:
+        return "PKI";
+      case ProjectType.KMS:
+        return "KMS";
+      case ProjectType.SSH:
+        return "SSH";
+      default:
+        return "All";
+    }
+  };
+
   return (
     <Modal
       isOpen={popUp?.addMember?.isOpen}
@@ -247,6 +262,8 @@ export const AddOrgMemberModal = ({
                         getOptionLabel={(project) => project.name}
                         getOptionValue={(project) => project.id}
                         options={projects}
+                        groupBy="type"
+                        getGroupHeaderLabel={getGroupHeaderLabel}
                         placeholder="Select projects..."
                       />
                     </FormControl>