[HOLD for payment 2023-06-01] [$1000] Invalid prop type console errors show in money request page

[Julesssss]

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:

• Login account A and invite B to any workspace
• Login B on another device and request money on A's workspace
• On A, open B's money request chat

Expected Result: No console errors show
Actual Result: Console errors show
Platforms: All
Version Number: v1.3.16-2
Issue reported by: @aimane-chnaif
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684401039074339

Screen.Recording.2023-05-18.at.10.12.09.AM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c1b26430e873c12c
• Upwork Job ID: 1659129457874247680
• Last Price Increase: 2023-05-18

[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

[melvin-bot]

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

[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 - @parasharrajat (External)

[melvin-bot]

Current assignee @Julesssss is eligible for the External assigner, not assigning anyone new.

[dhairyasenjaliya]

Proposal

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

-Invalid prop type console errors show on the money request page

What is the root cause of that problem?

• Warning 1 - The root cause is we are using the wrong type for PropTypes of string nvp_lastPaymentMethod

• Warning 2, 3 - Here the root cause is we are not setting ref properly which became invalid to throw a warning inside <ButtonWithDropdownMenu.js> of <Button>

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

• We need to replace as below PropTypes in order to fix the console error - 1
• We need to set ref properly as below to fix rest console errors

// SettlementButton.js (warning -1)

-nvp_lastPaymentMethod: PropTypes.objectOf(PropTypes.string), //

+nvp_lastPaymentMethod: PropTypes.arrayOf(PropTypes.string), 


// ButtonWithDropdownMenu.js  (warning - 2 , 3)

 <Button
-  ref={caretButton}
+  ref={(el) => (caretButton.current = el)}

without fix

with fix

cc @Julesssss

[parasharrajat]

Checking...

[parasharrajat]

@dhairyasenjaliya There are 3 warnings.

[dhairyasenjaliya]

hm weird @parasharrajat I can replicate this one mind sharing other warning will check that as well opps cheking all 3 warning now

[dhairyasenjaliya]

@parasharrajat I think I found the 2nd culprit we are not setting ref properly that became invalid to throw a warning inside <ButtonWithDropdownMenu.js> of <Button>

// ButtonWithDropdownMenu.js
 <Button
-  ref={caretButton}
+  ref={(el) => (caretButton.current = el)}
   success
                        

[parasharrajat]

Please update your proposal and let me know when it is ready to review.

[dhairyasenjaliya]

@parasharrajat here's the updated proposal with screenshot #19181 (comment)

[bernhardoj]

Proposal

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

We have some console errors when we open an expense report with Pay with Expensify button.

What is the root cause of that problem?

The first one is the wrong type of nvp_lastPaymentMethod. The error says that it expects an object, but received an array. The expected type (object) is already correct, so we shouldn't change it to array. I guess it's a bad merge that makes the current nvp_lastPaymentMethod is an array. Re-login seems to solve the problem.

The second one is the wrong type of ref passed to withNavigationFallback, withNavigationFocus, and Button. It expects either function (which is a legacy way to get a ref) or an object with current property that expects the current contains either a React.Component instance or a function.

App/src/components/Button/index.js

Lines 113 to 114 in b517382

	/** A ref to forward the button */
	forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.oneOfType([PropTypes.instanceOf(React.Component), PropTypes.func])})]),

However, the current property types fails the real type of the ref.

I tried to find the type of the component by log caretButton.current?.constructor.name and I got HTMLDivElement (we can use Element) in web and ReactNativeFiberHostComponent (can't access this one) in native.

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

Re-login for the first issue.

For the second one, most of the solution I found recommend to change it to PropTypes.instanceOf(Element) we can change the type of the current property to object instead, so it will work in both web and native.
PropTypes.shape({current: PropTypes.object}).

we need to do the changes in these 3 components withNavigationFallback, withNavigationFocus, and Button

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[parasharrajat]

I loved the attention to detail in @bernhardoj's proposal. It seems that type for nvp_lastPaymentMethod is correctly defined. As they mentioned relogin might solve it.

I agree we should change the type of ref on Button. But can this be PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})])?

otherwise we can figure this out in the PR.

@bernhardoj 's proposal looks good to me. This is not a major issue but +1 to @bernhardoj to correctly assess the problem.

cc: @Julesssss

🎀 👀 🎀 C+ reviewed

[Julesssss]

Thanks Rajat, I agree with your review. Let's figure it out in the PR.

[melvin-bot]

📣 @bernhardoj You have been assigned to this job by @Julesssss!
Please apply to this job in Upwork 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 📖

[greg-schroeder]

PR awaiting @parasharrajat's final review

[parasharrajat]

Review Done.

[melvin-bot]

🎯 ⚡️ Woah @parasharrajat / @bernhardoj, great job pushing this forwards! ⚡️

The pull request got merged within 2 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @bernhardoj got assigned: 2023-05-19 09:36:32 Z
• when the PR got merged: 2023-05-22 14:00:02 UTC

On to the next one 🚀

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

• Update ref prop types #19292

If no regressions arise, payment will be issued on 2023-06-01. 🎊

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 - @aimane-chnaif
• Contributor that fixed the issue - @bernhardoj
• Contributor+ that helped on the issue and/or PR - @parasharrajat

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:

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

[greg-schroeder]

Offers sent to @aimane-chnaif, @bernhardoj, @parasharrajat in preparation for tomorrow's payment date, 6/1

Bonus: YES

[greg-schroeder]

Looks like we don't have any regressions - next up is @parasharrajat on the checklist!

(also I'll get you paid as soon as you except the job offer in UW 👍)

[parasharrajat]

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: NA, it's a console error only.

[@parasharrajat] 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: NA

[@parasharrajat] 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: NA

[@parasharrajat] Determine if we should create a regression test for this bug. NA

[@parasharrajat] 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. None

[greg-schroeder]

Okay then. Please accept the offer whenever you're able Rajat and I'll complete the payment - everyone else is paid out and checklist done, no regression test.

[parasharrajat]

@greg-schroeder Accepted

[greg-schroeder]

paid