[HOLD for payment 2024-08-01] [$50] Group chat - Avatar loads infinitely when refreshing full screen avatar on confirmation page

lanitochka17 commented 1 month ago

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.10-2 Reproducible in staging?: Y Reproducible in production?: N 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 to FAB > Start chat > Chat
Select a few users
Proceed to confirmation page
Add a group chat avatar
On confirmation page, click on the group chat avatar
Click View avatar
Refresh the page

Expected Result:

Avatar will load after refreshing the page

Actual Result:

Avatar loads infinitely when refreshing full screen avatar on confirmation page

Workaround:

Unknown

Platforms:

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

[x] Android: Native
[x] Android: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/d52a99e0-681c-4524-93ad-4811b972243e

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0163f99f868835a727
Upwork Job ID: 1814779353535476997
Last Price Increase: 2024-07-23
Automatic offers:

Ahmed-Abdella | Contributor | 103224976

Issue Owner

Current Issue Owner: @RachCHopkins

github-actions[bot] commented 1 month ago

:wave: 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.

melvin-bot[bot] commented 1 month ago

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

lanitochka17 commented 1 month ago

We think that this bug might be related to #vip-vsp

mountiny commented 1 month ago

@mollfpr @b4s36t4 This one seems related to your PR https://github.com/Expensify/App/pull/44702 can you please confirm if revert fixes it?

mountiny commented 1 month ago

Not fixed by the revert, going to mark this as external

melvin-bot[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

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

mountiny commented 1 month ago

In you proposals, you must include the offending PR. If you can highlight which PR caused it without a fix for the bug (the fix is a revert) a partial $50 reward will go your way

Ahmed-Abdella commented 1 month ago

@mountiny ther is no option to view the group image in the confirm page in production so it looks like this come from this PR #41586 that add a feature to view a group chat custom avatar.

Also I noticed a behaviour : If you wait for some time before viewing the image it works fine and display the image after the first refresh. Check the video below. ( but it doesn't work if you refresh it for one more time )

https://github.com/user-attachments/assets/2c8ee18a-2afb-402b-aa87-7a2497fc6388

So I think what happened is that: After refreshing the page the app trying trying to fetch the image from the backend, but it seems that it didn't get uploaded yet so the file is not found. When I try with a small size image and wait for sometime before veiwing the image it works because the image has been uploaded.

And here is the error message from the console.

The not found file message

Screenshot 2024-07-21 at 4 15 15 AM

Screenshot 2024-07-21 at 4 16 29 AM

Ahmed-Abdella commented 1 month ago

Not Completely sure, but I think the same PR also cause this issue #45842. I mentioned the PR there too.

gijoe0295 commented 1 month ago

Proposal

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

Avatar loads infinitely when refreshing full screen avatar on confirmation page

What is the root cause of that problem?

The image uploaded while creating group is optimistically saved locally in the form of blob URI. The blob data would be cleared once we refresh the page. As the result, console would throw ERR_FILE_NOT_FOUND and the attachment view modal would show loading:

https://github.com/Expensify/App/blob/5a2602c441170093e99850e2194808218b0aa838/src/components/ImageView/index.tsx#L240

and the group avatar in confirmation RHP would be reset to default.

Normally for an image to be uploaded to the CDN, we need to call the corresponding update avatar API and the BE will handle the upload. We haven't had any approaches solving the case of optimistic image data.

Offending PR: This has happened ever since we allowed viewing the custom avatar in full screen while creating group in https://github.com/Expensify/App/pull/41586.

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

We should not allow View photo option if the image uri indicates a local file FileUtils.isLocalFile(url):

https://github.com/Expensify/App/blob/f3a8f736208166286e6f7da3562f1503d5ef2a3d/src/components/AvatarWithImagePicker.tsx#L337

Or we can revert the shouldDisableViewPhoto that had been removed in https://github.com/Expensify/App/pull/41586 and use in in NewChatConfirmationPage.

s77rt commented 1 month ago

cc @nexarvo Can you check this one 👀

NaveedShaikh78 commented 1 month ago

I saw this issue in Upwork. I tried the same step but now it is not reproducible, is it fix or still reproducible ?

melvin-bot[bot] commented 1 month ago

📣 @NaveedShaikh78! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:
```
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
```

NaveedShaikh78 commented 1 month ago

Is it still reproducible?

tsa321 commented 1 month ago

Proposal

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

Avatar spinner shown when refreshing full screen avatar page and on new group chat confirmation page

What is the root cause of that problem?

PR https://github.com/Expensify/App/pull/41586 enables viewing group avatar in full screen. When user creates new group, the data is stored in onyx newChatDraft, but the avatar is stored as blob uri string. The blob uri string won't be available when the user refresh the app.

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

We could store the avatar image as base64 string in onyx and use it in new/chat/confirm page. If we need to fix this issue quickly, I have made a draft PR.

mountiny commented 1 month ago

Good points, I think this is minor issue and @nexarvo @s77rt should be able to handle this as not a blocker

mountiny commented 1 month ago

We are proceeding with the revert here https://github.com/Expensify/App/pull/45863 so this will most likely be fixed after that

Ahmed-Abdella commented 1 month ago

In you proposals, you must include the offending PR. If you can highlight which PR caused it without a fix for the bug (the fix is a revert) a partial $50 reward will go your way

@mountiny Based on this, will I get paid for highlighting the PR?

melvin-bot[bot] commented 1 month ago

Upwork job price has been updated to $50

melvin-bot[bot] commented 1 month ago

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

melvin-bot[bot] commented 1 month ago

📣 @Ahmed-Abdella 🎉 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 📖

mountiny commented 1 month ago

Yeah $50 to @Ahmed-Abdella

Ahmed-Abdella commented 1 month ago

Offer accepted, Thanks @mountiny

melvin-bot[bot] commented 1 month ago

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot[bot] commented 1 month ago

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.11-5 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

https://github.com/Expensify/App/pull/45863

If no regressions arise, payment will be issued on 2024-08-01. :confetti_ball:

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

@s77rt requires payment through NewDot Manual Requests
@Ahmed-Abdella requires payment automatic offer (Contributor)

melvin-bot[bot] commented 1 month ago

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.
[ ] [@RachCHopkins] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

s77rt commented 1 month ago

No checklist needed ^ Offending PR has been reverted

carlosmiceli commented 1 month ago

Can we close this?

s77rt commented 1 month ago

@carlosmiceli, @Ahmed-Abdella is due payment for finding offending PR

carlosmiceli commented 1 month ago

Understood!

melvin-bot[bot] commented 1 month ago

@carlosmiceli, @s77rt, @RachCHopkins, @mountiny, @Ahmed-Abdella Eep! 4 days overdue now. Issues have feelings too...

RachCHopkins commented 1 month ago

I'm here Melvin! Sorry, busy week last week!

mountiny commented 1 month ago

Summary $50 to @Ahmed-Abdella for help with this deploy blocker and finding the offending PR.

As we have reverted the offending change the checklist can be skipped

RachCHopkins commented 4 weeks ago

Payment Summary:

Contributor: @Ahmed-Abdella paid $50 via Upwork

RachCHopkins commented 3 weeks ago

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.

Expensify / App