Merge pull request #15340 from tienifr/fix/15131-Special-html-charact…

…ers-are-not-escaped-in-name-and-can-bug-out-UI Fix/15131: Special html characters like &nbsp are not escaped in name and can bug out the UI
Expensify · Mar 28, 2023 · 9545850 · 9545850
2 parents 69bba91 + 335d87c
commit 9545850
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 11 deletions.
diff --git a/src/components/ReportActionItem/IOUQuote.js b/src/components/ReportActionItem/IOUQuote.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -76,14 +75,14 @@ const IOUQuote = props => (
                 <Text style={[styles.flex1, styles.mr2]}>
                     <Text style={props.shouldAllowViewDetails && styles.chatItemMessageLink}>
                         {/* Get first word of IOU message */}
-                        {Str.htmlDecode(fragment.text.split(' ')[0])}
+                        {fragment.text.split(' ')[0]}
                     </Text>
                     <Text style={[styles.chatItemMessage, props.shouldAllowViewDetails
                         ? styles.cursorPointer
                         : styles.cursorDefault]}
                     >
                         {/* Get remainder of IOU message */}
-                        {Str.htmlDecode(fragment.text.substring(fragment.text.indexOf(' ')))}
+                        {fragment.text.substring(fragment.text.indexOf(' '))}
                     </Text>
                 </Text>
                 <Icon src={Expensicons.ArrowRight} fill={props.shouldAllowViewDetails ? StyleUtils.getIconFillColor(getButtonState(props.isHovered)) : themeColors.transparent} />

diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import Str from 'expensify-common/lib/str';
 import styles from '../styles/styles';
 import CONST from '../CONST';
 import * as IOU from '../libs/actions/IOU';
@@ -77,7 +76,7 @@ class ReportTransaction extends Component {
                         wrapperStyles={[styles.reportTransactionWrapper]}
                     >
                         <Text style={[styles.chatItemMessage]}>
-                            {Str.htmlDecode(this.props.action.message[0].html)}
+                            {this.props.action.message[0].text}
                         </Text>
                     </ReportActionItemSingle>
                     {this.props.canBeRejected && (

diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -1,6 +1,5 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
 import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
 import focusApp from './focusApp';
 import * as AppUpdate from '../../actions/AppUpdate';
 import EXPENSIFY_ICON_URL from '../../../../assets/images/expensify-logo-round-clearspace.png';
@@ -107,10 +106,10 @@ export default {
      */
     pushReportCommentNotification({reportAction, onClick}, usesIcon = false) {
         const {person, message} = reportAction;
-        const plainTextPerson = Str.htmlDecode(_.map(person, f => f.text).join());
+        const plainTextPerson = _.map(person, f => f.text).join();
 
         // Specifically target the comment part of the message
-        const plainTextMessage = Str.htmlDecode((_.find(message, f => f.type === 'COMMENT') || {}).text);
+        const plainTextMessage = (_.find(message, f => f.type === 'COMMENT') || {}).text;
 
         push({
             title: plainTextPerson,

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
@@ -328,7 +328,7 @@ function createOption(logins, personalDetails, report, reportActions = {}, {
         if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml})) {
             lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`;
         } else {
-            lastMessageTextFromReport = Str.htmlDecode(report ? report.lastMessageText : '');
+            lastMessageTextFromReport = report ? report.lastMessageText : '';
         }
 
         const lastActorDetails = personalDetailMap[report.lastActorEmail] || null;

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
@@ -986,7 +986,6 @@ function getIOUReportActionMessage(type, total, participants, comment, currency,
     const who = displayNames.length < 3
         ? displayNames.join(' and ')
         : `${displayNames.slice(0, -1).join(', ')}, and ${_.last(displayNames)}`;
-
     let paymentMethodMessage;
     switch (paymentType) {
         case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -142,7 +142,7 @@ const ReportActionItemFragment = (props) => {
                         numberOfLines={props.isSingleLine ? 1 : undefined}
                         style={[styles.chatItemMessageHeaderSender, (props.isSingleLine ? styles.pre : styles.preWrap)]}
                     >
-                        {Str.htmlDecode(props.fragment.text)}
+                        {props.fragment.text}
                     </Text>
                 </Tooltip>
             );