[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) #48244

IuliiaHerets · 2024-08-29T08:53:22Z

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: 9.0.26-1
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to Account settings > Profile.
Upload a large photo.

Expected Result:

Avatar position will not move after the error appears.

Actual Result:

On web and desktop app, avatar position moves after the error appears.
On Android and iOS app, the avatar position does not move but the error message is not placed correctly.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6585839_1724882325226.pic.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021831363479706276077
Upwork Job ID: 1831363479706276077
Last Price Increase: 2024-09-04

Issue Owner

Current Issue Owner: @alitoshmatov

melvin-bot · 2024-08-29T08:53:31Z

Triggered auto assignment to @Julesssss (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

melvin-bot · 2024-08-29T08:53:31Z

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

github-actions · 2024-08-29T08:53:42Z

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

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

Julesssss · 2024-08-29T08:54:52Z

We'll fix, but this is not a blocker.

etCoderDysto · 2024-08-29T08:58:16Z

Edited by proposal-police: This proposal was edited at 2024-09-03 10:29:15 UTC.

Proposal

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

Avatar position moves after error appears (web), incorrect error position (native)

What is the root cause of that problem?

We are using styles.alignSelfCenter for avatar

App/src/components/AvatarWithImagePicker.tsx

Line 375 in b9af3d1

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

For native issue, we are not adding full width (styles.w100) to a view component that wraps AvatarWithImagePicker below, and the view component in AvatarWithImagePicker is inheriting a width that is not stretched to full width

App/src/pages/settings/Profile/ProfilePage.tsx

Lines 157 to 160 in 4fe86eb

    
           <View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}> 
        
               <MenuItemGroup shouldUseSingleExecution={false}> 
        
                   <AvatarWithImagePicker 
        
                       isUsingDefaultAvatar={UserUtils.isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}

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

We should use styles.alignSelfStartfor avatar
We should add styles.w100 for the view component to address the native issue

<View style={[styles.pt3, styles.pb6, styles.alignSelfStart, styles.w100]}>

What alternative solutions did you explore? (Optional)

Alternative solution for web issue

We can also remove type === CONST.ICON_TYPE_AVATAR && styles.alignSelfStart from here

App/src/components/AvatarWithImagePicker.tsx

Line 375 in b9af3d1

style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
Remove type prop from WorkspaceProfilePage and from other pages where type is passed to AvatarWithImagePicker

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 176 to 177 in 4fe86eb

type={CONST.ICON_TYPE_WORKSPACE}

fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
Remove type prop from AvatarWithImagePicker too

dominictb · 2024-08-29T10:09:19Z

Edited by proposal-police: This proposal was edited at 2023-10-02T14:53:00Z.

Proposal

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

On web and desktop app, avatar position moves after the error appears.
On Android and iOS app, the avatar position does not move but the error message is not placed correctly.

What is the root cause of that problem?

web bug
We're using styles.alignSelfCenter in

App/src/components/AvatarWithImagePicker.tsx

Line 375 in b9af3d1

    
           style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

When there's an error, the width of avatar container is same as error message -> the avatar is center

native bug

We don't set the width: 100% for the container in

App/src/components/AvatarWithImagePicker.tsx

Line 328 in b9af3d1

w100 in here doesn't cover the error message

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

Fix web bug
We should remove type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter
Fix native bug

Add styles.w100 in here

What alternative solutions did you explore? (Optional)

NA

etCoderDysto · 2024-09-03T10:49:03Z

Updated Proposal

Added an alternative solution
Added a solution to fix native issue

melvin-bot · 2024-09-03T18:28:11Z

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

melvin-bot · 2024-09-04T16:07:35Z

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

melvin-bot · 2024-09-04T16:07:40Z

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

github-actions · 2024-09-04T23:09:54Z

@haris-ali9211 Your proposal will be dismissed because you did not follow the proposal template.

haris-ali9211 · 2024-09-04T23:17:44Z

Proposal

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

The avatar position moves after the error appears on the web and desktop app. On Android and iOS apps, the avatar position does not move, but the error message is not placed correctly.

What is the root cause of that problem?

Bug Causing in webApp

<PressableWithoutFeedback
    onPress={() => onPressAvatar(openPicker)}
    accessibilityRole={CONST.ROLE.BUTTON}
    accessibilityLabel={translate('avatarWithImagePicker.editImage')}
    disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
    disabledStyle={disabledStyle}
    style={[styles.pRelative, avatarStyle, type === CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}
    ref={anchorRef}
>

Why It Is Causing

style={[styles.pRelative, avatarStyle, type===CONST.ICON_TYPE_AVATAR && styles.alignSelfCenter]}

Here on the style, we are using styles.alignSelfCenter, which is why, when an error arises, the container's size becomes greater than the avatar. Consequently, the avatar centers itself due to the alignSelfCenter property.

Bug Causing in Native

<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>
    <MenuItemGroup shouldUseSingleExecution={false}>
        <AvatarWithImagePicker
            isUsingDefaultAvatar={UserUtils.isDefaultAvatar(currentUserPersonalDetails?.avatar ?? '')}
            source={avatarURL}
            avatarID={accountID}
            onImageSelected={PersonalDetails.updateAvatar}
            onImageRemoved={PersonalDetails.deleteAvatar}
            size={CONST.AVATAR_SIZE.XLARGE}
            avatarStyle={styles.avatarXLarge}
            pendingAction={currentUserPersonalDetails?.pendingFields?.avatar ?? undefined}
            errors={currentUserPersonalDetails?.errorFields?.avatar ?? null}
            errorRowStyles={styles.mt6}
            onErrorClose={PersonalDetails.clearAvatarErrors}
            onViewPhotoPress={() => Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))}
            previewSource={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
            originalFileName={currentUserPersonalDetails.originalFileName}
            headerTitle={translate('profilePage.profileAvatar')}
            fallbackIcon={currentUserPersonalDetails?.fallbackIcon}
            editIconStyle={styles.profilePageAvatar}
        />
    </MenuItemGroup>
</View>

Why It Is Causing

style={[styles.pt3, styles.pb6, styles.alignSelfStart]}

Here we are not applying styles.w100 (full width) to the View component that encloses AvatarWithImagePicker. Because of this, the inner View component inherits a width that does not extend fully across the container, leading to layout issues.

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

For WebApp
Apply styles.alignSelfStart to the avatar to resolve the centering issue.
For Native Mobile
Add styles.w100 to the view component to correct the layout

shubham1206agra · 2024-09-05T07:08:24Z

Just marking here for visibility, @rushatgabhane will fix this in #48517.

dominictb · 2024-09-06T03:05:49Z

@shubham1206agra I see this bug is external, should we handle it here?

shubham1206agra · 2024-09-06T03:16:57Z

No, it will be handled by @rushatgabhane since it was a regression from copilot.

kevinksullivan · 2024-09-12T18:59:27Z

Closing out since we have that PR fixing this and other issues.

IuliiaHerets added DeployBlockerCash This issue or pull request should block deployment Bug Something is broken. Auto assigns a BugZero manager. labels Aug 29, 2024

melvin-bot bot assigned Julesssss Aug 29, 2024

melvin-bot bot assigned kevinksullivan Aug 29, 2024

melvin-bot bot added the Daily KSv2 label Aug 29, 2024

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Aug 29, 2024

Julesssss added Daily KSv2 and removed DeployBlockerCash This issue or pull request should block deployment Hourly KSv2 labels Aug 29, 2024

github-actions bot mentioned this issue Aug 29, 2024

Deploy Checklist: New Expensify 2024-08-28 #48221

Closed

93 tasks

dangrous mentioned this issue Aug 29, 2024

[Hold for payment 2024-09-06] [#wave-control] [Bring copilot to NewDot] Display account switcher #46920

Closed

melvin-bot bot added the Overdue label Sep 2, 2024

dangrous mentioned this issue Sep 4, 2024

Fix copilot bugs #48517

Merged

50 tasks

Julesssss added the External Added to denote the issue can be worked on by a contributor label Sep 4, 2024

melvin-bot bot changed the title ~~Avatar - Avatar position moves after error appears (web), incorrect error position (native)~~ [$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) Sep 4, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 4, 2024

melvin-bot bot assigned alitoshmatov Sep 4, 2024

melvin-bot bot removed the Overdue label Sep 4, 2024

etCoderDysto mentioned this issue Sep 5, 2024

The position of avatar image moves when error occurs in profile page. #48602

Closed

6 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 8, 2024

kevinksullivan closed this as completed Sep 12, 2024

allgandalf mentioned this issue Oct 4, 2024

[Ready for payment] Account switcher - No spacing between account switcher icon and the status icon #48261

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) #48244

[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) #48244

IuliiaHerets commented Aug 29, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Aug 29, 2024

melvin-bot bot commented Aug 29, 2024

github-actions bot commented Aug 29, 2024

Julesssss commented Aug 29, 2024

etCoderDysto commented Aug 29, 2024 •

edited

Loading

dominictb commented Aug 29, 2024 •

edited

Loading

etCoderDysto commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 4, 2024

melvin-bot bot commented Sep 4, 2024

github-actions bot commented Sep 4, 2024

haris-ali9211 commented Sep 4, 2024

Bug Causing in webApp

Bug Causing in Native

shubham1206agra commented Sep 5, 2024

dominictb commented Sep 6, 2024

shubham1206agra commented Sep 6, 2024

kevinksullivan commented Sep 12, 2024

[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) #48244

[$250] Avatar - Avatar position moves after error appears (web), incorrect error position (native) #48244

Comments

IuliiaHerets commented Aug 29, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Aug 29, 2024

melvin-bot bot commented Aug 29, 2024

github-actions bot commented Aug 29, 2024

Julesssss commented Aug 29, 2024

etCoderDysto commented Aug 29, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dominictb commented Aug 29, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

etCoderDysto commented Sep 3, 2024

melvin-bot bot commented Sep 3, 2024

melvin-bot bot commented Sep 4, 2024

melvin-bot bot commented Sep 4, 2024

github-actions bot commented Sep 4, 2024

haris-ali9211 commented Sep 4, 2024

Proposal

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

What is the root cause of that problem?

Bug Causing in webApp

Bug Causing in Native

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

shubham1206agra commented Sep 5, 2024

dominictb commented Sep 6, 2024

shubham1206agra commented Sep 6, 2024

kevinksullivan commented Sep 12, 2024

IuliiaHerets commented Aug 29, 2024 •

edited by melvin-bot bot

Loading

etCoderDysto commented Aug 29, 2024 •

edited

Loading

dominictb commented Aug 29, 2024 •

edited

Loading