[HOLD for payment 2023-06-13] [$1000] LHN - App displays 'This is beginning...' message for few seconds when we send strikethrough text in code block

[kbecciv]

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 the app
2. Open any report
3. Send strikethrough text in code block eg: ~```hello```~
4. Observe LHN

Expected Result:

App should directly display the text in LHN as it normally does for all other types of messages

Actual Result:

App displays 'This is beginning...' text for few seconds in LHN on sending strikethrough text in 3 backticks codeblock

Workaround:

Unknown

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

Reproducible in staging?: yes

Reproducible in production?: yes

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

LHN.wrong.text.on.strikethrough.codeblock.mp4

Recording.2801.mp4

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684423358039509

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011ba23426f30f15c7
• Upwork Job ID: 1661655553731735552
• Last Price Increase: 2023-05-25

[melvin-bot]

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

[therealsujitk]

Proposal

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

When you send ~```message```~, the LHN shows This is the beginning of your chat with ... for a while before showing the actual message.

What is the root cause of that problem?

The reason for this is the lastMessageText key is being set to '' (empty string) temporarily, the LHN automatically displays the message above if !lastMessageText is true. This is how that happens.

1. The user sends a message.
2. The lastMessageText value is set here using this function. This is what sets the value to '' (empty string).
   

   App/src/libs/ReportUtils.js

   Lines 638 to 645 in c53c89b

   	/**
   	* Html decode, shorten last message text to fixed length and trim spaces.
   	* @param {String} lastMessageText
   	* @returns {String}
   	*/
   	function formatReportLastMessageText(lastMessageText) {
   	return Str.htmlDecode(String(lastMessageText)).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim();
   	}

3. After this the message is sent to the server.
4. The server then sends some updates back to the user using Pusher with the "correct" lastMessageText which is why it fixes itself.

The formatReportLastMessageText() function replaces CONST.REGEX.AFTER_FIRST_LINE_BREAK with '' (empty string). In this case the first character is a line break, this results in the whole content being erased.

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

I'd like to know the logic used to format the lastMessageText in the server, the same should be used here to keep it consistent and to prevent flickering.

One way to solve this (I'm assuming this is what the server does too) is to trim() the string before applying the replace() function.

return Str.htmlDecode(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)

Another way to solve this problem is to replace all \n, \t, etc. with a ' ' (space).

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[s-alves10]

Proposal

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

When you send message like ~```hello```~, This is beginning... text is displayed for few seconds in LHN

What is the root cause of that problem?

The above string is converted to html <del><pre>hello</pre></del> by ExpensiMark rules(markdown to html).
When getting last message, we use this code

App/src/libs/actions/Report.js

Line 213 in c53c89b

const lastCommentText = ReportUtils.formatReportLastMessageText(lastAction.message[0].text);

The value of lastAction.message[0].text comes from here, by parser.htmlToText method

App/src/libs/ReportUtils.js

Line 1217 in c53c89b

const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : parser.htmlToText(htmlForNewComment);

As you can see from htmlToText rules in ExpensiMark, we add new line before and after the text for <pre></pre> element.

That's why the value of lastAction.message[0].text is \nhello\n

The ReportUtils.formatReportLastMessageText function removes the characters after the first line break as you can see here

App/src/libs/ReportUtils.js

Line 644 in c53c89b

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

So the last message is empty string. When last message is empty string, we set the lastMessage to the This is the beginning ... here

App/src/libs/SidebarUtils.js

Lines 297 to 315 in c53c89b

	if (!lastMessageText) {
	// Here we get the beginning of chat history message and append the display name for each user, adding pronouns if there are any.
	// We also add a fullstop after the final name, the word "and" before the final name and commas between all previous names.
	lastMessageText =
	Localize.translate(preferredLocale, 'reportActionsView.beginningOfChatHistory') +
	_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => {
	const formattedText = _.isEmpty(pronouns) ? displayName : `${displayName} (${pronouns})`;
	if (index === displayNamesWithTooltips.length - 1) {
	return `${formattedText}.`;
	}
	if (index === displayNamesWithTooltips.length - 2) {
	return `${formattedText} ${Localize.translate(preferredLocale, 'common.and')}`;
	}
	if (index < displayNamesWithTooltips.length - 2) {
	return `${formattedText},`;
	}
	}).join(' ');
	}

But the server returns the correct string(hello) a second later, so the lastMessage is set to the correct value after a second.

This is the root cause of this issue.

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

We can trim all white spaces in ReportUtils.formatReportLastMessageText before removing characters after the first line break as follows

function formatReportLastMessageText(lastMessageText) {
    return Str.htmlDecode(String(lastMessageText.trim())).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim();
}

This works perfectly.

Result

mac_chrome_19539.mp4

What alternative solutions did you explore? (Optional)

As described above, we add \n before and after text for <pre></pre> elements when converting html to text. I'm not sure why doing this. If this is not intentional, we can remove

 in the rules here as follows

            {
                name: 'blockElementOpen',
                regex: /(.|\s)<(blockquote|h1)>/gi,
                replacement: '$1\n',
            },
            {
                name: 'blockElementClose',
                regex: /<\/(blockquote|h1)>(.|\s)/gm,
                replacement: '\n$2',
            },

This happens when we editing the comment as well, but above two solutions work fine for both cases

[laurenreidexpensify]

@sobitneupane Bump ^^

[sobitneupane]

Thanks for the proposals.

Proposal from @therealsujitk looks good to me. Let's make sure to include tests for various types of messages (like highlighted (# h1), code block , inline codeblock, url, etc.) both online and offline while creating PR.

🎀👀🎀 C+ reviewed
cc: @stitesExpensify

[laurenreidexpensify]

bump @stitesExpensify for hire - are we good to move forward? thanks

[stitesExpensify]

Yep, let's move forward with @therealsujitk proposal. If there is flickering when you are testing, let me know and I will dive into the backend code!

[melvin-bot]

📣 @therealsujitk You have been assigned to this job by @stitesExpensify!
Please apply to this job in Upwork 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 📖

[laurenreidexpensify]

note to self - offers sent to @dhanashree-sawant @therealsujitk @sobitneupane in upwork

[therealsujitk]

@stitesExpensify after some testing I ran into an issue. Take a look at these two test cases,

```
    
Only those who fight on the battlefield get what they desire.
That's the way of the warrior.
```

<h1>Keep the promise you made as a warrior.</h1>

The second test case works when Str.htmlDecode() is removed, while the first test case requires it.

Screencast.from.01-06-23.04.50.53.PM.IST.webm

---

It looks like I'll need the logic that is used in the back-end. - Slack Discussion

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

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

[melvin-bot]

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

[laurenreidexpensify]

@anmurali pls pay this one next week when it's due - I am OOO so won't be able to complete

[therealsujitk]

@stitesExpensify can a bonus be considered for this issue even though the PR was merged late since it was reviewed and approved with no further changes quite early on within the 3 day period?

[stitesExpensify]

Yes, if there were no changes and the reviews were the only delay, then the bonus should apply

[laurenreidexpensify]

@sobitneupane can you please complete teh steps above re: regression, thank you

All payments have been issued in Upwork, including bonuses,

[laurenreidexpensify]

@sobitneupane bump ^^ thanks

[sobitneupane]

Regression Test Proposal

1. Go offline
2. Send message having strikethrough text in codeblock (e.g. : ~```Hello World!```~)
3. Verify that the last sent message is displayed in LHN (i.e. Hello World if sent message is ~```Hello World!```~)

[sobitneupane]

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:

It is such a small bug. It is very difficult to find the exact PR which resulted in this issue. It might have been caused by change in expensify-common or some other small changes in app.