Merge pull request #4380 from Infisical/role-descriptions

improvement(frontend): display role descriptions in invite user/add project membership filter selects

frontend/src/components/roles/RoleOption.tsx

@@ -0,0 +1,29 @@
+import { components, OptionProps } from "react-select";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export const RoleOption = ({
+  isSelected,
+  children,
+  ...props
+}: OptionProps<{ name: string; slug: string; description?: string | undefined }>) => {
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        <div>
+          <p className="truncate">{children}</p>
+          {props.data.description ? (
+            <p className="truncate text-xs leading-4 text-mineshaft-400">
+              {props.data.description}
+            </p>
+          ) : (
+            <p className="text-xs leading-4 text-mineshaft-400/50">No Description</p>
+          )}
+        </div>
+        {isSelected && (
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        )}
+      </div>
+    </components.Option>
+  );
+};

frontend/src/components/roles/index.tsx

@@ -0,0 +1 @@
+export * from "./RoleOption";

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

@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
+import { RoleOption } from "@app/components/roles";
 import {
   Button,
   FilterableSelect,
@@ -45,7 +46,11 @@ const addMemberFormSchema = z.object({
     )
     .default([]),
   projectRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG),
-  organizationRole: z.object({ name: z.string(), slug: z.string() })
+  organizationRole: z.object({
+    name: z.string(),
+    slug: z.string(),
+    description: z.string().optional()
+  })
 });
 
 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
@@ -238,6 +243,7 @@ export const AddOrgMemberModal = ({
                     getOptionLabel={(option) => option.name}
                     value={value}
                     onChange={onChange}
+                    components={{ Option: RoleOption }}
                   />
                 </FormControl>
               )}

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/AddMemberModal.tsx

@@ -6,6 +6,7 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
+import { RoleOption } from "@app/components/roles";
 import {
   Alert,
   AlertDescription,
@@ -320,6 +321,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
                 >
                   <FilterableSelect
                     options={roles}
+                    components={{ Option: RoleOption }}
                     placeholder="Select roles..."
                     value={value}
                     onChange={onChange}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -72,7 +72,10 @@ import {
   useMoveSecrets,
   useUpdateSecretBatch
 } from "@app/hooks/api";
-import { dashboardKeys, fetchDashboardProjectSecretsByKeys } from "@app/hooks/api/dashboard/queries";
+import {
+  dashboardKeys,
+  fetchDashboardProjectSecretsByKeys
+} from "@app/hooks/api/dashboard/queries";
 import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";