[FIX] User Info: Email and name/username display (#18976)

client/admin/users/UserInfo.js

-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import { UserInfo } from '../../components/basic/UserInfo';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -12,14 +13,12 @@ import { FormSkeleton } from './Skeleton';
 
 export function UserInfoWithData({ uid, username, ...props }) {
 	const t = useTranslation();
-	const [cache, setCache] = useState();
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const approveManuallyUsers = useSetting('Accounts_ManuallyApproveNewUsers');
 
-	const onChange = () => setCache(new Date());
+	const { data, state, error, reload } = useEndpointDataExperimental('users.info', useMemo(() => ({ ...uid && { userId: uid }, ...username && { username } }), [uid, username]));
 
-	// TODO: remove cache. Is necessary for data invalidation
-	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ ...uid && { userId: uid }, ...username && { username } }), [uid, username, cache]));
+	const onChange = useMutableCallback(() => reload());
 
 	const user = useMemo(() => {
 		const { user } = data || { user: {} };
@@ -35,9 +34,10 @@ export function UserInfoWithData({ uid, username, ...props }) {
 			nickname,
 		} = user;
 		return {
-			name: showRealNames ? name : username,
+			name,
 			username,
 			lastLogin,
+			showRealNames,
 			roles: roles.map((role, index) => (
 				<UserCard.Role key={index}>{role}</UserCard.Role>
 			)),
@@ -45,13 +45,13 @@ export function UserInfoWithData({ uid, username, ...props }) {
 			phone: user.phone,
 			utcOffset,
 			customFields: { ...user.customFields, ...approveManuallyUsers && user.active === false && user.reason && { Reason: user.reason } },
-			email: user.emails?.find(({ address }) => !!address)?.address,
+			email: user.emails?.find(({ address }) => !!address),
 			createdAt: user.createdAt,
 			status: UserStatus.getStatus(status),
 			customStatus: statusText,
 			nickname,
 		};
-	}, [data, showRealNames]);
+	}, [approveManuallyUsers, data, showRealNames]);
 
 	if (state === ENDPOINT_STATES.LOADING) {
 		return <FormSkeleton/>;

client/admin/users/UserInfoActions.js

@@ -117,9 +117,9 @@ export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange })
 	}, [deleteUser, erasureType, setModal, t]);
 
 	const setAdminStatus = useMethod('setAdminStatus');
-	const changeAdminStatus = useCallback(() => {
+	const changeAdminStatus = useCallback(async () => {
 		try {
-			setAdminStatus(_id, !isAdmin);
+			await setAdminStatus(_id, !isAdmin);
 			const message = isAdmin ? 'User_is_no_longer_an_admin' : 'User_is_now_an_admin';
 			dispatchToastMessage({ type: 'success', message: t(message) });
 			onChange();
@@ -187,7 +187,7 @@ export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange })
 			label: t('Edit'),
 			action: editUserClick,
 		} },
-		...canAssignAdminRole && { makeAdmin: {
+		...canAssignAdminRole && username && { makeAdmin: {
 			icon: 'key',
 			label: isAdmin ? t('Remove_Admin') : t('Make_Admin'),
 			action: changeAdminStatus,
@@ -224,6 +224,7 @@ export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange })
 		enforcePassword,
 		canResetE2EEKey,
 		confirmResetE2EEKey,
+		username,
 	]);
 
 	const { actions: actionsDefinition, menu: menuOptions } = useUserInfoActionsSpread(options);

client/components/basic/UserInfo.js

@@ -24,6 +24,7 @@ export const UserInfo = React.memo(function UserInfo({
 	username,
 	bio,
 	email,
+	showRealNames,
 	status,
 	phone,
 	customStatus,
@@ -45,12 +46,12 @@ export const UserInfo = React.memo(function UserInfo({
 
 	return <VerticalBar.ScrollableContent p='x24' {...props}>
 
-		<Avatar margin='auto' size={'x332'} username={username}/>
+		<Avatar size={'x332'} username={username}/>
 
 		{actions}
 
 		<Margins block='x4'>
-			<UserCard.Username name={name || username} status={status} />
+			<UserCard.Username name={(showRealNames && name) || username || name} status={status} />
 			<Info>{customStatus}</Info>
 
 			{!!roles && <>
@@ -63,7 +64,7 @@ export const UserInfo = React.memo(function UserInfo({
 				<Info><UTCClock utcOffset={utcOffset}/></Info>
 			</>}
 
-			{username !== name && <>
+			{username && username !== name && <>
 				<Label>{t('Username')}</Label>
 				<Info>{username}</Info>
 			</>}