Expense - Share code title shows HTML tags when expense description has mark down

[mitarachim]

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: 9.1.39-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to 1:1 DM.
3. Submit two expenses with description that contains mark down.
4. Go to expense report.
5. Click on any expense.
6. Click on the report header.
7. Click Share.

Expected Result:

Share code title will not show HTML tags when expense description has mark down.

Actual Result:

Share code title shows HTML tags when expense description has mark down

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6819283_1746168732363.20250502_144937.mp4

View all open jobs on GitHub

[melvin-bot]

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

[etCoderDysto]

Proposal

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

Expense - Share code title shows HTML tags when expense description has mark down

What is the root cause of that problem?

getReportName returns html format report name here. And we display the title without converting it to text.

App/src/pages/ShareCodePage.tsx

Line 97 in 223a34c

const title = isReport ? getReportName(report) : currentUserPersonalDetails.displayName ?? '';

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

We should use Parser.htmlToText to convert the title from getReportName to text. We can optionally use htmlToMarkdown if we want to render the title as markdown

    const title = isReport ? Parser.htmlToText(getReportName(report)) : currentUserPersonalDetails.displayName ?? '';

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A - ui issue

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

Share code title shows HTML tags when expense description has mark down

What is the root cause of that problem?

In share code page, we get title using getReportName which returns HTML format

App/src/pages/ShareCodePage.tsx

Line 97 in 223a34c

const title = isReport ? getReportName(report) : currentUserPersonalDetails.displayName ?? '';

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

We should parse report name using Parser.htmlToText to parse HTML, and StringUtils.lineBreaksToSpaces to remove newline in case of multiline description

App/src/pages/ShareCodePage.tsx

Line 97 in 223a34c

const title = isReport ? getReportName(report) : currentUserPersonalDetails.displayName ?? '';

const title = isReport ? StringUtils.lineBreaksToSpaces(Parser.htmlToText(getReportName(report))) : currentUserPersonalDetails.displayName ?? '';

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

We can add Parser.htmlToText when we return message in function getReportNameInternal like we did with other places

App/src/libs/ReportUtils.ts

Lines 4814 to 4816 in 223a34c

	if (isMoneyRequestReport(report)) {
	formattedName = getMoneyRequestReportName({report, policy});
	}

App/src/libs/ReportUtils.ts

Lines 4713 to 4715 in 223a34c

	if (automaticAction) {
	return Parser.htmlToText(getReportAutomaticallyApprovedMessage(parentReportAction));
	}

App/src/libs/ReportUtils.ts

Line 4662 in 223a34c

return Parser.htmlToText(getReportAutomaticallyForwardedMessage(parentReportAction, reportID));

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[joekaufmanexpensify]

Ehhh, this is a pretty significant edge case/polish. It requires putting markdown in the description (which I highly doubt will be common, except maybe with a URL, and even then) AND going to the share code. Even then, there's not really any impact as the QR code and URL are fine.

I'm going to close this for now. Let's revisit this if there is any actual customer feedback about this.

[nkdengineer]

@joekaufmanexpensify There's a recently merged PR that fixes the similar bug in several other components, so I think we should fix here as well to maintain app consistency.

[joekaufmanexpensify]

I get that, but the share code feels much more hidden than those. My 2c is this is probably fine to leave as-is for now. i think it'd be better to holistically address all cases of this in the app rather than keep handling these as one-off issues. And given this one is niche, I think it's fine to do nothing for now.