[HOLD for payment 2024-10-14] [$250] The intro text on private notes list stays fixed when it should scroll with the page

[m-natarajan]

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.36-1
Reproducible in staging?: Y
Reproducible in production?: Y
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
Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726513353005399

Action Performed:

1. Open 1:1 chat
2. Click on the header
3. Add private notes with many lines
4. In private notes list page, scroll the page

Expected Result:

The intro text should be attached to the content of the page and scroll like we did with many pages

Actual Result:

The intro text is fixed when you scroll the page

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

bug.1.mov

Recording.553.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835811668345209683
• Upwork Job ID: 1835811668345209683
• Last Price Increase: 2024-09-30
• Automatic offers:
• brunovjk | Reviewer | 104226815
• nkdengineer | Contributor | 104226816

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[nkdengineer]

Proposal

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

Gives error saying "Please enter a valid website using lowercase characters"

What is the root cause of that problem?

We are not adding this Text here in ScrollView

App/src/pages/PrivateNotes/PrivateNotesListPage.tsx

Lines 98 to 104 in 1156e97

	<Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
	<ScrollView
	contentContainerStyle={styles.flexGrow1}
	bounces={false}
	>
	{privateNotes.map((item) => getMenuItem(item))}
	</ScrollView>

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

We can create a function like getHeaderMessage for this Text and use it inside ScrollView or simpler we can move this Text to nside ScrollView

        <ScrollView
            contentContainerStyle={styles.flexGrow1}
            bounces={false}
        >
            <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
            {privateNotes.map((item) => getMenuItem(item))}
        </ScrollView>

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

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

[melvin-bot]

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

[vr-varad]

Hey @brunovjk I would like to work on this issue.

[melvin-bot]

📣 @vr-varad! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[vr-varad]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01148273080994adc1

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[vr-varad]

I want to work on this issue. @brunovjk @lschurr if it's open for contribution.

[melvin-bot]

📣 @markom01! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[markom01]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~011d144bd16d9790fc

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[markom01]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~011d144bd16d9790fc

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[bikramiter]

Proposal

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

The intro text should be attached to the content of the page and scroll with private notes text section.

What is the root cause of that problem?

The personalNoteMessage text is outside of the ScrollView as
https://github.com/Expensify/App/blob/14b99ca0a12e9686818bc3e937f091199de69750/src/pages/PrivateNotes/PrivateNotesListPage.tsx#L98C13-L104C26

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

We can move the personalNoteMessage text inside the ScrollView as below.

<ScrollView
    contentContainerStyle={styles.flexGrow1}
    bounces={false}
>
    <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
    {privateNotes.map((item) => getMenuItem(item))}
</ScrollView>

What alternative solutions did you explore? (Optional)

The current design is aligned with pages like Profile description page and Room description page. So, I am not sure if we should alter the behavior for this page. Profile description page also limits text to 1000 characters if we should consider this for this case.

[bikramiter]

Performed a minor edit to the problem statement.

[markom01]

Edited by proposal-police: This proposal was edited at 2024-09-18 14:00:37 UTC.

Proposal

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

In PrivateNotesListPage.tsx
The intro text should be attached to the content of the page and scroll.

What is the root cause of that problem?

Textis outside of a ScrollView. Since there is scrolling content when viewing large note, text remains visible while scrolling.

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

Add Text inside of a ScrollView.

<ScrollView contentContainerStyle={styles.flexGrow1} bounces={false}>
    <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
    {privateNotes.map((item) => getMenuItem(item))}
</ScrollView>

What alternative solutions did you explore? (Optional)

Make no changes on web (introduction text stays fixed) and fix introduction text to top while scrolling on other platforms for consistency.

Recording of proposal

fix.mov

[brunovjk]

I want to work on this issue. @brunovjk @lschurr if it's open for contribution.

@vr-varad If you haven't already, please post a proposal and I will review them all shortly.

[vr-varad]

Proposal

In the current code implementation:

<Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
<ScrollView 
    contentContainerStyle={styles.flexGrow1} 
    bounces={false} 
> 
    {privateNotes.map((item) => getMenuItem(item))} 
</ScrollView>

The <Text> component is placed outside the . This causes the text to remain fixed while only the ScrollView's content (i.e., the list of private notes) scrolls.

Proposed Solution

To fix this issue, the text should be moved inside the . This way, the text will scroll along with the list of private notes.

The updated code should look like this:

<ScrollView
    contentContainerStyle={styles.flexGrow1}
    bounces={false}
>
    <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
    {privateNotes.map((item) => getMenuItem(item))}
</ScrollView>

Explanation of Changes:

1. Current Position: The <Text> component (introductory message) is positioned outside the <ScrollView>. This makes it fixed, meaning it doesn't scroll with the rest of the content.
2. Proposed Position: The <Text> component is moved inside the <ScrollView>. This ensures that both the message and the list of private notes are part of the same scrollable area.

[FitseTLT]

I think this is an expected behavior as the intro text is an informative text about the notes that is not part of the private notes list.

[markom01]

I agree with @FitseTLT, but then consistency can be problem, because for example, on iOS that text is in scrollview.

ios-scroll.mp4

[brunovjk]

Thank you all for the proposals and investigation. I am having problems with my internet, the company is coming to replace my modem today. If this issue is urgent, please reassign it. Thank you very much.

[brunovjk]

@nkdengineer's proposal to move the introductory text inside the <ScrollView>, which would allow it to scroll along with the private notes content. This would "fix" the issue where the text currently stays fixed while scrolling. This behavior (the text being fixed) was introduced here.

Before proceeding with the fix, we would like to confirm:

• Is the expected behavior for the intro text to scroll with the page, or should it remain fixed?

Once we have confirmation, we can move forward with either applying the fix or leaving the current behavior unchanged. Thank you!

🎀👀🎀 C+ reviewed

[bikramiter]

Thanks @MonilBhavsar and @brunovjk. I further looked into the similar scenarios like Room description and Workspace profile description.

• The edit behavior for all cases (Private notes, Room description and Workspace profile description) are same.
• After 'Save', for Room description and Workspace profile description, the intro text scrolls with the comment. Only for Private notes, the intro text does not scroll.

Please refer the screen recording explaining this for a large screen and ios screen. I could not attach this due to larger file size. https://drive.google.com/file/d/1_vTxA5MtDCn8w2Nc6395AHfieY4mQ4BU/view?usp=sharing

So, I feel making the below update(same as proposed earlier) will handle the case. This will be aligned with the discussed behavior as well as consistant with the other pages.

<ScrollView
    contentContainerStyle={styles.flexGrow1}
    bounces={false}
>
    <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
    {privateNotes.map((item) => getMenuItem(item))}
</ScrollView>

[nkdengineer]

@MonilBhavsar I double checked other pages like Room description, Workspace profile description, ... and the intro text scrolls with the comment, the intro text doesn't scroll in only Private notes
And I think we just need to change in private notes page as in the proposal I mentioned

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@MonilBhavsar @lschurr @brunovjk this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[brunovjk]

Not overdue. We asked on Slack for opinions on how to proceed here. We are still discussing it :D

[MonilBhavsar]

Thanks all! Assigning @nkdengineer as they were the first to put up a proposal and proposal remains unchanged

[melvin-bot]

📣 @brunovjk 🎉 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]

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

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

• fix: The intro text on private notes list stays fixed #50128

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

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

• @brunovjk requires payment automatic offer (Reviewer)
• @nkdengineer requires payment automatic offer (Contributor)
• @dukenv0307 requires payment (Needs manual offer from BZ)

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

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

[brunovjk]

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:

• [@brunovjk] The PR that introduced the bug has been identified. Link to the PR: Fix/27634: Improve private notes flow #31344
• [@brunovjk] 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: Fix/27634: Improve private notes flow #31344 (comment)
• [@brunovjk] 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:
• [@brunovjk] Determine if we should create a regression test for this bug. Yes
• [@brunovjk] 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.

Regression Test Proposal

• Open 1:1 chat
• Click on the header
• Add private notes with many lines
• In private notes list page, scroll the page
• Verify that: The intro text should be attached to the content of the page and scroll like

Do we agree 👍 or 👎?

cc: @lschurr

[lschurr]

Payment summary:

• Contributor: $250 @nkdengineer (paid via Upwork)
• Reviewer: $250 @brunovjk (paid via Upwork)