Initial version of the group permissions tab (#2519)

public/resources/en/common.json

@@ -91,6 +91,8 @@
   "permissionsListIntro": "Edit the permission list by clicking the scope-name. It then redirects to the permission details page of the client named <1>{{realm}}</1>",
   "usersPermissionsHint": "Fine grained permissions for managing all users in realm.  You can define different policies for who is allowed to manage users in the realm.",
   "clientsPermissionsHint": "Fine grained permissions for administrators that want to manage this client or apply roles defined by this client.",
+  "groupsPermissionsHint":
+      "Determines if fine grained permissions are enabled for managing this role.  Disabling will delete all current permissions that have been set up.",
   "permissionsScopeName": "Scope-name",
   "permissionsEnabled": "Permissions enabled",
   "permissionsDisable": "Disable permissions?",

src/components/permission-tab/PermissionTab.tsx

@@ -31,7 +31,7 @@ import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 
 import "./permissions-tab.css";
 
-type PermissionScreenType = "clients" | "users";
+type PermissionScreenType = "clients" | "users" | "groups";
 
 type PermissionsTabProps = {
   id?: string;
@@ -59,6 +59,8 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
           realm,
           enabled,
         });
+      case "groups":
+        return adminClient.groups.updatePermission({ id: id! }, { enabled });
     }
   };
 
@@ -77,6 +79,8 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
               return adminClient.realms.getUsersManagementPermissions({
                 realm,
               });
+            case "groups":
+              return adminClient.groups.listPermissions({ id: id! });
           }
         })(),
       ]),

src/groups/GroupsSection.tsx

@@ -27,6 +27,7 @@ import { toGroups } from "./routes/Groups";
 import { toGroupsSearch } from "./routes/GroupsSearch";
 import { GroupRoleMapping } from "./GroupRoleMapping";
 import helpUrls from "../help-urls";
+import { PermissionsTab } from "../components/permission-tab/PermissionTab";
 
 import "./GroupsSection.css";
 
@@ -176,6 +177,13 @@ export default function GroupsSection() {
             >
               <GroupRoleMapping id={id!} name={currentGroup()?.name!} />
             </Tab>
+            <Tab
+              eventKey={4}
+              data-testid="permissionsTab"
+              title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
+            >
+              <PermissionsTab id={id} type="groups" />
+            </Tab>
           </Tabs>
         )}
         {subGroups.length === 0 && <GroupTable />}