[HOLD for payment 2023-08-10] Avatar style is broken in anonymous footer

[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!

---

Action Performed:

1. Logout if already logged in
2. Visit https://staging.new.expensify.com/r/6469015542180863
3. Observe anonymous footer

Expected Result:

Room avatar looks same as in room header

Actual Result:

Room avatar style is broken

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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: 1.3.49-1
Reproducible in staging?: y
Reproducible in production?: n
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

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

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @slafortune (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

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[jfquevedol2198]

Proposal

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

Avatar style is broken in anonymous footer

What is the root cause of that problem?

Avatar container size is 40x40.

App/src/components/AnonymousReportFooter.js

Lines 31 to 35 in 024d210

	<AvatarWithDisplayName
	report={props.report}
	size={CONST.AVATAR_SIZE.MEDIUM}
	isAnonymous
	/>

But here Avatar size is CONST.AVATAR_SIZE.MEDIUM which is 52x52.

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

Avatar size should be CONST.AVATAR_SIZE.NORMAL (40x40)

<AvatarWithDisplayName
    report={props.report}
    size={CONST.AVATAR_SIZE.NORMAL}
    isAnonymous
/>

What alternative solutions did you explore? (Optional)

N/A

[makiour]

It is a regression of #23621. The changes from Avatar to MultipleAvatars in this commit has caused the issue. The MultipleAvatar component doesn't conserve the containerStyles properties.

[jfquevedol2198]

I think this is caused by the wrong size of avatar is passed in AvatarWithDisplayName inside the AnonymousReportFooter component

[shubham1206agra]

Proposal

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

Avatar style is broken in the anonymous footer

What is the root cause of that problem?

This PR #22467 introduces the bug.
Since above PR uses MultipleAvatars instead of Avatar.
Now, the MultipleAvatars uses the following logic for single item

App/src/components/MultipleAvatars.js

Lines 126 to 147 in 2f750ad

	if (props.icons.length === 1 && !props.shouldStackHorizontally) {
	return (
	<UserDetailsTooltip
	accountID={props.icons[0].id}
	icon={props.icons[0]}
	fallbackUserDetails={{
	displayName: props.icons[0].name,
	avatar: props.icons[0].avatar,
	}}
	>
	<View style={avatarContainerStyles}>
	<Avatar
	source={props.icons[0].source}
	size={props.size}
	fill={themeColors.iconSuccessFill}
	name={props.icons[0].name}
	type={props.icons[0].type}
	/>
	</View>
	</UserDetailsTooltip>
	);
	}

In this containerStyles uses

App/src/components/MultipleAvatars.js

Line 92 in 2f750ad

let avatarContainerStyles = getContainerStyles(props.size);

which uses

App/src/components/MultipleAvatars.js

Lines 74 to 89 in 2f750ad

	function getContainerStyles(size) {
	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;
	default:
	containerStyles = [styles.emptyAvatar, styles.emptyAvatarMargin];
	}
	return containerStyles;
	}

which makes the Avatar container size 40x40.

But before this PR, containerStyles used on Avatar is StyleUtils.getEmptyAvatarStyle which makes the Avatar container size 52x52

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

We can either revert the offending PR.

Or

Add case for CONST.AVATAR_SIZE.MEDIUM and CONST.AVATAR_SIZE.LARGE here

App/src/components/MultipleAvatars.js

Lines 74 to 89 in 2f750ad

	function getContainerStyles(size) {
	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;
	default:
	containerStyles = [styles.emptyAvatar, styles.emptyAvatarMargin];
	}
	return containerStyles;
	}

Or

Use StyleUtils.getEmptyAvatarStyle for containerStyles in the following code instead:

App/src/components/MultipleAvatars.js

Lines 126 to 147 in 2f750ad

	if (props.icons.length === 1 && !props.shouldStackHorizontally) {
	return (
	<UserDetailsTooltip
	accountID={props.icons[0].id}
	icon={props.icons[0]}
	fallbackUserDetails={{
	displayName: props.icons[0].name,
	avatar: props.icons[0].avatar,
	}}
	>
	<View style={avatarContainerStyles}>
	<Avatar
	source={props.icons[0].source}
	size={props.size}
	fill={themeColors.iconSuccessFill}
	name={props.icons[0].name}
	type={props.icons[0].type}
	/>
	</View>
	</UserDetailsTooltip>
	);
	}

What alternative solutions did you explore? (Optional)

N/A

[daordonez11]

Proposal

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

Room avatar appears misaligned on AnonymousReportFooter

What is the root cause of that problem?

In this view the size prop is sent as AVATAR_SIZE.MEDIUM and there is not enough space so the letter appears misaligned due to the size of the container. This started happening after changing the component to MultipleAvatars

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

Same as in the room name or LHN change the size prop to DEFAULT in AvatarWithDisplayName inside of AnonymousReportFooter to ensure it is displayed correctly.

Solution working:

What alternative solutions did you explore? (Optional)

Maybe use small size instead?

[parasharrajat]

Yes, this might be related to our PR #22467 as mentioned here #22467 (comment)

[parasharrajat]

Analyzing.

[melvin-bot]

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

• [CP Staging] Make sure medium avatar size gets medium container size #24109

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

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
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @mananjadhav does not require payment (Eligable for Manual Requests)

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:

• [@mananjadhav] The PR that introduced the bug has been identified. Link to the PR:
• [@mananjadhav] 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:
• [@mananjadhav] 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:
• [@mananjadhav] Determine if we should create a regression test for this bug.
• [@mananjadhav] 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.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mananjadhav]

@rushatgabhane Can you take over for the BZ Checklist?

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Match Report Header and LHN Avatars  #22467

2. 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: Match Report Header and LHN Avatars  #22467 (comment)

3. 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.

4. Determine if we should create a regression test for this bug. No

5. 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 - N.A.

[rushatgabhane]

created a manual request - https://staging.new.expensify.com/r/5857324489341335

[JmillsExpensify]

@slafortune Mind providing a payment summary so I can get the NewDot payment approved?

[slafortune]

External issue reporter - @situchan - OFFER $250 PD
Contributor that fixed the issue - NA
Contributor+ that helped on the issue and/or PR - (originally @mananjadhav) taken over by @rushatgabhane who does not require payment (Eligable for Manual Requests) $1000

[melvin-bot]

@Beamanator, @slafortune Huh... This is 4 days overdue. Who can take care of this?

[Beamanator]

Bump @JmillsExpensify

[melvin-bot]

@Beamanator, @slafortune Huh... This is 4 days overdue. Who can take care of this?

[slafortune]

@rushatgabhane @JmillsExpensify - was this paid via NewDot and can now be closed?

[Beamanator]

bump @JmillsExpensify

[melvin-bot]

@Beamanator, @slafortune Eep! 4 days overdue now. Issues have feelings too...

[slafortune]

Just wanted to put this easy to see if not paid yet, @rushatgabhane let use no if you've not been paid.