[HOLD for payment March 4th - $500] Expense description isn’t truncated, runs outside the expense preview

[kavimuru]

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: 1.4.30-0
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: @JmillsExpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705924528924469

Action Performed:

1. Create an expense
2. Use the following link for the description: "[$1000] Desktop-"Hmm.. it's not here" page appears when the app auto closes to update #28495"
3. View the newly created expense

Expected Result:

The link should not extend outside the expense preview

Actual Result:

The link isn’t truncated and extends outside the expense preview

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: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0149fde024360524d1
• Upwork Job ID: 1749714292320243712
• Last Price Increase: 2024-01-30
• Automatic offers:
• situchan | Reviewer | 28143323
• mkhutornyi | Contributor | 28143324

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Looks like a regression from #34010

[melvin-bot]

📣 @Shahidullah-Muffakir! 📣
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>

[Shahidullah-Muffakir]

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

[melvin-bot]

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

[noumantahir]

Proposal

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

description of payment request fail to conform to card width for words/links exceeding certain lengths

What is the root cause of that problem?

Inconsistent use of flex and width in MoneyRequestPreview, there are a number if nested view containers responsible for rendering money request card and usually different flex and width values lead to such overflow.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 329 in 60cf55d

<View style={[styles.flexRow, styles.mt1]}>

Another styles.moneyRequestPreviewBox is being unnecessarily used twice in parent and children views that could be potentially confusing the renderer.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 369 in 60cf55d

style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]}

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 268 in 60cf55d

!props.onPreviewPressed ? [styles.moneyRequestPreviewBox, ...props.containerStyles] : {},

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

fine tuning styles in these places below should fix the issue. I was able to reproduce somewhat similar raw sample for testing purposes, according to which it's potentially possible to fix issue by ensuring consistent use of flex about view children.

What alternative solutions did you explore? (Optional)
It may also possible that the underline issue is being caused by RenderHtml width property, passing a parent width to renderHtml component might also help eradicate the issue

[melvin-bot]

📣 @noumantahir! 📣
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>

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

[mkhutornyi]

Proposal

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

Expense description isn’t truncated, runs outside the expense preview

What is the root cause of that problem?

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 334 in 9c552ab

{shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}

Here, we're rendering html but there's no text wrapping logic like others:

App/src/styles/index.ts

Lines 1776 to 1778 in 9c552ab

	maxWidth: '100%',
	...whiteSpace.preWrap,
	...wordBreak.breakWord,

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

wrap RenderHTML with View with style: wordBreak: 'break-word'

Additionally, we can set maxWidth: '100%', whiteSpace if needed

[noumantahir]

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

[melvin-bot]

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

[situchan]

@noumantahir thanks for the proposal but the root cause is not correct. The solution also doesn't make sense.

[Krishna2323]

Proposal

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

Expense description isn’t truncated, runs outside the expense preview

What is the root cause of that problem?

The parent view of RenderHTML inside MoneyRequestPreview doesn't have ...whiteSpace.preWrap & ...wordBreak.breakWord applied to it.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 337 in 1b1eeb8

{shouldShowDescription && <RenderHTML html={parser.replace(merchantOrDescription)} />}

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

This issue will occur whenever we use RenderHTML without wrapping it with a View which has ...whiteSpace.preWrap & ...wordBreak.breakWord applied to it. To solve this issue I think the best solution will be to add these styles to the defaultViewProps object inside BaseHTMLEngineProvider. This way we don't need to always wrap RenderHTML and apply styles to the View.

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Line 80 in 1b1eeb8

const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};

Result

Alternative

We can directly apply styles to the components that overflow, like in this case link.

App/src/styles/index.ts

Line 105 in 1b1eeb8

const link = (theme: ThemeColors) =>

[melvin-bot]

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

[situchan]

@mkhutornyi's proposal looks good to me.

@Krishna2323 your proposal is variation of previous one and I don't think we should alter BaseHTMLEngineProvider. This is widely used and already working fine in other places of the app for years.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[Krishna2323]

@situchan, it works because we wrap and style the parent view with word break styles, although its a variation but it will make sure we don't face this issue next time. Like we recently did because of using RenderHTML without the styles.

[melvin-bot]

@slafortune, @NikkiWines, @situchan Eep! 4 days overdue now. Issues have feelings too...

[slafortune]

@mkhutornyi will you be able to more this forward in the next day or two?

[mkhutornyi]

yes once assigned. I am not assigned yet

[NikkiWines]

Yep, sorry for the delay. Agreed that @mkhutornyi's proposal looks good 👍

[melvin-bot]

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

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

@slafortune @NikkiWines @mkhutornyi @situchan 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!

[NikkiWines]

@mkhutornyi what's the latest on the PR for this issue?

[mkhutornyi]

PR will be ready for review by tomorrow

[slafortune]

Looks like the automation didn't work - I've updated the title
@situchan can you complete the checklist

1. The PR that introduced the bug has been identified. Link to the PR:

2. 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:

3. 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:

4. Determine if we should create a regression test for this bug.

5. 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

[situchan]

1. Display description as HTML in money request preview #34010
2. https://github.com/Expensify/App/pull/34010/files#r1506271246
3. N/A

Regression Test Proposal

1. Create an expense
2. Use the following link for the description: https://github.com/Expensify/App/issues/28495
3. View the newly created expense preview
4. Verify that link is not extended outside the expense preview

[slafortune]

Test rail done and paid 👍