Added role permission tab (#2527)

package-lock.json

@@ -7,7 +7,7 @@
       "name": "keycloak-admin-ui",
       "license": "Apache",
       "dependencies": {
-        "@keycloak/keycloak-admin-client": "^18.0.1-dev.1",
+        "@keycloak/keycloak-admin-client": "^18.0.1-dev.4",
         "@patternfly/patternfly": "^4.185.1",
         "@patternfly/react-code-editor": "^4.43.16",
         "@patternfly/react-core": "^4.202.16",
@@ -3942,9 +3942,9 @@
       }
     },
     "node_modules/@keycloak/keycloak-admin-client": {
-      "version": "18.0.1-dev.1",
+      "version": "18.0.1-dev.4",
-      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.1.tgz",
+      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.4.tgz",
-      "integrity": "sha512-GYNtOkyiP2Xq18Hb6o3lGE/KQIBD2B4U3I6APU+18wwCnjN1pDEffZi1LN6U4BHjelH4HJlpFPEFFKdbT4el+A==",
+      "integrity": "sha512-J3do2wqPaSLddVABzZ9K5h/WXNmC751rO+glIORJNwXRIcl38b0oziD5fMzAgRhmsu1egZrEDM8h89phdFj2Cw==",
       "dependencies": {
         "axios": "^0.26.1",
         "camelize-ts": "^1.0.8",
@@ -26699,9 +26699,9 @@
       }
     },
     "@keycloak/keycloak-admin-client": {
-      "version": "18.0.1-dev.1",
+      "version": "18.0.1-dev.4",
-      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.1.tgz",
+      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.4.tgz",
-      "integrity": "sha512-GYNtOkyiP2Xq18Hb6o3lGE/KQIBD2B4U3I6APU+18wwCnjN1pDEffZi1LN6U4BHjelH4HJlpFPEFFKdbT4el+A==",
+      "integrity": "sha512-J3do2wqPaSLddVABzZ9K5h/WXNmC751rO+glIORJNwXRIcl38b0oziD5fMzAgRhmsu1egZrEDM8h89phdFj2Cw==",
       "requires": {
         "axios": "^0.26.1",
         "camelize-ts": "^1.0.8",

package.json

@@ -25,7 +25,7 @@
     "server:import-client": "./scripts/import-client.mjs"
   },
   "dependencies": {
-    "@keycloak/keycloak-admin-client": "^18.0.1-dev.1",
+    "@keycloak/keycloak-admin-client": "^18.0.1-dev.4",
     "@patternfly/patternfly": "^4.185.1",
     "@patternfly/react-code-editor": "^4.43.16",
     "@patternfly/react-core": "^4.202.16",

public/resources/en/common.json

@@ -91,8 +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":
+  "groupsPermissionsHint": "Determines if fine grained permissions are enabled for managing this role.  Disabling will delete all current permissions that have been set up.",
-      "Determines if fine grained permissions are enabled for managing this role.  Disabling will delete all current permissions that have been set up.",
+  "rolesPermissionsHint": "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?",
@@ -114,6 +114,18 @@
       "manage-group-membership-description": "Policies that decide if an administrator can manage group membership for all users in the realm.  This is used in conjunction with specific group policy",
       "impersonate-description": "Policies that decide if administrator can impersonate other users",
       "user-impersonated-description": "Policies that decide which users can be impersonated.  These policies are applied to the user being impersonated."
+    },
+    "groups": {
+      "view-description": "Policies that decide if an administrator can view this group",
+      "manage-description": "Policies that decide if an administrator can manage this group",
+      "view-members-description": "Policies that decide if an administrator can view the members of this group",
+      "manage-members-description": "Policies that decide if an administrator can manage the members of this group",
+      "manage-membership-description": "Policies that decide if an administrator can add or remove users from this group"
+    },
+    "roles": {
+      "map-role-description": "Policies that decide if an administrator can map this role to a user or group",
+      "map-role-client-scope-description": "Policies that decide if an administrator can apply this role to the client scope of a client",
+      "map-role-composite-description": "Policies that decide if an administrator can apply this role as a composite to another role"
     }
   },
   "configure": "Configure",
@@ -186,4 +198,4 @@
   "passwordConfirmation": "Password confirmation",
   "temporaryPassword": "Temporary",
   "temporaryPasswordHelpText": "If enabled, the user must change the password on next login"
-}
+}

src/components/permission-tab/PermissionTab.tsx

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

src/realm-roles/RealmRoleTabs.tsx

@@ -39,6 +39,7 @@ import {
   ClientRoleRoute,
   toClientRole,
 } from "./routes/ClientRole";
+import { PermissionsTab } from "../components/permission-tab/PermissionTab";
 
 export default function RealmRoleTabs() {
   const { t } = useTranslation("roles");
@@ -392,6 +393,12 @@ export default function RealmRoleTabs() {
                 <UsersInRoleTab data-cy="users-in-role-tab" />
               </Tab>
             )}
+            <Tab
+              eventKey="permissions"
+              title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
+            >
+              <PermissionsTab id={role.id} type="roles" />
+            </Tab>
           </KeycloakTabs>
         )}
       </PageSection>