disable menu items to edit roles for self (#135)

p2-inc · Feb 16, 2024 · ca59a8e · ca59a8e
1 parent 3ff1889
commit ca59a8e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/pages/member/roles.tsx b/src/pages/member/roles.tsx
@@ -224,6 +224,7 @@ const Roles = () => {
 
   const hasManageRolesRole = hasManageRolesRoleCheck(orgId);
   const hasApplicationRoles = OrgRoles.length > 0;
+  const canEditSetRoleButtons = isSameUserAndMember || !hasManageRolesRole;
 
   return (
     <div className="mt-4 md:mt-16">
@@ -249,19 +250,21 @@ const Roles = () => {
         </div>
       )}
       <div className="mt-8 flex items-center space-x-2 border-b pb-2">
-        <div className="inline-block text-sm text-gray-600">{t("role-set")}</div>
+        <div className="inline-block text-sm text-gray-600">
+          {t("role-set")}
+        </div>
         <Button
           onClick={grantAllRoles}
           disabled={
-            !hasManageRolesRole ||
+            canEditSetRoleButtons ||
             roleData.filter((rd) => rd.isChecked).length === roleData.length
           }
           text={t("all")}
         />
         <Button
           onClick={() => grantFilteredRoles("manage")}
           disabled={
-            !hasManageRolesRole ||
+            canEditSetRoleButtons ||
             !(
               roleData.filter(
                 (rd) => rd.name.startsWith("manage") && !rd.isChecked
@@ -273,7 +276,7 @@ const Roles = () => {
         <Button
           onClick={() => grantFilteredRoles("view")}
           disabled={
-            !hasManageRolesRole ||
+            canEditSetRoleButtons ||
             !(
               roleData.filter(
                 (rd) => rd.name.startsWith("view") && !rd.isChecked
@@ -286,7 +289,7 @@ const Roles = () => {
           <Button
             onClick={() => grantFilteredRoles("application")}
             disabled={
-              !hasManageRolesRole ||
+              canEditSetRoleButtons ||
               !(
                 roleData.filter((rd) => rd.isApplicationRole && !rd.isChecked)
                   .length > 0
@@ -298,7 +301,7 @@ const Roles = () => {
         <Button
           onClick={revokeAllRoles}
           disabled={
-            !hasManageRolesRole ||
+            canEditSetRoleButtons ||
             roleData.filter((rd) => rd.isChecked).length === 0
           }
           text={t("none")}

diff --git a/src/pages/organizations/components/member-action-menu.tsx b/src/pages/organizations/components/member-action-menu.tsx
@@ -28,7 +28,9 @@ export default function MembersActionMenu({ member, orgId, realm }: Props) {
     hasManageMembersRole: hasManageMembersRoleCheck,
     hasManageRolesRole: hasManageRolesRoleCheck,
   } = useUser();
-  const isRemoveDisabled = !user || member.id === user?.id;
+  const isSameUserAndMember = member.id === user?.id;
+  const isRemoveDisabled = !user || isSameUserAndMember;
+
   const [isRemoveConfOpen, setRemoveConfOpen] = useState(false);
 
   const [removeOrganizationMember, { isLoading }] =
@@ -96,7 +98,7 @@ export default function MembersActionMenu({ member, orgId, realm }: Props) {
         >
           <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border dark:border-zinc-600 dark:bg-p2dark-900">
             <div className="py-1">
-              <Menu.Item disabled={!hasManageRolesRole}>
+              <Menu.Item disabled={isSameUserAndMember || !hasManageRolesRole}>
                 {({ active, disabled }) => {
                   return disabled ? (
                     <MenuItemButton active={active} disabled={disabled}>

diff --git a/src/pages/organizations/components/member-roles.tsx b/src/pages/organizations/components/member-roles.tsx
@@ -9,6 +9,7 @@ import { Link } from "react-router-dom";
 import Button from "components/elements/forms/buttons/button";
 import { checkOrgForRole } from "components/utils/check-org-for-role";
 import useUser from "components/utils/useUser";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   member: UserRepresentation;
@@ -33,9 +34,11 @@ const FilteredRole: React.FC<FilteredRoleProp> = ({
   member,
   orgId,
 }) => {
-  const { hasManageRolesRole: hasManageRolesRoleCheck } = useUser();
+  const { hasManageRolesRole: hasManageRolesRoleCheck, user } = useUser();
   const filtered = roles.filter((f) => regexp.test(f.name));
   const hasManageRolesRole = hasManageRolesRoleCheck(orgId);
+  const isSameUserAndMember = member.id === user?.id;
+  const { t } = useTranslation();
 
   return (
     <Menu as="div" className="relative inline-block w-full text-left md:w-auto">
@@ -57,11 +60,11 @@ const FilteredRole: React.FC<FilteredRoleProp> = ({
             </div>
           </Menu.Item>
         ))}
-        {hasManageRolesRole && (
+        {!isSameUserAndMember && hasManageRolesRole && (
           <Menu.Item>
             <Link to={`/organizations/${orgId}/members/${member.id}/roles`}>
               <Button isCompact className="mt-4 w-full">
-                Edit roles
+                {t("editRoles")}
               </Button>
             </Link>
           </Menu.Item>