Merge pull request Expensify#30193 from Victor-Nyagudi/fix/27544-inco…

…rrect-OD-comment-formatting

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

src/pages/home/report/ReportActionItemFragment.js

@@ -63,6 +63,12 @@ const propTypes = {
     /** Whether the comment is a thread parent message/the first message in a thread */
     isThreadParentMessage: PropTypes.bool,
 
+    /** Whether the report action type is 'APPROVED' or 'SUBMITTED'. Used to style system messages from Old Dot */
+    isApprovedOrSubmittedReportAction: PropTypes.bool,
+
+    /** Used to format RTL display names in Old Dot system messages e.g. Arabic */
+    isFragmentContainingDisplayName: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 
     /** localization props */
@@ -86,6 +92,8 @@ const defaultProps = {
     delegateAccountID: 0,
     actorIcon: {},
     isThreadParentMessage: false,
+    isApprovedOrSubmittedReportAction: false,
+    isFragmentContainingDisplayName: false,
     displayAsGroup: false,
 };
 
@@ -152,8 +160,15 @@ function ReportActionItemFragment(props) {
                 </Text>
             );
         }
-        case 'TEXT':
-            return (
+        case 'TEXT': {
+            return props.isApprovedOrSubmittedReportAction ? (
+                <Text
+                    numberOfLines={props.isSingleLine ? 1 : undefined}
+                    style={[styles.chatItemMessage, styles.colorMuted]}
+                >
+                    {props.isFragmentContainingDisplayName ? convertToLTR(props.fragment.text) : props.fragment.text}
+                </Text>
+            ) : (
                 <UserDetailsTooltip
                     accountID={props.accountID}
                     delegateAccountID={props.delegateAccountID}
@@ -167,6 +182,7 @@ function ReportActionItemFragment(props) {
                     </Text>
                 </UserDetailsTooltip>
             );
+        }
         case 'LINK':
             return <Text>LINK</Text>;
         case 'INTEGRATION_COMMENT':

src/pages/home/report/ReportActionItemMessage.js

@@ -7,6 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import styles from '@styles/styles';
+import CONST from '@src/CONST';
 import ReportActionItemFragment from './ReportActionItemFragment';
 import reportActionPropTypes from './reportActionPropTypes';
 
@@ -47,23 +48,45 @@ function ReportActionItemMessage(props) {
         }
     }
 
+    const isApprovedOrSubmittedReportAction = _.contains([CONST.REPORT.ACTIONS.TYPE.APPROVED, CONST.REPORT.ACTIONS.TYPE.SUBMITTED], props.action.actionName);
+
+    /**
+     * Get the ReportActionItemFragments
+     * @param {Boolean} shouldWrapInText determines whether the fragments are wrapped in a Text component
+     * @returns {Object} report action item fragments
+     */
+    const renderReportActionItemFragments = (shouldWrapInText) => {
+        const reportActionItemFragments = _.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}
+                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
+                // Since system messages from Old Dot begin with the person who performed the action,
+                // the first fragment will contain the person's display name and their email. We'll use this
+                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
+                // formatting.
+                isFragmentContainingDisplayName={index === 0}
+            />
+        ));
+
+        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
+        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
+
+        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
+    };
+
     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}
-                    />
-                ))
+                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
             ) : (
                 <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>
             )}