[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$500] Web - Room - Stacked avatars on sign-in banner do not match and are misaligned in public room thread

[izarutskaya]

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

---

Action Performed:

1. Go to staging.new.expensify.com
2. As a user with custom photo, create a public room.
3. Send a message and send a reply in thread.
4. Copy the share code to the public room.
5. Paste the URL in incognito mode.
6. Click on the '1 Reply'.

Expected Result:

On the sign-in banner, user avatar shows the custom avatar, and is aligned in place with the workspace avatar, which is the same way the stacked avatars in the header are aligned.

Actual Result:

On the sign-in banner, user avatar is the default avatar instead of the custom avatar, and the avatar is not aligned in place with the workspace avatar.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.70-3

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

Notes/Photos/Videos: Any additional supporting documentation

Bug6201367_20230915_174435.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause-Internal Team

Slack conversation: @

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e3957b30c63d0184
• Upwork Job ID: 1702742410241048576
• Last Price Increase: 2023-09-22
• Automatic offers:
• jjcoffee | Reviewer | 26877063
• Pujan92 | Contributor | 26877065

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Pujan92]

Proposal

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

In anonymous footer banner subscript avatars aren't showing correctly

What is the root cause of that problem?

1. User custom icon isn't shown in the AnonymousFooter bcoz we are not passing prop personalDetails for ReportFooter in ReportScreen which won't fetch icon from personalDetails.

2. For SubscriptAvatar we only apply either Small or Default size to the containerStyle but not consider the medium. Due to that, it has less containerStyle(40px) and the avatar inside it uses the passed size which is medium(52px) which leads to the issue of placing the wrong subscript avatar.

App/src/components/SubscriptAvatar.js

Lines 42 to 45 in 2427a06

	const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar;
	// Default the margin style to what is normal for small or normal sized avatars
	let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;

App/src/components/SubscriptAvatar.js

Line 51 in 2427a06

<View style={[containerStyle, marginStyle]}>

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

1. We need to pass prop personalDetails in ReportScreen -> ReportFooter -> AnonymousReportFooter -> AvatarWithDisplayName which will fetch icons from the personalDetails.

2. We can use the same function to get containerStyles which we used for MultipleAvatars by placing it in some util file. It gives/sets the correct containerStyles for passing the medium size.

App/src/components/MultipleAvatars.js

Lines 74 to 92 in 2427a06

	function getContainerStyles(size, isInReportAction) {
	let containerStyles;
	switch (size) {
	case CONST.AVATAR_SIZE.SMALL:
	containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];
	break;
	case CONST.AVATAR_SIZE.SMALLER:
	containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
	break;
	case CONST.AVATAR_SIZE.MEDIUM:
	containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
	break;
	default:
	containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
	}
	return containerStyles;
	}

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e3957b30c63d0184

[melvin-bot]

Current assignee @CortneyOfstad is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[CortneyOfstad]

@jjcoffee Thoughts on the proposal above? TIA!

[jjcoffee]

Reviewing tomorrow!

[jjcoffee]

@Pujan92 Thanks for the proposal! Maybe you missed this but there's a second issue here that if there's a custom avatar set we're displaying the default one instead. Could you address that in your proposal too?

[melvin-bot]

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

[jjcoffee]

Waiting on proposals that address both issues.

[Pujan92]

@Pujan92 Thanks for the proposal! Maybe you missed this but there's a second issue here that if there's a custom avatar set we're displaying the default one instead. Could you address that in your proposal too?

Thanks @jjcoffee . Yes, somehow I missed the other issue of custom avatar and updated the proposal. Plz consider reviewing it.

[jjcoffee]

Thanks @Pujan92! Your updated proposal addresses both issues, so happy to go with it!

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[srikarparsi]

Cool, looks good to me as well, assigning you to the issue @Pujan92

[melvin-bot]

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

[melvin-bot]

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

• Fix: Web - Room - Stacked avatars on sign-in banner do not match and are misaligned in public room thread #28323

If no regressions arise, payment will be issued on 2023-10-20. 🎊

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.

• External issue reporter — No payment needed (QA)
• Contributor that fixed the issue — @Pujan92 was paid $500 in Upwork
• Contributor+ that helped on the issue and/or PR — @jjcoffee was paid $500 in Upwork

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment offer (Contributor)
• @jjcoffee requires payment offer (Reviewer)

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

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@jjcoffee] The PR that introduced the bug has been identified. Link to the PR:
• [@jjcoffee] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@jjcoffee] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@jjcoffee] Determine if we should create a regression test for this bug.
• [@jjcoffee] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/331258

[CortneyOfstad]

@jjcoffee @Pujan92 — both of you have been paid in Upwork, so you should be all set there!

@jjcoffee — when you have a chance, can you complete the checklist above? Thanks!

[jjcoffee]

• The PR that introduced the bug has been identified. Link to the PR: N/A - behaviour has always been there as far as I can tell.
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug. Yes
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression test proposal

1. As a user with custom avatar, create a public room.
2. Send a message and send a reply in thread.
3. Copy the share code to the public room.
4. Paste the URL in incognito mode.
5. Click on the '1 Reply'.
6. Verify that your custom avatar displays in the report footer and that the avatars are correctly aligned.

Do we agree 👍 or 👎

[CortneyOfstad]

Regression test created here — so closing this out. Thanks all!