[HOLD for payment 2024-06-05] Search - Expense preview with multiline description shows two spacings between each line

[lanitochka17]

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: 1.4.70-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Submit an expense to a user with no unsettled expense, and include a multiline description in the expense
3. Note the expense preview in LHN shows one spacing between each line
4. Click on the search icon
5. Note that expense preview in search list

Expected Result:

The expense preview in search list will also show one spacing between each line

Actual Result:

The expense preview in search list alsos two spacings between each line

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

Add any screenshot/video evidence

Bug6469800_1714725584145.20240503_163336.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[lanitochka17]

@mallenexpensify 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

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[mallenexpensify]

@dannymcclain , do you happen to know if this is expected behaviour?

[dannymcclain]

@mallenexpensify I don't think it's expected—I would imagine the LHN and search rows would look the same. At the same time, I would say this is extremely minor.

[bernhardoj]

Proposal

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

The multi-line description of an expense request shows extra spacing between lines on the search page, but not in LHN.

What is the root cause of that problem?

This issue happens after my PR here. In the PR, we are fixing an issue where the LHN subtitle is shown as multiline when we set the expense description to multiline by replacing all new line characters with a whitespace.

App/src/libs/ReportUtils.ts

Line 1630 in 2f5173c

return String(lastMessageText).trim().replace(CONST.REGEX.LINE_BREAK, ' ').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim();

The LINE_BREAK regex is then updated to consider a case where the new line character is \r\n as found here.

App/src/CONST.ts

Line 1879 in 2f5173c

LINE_BREAK: /\r|\n/g,

But the new regex (\r|\n) matches each \r and \n and replaces it with whitespace, so if we have \r\n, we will end up with 2 whitespaces. This isn't noticeable in LHN because the text style set the white-space to nowrap which collapses the whitespace into a single whitespace.

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

Update the LINE_BREAK regex replace both \r\n into a single whitespace.

// stricter, if \n\r is given, then we will have 2 whitespaces, which I believe is expected
LINE_BREAK: /\r\n|\r|\n/g,

OR

// shorter, but will match \n\r too
LINE_BREAK: /[\r\n]+/g,

we can optionally set the white-space back to pre for the LHN that gets removed in this PR

[dannymcclain]

Not overdue Melvin.