[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right #49337

IuliiaHerets · 2024-09-17T11:40:27Z

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: v9.0.36-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

Login to staging.new.expensify.com
Navigate to settings
Click on status button at the top of the settings
With the status modal opening at the right, click on save more than once without setting a status

Expected Result:

The modal to edit status is closed.

Actual Result:

Settings is opened on the left and a conversation is opened on the right.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6606512_1726571253654.bandicam_2024-09-17_13-43-32-991.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021836565276008929567
Upwork Job ID: 1836565276008929567
Last Price Increase: 2024-09-19
Automatic offers:

ahmedGaber93 | Reviewer | 104190278
Krishna2323 | Contributor | 104190279

Issue Owner

Current Issue Owner: @strepanier03

melvin-bot · 2024-09-17T11:40:37Z

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

IuliiaHerets · 2024-09-17T11:40:47Z

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

Krishna2323 · 2024-09-17T12:00:24Z

Proposal 

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

Web - Settings is opened on the left with a conversation opened on the right

What is the root cause of that problem?

Interaction manager is used to navigate back and due to this user can click multiple times until the navigation happes.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 113 to 115 in 2190f62

    
           navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => { 
        
               navigateBackToPreviousScreen(); 
        
           });

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

We should call navigateBackToPreviousScreenTask.current?.cancel(); before navigateBackToPreviousScreen(); at both places.

What alternative solutions did you explore? (Optional)

We can return early from updateStatus & clearStatus if navigateBackToPreviousScreenTask.current is true.

Result

BhuvaneshPatil · 2024-09-17T12:07:57Z

Proposal

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

Web - Settings is opened on the left with a conversation opened on the right
Precisely, when we close the modal we should be on settings page, but it takes to report details page when we click it twice consecutively.

What is the root cause of that problem?

When we click multiple times this code block executes multiple times

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 113 to 115 in 2190f62

    
           navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => { 
        
               navigateBackToPreviousScreen(); 
        
           });

So it first takes us to - profile page, next time to report page

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

We should wrap the submit callback in singleExecution.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 167 to 176 in 2190f62

    
           <FormProvider 
        
               formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM} 
        
               style={[styles.flexGrow1, styles.flex1]} 
        
               ref={formRef} 
        
               submitButtonText={translate('statusPage.save')} 
        
               submitButtonStyles={[styles.mh5, styles.flexGrow1]} 
        
               onSubmit={updateStatus} 
        
               validate={validateForm} 
        
               enabledWhenOffline 
        
           >

const {singleExecution} = useSingleExecution()

            <FormProvider
                formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
                style={[styles.flexGrow1, styles.flex1]}
                ref={formRef}
                submitButtonText={translate('statusPage.save')}
                submitButtonStyles={[styles.mh5, styles.flexGrow1]}
                onSubmit={singleExecution(updateStatus)}
                validate={validateForm}
                enabledWhenOffline
            >

We can do similar changes for other callbacks as well.

What alternative solutions did you explore? (Optional)

daledah · 2024-09-18T01:04:59Z

Proposal

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

Settings is opened on the left and a conversation is opened on the right.

What is the root cause of that problem?

When clicking on "Save" button on status page, we call updateStatus which will navigateBackToPreviousScreen(). But the navigateBackToPreviousScreen() is called with runAfterInteractions:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 113 to 115 in 2190f62

    
           navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => { 
        
               navigateBackToPreviousScreen(); 
        
           });

So, the status page modal is not closed immediately, so user can click on it multiple time, which leads to navigateBackToPreviousScreen() are called multiple times as well.

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

We can remove InteractionManager.runAfterInteractions because it's unnecessary and causes a UX issue where the modal doesn't close immediately, unlike other pages in the app. Therefore:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 129 to 131 in 2190f62

    
           navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => { 
        
               navigateBackToPreviousScreen(); 
        
           });

will be:

                navigateBackToPreviousScreen();

Similar with clearStatus function.

What alternative solutions did you explore? (Optional)

melvin-bot · 2024-09-19T00:37:40Z

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

melvin-bot · 2024-09-19T00:37:44Z

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

ahmedGaber93 · 2024-09-19T06:25:25Z

Thanks all for the proposals.

@BhuvaneshPatil add a proposal using useSingleExecution(), but base on here, it was designed to native device only and not support web

@daledah add a proposal to remove runAfterInteractions, but I see it is important for this case and even if we remove it, user still can press two fast clicks

@krishna232's alternative proposal looks good. It will return early if navigateBackToPreviousScreenTask.current is defined, that will confirm it will run once. His main proposal also good but it sends the API request two times

@krishna232's alternative proposal LGTM!

🎀 👀 🎀 C+ reviewed.

melvin-bot · 2024-09-19T06:25:37Z

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

BhuvaneshPatil · 2024-09-19T06:27:31Z

@ahmedGaber93 Thank you for feedback. But using useSingleExecution() does solves issue on web as well.

ahmedGaber93 · 2024-09-19T06:39:15Z

@BhuvaneshPatil useSingleExecution() for web in useSingleExecution/index.ts just call the action directly every time is called, Unlike what useSingleExecution/index.native.ts do

App/src/hooks/useSingleExecution/index.ts

Lines 13 to 15 in 2190f62

    
           (...params: T) => { 
        
               action?.(...params); 
        
           },

App/src/hooks/useSingleExecution/index.native.ts

Lines 17 to 20 in 2190f62

    
           (...params: T) => { 
        
               if (isExecutingRef.current) { 
        
                   return; 
        
               }

Also, I tested it, and it not works with me on web.

20240918233147910.mp4

BhuvaneshPatil · 2024-09-19T06:47:14Z

Okay. Thanks for explanation.

daledah · 2024-09-19T07:24:47Z

@daledah add a #49337 (comment) to remove runAfterInteractions, but I see it is important for this #24620 (comment)

When I tried to reproduce that bug by removing runAfterInteractions, I could not see any problem. Same as comment. Can you reproduce it?

and even if we remove it, user still can press two fast clicks

I think it is our known issue and we already closed a lot of the same issue such as Task - Multiple presses of the "Enter" button create duplicate tasks #47190 because we don't consider it as a bug.
On other pages, there's a very slight delay between pressing the button and the modal closing. However, in this bug, there's a noticeable delay between pressing the button and the modal closing, which creates a poor user experience as it feels like a lag. This happens because we're using runAfterInteractions to fix that bug. When I and others tested removing runAfterInteractions, no issues occurred. @marcochavezf Should we go ahead and remove runAfterInteractions? cc @perunt since you are the author of that PR.

@ahmedGaber93 Thanks for your feedback. Let's see what @marcochavezf thinks about my thought above.

melvin-bot · 2024-09-24T18:18:13Z

@marcochavezf, @strepanier03, @ahmedGaber93 Eep! 4 days overdue now. Issues have feelings too...

ahmedGaber93 · 2024-09-25T07:49:04Z

Not overdue, proposals is reviewed and waiting assignment.

daledah · 2024-09-26T07:16:18Z

@marcochavezf Can you check my comment above?

marcochavezf · 2024-09-30T06:43:34Z

Hi guys, catching up from OOO thanks for the patience here.

I will lean towards @ahmedGaber93's decision. I think the alternative solution proposed by @Krishna2323 is straightforward. The decision to remove runAfterInteractions also seems like a good one, but it would be better to discuss it more broadly with the community in the open-source channel and I would consider it out of scope for the ROI of solving this issue.

Said that I will assign @Krishna2323, even though all perspectives and efforts are appreciated 🙇🏽

melvin-bot · 2024-09-30T06:43:51Z

📣 @ahmedGaber93 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2024-09-30T06:43:55Z

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

Krishna2323 · 2024-09-30T10:27:05Z

@ahmedGaber93, PR ready for review ^

melvin-bot · 2024-10-04T21:01:24Z

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

melvin-bot · 2024-10-04T21:01:28Z

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

fix: Web - Settings is opened on the left with a conversation opened on the right. #49914

If no regressions arise, payment will be issued on 2024-10-11. 🎊

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

@ahmedGaber93 requires payment automatic offer (Reviewer)
@Krishna2323 requires payment automatic offer (Contributor)

melvin-bot · 2024-10-04T21:01:29Z

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:

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

strepanier03 · 2024-10-07T17:29:47Z

Few days away from payment so holding until then.

ahmedGaber93 · 2024-10-11T17:03:22Z

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:

[@ahmedGaber93] The PR that introduced the bug has been identified. Link to the PR: Status clear after #24620
[@ahmedGaber93] 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/24620/files#r1797217641
[@ahmedGaber93] 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: N/A
[@ahmedGaber93] Determine if we should create a regression test for this bug. Yes
[@ahmedGaber93] 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.

Regression Test Proposal

Navigate to settings
Click on status button at the top of the settings
With the status modal opening at the right, click on save more than once without setting a status
Verify modal to edit status is closed and the app stay on the settings page

Do we agree 👍 or 👎

strepanier03 · 2024-10-11T17:35:13Z

I created the reg test GH, paid and closed both contracts, and I'm going to close this out now.

Thanks, everyone!

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 17, 2024

melvin-bot bot assigned strepanier03 Sep 17, 2024

strepanier03 added the External Added to denote the issue can be worked on by a contributor label Sep 19, 2024

melvin-bot bot changed the title ~~Web - Settings is opened on the left with a conversation opened on the right~~ [$250] Web - Settings is opened on the left with a conversation opened on the right Sep 19, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 19, 2024

melvin-bot bot assigned ahmedGaber93 Sep 19, 2024

strepanier03 added this to [#whatsnext] #vip-vsb Sep 19, 2024

melvin-bot bot assigned marcochavezf Sep 19, 2024

melvin-bot bot added the Overdue label Sep 24, 2024

melvin-bot bot removed the Overdue label Sep 25, 2024

melvin-bot bot added the Overdue label Sep 30, 2024

marcochavezf assigned Krishna2323 Sep 30, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 30, 2024

melvin-bot bot removed the Overdue label Sep 30, 2024

Krishna2323 mentioned this issue Sep 30, 2024

fix: Web - Settings is opened on the left with a conversation opened on the right. #49914

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 30, 2024

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 4, 2024

melvin-bot bot changed the title ~~[$250] Web - Settings is opened on the left with a conversation opened on the right~~ [HOLD for payment 2024-10-11] [$250] Web - Settings is opened on the left with a conversation opened on the right Oct 4, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Oct 4, 2024

strepanier03 changed the title ~~[HOLD for payment 2024-10-11] [$250] Web - Settings is opened on the left with a conversation opened on the right~~ [Payment 2024-10-11] [$250] Web - Settings is opened on the left with a conversation opened on the right Oct 7, 2024

ahmedGaber93 mentioned this issue Oct 11, 2024

Status clear after #24620

Merged

58 tasks

strepanier03 added Daily KSv2 and removed Weekly KSv2 labels Oct 11, 2024

strepanier03 closed this as completed Oct 11, 2024

strepanier03 changed the title ~~[Payment 2024-10-11] [$250] Web - Settings is opened on the left with a conversation opened on the right~~ [PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right Oct 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right #49337

[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right #49337

IuliiaHerets commented Sep 17, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 17, 2024

IuliiaHerets commented Sep 17, 2024

Krishna2323 commented Sep 17, 2024 •

edited

Loading

BhuvaneshPatil commented Sep 17, 2024

daledah commented Sep 18, 2024

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

ahmedGaber93 commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

BhuvaneshPatil commented Sep 19, 2024

ahmedGaber93 commented Sep 19, 2024

BhuvaneshPatil commented Sep 19, 2024

daledah commented Sep 19, 2024 •

edited

Loading

melvin-bot bot commented Sep 24, 2024

ahmedGaber93 commented Sep 25, 2024

daledah commented Sep 26, 2024

marcochavezf commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

Krishna2323 commented Sep 30, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

strepanier03 commented Oct 7, 2024

ahmedGaber93 commented Oct 11, 2024

strepanier03 commented Oct 11, 2024

[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right #49337

[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right #49337

Comments

IuliiaHerets commented Sep 17, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 17, 2024

IuliiaHerets commented Sep 17, 2024

Krishna2323 commented Sep 17, 2024 • edited Loading

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)

Result

BhuvaneshPatil commented Sep 17, 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)

daledah commented Sep 18, 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)

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

ahmedGaber93 commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

BhuvaneshPatil commented Sep 19, 2024

ahmedGaber93 commented Sep 19, 2024

BhuvaneshPatil commented Sep 19, 2024

daledah commented Sep 19, 2024 • edited Loading

melvin-bot bot commented Sep 24, 2024

ahmedGaber93 commented Sep 25, 2024

daledah commented Sep 26, 2024

marcochavezf commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

melvin-bot bot commented Sep 30, 2024

Krishna2323 commented Sep 30, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

melvin-bot bot commented Oct 4, 2024

strepanier03 commented Oct 7, 2024

ahmedGaber93 commented Oct 11, 2024

strepanier03 commented Oct 11, 2024

IuliiaHerets commented Sep 17, 2024 •

edited by melvin-bot bot

Loading

Krishna2323 commented Sep 17, 2024 •

edited

Loading

Proposal 

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

daledah commented Sep 19, 2024 •

edited

Loading