feat: completed all nit changes in review

frontend/src/hooks/api/roles/queries.tsx

@@ -38,7 +38,7 @@ const glob: JsInterpreter<FieldCondition<string>> = (node, object, context) => {
 const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
 
 export const roleQueryKeys = {
-  getProjectRoles: (projectId: string) => ["roles", { projectSlug: projectId }] as const,
+  getProjectRoles: (projectId: string) => ["roles", { projectId }] as const,
   getProjectRoleBySlug: (projectId: string, roleSlug: string) =>
     ["roles", { projectId, roleSlug }] as const,
   getOrgRoles: (orgId: string) => ["org-roles", { orgId }] as const,

frontend/src/pages/project/[id]/identities/[identityId]/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 

frontend/src/pages/project/[id]/members/[membershipId]/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
 

frontend/src/views/Project/IdentityDetailsPage/IdentityDetailPage.tsx

@@ -56,10 +56,10 @@ export const IdentityDetailsPage = withProjectPermission(
                   </h3>
                   <div>
                     <ProjectPermissionCan
-                      I={ProjectPermissionActions.Edit}
+                      I={ProjectPermissionActions.Delete}
                       a={ProjectPermissionSub.Identity}
                       renderTooltip
-                      allowedLabel="Edit role"
+                      allowedLabel="Remove from project"
                     >
                       {(isAllowed) => (
                         <Button

frontend/src/views/Project/IdentityDetailsPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx

@@ -206,9 +206,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
             <IconButton ariaLabel="go-back" variant="plain" onClick={onGoBack}>
               <FontAwesomeIcon icon={faChevronLeft} />
             </IconButton>
-            <h3 className="text-lg font-semibold text-mineshaft-100">
-              Modify Additional Privilege
-            </h3>
+            <h3 className="text-lg font-semibold text-mineshaft-100">Edit Additional Privilege</h3>
           </div>
           <div className="flex items-center space-x-4">
             {isDirty && (

frontend/src/views/Project/IdentityDetailsPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx

@@ -98,7 +98,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
           >
             <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
               <h3 className="text-lg font-semibold text-mineshaft-100">
-                Project Additional Privilege
+                Project Additional Privileges
               </h3>
 
               <ProjectPermissionCan
@@ -174,7 +174,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
                             }}
                             onClick={() => handlePopUpOpen("modifyPrivilege", privilegeDetails)}
                           >
-                            <Td className="capitalize">{privilegeDetails.slug}</Td>
+                            <Td>{privilegeDetails.slug}</Td>
                             <Td>
                               <Tooltip asChild={false} content={toolTipText}>
                                 <Tag

frontend/src/views/Project/IdentityDetailsPage/components/IdentityRoleDetailsSectiona/IdentityRoleDetailsSection.tsx

@@ -72,7 +72,7 @@ export const IdentityRoleDetailsSection = ({
           I={ProjectPermissionActions.Edit}
           a={ProjectPermissionSub.Identity}
           renderTooltip
-          allowedLabel="Edit role"
+          allowedLabel="Edit Role(s)"
         >
           {(isAllowed) => (
             <IconButton

frontend/src/views/Project/MemberDetailsPage/MemberDetailPage.tsx

@@ -54,10 +54,10 @@ export const MemberDetailsPage = withProjectPermission(
                   <h3 className="text-xl font-semibold text-mineshaft-100">Project User Access</h3>
                   <div>
                     <ProjectPermissionCan
-                      I={ProjectPermissionActions.Edit}
+                      I={ProjectPermissionActions.Delete}
                       a={ProjectPermissionSub.Member}
                       renderTooltip
-                      allowedLabel="Edit role"
+                      allowedLabel="Remove from project"
                     >
                       {(isAllowed) => (
                         <Button

frontend/src/views/Project/MemberDetailsPage/components/MemberProjectAdditionalPrivilegeSection/MemberProjectAdditionalPrivilegeSection.tsx

@@ -1,6 +1,6 @@
 import { faFolder, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format,formatDistance } from "date-fns";
+import { format, formatDistance } from "date-fns";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
@@ -19,7 +19,8 @@ import {
   Th,
   THead,
   Tooltip,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -104,7 +105,7 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
           >
             <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
               <h3 className="text-lg font-semibold text-mineshaft-100">
-                Project Additional Privilege
+                Project Additional Privileges
               </h3>
               {userId !== membershipDetails?.user?.id &&
                 membershipDetails?.status !== "invited" && (
@@ -180,7 +181,7 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
                             }}
                             onClick={() => handlePopUpOpen("modifyPrivilege", privilegeDetails)}
                           >
-                            <Td className="capitalize">{privilegeDetails.slug}</Td>
+                            <Td>{privilegeDetails.slug}</Td>
                             <Td>
                               <Tooltip asChild={false} content={toolTipText}>
                                 <Tag

frontend/src/views/Project/MemberDetailsPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx

@@ -163,7 +163,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
       onGoBack();
     } catch (err) {
       console.log(err);
-      createNotification({ type: "error", text: "Failed to update role" });
+      createNotification({ type: "error", text: "Failed to update privilege" });
     }
   };
 

frontend/src/views/Project/MemberDetailsPage/components/MemberRoleDetailsSection/MemberRoleDetailsSection.tsx

@@ -20,7 +20,8 @@ import {
   Th,
   THead,
   Tooltip,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionSub,
@@ -81,7 +82,7 @@ export const MemberRoleDetailsSection = ({
             I={ProjectPermissionActions.Edit}
             a={ProjectPermissionSub.Member}
             renderTooltip
-            allowedLabel="Edit role"
+            allowedLabel="Edit role(s)"
           >
             {(isAllowed) => (
               <IconButton

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRoleForm.tsx

@@ -19,16 +19,19 @@ export const IdentityRoleForm = ({ identityProjectMember, onOpenUpgradeModal }:
         identityProjectMember={identityProjectMember}
         onOpenUpgradeModal={onOpenUpgradeModal}
       />
-      <Alert className="mt-4">
+      <Alert
+        title="Additional privileges have been moved and now offer full permission customization."
+        className="mt-4 border-primary/50 bg-primary/10"
+      >
         <AlertDescription>
-          Additional privileges now offer full permissions and have been moved to a new screen.
-          <br />
           <Link
-            href={`/project/${currentWorkspace?.id || ""}/identitiesq/${
+            href={`/project/${currentWorkspace?.id || ""}/identities/${
               identityProjectMember?.identity?.id
             }`}
           >
-            <span className="cursor-pointer text-primary">Click here to access them.</span>
+            <span className="cursor-pointer text-primary underline underline-offset-2">
+              Click here to access them now
+            </span>
           </Link>
         </AlertDescription>
       </Alert>

frontend/src/views/Project/MembersPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx

@@ -15,12 +15,15 @@ export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) =>
   return (
     <div>
       <MemberRbacSection projectMember={projectMember} onOpenUpgradeModal={onOpenUpgradeModal} />
-      <Alert className="mt-4">
+      <Alert
+        title="Additional privileges have been moved and now offer full permission customization."
+        className="mt-4 border-primary/50 bg-primary/10"
+      >
         <AlertDescription>
-          Additional privileges now offer full permissions and have been moved to a new screen.
-          <br />
           <Link href={`/project/${currentWorkspace?.id || ""}/members/${projectMember?.id}`}>
-            <span className="cursor-pointer text-primary">Click here to access them.</span>
+            <span className="cursor-pointer text-primary underline underline-offset-2">
+              Click here to access them now
+            </span>
           </Link>
         </AlertDescription>
       </Alert>