[HOLD for payment 2024-02-20] [$250] Profile - Error message when loading User / WS avatar has incorrect dimensions and position

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.36-0
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): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open iOS/Android App or go to staging.new.expensify.com on mobile Chrome / Safari
2. Login with any account
3. Go to User profile and load user avatar with incorrect size to generate an error message
4. Create existing workspace or go to existing one
5. Go to Overview and load Workspace avatar with incorrect size to generate an error message

Expected Result:

The error message has the correct dimensions and position

Actual Result:

User avatar -> Error message overlaps user name
WS avatar -> Error message takes up the entire width of the screen

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013bfbb99c962ed2f1
• Upwork Job ID: 1754499172400123904
• Last Price Increase: 2024-02-05
• Automatic offers:
• bernhardoj | Contributor | 28149470

[github-actions]

👋 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 @francoisl (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[Tony-MK]

Proposal

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

Profile - Error message when loading User / WS avatar has incorrect dimensions and position

What is the root cause of that problem?

The errorStyles prop is passed in the AvatarWithImagePicker component for the InitialSettingsPage.

While in the WorkspaceOverviewPage, errorRowStyles is left out.

App/src/pages/settings/InitialSettingsPage.js

Line 314 in 0ae07be

errorRowStyles={[styles.mt6]}

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

Remove the errorStyles prop and match any styles from the AvatarWithImagePicker component in WorkspaceOverviewPage to InitialSettingsPage for consistency.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013bfbb99c962ed2f1

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $250

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[melvin-bot]

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

[mountiny]

Lowering the rewards since this is a simple styling change

@dubielzyk-expensify could you please also clarify how this should look like? thank you!

[bernhardoj]

Proposal

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

The avatar error message width is very small and workspace avatar error message doesn't have a horizontal spacing.

What is the root cause of that problem?

This happens after the ideal nav PR where we move the AvatarWithImagePicker from ProfilePage to InitialSettingsPage. Previously, the AvatarWithImagePicker is inside a scroll view with a full width, but in InitialSettingsPage, AvatarWithImagePicker is inside an OfflineWithFeedback and another View that has an align items center style (avatarSectionWrapperSettings) to align all items horizontally.

App/src/pages/settings/InitialSettingsPage.js

Lines 303 to 312 in ff23077

	<View style={[styles.avatarSectionWrapperSettings, styles.justifyContentCenter, styles.ph5]}>
	{_.isEmpty(props.currentUserPersonalDetails) || _.isUndefined(props.currentUserPersonalDetails.displayName) ? (
	<CurrentUserPersonalDetailsSkeletonView avatarSize={CONST.AVATAR_SIZE.XLARGE} />
	) : (
	<>
	<OfflineWithFeedback
	pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
	style={styles.mb3}
	>
	<AvatarWithImagePicker

If the align items is center, the OfflineWithFeedback will be put in the center with a limited width as shown below

and on native, the AvatarWithImagePicker width can't expand the OfflineWithFeedback width when a new element is added.

For the workspace avatar, we simply didn't set a horizontal margin style.

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

Set the OfflineWithFeedback width to 100%.

App/src/pages/settings/InitialSettingsPage.js

Lines 308 to 310 in ff23077

	<OfflineWithFeedback
	pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
	style={styles.mb3}

Remove the extra space of the avatar.

App/src/pages/settings/InitialSettingsPage.js

Line 327 in ff23077

style={[styles.mh5]}

We already have the horizontal spacing from the View wrapper

App/src/pages/settings/InitialSettingsPage.js

Line 303 in ff23077

<View style={[styles.avatarSectionWrapperSettings, styles.justifyContentCenter, styles.ph5]}>

For workspace avatar, add a horizontal margin (mh5).

App/src/pages/workspace/WorkspaceOverviewPage.js

Line 95 in ff23077

style={[styles.mb3, styles.mt5]}

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

• Fix avatar error message styling #36111

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

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

• @conorpendergrast requires payment (Needs manual offer from BZ) — no payment required
• @bernhardoj requires payment automatic offer (Contributor) — paid $250 via Upwork
• @thesahindia requires payment through NewDot Manual Requests — payment summary below

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

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

[melvin-bot]

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

[CortneyOfstad]

Payment is scheduled for Tuesday 👍

[CortneyOfstad]

Not overdue, as the PR went into production 3 days ago. Payment is still scheduled for Tuesday, barring any regressions 👍

[CortneyOfstad]

No regression listed so getting this payment rolled out!

[CortneyOfstad]

Alright payment summary below!

Payment Summarty

@bernhardoj (Contributor) — paid $250 via Upwork
@thesahindia (C+) — to be paid $250 via NewDot

[CortneyOfstad]

@thesahindia any update on the checklist here?

[CortneyOfstad]

@thesahindia in regards to the checklist, do you think this could be completed by EOD today? Also, has a request been sent to NewDot for payment? Thanks!

[thesahindia]

I don't think this needs a regression test.

This was caused by #33280. It was a big PR, so we couldn’t have prevented this.

[thesahindia]

Also, has a request been sent to NewDot for payment? Thanks!

I am going OOO, I will send the request after coming back. You can close this.

[CortneyOfstad]

Thanks @thesahindia!

[JmillsExpensify]

$250 for @thesahindia