[HOLD for payment 2024-06-06] [$250] Group details – Avatar is not grayed out in a group chat when change it Offline

[lanitochka17]

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

---

Version Number: 1.4.71-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+jp_e_category@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #40884

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in
3. Go to any group chat.
4. Click on the header > Members.
5. Go offline.
6. Click on the avatar
7. Change the avatar.
8. Go back to group chat

Expected Result:

The avatar is grayed out

Actual Result:

Avatar is not grayed out in a group chat, it’s grayed out only in group details

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6473722_1715084573679.Avatar_is_not_grayed.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e747d57e97f1ec95
• Upwork Job ID: 1788797815120121856
• Last Price Increase: 2024-05-10
• Automatic offers:
• eh2077 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@Christinadobrzyn FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

Group details – Avatar is not grayed out in a group chat when change it Offline

What is the root cause of that problem?

The HeaderView avatars and ReportActionItemCreated avatar is not wrapped with OfflineWithFeedback.

App/src/pages/home/report/ReportActionItemCreated.tsx

Lines 71 to 78 in 80a9d70

	<PressableWithoutFeedback
	onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
	style={[styles.mh5, styles.mb3, styles.alignSelfStart]}
	accessibilityLabel={translate('common.details')}
	role={CONST.ROLE.BUTTON}
	disabled={shouldDisableDetailPage}
	>
	<MultipleAvatars

App/src/pages/home/HeaderView.tsx

Lines 255 to 273 in 80a9d70

	<PressableWithoutFeedback
	onPress={() => ReportUtils.navigateToDetailsPage(report)}
	style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
	disabled={shouldDisableDetailPage}
	accessibilityLabel={title}
	role={CONST.ROLE.BUTTON}
	>
	{shouldShowSubscript ? (
	<SubscriptAvatar
	mainAvatar={icons[0]}
	secondaryAvatar={icons[1]}
	size={defaultSubscriptSize}
	/>
	) : (
	<MultipleAvatars
	icons={icons}
	shouldShowTooltip={!isChatRoom || isChatThread}
	/>
	)}

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

Wrap both avatar and avatar container with OfflineWithFeedback and pass report.pendingAction.avatar as pendingAction.

We also need to pass errors, errorRowStyles & onErrorClose, just like we passed in this PR. Stylings will be changed according to the component.

What alternative solutions did you explore? (Optional)

avatar_not_greyed.mp4

[Krishna2323]

Proposal Updated

• Updated main solution section

[Christinadobrzyn]

Avatar looks 'brighter' in the chat thread

Then in the group members list

but I think this is minor and can be closed as not affecting our ROI.

@s77rt, can you take a peek at this since you worked on the PR #40884, and let us know if it is important to fix?

[s77rt]

I agree this is minor. Fixing this should be straightforward but I'm not sure if it's something we want. cc @shawnborton do you have a preference here?

[shawnborton]

I think we should make the avatar 50% opacity (just the avatar, not the camera icon next to it) once it has been changed offline and it is pending successful creation. And I think that should appear the same way everywhere.

cc @Expensify/design for visibility

[shawnborton]

But cc @marcaaron - don't we already have an issue open to address this one?

[s77rt]

@nexarvo Can you please comment here so you can be assigned to complete the 2 tasks:

1. Make avatar grayed out on reports
2. Exclude the change avatar button from being grayed out

[nexarvo]

Thanks @s77rt. Please assign me this ticket. Also for the second point we talked about here as well but there was no issue for that as this needs to be done everywhere in the App where we have icon to change avatar. Updating the code will fix it at all the places.

[melvin-bot]

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

[melvin-bot]

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

[Christinadobrzyn]

I added the external label, so the assignment is fair, but @eh2077 - @s77rt has been working on this so far. Would you be okay with @s77rt taking this? OR @s77rt, let us know the next steps for @eh2077. TY!

[s77rt]

Since this is a regression or more like unfinished work, @nexarvo and I should handle this. This does not require payment since it's a part of #39983

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nexarvo You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[Christinadobrzyn]

okay, I added @s77rt and @nexarvo to this - thank you!

@eh2077 I'm going to remove you from this ticket so you can focus on other things but let me know if you think there's any reason to add you.

[Christinadobrzyn]

working on PR - #42088

[Christinadobrzyn]

monitoring PR #42088

[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.4.77-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix Group Chat Avatar Offline Feedback in Chat #42088

If no regressions arise, payment will be issued on 2024-06-06. 🎊

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

• @s77rt requires payment (Needs manual offer from BZ)
• @nexarvo requires payment (Needs manual offer from BZ)

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

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

[s77rt]

• The PR that introduced the bug has been identified: Not a regression, more like a feature request
• The offending PR has been commented on: n/a
• A discussion in #expensify-bugs has been started: n/a
• Determine if we should create a regression test for this bug: No

[Christinadobrzyn]

Payouts due:

- [ ] Contributor: $250 @nexarvo (Upwork offer - https://www.upwork.com/nx/wm/offer/102603093)
- [ ] Contributor+: $250 @s77rt (upwork offer - https://www.upwork.com/nx/wm/offer/102603103)

Upwork job is here.

@s77rt @nexarvo let me know if either of you are paid through NewDot. Thanks!

No payment due for this based on #41770 (comment)

[s77rt]

@Christinadobrzyn No payment is due here. This is handled in #39983. We can close this issue

[Christinadobrzyn]

Ah thank you for the heads up @s77rt - Closing.