[$250] Don't hyperlink descriptions that show in expense previews

[JmillsExpensify]

We added hyperlinking to the description field sometime last year, though this creates the confusing situation that an expense preview is sometimes hyperlinked (specifically when an expense has no merchant, but a description), and then sometimes not (when an expense has a merchant). Example below.

To resolve this confusion we've decided to:

1. No longer show hyperlinks in any expense previews. This creates a consistent experience no matter whether a merchant appears or not.
2. Continue hyperlinking the description field in the transaction thread, like so.
   

As a result, this issue is focused on step one, and no longer showing hyperlinks specifically in the expense preview. It's technically a bug due to the lack of consistency so I'll put this one through the BZ team. Feel free to file in #wave-control.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0135edc95715d2d0f1
• Upwork Job ID: 1781372447966294016
• Last Price Increase: 2024-04-26
• Automatic offers:
• akinwale | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

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

[allgandalf]

Can you upload the videos again @JmillsExpensify , the current ones aren't visible

[bernhardoj]

Proposal

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

We don't want to hyperlink the money request description anymore.

What is the root cause of that problem?

We convert the text to markdown for every type of markdown, including link.

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

If we don't want to hyperlink it, then we need to exclude link/autolink rule from the expensimark replace logic. We can do that by passing filterRules like this:

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 297 to 301 in ed34d59

	{shouldShowDescription && (
	<View style={[styles.breakWord, styles.preWrap]}>
	<RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription)}</muted-text>`} />
	</View>
	)}

to

<RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription, {filterRules: parser.rules.filter((rule) => rule.name !== 'autolink' && rule.name !== 'link').map((rule) => rule.name)})}</muted-text>`} />

We need to do this in ReportPreview too.

App/src/components/ReportActionItem/ReportPreview.tsx

Line 235 in ed34d59

const parsedSubtitle = new ExpensiMark().replace(formattedDescription ?? moneyRequestComment);

filterRules expect the list of rule that we want to apply, not we want to exclude, so I think we can create a util file to get the list of expensimark rule and exclude the ones that we pass to the param. I think it's easier than flipping the behavior of filterRules
ParserUtils.ts

function getFilterRules(excludeRules: string[]) {
    const parser = new ExpensiMark();
    return parser.rules.filter((rule) => !excludeRules.includes(rule.name)).map((rule) => rule.name)});
}

<RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription, {filterRules: ParserUtils.getFilterRules(['link', 'autolink'])})}</muted-text>`} />

What alternative solutions did you explore? (Optional)

If we don't want to render any markdown, we can remove the RenderHTML usage and use the merchant Text component to show the description too.

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 297 to 302 in 10fc359

	{shouldShowDescription && (
	<View style={[styles.breakWord, styles.preWrap]}>
	<RenderHTML html={`<muted-text>${parser.replace(merchantOrDescription)}</muted-text>`} />
	</View>
	)}
	{shouldShowMerchant && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}

 {(shouldShowMerchant || shouldShowDescription) && <Text style={[styles.textLabelSupporting, styles.textNormal]}>{merchantOrDescription}</Text>}

[melvin-bot]

@kevinksullivan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@kevinksullivan Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0135edc95715d2d0f1