[HOLD for payment 2023-05-29] [$1000] iOS/iPad - Buttons to add attachments, delete workspace, and upload an avatar are unrepsonsive

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Start iOS / iPad App and login in any account
2. Go to Settings > Profile or Settings > Workspaces > Any workspace > General settings
3. Tap to avatar
4. Tap to 'Upload photo'
   ===
5. Go to any chat
6. Tap on [ + ] on composer
7. Tap to 'Add attachments'
   ===
8. Start iOS / iPad App
9. Login with any accounts - gmail or expensifail.
10. Create workspace or goto new workspace.
11. Tap '2 dots' button and tap 'Delete workspace'

Expected Result:

1. User can select and upload photo for avatar.
2. User can select and upload file in chat.
3. Workspace deleted. User is on the 'Create new workspace' page.

Actual Result:

1. Nothing happens. 'Upload photo' button is not working.
2. Nothing happens. 'Add attachment' button is not working.
3. The user cannot delete the workspace. After clicking on 'Delete workspace', the application freezes. The workspace is not deleted.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native - iPad
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.16.5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Bug6061224_iPad-iOS-attachment-not-working.mp4

Bug6061224_iOS-cannot-upload-avatar.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d61f5eb9f4d23355
• Upwork Job ID: 1659749803863924736
• Last Price Increase: 2023-05-20

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[greg-schroeder]

Reviewing

[greg-schroeder]

I reproduced this on an iPad via Browserstack:

2023-05-19_19-31-22.mp4

[greg-schroeder]

Added the unresponsive delete workspace button from #19312

[melvin-bot]

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

[melvin-bot]

Current assignee @greg-schroeder is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @cead22 (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[AlexanderDmitriev]

Proposal

Please re-state the problem that we are trying to solve in this issue.
Buttons to add attachments, delete workspace, and upload an avatar are unrepsonsive

What is the root cause of that problem?
It was passing props for showing modal while animating for dismissing of PopoverMenu like Delete Workspace, Upload Avatar, Add Attachment. So during proceeding for dismissing of PopoverMenu, showing animation of modal was being ignored.

What changes do you think we should make in order to solve the problem?
We need to add timeout to show main modal during dismissing PopoverMenu.

https://github.com/Expensify/App/blob/main/src/components/PopoverMenu/index.js

Screen.Recording.2023-05-20.at.11.39.57.AM.mov

What alternative solutions did you explore? (Optional)
None

[tienifr]

Proposal

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

'Upload photo', 'Add attachment', 'Delete workspace' buttons are not working.

This not only happens on iPad but on regular iPhones as well.

What is the root cause of that problem?

It's here

App/src/components/PopoverMenu/index.js

Line 47 in 7378626

selectedItem.onSelected();

where we're calling selectedItem.onSelected() right inside selectItem, which is called when the MenuItem is pressed.

For the case of 'Upload photo', 'Add attachment', 'Delete workspace' menu items, when the button is pressed it will open another modal when the current PopoverMenu modal doesn't hide completely yet. 2 modals opening at the same time will cause screen freezing in iOS, and the second modal will not show.

This likely comes from this PR where we refactor the PopoverMenu from a class component to a function component.

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

We need to call selectedItem.onSelected only inside onModalHide, which is exactly the approach taken in the class component before the mentioned PR is merged. This will make sure that the first modal is closed before a new modal is opened.

We need to:

1. Introduce a new state like selectedItemIndex

const [selectedItemIndex, setSelectedItemIndex] = useState(null);

2. Set selectedItemIndex inside here https://github.com/Expensify/App/blob/737862677811acc2b05c68209a56ecd58bee59f3/src/components/PopoverMenu/index.js#LL44C7-L44C7

setSelectedItemIndex(index);

and remove the selectedItem.onSelected();
2. In onModalHide, we check if the selectedItemIndex is not null, if yes we call the onSelected of the menu item and reset the selectedItemIndex

if (selectedItemIndex !== null) {
    props.menuItems[selectedItemIndex].onSelected();
    setSelectedItemIndex(null);
}

What alternative solutions did you explore? (Optional)

NA

[rushatgabhane]

@fedirjh @cead22 this is a major regression that is app breaking 😅

we should prioritise this as hourly

[tienifr]

I’m happy to open a PR immediately if assigned.

[rushatgabhane]

Awesome @tienifr, I've asked @mountiny to give this a look because it's still early morning for @cead22

[rushatgabhane]

Alright, no one has replied yet (it's a holiday)

@tienifr you wanna raise a PR for this issue? It's an app breaking bug that I feel should be fixed as soon as possible.

We could bring it one click away from the finish line.

[rushatgabhane]

The risk for you would be that you may not get paid if your proposal isn't selected

[tienifr]

sure I’ll get a PR up now 💪

[tienifr]

@rushatgabhane The PR is ready for review!

[rushatgabhane]

@AlexanderDmitriev thank you for your proposal. We didn't go with it because it's a workaround.
@tienifr's proposal solves the root cause.

[greg-schroeder]

PR on staging

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

• Fix: Add attachments and Delete workspace buttons are not responsive #19339

If no regressions arise, payment will be issued on 2023-05-29. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue - @tienifr
• Contributor+ that helped on the issue and/or PR - @rushatgabhane

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

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

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

[greg-schroeder]

@puneetlath @rushatgabhane - Can either of you clarify why this was deployed twice (thus creating two automated Melvin payment hold/checklist posts?) I'm sure it's something obvious but I couldn't really tell looking at the PR

I asked for 👀 here just in case

[mountiny]

I believe this is a bug when we CPed the PR to staging, speeding up the deployment process. i saw it happen couple of times but the logic there is quite finicky to try to fix this.

You can take the earlier date as valid here

[greg-schroeder]

Word, thanks Vit!

[greg-schroeder]

Working on finalizing this one today (back from holiday)

[greg-schroeder]

Offers sent to @rushatgabhane @tienifr

Next up is @rushatgabhane's checklist

[rushatgabhane]

@greg-schroeder i see this message for the offer

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Add pay button to money request header #18692

2. 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: https://github.com/Expensify/App/pull/18692/files#r1210078670

3. 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: It's part of checklist. The component was refactored but missed testing all buttons.

4. Determine if we should create a regression test for this bug. - No. Applause caught this bug.

5. 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 - N.A.

[greg-schroeder]

That is ... weird. I will try again. Re-issued.

[greg-schroeder]

Paid. Closing.