[Awaiting checklist completion][$250] LHN - HTML "<h1>" tag can be seen on the #admins room LHN preview

[izarutskaya]

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.61.8
Reproducible in staging?: Y
Reproducible in production?: Y
Found when executing PR : https://github.com/Expensify/Expensify/issues/380529
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Log in with a new Gmail account
2. Create a workspace
3. Navigate to the LHN

Expected Result:

HTML tags shouldn't be visible.

Actual Result:

HTML "

" tag can be seen on the #admins room LHN preview. It's not visible in the room.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3428578236ce20d
• Upwork Job ID: 1780883160992833536
• Last Price Increase: 2024-04-18
• Automatic offers:
• GandalfGwaihir | Contributor | 0

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[izarutskaya]

@twisterdotcom 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.

[izarutskaya]

We think this issue might be related to the #collect project.

[twisterdotcom]

Pretty sure this is a dupe

[allgandalf]

Proposal

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

LHN option list content is not rendered properly and we see the html tags in report message

What is the root cause of that problem?

The API responds us HTML text when we receive OpenReport:

This is necessary because we render this HTML in main report screen, but we do not convert this to normal text when we display the message in LHN:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 217 to 225 in 1f694e2

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

This results in us seeing the content with HTML tags

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

We need to convert this message to normal text first before being display, we can use htmlToText util from Expensify-common below:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 223 in 1f694e2

{optionItem.alternateText}

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

We should also remove the styles.pre from alternateTextStyle as we no longer need paragraph whitespaces to be shows for the LHN text:

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 61 to 63 in 1f694e2

	const alternateTextStyle = isInFocusMode
	? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2, style]
	: [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, style];

Result

Result Video

Screen.Recording.2024-04-17.at.7.10.48.PM.mov

[allgandalf]

Pretty sure this is a dupe

Can you please post the dupe if you find it, I will also search for it @twisterdotcom

[twisterdotcom]

Yes, sorry, being pulled into something else but will look again in a bit. I opened this tab, said that, searched and immediately got distracted, my bad.

[allgandalf]

haha, no worries

[allgandalf]

No luck finding the dupe :), Are you sure that you saw this issue before @twisterdotcom ?

[twisterdotcom]

So, here are the issues I think I was thinking about:

https://github.com/Expensify/Web-Expensify/pull/37784
#20590

Basically, I think that we show HTML in the LHN is expected, given @puneetlath closed the last issue I see for this above.

Going to get a C+ involved for their take too, because I agree this would be nice to clean up though if you can do it.

[melvin-bot]

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

[melvin-bot]

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

[allgandalf]

Basically, I think that we show HTML in the LHN is expected, given @puneetlath closed the last issue I see for this above.

I read the issue, that was related BE sending wrong messages, over here BE does send the right message but we do not parse it correctly :), would like to hear if @ntdiary agrees with me too ;)

[allroundexperts]

Taking over!

[allroundexperts]

I think given we want to support HTML in LHN, we can go forward with @GandalfGwaihir's proposal as its simple enough and makes sense.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[allgandalf]

friendly bump to @tylerkaraszewski for assignment

[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.4.69-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [Fix]: Preview with HTML tags can be seen in LHN chat preview #40845

If no regressions arise, payment will be issued on 2024-05-09. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @GandalfGwaihir requires payment automatic offer (Contributor)

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

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

[tylerkaraszewski]

@allroundexperts ?

[melvin-bot]

@tylerkaraszewski, @twisterdotcom, @allroundexperts, @GandalfGwaihir Eep! 4 days overdue now. Issues have feelings too...

[tylerkaraszewski]

melvin, I told you to go away.

[allgandalf]

@twisterdotcom , can you pay this please :)

[twisterdotcom]

Thanks so much for the patience here folks. Always crazy coming back from a week out.

Payment Summary:

• @allroundexperts paid $250 via NewDot Manual Requests (C+)
• @GandalfGwaihir paid $250 here (Contributor)

[twisterdotcom]

@allroundexperts we just need the regression steps here.

[allroundexperts]

Checklist

1. I was not able to find the exact PR. I think that something changed on the backend which caused this.
2. N/A
3. N/A
4. A regression test would be helpful. The test steps given in the OP look good enough to me.

[JmillsExpensify]

$250 approved for @allroundexperts