diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 096092187680..4091d88ee0d7 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,5 +1,4 @@ import _ from 'underscore'; -import lodashGet from 'lodash/get'; import React from 'react'; import PropTypes from 'prop-types'; import { @@ -20,7 +19,6 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Text from '../Text'; import SubscriptAvatar from '../SubscriptAvatar'; import CONST from '../../CONST'; -import * as ReportUtils from '../../libs/ReportUtils'; import variables from '../../styles/variables'; import themeColors from '../../styles/themes/default'; import SidebarUtils from '../../libs/SidebarUtils'; @@ -93,11 +91,8 @@ const OptionRowLHN = (props) => { ? props.hoverStyle.backgroundColor : themeColors.sidebar; const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; - const isMultipleParticipant = lodashGet(optionItem, 'participantsList.length', 0) > 1; - // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. - const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((optionItem.participantsList || []).slice(0, 10), isMultipleParticipant); - const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(displayNamesWithTooltips, 'tooltip') : undefined; + const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined; return ( @@ -163,7 +158,7 @@ const OptionRowLHN = (props) => { 1 || result.isChatRoom || result.isPolicyExpenseChat; const subtitle = ReportUtils.getChatRoomSubtitle(report, policies); + // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. + const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((personalDetailList || []).slice(0, 10), hasMultipleParticipants); + let lastMessageTextFromReport = ''; if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml})) { lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`; @@ -259,6 +262,19 @@ function getOptionData(reportID) { if (result.isChatRoom || result.isPolicyExpenseChat) { result.alternateText = lastMessageText || subtitle; } else { + if (hasMultipleParticipants && !lastMessageText) { + // Here we get the beginning of chat history message and append the display name for each user, adding pronouns if there are any. + // We also add a fullstop after the final name, the word "and" before the final name and commas between all previous names. + lastMessageText = Localize.translate(preferredLocale, 'reportActionsView.beginningOfChatHistory') + + _.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => { + const formattedText = _.isEmpty(pronouns) ? displayName : `${displayName} (${pronouns})`; + + if (index === displayNamesWithTooltips.length - 1) { return `${formattedText}.`; } + if (index === displayNamesWithTooltips.length - 2) { return `${formattedText} ${Localize.translate(preferredLocale, 'common.and')}`; } + if (index < displayNamesWithTooltips.length - 2) { return `${formattedText},`; } + }).join(' '); + } + result.alternateText = lastMessageText || Str.removeSMSDomain(personalDetail.login); } @@ -282,6 +298,7 @@ function getOptionData(reportID) { result.participantsList = personalDetailList; result.icons = ReportUtils.getIcons(report, personalDetails, policies, personalDetail.avatar); result.searchText = OptionsListUtils.getSearchText(report, reportName, personalDetailList, result.isChatRoom || result.isPolicyExpenseChat); + result.displayNamesWithTooltips = displayNamesWithTooltips; return result; }