[HOLD for payment 2024-10-24] [$250] NetSuite–RHP is not scrollable if click on "Next" without filling ID in Custom Segments/record

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.43-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #49828
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Click on FAB - New workspace
4. Enable "Accounting" in the "More features" page.
5. Navigate to "Accounting"
6. Connect to NetSuite and upgrade the workspace to Control when asked
7. Wait for the sync to finish
8. Navigate to Accounting - Import - Custom Segments/records
9. Click on the "Add custom segments/record
10. Choose segment or record and click on the "Next" button
11. Type in any custom record name and click on the "Next" button
12. Click on the "Next" button without filling the ID

Expected Result:

RHP is scrollable, "Next" button is visible

Actual Result:

RHP is not scrollable, "Next" button is not visible

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6622113_1727874887801.RHP_is_not_scrollable.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842305508364550611
• Upwork Job ID: 1842305508364550611
• Last Price Increase: 2024-10-04
• Automatic offers:
• hoangzinh | Reviewer | 104360308
• allgandalf | Contributor | 104360309

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (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]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@johncschuster 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]

Edited by proposal-police: This proposal was edited at 2024-10-02 16:22:58 UTC.

Proposal


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

NetSuite–RHP is not scrollable if click on "Next" without filling ID in Custom Segments/record

What is the root cause of that problem?

• We are passing false to shouldUseScrollView.
  

  App/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx

  Line 197 in 1764d10

  shouldUseScrollView={false}

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


• We should remove shouldUseScrollView={false}.
• We should also check similar flows and fix those as well, probably we will be looking at the component which uses substeps or ConnectionLayout with shouldUseScrollView={false}

What alternative solutions did you explore? (Optional)

Result

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-03 12:06:00 UTC.

Proposal

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

RHP is not scrollable, "Next" button is not visible

What is the root cause of that problem?

• We already set shouldUseScrollView={true} in:
  

  App/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx

  Line 218 in 1764d10

  shouldUseScrollView={!selectionListForm}

but because of this View styles:

App/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx

Line 206 in 1764d10

<View style={[styles.flexGrow1, styles.mt3]}>

the View is not scrollable.

• A ScrollView must have a bounded height to define the area in which scrolling can happen. flexGrow: 1 alone doesn't necessarily give the ScrollView a starting size or ensure it takes up the entire available space of the parent.

• It only makes the ScrollView grow if there is extra space, but without initial size constraints, the ScrollView may not fill the parent container as expected, leaving its size undefined.

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

• We should change that style to:

            <View style={[styles.flexGrow1, styles.mt3, styles.flex1]}>

• Result:

Screen.Recording.2024-10-03.at.19.04.54.mov

• Note: There is another place we can set shouldUseScrollView={true} is in:

App/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx

Line 197 in 1764d10

shouldUseScrollView={false}

but as we can see, all places use shouldUseScrollView={false} instead. It is because, if we use shouldUseScrollView={true}in ConnectionLayout, the InteractiveStepSubHeader can be scrolled, I think it is unexpected.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[allgandalf]

Proposal

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

RHP is not scrollable if click on "Next" without filling ID in Custom Segments/record

This is only reproducible for Desktop MacOS and web. We are able to scroll on native devices.

What is the root cause of that problem?

We use flexGrow1 this disables the ability of a RHP to scroll if the content doesn't fit the screen.

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

We should replace flexGrow1 with flex1, this solves the issue of scrolling while removing redundant flexGrow1 update the code here:

 <View style={[styles.flex1, styles.mt3]}>

If same bug exists for the lists page, we need to fix that too

What alternative solutions did you explore? (Optional)

[hoangzinh]

Thanks for proposals, everyone. @truph01 and @allgandalf have almost a same approach, but @truph01 hasn't explained why current styling here doesn't work, while @allgandalf did. And @allgandalf's solution looks better than. Therefore I think we can go with @allgandalf's proposal.

Link to proposal #50065 (comment)

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[truph01]

@hoangzinh Apologies for not providing a clearer explanation earlier—I thought it was fairly straightforward why flexGrow: 1 wasn't working, since it is mentioned in ScrollView docs that we should we flex: 1 instead. But I just updated it.

Both proposals are essentially the same, and mine was submitted first. I don’t believe the core reason my solution wasn’t chosen is because of the above. Also, based on contributor guidelines:

Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. ALL NEW PROPOSALS MUST BE DIFFERENT FROM EXISTING PROPOSALS. The difference should be important, meaningful or considerable.

cc @marcochavezf

[hoangzinh]

Yep, it's not only the RCA but also the solution

• In your solution, you add a new style flex1 into existing styles
• @allgandalf's solution, he replaces flexGrow1 by flex1

It's one of the reasons that made me consider proposals. Let's wait for @marcochavezf to make a decision

[allgandalf]

yeah and also @truph01 in such cases for future reference, please don't update the proposal before the internal engineer reviews it, you changed your RCA after the selection of another proposal, which might confuse the internal engineer.

The initial RCA of @truph01 was as follows:

Also, the integration related issues are supposed to be handles by the C+ according to out docs

[truph01]

yeah and also @truph01 in such cases for future reference, please don't update the proposal before the internal engineer reviews it, you changed your RCA after the selection of another proposal, which might confuse the internal engineer.

Apologies for not providing a clearer explanation earlier—I thought it was fairly straightforward why flexGrow: 1 wasn't working, since it is mentioned in ScrollView docs that we should we flex: 1 instead. But I just updated it.

• Ah, I mentioned in the comment above that I updated RCA. I think Internal team can see it.

Yep, it's not only the RCA but also the solution
In your solution, you add a new style flex1 into existing styles
@allgandalf's solution, he replaces flexGrow1 by flex1

• When you set both flexGrow: 1 and flex: 1 on the same component, flex: 1 will override the behavior of flexGrow: 1, that is why I don't mention that we need to remove flexGrow: 1, it is just a refactor and can be done later.

[allgandalf]

bump for assignment @marcochavezf

[johncschuster]

Bump for assignment and for Melv

[marcochavezf]

Thanks for your patience, everyone. I agree with @hoangzinh's decision to assign @allgandalf because of the reasons mentioned, but that doesn't diminish @truph01's contribution. We appreciate your effort, and you can apply what you’ve learned to other bugs (we’re all learning). Onward and upward! 🚀

[allgandalf]

sorry for the delay, weekend kept me occupied, The PR is ready for review @hoangzinh

[allgandalf]

♻️ PR merged 🚀

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

• [Fix]: RHP is not scrollable if click on "Next" without filling ID in Custom Segments/record #50706

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

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

• @hoangzinh requires payment automatic offer (Reviewer)
• @allgandalf requires payment automatic offer (Contributor)

[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:

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

[allgandalf]

regarding ^, I was Contributor for the PR, so C+ Checklist would be from @hoangzinh

[hoangzinh]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR: [#Wave-Control: Add NetSuite]: Settings Configuration in NewDot: Import - Add Custom Records/Lists #44942
• 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/44942/files#r1815208583
• 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
• Determine if we should create a regression test for this bug. 🚫 Nope, I think it's a small UI issue

[allgandalf]

@johncschuster can you please pay this :))

[johncschuster]

Sure thing! I'll take care of it now!

[johncschuster]

Payment Summary:

Contributor: @allgandalf paid $250 via Upwork - PAID! 🎉
Contributor+: @hoangzinh due $250 via NewDot

[johncschuster]

@hoangzinh, I noticed you were just recently added to the list of contributors that can receive payment via NewDot. Based on the date you were added, I expect you should be able to receive payment on NewDot, but if you're not able to receive this one, please let me know and I will issue funds via Upwork instead!

[melvin-bot]

@johncschuster @marcochavezf Be sure to fill out the Contact List!

[hoangzinh]

Yes, @johncschuster. I submitted expense in ND

[garrettmknight]

$250 approved fro @hoangzinh