Web - Expense request avatar is broken in LHN

[kbecciv]

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. Login account A with policyExpenseChat beta permission
2. Create workspace if not exist
3. Invite user B to workspace
4. Login user B on another device
5. On B, Go to invited A's workspace chat
6. Request money
7. click ReportPreview to go to expense report
8. click IOUPreview to go to expense request
9. Observe highlighted row in LHN

Expected Result:

Avatar is not broken

Actual Result:

Avatar is broken

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: 1.3.47-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-28.at.6.18.34.PM.1.mov

Recording.3986.mp4

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

View all open jobs on GitHub

[melvin-bot]

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

[bernhardoj]

Proposal

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

The expense report first avatar is not full circle.

What is the root cause of that problem?

The first avatar/icon size is 32, but the width of the container of the avatar is 40 and the border-radius style is applied to the container.

The width of 40 comes from the containerStyle here that is applied to the SubscriptAvatar container.

App/src/components/SubscriptAvatar.js

Line 51 in eb02006

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

and because the default flex-direction is column, the children, including the avatar container, will have the same width, that is 40.

That's why you can notice the border-top radius looking weird

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

Apply alignSelf flex start to the first avatar container of SubscriptAvatar, so the width follows the content/children of it.

App/src/components/SubscriptAvatar.js

Lines 56 to 63 in eb02006

	<View>
	<Avatar
	source={props.mainAvatar.source}
	size={props.size || CONST.AVATAR_SIZE.DEFAULT}
	name={props.mainAvatar.name}
	type={props.mainAvatar.type}
	/>
	</View>

What alternative solutions did you explore? (Optional)

If we look at MultipleAvatars that is stacked diagonally,

it doesn't have this issue. That is because we manually set the width and the height of the container (imageStyles) to be the same size as the avatar icon. (just a note: avatar has a total of 3 view wrappers that we can style: iconAdditionalStyles, imageStyles, containerStyles)

App/src/components/MultipleAvatars.js

Lines 253 to 262 in eb02006

	<View>
	<Avatar
	source={props.icons[0].source || props.fallbackIcon}
	fill={themeColors.iconSuccessFill}
	size={props.isFocusMode ? CONST.AVATAR_SIZE.MID_SUBSCRIPT : CONST.AVATAR_SIZE.SMALLER}
	imageStyles={[singleAvatarStyle]}
	name={props.icons[0].name}
	type={props.icons[0].type}
	/>
	</View>

We can do the similar thing, but I still prefer the main solution.

[ahmedGaber93]

@situchan How can I get account with policyExpenseChat beta permission?
I was overriding the Permissions.canUseAllBetas function to return true in my local, but when opening any workspace chat it return 304.
Do I need to have this permission in backend also?
cc @bernhardoj

[bernhardoj]

@ahmedGaber93 yes

[ahmedGaber93]

@bernhardoj
Thanks for help.
But as a contributor, how can I get this permission in backend?

[bernhardoj]

You can ask for help from the internal team to add you to the beta.

[situchan]

@ahmedGaber93 please request permission in slack. You need to provide emails to be added to beta.

[ahmedGaber93]

Thanks for help @situchan.
I have request permission in slack.

[situchan]

@stephanieelliott can I C+ review this if possible? As I found the root cause and solution while reporting this bug.

[Christinadobrzyn]

This issue seems similar to #23847 - it looks like it's going to be fixed with #23815 - I asked the engineers in 23815 if they agree

[situchan]

This issue seems similar to #23847 - it looks like it's going to be fixed with #23815 - I asked the engineers in 23815 if they agree

@Christinadobrzyn No, it's different issue. #23815 was deployed to staging 6 hrs ago but broken avatar issue is still reproducible.

[rezkiy37]

This issue seems similar to #23847 - it looks like it's going to be fixed with #23815 - I asked the engineers in 23815 if they agree

FYI: #23815 (comment)

[Christinadobrzyn]

thanks for confirming @rezkiy37! Closing this as it's confirmed to be fixed with #23815 (comment)

@situchan feel free to reach out in the Expensify-Bugs room if you find any regressions

[Christinadobrzyn]

Hey @rezkiy37, can you double-check this issue will be fixed? @situchan believes to think the issue still exists after the merge.

Sorry for all the confusion @stephanieelliott - tried to save you some time!

[rezkiy37]

Hi, @situchan! Could you please take a look at this comment where I attached examples. The second video associated with this issue. Do I still have the bug there?

#23815 (comment)

[situchan]

@rezkiy37 you can test on staging right now

[situchan]

@rezkiy37 I checked your video. It's IOU request (in DM). The issue is in expense request (in workspace chat).
Is it clear now?

[stephanieelliott]

Appreciate you, thanks @Christinadobrzyn! 💕

[rezkiy37]

@situchan, I've tried to reproduce it one more time on the staging. Everything looks good. Avatars are circles.

Avatar.mp4

[bernhardoj]

It's already fixed in this PR #22467

[situchan]

Ah it's merged 12 hrs ago. So @rezkiy37 it's not your PR but Georgia's PR which fixed this issue.

[parasharrajat]

Yes, it is fixed. This was known to us before this issue was reported. Here is the related discussion https://github.com/Expensify/App/pull/21657/files#r1275373499 #22467 (comment) and we were actively working on this via discussion #19905 (comment).

Thus this report is not eligible for reporting.

@stephanieelliott We can close it.