Fix - Feature Request: Add '...' to the end of names at the top of group chats if there are more members in the room

src/CONST.ts

@@ -1648,6 +1648,7 @@ const CONST = {
     EMOJI_NUM_PER_ROW: 8,
 
     EMOJI_DEFAULT_SKIN_TONE: -1,
+    PARTICIPANTS_LIMIT: 5,
 
     // Amount of emojis to render ahead at the end of the update cycle
     EMOJI_DRAW_AMOUNT: 250,

src/components/DisplayNames/DisplayNamesWithTooltip.tsx

@@ -5,13 +5,21 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportUtils from '@libs/ReportUtils';
+import {formatReportLastMessageText} from '@libs/ReportUtils';
 import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
 import type DisplayNamesProps from './types';
 
 type HTMLElementWithText = HTMLElement & RNText;
 
-function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWithTooltips, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
+function DisplayNamesWithToolTip({
+    shouldUseFullTitle,
+    fullTitle,
+    displayNamesWithTooltips,
+    shouldAddEllipsis = false,
+    textStyles = [],
+    numberOfLines = 1,
+    renderAdditionalText,
+}: DisplayNamesProps) {
     const styles = useThemeStyles();
     const containerRef = useRef<HTMLElementWithText>(null);
     const childRefs = useRef<HTMLElementWithText[]>([]);
@@ -57,7 +65,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
             testID={DisplayNamesWithToolTip.displayName}
         >
             {shouldUseFullTitle
-                ? ReportUtils.formatReportLastMessageText(fullTitle)
+                ? formatReportLastMessageText(fullTitle)
                 : displayNamesWithTooltips?.map(({displayName, accountID, avatar, login}, index) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <Fragment key={index}>
@@ -72,6 +80,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
                               childRefs={childRefs}
                           />
                           {index < displayNamesWithTooltips.length - 1 && <Text style={textStyles}>,&nbsp;</Text>}
+                          {shouldAddEllipsis && index === displayNamesWithTooltips.length - 1 && <Text style={textStyles}>...</Text>}
                       </Fragment>
                   ))}
             {renderAdditionalText?.()}

src/components/DisplayNames/index.tsx

@@ -4,7 +4,7 @@ import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
 import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
 import type DisplayNamesProps from './types';
 
-function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips, renderAdditionalText}: DisplayNamesProps) {
+function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldAddEllipsis, shouldUseFullTitle, displayNamesWithTooltips, renderAdditionalText}: DisplayNamesProps) {
     const {translate} = useLocalize();
     const title = fullTitle || translate('common.hidden');
 
@@ -36,6 +36,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
             fullTitle={title}
             displayNamesWithTooltips={displayNamesWithTooltips}
             textStyles={textStyles}
+            shouldAddEllipsis={shouldAddEllipsis}
             numberOfLines={numberOfLines}
             renderAdditionalText={renderAdditionalText}
         />

src/components/DisplayNames/types.ts

@@ -40,6 +40,9 @@ type DisplayNamesProps = {
     /** If the full title needs to be displayed */
     shouldUseFullTitle?: boolean;
 
+    /** If we should add an ellipsis after the participants list */
+    shouldAddEllipsis?: boolean;
+
     /** Additional Text component to render after the displayNames */
     renderAdditionalText?: () => React.ReactNode;
 };

src/libs/ReportUtils.ts

@@ -2598,8 +2598,9 @@ function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit
         Object.keys(report?.participants ?? {})
             .map(Number)
             .filter((accountID) => !pendingMemberAccountIDs.has(accountID.toString()));
+    const shouldAddEllipsis = participantAccountIDs.length > CONST.PARTICIPANTS_LIMIT;
     if (shouldApplyLimit) {
-        participantAccountIDs = participantAccountIDs.slice(0, 5);
+        participantAccountIDs = participantAccountIDs.slice(0, CONST.PARTICIPANTS_LIMIT);
     }
     const isMultipleParticipantReport = participantAccountIDs.length > 1;
 
@@ -2612,7 +2613,8 @@ function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit
             .sort((first, second) => localeCompare(first ?? '', second ?? ''))
             .filter(Boolean)
             .join(', ')
-            .slice(0, CONST.REPORT_NAME_LIMIT);
+            .slice(0, CONST.REPORT_NAME_LIMIT)
+            .concat(shouldAddEllipsis && shouldApplyLimit ? '...' : '');
     }
 
     return translateLocal('groupChat.defaultReportName', {displayName: getDisplayNameForParticipant({accountID: participantAccountIDs.at(0)})});

src/pages/home/HeaderView.tsx

@@ -119,7 +119,9 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const isSelfDM = isSelfDMReportUtils(report);
     const isGroupChat = isGroupChatReportUtils(report) || isDeprecatedGroupDM(report);
 
-    const participants = getParticipantsAccountIDsForDisplay(report, false, true).slice(0, 5);
+    const fullParticipants = getParticipantsAccountIDsForDisplay(report, false, true);
+    const shouldAddEllipsis = fullParticipants?.length > CONST.PARTICIPANTS_LIMIT;
+    const participants = fullParticipants.slice(0, CONST.PARTICIPANTS_LIMIT);
     const isMultipleParticipant = participants.length > 1;
 
     const participantPersonalDetails = getPersonalDetailsForAccountIDs(participants, personalDetails);
@@ -290,6 +292,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                                                 textStyles={[styles.headerText, styles.pre]}
                                                 shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport || shouldUseGroupTitle}
                                                 renderAdditionalText={renderAdditionalText}
+                                                shouldAddEllipsis={shouldAddEllipsis}
                                             />
                                         </CaretWrapper>
                                         {!isEmptyObject(parentNavigationSubtitleData) && (