Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-11-09] [HOLD #16935] [$500] Web - Clicking the back button brings back the workspace settings panel #28098

Closed
1 of 6 tasks
kbecciv opened this issue Sep 24, 2023 · 45 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@kbecciv
Copy link

kbecciv commented Sep 24, 2023

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. Open a new account on ND
  2. Click on FAB > New workspace
  3. Click on members > invite
  4. Click outside the panel to close it
  5. Click on the browser back button

Expected Result:

The side panel should not open when clicking back, instead app should load the previous chat page. This behavior is not repeatable unless it is a new account.

Actual Result:

App opens up the side panel when clicking back.

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.73.0
Reproducible in staging?:
Reproducible in production?:
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

2023-09-22.18.37.48.mp4
Recording.4743.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Nathan-Mulugeta
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695397220000719

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01ebbc655dc38b6b99
  • Upwork Job ID: 1706019315934507008
  • Last Price Increase: 2023-09-24
  • Automatic offers:
    • fedirjh | Reviewer | 26971957
    • DylanDylann | Contributor | 26971960
    • Nathan-Mulugeta | Reporter | 26971961
@kbecciv kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 24, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

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

@melvin-bot melvin-bot bot changed the title Web - Clicking the back button brings back the workspace settings panel [$500] Web - Clicking the back button brings back the workspace settings panel Sep 24, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 24, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

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

@husnaink93
Copy link

Hi,
I have read your issue on Github and am going to share my proposed solution here.

Proposed Solutions:

Back Button Handling:
To mitigate the issue of the side panel appearing when users press the back button, it is imperative to manage the back button event within our application's source code. This necessitates the customization of the event handling mechanism. For Android, this customization is achievable by modifying the behavior encapsulated within the onBackPressed() method, while iOS would require the management of the UINavigationController.

State Management:
A comprehensive review of our application's state management is advisable. By monitoring the state of the side panel and implementing appropriate code, we can ensure that the panel is promptly closed when users engage the back button. Should our application utilize state management libraries such as Redux (in the case of React Native) or Provider (for Flutter), these resources can facilitate the implementation process.

Conditional Rendering:
The side panel's display can be adjusted through conditional rendering. This entails rendering the panel only under circumstances where its presence is warranted, ensuring that it remains hidden when users navigate via the back button or during specific user interactions.

Testing and Debugging:
Rigorous testing of our application is imperative, particularly in scenarios involving back button interactions. The utilization of debugging tools such as Android Studio or Xcode will aid in pinpointing the root cause of the issue and implementing effective solutions.

Regards
Husnain Khalid

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

📣 @husnaink93! 📣
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:

  1. Make sure you've read and understood the contributing guidelines.
  2. 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.
  3. 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.
  4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
    Screen Shot 2022-11-16 at 4 42 54 PM
    Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

@husnaink93
Copy link

Hi,
I have read your issue on Github and am going to share my proposed solution here.

Proposed Solutions:

Back Button Handling:
To mitigate the issue of the side panel appearing when users press the back button, it is imperative to manage the back button event within our application's source code. This necessitates the customization of the event handling mechanism. For Android, this customization is achievable by modifying the behavior encapsulated within the onBackPressed() method, while iOS would require the management of the UINavigationController.

State Management:
A comprehensive review of our application's state management is advisable. By monitoring the state of the side panel and implementing appropriate code, we can ensure that the panel is promptly closed when users engage the back button. Should our application utilize state management libraries such as Redux (in the case of React Native) or Provider (for Flutter), these resources can facilitate the implementation process.

Conditional Rendering:
The side panel's display can be adjusted through conditional rendering. This entails rendering the panel only under circumstances where its presence is warranted, ensuring that it remains hidden when users navigate via the back button or during specific user interactions.

Testing and Debugging:
Rigorous testing of our application is imperative, particularly in scenarios involving back button interactions. The utilization of debugging tools such as Android Studio or Xcode will aid in pinpointing the root cause of the issue and implementing effective solutions.

Regards
Husnain Khalid

Contributor details
Your Expensify account email: husnaink93@gmail.com
Upwork Profile Link: https://www.upwork.com/fl/~01b377e223ad2fe325

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

@husnaink93
Copy link

Hi,
I have read your issue on Github and am going to share my proposed solution here.

Proposed Solutions:

Back Button Handling:
To mitigate the issue of the side panel appearing when users press the back button, it is imperative to manage the back button event within our application's source code. This necessitates the customization of the event handling mechanism. For Android, this customization is achievable by modifying the behavior encapsulated within the onBackPressed() method, while iOS would require the management of the UINavigationController.

State Management:
A comprehensive review of our application's state management is advisable. By monitoring the state of the side panel and implementing appropriate code, we can ensure that the panel is promptly closed when users engage the back button. Should our application utilize state management libraries such as Redux (in the case of React Native) or Provider (for Flutter), these resources can facilitate the implementation process.

Conditional Rendering:
The side panel's display can be adjusted through conditional rendering. This entails rendering the panel only under circumstances where its presence is warranted, ensuring that it remains hidden when users navigate via the back button or during specific user interactions.

Testing and Debugging:
Rigorous testing of our application is imperative, particularly in scenarios involving back button interactions. The utilization of debugging tools such as Android Studio or Xcode will aid in pinpointing the root cause of the issue and implementing effective solutions.

Regards
Husnain Khalid

Contributor details
Your Expensify account email: <husnaink93@gmail.com@expensify.com>
Upwork Profile Link: https://www.upwork.com/fl/~01b377e223ad2fe325

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

@husnaink93
Copy link

husnaink93 commented Sep 24, 2023 via email

@RichardPickman
Copy link

Hi, I have read your issue on Github and am going to share my proposed solution here. Proposed Solutions: Back Button Handling: To mitigate the issue of the side panel appearing when users press the back button, it is imperative to manage the back button event within our application's source code. This necessitates the customization of the event handling mechanism. For Android, this customization is achievable by modifying the behavior encapsulated within the onBackPressed() method, while iOS would require the management of the UINavigationController. State Management: A comprehensive review of our application's state management is advisable. By monitoring the state of the side panel and implementing appropriate code, we can ensure that the panel is promptly closed when users engage the back button. Should our application utilize state management libraries such as Redux (in the case of React Native) or Provider (for Flutter), these resources can facilitate the implementation process. Conditional Rendering: The side panel's display can be adjusted through conditional rendering. This entails rendering the panel only under circumstances where its presence is warranted, ensuring that it remains hidden when users navigate via the back button or during specific user interactions. Testing and Debugging: Rigorous testing of our application is imperative, particularly in scenarios involving back button interactions. The utilization of debugging tools such as Android Studio or Xcode will aid in pinpointing the root cause of the issue and implementing effective solutions. Regards Husnain Khalid Contributor details Your Expensify account email: husnaink93@gmail.com Upwork Profile Link: https://www.upwork.com/fl/husnainkhalid8

I suggest you to push Contributor details as new message, for bot to be able to parse it correctly :)

@melvin-bot
Copy link

melvin-bot bot commented Sep 24, 2023

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

@HardikChoudhary24
Copy link
Contributor

HardikChoudhary24 commented Sep 24, 2023

Proposal

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

  • Clicking the back button brings back the workspace settings panel.

What is the root cause of that problem?

  • The root cause of this issue lies within the WorkspaceInitialPage Component. The problem stems from the absence of Navigation.goBack(ROUTES.HOME); before Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id));(which is responsible for navigating to workspace/${policyID}/members ) because we must call goBack() to remove the /transition route from history .

action: () => Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id)),

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

  • To address this problem, we can resolve it by simply adding Navigation.goBack(ROUTES.HOME); before Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id));

What alternative solutions did you explore? (Optional)
N/A

Result

Screen.Recording.2023-09-25.at.3.33.16.AM.mp4

@abzokhattab
Copy link
Contributor

I have a question:

shouldn't the /workspace/:id/invite route be the expected behavior on clicking back? because it's actually the last viewed page, not the workspace settings nor the last chat

@joekaufmanexpensify
Copy link
Contributor

@dylanexpensify Going to unassign here as I was the duplicate assignee, and this doesn't need two BZ assignees. LMK if there's anything I can help with though!

@joekaufmanexpensify joekaufmanexpensify removed their assignment Sep 25, 2023
@carlitose
Copy link

Improved Proposal

Subject: Proposed Solutions for Back Button and Side Panel Issue

Body:

Dear Team,

I have thoroughly reviewed the issue reported on Github regarding the unexpected appearance of the side panel when users press the back button. Here, I present a comprehensive approach to address this concern.

1. Back Button Event Handling:

To prevent the side panel from appearing upon pressing the back button, we need to customize the back button event within our application's source code. For Android, we can modify the behavior within the onBackPressed() method. For iOS, we will need to manage the UINavigationController.

2. State Management:

It is crucial to review and manage the state of our application, specifically the state of the side panel. By implementing code that closes the panel when the back button is pressed, we can ensure a smoother user experience. If our application leverages state management libraries like Redux (for React Native) or Provider (for Flutter), these tools can simplify the process.

3. Conditional Rendering:

We can control the side panel's visibility using conditional rendering, rendering the panel only when necessary. This approach ensures that the panel remains hidden when users navigate using the back button or during specific user interactions.

4. Testing and Debugging:

Thorough testing of the application is essential, especially in scenarios involving back button interactions. Debugging tools such as Android Studio or Xcode can help identify the root cause of the issue and facilitate the implementation of effective solutions.

I hope these proposed solutions provide a clear path forward to address the issue. I look forward to your feedback.

Contributor details
Your Expensify account email: carlog.sergi@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01b0d12422bbdbf2d3

@DylanDylann
Copy link
Contributor

DylanDylann commented Sep 26, 2023

Proposal

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

  • Web - Clicking the back button brings back the workspace settings panel

What is the root cause of that problem?

  • Currently, in the list workspace screen, clicking on "New workspace" button will run createWorkspaceAndNavigateToIt function:

    App/src/libs/actions/App.js

    Lines 317 to 334 in cfad43f

    function createWorkspaceAndNavigateToIt(policyOwnerEmail = '', makeMeAdmin = false, policyName = '', transitionFromOldDot = false, shouldNavigateToAdminChat = true) {
    const policyID = Policy.generatePolicyID();
    const adminsChatReportID = Policy.createWorkspace(policyOwnerEmail, makeMeAdmin, policyName, policyID);
    Navigation.isNavigationReady()
    .then(() => {
    if (transitionFromOldDot) {
    // We must call goBack() to remove the /transition route from history
    Navigation.goBack(ROUTES.HOME);
    }
    if (shouldNavigateToAdminChat) {
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(adminsChatReportID));
    }
    Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
    })
    .then(endSignOnTransition);
    }

    Phase 1. In the case of this bug, it will PUSH a new report screen (#admin report) to the stack.
    Phase 2. Then PUSH another RIGHT_MODAL_NAVIGATOR screen to the stack. The stack can be describe like [...RIGHT_MODAL_NAVIGATOR, CENTRAL_PANE_NAVIGATOR, RIGHT_MODAL_NAVIGATOR]
  • So when the user clicks outside panel to close the RIGHT_MODAL_NAVIGATOR screen, it just removes the 2nd RIGHT_MODAL_NAVIGATOR screen and navigates to #admin report. Then if clicking the back button, it will navigate to RIGHT_MODAL_NAVIGATOR

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

  • In Phase 1, we can make sure that the current RIGHT_MODAL_NAVIGATOR screen is REPLACE by report screen, rather than PUSH a new report screen to the stack by using Navigation.dismissModal function:
function createWorkspaceAndNavigateToIt(policyOwnerEmail = '', makeMeAdmin = false, policyName = '', transitionFromOldDot = false, shouldNavigateToAdminChat = true) {
    const policyID = Policy.generatePolicyID();
    const adminsChatReportID = Policy.createWorkspace(policyOwnerEmail, makeMeAdmin, policyName, policyID);
    Navigation.isNavigationReady()
        .then(() => {
            if (transitionFromOldDot) {
                // We must call goBack() to remove the /transition route from history
                Navigation.goBack(ROUTES.HOME);
            }

            if (shouldNavigateToAdminChat) {
                Navigation.dismissModal(adminsChatReportID);
            }
        })
        .then(() => {
            return Navigation.isNavigationReady();
        })
        .then(() => {
            Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
        })
        .then(endSignOnTransition);
}

What alternative solutions did you explore? (Optional)

  • NA

Result

Screencast.from.27-09-2023.02.32.03.webm

@melvin-bot melvin-bot bot added the Overdue label Sep 27, 2023
@dylanexpensify
Copy link
Contributor

reviewing

@DylanDylann
Copy link
Contributor

DylanDylann commented Oct 5, 2023

Currently, after clicking on "New workspace", and then pressing the back button in browser, it not only navigates back to the workspaces list but also replaces the admin report by the concierge report.

Screencast.from.05-10-2023.09.53.20.webm

I think it is a bug. So what is the expected behavior? @danieldoglas please help check when you have a chance. Thanks

@danieldoglas
Copy link
Contributor

I think it should go back to the workspace list, but not change the report that is currently being shown in the background @DylanDylann

@mountiny mountiny changed the title [$500] Web - Clicking the back button brings back the workspace settings panel [HOLD #16935] [$500] Web - Clicking the back button brings back the workspace settings panel Oct 6, 2023
@dylanexpensify
Copy link
Contributor

agree - have we factored this into the solution @DylanDylann? 🙇‍♂️

@DylanDylann
Copy link
Contributor

DylanDylann commented Oct 10, 2023

This issue will be hold based on #28573 (comment) @dylanexpensify

@dylanexpensify
Copy link
Contributor

still on hold

@dylanexpensify
Copy link
Contributor

hold

@DylanDylann
Copy link
Contributor

@dylanexpensify this PR #28573 is just merged

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Nov 2, 2023
@melvin-bot melvin-bot bot changed the title [HOLD #16935] [$500] Web - Clicking the back button brings back the workspace settings panel [HOLD for payment 2023-11-09] [HOLD #16935] [$500] Web - Clicking the back button brings back the workspace settings panel Nov 2, 2023
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Nov 2, 2023
Copy link

melvin-bot bot commented Nov 2, 2023

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

Copy link

melvin-bot bot commented Nov 2, 2023

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

If no regressions arise, payment will be issued on 2023-11-09. 🎊

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
  • Contributor+ that helped on the issue and/or PR

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

Copy link

melvin-bot bot commented Nov 2, 2023

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:

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

@fedirjh
Copy link
Contributor

fedirjh commented Nov 2, 2023

BugZero Checklist:

  • Link to the PR: This bug arises from the navigation refactor.
  • Link to comment: N/A
  • Link to discussion: Nothing that we can add to the checklist.
  • Determine if we should create a regression test for this bug: I think we have a regression test for this flow, maybe we should update it.

Regression Test Proposal

  1. Open a new account on ND on web/desktop
  2. Open report 1
  3. Navigate to report 2
  4. Click on FAB -> New workspace
  5. Verify the workspace is created, and the user is not redirected to any other report.
  6. Click outside the panel to close it
  7. Click on the browser back button
  8. Verify that when the back button is clicked, the side panel should not open. Instead, the app should load the first report.
  • Do we agree 👍 or 👎

@dylanexpensify
Copy link
Contributor

payment upcoming!

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Nov 8, 2023
@danieldoglas
Copy link
Contributor

bump @dylanexpensify

@melvin-bot melvin-bot bot added Overdue and removed Overdue labels Nov 10, 2023
@dylanexpensify
Copy link
Contributor

Payment summary:

Upwork offers sent! Please accept or request in NewDot!

@melvin-bot melvin-bot bot removed the Overdue label Nov 14, 2023
@dylanexpensify
Copy link
Contributor

Payments sent!

@dylanexpensify
Copy link
Contributor

done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests