[HOLD for payment 2024-08-02] [$250] Workspace - Fallback avatar in workspace chat is clickable and leads to not here page

@zanyrenney

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: 9.0.4-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
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go offline
Go to workspace settings > Members
Invite a non-existing user
Go to workspace chat with the invited user
Click on the chat header
Click on the fallback avatar (invited user)

Expected Result:

The fallback avatar should not be clickable

Actual Result:

The fallback avatar is clickable and leads to not here page

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6532900_1720084856397.bandicam_2024-07-04_17-18-11-171.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0189b738ae283ab8e4
Upwork Job ID: 1811060566160624462
Last Price Increase: 2024-07-17
Automatic offers:

neonbhai | Contributor | 103172276

Issue Owner

Current Issue Owner: @zanyrenney

@miljakljajic

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

@miljakljajic

@miljakljajic 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

We think that this bug might be related to #wave-collect - Release 1

Proposal

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

The fallback avatar is clickable and leads to not here page

What is the root cause of that problem?

In offline mode, we can't call successfully openPublicProfilePage and can't get avatarURL in

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

Line 48 in f73cdc4

shouldShowNotFoundPage={!avatarURL}

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

In the function openPublicProfilePage we can set avatarUrl to the default avatar when its call fails

What alternative solutions did you explore? (Optional)

We'll not allow user to navigate to the avatar page when it don't have data and in offline mode
NA

Proposal

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

Workspace - Fallback avatar in workspace chat is clickable and leads to not here page

What is the root cause of that problem?

App/src/components/RoomHeaderAvatars.tsx

Line 77 in f73cdc4

onPress={() => navigateToAvatarPage(icon)}

In the navigateToAvatarPage function, we haven't included logic to prevent the user from navigating to the avatar page if the avatar is default

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

In the ProfileAvatar component, we currently have logic to display a "not found" page if we cannot find personalDetail matching the accountID prop. We should implement the same logic in the navigateToAvatarPage function

App/src/components/RoomHeaderAvatars.tsx

Lines 25 to 27 in f73cdc4

    
           if (icon.id) { 
        
               Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(icon.id)); 
        
           }

We need to verify whether we can find a personalDetail that matches the icon.id. If we can find a match, then we'll allow the user to navigate to the avatar page.

Even though, we can display the disable pointer when the user hovers over the default avatar

What alternative solutions did you explore? (Optional)

On the Header page, we also disable the header view, including interactions with the avatar.

App/src/pages/home/HeaderView.tsx

Lines 175 to 180 in ec19663

    
               disabled={shouldDisableDetailPage} 
        
               accessibilityLabel={title} 
        
               role={CONST.ROLE.BUTTON} 
        
           > 
        
               {shouldShowSubscript ? ( 
        
                   <SubscriptAvatar

Here, we use the function isOptimisticPersonalDetail.

App/src/libs/ReportUtils.ts

Line 1133 in ec19663

return isOptimisticPersonalDetail(participantAccountIDs[0]);

I recommend that we do the same in RoomHeaderAvatars (there are two places that need to apply the disabled props)

disabled={ReportUtils.isOptimisticPersonalDetail(icon.id)}

Note that icon.id refers to accountID as defined

App/src/libs/ReportUtils.ts

Line 2049 in ec19663

id: report?.ownerAccountID,

Proposal

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

Workspace - Fallback avatar in workspace chat is clickable and leads to not here page

What is the root cause of that problem?

Whe navigating to avatar page here, we do not check if the avatar is the default Fallback avatar.

We should disable navigating if the avatar is the fallback avatar.

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

We should have a check that disables clicking on the avatar here and here when it is the fallback avatar:

App/src/components/RoomHeaderAvatars.tsx

Lines 39 to 44 in f73cdc4

    
           <PressableWithoutFocus 
        
               style={styles.noOutline} 
        
               onPress={() => navigateToAvatarPage(icons[0])} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} 
        
               accessibilityLabel={icons[0].name ?? ''} 
        
           >

disabled={icon.source === Expensicons.FallbackAvatar}

Result

Screen.Recording.2024-07-04.at.10.10.29.PM.mov

@miljakljajic

@miljakljajic Huh... This is 4 days overdue. Who can take care of this?

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

Thank you!

@miljakljajic

@miljakljajic I am not paid yet. Can you please reopen and sort payment on upwork? Thanks

@zanyrenney

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

@miljakljajic

@miljakljajic is OOO at the moment, so re-assigned via Bug label - @zanyrenney please see #44853 (comment) when you have a moment, thanks!

@aimane-chnaif

hey @aimane-chnaif apologies about you getting forgotten!

Have sent you another invite for it - https://www.upwork.com/nx/wm/offer/104306643

@aimane-chnaif

bump @aimane-chnaif please accept

@aimane-chnaif

Payment summary

paid @aimane-chnaif $250 via upwork.

Navigation Menu

Repository navigation

[HOLD for payment 2024-08-02] [$250] Workspace - Fallback avatar in workspace chat is clickable and leads to not here page #44853

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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)

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)

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?

Result

46 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (icon.id) {
	Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(icon.id));
	}

	disabled={shouldDisableDetailPage}
	accessibilityLabel={title}
	role={CONST.ROLE.BUTTON}
	>
	{shouldShowSubscript ? (
	<SubscriptAvatar

	<PressableWithoutFocus
	style={styles.noOutline}
	onPress={() => navigateToAvatarPage(icons[0])}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
	accessibilityLabel={icons[0].name ?? ''}
	>

[HOLD for payment 2024-08-02] [$250] Workspace - Fallback avatar in workspace chat is clickable and leads to not here page #44853

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jul 4, 2024

lanitochka17 commented on Jul 4, 2024

lanitochka17 commented on Jul 4, 2024

daledah commented on Jul 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?

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

What alternative solutions did you explore? (Optional)

cretadn22 commented on Jul 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?

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

What alternative solutions did you explore? (Optional)

neonbhai commented on Jul 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?

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

Result

melvin-bot commented on Jul 9, 2024

melvin-bot commented on Jul 10, 2024

46 remaining items

miljakljajic commented on Aug 8, 2024

aimane-chnaif commented on Oct 3, 2024

melvin-bot commented on Oct 7, 2024

dangrous commented on Oct 7, 2024

zanyrenney commented on Oct 7, 2024

zanyrenney commented on Oct 7, 2024

zanyrenney commented on Oct 8, 2024

zanyrenney commented on Oct 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions