Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.51k stars 2.86k forks source link

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

Closed kavimuru closed 1 year ago

kavimuru commented 1 year ago

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:

Screenshot 2023-03-13 at 4 50 40 PM

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 commented 1 year ago

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):

image

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

image

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

shawnborton commented 1 year ago

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?

image
puneetlath commented 1 year ago

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

roryabraham commented 1 year ago

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

puneetlath commented 1 year ago

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

shawnborton commented 1 year ago

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 commented 1 year ago

Of course πŸ˜„

shawnborton commented 1 year ago

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

image
puneetlath commented 1 year ago

Oh nice, I'm a fan!

mananjadhav commented 1 year ago

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 commented 1 year ago

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:

image

Let me know if that makes sense.

mananjadhav commented 1 year ago

Now I see. Thanks for clarifying.

mananjadhav commented 1 year ago

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

shawnborton commented 1 year ago

That makes sense to me

puneetlath commented 1 year ago

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

abdulrahuman5196 commented 1 year ago

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] commented 1 year ago

πŸ“£ 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] commented 1 year ago

πŸ“£ It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? πŸ’Έ

roryabraham commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Upwork job price has been updated to $2000

WikusKriek commented 1 year ago

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 also dynamically scale the number of avatars in a row according to screen size.

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 commented 1 year ago

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 commented 1 year ago

What kind of logic does the function include?

What kind of logic does the function include:

What do we mean by apply the same logic:

grgia commented 1 year ago

@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 commented 1 year ago

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

mananjadhav commented 1 year ago

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

πŸŽ€ πŸ‘€ πŸŽ€ C+ Reviewed.

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

πŸ“£ @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 commented 1 year ago

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

WikusKriek commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Thanks @puneetlath!

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

On to the next one πŸš€

melvin-bot[bot] commented 1 year ago

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

roryabraham commented 1 year ago

@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] commented 1 year ago

⚠️ 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] commented 1 year ago

⚠️ 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] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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:

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.

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

puneetlath commented 1 year ago

Sent @WikusKriek a hiring offer.

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

WikusKriek commented 1 year ago

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 commented 1 year ago

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

mananjadhav commented 1 year ago

@puneetlath I've requested the payment via NewDot.

mananjadhav commented 1 year ago

@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 commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

puneetlath commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Approved to Manan for $4k