Merge pull request #21026 from situchan/fix/20822-avatar-tooltip

fix avatar tooltip issues across the app
Expensify · Jun 19, 2023 · 84a2048 · 84a2048
2 parents 97613a4 + 83396a8
commit 84a2048
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 26 deletions.
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
@@ -20,7 +20,6 @@ import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
-import * as ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -234,10 +233,10 @@ function MoneyRequestConfirmationList(props) {
      * @param {Object} option
      */
     const navigateToUserDetail = (option) => {
-        if (!option.login) {
+        if (!option.accountID) {
             return;
         }
-        Navigation.navigate(ROUTES.getProfileRoute(ReportUtils.getAccountIDForLogin(option.login)));
+        Navigation.navigate(ROUTES.getProfileRoute(option.accountID));
     };
 
     /**

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -78,7 +78,7 @@ function MultipleAvatars(props) {
     if (props.icons.length === 1 && !props.shouldStackHorizontally) {
         return (
             <UserDetailsTooltip
-                accountID={ReportUtils.getAccountIDForLogin(props.icons[0].name)}
+                accountID={props.icons[0].id}
                 fallbackUserDetails={{
                     displayName: ReportUtils.getDisplayNameForParticipant(props.icons[0].name),
                     login: lodashGet(props.icons[0], 'name', tooltipTexts[0]),
@@ -124,7 +124,7 @@ function MultipleAvatars(props) {
                     {_.map([...props.icons].splice(0, 4), (icon, index) => (
                         <UserDetailsTooltip
                             key={`stackedAvatars-${index}`}
-                            accountID={ReportUtils.getAccountIDForLogin(icon.name)}
+                            accountID={icon.id}
                         >
                             <View
                                 style={[
@@ -183,7 +183,7 @@ function MultipleAvatars(props) {
                 </>
             ) : (
                 <View style={singleAvatarStyles}>
-                    <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[0].name)}>
+                    <UserDetailsTooltip accountID={props.icons[0].id}>
                         {/* View is necessary for tooltip to show for multiple avatars in LHN */}
                         <View>
                             <Avatar
@@ -198,7 +198,7 @@ function MultipleAvatars(props) {
                     </UserDetailsTooltip>
                     <View style={secondAvatarStyles}>
                         {props.icons.length === 2 ? (
-                            <UserDetailsTooltip accountID={ReportUtils.getAccountIDForLogin(props.icons[1].name)}>
+                            <UserDetailsTooltip accountID={props.icons[1].id}>
                                 <View>
                                     <Avatar
                                         source={props.icons[1].source || props.fallbackIcon}

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
@@ -159,6 +159,7 @@ function getAvatarsForAccountIDs(accountIDs, personalDetails) {
     return _.map(accountIDs, (accountID) => {
         const userPersonalDetail = lodashGet(personalDetails, accountID, {login: '', accountID, avatar: ''});
         return {
+            id: accountID,
             source: UserUtils.getAvatar(userPersonalDetail.avatar, userPersonalDetail.accountID),
             type: CONST.ICON_TYPE_AVATAR,
             name: userPersonalDetail.login,

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
@@ -684,22 +684,24 @@ function getIconsForParticipants(participants, personalDetails) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
         participantDetails.push([
+            accountID,
             lodashGet(personalDetails, [accountID, 'login'], lodashGet(personalDetails, [accountID, 'displayName'], '')),
             lodashGet(personalDetails, [accountID, 'firstName'], ''),
             avatarSource,
         ]);
     }
 
     // Sort all logins by first name (which is the second element in the array)
-    const sortedParticipantDetails = participantDetails.sort((a, b) => a[1] - b[1]);
+    const sortedParticipantDetails = participantDetails.sort((a, b) => a[2] - b[2]);
 
     // Now that things are sorted, gather only the avatars (third element in the array) and return those
     const avatars = [];
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {
-            source: sortedParticipantDetails[i][2],
+            id: sortedParticipantDetails[i][0],
+            source: sortedParticipantDetails[i][3],
             type: CONST.ICON_TYPE_AVATAR,
-            name: sortedParticipantDetails[i][0],
+            name: sortedParticipantDetails[i][1],
         };
         avatars.push(userIcon);
     }
@@ -728,11 +730,6 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false)
         result.source = defaultIcon || Expensicons.FallbackAvatar;
         return [result];
     }
-    if (isConciergeChatReport(report)) {
-        result.source = CONST.CONCIERGE_ICON_URL;
-        result.name = CONST.EMAIL.CONCIERGE;
-        return [result];
-    }
     if (isArchivedRoom(report)) {
         result.source = Expensicons.DeletedRoomAvatar;
         return [result];
@@ -743,6 +740,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false)
         const actorEmail = lodashGet(parentReportAction, 'actorEmail', '');
         const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', '');
         const actorIcon = {
+            id: actorAccountID,
             source: UserUtils.getAvatar(lodashGet(personalDetails, [actorAccountID, 'avatar']), actorAccountID),
             name: actorEmail,
             type: CONST.ICON_TYPE_AVATAR,
@@ -753,6 +751,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false)
     if (isTaskReport(report)) {
         const ownerEmail = report.ownerEmail || '';
         const ownerIcon = {
+            id: report.ownerAccountID,
             source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
             name: ownerEmail,
             type: CONST.ICON_TYPE_AVATAR,
@@ -790,6 +789,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false)
         }
 
         const adminIcon = {
+            id: report.ownerAccountID,
             source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
             name: report.ownerEmail,
             type: CONST.ICON_TYPE_AVATAR,
@@ -810,6 +810,7 @@ function getIcons(report, personalDetails, defaultIcon = null, isPayer = false)
         const accountID = isPayer ? report.managerID : report.ownerAccountID;
         return [
             {
+                id: accountID,
                 source: UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar']), accountID),
                 name: email,
                 type: CONST.ICON_TYPE_AVATAR,
@@ -845,16 +846,6 @@ function getPersonalDetailsForAccountID(accountID) {
     );
 }
 
-/**
- * Gets the accountID for a login by looking in the ONYXKEYS.PERSONAL_DETAILS Onyx key (stored in the local variable, allPersonalDetails). If it doesn't exist in Onyx,
- * then an empty string is returned.
- * @param {String} login
- * @returns {String}
- */
-function getAccountIDForLogin(login) {
-    return lodashGet(allPersonalDetails, [login, 'accountID'], '');
-}
-
 /**
  * Get the displayName for a single report participant.
  *
@@ -2252,7 +2243,6 @@ function getParentReport(report) {
 }
 
 export {
-    getAccountIDForLogin,
     getReportParticipantsTitle,
     isReportMessageAttachment,
     findLastAccessedReport,

diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
@@ -67,6 +67,7 @@ const getAllParticipants = (report, personalDetails) => {
                 accountID: userPersonalDetail.accountID,
                 icons: [
                     {
+                        id: accountID,
                         source: UserUtils.getAvatar(userPersonalDetail.avatar, accountID),
                         name: userLogin,
                         type: CONST.ICON_TYPE_AVATAR,