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

IuliiaHerets commented 2 weeks ago

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: 9.0.43-1 Reproducible in staging?: Y Reproducible in production?: Y Issue was found when executing this PR: https://github.com/Expensify/App/pull/49828 Email or phone of affected tester (no customers): ponikarchuks+321024@gmail.com Issue reported by: Applause Internal Team

Action Performed:

Go to https://staging.new.expensify.com/
Log in with a new Gmail account
Click on FAB - New workspace
Enable "Accounting" in the "More features" page.
Navigate to "Accounting"
Connect to NetSuite and upgrade the workspace to Control when asked
Wait for the sync to finish
Navigate to Accounting - Import - Custom Segments/records
Click on the "Add custom segments/record
Choose segment or record and click on the "Next" button
Type in any custom record name and click on the "Next" button
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
[x] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/133c519a-d760-4562-833a-ee7764c22856

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

melvin-bot[bot] commented 2 weeks ago

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 commented 2 weeks ago

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

IuliiaHerets commented 2 weeks ago

@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 commented 2 weeks ago

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. https://github.com/Expensify/App/blob/1764d104e4f1c3f0440a5425d5fe0f540584866b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx#L197

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 commented 1 week ago

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: https://github.com/Expensify/App/blob/1764d104e4f1c3f0440a5425d5fe0f540584866b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx#L218

but because of this View styles:

https://github.com/Expensify/App/blob/1764d104e4f1c3f0440a5425d5fe0f540584866b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx#L206

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:

https://github.com/user-attachments/assets/25254b1d-f95f-438c-94c5-7bb26e465e33

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

https://github.com/Expensify/App/blob/1764d104e4f1c3f0440a5425d5fe0f540584866b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx#L197

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[bot] commented 1 week ago

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

melvin-bot[bot] commented 1 week ago

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

allgandalf commented 1 week ago

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 commented 1 week ago

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 https://github.com/Expensify/App/issues/50065#issuecomment-2395011270

🎀👀🎀 C+ reviewed

melvin-bot[bot] commented 1 week ago

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

truph01 commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

bump for assignment @marcochavezf

johncschuster commented 1 week ago

Bump for assignment and for Melv

marcochavezf commented 6 days ago

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! 🚀

melvin-bot[bot] commented 6 days ago

📣 @hoangzinh 🎉 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[bot] commented 6 days ago

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

allgandalf commented 5 days ago

PR should be ready over the weekend 👍

allgandalf commented 2 days ago

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

allgandalf commented 2 days ago

♻️ PR merged 🚀

Expensify / App