[C+ Checklist Needs Completion] [$500] IOU-Markdown applied is displayed as text without markdown in IOU preview

[izarutskaya]

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: 1.4.14-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. Go to https://staging.new.expensify.com/
2. Tap on a 1:1 chat
3. Tap request money--- manual
4. Enter an amount and tap next
5. Enter markdown text eg 456 in description
6. Tap request
7. Tap on IOU created

Expected Result:

Markdown applied must be displayed in IOU preview.

Actual Result:

Markdown applied is not displayed in IOU preview. The text with markdown applied in IOU description is shown in IOU preview as text without markdown applied.

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

Bug6320563_1703034733792.iou32.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018df7a4462e491a32
• Upwork Job ID: 1737423428338143232
• Last Price Increase: 2023-12-27
• Automatic offers:
• dukenv0307 | Contributor | 28079603

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018df7a4462e491a32

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

Proposal

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

Markdown applied is not displayed in IOU preview. The text with markdown applied in IOU description is shown in IOU preview as text without markdown applied.

What is the root cause of that problem?

We are displaying description as normal text in IOUPreview.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 331 in c09a3fe

<Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>

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

We should display description of request as HTML by using RenderHTML component and pass html prop as the parser of the description like this

<RenderHTML html={`<comment>${parser.replace(description)}</comment>`}

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 331 in c09a3fe

<Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>

What alternative solutions did you explore? (Optional)

NA

[AxeemHaider]

Proposal

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

The issue is that when Markdown is applied, it appears as plain text in the IOU preview without rendering the Markdown formatting.

What is the root cause of that problem?

We are not checking either description is simple text or in Markdown format. We are displaying it as plain text for simple text and markdown format, that's why markdown format also shown as a plain text. As you can see here.

App/src/components/ReportActionItem/MoneyRequestPreview.js

Line 331 in c09a3fe

<Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>

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

Here is the code which is responsible to display description in IOU Preview

App/src/components/ReportActionItem/MoneyRequestPreview.js

Lines 330 to 332 in c09a3fe

	{(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
	<Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
	)}

1. Firstly, we need to check whether we should display the description or not.
2. If we have to display description then we have to check is it a plain text or markdown format
3. if markdown format then parse the markdown text and convert it into HTML then display as HTML. (For this purpose we have to create a utility in expensify-common/lib/str lib which check given string is Markdown string or not)
4. Otherwise display it as plain text with style style={[styles.colorMuted]}

What alternative solutions did you explore? (Optional)

Instead of checking each component/page individually for whether it is in plain text or Markdown format, we can implement this logic inside the Text component. This way, it will automatically check if the input text is plain text and display it as is, or if it is in Markdown format, parse and display it as HTML. This approach eliminates the need to repeatedly write these conditions.

[melvin-bot]

📣 @AxeemHaider! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Victor-Nyagudi]

For reference sake, parsing description text was removed in this issue so that special characters like < aren't converted to &lt.

• [HOLD #19218] [$1000] The new description on the report displays &lt for < #19386 (comment)

That was accomplished in this PR.

• Fix: Parser Bug in IOU #19868

[AxeemHaider]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01c39582606f6c1ae5

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[AxeemHaider]

@Victor-Nyagudi thanks for this reference. I tested my code on local machine and eveything is working perfectly you can see this video.
Screencast from 2023-12-21 15-11-29.webm

[greg-schroeder]

Awaiting proposal review @rushatgabhane

[rushatgabhane]

@dukenv0307's proposal LGTM
🎀 👀 🎀

[melvin-bot]

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

[melvin-bot]

@youssef-lr @greg-schroeder @rushatgabhane this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[greg-schroeder]

Next up is @youssef-lr to confirm contributor assignment #33340 (comment)

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[dukenv0307]

@rushatgabhane The PR is ready for review.

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

• Display description as HTML in money request preview #34010

If no regressions arise, payment will be issued on 2024-01-26. 🎊

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

• @rushatgabhane requires payment through NewDot Manual Requests
• @dukenv0307 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:

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

[greg-schroeder]

c: @dukenv0307 - $500 - paid
c+: @rushatgabhane - $500

Rushat you can make a manual request, and then if you could complete the checklist we can close this out!

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Fix: Parser Bug in IOU #19868

2. 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: Fix: Parser Bug in IOU #19868 (comment)

3. 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: N.A. because this was intentionally removed.

4. Determine if we should create a regression test for this bug. No

5. 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 -N.A.

[rushatgabhane]

Thank you! manual request here https://staging.new.expensify.com/r/8963455257501785

[JmillsExpensify]

$500 approved for @rushatgabhane based on summary above.