[HOLD for payment 2023-07-17] [$2000] Feature Request: Update header for 6 person DMs to show all avatars

[kavimuru]

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

---

Problem:

DM members in group chats are capped at a maximum of 4 avatars

Solution:

DMs are capped at 6 members and then add +1 to show more members, Once we get to 5, we use a smaller avatar size

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL: Issue reported by:@puneetlath Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1678715475290659

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c018b3452ff97bbe
• Upwork Job ID: 1635771179154558976
• Last Price Increase: 2023-06-16

[puneetlath]

My thought was that given that we know the max number is 8, there's no reason why we can't always just show all 8.

I personally think this (8 small ones):

Looks much better than this (4 big ones with +4):

But I also don't feel super strongly about it if you don't agree @shawnborton.

[shawnborton]

It looks like your mockup still doesn't quite fit in this phone width though, so we'd need to make them even smaller... which I think ends up looking worse.

We could potentially do some kind of stacked layout?

[puneetlath]

I like that left, overlapping stacked one. That looks good to me.

[roryabraham]

It seems like we're still waiting on a finalized design here, but @shawnborton is OOO this week.

[puneetlath]

@shawnborton are you cool with going forward with the stacked approach on the left?

[shawnborton]

Sorry for the delay! Before we commit to that, mind if I explore this some more? I just want to make sure this works well for all of the cases, not just for 8 people.

[puneetlath]

Of course 😄

[shawnborton]

Okay so I think I am not a fan of the diagonal stack. How about something like this?

[puneetlath]

Oh nice, I'm a fan!

[mananjadhav]

Liked the design, just one quick question/opinion, when we have odd number of Avatars, any specific reason we have +1 avatar in the second row instead of the first one?

[shawnborton]

I thought it felt more visually balanced and matches how the heading isn't quite as wide as the content below. So we basically create that same shape:

Let me know if that makes sense.

[mananjadhav]

Now I see. Thanks for clarifying.

[mananjadhav]

@puneetlath @shawnborton What are the next steps? Opening up for proposals?

[shawnborton]

That makes sense to me

[puneetlath]

We had previously assigned @abdulrahuman5196. Do you still want to do it @abdulrahuman5196? If not, I agree that we should open it up.

[abdulrahuman5196]

Hi @puneetlath, I am fine to open it up for proposals. I am full at the moment.

Note: Anyone going to work with MultipleAvatars to solve this issue, kindly note there is some refractor expected on that via https://github.com/Expensify/App/issues/19526

[melvin-bot[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[bot]]

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

[roryabraham]

Going to double the price here to see if we get some fresh proposals.

[melvin-bot[bot]]

Upwork job price has been updated to $2000

[WikusKriek]

Proposal

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

Feature request to show up to 8 person Avatars in chat.

What is the root cause of that problem?

Currently we are using the RoomHeaderAvatars component which is capped to 4 avatars being shown.

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

• We should use MultipleAvatars Component instead. This is a more generic component to display multiple avatars.
• In order to display the avatars in stacked rows like the designs, we need to add another property to this component called shouldStackVertically(or similar). This prop will then control if the avatars are displayed in rows vertically stacked.
• To display the avatars in rows we need to split the avatars into rows according to the logic displayed in the designs. A small function can handle the cutting of the icons into the appropriate length rows to match the design.
• We can then map through each row and apply the same logic as horizontal stacking for each row.
• We need to controll MultipleAvatars dynamic sizing: isSmallScreenWidth and below 3 avatars = AVATAR_SIZE.LARGE isSmallScreenWidth and above 4 avatars = AVATAR_SIZE.MEDIUM not isSmallScreenWidth = AVATAR_SIZE.LARGE

We should also dynamically scale the number of avatars in a row according to screen size.

• not isSmallScreenWidth row size max 7
• isSmallScreenWidth row size max 4

It might be necessary to write a function to encapsulate the code for rendering an individual icon or horizontal stacking to prevent duplicate code.

What alternative solutions did you explore? (Optional)

1. A similar change can be made to RoomHeaderAvatars to create the row vertical stacking.
2. I also considered calling RoomHeaderAvatars twice with the Icons already split into two rows here.

https://github.com/Expensify/App/blob/bee8fd3e1634fa11761435ef405a3d3efd654b07/src/pages/home/report/ReportActionItemCreated.js#L69

[mananjadhav]

Thanks for the proposal @WikusKriek. I agree with most of the aspect of your proposal. Would you please elaborate on the following?

A small function can handle the cutting of the icons into the appropriate length rows to match the design.

What kind of logic does the function include?

We can then map through each row and apply the same logic as horizontal stacking for each row.

What do we mean by apply the same logic?

---

@puneetlath @grgia do we have any ETA on Refactor MultipleAvatars. Do you folks think we can continue with this issue, while the refactor is planned?

[WikusKriek]

What kind of logic does the function include?

What kind of logic does the function include:

• We have a prop with x avatars, then they need to be split into two rows if needed. 4 avatars means one row of 4 horizontal, but 5 will have two rows of 3 horizontal and 2 horizontal. We need to just write something to determine the row sizes according to that input prop and the design. It does not just overflow after 4 into the next row.

What do we mean by apply the same logic:

• I meant the code is already there, we can reuse it again. We just need to slice the avatars to size and pass it to the code that generates horizontal avatars.

[grgia]

@mananjadhav I don't think that this refactor blocks this issue, you should be good to proceed. I can also prioritize that refactor if you'd prefer.

[mananjadhav]

I agree it won't block, was just concerned about splitting MultipleAvatars into two components could affect this one?

[mananjadhav]

I agree with @WikusKriek proposal here. We can work out some of the implementation details in the PR.

🎀 👀 🎀 C+ Reviewed.

[melvin-bot[bot]]

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

📣 @WikusKriek You have been assigned to this job by @roryabraham! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[WikusKriek]

I will start working on the changes and open the PR shortly.

[WikusKriek]

The Upwork job is closed or no longer open for proposals. I am not able to submit my accepted proposal there.

If we expand the scope to include the changes for "invite to workspace", can we also consider uping the price?

[puneetlath]

I'll create a new job to invite you to. And yes, if we increase the scope, we'll definitely increase the price accordingly.

[WikusKriek]

Thanks @puneetlath!

[melvin-bot[bot]]

@shawnborton, @mananjadhav, @slafortune, @WikusKriek, @roryabraham Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

• when @WikusKriek got assigned: 2023-06-23 06:54:48 Z
• when the PR got merged: 2023-07-05 19:13:10 UTC
• days elapsed: 8

On to the next one 🚀

[melvin-bot[bot]]

@shawnborton, @mananjadhav, @slafortune, @WikusKriek, @roryabraham Still overdue 6 days?! Let's take care of this!

[roryabraham]

@puneetlath was more involved in the proposals and reviewed the PR while I was OOO, so I'm going to reassign this to him. Credit where credit's due.

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.3.38-7 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/21402

If no regressions arise, payment will be issued on 2023-07-17. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• [x] External issue reporter
• [x] Contributor that fixed the issue
• [x] Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[puneetlath]

Sent @WikusKriek a hiring offer.

@mananjadhav I'm assuming you'll request payment on NewDot when the time comes.

[WikusKriek]

Thanks @puneetlath, just one question regarding the bounty. I see the offer is still 2k but it should it not have been doubled as stated here?

[puneetlath]

Thanks for reminding me @WikusKriek. I added a second milestone to the contract to account for that.

[mananjadhav]

@puneetlath I've requested the payment via NewDot.

[mananjadhav]

@puneetlath Just checking here, with the updated scope we didn't explicitly discuss/decide on the timeline bonus. Overall with both the changes the PR took ~7 days (excluding weekends).

and also that we double the payment, instead of increasing by $1K, so might consider that as the bonus?

[anmurali]

@puneetlath can you confirm ^^ makes sense. I need to approve and pay this on New Dot

[melvin-bot[bot]]

@puneetlath, @shawnborton, @mananjadhav, @WikusKriek Whoops! This issue is 2 days overdue. Let's get this updated quick!

[puneetlath]

It should be $4k in total @anmurali. It was a $2k job and we doubled the scope, so it became $4k. No timeline bonus.

I just paid out @WikusKriek that amount in Upwork so @mananjadhav just needs to be paid that as well.

[puneetlath]

It should be $4k in total @anmurali. It was a $2k job and we doubled the scope, so it became $4k. No timeline bonus.

I just paid out @WikusKriek that amount in Upwork so @mananjadhav just needs to be paid that as well.

[anmurali]

Approved to Manan for $4k