From 43c19064e9477a5449ff5d56b00efe27cf640c27 Mon Sep 17 00:00:00 2001
From: Debsmita Santra <debsmita.santra@gmail.com>
Date: Tue, 5 Dec 2023 15:39:08 +0530
Subject: [PATCH] feat(rbac): role overview (#972)

---
 plugins/rbac-common/src/types.ts              |   5 +
 plugins/rbac/dev/index.tsx                    | 107 ++-----
 plugins/rbac/package.json                     |   8 +-
 plugins/rbac/src/__fixtures__/mockMembers.ts  | 259 ++++++++++++++++
 .../__fixtures__/mockPermissionPolicies.ts    |  75 +++++
 plugins/rbac/src/__fixtures__/mockPolicies.ts |  76 +++++
 plugins/rbac/src/api/RBACBackendClient.ts     |  75 ++++-
 plugins/rbac/src/components/AboutCard.tsx     |  69 +++++
 .../rbac/src/components/DeleteRoleDialog.tsx  |   4 +-
 .../rbac/src/components/MembersCard.test.tsx  | 107 +++++++
 plugins/rbac/src/components/MembersCard.tsx   |  82 +++++
 .../src/components/MembersListColumns.tsx     |  48 +++
 .../src/components/PermissionCard.test.tsx    |  85 +++++
 .../rbac/src/components/PermissionsCard.tsx   |  87 ++++++
 .../src/components/PermissionsListColumns.tsx |  33 ++
 .../rbac/src/components/RoleOverviewPage.tsx  |  35 +++
 .../rbac/src/components/RolesList.test.tsx    |  10 +-
 plugins/rbac/src/components/RolesList.tsx     |  21 +-
 .../rbac/src/components/RolesListColumns.tsx  |   5 +-
 plugins/rbac/src/components/Router.tsx        |  17 +
 plugins/rbac/src/components/index.ts          |   1 +
 plugins/rbac/src/hooks/useMembers.test.ts     | 230 ++++++++++++++
 plugins/rbac/src/hooks/useMembers.ts          |  99 ++++++
 .../src/hooks/usePermissionPolicies.test.ts   | 139 +++++++++
 .../rbac/src/hooks/usePermissionPolicies.ts   |  44 +++
 plugins/rbac/src/hooks/useRoles.test.ts       | 128 ++++++++
 plugins/rbac/src/hooks/useRoles.ts            |  41 +--
 plugins/rbac/src/plugin.ts                    |   5 +-
 plugins/rbac/src/routes.ts                    |   8 +-
 plugins/rbac/src/types.ts                     |  22 ++
 plugins/rbac/src/utils/rbac-utils.test.ts     | 152 ++++++++-
 plugins/rbac/src/utils/rbac-utils.ts          | 136 ++++++--
 yarn.lock                                     | 292 +++++++++++++++++-
 33 files changed, 2348 insertions(+), 157 deletions(-)
 create mode 100644 plugins/rbac/src/__fixtures__/mockMembers.ts
 create mode 100644 plugins/rbac/src/__fixtures__/mockPermissionPolicies.ts
 create mode 100644 plugins/rbac/src/__fixtures__/mockPolicies.ts
 create mode 100644 plugins/rbac/src/components/AboutCard.tsx
 create mode 100644 plugins/rbac/src/components/MembersCard.test.tsx
 create mode 100644 plugins/rbac/src/components/MembersCard.tsx
 create mode 100644 plugins/rbac/src/components/MembersListColumns.tsx
 create mode 100644 plugins/rbac/src/components/PermissionCard.test.tsx
 create mode 100644 plugins/rbac/src/components/PermissionsCard.tsx
 create mode 100644 plugins/rbac/src/components/PermissionsListColumns.tsx
 create mode 100644 plugins/rbac/src/components/RoleOverviewPage.tsx
 create mode 100644 plugins/rbac/src/components/Router.tsx
 create mode 100644 plugins/rbac/src/hooks/useMembers.test.ts
 create mode 100644 plugins/rbac/src/hooks/useMembers.ts
 create mode 100644 plugins/rbac/src/hooks/usePermissionPolicies.test.ts
 create mode 100644 plugins/rbac/src/hooks/usePermissionPolicies.ts
 create mode 100644 plugins/rbac/src/hooks/useRoles.test.ts

diff --git a/plugins/rbac-common/src/types.ts b/plugins/rbac-common/src/types.ts
index b406715920..b4fbba8272 100644
--- a/plugins/rbac-common/src/types.ts
+++ b/plugins/rbac-common/src/types.ts
@@ -17,3 +17,8 @@ export type UpdatePolicy = {
   oldPolicy: Policy;
   newPolicy: Policy;
 };
+
+export type PermissionPolicy = {
+  pluginId?: string;
+  policies?: Policy[];
+};
diff --git a/plugins/rbac/dev/index.tsx b/plugins/rbac/dev/index.tsx
index b8988a4fd9..397161caf3 100644
--- a/plugins/rbac/dev/index.tsx
+++ b/plugins/rbac/dev/index.tsx
@@ -7,10 +7,19 @@ import {
 } from '@backstage/plugin-permission-react';
 import { TestApiProvider } from '@backstage/test-utils';
 
-import { Role, RoleBasedPolicy } from '@janus-idp/backstage-plugin-rbac-common';
+import {
+  PermissionPolicy,
+  Policy,
+  Role,
+  RoleBasedPolicy,
+} from '@janus-idp/backstage-plugin-rbac-common';
 
+import { mockMembers } from '../src/__fixtures__/mockMembers';
+import { mockPermissionPolicies } from '../src/__fixtures__/mockPermissionPolicies';
+import { mockPolicies } from '../src/__fixtures__/mockPolicies';
 import { RBACAPI, rbacApiRef } from '../src/api/RBACBackendClient';
 import { RbacPage, rbacPlugin } from '../src/plugin';
+import { MemberEntity } from '../src/types';
 
 class MockPermissionApi implements PermissionApi {
   readonly result;
@@ -34,80 +43,7 @@ class MockRBACApi implements RBACAPI {
     return this.resources;
   }
   async getPolicies(): Promise<RoleBasedPolicy[]> {
-    return [
-      {
-        entityReference: 'role:default/guests',
-        permission: 'catalog-entity',
-        policy: 'read',
-        effect: 'deny',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'catalog.entity.create',
-        policy: 'use',
-        effect: 'deny',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'catalog-entity',
-        policy: 'read',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'catalog.entity.create',
-        policy: 'use',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'policy-entity',
-        policy: 'create',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'policy-entity',
-        policy: 'read',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'policy.entity.read',
-        policy: 'use',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/guests',
-        permission: 'policy-entity',
-        policy: 'delete',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/rbac_admin',
-        permission: 'policy-entity',
-        policy: 'read',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/rbac_admin',
-        permission: 'policy-entity',
-        policy: 'create',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/rbac_admin',
-        permission: 'policy-entity',
-        policy: 'delete',
-        effect: 'allow',
-      },
-      {
-        entityReference: 'role:default/rbac_admin',
-        permission: 'policy-entity',
-        policy: 'update',
-        effect: 'allow',
-      },
-    ];
+    return mockPolicies;
   }
 
   async getUserAuthorization(): Promise<{ status: string }> {
@@ -116,9 +52,30 @@ class MockRBACApi implements RBACAPI {
     };
   }
 
+  async getRole(role: string): Promise<Role[]> {
+    const roleresource = this.resources.find(res => res.name === role);
+    return roleresource ? [roleresource] : [];
+  }
+
   async deleteRole(_roleName: string): Promise<any> {
     return { status: 204 };
   }
+
+  async getMembers(): Promise<MemberEntity[]> {
+    return mockMembers;
+  }
+
+  async listPermissions(): Promise<PermissionPolicy[]> {
+    return mockPermissionPolicies;
+  }
+
+  async deletePolicy(
+    _entityRef: string,
+    _permission: string,
+    _policies: Policy[],
+  ): Promise<number> {
+    return 204;
+  }
 }
 
 const mockPermissionApi = new MockPermissionApi({ result: 'ALLOW' });
diff --git a/plugins/rbac/package.json b/plugins/rbac/package.json
index b6f267e92e..cd89c5aadc 100644
--- a/plugins/rbac/package.json
+++ b/plugins/rbac/package.json
@@ -28,6 +28,7 @@
     "@backstage/catalog-model": "^1.4.3",
     "@backstage/core-components": "^0.13.6",
     "@backstage/core-plugin-api": "^1.7.0",
+    "@backstage/plugin-catalog": "^1.15.1",
     "@backstage/plugin-permission-react": "^0.4.16",
     "@backstage/theme": "^0.4.3",
     "@janus-idp/backstage-plugin-rbac-common": "1.1.0",
@@ -36,10 +37,12 @@
     "@material-ui/lab": "^4.0.0-alpha.45",
     "@mui/icons-material": "5.14.11",
     "@mui/material": "^5.14.18",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0"
+    "react": "^16.13.1 || ^17.0.0",
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.23.0",
@@ -49,6 +52,7 @@
     "@janus-idp/cli": "1.4.6",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.1",
     "@types/node": "18.18.5",
     "msw": "1.3.2"
diff --git a/plugins/rbac/src/__fixtures__/mockMembers.ts b/plugins/rbac/src/__fixtures__/mockMembers.ts
new file mode 100644
index 0000000000..148c07f052
--- /dev/null
+++ b/plugins/rbac/src/__fixtures__/mockMembers.ts
@@ -0,0 +1,259 @@
+import { MemberEntity } from '../types';
+
+export const mockMembers: MemberEntity[] = [
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'team-d',
+      description: 'Team D',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'team',
+      profile: {
+        displayName: 'Team D',
+      },
+      parent: 'boxoffice',
+      children: [],
+    },
+    relations: [
+      {
+        type: 'childOf',
+        targetRef: 'group:default/boxoffice',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/eva.macdowell',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/lucy.sheehan',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'infrastructure',
+      description: 'The infra department',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'department',
+      parent: 'acme-corp',
+      children: ['backstage', 'boxoffice'],
+    },
+    relations: [],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'guest',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'User',
+    spec: {
+      profile: {
+        displayName: 'Guest User',
+      },
+      memberOf: ['team-a'],
+    },
+    relations: [
+      {
+        type: 'memberOf',
+        targetRef: 'group:default/team-a',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'janus-authors',
+      title: 'Janus-IDP Authors',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'team',
+      children: [],
+    },
+    relations: [],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'team-a',
+      description: 'Team A',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'team',
+      profile: {},
+      parent: 'backstage',
+      children: [],
+    },
+    relations: [
+      {
+        type: 'childOf',
+        targetRef: 'group:default/backstage',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/breanna.davison',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/guest',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/janelle.dawe',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/nigel.manning',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'backstage',
+      description: 'The backstage sub-department',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'sub-department',
+      profile: {
+        displayName: 'Backstage',
+      },
+      parent: 'infrastructure',
+      children: ['team-a', 'team-b'],
+    },
+    relations: [],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'team-b',
+      description: 'Team B',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'team',
+      profile: {
+        displayName: 'Team B',
+      },
+      parent: 'backstage',
+      children: [],
+    },
+    relations: [
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/amelia.park',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/colette.brock',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/jenny.doe',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/jonathon.page',
+      },
+      {
+        type: 'hasMember',
+        targetRef: 'user:default/justine.barrow',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'lucy.sheehan',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'User',
+    spec: {
+      profile: {
+        displayName: 'Lucy Sheehan',
+      },
+      memberOf: ['team-d'],
+    },
+    relations: [
+      {
+        type: 'memberOf',
+        targetRef: 'group:default/team-d',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'boxoffice',
+      description: 'The boxoffice sub-department',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Group',
+    spec: {
+      type: 'sub-department',
+      profile: {
+        displayName: 'Box Office',
+      },
+      parent: 'infrastructure',
+      children: ['team-c', 'team-d'],
+    },
+    relations: [
+      {
+        type: 'childOf',
+        targetRef: 'group:default/infrastructure',
+      },
+      {
+        type: 'parentOf',
+        targetRef: 'group:default/team-c',
+      },
+      {
+        type: 'parentOf',
+        targetRef: 'group:default/team-d',
+      },
+    ],
+  },
+  {
+    metadata: {
+      namespace: 'default',
+      annotations: {},
+      name: 'amelia.park',
+    },
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'User',
+    spec: {
+      profile: {
+        displayName: 'Amelia Park',
+      },
+      memberOf: ['team-b'],
+    },
+    relations: [
+      {
+        type: 'memberOf',
+        targetRef: 'group:default/team-b',
+      },
+    ],
+  },
+];
diff --git a/plugins/rbac/src/__fixtures__/mockPermissionPolicies.ts b/plugins/rbac/src/__fixtures__/mockPermissionPolicies.ts
new file mode 100644
index 0000000000..0165631213
--- /dev/null
+++ b/plugins/rbac/src/__fixtures__/mockPermissionPolicies.ts
@@ -0,0 +1,75 @@
+import { PermissionPolicy } from '@janus-idp/backstage-plugin-rbac-common';
+
+export const mockPermissionPolicies: PermissionPolicy[] = [
+  {
+    pluginId: 'catalog',
+    policies: [
+      {
+        permission: 'catalog-entity',
+        policy: 'read',
+      },
+      {
+        permission: 'catalog.entity.create',
+        policy: 'create',
+      },
+      {
+        permission: 'catalog-entity',
+        policy: 'delete',
+      },
+      {
+        permission: 'catalog-entity',
+        policy: 'update',
+      },
+      {
+        permission: 'catalog.location.read',
+        policy: 'read',
+      },
+      {
+        permission: 'catalog.location.create',
+        policy: 'create',
+      },
+      {
+        permission: 'catalog.location.delete',
+        policy: 'delete',
+      },
+    ],
+  },
+  {
+    pluginId: 'scaffolder',
+    policies: [
+      {
+        permission: 'scaffolder-template',
+        policy: 'read',
+      },
+      {
+        permission: 'scaffolder-template',
+        policy: 'read',
+      },
+      {
+        permission: 'scaffolder-action',
+        policy: 'use',
+      },
+    ],
+  },
+  {
+    pluginId: 'permission',
+    policies: [
+      {
+        permission: 'policy-entity',
+        policy: 'read',
+      },
+      {
+        permission: 'policy-entity',
+        policy: 'create',
+      },
+      {
+        permission: 'policy-entity',
+        policy: 'delete',
+      },
+      {
+        permission: 'policy-entity',
+        policy: 'update',
+      },
+    ],
+  },
+];
diff --git a/plugins/rbac/src/__fixtures__/mockPolicies.ts b/plugins/rbac/src/__fixtures__/mockPolicies.ts
new file mode 100644
index 0000000000..a1ce8896b1
--- /dev/null
+++ b/plugins/rbac/src/__fixtures__/mockPolicies.ts
@@ -0,0 +1,76 @@
+import { RoleBasedPolicy } from '@janus-idp/backstage-plugin-rbac-common';
+
+export const mockPolicies: RoleBasedPolicy[] = [
+  {
+    entityReference: 'role:default/guests',
+    permission: 'catalog-entity',
+    policy: 'read',
+    effect: 'deny',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'catalog.entity.create',
+    policy: 'use',
+    effect: 'deny',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'catalog-entity',
+    policy: 'read',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'catalog.entity.create',
+    policy: 'use',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'policy-entity',
+    policy: 'create',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'policy-entity',
+    policy: 'read',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'policy.entity.read',
+    policy: 'use',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/guests',
+    permission: 'policy-entity',
+    policy: 'delete',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/rbac_admin',
+    permission: 'policy-entity',
+    policy: 'read',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/rbac_admin',
+    permission: 'policy-entity',
+    policy: 'create',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/rbac_admin',
+    permission: 'policy-entity',
+    policy: 'delete',
+    effect: 'allow',
+  },
+  {
+    entityReference: 'role:default/rbac_admin',
+    permission: 'policy-entity',
+    policy: 'update',
+    effect: 'allow',
+  },
+];
diff --git a/plugins/rbac/src/api/RBACBackendClient.ts b/plugins/rbac/src/api/RBACBackendClient.ts
index 508e8b1119..be5ca7d045 100644
--- a/plugins/rbac/src/api/RBACBackendClient.ts
+++ b/plugins/rbac/src/api/RBACBackendClient.ts
@@ -4,14 +4,24 @@ import {
   IdentityApi,
 } from '@backstage/core-plugin-api';
 
-import { Role, RoleBasedPolicy } from '@janus-idp/backstage-plugin-rbac-common';
+import {
+  PermissionPolicy,
+  Role,
+  RoleBasedPolicy,
+} from '@janus-idp/backstage-plugin-rbac-common';
+
+import { MemberEntity } from '../types';
+import { getKindNamespaceName } from '../utils/rbac-utils';
 
 // @public
 export type RBACAPI = {
   getUserAuthorization: () => Promise<{ status: string }>;
   getRoles: () => Promise<Role[]>;
-  getPolicies: () => Promise<RoleBasedPolicy[]>;
+  getPolicies: () => Promise<RoleBasedPolicy[] | Response>;
   deleteRole: (role: string) => Promise<Response>;
+  getRole: (role: string) => Promise<Role[]>;
+  getMembers: () => Promise<MemberEntity[]>;
+  listPermissions: () => Promise<PermissionPolicy[]>;
 };
 
 export type Options = {
@@ -64,27 +74,78 @@ export class RBACBackendClient implements RBACAPI {
         ...(idToken && { Authorization: `Bearer ${idToken}` }),
       },
     });
+    if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
+      return jsonResponse;
+    }
     return jsonResponse.json();
   }
 
   async deleteRole(role: string) {
     const { token: idToken } = await this.identityApi.getCredentials();
     const backendUrl = this.configApi.getString('backend.baseUrl');
-    const str = role.split(':');
-    const kind = str[0];
-    const namespace = str[1].split('/')[0];
-    const name = str[1].split('/')[1];
+    const { kind, namespace, name } = getKindNamespaceName(role);
     const jsonResponse = await fetch(
       `${backendUrl}/api/permission/roles/${kind}/${namespace}/${name}`,
       {
         headers: {
           ...(idToken && { Authorization: `Bearer ${idToken}` }),
           'Content-Type': 'application/json',
-          Accept: 'application/json',
         },
         method: 'DELETE',
       },
     );
     return jsonResponse;
   }
+
+  async getRole(role: string) {
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const backendUrl = this.configApi.getString('backend.baseUrl');
+    const { kind, namespace, name } = getKindNamespaceName(role);
+    const jsonResponse = await fetch(
+      `${backendUrl}/api/permission/roles/${kind}/${namespace}/${name}`,
+      {
+        headers: {
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
+      return jsonResponse;
+    }
+    return jsonResponse.json();
+  }
+
+  async getMembers() {
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const backendUrl = this.configApi.getString('backend.baseUrl');
+    const jsonResponse = await fetch(
+      `${backendUrl}/api/catalog/entities?filter=kind=user&filter=kind=group`,
+      {
+        headers: {
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    if (jsonResponse.status !== 200 && jsonResponse.status !== 204) {
+      return jsonResponse;
+    }
+    return jsonResponse.json();
+  }
+
+  async listPermissions() {
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const backendUrl = this.configApi.getString('backend.baseUrl');
+    const jsonResponse = await fetch(
+      `${backendUrl}/api/permission/plugins/policies`,
+      {
+        headers: {
+          ...(idToken && { Authorization: `Bearer ${idToken}` }),
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    return jsonResponse.json();
+  }
 }
diff --git a/plugins/rbac/src/components/AboutCard.tsx b/plugins/rbac/src/components/AboutCard.tsx
new file mode 100644
index 0000000000..ab7997c20f
--- /dev/null
+++ b/plugins/rbac/src/components/AboutCard.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { MarkdownContent } from '@backstage/core-components';
+import { AboutField } from '@backstage/plugin-catalog';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  makeStyles,
+} from '@material-ui/core';
+
+const useStyles = makeStyles({
+  gridItemCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'calc(100% - 10px)', // for pages without content header
+    marginBottom: '10px',
+  },
+  fullHeightCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+  },
+  gridItemCardContent: {
+    flex: 1,
+  },
+  fullHeightCardContent: {
+    flex: 1,
+  },
+  text: {
+    wordBreak: 'break-word',
+  },
+});
+
+export const AboutCard = () => {
+  const classes = useStyles();
+  const cardClass = classes.gridItemCard;
+  const cardContentClass = classes.gridItemCardContent;
+
+  return (
+    <Card className={cardClass}>
+      <CardHeader title="About" />
+      <CardContent className={cardContentClass}>
+        <Grid container>
+          <AboutField label="Description" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>
+            <MarkdownContent
+              className={classes.text}
+              content="No description"
+            />
+          </AboutField>
+          <AboutField label="Modified By" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>
+            <MarkdownContent
+              className={classes.text}
+              content="No information"
+            />
+          </AboutField>
+          <AboutField label="Last Modified" gridSizes={{ xs: 4, sm: 8, lg: 4 }}>
+            <MarkdownContent
+              className={classes.text}
+              content="No information"
+            />
+          </AboutField>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/plugins/rbac/src/components/DeleteRoleDialog.tsx b/plugins/rbac/src/components/DeleteRoleDialog.tsx
index 99f20e75ad..f046a54548 100644
--- a/plugins/rbac/src/components/DeleteRoleDialog.tsx
+++ b/plugins/rbac/src/components/DeleteRoleDialog.tsx
@@ -133,9 +133,8 @@ const DeleteRoleDialog = ({
         >{`${propOptions.permissions} permission policies`}</span>{' '}
         specified in this role.
         <br />
-        <br />
-        <br />
         <TextField
+          style={{ marginTop: '24px' }}
           required
           data-testid="delete-name"
           variant="outlined"
@@ -156,6 +155,7 @@ const DeleteRoleDialog = ({
           paddingLeft: '25px',
           paddingBottom: '30px',
           justifyContent: 'left',
+          paddingTop: '16px',
         }}
       >
         <Button
diff --git a/plugins/rbac/src/components/MembersCard.test.tsx b/plugins/rbac/src/components/MembersCard.test.tsx
new file mode 100644
index 0000000000..f478e057b0
--- /dev/null
+++ b/plugins/rbac/src/components/MembersCard.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+import { renderInTestApp } from '@backstage/test-utils';
+
+import { useMembers } from '../hooks/useMembers';
+import { MembersData } from '../types';
+import { MembersCard } from './MembersCard';
+
+jest.mock('../hooks/useMembers', () => ({
+  useMembers: jest.fn(),
+}));
+
+const useMembersMockData: MembersData[] = [
+  {
+    name: 'Amelia Park',
+    type: 'User',
+    ref: {
+      namespace: 'default',
+      kind: 'user',
+      name: 'amelia.park',
+    },
+    members: 0,
+  },
+  {
+    name: 'Calum Leavy',
+    type: 'User',
+    ref: {
+      namespace: 'default',
+      kind: 'user',
+      name: 'calum.leavy',
+    },
+    members: 0,
+  },
+  {
+    name: 'Team B',
+    type: 'Group',
+    ref: {
+      namespace: 'default',
+      kind: 'group',
+      name: 'team-b',
+    },
+    members: 5,
+  },
+  {
+    name: 'Team C',
+    type: 'Group',
+    ref: {
+      namespace: 'default',
+      kind: 'group',
+      name: 'team-c',
+    },
+    members: 5,
+  },
+];
+
+const mockMembers = useMembers as jest.MockedFunction<typeof useMembers>;
+
+describe('MembersCard', () => {
+  it('should show list of Users and groups associated with the role when the data is loaded', async () => {
+    mockMembers.mockReturnValue({
+      loading: false,
+      data: useMembersMockData,
+      error: undefined,
+      retry: () => {},
+    });
+    const { queryByText } = await renderInTestApp(
+      <MembersCard roleName="role:default/rbac_admin" />,
+    );
+    expect(queryByText('Users and groups (2 Users, 2 Groups)')).not.toBeNull();
+    expect(queryByText('Calum Leavy')).not.toBeNull();
+    expect(queryByText('Amelia Park')).not.toBeNull();
+    expect(queryByText('Team B')).not.toBeNull();
+  });
+
+  it('should show empty table when there are no users and groups', async () => {
+    mockMembers.mockReturnValue({
+      loading: false,
+      data: [],
+      error: undefined,
+      retry: () => {},
+    });
+    const { queryByText } = await renderInTestApp(
+      <MembersCard roleName="role:default/rbac_admin" />,
+    );
+    expect(queryByText('Users and groups')).not.toBeNull();
+    expect(queryByText('No users and groups found')).not.toBeNull();
+  });
+
+  it('should show an error if api call fails', async () => {
+    mockMembers.mockReturnValue({
+      loading: false,
+      data: [],
+      error: { message: 'xyz' },
+      retry: () => {},
+    });
+    const { queryByText } = await renderInTestApp(
+      <MembersCard roleName="role:default/rbac_admin" />,
+    );
+    expect(
+      queryByText(
+        'Error: Something went wrong while fetching the users and groups',
+      ),
+    ).not.toBeNull();
+
+    expect(queryByText('No users and groups found')).not.toBeNull();
+  });
+});
diff --git a/plugins/rbac/src/components/MembersCard.tsx b/plugins/rbac/src/components/MembersCard.tsx
new file mode 100644
index 0000000000..f6c105374d
--- /dev/null
+++ b/plugins/rbac/src/components/MembersCard.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Table, WarningPanel } from '@backstage/core-components';
+
+import { Card, CardContent, makeStyles } from '@material-ui/core';
+import CachedIcon from '@material-ui/icons/Cached';
+import { get } from 'lodash';
+
+import { useMembers } from '../hooks/useMembers';
+import { MembersData } from '../types';
+import { getMembers } from '../utils/rbac-utils';
+import { columns } from './MembersListColumns';
+
+type MembersCardProps = {
+  roleName: string;
+};
+
+const useStyles = makeStyles(theme => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
+
+const getRefreshIcon = () => <CachedIcon />;
+
+export const MembersCard = ({ roleName }: MembersCardProps) => {
+  const { data, loading, retry, error } = useMembers(roleName);
+  const [members, setMembers] = React.useState<MembersData[]>();
+
+  const classes = useStyles();
+
+  const onSearchResultsChange = (searchResults: MembersData[]) => {
+    setMembers(searchResults);
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        {!loading && error && (
+          <div style={{ paddingBottom: '16px' }}>
+            <WarningPanel
+              message={
+                get(error, 'statusText') ||
+                get(error, 'message') ||
+                get(error, 'name')
+              }
+              title="Something went wrong while fetching the users and groups"
+              severity="error"
+            />
+          </div>
+        )}
+        <Table
+          title={
+            !loading && data?.length
+              ? `Users and groups (${getMembers(members || data)})`
+              : 'Users and groups'
+          }
+          renderSummaryRow={summary => onSearchResultsChange(summary.data)}
+          actions={[
+            {
+              icon: getRefreshIcon,
+              tooltip: 'Refresh',
+              isFreeAction: true,
+              onClick: () => retry(),
+            },
+          ]}
+          options={{ padding: 'default', search: true, paging: true }}
+          data={data ?? []}
+          isLoading={loading}
+          columns={columns}
+          emptyContent={
+            <div data-testid="members-table-empty" className={classes.empty}>
+              No users and groups found
+            </div>
+          }
+        />
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/plugins/rbac/src/components/MembersListColumns.tsx b/plugins/rbac/src/components/MembersListColumns.tsx
new file mode 100644
index 0000000000..4fbef72c33
--- /dev/null
+++ b/plugins/rbac/src/components/MembersListColumns.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Link, TableColumn } from '@backstage/core-components';
+
+import { MembersData } from '../types';
+
+export const columns: TableColumn<MembersData>[] = [
+  {
+    title: 'Name',
+    field: 'name',
+    type: 'string',
+    render: props => {
+      return (
+        <Link
+          to={`/catalog/${props.ref.namespace}/${props.ref.kind}/${props.ref.name}`}
+        >
+          {props.name}
+        </Link>
+      );
+    },
+  },
+  {
+    title: 'Type',
+    field: 'type',
+    type: 'string',
+  },
+  {
+    title: 'Members',
+    field: 'members',
+    type: 'numeric',
+    align: 'left',
+    render: (props: MembersData) => {
+      return props.type === 'User' ? '-' : props.members;
+    },
+    customSort: (a, b) => {
+      if (a.members === 0) {
+        return -1;
+      }
+      if (b.members === 0) {
+        return 1;
+      }
+      if (a.members === b.members) {
+        return 0;
+      }
+      return a.members < b.members ? -1 : 1;
+    },
+  },
+];
diff --git a/plugins/rbac/src/components/PermissionCard.test.tsx b/plugins/rbac/src/components/PermissionCard.test.tsx
new file mode 100644
index 0000000000..1cc1612d8e
--- /dev/null
+++ b/plugins/rbac/src/components/PermissionCard.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { renderInTestApp } from '@backstage/test-utils';
+
+import { usePermissionPolicies } from '../hooks/usePermissionPolicies';
+import { PermissionsData } from '../types';
+import { PermissionsCard } from './PermissionsCard';
+
+jest.mock('../hooks/usePermissionPolicies', () => ({
+  usePermissionPolicies: jest.fn(),
+}));
+
+const usePermissionPoliciesMockData: PermissionsData[] = [
+  {
+    permission: 'policy-entity',
+    plugin: 'permission',
+    policyString: new Set(['read', ', create', ', delete']),
+    policies: new Set([
+      {
+        policy: 'read',
+        effect: 'allow',
+      },
+      {
+        policy: 'create',
+        effect: 'allow',
+      },
+      {
+        policy: 'delete',
+        effect: 'allow',
+      },
+    ]),
+  },
+];
+
+const mockPermissionPolicies = usePermissionPolicies as jest.MockedFunction<
+  typeof usePermissionPolicies
+>;
+
+describe('PermissionsCard', () => {
+  it('should show list of Permission Policies when the data is loaded', async () => {
+    mockPermissionPolicies.mockReturnValue({
+      loading: false,
+      data: usePermissionPoliciesMockData,
+      retry: () => {},
+      error: undefined,
+    });
+    const { queryByText } = await renderInTestApp(
+      <PermissionsCard entityReference="user:default/debsmita1" />,
+    );
+    expect(queryByText('Permission Policies (3)')).not.toBeNull();
+    expect(queryByText('read, create, delete')).not.toBeNull();
+  });
+
+  it('should show empty table when there are no permission policies', async () => {
+    mockPermissionPolicies.mockReturnValue({
+      loading: false,
+      data: [],
+      retry: () => {},
+      error: undefined,
+    });
+    const { queryByText } = await renderInTestApp(
+      <PermissionsCard entityReference="user:default/debsmita1" />,
+    );
+    expect(queryByText('Permission Policies')).not.toBeNull();
+    expect(queryByText('No permissions policies found')).not.toBeNull();
+  });
+  it('should show an error if api call fails', async () => {
+    mockPermissionPolicies.mockReturnValue({
+      loading: false,
+      data: [],
+      retry: () => {},
+      error: { message: '404', name: 'Not Found' },
+    });
+    const { queryByText } = await renderInTestApp(
+      <PermissionsCard entityReference="user:default/debsmita1" />,
+    );
+    expect(
+      queryByText(
+        'Error: Something went wrong while fetching the permission policies',
+      ),
+    ).not.toBeNull();
+
+    expect(queryByText('No permissions policies found')).not.toBeNull();
+  });
+});
diff --git a/plugins/rbac/src/components/PermissionsCard.tsx b/plugins/rbac/src/components/PermissionsCard.tsx
new file mode 100644
index 0000000000..0b93b8c5ee
--- /dev/null
+++ b/plugins/rbac/src/components/PermissionsCard.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Table, WarningPanel } from '@backstage/core-components';
+
+import { Card, CardContent, makeStyles } from '@material-ui/core';
+import CachedIcon from '@material-ui/icons/Cached';
+import { get } from 'lodash';
+
+import { usePermissionPolicies } from '../hooks/usePermissionPolicies';
+import { PermissionsData } from '../types';
+import { columns } from './PermissionsListColumns';
+
+const useStyles = makeStyles(theme => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
+
+type PermissionsCardProps = {
+  entityReference: string;
+};
+
+const getRefreshIcon = () => <CachedIcon />;
+
+export const PermissionsCard = ({ entityReference }: PermissionsCardProps) => {
+  const { data, loading, retry, error } =
+    usePermissionPolicies(entityReference);
+  const [permissions, setPermissions] = React.useState<PermissionsData[]>();
+
+  const classes = useStyles();
+
+  const onSearchResultsChange = (searchResults: PermissionsData[]) => {
+    setPermissions(searchResults);
+  };
+
+  let numberOfPolicies = 0;
+  (permissions || data)?.forEach(p => {
+    numberOfPolicies = numberOfPolicies + p.policies.size;
+  });
+
+  return (
+    <Card>
+      <CardContent>
+        {error && (
+          <div style={{ paddingBottom: '16px' }}>
+            <WarningPanel
+              message={
+                get(error, 'statusText') ||
+                get(error, 'message') ||
+                get(error, 'name')
+              }
+              title="Something went wrong while fetching the permission policies"
+              severity="error"
+            />
+          </div>
+        )}
+        <Table
+          title={
+            !loading && data?.length
+              ? `Permission Policies (${numberOfPolicies})`
+              : 'Permission Policies'
+          }
+          renderSummaryRow={summary => onSearchResultsChange(summary.data)}
+          actions={[
+            {
+              icon: getRefreshIcon,
+              tooltip: 'Refresh',
+              isFreeAction: true,
+              onClick: () => retry(),
+            },
+          ]}
+          options={{ padding: 'default', search: true, paging: true }}
+          data={data ?? []}
+          columns={columns}
+          isLoading={loading}
+          emptyContent={
+            <div data-testid="permission-table-empty" className={classes.empty}>
+              No permissions policies found
+            </div>
+          }
+        />
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/plugins/rbac/src/components/PermissionsListColumns.tsx b/plugins/rbac/src/components/PermissionsListColumns.tsx
new file mode 100644
index 0000000000..8e2f09aa93
--- /dev/null
+++ b/plugins/rbac/src/components/PermissionsListColumns.tsx
@@ -0,0 +1,33 @@
+import { TableColumn } from '@backstage/core-components';
+
+import { PermissionsData } from '../types';
+
+export const columns: TableColumn<PermissionsData>[] = [
+  {
+    title: 'Plugin',
+    field: 'plugin',
+    type: 'string',
+  },
+  {
+    title: 'Permission',
+    field: 'permission',
+    type: 'string',
+  },
+  {
+    title: 'Policies',
+    field: 'policyString',
+    type: 'string',
+    customSort: (a, b) => {
+      if (a.policies.size === 0) {
+        return -1;
+      }
+      if (b.policies.size === 0) {
+        return 1;
+      }
+      if (a.policies.size === b.policies.size) {
+        return 0;
+      }
+      return a.policies.size < b.policies.size ? -1 : 1;
+    },
+  },
+];
diff --git a/plugins/rbac/src/components/RoleOverviewPage.tsx b/plugins/rbac/src/components/RoleOverviewPage.tsx
new file mode 100644
index 0000000000..c141c9f812
--- /dev/null
+++ b/plugins/rbac/src/components/RoleOverviewPage.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Header, Page, TabbedLayout } from '@backstage/core-components';
+
+import { Grid } from '@material-ui/core';
+
+import { AboutCard } from './AboutCard';
+import { MembersCard } from './MembersCard';
+import { PermissionsCard } from './PermissionsCard';
+
+export const RoleOverviewPage = () => {
+  const { roleName, roleKind } = useParams();
+
+  return (
+    <Page themeId="tool">
+      <Header title={`${roleKind}/${roleName}`} type="RBAC" typeLink="/rbac" />
+      <TabbedLayout>
+        <TabbedLayout.Route path="" title="Overview">
+          <Grid container direction="row">
+            <Grid item lg={12} xs={12}>
+              <AboutCard />
+            </Grid>
+            <Grid item lg={6} xs={12}>
+              <MembersCard roleName={`${roleKind}/${roleName}`} />
+            </Grid>
+            <Grid item lg={6} xs={12}>
+              <PermissionsCard entityReference={`${roleKind}/${roleName}`} />
+            </Grid>
+          </Grid>
+        </TabbedLayout.Route>
+      </TabbedLayout>
+    </Page>
+  );
+};
diff --git a/plugins/rbac/src/components/RolesList.test.tsx b/plugins/rbac/src/components/RolesList.test.tsx
index 5c79ae600e..7bd7caeae6 100644
--- a/plugins/rbac/src/components/RolesList.test.tsx
+++ b/plugins/rbac/src/components/RolesList.test.tsx
@@ -51,14 +51,6 @@ const RequirePermissionMock = RequirePermission as jest.MockedFunction<
 >;
 
 describe('RolesList', () => {
-  it('should show Progress when roles are still loading', async () => {
-    RequirePermissionMock.mockImplementation(props => <>{props.children}</>);
-    mockUsePermission.mockReturnValue({ loading: false, allowed: true });
-    mockUseRoles.mockReturnValue({ loading: true, data: [], retry: () => {} });
-    const { getByTestId } = await renderInTestApp(<RolesList />);
-    expect(getByTestId('roles-progress')).not.toBeNull();
-  });
-
   it('should show list of roles when the roles are loaded', async () => {
     RequirePermissionMock.mockImplementation(props => <>{props.children}</>);
     mockUsePermission.mockReturnValue({ loading: false, allowed: true });
@@ -74,7 +66,7 @@ describe('RolesList', () => {
     expect(queryByText('1 User, 1 Group')).not.toBeNull();
   });
 
-  it('should show empty state when there are no roles', async () => {
+  it('should show empty table when there are no roles', async () => {
     RequirePermissionMock.mockImplementation(props => <>{props.children}</>);
     mockUsePermission.mockReturnValue({ loading: false, allowed: true });
     mockUseRoles.mockReturnValue({ loading: false, data: [], retry: () => {} });
diff --git a/plugins/rbac/src/components/RolesList.tsx b/plugins/rbac/src/components/RolesList.tsx
index 6430b4bd26..4fd52dc04a 100644
--- a/plugins/rbac/src/components/RolesList.tsx
+++ b/plugins/rbac/src/components/RolesList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Progress, Table } from '@backstage/core-components';
+import { Table } from '@backstage/core-components';
 
 import { makeStyles } from '@material-ui/core';
 import Alert from '@mui/material/Alert';
@@ -34,14 +34,6 @@ export const RolesList = () => {
     retry();
   };
 
-  if (loading) {
-    return (
-      <div data-testid="roles-progress">
-        <Progress />
-      </div>
-    );
-  }
-
   const onAlertClose = () => {
     setToastMessage('');
   };
@@ -70,16 +62,19 @@ export const RolesList = () => {
         </Alert>
       </Snackbar>
       <Table
-        title={`All roles (${
-          data.length ? roles ?? data.length : data.length
-        })`}
+        title={
+          !loading && data?.length
+            ? `All roles (${roles ?? data.length})`
+            : `All roles`
+        }
         options={{ padding: 'default', search: true, paging: true }}
         data={data}
+        isLoading={loading}
         columns={columns}
         renderSummaryRow={summary => onSearchResultsChange(summary.data)}
         emptyContent={
           <div data-testid="roles-table-empty" className={classes.empty}>
-            No roles found&nbsp;
+            No roles found
           </div>
         }
       />
diff --git a/plugins/rbac/src/components/RolesListColumns.tsx b/plugins/rbac/src/components/RolesListColumns.tsx
index 7f3dc4a80d..840950054e 100644
--- a/plugins/rbac/src/components/RolesListColumns.tsx
+++ b/plugins/rbac/src/components/RolesListColumns.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TableColumn } from '@backstage/core-components';
+import { Link, TableColumn } from '@backstage/core-components';
 
 import { RolesData } from '../types';
 import { getMembers } from '../utils/rbac-utils';
@@ -11,6 +11,9 @@ export const columns: TableColumn<RolesData>[] = [
     title: 'Name',
     field: 'name',
     type: 'string',
+    render: (props: RolesData) => (
+      <Link to={`roles/${props.name}`}>{props.name}</Link>
+    ),
   },
   {
     title: 'Users and groups',
diff --git a/plugins/rbac/src/components/Router.tsx b/plugins/rbac/src/components/Router.tsx
new file mode 100644
index 0000000000..ddbe95405d
--- /dev/null
+++ b/plugins/rbac/src/components/Router.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { roleRouteRef } from '../routes';
+import { RbacPage } from './RbacPage';
+import { RoleOverviewPage } from './RoleOverviewPage';
+
+/**
+ *
+ * @public
+ */
+export const Router = () => (
+  <Routes>
+    <Route path="/" element={<RbacPage />} />
+    <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />
+  </Routes>
+);
diff --git a/plugins/rbac/src/components/index.ts b/plugins/rbac/src/components/index.ts
index 4cdc014f03..2709678092 100644
--- a/plugins/rbac/src/components/index.ts
+++ b/plugins/rbac/src/components/index.ts
@@ -1,2 +1,3 @@
 export { RbacPage } from './RbacPage';
 export { Administration } from './Administration';
+export { RoleOverviewPage } from './RoleOverviewPage';
diff --git a/plugins/rbac/src/hooks/useMembers.test.ts b/plugins/rbac/src/hooks/useMembers.test.ts
new file mode 100644
index 0000000000..6953b34db3
--- /dev/null
+++ b/plugins/rbac/src/hooks/useMembers.test.ts
@@ -0,0 +1,230 @@
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useMembers } from './useMembers';
+
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn().mockReturnValue({
+    getRole: jest.fn().mockReturnValue([
+      {
+        memberReferences: [
+          'group:default/admins',
+          'user:default/amelia.park',
+          'user:default/calum.leavy',
+          'group:default/team-b',
+          'group:default/team-c',
+        ],
+        name: 'role:default/rbac_admin',
+      },
+    ]),
+    getMembers: jest.fn().mockReturnValue([
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'janus-authors',
+          title: 'Janus-IDP Authors',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        spec: {
+          type: 'team',
+          children: [],
+        },
+        relations: [
+          {
+            type: 'ownerOf',
+            targetRef: 'component:default/backstage-showcase',
+            target: {
+              kind: 'component',
+              namespace: 'default',
+              name: 'backstage-showcase',
+            },
+          },
+        ],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'team-a',
+          description: 'Team A',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        spec: {
+          type: 'team',
+          profile: {},
+          parent: 'backstage',
+          children: [],
+        },
+        relations: [
+          {
+            type: 'hasMember',
+            targetRef: 'user:default/breanna.davison',
+            target: {
+              kind: 'user',
+              namespace: 'default',
+              name: 'breanna.davison',
+            },
+          },
+          {
+            type: 'hasMember',
+            targetRef: 'user:default/guest',
+            target: {
+              kind: 'user',
+              namespace: 'default',
+              name: 'guest',
+            },
+          },
+        ],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'amelia.park',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'User',
+        spec: {
+          profile: {
+            displayName: 'Amelia Park',
+          },
+          memberOf: ['team-b'],
+        },
+        relations: [
+          {
+            type: 'memberOf',
+            targetRef: 'group:default/team-b',
+            target: {
+              kind: 'group',
+              namespace: 'default',
+              name: 'team-b',
+            },
+          },
+        ],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'acme-corp',
+          description: 'The acme-corp organization',
+          links: [],
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        spec: {
+          type: 'organization',
+          profile: {
+            displayName: 'ACME Corp',
+          },
+          children: ['infrastructure'],
+        },
+        relations: [],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'guest',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'User',
+        spec: {
+          profile: {
+            displayName: 'Guest User',
+          },
+          memberOf: ['team-a'],
+        },
+        relations: [
+          {
+            type: 'memberOf',
+            targetRef: 'group:default/team-a',
+            target: {
+              kind: 'group',
+              namespace: 'default',
+              name: 'team-a',
+            },
+          },
+        ],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'jenny.doe',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'User',
+        spec: {
+          profile: {
+            displayName: 'Jenny Doe',
+          },
+          memberOf: ['team-b'],
+        },
+        relations: [
+          {
+            type: 'memberOf',
+            targetRef: 'group:default/team-b',
+            target: {
+              kind: 'group',
+              namespace: 'default',
+              name: 'team-b',
+            },
+          },
+        ],
+      },
+      {
+        metadata: {
+          namespace: 'default',
+          annotations: {},
+          name: 'team-c',
+          description: 'Team C',
+        },
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'Group',
+        spec: {
+          type: 'team',
+          profile: {
+            displayName: 'Team C',
+          },
+          parent: 'boxoffice',
+          children: [],
+        },
+        relations: [
+          {
+            type: 'hasMember',
+            targetRef: 'user:default/calum.leavy',
+            target: {
+              kind: 'user',
+              namespace: 'default',
+              name: 'calum.leavy',
+            },
+          },
+          {
+            type: 'hasMember',
+            targetRef: 'user:default/frank.tiernan',
+            target: {
+              kind: 'user',
+              namespace: 'default',
+              name: 'frank.tiernan',
+            },
+          },
+        ],
+      },
+    ]),
+  }),
+}));
+
+describe('useMembers', () => {
+  it('should return members', async () => {
+    const { result } = renderHook(() => useMembers('role:default/rbac_admin'));
+    await waitFor(() => {
+      expect(result.current.loading).toBeFalsy();
+      expect(result.current.data).toHaveLength(5);
+    });
+  });
+});
diff --git a/plugins/rbac/src/hooks/useMembers.ts b/plugins/rbac/src/hooks/useMembers.ts
new file mode 100644
index 0000000000..f9580ecb0d
--- /dev/null
+++ b/plugins/rbac/src/hooks/useMembers.ts
@@ -0,0 +1,99 @@
+import React from 'react';
+import { useAsync, useAsyncRetry } from 'react-use';
+
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { useApi } from '@backstage/core-plugin-api';
+
+import { get } from 'lodash';
+
+import { rbacApiRef } from '../api/RBACBackendClient';
+import { MembersData } from '../types';
+import { getKindNamespaceName, getMembersFromGroup } from '../utils/rbac-utils';
+
+const getErrorText = (
+  role: any,
+  members: any,
+): { message: string } | undefined => {
+  if (!Array.isArray(role) && get(role, 'statusText')) {
+    return {
+      message: `Unable to fetch role: ${get(role, 'statusText')}`,
+    };
+  } else if (!Array.isArray(members) && get(members, 'statusText')) {
+    return {
+      message: `Unable to fetch members: ${get(members, 'statusText')}`,
+    };
+  }
+  return undefined;
+};
+
+export const useMembers = (roleName: string) => {
+  const rbacApi = useApi(rbacApiRef);
+  let data: MembersData[] = [];
+  const {
+    loading: rolesLoading,
+    value: role,
+    retry,
+    error: roleError,
+  } = useAsyncRetry(async () => {
+    return await rbacApi.getRole(roleName);
+  });
+
+  const {
+    loading: membersLoading,
+    value: members,
+    error: membersError,
+  } = useAsync(async () => {
+    return await rbacApi.getMembers();
+  });
+
+  const loading = rolesLoading && membersLoading;
+
+  data = React.useMemo(
+    () =>
+      Array.isArray(role)
+        ? role[0].memberReferences.reduce((acc: MembersData[], ref) => {
+            const memberResource =
+              Array.isArray(members) &&
+              members.find(member => stringifyEntityRef(member) === ref);
+            if (memberResource) {
+              acc.push({
+                name:
+                  memberResource.spec.profile?.displayName ??
+                  memberResource.metadata.name,
+                type: memberResource.kind,
+                ref: {
+                  namespace: memberResource.metadata.namespace as string,
+                  kind: memberResource.kind.toLowerCase(),
+                  name: memberResource.metadata.name,
+                },
+                members:
+                  memberResource.kind === 'Group'
+                    ? getMembersFromGroup(memberResource)
+                    : 0,
+              });
+            } else {
+              const { kind, namespace, name } = getKindNamespaceName(ref);
+              acc.push({
+                name,
+                type: kind === 'user' ? 'User' : 'Group',
+                ref: {
+                  namespace,
+                  kind,
+                  name,
+                },
+                members: 0,
+              });
+            }
+            return acc;
+          }, [])
+        : [],
+    [role, members],
+  );
+
+  return {
+    loading,
+    data,
+    retry,
+    error: getErrorText(role, members) || roleError || membersError,
+  };
+};
diff --git a/plugins/rbac/src/hooks/usePermissionPolicies.test.ts b/plugins/rbac/src/hooks/usePermissionPolicies.test.ts
new file mode 100644
index 0000000000..8fadaea89c
--- /dev/null
+++ b/plugins/rbac/src/hooks/usePermissionPolicies.test.ts
@@ -0,0 +1,139 @@
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { usePermissionPolicies } from './usePermissionPolicies';
+
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn().mockReturnValue({
+    getPolicies: jest.fn().mockReturnValue([
+      {
+        entityReference: 'role:default/guests',
+        permission: 'catalog-entity',
+        policy: 'read',
+        effect: 'deny',
+      },
+      {
+        entityReference: 'role:default/guests',
+        permission: 'catalog.entity.create',
+        policy: 'use',
+        effect: 'deny',
+      },
+      {
+        entityReference: 'role:default/rbac_admin',
+        permission: 'policy-entity',
+        policy: 'read',
+        effect: 'allow',
+      },
+      {
+        entityReference: 'role:default/rbac_admin',
+        permission: 'policy-entity',
+        policy: 'create',
+        effect: 'allow',
+      },
+      {
+        entityReference: 'role:default/rbac_admin',
+        permission: 'policy-entity',
+        policy: 'delete',
+        effect: 'allow',
+      },
+      {
+        entityReference: 'role:default/rbac_admin',
+        permission: 'catalog-entity',
+        policy: 'read',
+        effect: 'allow',
+      },
+      {
+        entityReference: 'role:default/rbac_admin',
+        permission: 'catalog.entity.create',
+        policy: 'use',
+        effect: 'allow',
+      },
+    ]),
+    listPermissions: jest.fn().mockReturnValue([
+      {
+        pluginId: 'catalog',
+        policies: [
+          {
+            permission: 'catalog-entity',
+            policy: 'read',
+          },
+          {
+            permission: 'catalog.entity.create',
+            policy: 'create',
+          },
+          {
+            permission: 'catalog-entity',
+            policy: 'delete',
+          },
+          {
+            permission: 'catalog-entity',
+            policy: 'update',
+          },
+          {
+            permission: 'catalog.location.read',
+            policy: 'read',
+          },
+          {
+            permission: 'catalog.location.create',
+            policy: 'create',
+          },
+          {
+            permission: 'catalog.location.delete',
+            policy: 'delete',
+          },
+        ],
+      },
+      {
+        pluginId: 'scaffolder',
+        policies: [
+          {
+            permission: 'scaffolder-template',
+            policy: 'read',
+          },
+          {
+            permission: 'scaffolder-template',
+            policy: 'read',
+          },
+          {
+            permission: 'scaffolder-action',
+            policy: 'use',
+          },
+        ],
+      },
+      {
+        pluginId: 'permission',
+        policies: [
+          {
+            permission: 'policy-entity',
+            policy: 'read',
+          },
+          {
+            permission: 'policy-entity',
+            policy: 'create',
+          },
+          {
+            permission: 'policy-entity',
+            policy: 'delete',
+          },
+          {
+            permission: 'policy-entity',
+            policy: 'update',
+          },
+        ],
+      },
+    ]),
+  }),
+}));
+
+describe('usePermissionPolicies', () => {
+  it('should return permission policies', async () => {
+    const { result } = renderHook(() =>
+      usePermissionPolicies('role:default/rbac_admin'),
+    );
+    await waitFor(() => {
+      expect(result.current.loading).toBeFalsy();
+      expect(result.current.data).toHaveLength(3);
+    });
+  });
+});
diff --git a/plugins/rbac/src/hooks/usePermissionPolicies.ts b/plugins/rbac/src/hooks/usePermissionPolicies.ts
new file mode 100644
index 0000000000..d88cb5e005
--- /dev/null
+++ b/plugins/rbac/src/hooks/usePermissionPolicies.ts
@@ -0,0 +1,44 @@
+import React from 'react';
+import { useAsync, useAsyncRetry } from 'react-use';
+
+import { useApi } from '@backstage/core-plugin-api';
+
+import { rbacApiRef } from '../api/RBACBackendClient';
+import { getPermissionsData } from '../utils/rbac-utils';
+
+export const usePermissionPolicies = (entityReference: string) => {
+  const rbacApi = useApi(rbacApiRef);
+  const {
+    loading: policiesLoading,
+    value: policies,
+    retry,
+    error,
+  } = useAsyncRetry(async () => {
+    return await rbacApi.getPolicies();
+  });
+
+  const { value: permissionPolicies, loading: permissionPoliciesLoading } =
+    useAsync(async () => {
+      return await rbacApi.listPermissions();
+    });
+
+  const loading = policiesLoading && permissionPoliciesLoading;
+
+  const data = React.useMemo(() => {
+    const pp = Array.isArray(permissionPolicies) ? permissionPolicies : [];
+    return Array.isArray(policies)
+      ? getPermissionsData(policies, pp, entityReference)
+      : [];
+  }, [policies, permissionPolicies, entityReference]);
+  return {
+    loading,
+    data,
+    retry,
+    error:
+      !Array.isArray(policies) &&
+      policies?.status !== 200 &&
+      policies?.status !== 204
+        ? policies
+        : error,
+  };
+};
diff --git a/plugins/rbac/src/hooks/useRoles.test.ts b/plugins/rbac/src/hooks/useRoles.test.ts
new file mode 100644
index 0000000000..2ab0b6169e
--- /dev/null
+++ b/plugins/rbac/src/hooks/useRoles.test.ts
@@ -0,0 +1,128 @@
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useRoles } from './useRoles';
+
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn().mockReturnValue({
+    getRoles: jest.fn().mockReturnValue([
+      {
+        memberReferences: ['user:default/guest'],
+        name: 'role:default/guests',
+      },
+      {
+        memberReferences: ['user:default/debsmita1', 'group:default/admins'],
+        name: 'role:default/rbac_admin',
+      },
+    ]),
+    getPolicies: jest
+      .fn()
+      .mockReturnValueOnce([
+        {
+          entityReference: 'role:default/guests',
+          permission: 'catalog-entity',
+          policy: 'read',
+          effect: 'deny',
+        },
+        {
+          entityReference: 'role:default/guests',
+          permission: 'catalog.entity.create',
+          policy: 'use',
+          effect: 'deny',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'read',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'create',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'delete',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'catalog-entity',
+          policy: 'read',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'catalog.entity.create',
+          policy: 'use',
+          effect: 'allow',
+        },
+      ])
+      .mockReturnValue([
+        {
+          entityReference: 'role:default/guests',
+          permission: 'catalog-entity',
+          policy: 'read',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/guests',
+          permission: 'catalog.entity.create',
+          policy: 'use',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'read',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'create',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'policy-entity',
+          policy: 'delete',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'catalog-entity',
+          policy: 'read',
+          effect: 'allow',
+        },
+        {
+          entityReference: 'role:default/rbac_admin',
+          permission: 'catalog.entity.create',
+          policy: 'use',
+          effect: 'allow',
+        },
+      ]),
+  }),
+}));
+
+describe('useRoles', () => {
+  it('should return roles with alteast one policy with effect allow', async () => {
+    const { result } = renderHook(() => useRoles());
+    await waitFor(() => {
+      expect(result.current.loading).toBeFalsy();
+      expect(result.current.data).toHaveLength(1);
+    });
+  });
+
+  it('should return roles', async () => {
+    const { result } = renderHook(() => useRoles());
+    await waitFor(() => {
+      expect(result.current.loading).toBeFalsy();
+      expect(result.current.data).toHaveLength(2);
+    });
+  });
+});
diff --git a/plugins/rbac/src/hooks/useRoles.ts b/plugins/rbac/src/hooks/useRoles.ts
index b60b4b78af..366ed194db 100644
--- a/plugins/rbac/src/hooks/useRoles.ts
+++ b/plugins/rbac/src/hooks/useRoles.ts
@@ -34,25 +34,28 @@ export const useRoles = (pollInterval?: number) => {
   const data: RolesData[] = React.useMemo(
     () =>
       roles && roles?.length > 0
-        ? roles.reduce(
-            (acc: any, role: Role) => [
-              ...acc,
-              {
-                id: role.name,
-                name: role.name,
-                description: '-',
-                members: role.memberReferences,
-                permissions: getPermissions(
-                  role.name,
-                  policies as RoleBasedPolicy[],
-                ),
-                modifiedBy: '-',
-                lastModified: '-',
-                permissionResult,
-              },
-            ],
-            [],
-          )
+        ? roles.reduce((acc: any, role: Role) => {
+            const permissions = getPermissions(
+              role.name,
+              policies as RoleBasedPolicy[],
+            );
+
+            return permissions > 0 && role.memberReferences.length > 0
+              ? [
+                  ...acc,
+                  {
+                    id: role.name,
+                    name: role.name,
+                    description: '-',
+                    members: role.memberReferences,
+                    permissions,
+                    modifiedBy: '-',
+                    lastModified: '-',
+                    permissionResult,
+                  },
+                ]
+              : acc;
+          }, [])
         : [],
     [roles, policies, permissionResult],
   );
diff --git a/plugins/rbac/src/plugin.ts b/plugins/rbac/src/plugin.ts
index e920e1a830..e66fa311fd 100644
--- a/plugins/rbac/src/plugin.ts
+++ b/plugins/rbac/src/plugin.ts
@@ -8,12 +8,13 @@ import {
 } from '@backstage/core-plugin-api';
 
 import { rbacApiRef, RBACBackendClient } from './api/RBACBackendClient';
-import { rootRouteRef } from './routes';
+import { roleRouteRef, rootRouteRef } from './routes';
 
 export const rbacPlugin = createPlugin({
   id: 'rbac',
   routes: {
     root: rootRouteRef,
+    role: roleRouteRef,
   },
   apis: [
     createApiFactory({
@@ -31,7 +32,7 @@ export const rbacPlugin = createPlugin({
 export const RbacPage = rbacPlugin.provide(
   createRoutableExtension({
     name: 'RbacPage',
-    component: () => import('./components').then(m => m.RbacPage),
+    component: () => import('./components/Router').then(m => m.Router),
     mountPoint: rootRouteRef,
   }),
 );
diff --git a/plugins/rbac/src/routes.ts b/plugins/rbac/src/routes.ts
index 723cae6f9d..f5a6b6976f 100644
--- a/plugins/rbac/src/routes.ts
+++ b/plugins/rbac/src/routes.ts
@@ -1,5 +1,11 @@
-import { createRouteRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createSubRouteRef } from '@backstage/core-plugin-api';
 
 export const rootRouteRef = createRouteRef({
   id: 'rbac',
 });
+
+export const roleRouteRef = createSubRouteRef({
+  id: 'rbac-role-overview',
+  parent: rootRouteRef,
+  path: '/roles/:roleKind/:roleName',
+});
diff --git a/plugins/rbac/src/types.ts b/plugins/rbac/src/types.ts
index a26b1c29a6..955248a953 100644
--- a/plugins/rbac/src/types.ts
+++ b/plugins/rbac/src/types.ts
@@ -1,3 +1,5 @@
+import { GroupEntity, UserEntity } from '@backstage/catalog-model';
+
 export type RolesData = {
   name: string;
   description: string;
@@ -7,3 +9,23 @@ export type RolesData = {
   lastModified: string;
   permissionResult: { allowed: boolean; loading: boolean };
 };
+
+export type MembersData = {
+  name: string;
+  type: 'User' | 'Group';
+  members: number;
+  ref: {
+    name: string;
+    namespace: string;
+    kind: string;
+  };
+};
+
+export type PermissionsData = {
+  plugin: string;
+  permission: string;
+  policies: Set<{ policy: string; effect: string }>;
+  policyString: Set<string>;
+};
+
+export type MemberEntity = UserEntity | GroupEntity;
diff --git a/plugins/rbac/src/utils/rbac-utils.test.ts b/plugins/rbac/src/utils/rbac-utils.test.ts
index c79319dcab..4ebc555d96 100644
--- a/plugins/rbac/src/utils/rbac-utils.test.ts
+++ b/plugins/rbac/src/utils/rbac-utils.test.ts
@@ -1,4 +1,12 @@
-import { getMembers, getPermissions } from './rbac-utils';
+import { GroupEntity } from '@backstage/catalog-model';
+
+import {
+  getKindNamespaceName,
+  getMembers,
+  getMembersFromGroup,
+  getPermissions,
+  getPluginId,
+} from './rbac-utils';
 
 const mockPolicies = [
   {
@@ -45,9 +53,56 @@ const mockPolicies = [
   },
 ];
 
+const mockPermissionPolicies = [
+  {
+    pluginId: 'catalog',
+    policies: [
+      {
+        permission: 'catalog-entity',
+        policy: 'read',
+      },
+      {
+        permission: 'catalog.entity.create',
+        policy: 'create',
+      },
+    ],
+  },
+  {
+    pluginId: 'scaffolder',
+    policies: [
+      {
+        permission: 'scaffolder-template',
+        policy: 'read',
+      },
+      {
+        permission: 'scaffolder-action',
+        policy: 'use',
+      },
+    ],
+  },
+  {
+    pluginId: 'permission',
+    policies: [
+      {
+        permission: 'policy-entity',
+        policy: 'read',
+      },
+      {
+        permission: 'policy-entity',
+        policy: 'create',
+      },
+      {
+        permission: 'policy-entity',
+        policy: 'update',
+      },
+    ],
+  },
+];
+
 describe('rbac utils', () => {
   it('should list associated permissions for a role', () => {
-    expect(getPermissions('role:default/guests', mockPolicies)).toBe(2);
+    expect(getPermissions('role:default/guests', mockPolicies)).toBe(0);
+    expect(getPermissions('user:default/xyz', mockPolicies)).toBe(5);
   });
 
   it('should return number of users and groups in member references', () => {
@@ -69,4 +124,97 @@ describe('rbac utils', () => {
 
     expect(getMembers([])).toBe('No members');
   });
+
+  it('should return number of members in a group', () => {
+    let resource: GroupEntity = {
+      metadata: {
+        namespace: 'default',
+        annotations: {},
+        name: 'team-b',
+        description: 'Team B',
+      },
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Group',
+      spec: {
+        type: 'team',
+        profile: {},
+        parent: 'backstage',
+        children: [],
+      },
+      relations: [
+        {
+          type: 'childOf',
+          targetRef: 'group:default/backstage',
+        },
+        {
+          type: 'hasMember',
+          targetRef: 'user:default/amelia.park',
+        },
+        {
+          type: 'hasMember',
+          targetRef: 'user:default/colette.brock',
+        },
+        {
+          type: 'hasMember',
+          targetRef: 'user:default/jenny.doe',
+        },
+        {
+          type: 'hasMember',
+          targetRef: 'user:default/jonathon.page',
+        },
+        {
+          type: 'hasMember',
+          targetRef: 'user:default/justine.barrow',
+        },
+      ],
+    };
+    expect(getMembersFromGroup(resource)).toBe(5);
+
+    resource = {
+      metadata: {
+        namespace: 'default',
+        annotations: {},
+        name: 'team-b',
+        description: 'Team B',
+      },
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'Group',
+      spec: {
+        type: 'team',
+        profile: {},
+        parent: 'backstage',
+        children: [],
+      },
+      relations: [
+        {
+          type: 'childOf',
+          targetRef: 'group:default/backstage',
+        },
+      ],
+    };
+
+    expect(getMembersFromGroup(resource)).toBe(0);
+  });
+
+  it('should return plugin-id of the policy', () => {
+    expect(getPluginId(mockPermissionPolicies, 'catalog-entity')).toBe(
+      'catalog',
+    );
+    expect(getPluginId(mockPermissionPolicies, 'scaffolder-template')).toBe(
+      'scaffolder',
+    );
+  });
+
+  it('should return kind, namespace and name from the reference', () => {
+    expect(getKindNamespaceName('role:default/xyz')).toEqual({
+      kind: 'role',
+      namespace: 'default',
+      name: 'xyz',
+    });
+    expect(getKindNamespaceName('role:abc/test')).toEqual({
+      kind: 'role',
+      namespace: 'abc',
+      name: 'test',
+    });
+  });
 });
diff --git a/plugins/rbac/src/utils/rbac-utils.ts b/plugins/rbac/src/utils/rbac-utils.ts
index 8a1c35003f..4016e57863 100644
--- a/plugins/rbac/src/utils/rbac-utils.ts
+++ b/plugins/rbac/src/utils/rbac-utils.ts
@@ -1,46 +1,138 @@
-import { isUserEntity, parseEntityRef } from '@backstage/catalog-model';
+import {
+  GroupEntity,
+  isUserEntity,
+  parseEntityRef,
+} from '@backstage/catalog-model';
 
-import { RoleBasedPolicy } from '@janus-idp/backstage-plugin-rbac-common';
+import {
+  PermissionPolicy,
+  RoleBasedPolicy,
+} from '@janus-idp/backstage-plugin-rbac-common';
+
+import { MembersData, PermissionsData } from '../types';
 
 export const getPermissions = (
   role: string,
   policies: RoleBasedPolicy[],
 ): number => {
-  if (!policies || policies?.length === 0) {
+  if (!policies || policies?.length === 0 || !Array.isArray(policies)) {
     return 0;
   }
   return policies.filter(
-    (policy: RoleBasedPolicy) => policy.entityReference === role,
+    (policy: RoleBasedPolicy) =>
+      policy.entityReference === role && policy.effect !== 'deny',
   ).length;
 };
 
-export const getMembers = (memberReferences: string[]): string => {
-  if (!memberReferences || memberReferences.length === 0) {
+export const getMembersString = (res: {
+  users: number;
+  groups: number;
+}): string => {
+  let membersString = '';
+  if (res.users > 0) {
+    membersString = `${res.users} ${res.users > 1 ? 'Users' : 'User'}`;
+  }
+  if (res.groups > 0) {
+    membersString = membersString.concat(
+      membersString.length > 0 ? ', ' : '',
+      `${res.groups} ${res.groups > 1 ? 'Groups' : 'Group'}`,
+    );
+  }
+  return membersString;
+};
+
+export const getMembers = (members: (string | MembersData)[]): string => {
+  if (!members || members.length === 0) {
     return 'No members';
   }
 
-  const res = memberReferences.reduce(
+  const res = members.reduce(
     (acc, member) => {
-      const entity = parseEntityRef(member) as any;
-      if (isUserEntity(entity)) {
-        acc.users++;
+      if (typeof member === 'object') {
+        if (member.type === 'User') {
+          acc.users++;
+        } else {
+          acc.groups++;
+        }
       } else {
-        acc.groups++;
+        const entity = parseEntityRef(member) as any;
+        if (isUserEntity(entity)) {
+          acc.users++;
+        } else {
+          acc.groups++;
+        }
       }
       return acc;
     },
     { users: 0, groups: 0 },
   );
 
-  let members = '';
-  if (res.users > 0) {
-    members = `${res.users} ${res.users > 1 ? 'Users' : 'User'}`;
-  }
-  if (res.groups > 0) {
-    members = members.concat(
-      members.length > 0 ? ', ' : '',
-      `${res.groups} ${res.groups > 1 ? 'Groups' : 'Group'}`,
-    );
-  }
-  return members;
+  return getMembersString(res);
+};
+
+export const getMembersFromGroup = (group: GroupEntity): number => {
+  const membersList = group.relations?.reduce((acc, relation) => {
+    let temp = acc;
+    if (relation.type === 'hasMember') {
+      temp++;
+    }
+    return temp;
+  }, 0);
+  return membersList || 0;
+};
+
+export const getPluginId = (
+  permissions: PermissionPolicy[],
+  permission: string | undefined,
+): string =>
+  permissions.find(p => p.policies?.find(pol => pol.permission === permission))
+    ?.pluginId || '-';
+
+export const getPermissionsData = (
+  policies: RoleBasedPolicy[],
+  permissionPolicies: PermissionPolicy[],
+  entityReference: string,
+): PermissionsData[] =>
+  policies.reduce((acc: PermissionsData[], policy: RoleBasedPolicy) => {
+    if (policy?.effect === 'allow') {
+      const permission = acc.find(
+        plugin =>
+          policy.entityReference === entityReference &&
+          plugin.permission === policy.permission &&
+          !plugin.policies.has({
+            policy: policy?.policy || 'use',
+            effect: 'allow',
+          }),
+      );
+      if (permission) {
+        permission.policyString.add(
+          policy.policy ? `, ${policy.policy}` : ', use',
+        );
+        permission.policies.add({
+          policy: policy.policy || 'use',
+          effect: policy.effect,
+        });
+      } else if (policy.entityReference === entityReference) {
+        const policyString = new Set<string>();
+        const policiesSet = new Set<{ policy: string; effect: string }>();
+        acc.push({
+          permission: policy.permission || '-',
+          plugin: getPluginId(permissionPolicies, policy?.permission) || '-',
+          policyString: policyString.add(policy.policy || 'use'),
+          policies: policiesSet.add({
+            policy: policy.policy || 'use',
+            effect: policy.effect,
+          }),
+        });
+      }
+    }
+    return acc;
+  }, []);
+
+export const getKindNamespaceName = (roleRef: string) => {
+  const refs: string[] = roleRef.split(':');
+  const kind = refs[0];
+  const namespace = refs[1].split('/')[0];
+  const name = refs[1].split('/')[1];
+  return { kind, namespace, name };
 };
diff --git a/yarn.lock b/yarn.lock
index 384831f7e1..eebed2cc06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2951,6 +2951,15 @@
     "@backstage/errors" "^1.2.3"
     cross-fetch "^3.1.5"
 
+"@backstage/catalog-client@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@backstage/catalog-client/-/catalog-client-1.4.6.tgz#35f6478879e921dd1ad939a60ba84f3515ee8ba9"
+  integrity sha512-3fXKI+Ht/r1eDJUsr7VSYSSqE3nVBTe0jBPsswf6stlUb34rR+I7GXnVaFIVWv3wPAZaG+PUShq3oTsGFE5lHA==
+  dependencies:
+    "@backstage/catalog-model" "^1.4.3"
+    "@backstage/errors" "^1.2.3"
+    cross-fetch "^4.0.0"
+
 "@backstage/catalog-model@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@backstage/catalog-model/-/catalog-model-1.4.1.tgz#8d57217647a3eef68ad7c7c268af573be9974201"
@@ -3333,6 +3342,53 @@
     zen-observable "^0.10.0"
     zod "^3.21.4"
 
+"@backstage/core-components@^0.13.8":
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/@backstage/core-components/-/core-components-0.13.8.tgz#4b45fec4b03601677d9b1d6279f2d8874ada176a"
+  integrity sha512-isQB7WXrw1QsDZ2njSwah7L4L8aGQsu/GZCHEtXkV/0A54ZWOuYXzW4ME4Vcjh7UPXOdhejeBi+B3gHlWURRXA==
+  dependencies:
+    "@backstage/config" "^1.1.1"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/errors" "^1.2.3"
+    "@backstage/theme" "^0.4.4"
+    "@backstage/version-bridge" "^1.0.7"
+    "@date-io/core" "^1.3.13"
+    "@material-table/core" "^3.1.0"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.61"
+    "@react-hookz/web" "^20.0.0"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    "@types/react-sparklines" "^1.7.0"
+    "@types/react-text-truncate" "^0.14.0"
+    ansi-regex "^6.0.1"
+    classnames "^2.2.6"
+    d3-selection "^3.0.0"
+    d3-shape "^3.0.0"
+    d3-zoom "^3.0.0"
+    dagre "^0.8.5"
+    history "^5.0.0"
+    immer "^9.0.1"
+    linkify-react "4.1.2"
+    linkifyjs "4.1.2"
+    lodash "^4.17.21"
+    pluralize "^8.0.0"
+    qs "^6.9.4"
+    rc-progress "3.5.1"
+    react-helmet "6.1.0"
+    react-hook-form "^7.12.2"
+    react-idle-timer "5.6.2"
+    react-markdown "^8.0.0"
+    react-sparklines "^1.7.0"
+    react-syntax-highlighter "^15.4.5"
+    react-text-truncate "^0.19.0"
+    react-use "^17.3.2"
+    react-virtualized-auto-sizer "^1.0.11"
+    react-window "^1.8.6"
+    remark-gfm "^3.0.1"
+    zen-observable "^0.10.0"
+    zod "^3.21.4"
+
 "@backstage/core-plugin-api@1.7.0", "@backstage/core-plugin-api@^1.6.0", "@backstage/core-plugin-api@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@backstage/core-plugin-api/-/core-plugin-api-1.7.0.tgz#652ec473aa22d8dede35c90159284c522667ffb5"
@@ -3345,6 +3401,18 @@
     history "^5.0.0"
     i18next "^22.4.15"
 
+"@backstage/core-plugin-api@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@backstage/core-plugin-api/-/core-plugin-api-1.8.0.tgz#97e87e13dcc5a65cb65e883d67d4387c7a42db32"
+  integrity sha512-yZ52w8Msf6cwLAf97bQKDqEWHA0N3ikRejYHFSn6hb3IVTgxV738m4ybFdgULVEAZFLrATs7nzu+UI3rqoVeZg==
+  dependencies:
+    "@backstage/config" "^1.1.1"
+    "@backstage/types" "^1.1.1"
+    "@backstage/version-bridge" "^1.0.7"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    history "^5.0.0"
+    i18next "^22.4.15"
+
 "@backstage/dev-utils@1.0.22":
   version "1.0.22"
   resolved "https://registry.yarnpkg.com/@backstage/dev-utils/-/dev-utils-1.0.22.tgz#3c6b3844bda776858e16361c6a990ec8c3873b6e"
@@ -3410,6 +3478,21 @@
     zod "^3.21.4"
     zod-to-json-schema "^3.21.4"
 
+"@backstage/frontend-plugin-api@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@backstage/frontend-plugin-api/-/frontend-plugin-api-0.3.0.tgz#1ccfff4c0edbe28d077e97c4c1782f466af1095a"
+  integrity sha512-Cwq5TMDlngKZn4KMaldYQQw8dcOAUducfepH5fsS/Go1YO0C16G8yap6nWh0qg69+GidYCcX9xXerrSovLMAmQ==
+  dependencies:
+    "@backstage/core-components" "^0.13.8"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/types" "^1.1.1"
+    "@backstage/version-bridge" "^1.0.7"
+    "@material-ui/core" "^4.12.4"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    lodash "^4.17.21"
+    zod "^3.21.4"
+    zod-to-json-schema "^3.21.4"
+
 "@backstage/integration-aws-node@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@backstage/integration-aws-node/-/integration-aws-node-0.1.7.tgz#0ac74f2e570593bd3134a448d20c2006b4c407d1"
@@ -3435,6 +3518,18 @@
     "@material-ui/icons" "^4.9.1"
     "@types/react" "^16.13.1 || ^17.0.0"
 
+"@backstage/integration-react@^1.1.21":
+  version "1.1.21"
+  resolved "https://registry.yarnpkg.com/@backstage/integration-react/-/integration-react-1.1.21.tgz#ba2ddc075cb621709eb23e6dfc59f10b19bfc539"
+  integrity sha512-shpQCMsQMOgGOYsZC7BfDfoyczxYz+mcqdomOr0fdGETnBGSWvUOmUQwCHAM8xc/ljBgozWL0qdTbPssVar6Zw==
+  dependencies:
+    "@backstage/config" "^1.1.1"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/integration" "^1.7.2"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@types/react" "^16.13.1 || ^17.0.0"
+
 "@backstage/integration@^1.5.1":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@backstage/integration/-/integration-1.5.1.tgz#10a64060ba74251cc6256ab8dcb3394d4beb8201"
@@ -3464,6 +3559,20 @@
     lodash "^4.17.21"
     luxon "^3.0.0"
 
+"@backstage/integration@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@backstage/integration/-/integration-1.7.2.tgz#209b49e3ff6cce0531b8a1ef3b6387a7a740c701"
+  integrity sha512-4BW0h7Hwr27TvVoZ1RArMGB1RghmAKbUzVRdDMEAO9buYNuAkpMWvpzV6srpU9DfE7gH+9fnH3BbrGNrL5OjRA==
+  dependencies:
+    "@azure/identity" "^3.2.1"
+    "@backstage/config" "^1.1.1"
+    "@octokit/auth-app" "^4.0.0"
+    "@octokit/rest" "^19.0.3"
+    cross-fetch "^4.0.0"
+    git-url-parse "^13.0.0"
+    lodash "^4.17.21"
+    luxon "^3.0.0"
+
 "@backstage/plugin-api-docs@^0.9.12":
   version "0.9.12"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-api-docs/-/plugin-api-docs-0.9.12.tgz#76166304bfd96c1ad54fb552bbdb62cfc6fd0b88"
@@ -3745,6 +3854,15 @@
     "@backstage/plugin-permission-common" "^0.7.9"
     "@backstage/plugin-search-common" "^1.2.7"
 
+"@backstage/plugin-catalog-common@^1.0.18":
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-catalog-common/-/plugin-catalog-common-1.0.18.tgz#c60bc17ac6cf7c112713c9adc2a9eca6c08e0a09"
+  integrity sha512-k8EQHv7x6ZmJlkyrC3cQByyiUh/mBxM83LbZcGDVR0WZw2+yP23rV3+NGMYuFW6P9c8jL47YuRFoqQ8FkmDs0Q==
+  dependencies:
+    "@backstage/catalog-model" "^1.4.3"
+    "@backstage/plugin-permission-common" "^0.7.10"
+    "@backstage/plugin-search-common" "^1.2.8"
+
 "@backstage/plugin-catalog-graph@^0.2.37":
   version "0.2.37"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-catalog-graph/-/plugin-catalog-graph-0.2.37.tgz#c276b62a642fed55a58e53fd818e2ea48f1c32d0"
@@ -3836,6 +3954,37 @@
     yaml "^2.0.0"
     zen-observable "^0.10.0"
 
+"@backstage/plugin-catalog-react@^1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-catalog-react/-/plugin-catalog-react-1.9.1.tgz#80d3ba027499c704bffbb11d877b3e871f557499"
+  integrity sha512-ucuJCVfHEdEsRLv3nv9Ds1eybkKzaDYKqt7KUb2rc/WfNiSZpsaf0/fWYfR/hNIAmxlE3o9PRuLN6wv5v8Ah9w==
+  dependencies:
+    "@backstage/catalog-client" "^1.4.6"
+    "@backstage/catalog-model" "^1.4.3"
+    "@backstage/core-components" "^0.13.8"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/errors" "^1.2.3"
+    "@backstage/frontend-plugin-api" "^0.3.0"
+    "@backstage/integration-react" "^1.1.21"
+    "@backstage/plugin-catalog-common" "^1.0.18"
+    "@backstage/plugin-permission-common" "^0.7.10"
+    "@backstage/plugin-permission-react" "^0.4.17"
+    "@backstage/theme" "^0.4.4"
+    "@backstage/types" "^1.1.1"
+    "@backstage/version-bridge" "^1.0.7"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.61"
+    "@react-hookz/web" "^23.0.0"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    classnames "^2.2.6"
+    lodash "^4.17.21"
+    material-ui-popup-state "^1.9.3"
+    qs "^6.9.4"
+    react-use "^17.2.4"
+    yaml "^2.0.0"
+    zen-observable "^0.10.0"
+
 "@backstage/plugin-catalog@1.14.0", "@backstage/plugin-catalog@^1.14.0":
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-catalog/-/plugin-catalog-1.14.0.tgz#cd2c764a506107d40205a1e0b4da51e4ec517738"
@@ -3865,6 +4014,38 @@
     react-use "^17.2.4"
     zen-observable "^0.10.0"
 
+"@backstage/plugin-catalog@^1.15.1":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-catalog/-/plugin-catalog-1.15.1.tgz#1d06c66ffd45844122818c14abda265eb6467a86"
+  integrity sha512-jvdUu9eZ+Y2R0Qp+QA862f82Jck6N2M90rkk3/4I7eGPZWsQNh0WIX9Yn6yBRLEJVz3xpd6oQYCZQ+8G9V8Tvg==
+  dependencies:
+    "@backstage/catalog-client" "^1.4.6"
+    "@backstage/catalog-model" "^1.4.3"
+    "@backstage/core-components" "^0.13.8"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/errors" "^1.2.3"
+    "@backstage/frontend-plugin-api" "^0.3.0"
+    "@backstage/integration-react" "^1.1.21"
+    "@backstage/plugin-catalog-common" "^1.0.18"
+    "@backstage/plugin-catalog-react" "^1.9.1"
+    "@backstage/plugin-scaffolder-common" "^1.4.3"
+    "@backstage/plugin-search-common" "^1.2.8"
+    "@backstage/plugin-search-react" "^1.7.3"
+    "@backstage/theme" "^0.4.4"
+    "@backstage/types" "^1.1.1"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.61"
+    "@mui/utils" "^5.14.15"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    dataloader "^2.0.0"
+    expiry-map "^2.0.0"
+    history "^5.0.0"
+    lodash "^4.17.21"
+    pluralize "^8.0.0"
+    react-use "^17.2.4"
+    zen-observable "^0.10.0"
+
 "@backstage/plugin-events-backend@^0.2.15":
   version "0.2.15"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-events-backend/-/plugin-events-backend-0.2.15.tgz#14e86ff7680f54846485231582c4714193cda187"
@@ -4095,6 +4276,18 @@
     uuid "^8.0.0"
     zod "^3.21.4"
 
+"@backstage/plugin-permission-common@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-permission-common/-/plugin-permission-common-0.7.10.tgz#0169967f9f5ebf042e49c558aff6bfee6583524b"
+  integrity sha512-E9vWuPbn/Qskg1x4o6dFMMgOVo5ZFEEiMpmAEz4+kuo/XwaKTQFLj5bbA9QwL4iUObeG3Y8GATlTICp3L0Ekbw==
+  dependencies:
+    "@backstage/config" "^1.1.1"
+    "@backstage/errors" "^1.2.3"
+    "@backstage/types" "^1.1.1"
+    cross-fetch "^4.0.0"
+    uuid "^8.0.0"
+    zod "^3.21.4"
+
 "@backstage/plugin-permission-node@0.7.17", "@backstage/plugin-permission-node@^0.7.17":
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-permission-node/-/plugin-permission-node-0.7.17.tgz#6ac25800642b9e6291fd38e571d0bf642a5893e6"
@@ -4125,6 +4318,19 @@
     react-use "^17.2.4"
     swr "^2.0.0"
 
+"@backstage/plugin-permission-react@^0.4.17":
+  version "0.4.17"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-permission-react/-/plugin-permission-react-0.4.17.tgz#aad235879205b77b7d5045f26c210741c357edf2"
+  integrity sha512-Y3D+8mZNjRfeA/b8LDcSE2yxXk9o+AbLoEdgPKNqFNSZILCfX07cwS2GYYcMK6JniSrKETHha2w5c4R7remHDA==
+  dependencies:
+    "@backstage/config" "^1.1.1"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/plugin-permission-common" "^0.7.10"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    cross-fetch "^4.0.0"
+    react-use "^17.2.4"
+    swr "^2.0.0"
+
 "@backstage/plugin-proxy-backend@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-proxy-backend/-/plugin-proxy-backend-0.4.3.tgz#45b877cabd8887f41559f5e1ffbe16292e6533dd"
@@ -4212,6 +4418,15 @@
     "@backstage/plugin-permission-common" "^0.7.9"
     "@backstage/types" "^1.1.1"
 
+"@backstage/plugin-scaffolder-common@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-scaffolder-common/-/plugin-scaffolder-common-1.4.3.tgz#4c5fd9fd7eedd15bf553998acfe5f1e82ceb8a24"
+  integrity sha512-0FIkmE5Di21TPwNhQCkAPoaUeqt6Bd1nnFN2atYLsoLnZo9AAnaBv0/v+g5nukaJSFjopwAdMP/jIPTA3cASpA==
+  dependencies:
+    "@backstage/catalog-model" "^1.4.3"
+    "@backstage/plugin-permission-common" "^0.7.10"
+    "@backstage/types" "^1.1.1"
+
 "@backstage/plugin-scaffolder-node@^0.2.6":
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-scaffolder-node/-/plugin-scaffolder-node-0.2.6.tgz#fca73dfb6548522f9f4c4313e4e3b1470b5c5744"
@@ -4447,6 +4662,14 @@
     "@backstage/plugin-permission-common" "^0.7.9"
     "@backstage/types" "^1.1.1"
 
+"@backstage/plugin-search-common@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-search-common/-/plugin-search-common-1.2.8.tgz#8a7db72d0fb8ec51f8b794f7b32c5ff75f6bdff4"
+  integrity sha512-bUg8NFFkEC6sRMkqzj4y1MkDRAgHnCTBFsqby2bjPv5WLDmSd5z9dtxCL4NGn2QOlYaHAKH7sYyLvWSq5yUstg==
+  dependencies:
+    "@backstage/plugin-permission-common" "^0.7.10"
+    "@backstage/types" "^1.1.1"
+
 "@backstage/plugin-search-react@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-search-react/-/plugin-search-react-1.7.1.tgz#a45ab8735aaf46944a6455c377879f9af68e13e0"
@@ -4468,6 +4691,26 @@
     qs "^6.9.4"
     react-use "^17.3.2"
 
+"@backstage/plugin-search-react@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@backstage/plugin-search-react/-/plugin-search-react-1.7.3.tgz#2c3f9086c741939a5edbb3a4071308ea2acacc60"
+  integrity sha512-zTfKWpATdbGR/RwNapxTlDea5Efq39b4f5FK9wswJCpWbZk9+cl7aKkyB5qozU+Evm7HF1nnZ8XRGa5hdLEQ3Q==
+  dependencies:
+    "@backstage/core-components" "^0.13.8"
+    "@backstage/core-plugin-api" "^1.8.0"
+    "@backstage/frontend-plugin-api" "^0.3.0"
+    "@backstage/plugin-search-common" "^1.2.8"
+    "@backstage/theme" "^0.4.4"
+    "@backstage/types" "^1.1.1"
+    "@backstage/version-bridge" "^1.0.7"
+    "@material-ui/core" "^4.12.2"
+    "@material-ui/icons" "^4.9.1"
+    "@material-ui/lab" "4.0.0-alpha.61"
+    "@types/react" "^16.13.1 || ^17.0.0"
+    lodash "^4.17.21"
+    qs "^6.9.4"
+    react-use "^17.3.2"
+
 "@backstage/plugin-search@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@backstage/plugin-search/-/plugin-search-1.4.1.tgz#1638bdeeb8debc0a62690125065f5649d0e2bc71"
@@ -4701,6 +4944,15 @@
     "@emotion/styled" "^11.10.5"
     "@mui/material" "^5.12.2"
 
+"@backstage/theme@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@backstage/theme/-/theme-0.4.4.tgz#807735b58a5e1b2a0cdb50fc05ad83656f2f66cb"
+  integrity sha512-Mvs0FrEnQtyO2dVNPyo1wjkNHbN3vefIdj4V27SFiX9W9sj+R1b4rzFACF6xjVzfdV9oo9HdsL59CMnFlDxz4Q==
+  dependencies:
+    "@emotion/react" "^11.10.5"
+    "@emotion/styled" "^11.10.5"
+    "@mui/material" "^5.12.2"
+
 "@backstage/types@1.1.1", "@backstage/types@^1.1.0", "@backstage/types@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@backstage/types/-/types-1.1.1.tgz#c9ccb30357005e7fb5fa2ac140198059976eb076"
@@ -4713,6 +4965,13 @@
   dependencies:
     "@types/react" "^16.13.1 || ^17.0.0"
 
+"@backstage/version-bridge@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@backstage/version-bridge/-/version-bridge-1.0.7.tgz#8eb52f998d0aef9ceba53fd6dca80a7fa1703534"
+  integrity sha512-BlkI2av9OjhMjs783wP5XHmTUmUGFsnJ4j/eQJUVvnqFjaP3IpUHfAIFD/vAhx3JvPiYOY93m+dAunTc1DiHLA==
+  dependencies:
+    "@types/react" "^16.13.1 || ^17.0.0"
+
 "@balena/dockerignore@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@balena/dockerignore/-/dockerignore-1.0.2.tgz#9ffe4726915251e8eb69f44ef3547e0da2c03e0d"
@@ -6389,7 +6648,7 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/utils@^5.14.18":
+"@mui/utils@^5.14.15", "@mui/utils@^5.14.18":
   version "5.14.18"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.18.tgz#d2a46df9b06230423ba6b6317748b27185a56ac3"
   integrity sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==
@@ -14971,7 +15230,7 @@ cross-env@7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-fetch@4.0.0:
+cross-fetch@4.0.0, cross-fetch@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
   integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
@@ -17117,6 +17376,13 @@ expect@^29.0.0, expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
+expiry-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/expiry-map/-/expiry-map-2.0.0.tgz#b441ee8e8865291ad9a542783076d33bae0f3582"
+  integrity sha512-K1I5wJe2fiqjyUZf/xhxwTpaopw3F+19DsO7Oggl20+3SVTXDIevVRJav0aBMfposQdkl2E4+gnuOKd3j2X0sA==
+  dependencies:
+    map-age-cleaner "^0.2.0"
+
 exponential-backoff@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
@@ -21002,11 +21268,21 @@ linkify-react@4.1.1:
   resolved "https://registry.yarnpkg.com/linkify-react/-/linkify-react-4.1.1.tgz#79cc29c6e5c0fd660be74a6a51d25c1b36977cf7"
   integrity sha512-2K9Y1cUdvq40dFWqCJ//X+WP19nlzIVITFGI93RjLnA0M7KbnxQ/ffC3AZIZaEIrLangF9Hjt3i0GQ9/anEG5A==
 
+linkify-react@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/linkify-react/-/linkify-react-4.1.2.tgz#5c52de5d53f54ec27f76b3fb8270f8ee269cb4eb"
+  integrity sha512-bgzlg562ZAUKQtOw9qr/3IemqpsDG/UmzOANy1cFavcWo/eD9eF4s1ZnT3cWok0GeOG4GujrOP/Jp7cqiXNODg==
+
 linkifyjs@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.1.tgz#73d427e3bbaaf4ca8e71c589ad4ffda11a9a5fde"
   integrity sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==
 
+linkifyjs@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.2.tgz#48fadb05ddf5a5f7065510a385a500ca1ac4e65e"
+  integrity sha512-1elJrH8MwUgr77Rgmx4JgB/nBgISYVoGossH6pAfCeHG+07TblTn6RWKx0MKozEMJU6NCFYHRih9M8ZtV3YZ+Q==
+
 lint-staged@15.0.1:
   version "15.0.1"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.0.1.tgz#1db47c315c79bafe993aa33a0b50cbfeef50d906"
@@ -21465,6 +21741,13 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+map-age-cleaner@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.2.0.tgz#0196bc278f7244ddeb7ca0cb3df329b06241a44b"
+  integrity sha512-AvxTC6id0fzSf6OyNBTp1syyCuKO7nOJvHgYlhT0Qkkjvk40zZo+av3ayVgXlxnF/DxEzEfY9mMdd7FHsd+wKQ==
+  dependencies:
+    p-defer "^1.0.0"
+
 map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
@@ -23369,6 +23652,11 @@ p-cancelable@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
   integrity sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
+
 p-each-series@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"