From 83396a8a9a8a2d498b38ca8f848d64d5519c79ec Mon Sep 17 00:00:00 2001 From: situchan Date: Mon, 19 Jun 2023 11:45:34 +0100 Subject: [PATCH] fix avatar tooltip issues across the app --- .../MoneyRequestConfirmationList.js | 5 ++-- src/components/MultipleAvatars.js | 8 +++--- src/libs/OptionsListUtils.js | 1 + src/libs/ReportUtils.js | 28 ++++++------------- src/pages/ReportParticipantsPage.js | 1 + 5 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 5365badce969..15239b09dd79 100755 --- 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 index 83211ee1dafc..46535a259210 100644 --- 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 ( ( ) : ( - + {/* View is necessary for tooltip to show for multiple avatars in LHN */} {props.icons.length === 2 ? ( - + { 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 index 6008f5361bad..996c97e18269 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -684,6 +684,7 @@ 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, @@ -691,15 +692,16 @@ function getIconsForParticipants(participants, personalDetails) { } // 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 index da065dadcb77..cdcaabcfe34d 100755 --- 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,