[HOLD for payment 2023-08-16] [$1000] Message with button gets cut off early for certain length of emails

[kavimuru]

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. Open ND on android
2. Click on FAB > split bill > enter an amount
3. Share with account emails which are not renamed (for easier reproduction use these emails for testing nathanmulugetatesting+123@gmail.com, nathanmulugetatesting+1234@gmail.com, nathanmulugetatesting+12345@gmail.com)
4. Split the bill
5. Click on the IOU card
6. Select one of the contacts from the side panel
7. Observe the Message with button

Expected Result:

Message with button should not be cut off early

Actual Result:

Message with button gets cut off early.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.47-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
Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20230727_104300_New.Expensify.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Nathan-Mulugeta
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690444037073499

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013be117aa6991d578
• Upwork Job ID: 1685001865802149888
• Last Price Increase: 2023-07-28
• Automatic offers:
• Ollyws | Contributor | 25886833
• ahmedGaber93 | Contributor | 25909402
• nathan-mulugeta | Reporter | 25909403

[melvin-bot]

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

[ahmedGaber93]

Proposal

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

Message with button gets cut off early for certain length of emails

What is the root cause of that problem?

The root cause is android use different way to break words, see here and textbreakstrategy explanation here
the problem is all android textbreakstrategy need flex 1 style to work fine.

Message longEmailxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@gmail.com

// will break to
Message 
longEmailxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx@gmail.com

// with numberOfLines 1 will be
Message ...

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

pass style styles.flex1 in props.titleStyle will fix the issue.
we need to pass it in two places DetailsPage and the ProfilePage

What alternative solutions did you explore? (Optional)

we can add style styles.flex1 to titleTextStyle here, but this will affect on the next icon here to move to right.

[garrettmknight]

Confirmed on browserstack

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Santhosh-Sellavel]

Seems like a regression to me, couldn't find any PR. It's hard to reproduce, needs a proper root cause here why it occurs thanks!

[pradeepmdk]

Proposal

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

A message with a button gets cut off early for a certain length of emails

What is the root cause of that problem?

App/src/components/MenuItem.js

Lines 207 to 212 in 975146f

	<Text
	style={titleTextStyle}
	numberOfLines={props.numberOfLinesTitle || undefined}
	>
	{convertToLTR(props.title)}
	</Text>

In React Native, the Text component does not automatically take the full available space within its parent container by default. This behavior is different from web-based HTML elements, where elements such as <div> automatically take the full width of their parent container.

The reason why the Text component doesn't take full space is because of its inherent behavior as a text-rendering component. The width of the Text component is determined by the size of its content, and it will wrap to the next line if the content exceeds the available width. The default width of a Text component is essentially based on the width required to display its content without overflowing.

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

If we want the Text component to take full space or expand to fill the available width of its parent container, we need to explicitly specify a width style for the Text component or use flexbox properties to control its dimensions.

 1) using flexbox `flex:1`
 2) Using fixed width:  `width:100%`

What alternative solutions did you explore? (Optional)

We can use simple
https://reactnative.dev/docs/text#textbreakstrategy-android

[garrettmknight]

@Santhosh-Sellavel can you take a look at this root cause analysis today?

[Santhosh-Sellavel]

Left a comment here for volunteers to take over

[allroundexperts]

Actually, @Ollyws will be taking this over.

[melvin-bot]

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

📣 @Nathan-Mulugeta 🎉 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

[garrettmknight]

Hey @Ollyws - good to have you! Can you take a look at the root cause proposal here when you get a chance and let us know what you think?

[Ollyws]

Thanks for your proposals, the RCA for both is correct in that this is caused by the text break strategy that is particular to Android. This has occurred before in #22453 for example.

As far as I can see, this issue started occurring with #19524 when we wrapped the title Text in a View with certain styles. Before this the Text was simply inheriting flex1 from its parent and therefore worked fine, but the styles applied in the added View inhibit flex1 from allowing the Text to take up the full width, resulting in this issue on Android.

We can't remove these styles without causing a regression in money request views icon alignment, and adding flex1 to the styles permanently, breaks the alignment of the checkmark in MoneyRequestView. So I think the best course of action is to apply flex1 specifically for this instance of MenuItem using the titleStyle prop as suggested in @ahmedGaber93’s proposal.

However, I’ve noticed this issue also occurs in DetailsPage (To test this: Mention a user with a long email which includes a “+” example+123123123123@example.com, then select the mention in the chat. This will take you to the details page).
So @ahmedGaber93, could you please update your proposal to apply the style in both the DetailsPage and the ProfilePage? Thanks!

@pradeepmdk Thanks for your proposal and detailed RCA, but it is similar to @ahmedGaber93's proposal.

[ahmedGaber93]

Proposal

Updated
apply the fix in two places DetailsPage and ProfilePage.

Thanks!

[ahmedGaber93]

@Ollyws PR is now ready for review.

[melvin-bot]

🎯 ⚡️ Woah @Ollyws / @ahmedGaber93, 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 @ahmedGaber93 got assigned: 2023-08-02 17:42:51 Z
• when the PR got merged: 2023-08-04 16:35:14 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.51-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix button "Message with" style #24142

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

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:

• @Ollyws requires payment offer (Contributor)
• @ahmedGaber93 requires payment offer (Contributor)

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:

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

[Ollyws]

• The PR that introduced the bug has been identified. Link to the PR: Move checkmark icon to right of settled amount in request money report #19524
• 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/19524/files#r1294859925
• 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: https://expensify.slack.com/archives/C049HHMV9SM/p1692187269956909
• Determine if we should create a regression test for this bug.
• 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.

[garrettmknight]

@Ollyws have you started a discussion around regression or created a regression test? Once you do, I'll process payment on this issue.

[Ollyws]

Regression Test Proposal

1. Click on FAB > split bill > enter an amount then click next.
2. Share with account has long email (example: testingtestingtestingtesting+12345@test.com).
3. Split the bill.
4. Click on the IOU card to open its details.
5. Click on the account you split the bill with him.
6. Verify that the "Message with" button is not truncated early before the end of line.
7. Return to the chat and mention an account that has a long email (example: testingtestingtestingtesting+12345@test.com).
8. Select the mention to navigate to the details page.
9. Verify that the "Message with" button is not truncated early before the end of line.

Do we agree 👍 or 👎

[Ollyws]

@garrettmknight All updated, thanks!

[garrettmknight]

Summarizing payments for this issue:

#urgency bonus? Yes
Reporter: @Nathan-Mulugeta $250 paid via Upwork
Contributor: @ahmedGaber93 $1500 paid via Upwork
Contributor+: @Ollyws $1500 paid via Upwork

Upwork job is here: https://www.upwork.com/jobs/~013be117aa6991d578

[garrettmknight]

@Ollyws are you getting paid via NewDot or Upwork?

[Ollyws]

@garrettmknight Upwork thanks.

[garrettmknight]

Paid via Upwork. Closing!