diff --git a/webapp/packages/core-authentication/src/RolesResource.ts b/webapp/packages/core-authentication/src/RolesResource.ts
index bde79805e4..773452078c 100644
--- a/webapp/packages/core-authentication/src/RolesResource.ts
+++ b/webapp/packages/core-authentication/src/RolesResource.ts
@@ -9,14 +9,25 @@
 import { injectable } from '@cloudbeaver/core-di';
 import {
   GraphQLService,
-  AdminRoleInfo,
   CachedMapResource,
-  ResourceKey
+  ResourceKey,
+  resourceKeyList,
+  ResourceKeyList,
+  ResourceKeyUtils,
+  AdminRoleInfoFragment,
+  AdminConnectionGrantInfo
 } from '@cloudbeaver/core-sdk';
 import { MetadataMap } from '@cloudbeaver/core-utils';
 
+const NEW_ROLE_SYMBOL = Symbol('new-role');
+
+export type RoleInfo = AdminRoleInfoFragment;
+type NewRole = RoleInfo & { [NEW_ROLE_SYMBOL]: boolean; timestamp: number };
+
 @injectable()
-export class RolesResource extends CachedMapResource<string, AdminRoleInfo> {
+export class RolesResource extends CachedMapResource<string, RoleInfo> {
+  static keyAll = resourceKeyList(['all'], 'all');
+
   private loadedKeyMetadata: MetadataMap<string, boolean>;
   constructor(private graphQLService: GraphQLService) {
     super();
@@ -31,30 +42,113 @@ export class RolesResource extends CachedMapResource<string, AdminRoleInfo> {
     return this.data.has(id);
   }
 
-  async loadAll() {
-    await this.load('all');
+  async loadAll(): Promise<Map<string, RoleInfo>> {
+    await this.load(RolesResource.keyAll);
     return this.data;
   }
 
-  async refreshAll() {
-    await this.refresh('all');
+  async refreshAll(): Promise<Map<string, RoleInfo>> {
+    await this.refresh(RolesResource.keyAll);
     return this.data;
   }
 
-  protected async loader(key: ResourceKey<string>): Promise<Map<string, AdminRoleInfo>> {
-    const roleId = key === 'all' ? undefined : key as string;
+  async createRole(roleInfo: RoleInfo): Promise<RoleInfo> {
+    const response = await this.graphQLService.sdk.createRole(roleInfo);
 
-    const { roles } = await this.graphQLService.sdk.getRolesList({ roleId });
+    const newRole: NewRole = {
+      ...response.role,
+      [NEW_ROLE_SYMBOL]: true,
+      timestamp: Date.now(),
+    };
 
-    if (key === 'all') {
-      this.data.clear();
-      this.loadedKeyMetadata.set('all', true);
-    }
+    this.updateRoles(newRole);
 
-    for (const role of roles) {
-      this.set(role.roleId, role as AdminRoleInfo);
-    }
+    return this.get(roleInfo.roleId)!;
+  }
+
+  async updateRole(roleInfo: RoleInfo): Promise<RoleInfo> {
+    const { role } = await this.graphQLService.sdk.updateRole(roleInfo);
+
+    this.updateRoles(role);
+
+    return this.get(roleInfo.roleId)!;
+  }
+
+  async deleteRole(key: ResourceKey<string>): Promise<Map<string, RoleInfo>> {
+    await ResourceKeyUtils.forEachAsync(key, async key => {
+      await this.graphQLService.sdk.deleteRole({
+        roleId: key,
+      });
+      this.delete(key);
+    });
 
     return this.data;
   }
+
+  async loadGrantedUsers(roleId: string): Promise<string[]> {
+    const { role } = await this.graphQLService.sdk.getRoleGrantedUsers({ roleId });
+    return role[0].grantedUsers;
+  }
+
+  async getSubjectConnectionAccess(subjectId: string): Promise<AdminConnectionGrantInfo[]> {
+    const { grantInfo } = await this.graphQLService.sdk.getSubjectConnectionAccess({ subjectId });
+    return grantInfo;
+  }
+
+  protected async loader(key: ResourceKey<string>): Promise<Map<string, RoleInfo>> {
+    const all = ResourceKeyUtils.hasMark(key, RolesResource.keyAll.mark);
+
+    await ResourceKeyUtils.forEachAsync(all ? RolesResource.keyAll : key, async key => {
+      const { roles } = await this.graphQLService.sdk.getRolesList({
+        roleId: !all ? key : undefined,
+      });
+
+      if (all) {
+        this.data.clear();
+      }
+
+      this.updateRoles(...roles);
+
+      if (all) {
+        this.loadedKeyMetadata.set(RolesResource.keyAll.list[0], true);
+      }
+    });
+
+    return this.data;
+  }
+
+  cleanNewFlags(): void {
+    for (const role of this.data.values()) {
+      (role as NewRole)[NEW_ROLE_SYMBOL] = false;
+    }
+  }
+
+  private updateRoles(...roles: RoleInfo[]): ResourceKeyList<string> {
+    const key = resourceKeyList(roles.map(role => role.roleId));
+
+    const oldRoles = this.get(key);
+    this.set(key, oldRoles.map((role, i) => ({ ...role, ...roles[i] })));
+
+    return key;
+  }
+}
+
+function isNewRole(role: RoleInfo | NewRole): role is NewRole {
+  return (role as NewRole)[NEW_ROLE_SYMBOL];
+}
+
+export function compareRoles(a: RoleInfo, b: RoleInfo): number {
+  if (isNewRole(a) && isNewRole(b)) {
+    return b.timestamp - a.timestamp;
+  }
+
+  if (isNewRole(b)) {
+    return 1;
+  }
+
+  if (isNewRole(a)) {
+    return -1;
+  }
+
+  return a.roleId.localeCompare(b.roleId);
 }
diff --git a/webapp/packages/core-authentication/src/UsersResource.ts b/webapp/packages/core-authentication/src/UsersResource.ts
index 54fd396ba2..c0ee044ff8 100644
--- a/webapp/packages/core-authentication/src/UsersResource.ts
+++ b/webapp/packages/core-authentication/src/UsersResource.ts
@@ -182,6 +182,10 @@ export class UsersResource extends CachedMapResource<string, AdminUser, UserReso
     this.loadedKeyMetadata.set(UsersResource.keyAll, false);
   }
 
+  isActiveUser(userId: string): boolean {
+    return this.authInfoService.userInfo?.userId === userId;
+  }
+
   protected async loader(key: ResourceKey<string>, includes: string[] | undefined): Promise<Map<string, AdminUser>> {
     await ResourceKeyUtils.forEachAsync(key, async key => {
       const { users } = await this.graphQLService.sdk.getUsersList({
@@ -206,10 +210,6 @@ export class UsersResource extends CachedMapResource<string, AdminUser, UserReso
     return this.data;
   }
 
-  private isActiveUser(userId: string) {
-    return this.authInfoService.userInfo?.userId === userId;
-  }
-
   private getDefaultIncludes(): UserResourceIncludes {
     return {
       customIncludeOriginDetails: false,
diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
index 6b733ce652..ce3017bf13 100644
--- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
@@ -107,7 +107,7 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
   const [toggled, setToggled] = useState(!toggleMode);
 
   const filter = useCallback((value: string | number, name?: string) => {
-    value = String(value).trim();
+    value = String(value);
 
     if (state && name) {
       state[name] = value;
diff --git a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
index 61ff46b9ec..e50f8959ea 100644
--- a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
@@ -22,6 +22,7 @@ type Props = {
   align?: 'left' | 'center' | 'right' | 'justify' | 'char';
   className?: string;
   centerContent?: boolean;
+  ellipsis?: boolean;
   flex?: boolean;
   expand?: boolean;
   onClick?: () => void;
@@ -32,6 +33,7 @@ export const TableColumnValue = observer<Props>(function TableColumnValue({
   align,
   children,
   centerContent,
+  ellipsis,
   flex,
   expand,
   className,
@@ -74,7 +76,7 @@ export const TableColumnValue = observer<Props>(function TableColumnValue({
     <td
       align={align}
       className={className}
-      {...use({ centerContent })}
+      {...use({ centerContent, ellipsis })}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       {...rest}
diff --git a/webapp/packages/core-blocks/src/locales/it.es b/webapp/packages/core-blocks/src/locales/it.ts
similarity index 100%
rename from webapp/packages/core-blocks/src/locales/it.es
rename to webapp/packages/core-blocks/src/locales/it.ts
diff --git a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
index bb27993ba7..3696e3c006 100644
--- a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
+++ b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
@@ -11,6 +11,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'reshadow';
 
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
 import {
   Table,
   TableBody,
@@ -22,7 +23,7 @@ import {
   useObjectRef
 } from '@cloudbeaver/core-blocks';
 import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
-import type { AdminRoleInfo, AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 import { ConnectionAccessTableHeader, IFilterState } from './ConnectionAccessTableHeader/ConnectionAccessTableHeader';
@@ -59,7 +60,7 @@ const styles = composes(
 
 interface Props {
   grantedUsers: AdminUserInfoFragment[];
-  grantedRoles: AdminRoleInfo[];
+  grantedRoles: RoleInfo[];
   disabled: boolean;
   onRevoke: (subjectIds: string[]) => void;
   onEdit: () => void;
diff --git a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
index 0e1c42e59e..6c240440bd 100644
--- a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
+++ b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
@@ -11,6 +11,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'reshadow';
 
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
 import {
   Table,
   TableBody,
@@ -22,7 +23,7 @@ import {
   useObjectRef,
 } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
-import type { AdminRoleInfo, AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 import { ConnectionAccessTableHeader, IFilterState } from './ConnectionAccessTableHeader/ConnectionAccessTableHeader';
@@ -59,7 +60,7 @@ const styles = composes(
 
 interface Props {
   userList: AdminUserInfoFragment[];
-  roleList: AdminRoleInfo[];
+  roleList: RoleInfo[];
   grantedSubjects: string[];
   onGrant: (subjectIds: string[]) => void;
   disabled: boolean;
diff --git a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/getFilteredSubjects.ts b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/getFilteredSubjects.ts
index 5fd9d160bc..dd8eb77809 100644
--- a/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/getFilteredSubjects.ts
+++ b/webapp/packages/core-connections/src/ConnectionForm/ConnectionAccess/getFilteredSubjects.ts
@@ -6,7 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { AdminRoleInfo, AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
 
 /**
  * @param  {AdminUserInfoFragment[]} users
@@ -22,7 +23,7 @@ export function getFilteredUsers(users: AdminUserInfoFragment[], filter: string)
  * @param  {AdminRoleInfo[]} roles
  * @param  {string} filter
  */
-export function getFilteredRoles(roles: AdminRoleInfo[], filter: string): AdminRoleInfo[] {
+export function getFilteredRoles(roles: RoleInfo[], filter: string): RoleInfo[] {
   return roles
     .filter(role => role.roleName?.toLowerCase().includes(filter.toLowerCase()) && role.roleId !== 'admin')
     .sort((a, b) => (a.roleName ?? '').localeCompare(b.roleName ?? ''));
diff --git a/webapp/packages/core-localization/src/locales/en.ts b/webapp/packages/core-localization/src/locales/en.ts
index b9b9b22d20..65076d62c8 100644
--- a/webapp/packages/core-localization/src/locales/en.ts
+++ b/webapp/packages/core-localization/src/locales/en.ts
@@ -34,6 +34,10 @@ export const defaultENLocale = [
   ['ui_clipboard_access_denied_message', 'You need to give access to clipboard to use some of the app features'],
   ['ui_reveal_password', 'Show or hide password'],
   ['ui_page_not_found', 'Page is not found'],
+  ['ui_revoke', 'Revoke'],
+  ['ui_grant', 'Grant'],
+  ['ui_edit', 'Edit'],
+
   ['root_permission_denied', 'You have no permissions'],
   ['app_root_session_expire_warning_title', 'Session is about to expire'],
   ['app_root_session_expire_warning_message', 'Your session will expire in less than 5 minutes. To keep working, close this popup.'],
diff --git a/webapp/packages/core-localization/src/locales/ru.ts b/webapp/packages/core-localization/src/locales/ru.ts
index 3300e8f1c7..f99f218444 100644
--- a/webapp/packages/core-localization/src/locales/ru.ts
+++ b/webapp/packages/core-localization/src/locales/ru.ts
@@ -32,6 +32,10 @@ export const defaultRULocale = [
   ['ui_clipboard_access_denied_message', 'Чтобы использовать некоторые функции приложения, необходим доступ к буферу обмена'],
   ['ui_reveal_password', 'Показать или скрыть пароль'],
   ['ui_page_not_found', 'Страница не найдена'],
+  ['ui_revoke', 'Запретить'],
+  ['ui_grant', 'Разрешить'],
+  ['ui_edit', 'Редактировать'],
+
   ['root_permission_denied', 'Отказано в доступе'],
   ['app_root_session_expire_warning_title', 'Ваша сессия скоро закончится'],
   ['app_root_session_expire_warning_message', 'Ваша сессия закончится меньше чем через 5 минут. Чтобы продолжить работать, закройте этот диалог.'],
diff --git a/webapp/packages/core-sdk/src/queries/authentication/Roles/createRole.gql b/webapp/packages/core-sdk/src/queries/authentication/Roles/createRole.gql
new file mode 100644
index 0000000000..72fc091327
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/authentication/Roles/createRole.gql
@@ -0,0 +1,5 @@
+query createRole($roleId: ID!, $roleName: String, $description: String ) {
+  role: createRole(roleId: $roleId, roleName: $roleName, description: $description) {
+    ...AdminRoleInfo
+  }
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/authentication/Roles/deleteRole.gql b/webapp/packages/core-sdk/src/queries/authentication/Roles/deleteRole.gql
new file mode 100644
index 0000000000..9ccaa6c1e1
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/authentication/Roles/deleteRole.gql
@@ -0,0 +1,3 @@
+query deleteRole($roleId: ID!) {
+  deleteRole(roleId: $roleId)
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/authentication/Roles/getRoleGrantedUsers.gql b/webapp/packages/core-sdk/src/queries/authentication/Roles/getRoleGrantedUsers.gql
new file mode 100644
index 0000000000..398b2a64de
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/authentication/Roles/getRoleGrantedUsers.gql
@@ -0,0 +1,5 @@
+query getRoleGrantedUsers($roleId: ID!) {
+  role: listRoles(roleId: $roleId) {
+    grantedUsers
+  }
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/authentication/users/getRolesList.gql b/webapp/packages/core-sdk/src/queries/authentication/Roles/getRolesList.gql
similarity index 56%
rename from webapp/packages/core-sdk/src/queries/authentication/users/getRolesList.gql
rename to webapp/packages/core-sdk/src/queries/authentication/Roles/getRolesList.gql
index 2d49828a8b..8768413470 100644
--- a/webapp/packages/core-sdk/src/queries/authentication/users/getRolesList.gql
+++ b/webapp/packages/core-sdk/src/queries/authentication/Roles/getRolesList.gql
@@ -1,8 +1,5 @@
 query getRolesList($roleId: ID) {
   roles: listRoles(roleId: $roleId) {
-    roleId
-    roleName
-    description
-    #rolePermissions
+    ...AdminRoleInfo
   } 
 }
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/authentication/Roles/updateRole.gql b/webapp/packages/core-sdk/src/queries/authentication/Roles/updateRole.gql
new file mode 100644
index 0000000000..a35a5ba5f7
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/authentication/Roles/updateRole.gql
@@ -0,0 +1,5 @@
+query updateRole($roleId: ID!, $roleName: String, $description: String ) {
+  role: updateRole(roleId: $roleId, roleName: $roleName, description: $description) {
+    ...AdminRoleInfo
+  }
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/connections/administration/getSubjectConnectionAccess.gql b/webapp/packages/core-sdk/src/queries/connections/administration/getSubjectConnectionAccess.gql
new file mode 100644
index 0000000000..321aec3a52
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/connections/administration/getSubjectConnectionAccess.gql
@@ -0,0 +1,7 @@
+query getSubjectConnectionAccess($subjectId: ID) {
+  grantInfo: getSubjectConnectionAccess(subjectId: $subjectId) {
+    connectionId,
+    subjectId,
+    subjectType,
+  }
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/connections/administration/setSubjectConnectionAccess.gql b/webapp/packages/core-sdk/src/queries/connections/administration/setSubjectConnectionAccess.gql
new file mode 100644
index 0000000000..9a64d6b677
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/connections/administration/setSubjectConnectionAccess.gql
@@ -0,0 +1,3 @@
+query setSubjectConnectionAccess($subjectId: ID!, $connections: [ID!]!) {
+  setSubjectConnectionAccess(subjectId: $subjectId, connections: $connections)
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/queries/fragments/AdminRoleInfo.gql b/webapp/packages/core-sdk/src/queries/fragments/AdminRoleInfo.gql
new file mode 100644
index 0000000000..96d091863e
--- /dev/null
+++ b/webapp/packages/core-sdk/src/queries/fragments/AdminRoleInfo.gql
@@ -0,0 +1,5 @@
+fragment AdminRoleInfo on AdminRoleInfo {
+  roleId
+  roleName
+  description
+}
\ No newline at end of file
diff --git a/webapp/packages/core-sdk/src/sdk.ts b/webapp/packages/core-sdk/src/sdk.ts
index 19e1b1bdde..9ecb2c3b22 100644
--- a/webapp/packages/core-sdk/src/sdk.ts
+++ b/webapp/packages/core-sdk/src/sdk.ts
@@ -52,6 +52,8 @@ export interface AdminRoleInfo {
   roleId: Scalars['ID'];
   roleName?: Maybe<Scalars['String']>;
   description?: Maybe<Scalars['String']>;
+  grantedUsers: Array<Scalars['ID']>;
+  grantedConnections: AdminConnectionGrantInfo[];
   rolePermissions: Array<Maybe<Scalars['ID']>>;
 }
 
@@ -1110,6 +1112,40 @@ export type AsyncTaskCancelMutationVariables = Exact<{
 
 export interface AsyncTaskCancelMutation { result: Mutation['asyncTaskCancel'] }
 
+export type CreateRoleQueryVariables = Exact<{
+  roleId: Scalars['ID'];
+  roleName?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+}>;
+
+export interface CreateRoleQuery { role: AdminRoleInfoFragment }
+
+export type DeleteRoleQueryVariables = Exact<{
+  roleId: Scalars['ID'];
+}>;
+
+export type DeleteRoleQuery = Pick<Query, 'deleteRole'>;
+
+export type GetRoleGrantedUsersQueryVariables = Exact<{
+  roleId: Scalars['ID'];
+}>;
+
+export interface GetRoleGrantedUsersQuery { role: Array<Maybe<Pick<AdminRoleInfo, 'grantedUsers'>>> }
+
+export type GetRolesListQueryVariables = Exact<{
+  roleId?: Maybe<Scalars['ID']>;
+}>;
+
+export interface GetRolesListQuery { roles: Array<Maybe<AdminRoleInfoFragment>> }
+
+export type UpdateRoleQueryVariables = Exact<{
+  roleId: Scalars['ID'];
+  roleName?: Maybe<Scalars['String']>;
+  description?: Maybe<Scalars['String']>;
+}>;
+
+export interface UpdateRoleQuery { role: AdminRoleInfoFragment }
+
 export type AuthChangeLocalPasswordQueryVariables = Exact<{
   oldPassword: Scalars['String'];
   newPassword: Scalars['String'];
@@ -1199,12 +1235,6 @@ export type GetPermissionsListQueryVariables = Exact<{
 
 export interface GetPermissionsListQuery { permissions: Array<Maybe<Pick<AdminPermissionInfo, 'id' | 'label' | 'description' | 'provider' | 'category'>>> }
 
-export type GetRolesListQueryVariables = Exact<{
-  roleId?: Maybe<Scalars['ID']>;
-}>;
-
-export interface GetRolesListQuery { roles: Array<Maybe<Pick<AdminRoleInfo, 'roleId' | 'roleName' | 'description'>>> }
-
 export type GetUserGrantedConnectionsQueryVariables = Exact<{
   userId?: Maybe<Scalars['ID']>;
 }>;
@@ -1290,6 +1320,12 @@ export type GetConnectionsQueryVariables = Exact<{
 
 export interface GetConnectionsQuery { connections: DatabaseConnectionFragment[] }
 
+export type GetSubjectConnectionAccessQueryVariables = Exact<{
+  subjectId?: Maybe<Scalars['ID']>;
+}>;
+
+export interface GetSubjectConnectionAccessQuery { grantInfo: Array<Pick<AdminConnectionGrantInfo, 'connectionId' | 'subjectId' | 'subjectType'>> }
+
 export type SearchDatabasesQueryVariables = Exact<{
   hosts: Array<Scalars['String']> | Scalars['String'];
 }>;
@@ -1303,6 +1339,13 @@ export type SetConnectionAccessQueryVariables = Exact<{
 
 export type SetConnectionAccessQuery = Pick<Query, 'setConnectionSubjectAccess'>;
 
+export type SetSubjectConnectionAccessQueryVariables = Exact<{
+  subjectId: Scalars['ID'];
+  connections: Array<Scalars['ID']> | Scalars['ID'];
+}>;
+
+export type SetSubjectConnectionAccessQuery = Pick<Query, 'setSubjectConnectionAccess'>;
+
 export type UpdateConnectionConfigurationQueryVariables = Exact<{
   id: Scalars['ID'];
   config: ConnectionConfig;
@@ -1534,6 +1577,8 @@ export type NavGetStructContainersQueryVariables = Exact<{
 
 export interface NavGetStructContainersQuery { navGetStructContainers: { catalogList: Array<Pick<DatabaseObjectInfo, 'name' | 'description' | 'type' | 'features'>>; schemaList: Array<Pick<DatabaseObjectInfo, 'name' | 'description' | 'type' | 'features'>> } }
 
+export type AdminRoleInfoFragment = Pick<AdminRoleInfo, 'roleId' | 'roleName' | 'description'>;
+
 export type AdminUserInfoFragment = (
   Pick<AdminUserInfo, 'userId' | 'grantedRoles' | 'linkedAuthProviders'>
   & { origins: ObjectOriginInfoFragment[] }
@@ -1835,6 +1880,13 @@ export type SqlResultCloseMutationVariables = Exact<{
 
 export interface SqlResultCloseMutation { result: Mutation['sqlResultClose'] }
 
+export const AdminRoleInfoFragmentDoc = `
+    fragment AdminRoleInfo on AdminRoleInfo {
+  roleId
+  roleName
+  description
+}
+    `;
 export const ObjectOriginInfoFragmentDoc = `
     fragment ObjectOriginInfo on ObjectOrigin {
   type
@@ -2060,6 +2112,47 @@ export const AsyncTaskCancelDocument = `
   result: asyncTaskCancel(id: $taskId)
 }
     `;
+export const CreateRoleDocument = `
+    query createRole($roleId: ID!, $roleName: String, $description: String) {
+  role: createRole(
+    roleId: $roleId
+    roleName: $roleName
+    description: $description
+  ) {
+    ...AdminRoleInfo
+  }
+}
+    ${AdminRoleInfoFragmentDoc}`;
+export const DeleteRoleDocument = `
+    query deleteRole($roleId: ID!) {
+  deleteRole(roleId: $roleId)
+}
+    `;
+export const GetRoleGrantedUsersDocument = `
+    query getRoleGrantedUsers($roleId: ID!) {
+  role: listRoles(roleId: $roleId) {
+    grantedUsers
+  }
+}
+    `;
+export const GetRolesListDocument = `
+    query getRolesList($roleId: ID) {
+  roles: listRoles(roleId: $roleId) {
+    ...AdminRoleInfo
+  }
+}
+    ${AdminRoleInfoFragmentDoc}`;
+export const UpdateRoleDocument = `
+    query updateRole($roleId: ID!, $roleName: String, $description: String) {
+  role: updateRole(
+    roleId: $roleId
+    roleName: $roleName
+    description: $description
+  ) {
+    ...AdminRoleInfo
+  }
+}
+    ${AdminRoleInfoFragmentDoc}`;
 export const AuthChangeLocalPasswordDocument = `
     query authChangeLocalPassword($oldPassword: String!, $newPassword: String!) {
   authChangeLocalPassword(oldPassword: $oldPassword, newPassword: $newPassword)
@@ -2193,15 +2286,6 @@ export const GetPermissionsListDocument = `
   }
 }
     `;
-export const GetRolesListDocument = `
-    query getRolesList($roleId: ID) {
-  roles: listRoles(roleId: $roleId) {
-    roleId
-    roleName
-    description
-  }
-}
-    `;
 export const GetUserGrantedConnectionsDocument = `
     query getUserGrantedConnections($userId: ID) {
   grantedConnections: getSubjectConnectionAccess(subjectId: $userId) {
@@ -2280,6 +2364,15 @@ export const GetConnectionsDocument = `
   }
 }
     ${DatabaseConnectionFragmentDoc}`;
+export const GetSubjectConnectionAccessDocument = `
+    query getSubjectConnectionAccess($subjectId: ID) {
+  grantInfo: getSubjectConnectionAccess(subjectId: $subjectId) {
+    connectionId
+    subjectId
+    subjectType
+  }
+}
+    `;
 export const SearchDatabasesDocument = `
     query searchDatabases($hosts: [String!]!) {
   databases: searchConnections(hostNames: $hosts) {
@@ -2296,6 +2389,11 @@ export const SetConnectionAccessDocument = `
   setConnectionSubjectAccess(connectionId: $connectionId, subjects: $subjects)
 }
     `;
+export const SetSubjectConnectionAccessDocument = `
+    query setSubjectConnectionAccess($subjectId: ID!, $connections: [ID!]!) {
+  setSubjectConnectionAccess(subjectId: $subjectId, connections: $connections)
+}
+    `;
 export const UpdateConnectionConfigurationDocument = `
     query updateConnectionConfiguration($id: ID!, $config: ConnectionConfig!, $includeOrigin: Boolean!, $customIncludeOriginDetails: Boolean!, $includeAuthProperties: Boolean!, $customIncludeNetworkHandlerCredentials: Boolean!) {
   connection: updateConnectionConfiguration(id: $id, config: $config) {
@@ -2962,6 +3060,21 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
     asyncTaskCancel(variables: AsyncTaskCancelMutationVariables): Promise<AsyncTaskCancelMutation> {
       return withWrapper(() => client.request<AsyncTaskCancelMutation>(AsyncTaskCancelDocument, variables));
     },
+    createRole(variables: CreateRoleQueryVariables): Promise<CreateRoleQuery> {
+      return withWrapper(() => client.request<CreateRoleQuery>(CreateRoleDocument, variables));
+    },
+    deleteRole(variables: DeleteRoleQueryVariables): Promise<DeleteRoleQuery> {
+      return withWrapper(() => client.request<DeleteRoleQuery>(DeleteRoleDocument, variables));
+    },
+    getRoleGrantedUsers(variables: GetRoleGrantedUsersQueryVariables): Promise<GetRoleGrantedUsersQuery> {
+      return withWrapper(() => client.request<GetRoleGrantedUsersQuery>(GetRoleGrantedUsersDocument, variables));
+    },
+    getRolesList(variables?: GetRolesListQueryVariables): Promise<GetRolesListQuery> {
+      return withWrapper(() => client.request<GetRolesListQuery>(GetRolesListDocument, variables));
+    },
+    updateRole(variables: UpdateRoleQueryVariables): Promise<UpdateRoleQuery> {
+      return withWrapper(() => client.request<UpdateRoleQuery>(UpdateRoleDocument, variables));
+    },
     authChangeLocalPassword(variables: AuthChangeLocalPasswordQueryVariables): Promise<AuthChangeLocalPasswordQuery> {
       return withWrapper(() => client.request<AuthChangeLocalPasswordQuery>(AuthChangeLocalPasswordDocument, variables));
     },
@@ -2998,9 +3111,6 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
     getPermissionsList(variables?: GetPermissionsListQueryVariables): Promise<GetPermissionsListQuery> {
       return withWrapper(() => client.request<GetPermissionsListQuery>(GetPermissionsListDocument, variables));
     },
-    getRolesList(variables?: GetRolesListQueryVariables): Promise<GetRolesListQuery> {
-      return withWrapper(() => client.request<GetRolesListQuery>(GetRolesListDocument, variables));
-    },
     getUserGrantedConnections(variables?: GetUserGrantedConnectionsQueryVariables): Promise<GetUserGrantedConnectionsQuery> {
       return withWrapper(() => client.request<GetUserGrantedConnectionsQuery>(GetUserGrantedConnectionsDocument, variables));
     },
@@ -3034,12 +3144,18 @@ export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper =
     getConnections(variables: GetConnectionsQueryVariables): Promise<GetConnectionsQuery> {
       return withWrapper(() => client.request<GetConnectionsQuery>(GetConnectionsDocument, variables));
     },
+    getSubjectConnectionAccess(variables?: GetSubjectConnectionAccessQueryVariables): Promise<GetSubjectConnectionAccessQuery> {
+      return withWrapper(() => client.request<GetSubjectConnectionAccessQuery>(GetSubjectConnectionAccessDocument, variables));
+    },
     searchDatabases(variables: SearchDatabasesQueryVariables): Promise<SearchDatabasesQuery> {
       return withWrapper(() => client.request<SearchDatabasesQuery>(SearchDatabasesDocument, variables));
     },
     setConnectionAccess(variables: SetConnectionAccessQueryVariables): Promise<SetConnectionAccessQuery> {
       return withWrapper(() => client.request<SetConnectionAccessQuery>(SetConnectionAccessDocument, variables));
     },
+    setSubjectConnectionAccess(variables: SetSubjectConnectionAccessQueryVariables): Promise<SetSubjectConnectionAccessQuery> {
+      return withWrapper(() => client.request<SetSubjectConnectionAccessQuery>(SetSubjectConnectionAccessDocument, variables));
+    },
     updateConnectionConfiguration(variables: UpdateConnectionConfigurationQueryVariables): Promise<UpdateConnectionConfigurationQuery> {
       return withWrapper(() => client.request<UpdateConnectionConfigurationQuery>(UpdateConnectionConfigurationDocument, variables));
     },
diff --git a/webapp/packages/core-theming/src/styles/_table.scss b/webapp/packages/core-theming/src/styles/_table.scss
index 9751dc5e42..df826705ea 100644
--- a/webapp/packages/core-theming/src/styles/_table.scss
+++ b/webapp/packages/core-theming/src/styles/_table.scss
@@ -57,7 +57,7 @@
     }
 
     &[use|disabled] {
-      opacity: .85;
+      opacity: 0.85;
     }
   }
 
@@ -89,6 +89,12 @@
     padding: 0 16px;
     transition: padding ease-in-out 0.24s;
 
+    &[use|ellipsis] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     &[use|centerContent] > td-flex {
       align-items: center;
       justify-content: center;
diff --git a/webapp/packages/core-utils/src/index.ts b/webapp/packages/core-utils/src/index.ts
index 17ecf54ff0..c43e07b289 100644
--- a/webapp/packages/core-utils/src/index.ts
+++ b/webapp/packages/core-utils/src/index.ts
@@ -25,3 +25,4 @@ export * from './isValidUrl';
 export * from './isImageFormat';
 export * from './getCookies';
 export * from './getUniqueName';
+export * from './isMapsEqual';
diff --git a/webapp/packages/core-utils/src/isArraysEqual.ts b/webapp/packages/core-utils/src/isArraysEqual.ts
index 16a3f1ad52..e02ceb5bb2 100644
--- a/webapp/packages/core-utils/src/isArraysEqual.ts
+++ b/webapp/packages/core-utils/src/isArraysEqual.ts
@@ -11,5 +11,5 @@ export function isArraysEqual<T>(first: T[], second: T[]): boolean {
     return false;
   }
 
-  return !first.some(region => !second.includes(region));
+  return !first.some(value => !second.includes(value));
 }
diff --git a/webapp/packages/core-utils/src/isMapsEqual.ts b/webapp/packages/core-utils/src/isMapsEqual.ts
new file mode 100644
index 0000000000..6ead9e44dd
--- /dev/null
+++ b/webapp/packages/core-utils/src/isMapsEqual.ts
@@ -0,0 +1,20 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export function isMapsEqual(map1: Map<any, any>, map2: Map<any, any>): boolean {
+  if (map1.size !== map2.size) {
+    return false;
+  }
+
+  for (const [key, value] of map1) {
+    if (!map2.has(key) || map2.get(key) !== value) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/webapp/packages/plugin-authentication/public/icons/tab_role.svg b/webapp/packages/plugin-authentication/public/icons/tab_role.svg
new file mode 100644
index 0000000000..d472228791
--- /dev/null
+++ b/webapp/packages/plugin-authentication/public/icons/tab_role.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.62055 4.47056C2.62055 2.63689 4.10744 1.15 5.94111 1.15C7.77538 1.15 9.26168 2.637 9.26168 4.47056C9.26168 6.30413 7.77538 7.79112 5.94111 7.79112C4.10744 7.79112 2.62055 6.30423 2.62055 4.47056ZM5.94111 2.85C5.04632 2.85 4.32055 3.57577 4.32055 4.47056C4.32055 5.36535 5.04632 6.09112 5.94111 6.09112C6.83628 6.09112 7.56168 5.36546 7.56168 4.47056C7.56168 3.57566 6.83628 2.85 5.94111 2.85ZM10.049 1.30344C10.367 1.20471 10.7069 1.15 11.0589 1.15C12.8925 1.15 14.3794 2.63689 14.3794 4.47056C14.3794 6.30423 12.8925 7.79112 11.0589 7.79112C10.7069 7.79112 10.3577 7.73634 10.024 7.6213C9.77146 7.53422 9.57452 7.33346 9.49232 7.07926C9.41011 6.82506 9.4522 6.547 9.60596 6.32852C9.98421 5.79104 10.2089 5.15261 10.2089 4.47056C10.2089 3.78675 9.98311 3.14032 9.60596 2.60441C9.44953 2.38214 9.40884 2.09847 9.49646 1.84118C9.58408 1.5839 9.78946 1.38403 10.049 1.30344ZM11.6697 2.96914C11.8236 3.44201 11.9089 3.94676 11.9089 4.47056C11.9089 4.99649 11.8229 5.50079 11.6682 5.9726C12.2612 5.73171 12.6794 5.14984 12.6794 4.47056C12.6794 3.79186 12.2619 3.2104 11.6697 2.96914ZM2.53737 9.41669C3.66938 8.96392 5.01199 8.73832 5.94111 8.73832C6.87047 8.73832 8.21308 8.96392 9.34505 9.41669C9.91169 9.64334 10.4791 9.94783 10.9184 10.3534C11.3637 10.7644 11.7322 11.3353 11.7322 12.0589V13.7056C11.7322 14.175 11.3517 14.5556 10.8822 14.5556H0.999994C0.530552 14.5556 0.149994 14.175 0.149994 13.7056V12.0589C0.149994 11.3353 0.518625 10.7644 0.963951 10.3533C1.40331 9.94781 1.97071 9.64333 2.53737 9.41669ZM2.117 11.6025C1.89316 11.8091 1.84999 11.9589 1.84999 12.0589V12.8556H10.0322V12.0589C10.0322 11.9588 9.98905 11.8091 9.76526 11.6025C9.5355 11.3904 9.17644 11.1802 8.7137 10.9951C7.78691 10.6244 6.65896 10.4383 5.94111 10.4383C5.22352 10.4383 4.09557 10.6244 3.16869 10.9951C2.70592 11.1802 2.3468 11.3904 2.117 11.6025ZM11.6246 9.35691C11.7873 9.01241 12.1594 8.81827 12.5351 8.88184C13.4524 9.0371 14.2734 9.3484 14.8785 9.88053C15.5101 10.4359 15.85 11.1847 15.85 12.0589V13.7056C15.85 14.175 15.4694 14.5556 15 14.5556H13.5294C13.06 14.5556 12.6794 14.175 12.6794 13.7056V12.0589C12.6794 11.3856 12.3766 10.831 11.836 10.3618C11.5483 10.1121 11.4619 9.7014 11.6246 9.35691Z" fill="#EE8A18"/>
+</svg>
diff --git a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsAdministration.tsx
index b007dce76b..bf2a17700d 100644
--- a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsAdministration.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsAdministration.tsx
@@ -16,9 +16,9 @@ import { useTranslate } from '@cloudbeaver/core-localization';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
 
 import { AuthConfigurationsTable } from './AuthConfigurationsTable/AuthConfigurationsTable';
+import { useConfigurationsTable } from './AuthConfigurationsTable/useConfigurationsTable';
 import { CreateAuthConfiguration } from './CreateAuthConfiguration';
 import { CreateAuthConfigurationService } from './CreateAuthConfigurationService';
-import { useConfigurationsTable } from './useConfigurationsTable';
 
 const styles = composes(
   css`
diff --git a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfiguration.tsx b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfiguration.tsx
index 7db66d6e8b..aeff1fe365 100644
--- a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfiguration.tsx
+++ b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfiguration.tsx
@@ -59,9 +59,9 @@ export const AuthConfiguration = observer<Props>(function AuthConfiguration({ co
       <TableColumnValue centerContent flex expand>
         <StaticImage icon={icon} title={`${configuration.displayName} icon`} />
       </TableColumnValue>
-      <TableColumnValue expand>{configuration.displayName}</TableColumnValue>
+      <TableColumnValue title={configuration.displayName} expand ellipsis>{configuration.displayName}</TableColumnValue>
       <TableColumnValue>{configuration.providerId}</TableColumnValue>
-      <TableColumnValue>{configuration.description || ''}</TableColumnValue>
+      <TableColumnValue title={configuration.description} ellipsis>{configuration.description || ''}</TableColumnValue>
       <TableColumnValue>
         <FieldCheckboxNew checked={configuration.disabled} disabled />
       </TableColumnValue>
diff --git a/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/useConfigurationsTable.tsx b/webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/useConfigurationsTable.tsx
similarity index 100%
rename from webapp/packages/plugin-authentication/src/Administration/IdentityProviders/useConfigurationsTable.tsx
rename to webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/useConfigurationsTable.tsx
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleContext.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleContext.ts
new file mode 100644
index 0000000000..c7714f27c3
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleContext.ts
@@ -0,0 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+
+export function roleContext(): RoleInfo {
+  return {
+    roleId: '',
+  };
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormConfigureContext.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormConfigureContext.ts
new file mode 100644
index 0000000000..5dc5e3f83c
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormConfigureContext.ts
@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import type { IExecutionContextProvider } from '@cloudbeaver/core-executor';
+
+import type { IRoleFormState } from '../IRoleFormProps';
+
+export interface IRoleFormConfigureContext {
+  readonly info: RoleInfo | undefined;
+}
+
+export function roleFormConfigureContext(
+  contexts: IExecutionContextProvider<IRoleFormState>,
+  state: IRoleFormState
+): IRoleFormConfigureContext {
+  return {
+    info: state.info,
+  };
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormStateContext.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormStateContext.ts
new file mode 100644
index 0000000000..3e3c0e009b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/Contexts/roleFormStateContext.ts
@@ -0,0 +1,30 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export interface IRoleFormStateInfo {
+  edited: boolean;
+  disabled: boolean;
+  readonly: boolean;
+  statusMessage: string | null;
+}
+
+export interface IRoleFormStateContext extends IRoleFormStateInfo {
+  setStatusMessage: (message: string | null) => void;
+}
+
+export function roleFormStateContext(): IRoleFormStateContext {
+  return {
+    edited: false,
+    disabled: false,
+    readonly: false,
+    statusMessage: null,
+    setStatusMessage(message: string | null) {
+      this.statusMessage = message;
+    },
+  };
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRole.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRole.tsx
new file mode 100644
index 0000000000..70d3c29f77
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRole.tsx
@@ -0,0 +1,82 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { IconButton } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { Translate } from '@cloudbeaver/core-localization';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { CreateRoleService } from './CreateRoleService';
+import { RoleForm } from './RoleForm';
+
+const styles = composes(
+  css`
+    title-bar {
+      composes: theme-border-color-background from global;
+    }
+
+     role-create-content {
+      composes: theme-background-secondary theme-text-on-secondary from global;
+    }
+  `,
+  css`
+    role-create {
+      display: flex;
+      flex-direction: column;
+      height: 660px;
+      overflow: hidden;
+    }
+
+    title-bar {
+      composes: theme-typography--headline6 from global;
+      box-sizing: border-box;
+      padding: 16px 24px;
+      align-items: center;
+      display: flex;
+      font-weight: 400;
+      flex: auto 0 0;
+    }
+
+    role-create-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: auto;
+    }
+
+    fill {
+      flex: 1;
+    }
+  `
+);
+
+export const CreateRole: React.FC = observer(function CreateRole() {
+  const style = useStyles(styles);
+  const service = useService(CreateRoleService);
+
+  if (!service.data) {
+    return null;
+  }
+
+  return styled(style)(
+    <role-create>
+      <title-bar>
+        <Translate token='administration_roles_role_creation' />
+        <fill />
+        <IconButton name="cross" viewBox="0 0 16 16" onClick={service.cancelCreate} />
+      </title-bar>
+      <role-create-content>
+        <RoleForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
+      </role-create-content>
+    </role-create>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRoleService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRoleService.ts
new file mode 100644
index 0000000000..eb6f20ec94
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/CreateRoleService.ts
@@ -0,0 +1,54 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observable, makeObservable } from 'mobx';
+
+import { RolesResource } from '@cloudbeaver/core-authentication';
+import { injectable } from '@cloudbeaver/core-di';
+
+import type { IRoleFormState } from './IRoleFormProps';
+import { RoleFormService } from './RoleFormService';
+import { RoleFormState } from './RoleFormState';
+import { RolesAdministrationNavService } from './RolesAdministrationNavService';
+
+@injectable()
+export class CreateRoleService {
+  disabled = false;
+  data: IRoleFormState | null;
+
+  constructor(
+    private readonly rolesAdministrationNavService: RolesAdministrationNavService,
+    private readonly roleFormService: RoleFormService,
+    private readonly rolesResource: RolesResource
+  ) {
+    makeObservable(this, {
+      data: observable,
+      disabled: observable,
+    });
+
+    this.data = null;
+
+    this.cancelCreate = this.cancelCreate.bind(this);
+    this.create = this.create.bind(this);
+  }
+
+  cancelCreate(): void {
+    this.rolesAdministrationNavService.navToRoot();
+  }
+
+  fillData(): void {
+    this.data = new RoleFormState(
+      this.roleFormService,
+      this.rolesResource
+    );
+  }
+
+  create(): void {
+    this.rolesAdministrationNavService.navToCreate();
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/ConnectionList.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/ConnectionList.tsx
new file mode 100644
index 0000000000..afaa133d11
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/ConnectionList.tsx
@@ -0,0 +1,131 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useState } from 'react';
+import styled, { css } from 'reshadow';
+
+import {
+  Table,
+  TableBody,
+  TableItem,
+  TableColumnValue,
+  BASE_CONTAINERS_STYLES,
+  Group,
+  Button,
+  useObjectRef,
+  getComputed,
+} from '@cloudbeaver/core-blocks';
+import { DBDriverResource } from '@cloudbeaver/core-connections';
+import { useService } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import type { DatabaseConnectionFragment } from '@cloudbeaver/core-sdk';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { getFilteredConnections } from './getFilteredConnections';
+import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader';
+import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader';
+import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem';
+
+const styles = composes(
+  css`
+    Table {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    Group {
+      position: relative;
+    }
+    Group, container, table-container {
+      height: 100%;
+    }
+    container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    table-container {
+      overflow: auto;
+    }
+    GrantedConnectionsTableHeader {
+      flex: 0 0 auto;
+    }
+  `
+);
+
+interface Props {
+  connectionList: DatabaseConnectionFragment[];
+  grantedSubjects: string[];
+  onGrant: (subjectIds: string[]) => void;
+  disabled: boolean;
+}
+
+export const ConnectionList = observer<Props>(function ConnectionList({
+  connectionList,
+  grantedSubjects,
+  onGrant,
+  disabled,
+}) {
+  const props = useObjectRef({ onGrant });
+  const style = useStyles(styles, BASE_CONTAINERS_STYLES);
+  const translate = useTranslate();
+
+  const driversResource = useService(DBDriverResource);
+
+  const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
+  const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
+
+  const selected = getComputed(() => Array.from(selectedSubjects.values()).some(v => v));
+
+  const grant = useCallback(() => {
+    const selectedList = Array.from(selectedSubjects.entries()).filter(([key, value]) => value).map(([key]) => key);
+    props.onGrant(selectedList);
+    selectedSubjects.clear();
+  }, []);
+
+  const connections = getFilteredConnections(connectionList, filterState.filterValue);
+
+  return styled(style)(
+    <Group box medium overflow>
+      <container>
+        <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+          <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>{translate('ui_grant')}</Button>
+        </GrantedConnectionsTableHeader>
+        <table-container>
+          <Table selectedItems={selectedSubjects}>
+            <GrantedConnectionsTableInnerHeader />
+            <TableBody>
+              {!connections.length && filterState.filterValue && (
+                <TableItem item='tableInfo' selectDisabled>
+                  <TableColumnValue colSpan={5}>
+                    {translate('connections_connection_access_filter_no_result')}
+                  </TableColumnValue>
+                </TableItem>
+              )}
+              {connections.map(connection => {
+                const driver = driversResource.get(connection.driverId);
+                return (
+                  <GrantedConnectionsTableItem
+                    key={connection.id}
+                    id={connection.id}
+                    name={connection.name}
+                    host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
+                    icon={driver?.icon}
+                    disabled={disabled || grantedSubjects.includes(connection.id)}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        </table-container>
+      </container>
+    </Group>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnections.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnections.tsx
new file mode 100644
index 0000000000..47fcf450a5
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnections.tsx
@@ -0,0 +1,145 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { computed } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo } from 'react';
+import styled, { css } from 'reshadow';
+
+import {
+  BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group,
+  IconOrImage, Loader, TabContainerPanelComponent,
+  TextPlaceholder, useMapResource, useTab,
+} from '@cloudbeaver/core-blocks';
+import { ConnectionsResource, DBDriverResource, isCloudConnection } from '@cloudbeaver/core-connections';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import type { IRoleFormProps } from '../IRoleFormProps';
+import { ConnectionList } from './ConnectionList';
+import { GrantedConnectionList } from './GrantedConnectionsList';
+import { useGrantedConnections } from './useGrantedConnections';
+
+const styles = css`
+  ColoredContainer {
+    flex: 1;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  Group {
+    max-height: 100%;
+    position: relative;
+    overflow: auto !important;
+  }
+  info-item {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  IconOrImage {
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+  }
+  Loader {
+    z-index: 2;
+  }
+`;
+
+interface IInfoItem {
+  text: TLocalizationToken;
+  icon: string;
+}
+
+export const GrantedConnections: TabContainerPanelComponent<IRoleFormProps> = observer(function GrantedConnections({
+  tabId,
+  state: formState,
+}) {
+  const style = useStyles(BASE_CONTAINERS_STYLES, styles);
+  const translate = useTranslate();
+
+  const { state, edit, grant, load, revoke } = useGrantedConnections(formState.config, formState.mode);
+
+  const { selected } = useTab(tabId);
+
+  const dbDriverResource = useMapResource(DBDriverResource, selected ? 'all' : null);
+  const connections = useMapResource(ConnectionsResource, selected ? ConnectionsResource.keyAll : null);
+
+  const grantedConnections = useMemo(() => computed(() => connections.resource.values
+    .filter(connection => state.grantedSubjects.includes(connection.id))
+  ), [state.grantedSubjects, connections.resource]);
+
+  useEffect(() => {
+    if (selected && !state.loaded) {
+      load();
+    }
+  }, [selected, state.loaded, load]);
+
+  if (!selected) {
+    return null;
+  }
+
+  let infoItem: IInfoItem | null = null;
+
+  const unsaved = (formState.mode === 'edit' && (state.initialGrantedSubjects.length !== state.grantedSubjects.length
+    || state.initialGrantedSubjects.some(subject => !state.grantedSubjects.includes(subject))));
+  const cloudExists = connections.resource.values.some(isCloudConnection);
+
+  if (cloudExists) {
+    infoItem = {
+      text: 'connections_connection_access_cloud_placeholder',
+      icon: '/icons/info_icon.svg',
+    };
+  }
+
+  if (unsaved) {
+    infoItem = {
+      text: 'connections_connection_access_save_reminder',
+      icon: '/icons/info_icon.svg',
+    };
+  }
+
+  return styled(style)(
+    <Loader state={[connections, dbDriverResource, state]}>
+      {() => styled(style)(
+        <ColoredContainer parent gap vertical>
+          {!connections.resource.values.length ? (
+            <Group large>
+              <TextPlaceholder>{translate('administration_roles_role_granted_connections_empty')}</TextPlaceholder>
+            </Group>
+          ) : (
+            <>
+              {infoItem && (
+                <info-item>
+                  <IconOrImage icon={infoItem.icon} />
+                  {translate(infoItem.text)}
+                </info-item>
+              )}
+              <Container gap overflow>
+                <GrantedConnectionList
+                  grantedConnections={grantedConnections.get()}
+                  disabled={formState.disabled}
+                  onEdit={edit}
+                  onRevoke={revoke}
+                />
+                {state.editing && (
+                  <ConnectionList
+                    connectionList={connections.resource.values}
+                    grantedSubjects={state.grantedSubjects}
+                    disabled={formState.disabled}
+                    onGrant={grant}
+                  />
+                )}
+              </Container>
+            </>
+          )}
+        </ColoredContainer>
+      )}
+    </Loader>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsList.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsList.tsx
new file mode 100644
index 0000000000..2b9e6c4b10
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsList.tsx
@@ -0,0 +1,141 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useState } from 'react';
+import styled, { css } from 'reshadow';
+
+import {
+  Table,
+  TableBody,
+  TableItem,
+  TableColumnValue,
+  BASE_CONTAINERS_STYLES,
+  Group,
+  Button,
+  useObjectRef
+} from '@cloudbeaver/core-blocks';
+import { getComputed } from '@cloudbeaver/core-blocks';
+import { DBDriverResource } from '@cloudbeaver/core-connections';
+import { useService } from '@cloudbeaver/core-di';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+import type { DatabaseConnectionFragment } from '@cloudbeaver/core-sdk';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { getFilteredConnections } from './getFilteredConnections';
+import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader';
+import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader';
+import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem';
+
+const styles = composes(
+  css`
+    Table {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    Group {
+      position: relative;
+    }
+    Group, container, table-container {
+      height: 100%;
+    }
+    container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    GrantedConnectionsTableHeader {
+      flex: 0 0 auto;
+    }
+    table-container {
+      overflow: auto;
+    }
+  `
+);
+
+interface Props {
+  grantedConnections: DatabaseConnectionFragment[];
+  disabled: boolean;
+  onRevoke: (subjectIds: string[]) => void;
+  onEdit: () => void;
+}
+
+export const GrantedConnectionList = observer<Props>(function GrantedConnectionList({
+  grantedConnections,
+  disabled,
+  onRevoke,
+  onEdit,
+}) {
+  const props = useObjectRef({ onRevoke, onEdit });
+  const style = useStyles(styles, BASE_CONTAINERS_STYLES);
+  const translate = useTranslate();
+
+  const driversResource = useService(DBDriverResource);
+
+  const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
+  const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
+
+  const selected = getComputed(() => Array.from(selectedSubjects.values()).some(v => v));
+
+  const revoke = useCallback(() => {
+    const selectedList = Array.from(selectedSubjects.entries()).filter(([key, value]) => value).map(([key]) => key);
+    props.onRevoke(selectedList);
+    selectedSubjects.clear();
+  }, []);
+
+  const connections = getFilteredConnections(grantedConnections, filterState.filterValue);
+
+  let tableInfoText: TLocalizationToken | null = null;
+  if (!connections.length) {
+    if (filterState.filterValue) {
+      tableInfoText = 'connections_connection_access_filter_no_result';
+    } else {
+      tableInfoText = 'connections_connection_access_empty_table_placeholder';
+    }
+  }
+
+  return styled(style)(
+    <Group box medium overflow>
+      <container>
+        <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+          <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>{translate('ui_revoke')}</Button>
+          <Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>{translate('ui_edit')}</Button>
+        </GrantedConnectionsTableHeader>
+        <table-container>
+          <Table selectedItems={selectedSubjects}>
+            <GrantedConnectionsTableInnerHeader />
+            <TableBody>
+              <TableItem item='tableInfo' selectDisabled>
+                {tableInfoText && (
+                  <TableColumnValue colSpan={5}>
+                    {translate(tableInfoText)}
+                  </TableColumnValue>
+                )}
+              </TableItem>
+              {connections.map(connection => {
+                const driver = driversResource.get(connection.driverId);
+                return (
+                  <GrantedConnectionsTableItem
+                    key={connection.id}
+                    id={connection.id}
+                    name={connection.name}
+                    host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
+                    icon={driver?.icon}
+                    disabled={disabled}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        </table-container>
+      </container>
+    </Group>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTabService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTabService.ts
new file mode 100644
index 0000000000..b84f2cd813
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTabService.ts
@@ -0,0 +1,102 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { RolesResource } from '@cloudbeaver/core-authentication';
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
+import type { IExecutionContextProvider } from '@cloudbeaver/core-executor';
+import { GraphQLService } from '@cloudbeaver/core-sdk';
+import { isArraysEqual, MetadataValueGetter } from '@cloudbeaver/core-utils';
+
+import { roleContext } from '../Contexts/roleContext';
+import type { IRoleFormProps, IRoleFormSubmitData } from '../IRoleFormProps';
+import { RoleFormService } from '../RoleFormService';
+import { GrantedConnections } from './GrantedConnections';
+import type { IGrantedConnectionsTabState } from './IGrantedConnectionsTabState';
+
+@injectable()
+export class GrantedConnectionsTabService extends Bootstrap {
+  private key: string;
+
+  constructor(
+    private readonly roleFormService: RoleFormService,
+    private readonly rolesResource: RolesResource,
+    private readonly graphQLService: GraphQLService,
+    private readonly notificationService: NotificationService
+  ) {
+    super();
+    this.key = 'granted-connections';
+  }
+
+  register(): void {
+    this.roleFormService.tabsContainer.add({
+      key: this.key,
+      name: 'administration_roles_role_granted_connections_tab_title',
+      title: 'administration_roles_role_granted_connections_tab_title',
+      order: 3,
+      stateGetter: context => this.stateGetter(context),
+      panel: () => GrantedConnections,
+    });
+
+    this.roleFormService.formSubmittingTask.addHandler(this.save.bind(this));
+  }
+
+  load(): Promise<void> | void { }
+
+  private stateGetter(context: IRoleFormProps): MetadataValueGetter<string, IGrantedConnectionsTabState> {
+    return () => ({
+      loading: false,
+      loaded: false,
+      editing: false,
+      grantedSubjects: [],
+      initialGrantedSubjects: [],
+    });
+  }
+
+  private async save(
+    data: IRoleFormSubmitData,
+    contexts: IExecutionContextProvider<IRoleFormSubmitData>
+  ) {
+    const config = contexts.getContext(roleContext);
+    const status = contexts.getContext(this.roleFormService.configurationStatusContext);
+
+    if (!status.saved) {
+      return;
+    }
+
+    const state = this.roleFormService.tabsContainer.getTabState<IGrantedConnectionsTabState>(
+      data.state.partsState,
+      this.key,
+      { state: data.state }
+    );
+
+    if (!config.roleId || !state.loaded) {
+      return;
+    }
+
+    const grantInfo = await this.rolesResource.getSubjectConnectionAccess(config.roleId);
+    const initial = grantInfo.map(info => info.connectionId);
+
+    const changed = !isArraysEqual(initial, state.grantedSubjects);
+
+    if (!changed) {
+      return;
+    }
+
+    try {
+      await this.graphQLService.sdk.setSubjectConnectionAccess({
+        subjectId: config.roleId,
+        connections: state.grantedSubjects,
+      });
+
+      state.loaded = false;
+    } catch (exception) {
+      this.notificationService.logException(exception);
+    }
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx
new file mode 100644
index 0000000000..a1ceaa66cb
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableHeader.tsx
@@ -0,0 +1,67 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { Filter } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+export interface IFilterState {
+  filterValue: string;
+}
+
+interface Props {
+  filterState: IFilterState;
+  disabled: boolean;
+  className?: string;
+}
+
+const styles = composes(
+  css`
+    header {
+      composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    buttons {
+      display: flex;
+      gap: 16px;
+    }
+    header {
+      overflow: hidden;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      gap: 16px;
+      border-bottom: 1px solid;
+    }
+  `
+);
+
+export const GrantedConnectionsTableHeader = observer<Props>(function GrantedConnectionsTableHeader({ filterState, disabled, className, children }) {
+  const translate = useTranslate();
+  return styled(useStyles(styles))(
+    <header className={className}>
+      <Filter
+        disabled={disabled}
+        placeholder={translate('administration_roles_role_granted_connections_search_placeholder')}
+        name='filterValue'
+        state={filterState}
+      />
+      <buttons>
+        {children}
+      </buttons>
+    </header>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader.tsx
new file mode 100644
index 0000000000..8ae80ac98b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader.tsx
@@ -0,0 +1,45 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { TableColumnHeader, TableHeader } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+interface Props {
+  className?: string;
+}
+
+const styles = composes(
+  css`
+    TableHeader {
+      composes: theme-background-surface from global;
+    }
+  `,
+  css`
+    TableHeader {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  `
+);
+
+export const GrantedConnectionsTableInnerHeader = observer<Props>(function GrantedConnectionsTableInnerHeader({ className }) {
+  const translate = useTranslate();
+  return styled(useStyles(styles))(
+    <TableHeader className={className}>
+      <TableColumnHeader min />
+      <TableColumnHeader min />
+      <TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
+      <TableColumnHeader>{translate('connections_connection_address')}</TableColumnHeader>
+    </TableHeader>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableItem.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableItem.tsx
new file mode 100644
index 0000000000..97b7dca4c7
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/GrantedConnectionsTableItem.tsx
@@ -0,0 +1,52 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { StaticImage, TableColumnValue, TableItem, TableItemSelect } from '@cloudbeaver/core-blocks';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+
+interface Props {
+  id: any;
+  name: string;
+  disabled: boolean;
+  host?: string;
+  icon?: string;
+  iconTooltip?: TLocalizationToken;
+  className?: string;
+}
+
+const style = css`
+  StaticImage {
+    display: flex;
+    width: 24px;
+  }
+`;
+
+export const GrantedConnectionsTableItem = observer<Props>(function GrantedConnectionsTableItem({
+  id, name, host, icon, iconTooltip, disabled, className,
+}) {
+  const translate = useTranslate();
+
+  return styled(style)(
+    <TableItem
+      item={id}
+      disabled={disabled}
+      selectDisabled={disabled}
+      className={className}
+    >
+      <TableColumnValue centerContent flex>
+        <TableItemSelect disabled={disabled} />
+      </TableColumnValue>
+      <TableColumnValue>{icon && <StaticImage icon={icon} title={translate(iconTooltip)} />}</TableColumnValue>
+      <TableColumnValue>{name}</TableColumnValue>
+      <TableColumnValue>{host && host}</TableColumnValue>
+    </TableItem>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/IGrantedConnectionsTabState.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/IGrantedConnectionsTabState.ts
new file mode 100644
index 0000000000..80175967f5
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/IGrantedConnectionsTabState.ts
@@ -0,0 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export interface IGrantedConnectionsTabState {
+  loading: boolean;
+  loaded: boolean;
+  grantedSubjects: string[];
+  initialGrantedSubjects: string[];
+  editing: boolean;
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/getFilteredConnections.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/getFilteredConnections.ts
new file mode 100644
index 0000000000..88d9c66f05
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/getFilteredConnections.ts
@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { isCloudConnection } from '@cloudbeaver/core-connections';
+import type { DatabaseConnectionFragment } from '@cloudbeaver/core-sdk';
+
+/**
+ * @param  {DatabaseConnectionFragment[]} connections
+ * @param  {string} filter
+ */
+export function getFilteredConnections(
+  connections: DatabaseConnectionFragment[],
+  filter: string
+): DatabaseConnectionFragment[] {
+  return connections
+    .filter(
+      connection => connection.name.toLowerCase().includes(filter.toLowerCase()) && !isCloudConnection(connection)
+    )
+    .sort((a, b) => (a.name).localeCompare(b.name));
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/useGrantedConnections.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/useGrantedConnections.tsx
new file mode 100644
index 0000000000..157ee8e92f
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedConnections/useGrantedConnections.tsx
@@ -0,0 +1,64 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { RoleInfo, RolesResource } from '@cloudbeaver/core-authentication';
+import { useObjectRef, useTabState } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
+
+import type { RoleFormMode } from '../IRoleFormProps';
+import type { IGrantedConnectionsTabState } from './IGrantedConnectionsTabState';
+
+interface IConnectionAccessState {
+  state: IGrantedConnectionsTabState;
+  revoke: (subjectIds: string[]) => void;
+  grant: (subjectIds: string[]) => void;
+  edit: () => void;
+  load: () => Promise<void>;
+}
+
+export function useGrantedConnections(role: RoleInfo, mode: RoleFormMode): IConnectionAccessState {
+  const resource = useService(RolesResource);
+  const notificationService = useService(NotificationService);
+  const state = useTabState<IGrantedConnectionsTabState>();
+
+  const edit = () => {
+    state.editing = !state.editing;
+  };
+
+  const revoke = (subjectIds: string[]): void => {
+    state.grantedSubjects = state.grantedSubjects.filter(subject => !subjectIds.includes(subject));
+  };
+
+  const grant = (subjectIds: string[]): void => {
+    state.grantedSubjects.push(...subjectIds);
+  };
+
+  const load = async () => {
+    if (state.loaded || state.loading) {
+      return;
+    }
+
+    try {
+      state.loading = true;
+
+      if (mode === 'edit') {
+        const grantInfo = await resource.getSubjectConnectionAccess(role.roleId);
+        state.grantedSubjects = grantInfo.map(subject => subject.connectionId);
+        state.initialGrantedSubjects = state.grantedSubjects.slice();
+      }
+
+      state.loaded = true;
+    } catch (exception) {
+      notificationService.logException(exception, `Error getting granted connections for "${role.roleId}"`);
+    }
+    state.loading = false;
+  };
+
+  return useObjectRef({ state, revoke, grant, edit, load });
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUserList.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUserList.tsx
new file mode 100644
index 0000000000..8d7968b65a
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUserList.tsx
@@ -0,0 +1,138 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useState } from 'react';
+import styled, { css } from 'reshadow';
+
+import { UsersResource } from '@cloudbeaver/core-authentication';
+import {
+  Table,
+  TableBody,
+  TableItem,
+  TableColumnValue,
+  BASE_CONTAINERS_STYLES,
+  Group,
+  Button,
+  useObjectRef,
+  getComputed
+} from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { getFilteredUsers } from './getFilteredUsers';
+import { GrantedUsersTableHeader, IFilterState } from './GrantedUsersTableHeader/GrantedUsersTableHeader';
+import { GrantedUsersTableInnerHeader } from './GrantedUsersTableHeader/GrantedUsersTableInnerHeader';
+import { GrantedUsersTableItem } from './GrantedUsersTableItem';
+
+const styles = composes(
+  css`
+    Table {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    Group {
+      position: relative;
+    }
+    Group, container, table-container {
+      height: 100%;
+    }
+    container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    GrantedUsersTableHeader {
+      flex: 0 0 auto;
+    }
+    table-container {
+      overflow: auto;
+    }
+  `
+);
+
+interface Props {
+  grantedUsers: AdminUserInfoFragment[];
+  disabled: boolean;
+  onRevoke: (subjectIds: string[]) => void;
+  onEdit: () => void;
+}
+
+export const GrantedUserList = observer<Props>(function GrantedUserList({
+  grantedUsers,
+  disabled,
+  onRevoke,
+  onEdit,
+}) {
+  const props = useObjectRef({ onRevoke, onEdit });
+  const style = useStyles(styles, BASE_CONTAINERS_STYLES);
+  const translate = useTranslate();
+
+  const usersResource = useService(UsersResource);
+
+  const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
+  const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
+
+  const selected = getComputed(() => Array.from(selectedSubjects.values()).some(v => v));
+
+  const revoke = useCallback(() => {
+    const selectedList = Array.from(selectedSubjects.entries()).filter(([key, value]) => value).map(([key]) => key);
+    props.onRevoke(selectedList);
+    selectedSubjects.clear();
+  }, []);
+
+  const users = getFilteredUsers(grantedUsers, filterState.filterValue);
+
+  let tableInfoText: TLocalizationToken | null = null;
+  if (!users.length) {
+    if (filterState.filterValue) {
+      tableInfoText = 'connections_connection_access_filter_no_result';
+    } else {
+      tableInfoText = 'connections_connection_access_empty_table_placeholder';
+    }
+  }
+
+  return styled(style)(
+    <Group box medium overflow>
+      <container>
+        <GrantedUsersTableHeader filterState={filterState} disabled={disabled}>
+          <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>{translate('ui_revoke')}</Button>
+          <Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>{translate('ui_edit')}</Button>
+        </GrantedUsersTableHeader>
+        <table-container>
+          <Table selectedItems={selectedSubjects}>
+            <GrantedUsersTableInnerHeader />
+            <TableBody>
+              <TableItem item='tableInfo' selectDisabled>
+                {tableInfoText && (
+                  <TableColumnValue colSpan={5}>
+                    {translate(tableInfoText)}
+                  </TableColumnValue>
+                )}
+              </TableItem>
+              {users.map(user => (
+                <GrantedUsersTableItem
+                  key={user.userId}
+                  id={user.userId}
+                  name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ' (you)' : ''}`}
+                  icon='/icons/user.svg'
+                  iconTooltip={translate('connections_connection_access_user_tooltip')}
+                  disabled={disabled}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </table-container>
+      </container>
+    </Group>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsers.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsers.tsx
new file mode 100644
index 0000000000..9404402b8a
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsers.tsx
@@ -0,0 +1,136 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { computed } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useMemo } from 'react';
+import styled, { css } from 'reshadow';
+
+import { UsersResource } from '@cloudbeaver/core-authentication';
+import {
+  BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group,
+  IconOrImage, Loader, TabContainerPanelComponent,
+  TextPlaceholder, useMapResource, useTab,
+} from '@cloudbeaver/core-blocks';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import type { IRoleFormProps } from '../IRoleFormProps';
+import { GrantedUserList } from './GrantedUserList';
+import { useGrantedUsers } from './useGrantedUsers';
+import { UserList } from './UserList';
+
+const styles = css`
+  ColoredContainer {
+    flex: 1;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  Group {
+    max-height: 100%;
+    position: relative;
+    overflow: auto !important;
+  }
+  info-item {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  IconOrImage {
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+  }
+  Loader {
+    z-index: 2;
+  }
+`;
+
+interface IInfoItem {
+  text: TLocalizationToken;
+  icon: string;
+}
+
+export const GrantedUsers: TabContainerPanelComponent<IRoleFormProps> = observer(function GrantedUsers({
+  tabId,
+  state: formState,
+}) {
+  const style = useStyles(BASE_CONTAINERS_STYLES, styles);
+  const translate = useTranslate();
+
+  const { state, edit, grant, load, revoke } = useGrantedUsers(formState.config, formState.mode);
+
+  const { selected } = useTab(tabId);
+
+  const users = useMapResource(UsersResource, selected ? UsersResource.keyAll : null);
+
+  const grantedUsers = useMemo(() => computed(() => users.resource.values
+    .filter(user => state.grantedUsers.includes(user.userId))
+  ), [state.grantedUsers, users.resource]);
+
+  useEffect(() => {
+    if (selected && !state.loaded) {
+      load();
+    }
+  }, [selected, state.loaded, load]);
+
+  if (!selected) {
+    return null;
+  }
+
+  let infoItem: IInfoItem | null = null;
+
+  const unsaved = (formState.mode === 'edit' && (state.initialGrantedUsers.length !== state.grantedUsers.length
+    || state.initialGrantedUsers.some(subject => !state.grantedUsers.includes(subject))));
+
+  if (unsaved) {
+    infoItem = {
+      text: 'connections_connection_access_save_reminder',
+      icon: '/icons/info_icon.svg',
+    };
+  }
+
+  return styled(style)(
+    <Loader state={[users, state]}>
+      {() => styled(style)(
+        <ColoredContainer parent gap vertical>
+          {!users.resource.values.length ? (
+            <Group keepSize large>
+              <TextPlaceholder>{translate('administration_roles_role_granted_users_empty')}</TextPlaceholder>
+            </Group>
+          ) : (
+            <>
+              {infoItem && (
+                <info-item>
+                  <IconOrImage icon={infoItem.icon} />
+                  {translate(infoItem.text)}
+                </info-item>
+              )}
+              <Container gap overflow>
+                <GrantedUserList
+                  grantedUsers={grantedUsers.get()}
+                  disabled={formState.disabled}
+                  onEdit={edit}
+                  onRevoke={revoke}
+                />
+                {state.editing && (
+                  <UserList
+                    userList={users.resource.values}
+                    grantedUsers={state.grantedUsers}
+                    disabled={formState.disabled}
+                    onGrant={grant}
+                  />
+                )}
+              </Container>
+            </>
+          )}
+        </ColoredContainer>
+      )}
+    </Loader>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTabService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTabService.ts
new file mode 100644
index 0000000000..b4ee6188ac
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTabService.ts
@@ -0,0 +1,120 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { RolesResource, UsersResource } from '@cloudbeaver/core-authentication';
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
+import type { IExecutionContextProvider } from '@cloudbeaver/core-executor';
+import { isArraysEqual, MetadataValueGetter } from '@cloudbeaver/core-utils';
+
+import { roleContext } from '../Contexts/roleContext';
+import type { IRoleFormProps, IRoleFormSubmitData } from '../IRoleFormProps';
+import { RoleFormService } from '../RoleFormService';
+import { GrantedUsers } from './GrantedUsers';
+import type { IGrantedUsersTabState } from './IGrantedUsersTabState';
+
+@injectable()
+export class GrantedUsersTabService extends Bootstrap {
+  private key: string;
+
+  constructor(
+    private readonly roleFormService: RoleFormService,
+    private readonly usersResource: UsersResource,
+    private readonly rolesResource: RolesResource,
+    private readonly notificationService: NotificationService
+  ) {
+    super();
+    this.key = 'granted-users';
+  }
+
+  register(): void {
+    this.roleFormService.tabsContainer.add({
+      key: this.key,
+      name: 'administration_roles_role_granted_users_tab_title',
+      title: 'administration_roles_role_granted_users_tab_title',
+      order: 2,
+      stateGetter: context => this.stateGetter(context),
+      panel: () => GrantedUsers,
+    });
+
+    this.roleFormService.formSubmittingTask.addHandler(this.save.bind(this));
+  }
+
+  load(): void { }
+
+  private stateGetter(context: IRoleFormProps): MetadataValueGetter<string, IGrantedUsersTabState> {
+    return () => ({
+      loading: false,
+      loaded: false,
+      editing: false,
+      grantedUsers: [],
+      initialGrantedUsers: [],
+    });
+  }
+
+  private async save(
+    data: IRoleFormSubmitData,
+    contexts: IExecutionContextProvider<IRoleFormSubmitData>
+  ) {
+    const config = contexts.getContext(roleContext);
+    const status = contexts.getContext(this.roleFormService.configurationStatusContext);
+
+    if (!status.saved) {
+      return;
+    }
+
+    const state = this.roleFormService.tabsContainer.getTabState<IGrantedUsersTabState>(
+      data.state.partsState,
+      this.key,
+      { state: data.state }
+    );
+
+    if (!config.roleId || !state.loaded) {
+      return;
+    }
+
+    const initial = await this.rolesResource.loadGrantedUsers(config.roleId);
+
+    const changed = !isArraysEqual(initial, state.grantedUsers);
+
+    if (!changed) {
+      return;
+    }
+
+    const granted: string[] = [];
+    const revoked: string[] = [];
+
+    const revokedUsers = initial.filter(user => !state.grantedUsers.includes(user));
+
+    try {
+      for (const user of revokedUsers) {
+        await this.usersResource.revokeRole(user, config.roleId);
+        revoked.push(user);
+      }
+
+      for (const user of state.grantedUsers) {
+        if (!initial.includes(user)) {
+          await this.usersResource.grantRole(user, config.roleId);
+          granted.push(user);
+        }
+      }
+
+      state.loaded = false;
+    } catch (exception) {
+      this.notificationService.logException(exception);
+    }
+
+    if (granted.length) {
+      status.info(`Granted users: "${granted.join(', ')}"`);
+    }
+
+    if (revoked.length) {
+      status.info(`Revoked users: "${revoked.join(', ')}"`);
+    }
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx
new file mode 100644
index 0000000000..459835e65b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableHeader.tsx
@@ -0,0 +1,67 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { Filter } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+export interface IFilterState {
+  filterValue: string;
+}
+
+interface Props {
+  filterState: IFilterState;
+  disabled: boolean;
+  className?: string;
+}
+
+const styles = composes(
+  css`
+    header {
+      composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    buttons {
+      display: flex;
+      gap: 16px;
+    }
+    header {
+      overflow: hidden;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      gap: 16px;
+      border-bottom: 1px solid;
+    }
+  `
+);
+
+export const GrantedUsersTableHeader = observer<Props>(function GrantedUsersTableHeader({ filterState, disabled, className, children }) {
+  const translate = useTranslate();
+  return styled(useStyles(styles))(
+    <header className={className}>
+      <Filter
+        disabled={disabled}
+        placeholder={translate('administration_roles_role_granted_users_search_placeholder')}
+        name='filterValue'
+        state={filterState}
+      />
+      <buttons>
+        {children}
+      </buttons>
+    </header>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableInnerHeader.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableInnerHeader.tsx
new file mode 100644
index 0000000000..b0b7c7d852
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableHeader/GrantedUsersTableInnerHeader.tsx
@@ -0,0 +1,44 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { TableColumnHeader, TableHeader } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+interface Props {
+  className?: string;
+}
+
+const styles = composes(
+  css`
+    TableHeader {
+      composes: theme-background-surface from global;
+    }
+  `,
+  css`
+    TableHeader {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  `
+);
+
+export const GrantedUsersTableInnerHeader = observer<Props>(function GrantedUsersTableInnerHeader({ className }) {
+  const translate = useTranslate();
+  return styled(useStyles(styles))(
+    <TableHeader className={className}>
+      <TableColumnHeader min />
+      <TableColumnHeader min />
+      <TableColumnHeader>{translate('administration_roles_role_granted_users_user_id')}</TableColumnHeader>
+    </TableHeader>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableItem.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableItem.tsx
new file mode 100644
index 0000000000..0ced640aba
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/GrantedUsersTableItem.tsx
@@ -0,0 +1,49 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css } from 'reshadow';
+
+import { StaticImage, TableColumnValue, TableItem, TableItemSelect } from '@cloudbeaver/core-blocks';
+import { TLocalizationToken, useTranslate } from '@cloudbeaver/core-localization';
+
+interface Props {
+  id: any;
+  name: string;
+  icon: string;
+  disabled: boolean;
+  iconTooltip?: TLocalizationToken;
+  className?: string;
+}
+
+const style = css`
+  StaticImage {
+    display: flex;
+    width: 24px;
+  }
+`;
+
+export const GrantedUsersTableItem = observer<Props>(function GrantedUsersTableItem({
+  id, name, icon, iconTooltip, disabled, className,
+}) {
+  const translate = useTranslate();
+  return styled(style)(
+    <TableItem
+      item={id}
+      disabled={disabled}
+      selectDisabled={disabled}
+      className={className}
+    >
+      <TableColumnValue centerContent flex>
+        <TableItemSelect disabled={disabled} />
+      </TableColumnValue>
+      <TableColumnValue><StaticImage icon={icon} title={translate(iconTooltip)} /></TableColumnValue>
+      <TableColumnValue>{name}</TableColumnValue>
+    </TableItem>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/IGrantedUsersTabState.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/IGrantedUsersTabState.ts
new file mode 100644
index 0000000000..eb4730b65d
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/IGrantedUsersTabState.ts
@@ -0,0 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+export interface IGrantedUsersTabState {
+  loading: boolean;
+  loaded: boolean;
+  grantedUsers: string[];
+  initialGrantedUsers: string[];
+  editing: boolean;
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/UserList.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/UserList.tsx
new file mode 100644
index 0000000000..079134056b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/UserList.tsx
@@ -0,0 +1,128 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useState } from 'react';
+import styled, { css } from 'reshadow';
+
+import { UsersResource } from '@cloudbeaver/core-authentication';
+import {
+  Table,
+  TableBody,
+  TableItem,
+  TableColumnValue,
+  BASE_CONTAINERS_STYLES,
+  Group,
+  Button,
+  useObjectRef,
+  getComputed,
+} from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { getFilteredUsers } from './getFilteredUsers';
+import { GrantedUsersTableHeader, IFilterState } from './GrantedUsersTableHeader/GrantedUsersTableHeader';
+import { GrantedUsersTableInnerHeader } from './GrantedUsersTableHeader/GrantedUsersTableInnerHeader';
+import { GrantedUsersTableItem } from './GrantedUsersTableItem';
+
+const styles = composes(
+  css`
+    Table {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+  `,
+  css`
+    Group {
+      position: relative;
+    }
+    Group, container, table-container {
+      height: 100%;
+    }
+    container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    table-container {
+      overflow: auto;
+    }
+    GrantedUsersTableHeader {
+      flex: 0 0 auto;
+    }
+  `
+);
+
+interface Props {
+  userList: AdminUserInfoFragment[];
+  grantedUsers: string[];
+  onGrant: (subjectIds: string[]) => void;
+  disabled: boolean;
+}
+
+export const UserList = observer<Props>(function UserList({
+  userList,
+  grantedUsers,
+  onGrant,
+  disabled,
+}) {
+  const props = useObjectRef({ onGrant });
+  const style = useStyles(styles, BASE_CONTAINERS_STYLES);
+  const translate = useTranslate();
+
+  const usersResource = useService(UsersResource);
+
+  const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
+  const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
+
+  const selected = getComputed(() => Array.from(selectedSubjects.values()).some(v => v));
+
+  const grant = useCallback(() => {
+    const selectedList = Array.from(selectedSubjects.entries()).filter(([key, value]) => value).map(([key]) => key);
+    props.onGrant(selectedList);
+    selectedSubjects.clear();
+  }, []);
+
+  const users = getFilteredUsers(userList, filterState.filterValue);
+
+  return styled(style)(
+    <Group box medium overflow>
+      <container>
+        <GrantedUsersTableHeader filterState={filterState} disabled={disabled}>
+          <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>{translate('ui_grant')}</Button>
+        </GrantedUsersTableHeader>
+        <table-container>
+          <Table selectedItems={selectedSubjects}>
+            <GrantedUsersTableInnerHeader />
+            <TableBody>
+              {!users.length && filterState.filterValue && (
+                <TableItem item='tableInfo' selectDisabled>
+                  <TableColumnValue colSpan={5}>
+                    {translate('connections_connection_access_filter_no_result')}
+                  </TableColumnValue>
+                </TableItem>
+              )}
+              {users.map(user => (
+                <GrantedUsersTableItem
+                  key={user.userId}
+                  id={user.userId}
+                  name={`${user.userId}${usersResource.isActiveUser(user.userId) ? ' (you)' : ''}`}
+                  icon='/icons/user.svg'
+                  iconTooltip={translate('connections_connection_access_user_tooltip')}
+                  disabled={disabled || !!grantedUsers.includes(user.userId)}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </table-container>
+      </container>
+    </Group>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/getFilteredUsers.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/getFilteredUsers.ts
new file mode 100644
index 0000000000..371d909351
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/getFilteredUsers.ts
@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
+
+/**
+ * @param  {AdminUserInfoFragment[]} users
+ * @param  {string} filter
+ */
+export function getFilteredUsers(users: AdminUserInfoFragment[], filter: string): AdminUserInfoFragment[] {
+  return users
+    .filter(user => user.userId.toLowerCase().includes(filter.toLowerCase()))
+    .sort((a, b) => (a.userId).localeCompare(b.userId));
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/useGrantedUsers.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/useGrantedUsers.tsx
new file mode 100644
index 0000000000..4073e21f5c
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/GrantedUsers/useGrantedUsers.tsx
@@ -0,0 +1,65 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { RoleInfo, RolesResource } from '@cloudbeaver/core-authentication';
+import { useObjectRef, useTabState } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
+
+import type { RoleFormMode } from '../IRoleFormProps';
+import type { IGrantedUsersTabState } from './IGrantedUsersTabState';
+
+interface IConnectionAccessState {
+  state: IGrantedUsersTabState;
+  revoke: (subjectIds: string[]) => void;
+  grant: (subjectIds: string[]) => void;
+  edit: () => void;
+  load: () => Promise<void>;
+}
+
+export function useGrantedUsers(role: RoleInfo, mode: RoleFormMode): IConnectionAccessState {
+  const resource = useService(RolesResource);
+  const notificationService = useService(NotificationService);
+  const state = useTabState<IGrantedUsersTabState>();
+
+  const edit = () => {
+    state.editing = !state.editing;
+  };
+
+  const revoke = (subjectIds: string[]): void => {
+    state.grantedUsers = state.grantedUsers.filter(subject => !subjectIds.includes(subject));
+  };
+
+  const grant = (subjectIds: string[]): void => {
+    state.grantedUsers.push(...subjectIds);
+  };
+
+  const load = async () => {
+    if (state.loaded || state.loading) {
+      return;
+    }
+
+    try {
+      state.loading = true;
+
+      if (mode === 'edit') {
+        const grantedUsers = await resource.loadGrantedUsers(role.roleId);
+        state.grantedUsers = grantedUsers;
+
+        state.initialGrantedUsers = state.grantedUsers.slice();
+      }
+
+      state.loaded = true;
+    } catch (exception) {
+      notificationService.logException(exception, "Can't load users info");
+    }
+    state.loading = false;
+  };
+
+  return useObjectRef({ state, revoke, grant, edit, load });
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/IRoleFormProps.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/IRoleFormProps.ts
new file mode 100644
index 0000000000..1ae1b3c92b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/IRoleFormProps.ts
@@ -0,0 +1,50 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import type { IExecutorHandlersCollection } from '@cloudbeaver/core-executor';
+import type { CachedMapResource } from '@cloudbeaver/core-sdk';
+import type { MetadataMap } from '@cloudbeaver/core-utils';
+
+export type RoleFormMode = 'edit' | 'create';
+
+export interface IRoleFormState {
+  mode: RoleFormMode;
+  config: RoleInfo;
+  partsState: MetadataMap<string, any>;
+
+  readonly info: RoleInfo | undefined;
+  readonly statusMessage: string | null;
+  readonly disabled: boolean;
+  readonly readonly: boolean;
+  readonly loading: boolean;
+
+  readonly submittingTask: IExecutorHandlersCollection<IRoleFormSubmitData>;
+  readonly resource: CachedMapResource<string, RoleInfo>;
+
+  readonly load: () => Promise<void>;
+  readonly loadRoleInfo: () => Promise<RoleInfo | undefined>;
+  readonly save: () => Promise<void>;
+  readonly setOptions: (
+    mode: RoleFormMode,
+  ) => this;
+}
+
+export interface IRoleFormProps {
+  state: IRoleFormState;
+  onCancel?: () => void;
+}
+
+export interface IRoleFormFillConfigData {
+  updated: boolean;
+  state: IRoleFormState;
+}
+
+export interface IRoleFormSubmitData {
+  state: IRoleFormState;
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptions.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptions.tsx
new file mode 100644
index 0000000000..7fa538b748
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptions.tsx
@@ -0,0 +1,77 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import styled, { css } from 'reshadow';
+
+import {
+  BASE_CONTAINERS_STYLES, ColoredContainer, Group,
+  InputFieldNew, SubmittingForm, TabContainerPanelComponent, TextareaNew,
+} from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import type { IRoleFormProps } from '../IRoleFormProps';
+
+const styles = css`
+  SubmittingForm {
+    flex: 1;
+    overflow: auto;
+  }
+`;
+
+export const RoleOptions: TabContainerPanelComponent<IRoleFormProps> = observer(function RoleOptions({
+  state,
+}) {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const translate = useTranslate();
+  const style = useStyles(BASE_CONTAINERS_STYLES, styles);
+  const edit = state.mode === 'edit';
+
+  return styled(style)(
+    <SubmittingForm ref={formRef} onSubmit={state.save}>
+      <ColoredContainer parent gap overflow>
+        <Group small gap>
+          <InputFieldNew
+            name='roleId'
+            state={state.config}
+            readOnly={state.readonly || edit}
+            disabled={state.disabled}
+            required
+            tiny
+            fill
+          >
+            {translate('administration_roles_role_id')}
+          </InputFieldNew>
+          <InputFieldNew
+            name='roleName'
+            state={state.config}
+            readOnly={state.readonly}
+            disabled={state.disabled}
+            tiny
+            fill
+          >
+            {translate('administration_roles_role_name')}
+          </InputFieldNew>
+          <TextareaNew
+            name='description'
+            state={state.config}
+            readOnly={state.readonly}
+            disabled={state.disabled}
+            tiny
+            fill
+          >
+            {translate('administration_roles_role_description')}
+          </TextareaNew>
+        </Group>
+      </ColoredContainer>
+    </SubmittingForm>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptionsTabService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptionsTabService.ts
new file mode 100644
index 0000000000..9af1f859c4
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/Options/RoleOptionsTabService.ts
@@ -0,0 +1,146 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { RolesResource } from '@cloudbeaver/core-authentication';
+import { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import type { IExecutionContextProvider } from '@cloudbeaver/core-executor';
+import { getUniqueName } from '@cloudbeaver/core-utils';
+
+import { roleContext } from '../Contexts/roleContext';
+import type { IRoleFormFillConfigData, IRoleFormSubmitData } from '../IRoleFormProps';
+import { RoleFormService } from '../RoleFormService';
+import { RoleOptions } from './RoleOptions';
+
+@injectable()
+export class RoleOptionsTabService extends Bootstrap {
+  constructor(
+    private readonly roleFormService: RoleFormService,
+    private readonly roleResource: RolesResource,
+  ) {
+    super();
+  }
+
+  register(): void {
+    this.roleFormService.tabsContainer.add({
+      key: 'options',
+      name: 'Options',
+      order: 1,
+      panel: () => RoleOptions,
+    });
+
+    this.roleFormService.prepareConfigTask
+      .addHandler(this.prepareConfig.bind(this));
+
+    this.roleFormService.formValidationTask
+      .addHandler(this.validate.bind(this));
+
+    this.roleFormService.formSubmittingTask
+      .addHandler(this.save.bind(this));
+
+    this.roleFormService.fillConfigTask
+      .addHandler(this.fillConfig.bind(this));
+  }
+
+  load(): void { }
+
+  private async prepareConfig(
+    {
+      state,
+    }: IRoleFormSubmitData,
+    contexts: IExecutionContextProvider<IRoleFormSubmitData>
+  ) {
+    const config = contexts.getContext(roleContext);
+
+    config.roleId = state.config.roleId;
+
+    if (state.config.roleName) {
+      config.roleName = state.config.roleName.trim();
+
+      if (state.mode === 'create') {
+        const roleNames = this.roleResource.values.map(role => role.roleName).filter(Boolean) as string[];
+        config.roleName = getUniqueName(config.roleName, roleNames);
+      }
+    }
+
+    if (state.config.description) {
+      config.description = state.config.description;
+    }
+  }
+
+  private async validate(
+    {
+      state,
+    }: IRoleFormSubmitData,
+    contexts: IExecutionContextProvider<IRoleFormSubmitData>
+  ) {
+    const validation = contexts.getContext(this.roleFormService.configurationValidationContext);
+
+    if (state.mode === 'create') {
+      if (!state.config.roleId.trim()) {
+        validation.error("Field 'Role ID' can't be empty");
+      }
+
+      if (this.roleResource.has(state.config.roleId)) {
+        validation.error(`A role with ID "${state.config.roleId}" already exists`);
+      }
+    }
+  }
+
+  private async save(
+    {
+      state,
+    }: IRoleFormSubmitData,
+    contexts: IExecutionContextProvider<IRoleFormSubmitData>
+  ) {
+    const status = contexts.getContext(this.roleFormService.configurationStatusContext);
+    const config = contexts.getContext(roleContext);
+
+    const create = state.mode === 'create';
+
+    try {
+      if (create) {
+        const role = await this.roleResource.createRole(config);
+        status.info('Role is created');
+        status.info(role.roleId);
+      } else {
+        const role = await this.roleResource.updateRole(config);
+        status.info('Role is updated');
+        status.info(role.roleId);
+      }
+    } catch (exception) {
+      if (create) {
+        status.error('administration_roles_role_create_error', exception);
+      } else {
+        status.error('administration_roles_role_save_error', exception);
+      }
+    }
+  }
+
+  private fillConfig(
+    { state, updated }: IRoleFormFillConfigData,
+    contexts: IExecutionContextProvider<IRoleFormFillConfigData>
+  ) {
+    if (!updated) {
+      return;
+    }
+
+    if (!state.info) {
+      return;
+    }
+
+    if (state.info.roleId) {
+      state.config.roleId = state.info.roleId;
+    }
+    if (state.info.roleName) {
+      state.config.roleName = state.info.roleName;
+    }
+    if (state.info.description) {
+      state.config.description = state.info.description;
+    }
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RoleForm.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleForm.tsx
new file mode 100644
index 0000000000..4384bf7965
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleForm.tsx
@@ -0,0 +1,181 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import styled, { css } from 'reshadow';
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import {
+  TabsState, TabList, UNDERLINE_TAB_STYLES, TabPanelList, Placeholder,
+  useObjectRef, useExecutor, BASE_CONTAINERS_STYLES, IconOrImage
+} from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { roleContext } from './Contexts/roleContext';
+import type { IRoleFormState } from './IRoleFormProps';
+import { RoleFormService } from './RoleFormService';
+
+const tabsStyles = css`
+  TabList {
+    position: relative;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  Tab {
+    height: 46px!important;
+    text-transform: uppercase;
+    font-weight: 500 !important;
+  }
+`;
+
+const topBarStyles = composes(
+  css`
+    role-top-bar {
+      composes: theme-border-color-background theme-background-secondary theme-text-on-secondary from global;
+    }
+  `,
+  css`
+    role-top-bar {
+      position: relative;
+      display: flex;
+      padding-top: 16px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-bottom: solid 2px;
+        border-color: inherit;
+      }
+    }
+    role-top-bar-tabs {
+      flex: 1;
+    }
+
+    role-top-bar-actions {
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+      gap: 16px;
+    }
+
+    role-status-message {
+      composes: theme-typography--caption from global;
+      height: 24px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      & IconOrImage {
+        height: 24px;
+        width: 24px;
+      }
+    }
+  `
+);
+
+const formStyles = composes(
+  css`
+    box {
+      composes: theme-background-secondary theme-text-on-secondary from global;
+    }
+
+    content-box {
+      composes: theme-background-secondary theme-border-color-background from global;
+    }
+  `,
+  css`
+    box {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+      overflow: auto;
+    }
+    content-box {
+      position: relative;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      overflow: auto;
+    }
+  `
+);
+
+interface Props {
+  state: IRoleFormState;
+  onCancel?: () => void;
+  onSave?: (role: RoleInfo) => void;
+  className?: string;
+}
+
+export const RoleForm = observer<Props>(function RoleForm({
+  state,
+  onCancel,
+  onSave = () => {},
+  className,
+}) {
+  const translate = useTranslate();
+  const props = useObjectRef({ onSave });
+  const style = [tabsStyles, UNDERLINE_TAB_STYLES];
+  const styles = useStyles(style, BASE_CONTAINERS_STYLES, topBarStyles, formStyles);
+  const service = useService(RoleFormService);
+
+  useExecutor({
+    executor: state.submittingTask,
+    postHandlers: [function save(data, contexts) {
+      const validation = contexts.getContext(service.configurationValidationContext);
+      const state = contexts.getContext(service.configurationStatusContext);
+      const config = contexts.getContext(roleContext);
+
+      if (validation.valid && state.saved) {
+        props.onSave(config);
+      }
+    }],
+  });
+
+  useEffect(() => {
+    state.loadRoleInfo();
+  }, []);
+
+  return styled(styles)(
+    <TabsState
+      container={service.tabsContainer}
+      localState={state.partsState}
+      state={state}
+      onCancel={onCancel}
+    >
+      <box className={className}>
+        <role-top-bar>
+          <role-top-bar-tabs>
+            <role-status-message>
+              {state.statusMessage && (
+                <>
+                  <IconOrImage icon='/icons/info_icon.svg' />
+                  {translate(state.statusMessage)}
+                </>
+              )}
+            </role-status-message>
+            <TabList style={style} disabled={false} />
+          </role-top-bar-tabs>
+          <role-top-bar-actions>
+            <Placeholder container={service.actionsContainer} state={state} onCancel={onCancel} />
+          </role-top-bar-actions>
+        </role-top-bar>
+        <content-box>
+          <TabPanelList style={style} />
+        </content-box>
+      </box>
+    </TabsState>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormBaseActions.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormBaseActions.tsx
new file mode 100644
index 0000000000..d141c9f967
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormBaseActions.tsx
@@ -0,0 +1,45 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+
+import { Button, PlaceholderComponent } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+
+import type { IRoleFormProps } from './IRoleFormProps';
+
+export const RoleFormBaseActions: PlaceholderComponent<IRoleFormProps> = observer(function RoleFormBaseActions({
+  state,
+  onCancel,
+}) {
+  const translate = useTranslate();
+
+  return (
+    <>
+      {onCancel && (
+        <Button
+          type="button"
+          disabled={state.disabled}
+          mod={['outlined']}
+          onClick={onCancel}
+        >
+          {translate('ui_processing_cancel')}
+        </Button>
+      )}
+      <Button
+        type="button"
+        disabled={state.disabled || state.readonly}
+        mod={['unelevated']}
+        loader
+        onClick={state.save}
+      >
+        {translate(state.mode === 'edit' ? 'ui_processing_save' : 'ui_processing_create')}
+      </Button>
+    </>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormService.ts
new file mode 100644
index 0000000000..b77390785b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormService.ts
@@ -0,0 +1,134 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { PlaceholderContainer, TabsContainer } from '@cloudbeaver/core-blocks';
+import { injectable } from '@cloudbeaver/core-di';
+import { ENotificationType, NotificationService } from '@cloudbeaver/core-events';
+import { ExecutorHandlersCollection, ExecutorInterrupter, IExecutorHandler, IExecutorHandlersCollection } from '@cloudbeaver/core-executor';
+
+import type { IRoleFormFillConfigData, IRoleFormProps, IRoleFormState, IRoleFormSubmitData } from './IRoleFormProps';
+import { RoleFormBaseActions } from './RoleFormBaseActions';
+
+export interface IRoleFormValidation {
+  valid: boolean;
+  messages: string[];
+  info: (message: string) => void;
+  error: (message: string) => void;
+}
+
+export interface IRoleFormStatus {
+  saved: boolean;
+  messages: string[];
+  exception: Error | null;
+  info: (message: string) => void;
+  error: (message: string, exception?: Error) => void;
+}
+
+@injectable()
+export class RoleFormService {
+  readonly tabsContainer: TabsContainer<IRoleFormProps>;
+  readonly actionsContainer: PlaceholderContainer<IRoleFormProps>;
+
+  readonly configureTask: IExecutorHandlersCollection<IRoleFormState>;
+  readonly fillConfigTask: IExecutorHandlersCollection<IRoleFormFillConfigData>;
+  readonly prepareConfigTask: IExecutorHandlersCollection<IRoleFormSubmitData>;
+  readonly formValidationTask: IExecutorHandlersCollection<IRoleFormSubmitData>;
+  readonly formSubmittingTask: IExecutorHandlersCollection<IRoleFormSubmitData>;
+  readonly formStateTask: IExecutorHandlersCollection<IRoleFormState>;
+
+  constructor(
+    private readonly notificationService: NotificationService,
+  ) {
+    this.tabsContainer = new TabsContainer();
+    this.actionsContainer = new PlaceholderContainer();
+    this.configureTask = new ExecutorHandlersCollection();
+    this.fillConfigTask = new ExecutorHandlersCollection();
+    this.prepareConfigTask = new ExecutorHandlersCollection();
+    this.formSubmittingTask = new ExecutorHandlersCollection();
+    this.formValidationTask = new ExecutorHandlersCollection();
+    this.formStateTask = new ExecutorHandlersCollection();
+
+    this.formSubmittingTask
+      .before(this.formValidationTask)
+      .before(this.prepareConfigTask);
+
+    this.formStateTask
+      .before<IRoleFormSubmitData>(this.prepareConfigTask, state => ({ state, submitType: 'submit' }));
+
+    this.formSubmittingTask.addPostHandler(this.showSubmittingStatusMessage);
+    this.formValidationTask.addPostHandler(this.ensureValidation);
+
+    this.actionsContainer.add(RoleFormBaseActions);
+  }
+
+  configurationValidationContext = (): IRoleFormValidation => ({
+    valid: true,
+    messages: [],
+    info(message: string) {
+      this.messages.push(message);
+    },
+    error(message: string) {
+      this.messages.push(message);
+      this.valid = false;
+    },
+  });
+
+  configurationStatusContext = (): IRoleFormStatus => ({
+    saved: true,
+    messages: [],
+    exception: null,
+    info(message: string) {
+      this.messages.push(message);
+    },
+    error(message: string, exception: Error | null = null) {
+      this.messages.push(message);
+      this.saved = false;
+      this.exception = exception;
+    },
+  });
+
+  private showSubmittingStatusMessage: IExecutorHandler<IRoleFormSubmitData> = (data, contexts) => {
+    const status = contexts.getContext(this.configurationStatusContext);
+
+    if (!status.saved) {
+      ExecutorInterrupter.interrupt(contexts);
+    }
+
+    if (status.messages.length > 0) {
+      if (status.exception) {
+        this.notificationService.logException(
+          status.exception,
+          status.messages[0],
+          status.messages.slice(1).join('\n')
+        );
+      } else {
+        this.notificationService.notify({
+          title: status.messages[0],
+          message: status.messages.slice(1).join('\n'),
+        }, status.saved ? ENotificationType.Success : ENotificationType.Error);
+      }
+    }
+  };
+
+  private ensureValidation: IExecutorHandler<IRoleFormSubmitData> = (data, contexts) => {
+    const validation = contexts.getContext(this.configurationValidationContext);
+
+    if (!validation.valid) {
+      ExecutorInterrupter.interrupt(contexts);
+    }
+
+    if (validation.messages.length > 0) {
+      this.notificationService.notify({
+        title: data.state.mode === 'edit'
+          ? 'administration_identity_providers_provider_save_error'
+          : 'administration_identity_providers_provider_create_error',
+        message: validation.messages.join('\n'),
+      }, validation.valid ? ENotificationType.Info : ENotificationType.Error);
+    }
+  };
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormState.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormState.ts
new file mode 100644
index 0000000000..10ac03a37f
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RoleFormState.ts
@@ -0,0 +1,160 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { computed, makeObservable, observable } from 'mobx';
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import { Executor, IExecutionContextProvider, IExecutor } from '@cloudbeaver/core-executor';
+import type { CachedMapResource } from '@cloudbeaver/core-sdk';
+import { MetadataMap } from '@cloudbeaver/core-utils';
+
+import { roleFormConfigureContext } from './Contexts/roleFormConfigureContext';
+import { IRoleFormStateInfo, roleFormStateContext } from './Contexts/roleFormStateContext';
+import type { IRoleFormState, IRoleFormSubmitData, RoleFormMode } from './IRoleFormProps';
+import type { RoleFormService } from './RoleFormService';
+
+export class RoleFormState implements IRoleFormState {
+  mode: RoleFormMode;
+  config: RoleInfo;
+  statusMessage: string | null;
+  configured: boolean;
+  partsState: MetadataMap<string, any>;
+
+  get info(): RoleInfo | undefined {
+    if (!this.config.roleId) {
+      return undefined;
+    }
+    return this.resource.get(this.config.roleId);
+  }
+
+  get loading(): boolean {
+    return this.loadRoleTask.executing || this.submittingTask.executing;
+  }
+
+  get disabled(): boolean {
+    return this.loading || !!this.stateInfo?.disabled || this.loadRoleTask.executing;
+  }
+
+  get readonly(): boolean {
+    return false;
+  }
+
+  readonly resource: CachedMapResource<string, RoleInfo>;
+
+  readonly service: RoleFormService;
+  readonly submittingTask: IExecutor<IRoleFormSubmitData>;
+
+  private stateInfo: IRoleFormStateInfo | null;
+  private loadRoleTask: IExecutor<IRoleFormState>;
+  private formStateTask: IExecutor<IRoleFormState>;
+
+  constructor(
+    service: RoleFormService,
+    resource: CachedMapResource<string, RoleInfo>
+  ) {
+    this.resource = resource;
+    this.config = {
+      roleId: '',
+    };
+
+    this.stateInfo = null;
+    this.service = service;
+    this.formStateTask = new Executor<IRoleFormState>(this, () => true);
+    this.loadRoleTask = new Executor<IRoleFormState>(this, () => true);
+    this.submittingTask = new Executor();
+    this.statusMessage = null;
+    this.configured = false;
+    this.partsState = new MetadataMap();
+    this.mode = 'create';
+
+    makeObservable<IRoleFormState>(this, {
+      mode: observable,
+      config: observable,
+      statusMessage: observable,
+      info: computed,
+      readonly: computed,
+    });
+
+    this.save = this.save.bind(this);
+    this.loadInfo = this.loadInfo.bind(this);
+    this.updateFormState = this.updateFormState.bind(this);
+
+    this.formStateTask
+      .addCollection(service.formStateTask)
+      .addPostHandler(this.updateFormState);
+
+    this.loadRoleTask
+      .before(service.configureTask)
+      .addPostHandler(this.loadInfo)
+      .next(service.fillConfigTask, (state, contexts) => {
+        const configuration = contexts.getContext(roleFormConfigureContext);
+
+        return {
+          state,
+          updated: state.info !== configuration.info || !this.configured,
+        };
+      })
+      .next(this.formStateTask);
+  }
+
+  async load(): Promise<void> { }
+
+  async loadRoleInfo(): Promise<RoleInfo | undefined> {
+    await this.loadRoleTask.execute(this);
+
+    return this.info;
+  }
+
+  setOptions(
+    mode: RoleFormMode,
+  ): this {
+    this.mode = mode;
+    return this;
+  }
+
+  setConfig(config: RoleInfo): this {
+    this.config = config;
+    return this;
+  }
+
+  async save(): Promise<void> {
+    await this.submittingTask.executeScope(
+      {
+        state: this,
+      },
+      this.service.formSubmittingTask
+    );
+  }
+
+  private updateFormState(
+    data: IRoleFormState,
+    contexts: IExecutionContextProvider<IRoleFormState>
+  ): void {
+    const context = contexts.getContext(roleFormStateContext);
+
+    this.statusMessage = context.statusMessage;
+
+    this.stateInfo = context;
+    this.configured = true;
+  }
+
+  private async loadInfo(
+    data: IRoleFormState,
+    contexts: IExecutionContextProvider<IRoleFormState>
+  ) {
+    if (!data.config.roleId) {
+      return;
+    }
+
+    if (!this.resource.has(data.config.roleId)) {
+      return;
+    }
+
+    await this.resource.load(data.config.roleId);
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministration.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministration.tsx
new file mode 100644
index 0000000000..5a8e2127d0
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministration.tsx
@@ -0,0 +1,106 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css, use } from 'reshadow';
+
+import { AdministrationItemContentComponent, ADMINISTRATION_TOOLS_PANEL_STYLES } from '@cloudbeaver/core-administration';
+import { BASE_CONTAINERS_STYLES, ToolsAction, Loader, ToolsPanel, useTable } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { composes, useStyles } from '@cloudbeaver/core-theming';
+
+import { CreateRole } from './CreateRole';
+import { CreateRoleService } from './CreateRoleService';
+import { RolesTable } from './RolesTable/RolesTable';
+import { useRolesTable } from './RolesTable/useRolesTable';
+
+const styles = composes(
+  css`
+    layout-grid-cell {
+      composes: theme-background-surface theme-text-on-surface from global;
+    }
+    layout-grid-cell {
+      composes: theme-border-color-background from global;
+    }
+`,
+  css` 
+    layout-grid {
+      width: 100%;
+      overflow: auto;
+    }
+    layout-grid-inner {
+      min-height: 100%;
+    }
+    layout-grid-cell {
+      position: relative;
+      border: solid 1px;
+    }
+`);
+
+export const RolesAdministration: AdministrationItemContentComponent = observer(function RolesAdministration({
+  sub,
+}) {
+  const translate = useTranslate();
+  const style = useStyles(styles, ADMINISTRATION_TOOLS_PANEL_STYLES, BASE_CONTAINERS_STYLES);
+  const service = useService(CreateRoleService);
+
+  const tableState = useTable();
+  const rolesTableState = useRolesTable(tableState);
+
+  return styled(style)(
+    <>
+      <ToolsPanel>
+        <ToolsAction
+          title={translate('administration_roles_add_tooltip')}
+          icon="add"
+          viewBox="0 0 24 24"
+          disabled={!!sub || rolesTableState.processing}
+          onClick={service.create}
+        >
+          {translate('ui_add')}
+        </ToolsAction>
+        <ToolsAction
+          title={translate('administration_roles_refresh_tooltip')}
+          icon="refresh"
+          viewBox="0 0 24 24"
+          disabled={rolesTableState.processing}
+          onClick={rolesTableState.update}
+        >
+          {translate('ui_refresh')}
+        </ToolsAction>
+        <ToolsAction
+          title={translate('administration_roles_delete_tooltip')}
+          icon="trash"
+          viewBox="0 0 24 24"
+          disabled={!tableState.itemsSelected || rolesTableState.processing}
+          onClick={rolesTableState.delete}
+        >
+          {translate('ui_delete')}
+        </ToolsAction>
+      </ToolsPanel>
+      <layout-grid>
+        <layout-grid-inner>
+          {sub && (
+            <layout-grid-cell {...use({ span: 12 })}>
+              <CreateRole />
+            </layout-grid-cell>
+          )}
+          <layout-grid-cell {...use({ span: 12 })}>
+            <RolesTable
+              roles={rolesTableState.roles}
+              selectedItems={tableState.selected}
+              expandedItems={tableState.expanded}
+            />
+            <Loader loading={false} overlay />
+          </layout-grid-cell>
+        </layout-grid-inner>
+      </layout-grid>
+    </>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationNavService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationNavService.ts
new file mode 100644
index 0000000000..82e6c945c6
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationNavService.ts
@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { AdministrationScreenService } from '@cloudbeaver/core-administration';
+import { injectable } from '@cloudbeaver/core-di';
+
+@injectable()
+export class RolesAdministrationNavService {
+  constructor(
+    private administrationScreenService: AdministrationScreenService
+  ) { }
+
+  navToRoot(): void {
+    this.administrationScreenService.navigateToItem('roles');
+  }
+
+  navToCreate(): void {
+    this.administrationScreenService.navigateToItemSub('roles', 'create');
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationService.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationService.ts
new file mode 100644
index 0000000000..bfffbd35a0
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesAdministrationService.ts
@@ -0,0 +1,70 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { AdministrationItemService, AdministrationItemType } from '@cloudbeaver/core-administration';
+import { RoleInfo, RolesResource } from '@cloudbeaver/core-authentication';
+import { PlaceholderContainer } from '@cloudbeaver/core-blocks';
+import { injectable, Bootstrap } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
+
+import { CreateRoleService } from './CreateRoleService';
+import { RolesAdministration } from './RolesAdministration';
+import { RolesDrawerItem } from './RolesDrawerItem';
+
+export interface IRoleDetailsInfoProps {
+  role: RoleInfo;
+}
+
+@injectable()
+export class RolesAdministrationService extends Bootstrap {
+  readonly roleDetailsInfoPlaceholder = new PlaceholderContainer<IRoleDetailsInfoProps>();
+
+  constructor(
+    private readonly administrationItemService: AdministrationItemService,
+    private readonly createRoleService: CreateRoleService,
+    private readonly rolesResource: RolesResource,
+    private readonly notificationService: NotificationService,
+  ) {
+    super();
+  }
+
+  register(): void {
+    this.administrationItemService.create({
+      name: 'roles',
+      type: AdministrationItemType.Default,
+      order: 3.1,
+      configurationWizardOptions: {
+        description: 'administration_roles_tab_description',
+      },
+      sub: [
+        {
+          name: 'create',
+          onActivate: () => this.createRoleService.fillData(),
+        },
+      ],
+      getContentComponent: () => RolesAdministration,
+      getDrawerComponent: () => RolesDrawerItem,
+      onActivate: this.loadRoles.bind(this),
+      onDeActivate: (configurationWizard, outside) => {
+        if (outside) {
+          this.rolesResource.cleanNewFlags();
+        }
+      },
+    });
+  }
+
+  load(): void | Promise<void> { }
+
+  private async loadRoles() {
+    try {
+      await this.rolesResource.loadAll();
+    } catch (exception) {
+      this.notificationService.logException(exception, 'Error occurred while loading roles');
+    }
+  }
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesDrawerItem.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesDrawerItem.tsx
new file mode 100644
index 0000000000..e84cd63921
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesDrawerItem.tsx
@@ -0,0 +1,33 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import styled from 'reshadow';
+
+import type { AdministrationItemDrawerProps } from '@cloudbeaver/core-administration';
+import { Tab, TabTitle, TabIcon } from '@cloudbeaver/core-blocks';
+import { Translate } from '@cloudbeaver/core-localization';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+export const RolesDrawerItem: React.FC<AdministrationItemDrawerProps> = function RolesDrawerItem({
+  item,
+  onSelect,
+  style,
+  disabled,
+}) {
+  return styled(useStyles(style))(
+    <Tab
+      tabId={item.name}
+      disabled={disabled}
+      title='administration_roles_tab_title'
+      onOpen={() => onSelect(item.name)}
+    >
+      <TabIcon icon='/icons/tab_role.svg' />
+      <TabTitle><Translate token='administration_roles_tab_title' /></TabTitle>
+    </Tab>
+  );
+};
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/Role.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/Role.tsx
new file mode 100644
index 0000000000..4433be8b63
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/Role.tsx
@@ -0,0 +1,60 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css, use } from 'reshadow';
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import { TableItem, TableColumnValue, TableItemSelect, TableItemExpand, Placeholder } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import { RolesAdministrationService } from '../RolesAdministrationService';
+import { RoleEdit } from './RoleEdit';
+
+const styles = css`
+  StaticImage {
+    display: flex;
+    width: 24px;
+
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+  TableColumnValue[expand] {
+    cursor: pointer;
+  }
+  TableColumnValue[|gap] {
+    gap: 16px;
+  }
+`;
+
+interface Props {
+  role: RoleInfo;
+}
+
+export const Role = observer<Props>(function Role({ role }) {
+  const service = useService(RolesAdministrationService);
+
+  return styled(useStyles(styles))(
+    <TableItem item={role.roleId} expandElement={RoleEdit}>
+      <TableColumnValue centerContent flex>
+        <TableItemSelect />
+      </TableColumnValue>
+      <TableColumnValue centerContent flex expand>
+        <TableItemExpand />
+      </TableColumnValue>
+      <TableColumnValue expand>{role.roleId}</TableColumnValue>
+      <TableColumnValue>{role.roleName || ''}</TableColumnValue>
+      <TableColumnValue title={role.description} ellipsis>{role.description || ''}</TableColumnValue>
+      <TableColumnValue flex {...use({ gap: true })}>
+        <Placeholder container={service.roleDetailsInfoPlaceholder} role={role} />
+      </TableColumnValue>
+    </TableItem>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RoleEdit.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RoleEdit.tsx
new file mode 100644
index 0000000000..4a5d391581
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RoleEdit.tsx
@@ -0,0 +1,68 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import styled, { css } from 'reshadow';
+
+import { RolesResource } from '@cloudbeaver/core-authentication';
+import { useService } from '@cloudbeaver/core-di';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
+
+import { RoleForm } from '../RoleForm';
+import { useRoleFormState } from '../useRoleFormState';
+
+const styles = composes(
+  css`
+    box {
+      composes: theme-background-secondary theme-text-on-secondary from global;
+    }
+  `,
+  css`
+    box {
+      box-sizing: border-box;
+      padding-bottom: 24px;
+      display: flex;
+      flex-direction: column;
+      height: 664px;
+    }
+  `
+);
+
+interface Props {
+  item: string;
+}
+
+export const RoleEdit = observer<Props>(function RoleEdit({
+  item,
+}) {
+  const resource = useService(RolesResource);
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    boxRef.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+    });
+  }, []);
+
+  const data = useRoleFormState(
+    resource,
+    state => state.setOptions('edit')
+  );
+
+  data.config.roleId = item;
+
+  return styled(useStyles(styles))(
+    <box ref={boxRef} as='div'>
+      <RoleForm
+        state={data}
+      />
+    </box>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RolesTable.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RolesTable.tsx
new file mode 100644
index 0000000000..ad8d4fa0ed
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RolesTable.tsx
@@ -0,0 +1,50 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled, { css, use } from 'reshadow';
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import { Table, TableHeader, TableColumnHeader, TableBody } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+import { useStyles } from '@cloudbeaver/core-theming';
+
+import { Role } from './Role';
+
+const styles = css`
+  Table {
+    width: 100%;
+  }
+`;
+
+interface Props {
+  roles: RoleInfo[];
+  selectedItems: Map<string, boolean>;
+  expandedItems: Map<string, boolean>;
+}
+
+export const RolesTable = observer<Props>(function RolesTable({ roles, selectedItems, expandedItems }) {
+  const translate = useTranslate();
+  return styled(useStyles(styles))(
+    <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
+      <TableHeader>
+        <TableColumnHeader min />
+        <TableColumnHeader min />
+        <TableColumnHeader>{translate('administration_roles_role_id')}</TableColumnHeader>
+        <TableColumnHeader>{translate('administration_roles_role_name')}</TableColumnHeader>
+        <TableColumnHeader>{translate('administration_roles_role_description')}</TableColumnHeader>
+        <TableColumnHeader />
+      </TableHeader>
+      <TableBody>
+        {roles.map(role => (
+          <Role key={role.roleId} role={role} />
+        ))}
+      </TableBody>
+    </Table>
+  );
+});
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/useRolesTable.tsx b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/useRolesTable.tsx
new file mode 100644
index 0000000000..8097292223
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/useRolesTable.tsx
@@ -0,0 +1,89 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { computed, observable } from 'mobx';
+
+import { compareRoles, RoleInfo, RolesResource } from '@cloudbeaver/core-authentication';
+import { ITableState, useObservableRef } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { CommonDialogService, ConfirmationDialog, DialogueStateResult } from '@cloudbeaver/core-dialogs';
+import { NotificationService } from '@cloudbeaver/core-events';
+import { resourceKeyList } from '@cloudbeaver/core-sdk';
+
+interface State {
+  processing: boolean;
+  tableState: ITableState;
+  roles: RoleInfo[];
+  update: () => Promise<void>;
+  delete: () => Promise<void>;
+}
+
+export function useRolesTable(tableState: ITableState): State {
+  const notificationService = useService(NotificationService);
+  const dialogService = useService(CommonDialogService);
+  const resource = useService(RolesResource);
+
+  return useObservableRef<State>(() => ({
+    processing: false,
+    tableState,
+    get roles() {
+      return resource.values.slice().sort(compareRoles);
+    },
+    async update() {
+      if (this.processing) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        await resource.refreshAll();
+        notificationService.logSuccess({ title: 'administration_roles_role_list_update_success' });
+      } catch (exception) {
+        notificationService.logException(exception, 'administration_roles_role_list_update_fail');
+      } finally {
+        this.processing = false;
+      }
+    },
+    async delete() {
+      if (this.processing) {
+        return;
+      }
+
+      const deletionList = this.tableState.selectedList;
+
+      if (deletionList.length === 0) {
+        return;
+      }
+
+      const result = await dialogService.open(ConfirmationDialog, {
+        title: 'ui_data_delete_confirmation',
+        message: `You're going to delete these roles: ${deletionList.map(name => `"${name}"`).join(', ')}. Are you sure?`,
+        confirmActionText: 'ui_delete',
+      });
+
+      if (result === DialogueStateResult.Rejected) {
+        return;
+      }
+
+      try {
+        this.processing = true;
+        await resource.deleteRole(resourceKeyList(deletionList));
+
+        this.tableState.unselect();
+        this.tableState.unexpand(deletionList);
+      } catch (exception) {
+        notificationService.logException(exception, 'Roles delete Error');
+      } finally {
+        this.processing = false;
+      }
+    },
+  }), {
+    processing: observable.ref,
+    roles: computed,
+  }, { tableState }, ['update', 'delete']);
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Roles/useRoleFormState.ts b/webapp/packages/plugin-authentication/src/Administration/Roles/useRoleFormState.ts
new file mode 100644
index 0000000000..1880b8cbdb
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Administration/Roles/useRoleFormState.ts
@@ -0,0 +1,36 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { useState } from 'react';
+
+import type { RoleInfo } from '@cloudbeaver/core-authentication';
+import { useService } from '@cloudbeaver/core-di';
+import type { CachedMapResource } from '@cloudbeaver/core-sdk';
+
+import type { IRoleFormState } from './IRoleFormProps';
+import { RoleFormService } from './RoleFormService';
+import { RoleFormState } from './RoleFormState';
+
+export function useRoleFormState(
+  resource: CachedMapResource<string, RoleInfo>,
+  configure?: (state: IRoleFormState) => any
+): IRoleFormState {
+  const service = useService(RoleFormService);
+  const [state] = useState<IRoleFormState>(() => {
+    const state = new RoleFormState(
+      service,
+      resource,
+    );
+    configure?.(state);
+
+    state.load();
+    return state;
+  });
+
+  return state;
+}
diff --git a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
index c1518062d4..148310318e 100644
--- a/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
+++ b/webapp/packages/plugin-authentication/src/Administration/Users/UserForm/UserFormController.ts
@@ -8,7 +8,7 @@
 
 import { observable, computed, makeObservable } from 'mobx';
 
-import { isLocalUser, RolesResource, UsersResource } from '@cloudbeaver/core-authentication';
+import { isLocalUser, RoleInfo, RolesResource, UsersResource } from '@cloudbeaver/core-authentication';
 import { DatabaseConnection, ConnectionsResource, DBDriverResource } from '@cloudbeaver/core-connections';
 import { injectable, IInitializableController, IDestructibleController } from '@cloudbeaver/core-di';
 import { CommonDialogService } from '@cloudbeaver/core-dialogs';
@@ -16,7 +16,7 @@ import { ENotificationType, NotificationService } from '@cloudbeaver/core-events
 import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 import { ErrorDetailsDialog } from '@cloudbeaver/core-notifications';
 import {
-  GQLErrorCatcher, AdminConnectionGrantInfo, AdminSubjectType, AdminUserInfo, AdminRoleInfo
+  GQLErrorCatcher, AdminConnectionGrantInfo, AdminSubjectType, AdminUserInfo
 } from '@cloudbeaver/core-sdk';
 
 interface IStatusMessage {
@@ -45,7 +45,7 @@ export class UserFormController implements IInitializableController, IDestructib
     return Array.from(this.connectionsResource.data.values());
   }
 
-  get roles(): AdminRoleInfo[] {
+  get roles(): RoleInfo[] {
     return Array.from(this.rolesResource.data.values());
   }
 
diff --git a/webapp/packages/plugin-authentication/src/locales/en.ts b/webapp/packages/plugin-authentication/src/locales/en.ts
index 462748f2e7..1d1b0e24ed 100644
--- a/webapp/packages/plugin-authentication/src/locales/en.ts
+++ b/webapp/packages/plugin-authentication/src/locales/en.ts
@@ -72,4 +72,28 @@ export default [
   ['administration_identity_providers_provider_create_error', 'Create configuration error'],
   ['administration_identity_providers_configuration_list_update_success', 'Configuration list was refreshed'],
   ['administration_identity_providers_configuration_list_update_fail', 'Configuration list refresh failed'],
+
+  ['administration_roles_tab_title', 'Roles'],
+  ['administration_roles_tab_description', 'Role management'],
+  ['administration_roles_role_creation', 'Role creation'],
+  ['administration_roles_role_id', 'Role ID'],
+  ['administration_roles_role_name', 'Role name'],
+  ['administration_roles_role_description', 'Description'],
+  ['administration_roles_role_create_error', 'Create role error'],
+  ['administration_roles_role_save_error', 'Save role error'],
+  ['administration_roles_role_list_update_success', 'Role list was refreshed'],
+  ['administration_roles_role_list_update_fail', 'Role list refresh failed'],
+  ['administration_roles_add_tooltip', 'Add new role'],
+  ['administration_roles_refresh_tooltip', 'Refresh role list'],
+  ['administration_roles_delete_tooltip', 'Delete selected roles'],
+
+  ['administration_roles_role_granted_users_tab_title', 'Granted users'],
+  ['administration_roles_role_granted_users_search_placeholder', 'Search for user ID...'],
+  ['administration_roles_role_granted_users_user_id', 'User ID'],
+  ['administration_roles_role_granted_users_user_name', 'User name'],
+  ['administration_roles_role_granted_users_empty', 'No available users'],
+
+  ['administration_roles_role_granted_connections_tab_title', 'Granted connections'],
+  ['administration_roles_role_granted_connections_search_placeholder', 'Search for connection name...'],
+  ['administration_roles_role_granted_connections_empty', 'No available connections'],
 ];
diff --git a/webapp/packages/plugin-authentication/src/locales/it.ts b/webapp/packages/plugin-authentication/src/locales/it.ts
index 0654c9fc3d..fa3694793a 100644
--- a/webapp/packages/plugin-authentication/src/locales/it.ts
+++ b/webapp/packages/plugin-authentication/src/locales/it.ts
@@ -35,7 +35,7 @@ export default [
   ['authentication_user_login_not_set', 'Login non può esser vuoto'],
   ['authentication_user_role_not_set', 'Selezionare almeno un ruolo'],
   ['authentication_user_password_not_set', 'La Password è obbligatoria'],
-  ['authentication_user_passwords_not_match', "Le Passwords non coincidono"],
+  ['authentication_user_passwords_not_match', 'Le Passwords non coincidono'],
   ['authentication_user_login_already_exists', 'Esiste già un utente con quel nome'],
   ['authentication_user_login_cant_be_used', 'Quel nome non può essere usato'],
   ['authentication_user_password_change_dialog_title', 'Modifica la password (locale)'],
diff --git a/webapp/packages/plugin-authentication/src/locales/ru.ts b/webapp/packages/plugin-authentication/src/locales/ru.ts
index bc3924b4b9..c76af74021 100644
--- a/webapp/packages/plugin-authentication/src/locales/ru.ts
+++ b/webapp/packages/plugin-authentication/src/locales/ru.ts
@@ -61,4 +61,28 @@ export default [
   ['administration_identity_providers_provider_create_error', 'Ошибка при создании конфигурации'],
   ['administration_identity_providers_configuration_list_update_success', 'Список конфигураций успешно обновлен'],
   ['administration_identity_providers_configuration_list_update_fail', 'Не удалось обновить список конфигураций'],
+
+  ['administration_roles_tab_title', 'Роли'],
+  ['administration_roles_tab_description', 'Управление ролями'],
+  ['administration_roles_role_creation', 'Создание роли'],
+  ['administration_roles_role_id', 'ID Роли'],
+  ['administration_roles_role_name', 'Название роли'],
+  ['administration_roles_role_description', 'Описание'],
+  ['administration_roles_role_create_error', 'Не удалось создать роль'],
+  ['administration_roles_role_save_error', 'Не удалось обновить роль'],
+  ['administration_roles_role_list_update_success', 'Список ролей обновлен'],
+  ['administration_roles_role_list_update_fail', 'Не удалось обновить список ролей'],
+  ['administration_roles_add_tooltip', 'Создать новую роль'],
+  ['administration_roles_refresh_tooltip', 'Обновить список ролей'],
+  ['administration_roles_delete_tooltip', 'Уадлить выбранные роли'],
+
+  ['administration_roles_role_granted_users_tab_title', 'Связанные пользователи'],
+  ['administration_roles_role_granted_users_search_placeholder', 'Поиск по ID пользователя...'],
+  ['administration_roles_role_granted_users_user_id', 'ID пользователя'],
+  ['administration_roles_role_granted_users_user_name', 'Имя пользователя'],
+  ['administration_roles_role_granted_users_empty', 'Нет доступных пользователей'],
+
+  ['administration_roles_role_granted_connections_tab_title', 'Связанные подключения'],
+  ['administration_roles_role_granted_connections_search_placeholder', 'Поиск по названию подключения...'],
+  ['administration_roles_role_granted_connections_empty', 'Нет доступных подключений'],
 ];
diff --git a/webapp/packages/plugin-authentication/src/manifest.ts b/webapp/packages/plugin-authentication/src/manifest.ts
index c9ee3d9e8a..38d529743f 100644
--- a/webapp/packages/plugin-authentication/src/manifest.ts
+++ b/webapp/packages/plugin-authentication/src/manifest.ts
@@ -13,6 +13,13 @@ import { AuthConfigurationsAdministrationNavService } from './Administration/Ide
 import { AuthConfigurationsAdministrationService } from './Administration/IdentityProviders/AuthConfigurationsAdministrationService';
 import { CreateAuthConfigurationService } from './Administration/IdentityProviders/CreateAuthConfigurationService';
 import { AuthConfigurationOptionsTabService } from './Administration/IdentityProviders/Options/AuthConfigurationOptionsTabService';
+import { CreateRoleService } from './Administration/Roles/CreateRoleService';
+import { GrantedConnectionsTabService } from './Administration/Roles/GrantedConnections/GrantedConnectionsTabService';
+import { GrantedUsersTabService } from './Administration/Roles/GrantedUsers/GrantedUsersTabService';
+import { RoleOptionsTabService } from './Administration/Roles/Options/RoleOptionsTabService';
+import { RoleFormService } from './Administration/Roles/RoleFormService';
+import { RolesAdministrationNavService } from './Administration/Roles/RolesAdministrationNavService';
+import { RolesAdministrationService } from './Administration/Roles/RolesAdministrationService';
 import { ServerConfigurationAuthenticationBootstrap } from './Administration/ServerConfiguration/ServerConfigurationAuthenticationBootstrap';
 import { CreateUserService } from './Administration/Users/CreateUserService';
 import { UserFormBaseBootstrap } from './Administration/Users/UserForm/UserFormBaseBootstrap';
@@ -47,5 +54,12 @@ export const manifest: PluginManifest = {
     AuthConfigurationsAdministrationNavService,
     AuthConfigurationFormService,
     AuthConfigurationOptionsTabService,
+    RolesAdministrationService,
+    CreateRoleService,
+    RolesAdministrationNavService,
+    RoleFormService,
+    RoleOptionsTabService,
+    GrantedUsersTabService,
+    GrantedConnectionsTabService,
   ],
 };