[HOLD for payment 2024-01-11] [$500] LHN - When receiving a large message with empty lines, the LHN does not display "..."

[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.8-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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open New Expensify app
2. Navigate to any conversation
3. Send a message containing text and empty lines, for example:
   "Hello

Hi"

Expected Result:

Any message received by the user that does not fit completely into the preview in LHN should be displayed with "..." at the end of the preview

Actual Result:

When receiving a large message with empty lines, the LHN does not display "..."

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

Bug6302049_1701794565234.Recording__844.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb7a63f85d985319
• Upwork Job ID: 1732095470234775552
• Last Price Increase: 2023-12-12

[melvin-bot]

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

[melvin-bot]

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

[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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

LHN - When receiving a large message with empty lines, the LHN does not display

What is the root cause of that problem?

The main problem is that as alt text we use the lastMessage from report which by default truncates all text after a newline

App/src/libs/ReportUtils.ts

Line 1148 in f80fbe3

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

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

Since the oldlastMessage values only store half the text, we can use lastMessageHtml instead and then using parser.htmlToText get text and to make the text on one line and remove line breaks, we can use replace(/\n/g, ' ')

As result

lastMessageTextFromReport = report ? parser.htmlToText(report.lastMessageHtml).replace(/\n/g, ' ') || '' : '';

App/src/libs/OptionsListUtils.js

Line 416 in f80fbe3

lastMessageTextFromReport = report ? report.lastMessageText || '' : '';

Plus we need update optimisticReport for lastMessageHTML while we are waiting for the result from the backend since for optimisticReport we use only part of text for lastMessageHTML (or we can pass lastAction.message[0].html instead report.lastMessageHtml in first part )

lastMessageHtml: lastAction.message[0].html,

App/src/libs/actions/Report.js

Line 326 in 2975048

lastMessageHtml: lastCommentText,

What alternative solutions did you explore? (Optional)

As alternative
If we don't want to make changes to OptionsListUtils we can return HTML text from getOptionData

App/src/components/LHNOptionsList/OptionRowLHNData.js

Line 90 in f80fbe3

const item = SidebarUtils.getOptionData(fullReport, reportActions, personalDetails, preferredLocale, policy, parentReportAction);

And then use parser for text inside OptionRowLHN

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 258 to 266 in f80fbe3

	{optionItem.alternateText ? (
	<Text
	style={alternateTextStyle}
	numberOfLines={1}
	accessibilityLabel={translate('accessibilityHints.lastChatMessagePreview')}
	>
	{optionItem.alternateText}
	</Text>
	) : null}

[sakluger]

@mollfpr what do you think about the one proposal we've received so far?

[dukenv0307]

Proposal

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

Receiving a large message with empty lines, LHN doesn't display ...

What is the root cause of that problem?

We format the last message text to only the text in the first line of text in the last action and BE also has the same approach.
So if the first line is short text LHN display without ...

App/src/libs/ReportUtils.ts

Line 1162 in 6129c67

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

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

When we format the last message text, we can replace all line breaks with space characters and then substring this text. This is the approach that is used by Messenger of Facebook

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

The back end also needs to use this approach to save the lastMessageText field.

App/src/libs/ReportUtils.ts

Line 1162 in 6129c67

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

What alternative solutions did you explore? (Optional)

If we don't want to change this in back-end, we can use this approach lastMessageTextFromReport function. But I'd like to fix back-end logic and formatReportLastMessageText function so lastMessageText in report data is synced and we can use this in all places of the App without any more change.

lastMessageTextFromReport = report ? lodashGet(lastReportAction, 'message[0].text', '').trim().replace(CONST.REGEX.LINE_BREAK, ' ').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim() || '' : ''; 

App/src/libs/OptionsListUtils.js

Line 416 in f80fbe3

lastMessageTextFromReport = report ? report.lastMessageText || '' : '';

Result

Screen.Recording.2023-12-08.at.16.48.56.mov