[HOLD for payment 2024-04-22] [$500] Group - All 8 participants are shown in header on creating group

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #37907

Version Number: 1.4.50-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap fab ---- start chat
3. Add to group 8 participants with small user name
4. Tap create group

Expected Result:

When creating group with 8 participants, the group conversation header must display only 5 participants

Actual Result:

When creating group with 8 participants, the group conversation header displays all 8 participants

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

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019807d7b57314faa7
• Upwork Job ID: 1768350318226415616
• Last Price Increase: 2024-03-14
• Automatic offers:
• Pujan92 | Reviewer | 0

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[lanitochka17]

@anmurali FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[mountiny]

cc @jbroma @deetergp as this was found during QAing of PR you have been involved at, thanks!

[dragnoir]

Proposal

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

All selected participants are displayed on the header (names)

What is the root cause of that problem?

The headerView component display all the available 8 participants.

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

We can limit the number of participants to 5 here

App/src/pages/home/HeaderView.tsx

Line 78 in 2979c4f

const participants = isSelfDM ? [session?.accountID ?? -1] : report?.participantAccountIDs ?? [];

[ghost]

Proposal

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

Group - All 8 participants are shown in header on creating group

What is the root cause of that problem?

The root cause of the problem is here we are displaying all the participants personal details

App/src/pages/home/HeaderView.tsx

Line 79 in 5469198

const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);

and then in here :

App/src/pages/home/HeaderView.tsx

Line 81 in 5469198

const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipant, undefined, isSelfDM);

we are displaying it

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

We can limit it to just display 5 participants by doing this :

const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants.slice(0, 6), personalDetails);

What alternative solutions did you explore? (Optional)

N/A

Result :

Screen.Recording.2024-03-11.at.10.59.49.PM.mp4

[ghost]

@deetergp Before you mentioned the issue, I already had that solution.

[deetergp]

Still sorting this one out on the original GH.

[dragnoir]

@deetergp I posted a comment here #37907 (comment) to explain how I think that the original GH is not solving the real issue

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019807d7b57314faa7

[melvin-bot]

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

[DinCorp777]

Proposal

Issue: This issue is being caused due to text overflowing in a given area.

Proposed Solution: We can extract the first five Usernames within the chat participants and only display their names. We may want to add a way to trunc the concatenated names if the text overflows.

[melvin-bot]

📣 @DinCorp777! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Pujan92]

@mountiny I am not sure whether we need to restrict to 5 here or not, Reason - Currently users can see all group users in the ellipsis tooltip if it overflows. Raised same point here

[mountiny]

I think we want to keep only 5 members in the report name

[DinCorp777]

Contributor details
Your Expensify account email: info@excel-pros.com
Upwork Profile Link: https://www.upwork.com/freelancers/~018a4006af512d5d51

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Pujan92]

@dragnoir's proposal is straightforward and looks good to me for limiting participants for the report header.

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @deetergp is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[ghost]

@dragnoir's proposal is straightforward and looks good to me for limiting participants for the report header.

🎀👀🎀 C+ reviewed

Hey @Pujan92 ! I want to know why not my proposal ? did you review my proposal?

[Pujan92]

Hey @Pujan92 ! I want to know why not my proposal ?

@dragnoir is the first to propose and applying a limit to participantAccountIDs is enough, kind of similar to what we did here.

[melvin-bot]

📣 @Pujan92 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[dragnoir]

PR ready #38568

[deetergp]

PR has been merged and is currently being tested on staging.

[dragnoir]

@Pujan92 what's the next step here? I don't see the checklist bot!

[Pujan92]

@dragnoir I see it went to production on 27th March, so maybe by tomorrow it can be due for payment. Automation issue seems to be here but I think we don't need the checklist as it is kind of a new feat. cc: @anmurali

[dragnoir]

@anmurali can you pls proceed the payment? Thank you

[dragnoir]

@anmurali Friendly bump

[anmurali]

@dragnoir - offer is here

[dragnoir]

@anmurali accepted. Thank you

[anmurali]

Paid