[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