From 6694e6dd213a3aee1e6a1ed4cfa173e972508c33 Mon Sep 17 00:00:00 2001 From: dragnoir Date: Tue, 19 Mar 2024 11:43:47 +0100 Subject: [PATCH 1/3] Fix: group conversation header display 5 participants --- src/pages/home/HeaderView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 8e0aefc39257..24b8c31cb55b 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -78,7 +78,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, const styles = useThemeStyles(); const isSelfDM = ReportUtils.isSelfDM(report); // Currently, currentUser is not included in participantAccountIDs, so for selfDM, we need to add the currentUser as participants. - const participants = isSelfDM ? [session?.accountID ?? -1] : report?.participantAccountIDs ?? []; + const participants = isSelfDM ? [session?.accountID ?? -1] : (report?.participantAccountIDs ?? []).slice(0, 5); const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails); const isMultipleParticipant = participants.length > 1; const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipant, undefined, isSelfDM); From d9836a3455cc1f0e9f392bc788c4019a03f477e9 Mon Sep 17 00:00:00 2001 From: dragnoir Date: Tue, 19 Mar 2024 22:38:05 +0100 Subject: [PATCH 2/3] Fix: limit participants on getGroupChatName --- src/libs/GroupChatUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/GroupChatUtils.ts b/src/libs/GroupChatUtils.ts index 58a82de3df53..cb0e13e11c73 100644 --- a/src/libs/GroupChatUtils.ts +++ b/src/libs/GroupChatUtils.ts @@ -7,7 +7,7 @@ import * as ReportUtils from './ReportUtils'; * Returns the report name if the report is a group chat */ function getGroupChatName(report: OnyxEntry): string | undefined { - const participants = report?.participantAccountIDs ?? []; + const participants = report?.participantAccountIDs?.slice(0, 5) ?? []; const isMultipleParticipantReport = participants.length > 1; return participants From eaf60ad6c94f56553cb9bbe6ec58168444f38cb7 Mon Sep 17 00:00:00 2001 From: dragnoir Date: Thu, 21 Mar 2024 15:06:19 +0100 Subject: [PATCH 3/3] Fix: add shouldApplyLimit --- src/libs/GroupChatUtils.ts | 7 +++++-- src/pages/home/HeaderView.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/libs/GroupChatUtils.ts b/src/libs/GroupChatUtils.ts index cb0e13e11c73..a18de0fdcbbf 100644 --- a/src/libs/GroupChatUtils.ts +++ b/src/libs/GroupChatUtils.ts @@ -6,8 +6,11 @@ import * as ReportUtils from './ReportUtils'; /** * Returns the report name if the report is a group chat */ -function getGroupChatName(report: OnyxEntry): string | undefined { - const participants = report?.participantAccountIDs?.slice(0, 5) ?? []; +function getGroupChatName(report: OnyxEntry, shouldApplyLimit = false): string | undefined { + let participants = report?.participantAccountIDs ?? []; + if (shouldApplyLimit) { + participants = participants.slice(0, 5); + } const isMultipleParticipantReport = participants.length > 1; return participants diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 24b8c31cb55b..784924dfd074 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -89,7 +89,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, const isTaskReport = ReportUtils.isTaskReport(report); const reportHeaderData = !isTaskReport && !isChatThread && report.parentReportID ? parentReport : report; // Use sorted display names for the title for group chats on native small screen widths - const title = ReportUtils.isGroupChat(report) ? getGroupChatName(report) : ReportUtils.getReportName(reportHeaderData); + const title = ReportUtils.isGroupChat(report) ? getGroupChatName(report, true) : ReportUtils.getReportName(reportHeaderData); const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData); const isConcierge = ReportUtils.hasSingleParticipant(report) && participants.includes(CONST.ACCOUNT_ID.CONCIERGE);