[FIX] UserCard Roles Description

client/admin/permissions/EditRolePage.js

@@ -27,7 +27,7 @@ const EditRolePage = ({ data }) => {
 	const usersInRoleRouter = useRoute('admin-permissions');
 	const router = useRoute('admin-permissions');
 
-	const { values, handlers } = useForm({
+	const { values, handlers, hasUnsavedChanges } = useForm({
 		name: data.name,
 		description: data.description || '',
 		scope: data.scope || 'Users',
@@ -69,7 +69,7 @@ const EditRolePage = ({ data }) => {
 				<RoleForm values={values} handlers={handlers} editing isProtected={data.protected}/>
 				<Field>
 					<Field.Row>
-						<Button primary w='full' onClick={handleSave}>{t('Save')}</Button>
+						<Button primary w='full' disabled={!hasUnsavedChanges} onClick={handleSave}>{t('Save')}</Button>
 					</Field.Row>
 				</Field>
 				{!data.protected && <Field>

client/channel/UserCard/index.js

@@ -12,10 +12,13 @@ import { LocalTime } from '../../components/basic/UTCClock';
 import { useUserInfoActions, useUserInfoActionsSpread } from '../hooks/useUserInfoActions';
 import { useComponentDidUpdate } from '../../hooks/useComponentDidUpdate';
 import { useCurrentRoute } from '../../contexts/RouterContext';
+import { useRolesDescription } from '../../contexts/AuthorizationContext';
 
 const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 	const ref = useRef(target);
 
+	const getRoles = useRolesDescription();
+
 	const t = useTranslation();
 
 	const showRealNames = useSetting('UI_Use_Real_Name');
@@ -54,7 +57,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 			_id,
 			name: showRealNames ? name : username,
 			username,
-			roles: roles && roles.map((role, index) => (
+			roles: roles && getRoles(roles).map((role, index) => (
 				<UserCard.Role key={index}>{role}</UserCard.Role>
 			)),
 			bio,
@@ -66,7 +69,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 			customStatus: statusText,
 			nickname,
 		};
-	}, [data, username, showRealNames, state]);
+	}, [data, username, showRealNames, state, getRoles]);
 
 	const handleOpen = useMutableCallback((e) => {
 		open && open(e);

client/channel/UserInfo/index.js

@@ -13,10 +13,13 @@ import UserCard from '../../components/basic/UserCard';
 import { FormSkeleton } from '../../admin/users/Skeleton';
 import VerticalBar from '../../components/basic/VerticalBar';
 import UserActions from './actions/UserActions';
+import { useRolesDescription } from '../../contexts/AuthorizationContext';
 
 export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, username, tabBar, rid, onClose, video, showBackButton, ...props }) {
 	const t = useTranslation();
 
+	const getRoles = useRolesDescription();
+
 	const showRealNames = useSetting('UI_Use_Real_Name');
 
 	const { data, state, error } = useEndpointDataExperimental(
@@ -44,7 +47,7 @@ export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, user
 			name: showRealNames ? name : username,
 			username,
 			lastLogin,
-			roles: roles.map((role, index) => (
+			roles: roles && getRoles(roles).map((role, index) => (
 				<UserCard.Role key={index}>{role}</UserCard.Role>
 			)),
 			bio,
@@ -58,7 +61,7 @@ export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, user
 			customStatus: statusText,
 			nickname,
 		};
-	}, [data, showRealNames]);
+	}, [data, showRealNames, getRoles]);
 
 	return (
 		<VerticalBar>

client/contexts/AuthorizationContext.ts

@@ -1,5 +1,15 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo, useCallback } from 'react';
 import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
+import EventEmitter from 'wolfy87-eventemitter';
+
+import { IRole } from '../../definition/IUser';
+
+type IRoles = { [_id: string]: IRole }
+
+
+export class RoleStore extends EventEmitter {
+	roles: IRoles = {};
+}
 
 export type AuthorizationContextValue = {
 	queryPermission(
@@ -15,8 +25,10 @@ export type AuthorizationContextValue = {
 		scope?: string | Mongo.ObjectID
 	): Subscription<boolean>;
 	queryRole(role: string | Mongo.ObjectID): Subscription<boolean>;
+	roleStore: RoleStore;
 };
 
+
 export const AuthorizationContext = createContext<AuthorizationContextValue>({
 	queryPermission: () => ({
 		getCurrentValue: (): boolean => false,
@@ -34,6 +46,7 @@ export const AuthorizationContext = createContext<AuthorizationContextValue>({
 		getCurrentValue: (): boolean => false,
 		subscribe: (): Unsubscribe => (): void => undefined,
 	}),
+	roleStore: new RoleStore(),
 });
 
 export const usePermission = (
@@ -72,6 +85,28 @@ export const useAllPermissions = (
 	return useSubscription(subscription);
 };
 
+export const useRolesDescription = (): (ids: Array<string>) => [string] => {
+	const { roleStore } = useContext(AuthorizationContext);
+
+	const subscription = useMemo(
+		() => ({
+			getCurrentValue: (): IRoles => roleStore.roles,
+			subscribe: (callback: Function): () => void => {
+				roleStore.on('change', callback);
+				return (): void => {
+					roleStore.off('change', callback);
+				};
+			},
+		}),
+		[roleStore],
+	);
+
+	const roles = useSubscription<IRoles>(subscription);
+
+	return useCallback((values) => values.map((role: string) => (roles[role] && roles[role].description) || role)
+		, [roles]) as (ids: Array<string>) => [string];
+};
+
 export const useRole = (role: string | Mongo.ObjectID): boolean => {
 	const { queryRole } = useContext(AuthorizationContext);
 	const subscription = useMemo(() => queryRole(role), [queryRole, role]);

client/providers/AuthorizationProvider.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { Meteor } from 'meteor/meteor';
 
 import {
@@ -7,8 +7,11 @@ import {
 	hasAllPermission,
 	hasRole,
 } from '../../app/authorization/client';
-import { AuthorizationContext } from '../contexts/AuthorizationContext';
+import { AuthorizationContext, RoleStore } from '../contexts/AuthorizationContext';
 import { createReactiveSubscriptionFactory } from './createReactiveSubscriptionFactory';
+import { useReactiveValue } from '../hooks/useReactiveValue';
+import { Roles } from '../../app/models/client/models/Roles';
+
 
 const contextValue = {
 	queryPermission: createReactiveSubscriptionFactory(
@@ -23,9 +26,22 @@ const contextValue = {
 	queryRole: createReactiveSubscriptionFactory(
 		(role) => hasRole(Meteor.userId(), role),
 	),
+	roleStore: new RoleStore(),
 };
 
-const AuthorizationProvider: FC = ({ children }) =>
-	<AuthorizationContext.Provider children={children} value={contextValue} />;
+
+const AuthorizationProvider: FC = ({ children }) => {
+	const roles = useReactiveValue(useCallback(() => Roles.find().fetch().reduce((ret, obj) => {
+		ret[obj._id] = obj;
+		return ret;
+	}, {}), []));
+
+	useEffect(() => {
+		contextValue.roleStore.roles = roles;
+		contextValue.roleStore.emit('change', roles);
+	}, [roles]);
+
+	return <AuthorizationContext.Provider children={children} value={contextValue} />;
+};
 
 export default AuthorizationProvider;

definition/IUser.ts

@@ -73,6 +73,15 @@ export interface IUserSettings {
 	};
 }
 
+export interface IRole {
+	description: string;
+	mandatory2fa?: boolean;
+	name: string;
+	protected: boolean;
+	scope?: string;
+	_id: string;
+}
+
 export interface IUser {
 	_id: string;
 	createdAt: Date;

package.json

@@ -145,6 +145,7 @@
 		"@types/mkdirp": "^1.0.1",
 		"@types/underscore.string": "0.0.38",
 		"@types/use-subscription": "^1.0.0",
+		"@types/wolfy87-eventemitter": "^5.2.0",
 		"@types/xml-crypto": "^1.4.1",
 		"@types/xmldom": "^0.1.30",
 		"adm-zip": "RocketChat/adm-zip",