Adjust OrgRoleTable

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -110,8 +110,6 @@ export const OrgRoleTable = () => {
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}
                           a={OrgPermissionSubjects.Role}
-                          renderTooltip
-                          allowedLabel="Edit"
                         >
                           {(isAllowed) => (
                             <DropdownMenuItem
@@ -121,21 +119,17 @@ export const OrgRoleTable = () => {
                               onClick={(e) => {
                                 e.stopPropagation();
                                 router.push(`/org/${orgId}/roles/${id}`);
-                                // onSelectRole(role);
                               }}
                               disabled={!isAllowed}
                             >
-                              Edit Role
+                              {`${isNonMutatable ? "View" : "Edit"} Role`}
                             </DropdownMenuItem>
                           )}
                         </OrgPermissionCan>
+                        {!isNonMutatable && (
                           <OrgPermissionCan
                             I={OrgPermissionActions.Delete}
                             a={OrgPermissionSubjects.Role}
-                          renderTooltip
-                          allowedLabel={
-                            isNonMutatable ? "Reserved roles are non-removable" : "Delete"
-                          }
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem
@@ -154,6 +148,7 @@ export const OrgRoleTable = () => {
                               </DropdownMenuItem>
                             )}
                           </OrgPermissionCan>
+                        )}
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </Td>

frontend/src/views/Org/RolePage/RolePage.tsx

@@ -64,6 +64,8 @@ export const RolePage = withPermission(
       }
     };
 
+    const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
+
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         {data && (
@@ -81,6 +83,7 @@ export const RolePage = withPermission(
             </Button>
             <div className="mb-4 flex items-center justify-between">
               <p className="text-3xl font-semibold text-white">{data.name}</p>
+              {isCustomRole && (
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild className="rounded-lg">
                     <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
@@ -107,7 +110,10 @@ export const RolePage = withPermission(
                         </DropdownMenuItem>
                       )}
                     </OrgPermissionCan>
-                  <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}>
+                    <OrgPermissionCan
+                      I={OrgPermissionActions.Delete}
+                      a={OrgPermissionSubjects.Role}
+                    >
                       {(isAllowed) => (
                         <DropdownMenuItem
                           className={twMerge(
@@ -126,6 +132,7 @@ export const RolePage = withPermission(
                     </OrgPermissionCan>
                   </DropdownMenuContent>
                 </DropdownMenu>
+              )}
             </div>
             <div className="flex">
               <div className="mr-4 w-96">