[$250] Group chat title is different in header than in details.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.23-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724245884496689

Action Performed:

1. Go to staging.new.expensify.com
2. Create a group chat with a handful of people.

Expected Result:

The header and details page should include all the members of group

Actual Result:

The header and details page differ and do not include all members of the group.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Onyx Data:

    "reportID": "1104448895618589",
    "reportName": "",
    "type": "chat",
    "chatType": "group",
    "ownerAccountID": 0,
    "policyID": "_FAKE_",
    "participants": {
        "778531": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        },
        "3107470": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "admin"
        },
        "3149650": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        },
        "3772464": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        },
        "3806748": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        },
        "4121216": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        },
        "7906268": {
            "hidden": false,
            "notificationPreference": "always",
            "role": "member"
        }
    },
    "participantAccountIDs": [],
    "visibleChatMemberAccountIDs": [],
    "isPinned": false,
    "lastReadTime": "2024-08-21 13:13:34.449",
    "lastReadSequenceNumber": 0,
    "lastVisibleActionCreated": "2024-08-21 13:13:28.230",
    "lastVisibleActionLastModified": "2024-08-21 13:13:28.230",
    "lastMessageText": "Welcome back neighbor!!",
    "lastActionType": "ADDCOMMENT",
    "lastActorAccountID": "3806748",
    "notificationPreference": "always",
    "stateNum": 0,
    "statusNum": 0,
    "oldPolicyName": "",
    "private_isArchived": "",
    "isOwnPolicyExpenseChat": false,
    "lastMessageHtml": "Welcome back neighbor!!",
    "hasOutstandingChildRequest": false,
    "hasOutstandingChildTask": false,
    "writeCapability": "all",
    "description": "",
    "total": 0,
    "unheldTotal": 0,
    "currency": "USD",
    "isWaitingOnBankAccount": false,
    "nonReimbursableTotal": 0,
    "isCancelledIOU": false,
    "errorFields": {},
    "permissions": [
        "read",
        "write",
        "share"
    ],
    "welcomeMessage": "",
    "isLoadingPrivateNotes": false,
    "privateNotes": {
        "778531": {
            "note": ""
        }
    },
    "lastMessageTranslationKey": "",
    "managerID": 0
} 

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0185f6c487fb4d1046
• Upwork Job ID: 1826298251163774653
• Last Price Increase: 2024-09-25

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-08-21 16:04:15 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Group chat title is different in header than in details.

What is the root cause of that problem?

We display header title via DisplayNames by passing up to 5 participants

App/src/pages/home/HeaderView.tsx

Lines 69 to 74 in a32da40

	const participants = ReportUtils.getParticipantsAccountIDsForDisplay(report).slice(0, 5);
	const isMultipleParticipant = participants.length > 1;
	const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
	const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipant, undefined, isSelfDM);

but in the details page we get the group chat name via getGroupChatName with shouldApplyLimit false

App/src/pages/ReportDetailsPage.tsx

Lines 248 to 249 in a32da40

	const reportName = ReportUtils.isDeprecatedGroupDM(report) || isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getReportName(report);

What changes do you think we should make in order to solve the problem?

We need to be consistent in the way we get group chat name
If we want to get with limit applied we can use getReportName here

App/src/pages/ReportDetailsPage.tsx

Lines 248 to 249 in a32da40

	const reportName = ReportUtils.isDeprecatedGroupDM(report) || isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getReportName(report);

    const reportName = ReportUtils.isDeprecatedGroupDM(report) ? ReportUtils.getGroupChatName(undefined, true, report) : ReportUtils.getReportName(report);

or if we want without limit applied we can stop slicing the participants here in header view

App/src/pages/home/HeaderView.tsx

Lines 69 to 74 in a32da40

	const participants = ReportUtils.getParticipantsAccountIDsForDisplay(report).slice(0, 5);
	const isMultipleParticipant = participants.length > 1;
	const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
	const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipant, undefined, isSelfDM);

We can also update getReportName to include the case for isDeprecatedGroupDM case handle it there and avoid the condition in details page other wise we might also need to consider isDeprecatedGroupDM case in header view as we did in report details page.

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The header and details page differ and do not include all members of the group.

What is the root cause of that problem?

In the header, we get the group chat report name with shouldApplyLimit as true

App/src/pages/home/HeaderView.tsx

Line 81 in 9757ae2

const title = ReportUtils.getReportName(reportHeaderData, undefined, parentReportAction, personalDetails, invoiceReceiverPolicy);

App/src/libs/ReportUtils.ts

Line 3739 in 9757ae2

return getGroupChatName(undefined, true, report) ?? '';

In the report detail page we get the group chat report name with shouldApplyLimit as false

App/src/pages/ReportDetailsPage.tsx

Line 250 in 9757ae2

const reportName = ReportUtils.isDeprecatedGroupDM(report) || isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getReportName(report);

The problem here is we sort the list of participant names after we slice participantAccountIDs then if the prioritized alphabet participant is in the last of the participant list, the name will be displayed differently.

App/src/libs/ReportUtils.ts

Line 2145 in 9757ae2

return participantAccountIDs

What changes do you think we should make in order to solve the problem?

I think in the header we slice the group chat report name because it maybe too long and the width of report detail page is small. So in this case we should sort the participant name list before we slice the list

if (isMultipleParticipantReport) {
    let participantDisplayNames = participantAccountIDs
        .map(
            (participantAccountID, index) =>
                getDisplayNameForParticipant(participantAccountID, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? ''),
        )
        .sort((first, second) => localeCompare(first ?? '', second ?? ''))
        .filter(Boolean);
    if (shouldApplyLimit) {
        participantDisplayNames = participantDisplayNames.slice(0, 5);
    }
    return participantDisplayNames.join(', ');
}

App/src/libs/ReportUtils.ts

Lines 2139 to 2145 in 9757ae2

	if (shouldApplyLimit) {
	participantAccountIDs = participantAccountIDs.slice(0, 5);
	}
	const isMultipleParticipantReport = participantAccountIDs.length > 1;
	if (isMultipleParticipantReport) {
	return participantAccountIDs

What alternative solutions did you explore? (Optional)

If we want to display the same, we can remove the check ReportUtils.isDeprecatedGroupDM(report) || isGroupChat here since getReportName already covers the group chat case

App/src/pages/ReportDetailsPage.tsx

Line 250 in 9757ae2

const reportName = ReportUtils.isDeprecatedGroupDM(report) || isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getReportName(report);

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0185f6c487fb4d1046

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[bernhardoj]

We already have an issue here to make the group name consistent.

[ChavdaSachin]

We already have an issue here to make the group name consistent.

That issue looks different since it's for a thread

[melvin-bot]

@eVoloshchak, @stephanieelliott Eep! 4 days overdue now. Issues have feelings too...

[nkdengineer]

@puneetlath Can you confirm the expected about the group chat title

If the group has a list of participant names like [E, F, G, H, J, A, B, C, D]. When we display the group chat name with only 5 member what is the group chat name should be displayed

1. E, F, G, H, J
2. A, B, C, D ,E

[puneetlath]

I'm not sure honestly and I don't really have a preference as long as we're consistent. What does getGroupChatName currently do?

[nkdengineer]

@puneetlath getGroupChatName has a param shouldApplyLimit. If it's true, we will get 5 first participants from participantAccountIDs then get display name and re-order the list.

[nkdengineer]

If the group has a list of participant names like [E, F, G, H, J, A, B, C, D]. When we display the group chat name with only 5 member what is the group chat name should be displayed

With this example, it's returning option 1 now.

[puneetlath]

Ok I say we just do that in all the scenarios then.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak, @stephanieelliott Still overdue 6 days?! Let's take care of this!

[stephanieelliott]

Hey @eVoloshchak there are a few proposals here, can you review please?

[melvin-bot]

@eVoloshchak, @stephanieelliott Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

@eVoloshchak, @stephanieelliott 12 days overdue. Walking. Toward. The. Light...

[stephanieelliott]

Bump on this @eVoloshchak

Hey @eVoloshchak there are a few proposals here, can you review please?

[ahmedGaber93]

I think we need to put this on hold #48046

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@eVoloshchak @stephanieelliott this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

This issue has not been updated in over 14 days. @eVoloshchak, @stephanieelliott eroding to Weekly issue.

[stephanieelliott]

Thanks @ahmedGaber93, let's hold for #48046

[stephanieelliott]

PR #48046 was merged to main, should be on staging soon

[stephanieelliott]

I think this is fixed with #48046 🎉 I can't repro this -- anyone able to reproduce?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[stephanieelliott]

I am going to close since I am still unable to repro, if you are able to repro this feel free to reopen it!