Show correct username and email for remote users (#31205)

Co-authored-by: Miguel de la Cruz <miguel@ctrlz.es>

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -181,7 +181,7 @@ const ProfilePopover = ({
                 />
                 <hr/>
                 <ProfilePopoverEmail
-                    email={user.email}
+                    email={Utils.getEmail(user)}
                     haveOverrideProp={haveOverrideProp}
                     isBot={user.is_bot}
                 />

webapp/channels/src/components/profile_popover/profile_popover_name.tsx

@@ -10,6 +10,8 @@ import FullName from 'components/profile_popover/profile_popover_full_name';
 import Position from 'components/profile_popover/profile_popover_position';
 import UserName from 'components/profile_popover/profile_popover_user_name';
 
+import {getUsername} from 'utils/utils';
+
 type Props = {
     haveOverrideProp: boolean;
     user: UserProfile;
@@ -34,7 +36,7 @@ const ProfilePopoverName = ({
             )}
             <UserName
                 hasFullName={Boolean(fullname)}
-                username={user.username}
+                username={getUsername(user)}
             />
             {(user.position && !haveOverrideProp) && (
                 <Position

webapp/channels/src/components/user_profile/user_profile.tsx

@@ -11,7 +11,7 @@ import SharedUserIndicator from 'components/shared_user_indicator';
 import BotTag from 'components/widgets/tag/bot_tag';
 import GuestTag from 'components/widgets/tag/guest_tag';
 
-import {imageURLForUser} from 'utils/utils';
+import {imageURLForUser, getUsername} from 'utils/utils';
 
 import {generateColor} from './utils';
 
@@ -42,7 +42,7 @@ export default function UserProfile({
     }, [user?.remote_id, remoteNames, actions]);
     let name: ReactNode;
     if (user && displayUsername) {
-        name = `@${(user.username)}`;
+        name = `@${(getUsername(user))}`;
     } else {
         name = overwriteName || displayName || '...';
     }

webapp/channels/src/packages/mattermost-redux/src/utils/user_utils.test.ts

@@ -23,6 +23,7 @@ describe('user utils', () => {
             nickname: 'nick',
             first_name: 'test',
             last_name: 'user',
+            props: {RemoteUsername: 'remoteTestUser'},
         });
 
         it('should return username', () => {
@@ -54,6 +55,10 @@ describe('user utils', () => {
             expect(displayUsername(noUserObj, 'UNKNOWN_PREFERENCE')).toBe('Someone');
         });
 
+        it('should return remote username string if the user is remote', () => {
+            expect(displayUsername({...userObj, remote_id: 'remoteid'}, Preferences.DISPLAY_PREFER_USERNAME)).toBe('remoteTestUser');
+        });
+
         it('should return empty string when user does not exist and useDefaultUserName param is false', () => {
             let noUserObj;
             expect(displayUsername(noUserObj, 'UNKNOWN_PREFERENCE', false)).toBe('');

webapp/channels/src/packages/mattermost-redux/src/utils/user_utils.ts

@@ -34,7 +34,7 @@ export function displayUsername(
         } else if (teammateNameDisplay === Preferences.DISPLAY_PREFER_FULL_NAME) {
             name = getFullName(user);
         } else {
-            name = user.username;
+            name = (user.remote_id && user.props?.RemoteUsername) ? user.props.RemoteUsername : user.username;
         }
 
         if (!name || name.trim().length === 0) {

webapp/channels/src/utils/utils.tsx

@@ -949,6 +949,20 @@ function changeColor(colourIn: string, amt: number): string {
     return rgb;
 }
 
+export function getUsername(user: UserProfile) {
+    if (user.remote_id && user.props?.RemoteUsername) {
+        return user.props.RemoteUsername;
+    }
+    return user.username;
+}
+
+export function getEmail(user: UserProfile) {
+    if (user.remote_id && user.props?.RemoteEmail) {
+        return user.props?.RemoteEmail;
+    }
+    return user.email;
+}
+
 export function getFullName(user: UserProfile) {
     if (user.first_name && user.last_name) {
         return user.first_name + ' ' + user.last_name;