Fix error props being incorrectly accessed in components #23394

Nikhil-Vats · 2023-07-22T11:33:01Z

Details

errors props were being incorrectly accessed in IOUCurrencySelection, ReportScreen, and MoneyRequestAmountPage. This fixes that by getting the errors from the report object using a new function to keep code DRY.

Fixed Issues

$ #23373
PROPOSAL: #23373 (comment)

Tests

Open the app in two tabs.
On first tab, open settings and click on force offline.
On second tab, go to search and enter a long email like a@_.cd or 2f34d2be9bce77da59b2e91f1a2bd25e0b85f2142f34d2be9bce77da59b2e91f1a2bd25e0b85f2142f34d2be9bce77da59b2e91f1a2bd25e0b85f214@gmail.com.
Now, send some messages in the chat and open emoji picker from composer.
Go to first tab and toggle force offline to come back online.
Verify that both composer and emoji picker automatically hide in the second tab and chat shows the error that email address is invalid.

Since we can't open multiple tabs in apps (android/ios/desktop), we can test the same by switching off wifi in our device in step 2 and then switching on wifi in step 5 again.

Verify that no errors appear in the JS console

Offline tests

Same as above.

QA Steps

Same as above.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

23394_web1.mov

23394_web2.mov

Mobile Web - Chrome

23394_mchrome1.mov

23394_mchrome2.mov

Mobile Web - Safari

23394_safari1.mov

23394_safari2.mov

23394_safari3.mov

Desktop

23394_desktop1.mov

iOS

23394_ios1.mov

23394_ios2.mov

Android

23394_android1.mov

23394_android2.mov

melvin-bot · 2023-07-22T11:33:05Z

@mollfpr Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

Nikhil-Vats · 2023-07-22T12:00:25Z

Hey @mollfpr @marcaaron, here's the behaviour of emoji picker after applying the fix. Follow the test steps in PR description to verify yourself. It is working as expected.

Before fix -

before_fix.mov

After fix -

after_fix.mov

Here's what happens for the other two pages -

For the other two pages (IOUCurrencySelection and MoneyRequestAmountPage), when there is an error the modal is closed but we are also redirected to the concierge chat because of this PR that was merged two weeks ago and is now on production -

This is the piece of code that is responsible and was added in that PR (see line 183) -

App/src/pages/home/ReportScreen.js

Lines 171 to 187 in cd851d0

    
           // navigate to concierge when the room removed from another device (e.g. user leaving a room) 
        
           // the report will not really null when removed, it will have defaultProps properties and values 
        
           if ( 
        
               prevOnyxReportID && 
        
               prevOnyxReportID === routeReportID && 
        
               !onyxReportID && 
        
               // non-optimistic case 
        
               (_.isEqual(this.props.report, defaultProps.report) || 
        
                   // optimistic case 
        
                   (prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN && this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED)) 
        
           ) { 
        
               Navigation.goBack(); 
        
               Report.navigateToConciergeChat(); 
        
               // isReportRemoved will prevent <FullPageNotFoundView> showing when navigating 
        
               this.setState({isReportRemoved: true}); 
        
               return; 
        
           }

The behaviour of the app (prod/staging/local) right now -

Screen.Recording.2023-07-24.at.1.34.12.AM.mov

When I undo the changes in that PR and apply the fix in this PR -

Screen.Recording.2023-07-24.at.1.34.47.AM.mov

@marcaaron I just wanted to confirm the expected behaviour here before I proceed. If there is an error and the request money/split bill/assign task modal is opened, is it okay that we are redirected to concierge chat?

Or should we stay on the same report because as you can see in the video below the chat still exists even after we are redirected to concierge.

Screen.Recording.2023-07-24.at.1.57.00.AM.mov

mollfpr · 2023-07-24T09:55:36Z

I just wanted to confirm the expected behaviour here before I proceed. If there is an error and the request money/split bill/assign task modal is opened, is it okay that we are redirected to concierge chat?

I'm okay with that.

Nikhil-Vats · 2023-07-24T20:26:43Z

Hey @marcaaron, what do you think of the behaviour mentioned above in case of IOUCurrencySelection and MoneyRequestAmountPage?

marcaaron · 2023-07-25T19:59:01Z

If there is an error and the request money/split bill/assign task modal is opened, is it okay that we are redirected to concierge chat?

That sounds like a bug to me caused by the PR you mentioned. I would expect to see some error on the page itself and not to get redirected.

Nikhil-Vats · 2023-07-27T21:19:15Z

Apologies, I was sick these last 2 days so couldn't dedicate much time to this. I am better now so will update the PR tomorrow morning.

I will try to find the solution for the issue caused by the referenced PR so that we stay on the same page after an error.

Nikhil-Vats · 2023-07-30T18:06:41Z

Updated the branch to resolve merge conflicts.

I also noticed that the regression from the other PR was identified and there is a new PR to fix it, I added a comment there since they are also trying to fix an issue with the same root cause -
User is navigated to concierge when there is an error in the report.

@marcaaron what should be done now? Should we put this PR on hold until that new PR is merged or something else?

marcaaron · 2023-07-31T21:31:01Z

Mind directing that question to @mollfpr? I'll jump in here when this is looking ready to merge. Thanks!

Nikhil-Vats · 2023-07-31T22:09:52Z

@mollfpr what do you think? I think we have two options -

Wait for the regression to be fixed but it will take a long time since from what I can read on the new PR it will also require a Backend change.
The PR that introduced the regression (which is stopping us from testing) is pretty small. Just a few lines in 1 file. I can undo that within this PR or in a new one and then we will be unblocked for this PR. The reverted PR can be readded with the regression PR they have opened.

mollfpr · 2023-08-01T15:31:01Z

@Nikhil-Vats We can do option two since they will add it back with the fix for the regression. But let's notify them about this and wait for their feedback, then apply the necessary change here.

Nikhil-Vats · 2023-08-01T15:52:18Z

@mollfpr They provided confirmation here. Should I revert the changes in this PR or a separate one?

mollfpr · 2023-08-01T16:07:40Z

@Nikhil-Vats Great! Let's do it here.

Nikhil-Vats · 2023-08-01T21:03:21Z

src/pages/iou/IOUCurrencySelection.js

@@ -71,15 +60,6 @@ function IOUCurrencySelection(props) {
    const iouType = lodashGet(props.route, 'params.iouType', CONST.IOU.MONEY_REQUEST_TYPE.REQUEST);
    const reportID = lodashGet(props.route, 'params.reportID', '');

-    const shouldDismissModal = ReportUtils.shouldHideComposer(props.report, props.errors);


@mollfpr I removed this from IOUCurrencySelection page because we don't need to add it here. We check this in MoneyRequestAmountPage page and they both belong to the same stack of navigators so it works, I tested.

I even tried by pressing browser forward button but it did not let me go to that screen.

I did see your comment here and wondered why it was not working before. Anyway, please let me know if it doesn't work for you.

Nikhil-Vats · 2023-08-01T22:10:23Z

@mollfpr PR is ready for review.

Nikhil-Vats · 2023-08-01T22:12:46Z

src/pages/home/report/ReportActionsList.js

-    const hideComposer = ReportUtils.shouldHideComposer(props.report, errors);
-    const shouldOmitBottomSpace = hideComposer || isArchivedRoom;
+    // If composer is hidden, omit the bottom space.
+    const shouldOmitBottomSpace = ReportUtils.shouldHideComposer(props.report);


Archived report is already checked in shouldHideComposer so removed the duplicate condition.

Nikhil-Vats · 2023-08-01T22:15:35Z

src/pages/home/ReportScreen.js

@@ -158,36 +156,17 @@ class ReportScreen extends React.Component {

    componentDidUpdate(prevProps) {
        // If composer should be hidden, hide emoji picker as well
-        if (ReportUtils.shouldHideComposer(this.props.report, this.props.errors)) {


except this line and line 389 where errors are no longer passed to ReportFooter, the rest code in this file is reverting the PR that was blocking us - https://github.com/Expensify/App/pull/22787/files

mollfpr · 2023-08-02T03:46:04Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

23394.Web.mov

Mobile Web - Chrome

Screen_Recording_20230809_213949_Chrome.mp4

Mobile Web - Safari

23394.mWeb.Safari.mp4

Desktop

23394.Desktop.mov

iOS

23394.iOS.mp4

Android

Screen_Recording_20230809_215256_New.Expensify.mp4

mollfpr · 2023-08-02T11:42:51Z

@Nikhil-Vats The behavior on the IOU pages is different; sometimes, the RHN is closed and shows the reported error, and sometimes keep, the RHN and showing the not found page.

Screen.Recording.2023-08-02.at.18.33.12.mov

Screen.Recording.2023-08-02.at.18.34.48.mov

Nikhil-Vats · 2023-08-02T11:48:49Z

@mollfpr This was reported here in the regression we were discussing about. It is a backend bug where sometimes the report is cleared from onyx before the error is sent by backend due to which we are redirected to not found page. I believe they will handle it in the new PR as they already reported it. I will paste your video there to make sure they test this as I never faced this.

mollfpr · 2023-08-02T14:29:31Z

@Nikhil-Vats I constantly got the not found page on the Desktop while testing the IOU flow. I'm afraid the QA team will bump into this issue, and the QA will fail.

Screen.Recording.2023-08-02.at.21.23.37.mov

Nikhil-Vats · 2023-08-02T14:34:12Z

What should be done here then @mollfpr? It is a backend issue and they are still discussing the approach over there so it will take some time for it to be fixed.

mollfpr · 2023-08-02T15:05:36Z

Ideally, we should get the same expected result on all platforms. So if the attached PR needed to be deployed first, we should wait.

Nikhil-Vats · 2023-08-02T15:46:59Z

Sure @mollfpr, should we put a comment on the main issue and put it on hold then?

I commented on the other issue asking their confirmation on if they are going to fix this redirect to 404 page error in their issue.

mollfpr · 2023-08-03T14:23:35Z

@Nikhil-Vats I agree with Marc's explanation here. We can skip the test case on the IOU flow for the platform constantly showing the issue.

What do you think?

Nikhil-Vats · 2023-08-03T18:18:32Z

@mollfpr Sure, I will open a separate issue for that.

Let me know if it happens constantly on any other platform for you as well so I can put that in the test steps.

mollfpr · 2023-08-04T13:10:47Z

@Nikhil-Vats Could you resolve the conflicts? I'll test all the platforms and let you know. Thanks!

Nikhil-Vats · 2023-08-04T13:23:11Z

Done @mollfpr

Nikhil-Vats · 2023-08-08T08:13:09Z

There are conflicts again, I'll resolve them today.

Nikhil-Vats · 2023-08-08T13:09:08Z

Hey @mollfpr, conflicts resolved. You can retest.

mollfpr · 2023-08-08T13:53:14Z

Sorry for the delay, I'll give you an update shortly regarding the test.

mollfpr · 2023-08-08T14:20:50Z

@Nikhil-Vats The test on IOU flow only works for Web and mWeb. On Desktop, iOS, and Android, it redirects to the not found page after online.

We can skip the test on IOU flow and just put the test case for the emoji picker to be closed after being back online.

Nikhil-Vats · 2023-08-08T14:34:18Z

@mollfpr Okay, I will update the PR description to reflect that and create a separate issue for the IOU flow because for that report is also removed from LHN when user is redirected to 404 page.

Nikhil-Vats · 2023-08-08T15:11:54Z

PR description updated.

Nikhil-Vats · 2023-08-09T14:43:08Z

@mollfpr Please let me know if there's anything else left for me to do.

mollfpr · 2023-08-09T14:46:23Z

@Nikhil-Vats Looks good to me. I need to finish the test for Android.

mollfpr

LGTM and tests well 👍

OSBotify · 2023-08-09T21:43:15Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2023-08-10T20:31:25Z

🚀 Deployed to staging by https://github.com/marcaaron in version: 1.3.53-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-14T19:39:17Z

🚀 Deployed to production by https://github.com/yuwenmemon in version: 1.3.53-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

Fix error props being incorrectly accessed in components

2f34d2b

Nikhil-Vats requested a review from a team as a code owner July 22, 2023 11:33

melvin-bot bot removed the request for review from a team July 22, 2023 11:33

melvin-bot bot requested a review from mollfpr July 22, 2023 11:33

dukenv0307 mentioned this pull request Jul 25, 2023

[HOLD for payment 2023-08-21] [$1000] errors props are incorrectly accessed in IOUCurrencySelection #23373

Closed

Merge branch 'main' into 23373_fix_error_props

2605c41

Nikhil-Vats mentioned this pull request Jul 30, 2023

Fix leaving room a room when the split bill with multiple participants #23051

Closed

58 tasks

koko57 mentioned this pull request Aug 1, 2023

Refactor/23149 money request page #23979

Merged

56 tasks

Nikhil-Vats added 3 commits August 2, 2023 00:35

Merge branch 'main' into 23373_fix_error_props

5f8cc76

Revert PR 22787 and refactor new usages of shouldHideComposer

dc343dd

fix unnecessary check in IOUCurrencySelection page

8bead86

Nikhil-Vats commented Aug 1, 2023

View reviewed changes

Merge branch 'main' into 23373_fix_error_props

9902cca

Merge branch 'main' into 23373_fix_error_props

839b936

Merge branch 'main' into 23373_fix_error_props

65520c8

mollfpr approved these changes Aug 9, 2023

View reviewed changes

melvin-bot bot requested a review from marcaaron August 9, 2023 14:58

marcaaron assigned Nikhil-Vats Aug 9, 2023

marcaaron approved these changes Aug 9, 2023

View reviewed changes

marcaaron merged commit d1c4970 into Expensify:main Aug 9, 2023
13 checks passed

tienifr mentioned this pull request Aug 10, 2023

Fix: Two reports are opened when two users first open the report simultaneously #24295

Closed

57 tasks

OSBotify mentioned this pull request Aug 10, 2023

Deploy Checklist: New Expensify 2023-08-10 #24388

Closed

45 tasks

b4s36t4 mentioned this pull request Aug 22, 2023

[HOLD for payment 2023-09-27] [$1000] "Hm... it's not here" message displays for a moment when viewing deleted money request that has sub-thread #25698

Closed

6 tasks

Fix error props being incorrectly accessed in components #23394

Fix error props being incorrectly accessed in components #23394

Conversation

Nikhil-Vats commented Jul 22, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Jul 22, 2023

Nikhil-Vats commented Jul 22, 2023 • edited Loading

mollfpr commented Jul 24, 2023

Nikhil-Vats commented Jul 24, 2023

marcaaron commented Jul 25, 2023

Nikhil-Vats commented Jul 27, 2023

Nikhil-Vats commented Jul 30, 2023

marcaaron commented Jul 31, 2023

Nikhil-Vats commented Jul 31, 2023 • edited Loading

mollfpr commented Aug 1, 2023

Nikhil-Vats commented Aug 1, 2023

mollfpr commented Aug 1, 2023

Nikhil-Vats Aug 1, 2023

Choose a reason for hiding this comment

Nikhil-Vats commented Aug 1, 2023

Nikhil-Vats Aug 1, 2023

Choose a reason for hiding this comment

Nikhil-Vats Aug 1, 2023

Choose a reason for hiding this comment

mollfpr commented Aug 2, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

mollfpr commented Aug 2, 2023

Nikhil-Vats commented Aug 2, 2023

mollfpr commented Aug 2, 2023

Nikhil-Vats commented Aug 2, 2023

mollfpr commented Aug 2, 2023

Nikhil-Vats commented Aug 2, 2023

mollfpr commented Aug 3, 2023

Nikhil-Vats commented Aug 3, 2023 • edited Loading

mollfpr commented Aug 4, 2023

Nikhil-Vats commented Aug 4, 2023

Nikhil-Vats commented Aug 8, 2023

Nikhil-Vats commented Aug 8, 2023

mollfpr commented Aug 8, 2023

mollfpr commented Aug 8, 2023

Nikhil-Vats commented Aug 8, 2023 • edited Loading

Nikhil-Vats commented Aug 8, 2023

Nikhil-Vats commented Aug 9, 2023

mollfpr commented Aug 9, 2023

mollfpr left a comment

Choose a reason for hiding this comment

OSBotify commented Aug 9, 2023

OSBotify commented Aug 10, 2023

OSBotify commented Aug 14, 2023

Nikhil-Vats commented Jul 22, 2023 •

edited

Loading

Nikhil-Vats commented Jul 22, 2023 •

edited

Loading

Nikhil-Vats commented Jul 31, 2023 •

edited

Loading

mollfpr commented Aug 2, 2023 •

edited

Loading

Nikhil-Vats commented Aug 3, 2023 •

edited

Loading

Nikhil-Vats commented Aug 8, 2023 •

edited

Loading