Merge pull request Expensify#11765 from Ollyws/fix-11300

Fix for: After Creating group, email address of only one user is used in alternate Text
JediWattson · Oct 18, 2022 · 555a679 · 555a679
2 parents a93858c + d9af57f
commit 555a679
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git 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 (
         <Hoverable>
@@ -163,7 +158,7 @@ const OptionRowLHN = (props) => {
                                 <DisplayNames
                                     accessibilityLabel="Chat user display names"
                                     fullTitle={optionItem.text}
-                                    displayNamesWithTooltips={displayNamesWithTooltips}
+                                    displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
                                     tooltipEnabled
                                     numberOfLines={1}
                                     textStyles={displayNameStyle}

diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
@@ -234,6 +234,9 @@ function getOptionData(reportID) {
     const hasMultipleParticipants = personalDetailList.length > 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;
 }