[PAID] [$250] Search - Raw markdown symbols visible in search expense list

[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: 9.0.16-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): biruknew45+new@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to [staging.new.expensify.com].
2. Navigate to any chat.
3. Click on the plus icon in the compose box.
4. Select "Submit Expense."
5. Enter the amount and press "Next."
6. Submit the expense.
7. Navigate to the expense detail page.
8. Click on the description field.
9. Type a header markdown (e.g., # text) or any type of mark down text and click "Save."
10. Navigate to the search page located next to "Inbox."

Expected Result:

Markdown syntax should be rendered correctly, so any Markdown formatting appears as intended (e.g., bold text, header ) without displaying raw Markdown symbols.

Actual Result:

Raw Markdown symbols are visible in the expense list on the search page, indicating that Markdown is not being rendered properly in this context which is different from expense description behavior in other places in the app

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

Bug6551623_1721834797632.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0118ebdaf7338382b5
• Upwork Job ID: 1824560866443816441
• Last Price Increase: 2024-08-16
• Automatic offers:
• ishpaul777 | Reviewer | 103622954
• Krishna2323 | Contributor | 103651370

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

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

[Krishna2323]

Proposal

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

Search - Raw markdown symbols visible in search expense list

What is the root cause of that problem?

Description is not converted to text from markdown.

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 126 in 412fc60

const description = TransactionUtils.getDescription(transactionItem);

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

We should convert the description to plain text.

const description = Parser.htmlToText(Parser.replace(TransactionUtils.getDescription(transactionItem)));

What alternative solutions did you explore? (Optional)

[daledah]

Edited by proposal-police: This proposal was edited at 2024-08-07 07:29:00 UTC.

Please insert the actual timestamp where {updated_timestamp} is indicated.

Proposal

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

Raw Markdown symbols are visible in the expense list on the search page, indicating that Markdown is not being rendered properly in this context which is different from expense description behavior in other places in the app

What is the root cause of that problem?

The expense list uses TextWithTooltip to display text, however TextWithTooltip doesn't have logics to handle HTML text, so the output only shows raw text.

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

Add an option shouldRenderAsHTML to TextWithTooltip and set default to false. Then we edit this line to render as HTML if shouldRenderAsHTML is true:

shouldRenderAsHTML ? <RenderHTML html={Parser.replace(text)} /> : text}

POC

Screen.Recording.2024-08-07.at.13.47.30.mov

What alternative solutions did you explore? (Optional)

[daledah]

# PROPOSAL UPDATED

I updated the proposal to include pseudocode.

[strepanier03]

Hmmm, the description is not a visible field on the expense when I'm on the search page, so the markdown isn't displayed either way for me.

[daledah]

@strepanier03 With the current logic, if the expense's merchant is set, the app will display the merchant field instead of the description.

[melvin-bot]

@strepanier03 Eep! 4 days overdue now. Issues have feelings too...

[strepanier03]

Got it, thanks @daledah - I'll retest with that in mind.