[HOLD for payment 2023-09-08] [$1000] Split money- participants detail hidden after clicking on show more button

[m-natarajan]

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:

1 Split money with multiple users
2 On the second page of split money, click on show more.
3 Verify that participants are hidden which can be scrolled.
Split money
4 Click on the split money box > this will open the split money details.
5 Click on show more

Expected Result:

I was expecting that the entire detail page would be scrollable when I clicked on the show more button. Reason being, participants' detail & amount are the most important components. But things like date and merchant are fixed rather than participant details.

Actual Result:

Gives the illusion that participants are hidden or deleted. No scrollbar. Sometimes, it's hard to scroll.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.53-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

SPLIT.01.mp4

Recording.342.mp4

Expensify/Expensify Issue URL:
Issue reported by: @avi-shek-jha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691097988530299

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eb2b30669469492f
• Upwork Job ID: 1692405727765413888
• Last Price Increase: 2023-08-25
• Automatic offers:
• DanutGavrus | Contributor | 26385876
• avi-shek-jha | Reporter | 26385878

[melvin-bot]

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

[jeet-dhandha]

It's intentional 👍, not a mistake. We added inline scrolling to address a problem: when more than 8 people are chosen, the main description gets hidden, and users have to scroll down to see it.

[jeet-dhandha]

@jliexpensify - This might be a feature request but one way to solve this is to show 3 person and for all person we can add a "View All" / "View All Participants" / "All Participants" - button, which will open up a participant list including all the selected members. What are your thoughts on this one ?

[jliexpensify]

Hmm yeah, I agree - it's a little annoying, but I don't see this as a huge deal.

for all person we can add a "View All" / "View All Participants" / "All Participants" - button, which will open up a participant list including all the selected members

That's an interesting idea - @jeet-dhandha could you propose that in the Open Source channel? For now, I'll close off this GH and if we decide to move forward, a new one will be opened.

[DanutGavrus]

Hi, @jeet-dhandha and @jliexpensify! On smaller devices, we have a problem, participant details are not appearing at all, so you don't have the option to scroll:

smaller_devices.mp4

The bug was reported here on Slack, but the reporter stated to use web zoom as he didn't have a small device. We are using ScrollViews for our pages, thus content on smaller devices becomes scrollable(Share code page from Setting is an example), but the ScrollView is missing from the Request money page. We also have: "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." in the contributing guides.

As stated by @jeet-dhandha, it is intentional to scroll the participants list, and I think we can achieve that by wrapping the Money request page in a ScrollView, and then, setting a max height for the current participants ScrollView to the total of showing 3 participants before having to scroll.

Do you think this is a valid bug? Should we reopen this one and fix it here, should we open that reported bug from Slack and fix it there, or is it not a bug? Thank you both for your time!

[DanutGavrus]

In case this one gets reopened, I'm leaving a potential Proposal here, otherwise, just ignore this comment. Thanks!

Proposal

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

Participants detail are hidden at all after clicking on show more button on smaller devices.

What is the root cause of that problem?

In the MoneyRequestConfirmPage we are not using the ScrollView component as we do in other places such as in the ShareCodePage where we leave the header at the top, and wrap the content which should be scrollable.

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

1. Add ScrollView inside MoneyRequestConfirmPage, wrapping the MoneyRequestConfirmationList, and leaving the header stay at the top;
2. If we want to also keep the participants list scrollable after some point, and not let all the participants taking space on the page, we should set a max height for it, equal to the space taken by the components which make for n(3, or whichever is desired) participants;
3. (OPTIONAL) ScrollView is also missing from the MoneyRequestAmountForm, the page where we input the amount on our custom numpad, making it possible for the Next button to be missing, so we may add it there too;
4. (OPTIONAL) Finally, we may also check each page from the Money Request Flow in order to find other missing ScrollView's, if any;
5. (OPTIONAL) We could check all the pages in the app for missing ScrollViews in order to prevent similar future bugs from happening. I think this will require some time & attention though.

[jliexpensify]

Original issue - @mallenexpensify what do you think? Should we consider this one as a bug?

@DanutGavrus just curious, what is defined as a smaller device?

[DanutGavrus]

just curious, what is defined as a smaller device?

The above video has a resolution of 930px width × 588px height for example.

[jliexpensify]

Getting a second opinion internally - https://expensify.slack.com/archives/C01SKUP7QR0/p1692252620222139

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[jliexpensify]

Hi @eVoloshchak - do you mind checking out @DanutGavrus 's proposal here? It seems like this is a bug that we would want to look at and possibly fix, thanks!

[melvin-bot]

@eVoloshchak, @jliexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jliexpensify]

Not overdue, waiting on C+

[eVoloshchak]

@DanutGavrus's proposal looks good to me!
I think we need to do items 1-4, while 5 is a separate issue, we already have a reviewer checklist check to prevent pages without the ScrollView

🎀👀🎀 C+ reviewed!

[melvin-bot]

📣 @avi-shek-jha 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[DanutGavrus]

@eVoloshchak
PR ready for review: #26179

This one has proven to be a little bit more challenging than sounded. I've done as many exhaustive tests as I possibly could, on all platforms, sizes & orientations(as partly seen in the PR videos).

[melvin-bot]

🎯 ⚡️ Woah @eVoloshchak / @DanutGavrus, great job pushing this forwards! ⚡️

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

• when @DanutGavrus got assigned: 2023-08-29 08:22:44 Z
• when the PR got merged: 2023-08-31 14:54:30 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.61-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [24476] Participants list is not hidden anymore on small screen devices. #26179

If no regressions arise, payment will be issued on 2023-09-08. 🎊

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

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

• @eVoloshchak does not require payment (Eligible for Manual Requests)
• @DanutGavrus requires payment offer (Contributor)
• @avi-shek-jha requires payment offer (Reporter)

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:

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

[jliexpensify]

Payment summary:

• Bug Reporter: @avi-shek-jha $250
• Contributor: @DanutGavrus $1000 + $500 (speed bonus)
• C+: @eVoloshchak $1000 + $500 (speed bonus) - request on New.Dot

Upwork job

Is that correct?

@eVoloshchak please complete the checklist! @DanutGavrus please accept the offer.

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: I can't pinpoint the PR that introduced this bug, the screen didn't have the ScrollView initially (which is the root cause), but this was surfaced when 'Show more' button was added
• 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: N/A
• 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: this discussion has already happened before, which resulted in the following item being added to the reviewer checklist: 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
• Determine if we should create a regression test for this bug.
  Is it easy to test for this bug? Yes
  Is the bug related to an important user flow? Yes
  Is it an impactful bug? No
  This is a visual bug that can be reproduced on a small number of devices (it has to be a fairly small device/window) that doesn't prevent the user from continuing to use the app. I think the checklist item is enough, the problem won't occur for all of the newly created pages, I don't think a regression test is needed here

[eVoloshchak]

Contributor: @DanutGavrus $1000 + $500 (speed bonus)
C+: @eVoloshchak $1000 + $500 (speed bonus) - request on New.Dot

Is that correct?

Looks like has introduced a regression in #26544
This was quickly resolved by a follow-up PR from @DanutGavrus, it was deployed to production 4 days ago, so the payment date isn't due just yet (payments will be issued 7 days after all regressions are fixed (ie: deployed to production), source)

[DanutGavrus]

We also have this issue #26418 which was not opened to payment and was mentioned in my follow up PR. In the dupe issue, which was opened to external contributors but was fixed by me, we are going to only pay the reporter. You can see in my follow-up PR changes that I only forgot to add 1 prop to a ScrollView and caused a very small issue(the Next button's position was not docked to bottom anymore, but everything was still functional). The original PR was a little bit tricky(as you can see with the double ScrollView) and my focus was on the important things(as you can see from the attached videos and the variety of tests) and I've also voluntarily fixed another issue in advance which was not reported yet(added a ScrollView for our custom keyboard page too). IMO, the button position seems a very small detail which could easily be omitted by anyone. Those being said, I would like to ask if this small detail may not be considered a regression for the previously mentioned things, and if we may continue with the payment as is. Thanks!

[jliexpensify]

Thanks for the context @DanutGavrus - since I am not an Engineer, I will ask @Gonals to step in and evaluate your comment and make the final call.

If he agrees with this comment:

IMO, the button position seems a very small detail which could easily be omitted by anyone.

And we choose to not count this as a regression, then the payouts in this comment would still be valid. If it is a regression, then we should apply a 50% penalty (i.e. $750 all up).

[jliexpensify]

Heya @Gonals - can I get your thoughts here?

p.s. After tomorrow, it'll be 7 days after deployment of the new PR.

[Gonals]

I think that is a fair assessment. It is a small issue in a moderately complex PR. I think, in this particular case, we could go ahead with payment as usual.

[jliexpensify]

Great, thanks Alberto. Paying out as per this comment as the second PR has been deployed for 7 days.

[jliexpensify]

Paid and job closed, cheers!

[JmillsExpensify]

$1,500 payment approved for @eVoloshchak based on BZ summary.