Fix/27544 Incorrect Old Dot comment formatting when viewed on New Dot

src/pages/home/report/ReportActionItemFragment.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {memo} from 'react';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -63,6 +64,9 @@ const propTypes = {
     /** Whether the comment is a thread parent message/the first message in a thread */
     isThreadParentMessage: PropTypes.bool,
 
+    /** The report's action name/type e.g. APPROVED, SUBMITTED, etc. */
+    actionName: PropTypes.string,
+
     ...windowDimensionsPropTypes,
 
     /** localization props */
@@ -86,6 +90,7 @@ const defaultProps = {
     delegateAccountID: 0,
     actorIcon: {},
     isThreadParentMessage: false,
+    actionName: '',
     displayAsGroup: false,
 };
 
@@ -161,7 +166,11 @@ function ReportActionItemFragment(props) {
                 >
                     <Text
                         numberOfLines={props.isSingleLine ? 1 : undefined}
-                        style={[styles.chatItemMessageHeaderSender, props.isSingleLine ? styles.pre : styles.preWrap]}
+                        style={[
+                            styles.chatItemMessageHeaderSender,
+                            props.isSingleLine ? styles.pre : styles.preWrap,
+                            _.contains([CONST.REPORT.ACTIONS.TYPE.APPROVED, CONST.REPORT.ACTIONS.TYPE.SUBMITTED], props.actionName) && {color: styles.colorMuted.color, fontWeight: 'normal'},
+                        ]}
                     >
                         {props.fragment.text}
                     </Text>

src/pages/home/report/ReportActionItemMessage.js

@@ -9,6 +9,7 @@ import * as ReportUtils from '../../../libs/ReportUtils';
 import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 import reportActionPropTypes from './reportActionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** The report action */
@@ -47,25 +48,42 @@ function ReportActionItemMessage(props) {
         }
     }
 
+    const isApprovedOrSubmittedReportActionType = _.contains([CONST.REPORT.ACTIONS.TYPE.APPROVED, CONST.REPORT.ACTIONS.TYPE.SUBMITTED], props.action.actionName);
+
+    const flaggedContentText = <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>;
+
+    /**
+     * Get a ReportActionItemFragment
+     * @param {Object} fragment the current message fragment
+     * @param {Number} index the current message fragment's index
+     * @returns {Object} report action item fragment
+     */
+    const renderReportActionItemFragment = (fragment, index) => (
+        <ReportActionItemFragment
+            key={`actionFragment-${props.action.reportActionID}-${index}`}
+            fragment={fragment}
+            iouMessage={iouMessage}
+            isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(props.action, props.reportID)}
+            attachmentInfo={props.action.attachmentInfo}
+            pendingAction={props.action.pendingAction}
+            source={lodashGet(props.action, 'originalMessage.source')}
+            accountID={props.action.actorAccountID}
+            style={props.style}
+            displayAsGroup={props.displayAsGroup}
+            actionName={props.action.actionName}
+        />
+    );
+
     return (
         <View style={[styles.chatItemMessage, !props.displayAsGroup && isAttachment ? styles.mt2 : {}, ...props.style]}>
-            {!props.isHidden ? (
-                _.map(messages, (fragment, index) => (
-                    <ReportActionItemFragment
-                        key={`actionFragment-${props.action.reportActionID}-${index}`}
-                        fragment={fragment}
-                        iouMessage={iouMessage}
-                        isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(props.action, props.reportID)}
-                        attachmentInfo={props.action.attachmentInfo}
-                        pendingAction={props.action.pendingAction}
-                        source={lodashGet(props.action, 'originalMessage.source')}
-                        accountID={props.action.actorAccountID}
-                        style={props.style}
-                        displayAsGroup={props.displayAsGroup}
-                    />
-                ))
+            {isApprovedOrSubmittedReportActionType ? (
+                // Wrapping 'ReportActionItemFragment' inside '<Text>' so that text isn't broken up into separate lines when
+                // there are multiple messages of type 'TEXT', as seen when a report is submitted/approved from a
+                // policy on Old Dot and then viewed on New Dot.
+
+                <Text>{!props.isHidden ? _.map(messages, (fragment, index) => renderReportActionItemFragment(fragment, index)) : flaggedContentText}</Text>
             ) : (
-                <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>
+                <>{!props.isHidden ? _.map(messages, (fragment, index) => renderReportActionItemFragment(fragment, index)) : flaggedContentText}</>
             )}
         </View>
     );