fix: Parse Descriptions as Html for links

src/components/MenuItem.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
@@ -34,6 +35,7 @@ const defaultProps = {
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
+    shouldParseTitle: false,
     wrapperStyle: [],
     style: styles.popoverMenuItem,
     titleStyle: {},
@@ -79,6 +81,7 @@ const defaultProps = {
 
 const MenuItem = React.forwardRef((props, ref) => {
     const {isSmallScreenWidth} = useWindowDimensions();
+    const [html, setHtml] = React.useState('');
 
     const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
@@ -106,6 +109,16 @@ const MenuItem = React.forwardRef((props, ref) => {
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
+    const titleRef = React.useRef('');
+    useEffect(() => {
+        if (!props.title || (titleRef.current.length && titleRef.current === props.title) || !props.shouldParseTitle) {
+            return;
+        }
+        const parser = new ExpensiMark();
+        setHtml(parser.replace(convertToLTR(props.title)));
+        titleRef.current = props.title;
+    }, [props.title, props.shouldParseTitle]);
+
     return (
         <Hoverable>
             {(isHovered) => (
@@ -224,14 +237,17 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && <RenderHTML html={convertToLTR(props.title)} />}
 
-                                            {Boolean(props.title) && !props.shouldRenderAsHTML && (
+                                            {Boolean(props.shouldParseTitle) && Boolean(html.length) && !props.shouldRenderAsHTML && <RenderHTML html={`<comment>${html}</comment>`} />}
+
+                                            {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}
                                                 >
                                                     {convertToLTR(props.title)}
                                                 </Text>
                                             )}
+
                                             {Boolean(props.shouldShowTitleIcon) && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon

src/components/MoneyRequestConfirmationList.js

@@ -455,6 +455,7 @@ function MoneyRequestConfirmationList(props) {
             )}
             <MenuItemWithTopDescription
                 shouldShowRightIcon={!props.isReadOnly}
+                shouldParseTitle
                 title={props.iouComment}
                 description={translate('common.description')}
                 onPress={() => Navigation.navigate(ROUTES.getMoneyRequestDescriptionRoute(props.iouType, props.reportID))}

src/components/ReportActionItem/MoneyRequestView.js

@@ -132,6 +132,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
             <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.comment') || lodashGet(transaction, 'pendingAction')}>
                 <MenuItemWithTopDescription
                     description={translate('common.description')}
+                    shouldParseTitle
                     title={transactionDescription}
                     interactive={canEdit}
                     shouldShowRightIcon={canEdit}

src/components/ReportActionItem/TaskView.js

@@ -119,6 +119,7 @@ function TaskView(props) {
                 </Hoverable>
                 <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}>
                     <MenuItemWithTopDescription
+                        shouldParseTitle
                         description={props.translate('task.description')}
                         title={props.report.description || ''}
                         onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}

src/pages/tasks/NewTaskPage.js

@@ -162,6 +162,7 @@ function NewTaskPage(props) {
                             title={description}
                             onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
                             shouldShowRightIcon
+                            shouldParseTitle
                             numberOfLinesTitle={2}
                             titleStyle={styles.flex1}
                         />