[HOLD for payment 2023-09-27] [$1000] Feature request: Hyperlink any URLs that appear in request descriptions

[JmillsExpensify]

While we hyperlink URLs that appear in chat messages, we don't do the same for URLs that appear in the description field of a request. Let's close that gap, because it's frustrating to have the hyperlink in one place but not in the other.

Assigning myself as part of wave3 in the product roadmap.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e1f1d0e52e445d5f
• Upwork Job ID: 1689124762759274496
• Last Price Increase: 2023-09-06
• Automatic offers:
• jeet-dhandha | Contributor | 26670169

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[jeet-dhandha]

Proposal

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

• Feature Request to allow URL in Description field of Tasks

What is the root cause of that problem?

• Currently no implementation is done to handle URL in Description field of Tasks.

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

1. We will use ExpensiMark as parser and parse the description to convert to HTML.
2. Then we will pass html to description field's MenuItemWithTopDescription component.
3. We will update MenuItemWithTopDescription component to render html instead of title.
4. We will update MenuItem component to render html instead of title if html is passed.

{props.html ? <RenderHTML html={`<comment>${props.html}</comment>`} /> : ...title code}

After changes

What alternative solutions did you explore? (Optional)

• N/A

[JmillsExpensify]

@shawnborton removing you as I think we're on the same page .

[melvin-bot]

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

[melvin-bot]

@JmillsExpensify Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[JmillsExpensify]

Whoops, I just realized that I should have put an external label on this issue. We have one proposal above, so at least that is ready for review.

[eh2077]

@JmillsExpensify Do we just only want to add support for hyperlink in task description or support all Markdown styling features that chat supports?

[WikusKriek]

Proposal

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

We want to hyperlink any URLs that appear in request descriptions

What is the root cause of that problem?

We do not handle any markup in the description section of the request.

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

We should make use of ReportUtils and write a function that uses ExpensiMark parser to parse markdown link and autolink styling. We can add that function to the report utils.

function getParsedLink(text) {
        const parser = new ExpensiMark();
        const autolinkFilter = {filterRules: _.filter(_.pluck(parser.rules, 'name'), (name) => name === 'autolink' || name === 'link')};
        return text.length < CONST.MAX_MARKUP_LENGTH ? parser.replace(text, autolinkFilter) : _.escape(text);
    }
const formattedTransactionDescription = getParsedLink(transactionDescription);

Then we pass that formated description to the title of MenuItemWithTopDescription in the code below.

App/src/components/ReportActionItem/MoneyRequestView.js

Lines 72 to 78 in 58dc0c9

	<MenuItemWithTopDescription
	description={translate('common.description')}
	title={transactionDescription}
	disabled={isSettled}
	// shouldShowRightIcon={!isSettled}
	// onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(props.report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
	/>

We can then add another view here to handle the rendered html specifically based on a prop we pass through:

App/src/components/MenuItem.js

Lines 205 to 222 in 9a6b4a8

	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	{Boolean(props.title) && (
	<Text
	style={titleTextStyle}
	numberOfLines={props.numberOfLinesTitle || undefined}
	>
	{convertToLTR(props.title)}
	</Text>
	)}
	{Boolean(props.shouldShowTitleIcon) && (
	<View style={[styles.ml2]}>
	<Icon
	src={props.titleIcon}
	fill={themeColors.iconSuccessFill}
	/>
	</View>
	)}
	</View>

or replace the Title Text section in line 207 with:

<RenderHTML html={`<comment>${props.title}</comment>`} />

What alternative solutions did you explore? (Optional)

function getParsedLink(text) {
        const parser = new ExpensiMark();
        const autolinkFilter = ['autolink', 'link']
        return text.length < CONST.MAX_MARKUP_LENGTH ? parser.replace(text, autolinkFilter) : _.escape(text);
    }

[JmillsExpensify]

Do we just only want to add support for hyperlink in task description or support all Markdown styling features that chat supports?

Great question. I think we want to keep it simple for now, and just focus on supporting hyperlinks. cc @shawnborton @trjExpensify in case ya'll are thinking about it differently.

[WikusKriek]

Proposal

Updated

[trjExpensify]

Yeah, I think it's cool to tackle hyperlinks as a first step and not bloat this issue.

[JmillsExpensify]

@thesahindia Mind commenting on the proposals thus far?

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

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

• fix: Parse Descriptions as Html for links #27462

If no regressions arise, payment will be issued on 2023-09-27. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @narefyev91 does not require payment (Contractor)
• @jeet-dhandha requires payment offer (Contributor)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

@JmillsExpensify, @narefyev91, @thienlnam, @jeet-dhandha Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jeet-dhandha]

Hold for payment

[melvin-bot]

@JmillsExpensify, @narefyev91, @thienlnam, @jeet-dhandha Eep! 4 days overdue now. Issues have feelings too...

[thienlnam]

This is ready for payment cc @JmillsExpensify

[jeet-dhandha]

@JmillsExpensify Let's cancel my payment as its been too long for payment and also Regressions were happening due to less testing and discussion on both of our ends.

Let's make this a learning to not implement any feature until all the cases are covered.

[JmillsExpensify]

To clarify, you don't wish to be paid for this issue/PR?

[jeet-dhandha]

Nothing just handle the payment as usual.

[JmillsExpensify]

Payment summary:

• Contributor: @jeet-dhandha $1,500 (incl. urgency bonus)

[JmillsExpensify]

Offer has been sent via Upwork.

[jeet-dhandha]

@JmillsExpensify I got payment from service account for $1000 i need just extra $500 payment.

[jeet-dhandha]

@JmillsExpensify Can you update the price of new contract to $500 ?

[JmillsExpensify]

Will do! Updating now.

[JmillsExpensify]

Should be all set here!