App icon indicating copy to clipboard operation
App copied to clipboard

[Wave 8] [Ideal Nav] Back navigation issues

Open hayata-suenaga opened this issue 1 year ago • 23 comments

Action Performed:

There are several issues reported that have to do with the back navigation and wrong navigation animations. I listed those issues below.

~~### Issue 1:~~ ~~1. Make sure you're on a mobile phone or on a browser with a smaller width~~ ~~2. Make sure that the test account has at least one workspace~~ ~~3. Click on the Settings icon 🔧 on the bottom tab > Workspaces > Select a workspace~~

~~video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921860615~~

Issue 2:

  1. Make sure you're on a mobile phone or on a browser with a smaller width
  2. Click the Chat button on the bottom tab
  3. Select a chat/report
  4. Go back
  5. Confirm that the Chat List page opens from the right when the page should close to the left (watch the video)
  6. Click the Settings (🔧) button on the bottom tab
  7. Confirm that the Setting page opens from the right when the page should not animate. Only the part above the bottom tab should change without animation.

https://github.com/Expensify/App/assets/98560306/ac15026d-e47f-471a-bc73-9b7645884a53

Issue 3:

  1. Click the Settings button on the bottom tab > Workspaces
  2. Click the back button (left chevron icon)
  3. Confirm that the Chat List page opens from the right when the Workspace List page should close to left to go back to the Settings page

https://github.com/Expensify/App/assets/98560306/cfb693cb-e8cd-4cd5-9704-2c39c3dc1cfd

Issue 4:

  1. Test this on a browser. Shrink the window width.
  2. Visit https://dev.new.expensify.com:8082/settings/preferences
  3. Press the back button on the header (left chevron icon next to Preferences)
  4. The app navigates to the Chats page when it should navigate back to the Settings page.

video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921882304

Other related issues

  • https://github.com/Expensify/App/issues/35669
  • https://github.com/Expensify/App/issues/35689
  • https://github.com/Expensify/App/issues/35697
  • https://github.com/Expensify/App/issues/35703
  • https://github.com/Expensify/App/issues/35756
  • https://github.com/Expensify/App/issues/35729

Workaround:

N/A

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

vides are attached above.

View all open jobs on GitHub

hayata-suenaga avatar Feb 02 '24 03:02 hayata-suenaga

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

melvin-bot[bot] avatar Feb 02 '24 03:02 melvin-bot[bot]

Hi! Working on it!

adamgrzybowski avatar Feb 02 '24 11:02 adamgrzybowski

@adamgrzybowski I added several reported issues that probably related to the back navigation to the original post. Please go through them and let me know if there are issues that should be addressed separately from this issue.

hayata-suenaga avatar Feb 02 '24 17:02 hayata-suenaga

@adamgrzybowski can you also check if this issue can also be fixed by the solution you're thinking about?

hayata-suenaga avatar Feb 02 '24 17:02 hayata-suenaga

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

melvin-bot[bot] avatar Feb 02 '24 18:02 melvin-bot[bot]

Heads up @adamgrzybowski @hayata-suenaga ^^^

CortneyOfstad avatar Feb 02 '24 18:02 CortneyOfstad

Closed the issue linked above 🙇

hayata-suenaga avatar Feb 02 '24 19:02 hayata-suenaga

@adamgrzybowski also another back navigation related issue reported here

hayata-suenaga avatar Feb 02 '24 19:02 hayata-suenaga

Proposal

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

Pressing the back button on the "Keyboard Shortcuts" page leads to a blank screen

What is the root cause of that problem?

OnBackButtonPress is missing in HeaderWithBackButton component in all the related pages

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

Pass the prop onBackButtonPress={() => Navigation.goBack()} in HeaderWithBackButtonin all the pages pertaining this bug.

What alternative solutions did you explore? (Optional)

N/A

allgandalf avatar Feb 02 '24 19:02 allgandalf

hey @CortneyOfstad , this issue would be eventually opened to external contributors right :)

allgandalf avatar Feb 02 '24 19:02 allgandalf

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

melvin-bot[bot] avatar Feb 02 '24 23:02 melvin-bot[bot]

@GandalfGwaihir this issue will be handled by an engineer from an expert agency. However, thank you for your proposal.

hayata-suenaga avatar Feb 02 '24 23:02 hayata-suenaga

This is another instance of back navigation issue: https://github.com/Expensify/App/issues/35736#issuecomment-1924898853

hayata-suenaga avatar Feb 02 '24 23:02 hayata-suenaga

found one more similar issue: https://github.com/Expensify/App/issues/35689

allgandalf avatar Feb 03 '24 12:02 allgandalf

not 100% sure but maybe this issue https://github.com/Expensify/App/issues/35756 is also in someway related to this root issue

allgandalf avatar Feb 03 '24 17:02 allgandalf

Related: https://github.com/Expensify/App/issues/35669

johncschuster avatar Feb 03 '24 21:02 johncschuster

If you find any back navigation related issues, please add your issue to the Other related issues section in the original post of this issue. 🙇

Screenshot 2024-02-03 at 9 17 48 PM

hayata-suenaga avatar Feb 04 '24 05:02 hayata-suenaga

@hayata-suenaga when there are that many similar issues, what is the next step here? Have not come across a similar scenario via BugZero before, so just wanted to confirm next steps. Thanks!

CortneyOfstad avatar Feb 05 '24 19:02 CortneyOfstad

@CortneyOfstad I apologize for the confusion.

The fix @adamgrzybowski is working on will probably solve most of these issues. Once C+ is assigned to the PR, we can ask them to test each regression case reported.

Let me know if you have any questions.

hayata-suenaga avatar Feb 05 '24 23:02 hayata-suenaga

Hey @hayata-suenaga I'm continuing to search for the best solution.

I went through the issues in the description of the PR and it looks like the first one:

Issue 1: Make sure you're on a mobile phone or on a browser with a smaller width Make sure that the test account has at least one workspace Click on the Settings icon 🔧 on the bottom tab > Workspaces > Select a workspace video -> https://github.com/Expensify/App/pull/33280#issuecomment-1921860615

Is not actually related to the go back. It's related to this issue

I can't reproduce the issue 2 and 3.

Still can reproduce the issue 4.

I will check out the rest.

adamgrzybowski avatar Feb 06 '24 12:02 adamgrzybowski

Adam, thank you for checking through the issues. I removed (i.e. strikethrough-ed the case 1) and moved it to this issue.

hayata-suenaga avatar Feb 06 '24 18:02 hayata-suenaga

Looks like this is also related: https://github.com/Expensify/App/issues/35969

allgandalf avatar Feb 06 '24 22:02 allgandalf

This one too: https://github.com/Expensify/App/issues/35965

allgandalf avatar Feb 06 '24 22:02 allgandalf

@hayata-suenaga another ones: #36040, #36035

situchan avatar Feb 07 '24 18:02 situchan

Track this https://github.com/Expensify/App/issues/36054

muas19 avatar Feb 07 '24 18:02 muas19

@muas19 thank you for letting us know about the issue, but that issue is a separate one from this one

hayata-suenaga avatar Feb 07 '24 19:02 hayata-suenaga

@hayata-suenaga on issue 2

Confirm that the Setting page opens from the right when the page should not animate. Only the part above the bottom tab should change without animation.

this is a bit confusing, Settings page should open from the right with animation or just open without any animation?

https://github.com/Expensify/App/assets/75031127/dfe61b17-2dc5-4602-8f0e-d0478c8bf8ff

getusha avatar Feb 08 '24 08:02 getusha

It is almost impossible to go back from workspace settings without reloading

Is this related @hayata-suenaga @adamgrzybowski

https://github.com/Expensify/App/assets/75031127/0be64152-1836-401b-9e82-1cda6a05fe65

getusha avatar Feb 08 '24 09:02 getusha

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

melvin-bot[bot] avatar Feb 08 '24 12:02 melvin-bot[bot]

this is a bit confusing, Settings page should open from the right with animation or just open without any animation?

The behavior you recorded is as expected. No animation for switching between bottom tabs.

It is almost impossible to go back from workspace settings without reloading

Not sure why impossible. Do you have any specific case? The back button may not be exactly right in that case though. There is a ticket for that https://github.com/Expensify/App/issues/35610

https://github.com/Expensify/App/assets/67908363/32602d28-9d05-4f33-94df-fcd496e7f233

adamgrzybowski avatar Feb 08 '24 12:02 adamgrzybowski