Chat- Thread message is not shown in the detail page adding conditional parsing logic to ReportDetailsPage.tsx

src/pages/ReportDetailsPage.tsx

@@ -350,10 +350,11 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
 
     const shouldShowLeaveButton = canLeaveChat(report, policy, !!reportNameValuePairs?.private_isArchived);
     const shouldShowGoToWorkspace = shouldShowPolicy(policy, false, currentUserPersonalDetails?.email) && !policy?.isJoinRequestPending;
+
     const reportForHeader = useMemo(() => getReportForHeader(report), [report]);
-    const reportName = isGroupChat
-        ? getReportNameFromReportNameUtils(reportForHeader, reportAttributes)
-        : Parser.htmlToText(getReportNameFromReportNameUtils(reportForHeader, reportAttributes));
+    const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat;
+    const rawReportName = getReportNameFromReportNameUtils(reportForHeader, reportAttributes);
+    const reportName = shouldParseFullTitle ? Parser.htmlToText(rawReportName) : rawReportName;
     const additionalRoomDetails =
         (isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom
             ? chatRoomSubtitle
@@ -745,6 +746,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
                     </View>
                     {isPolicyAdmin ? (
                         <PressableWithoutFeedback
+                            sentryLabel="nameSectionExpenseIOU"
                             style={[styles.w100]}
                             disabled={policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
                             role={CONST.ROLE.BUTTON}

tests/ui/GroupChatNameTests.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable testing-library/no-node-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import {act, render, screen, waitFor} from '@testing-library/react-native';
+import {act, cleanup, render, screen, waitFor} from '@testing-library/react-native';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import {setSidebarLoaded} from '@userActions/App';
@@ -241,6 +241,10 @@ describe('Tests for group chat name', () => {
         return Onyx.clear().then(waitForBatchedUpdates);
     });
 
+    afterEach(() => {
+        cleanup();
+    });
+
     const participantAccountIDs4 = [USER_A_ACCOUNT_ID, USER_B_ACCOUNT_ID, USER_C_ACCOUNT_ID, USER_D_ACCOUNT_ID];
     const participantAccountIDs8 = [...participantAccountIDs4, USER_E_ACCOUNT_ID, USER_F_ACCOUNT_ID, USER_G_ACCOUNT_ID, USER_H_ACCOUNT_ID];
 

tests/unit/components/reportDetails/ReportDetailsPageTest.tsx

@@ -0,0 +1,94 @@
+import {act, render} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxListItemProvider from '@components/OnyxListItemProvider';
+import type Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types';
+import Parser from '@libs/Parser';
+import ReportDetailsPage from '@pages/ReportDetailsPage';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {Report, ReportAction} from '@src/types/onyx';
+import createRandomReportAction from '../../../utils/collections/reportActions';
+import {createRandomReport} from '../../../utils/collections/reports';
+import waitForBatchedUpdatesWithAct from '../../../utils/waitForBatchedUpdatesWithAct';
+
+jest.mock('@src/components/ConfirmedRoute.tsx');
+
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useIsFocused: jest.fn(),
+        useRoute: jest.fn(),
+        usePreventRemove: jest.fn(),
+    };
+});
+
+const mockHtmlToText = jest.spyOn(Parser, 'htmlToText');
+
+describe('ReportDetailsPage', () => {
+    beforeAll(() => {
+        Onyx.init({
+            keys: ONYXKEYS,
+            evictableKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+        });
+    });
+
+    beforeEach(() => {
+        mockHtmlToText.mockClear();
+    });
+
+    afterEach(async () => {
+        await act(async () => {
+            await Onyx.clear();
+        });
+    });
+
+    it('should not call Parser.htmlToText when parentReportAction is ADD_COMMENT', async () => {
+        const reportID = '10';
+        const parentReportID = '20';
+        const parentActionID = '100';
+
+        const parentReportAction = {
+            ...createRandomReportAction(Number(parentActionID)),
+            actionName: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
+        } as ReportAction;
+
+        const report: Report = {
+            ...createRandomReport(Number(reportID), undefined),
+            parentReportID,
+            parentReportActionID: parentActionID,
+        };
+
+        await act(async () => {
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`, createRandomReport(Number(parentReportID), undefined));
+            await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`, {
+                [parentActionID]: parentReportAction,
+            });
+        });
+
+        render(
+            <OnyxListItemProvider>
+                <LocaleContextProvider>
+                    <ReportDetailsPage
+                        betas={[]}
+                        isLoadingReportData={false}
+                        navigation={{} as PlatformStackScreenProps<ReportDetailsNavigatorParamList, typeof SCREENS.REPORT_DETAILS.ROOT>['navigation']}
+                        policy={undefined}
+                        report={report}
+                        reportMetadata={undefined}
+                        route={{params: {reportID}} as PlatformStackScreenProps<ReportDetailsNavigatorParamList, typeof SCREENS.REPORT_DETAILS.ROOT>['route']}
+                    />
+                </LocaleContextProvider>
+            </OnyxListItemProvider>,
+        );
+
+        await waitForBatchedUpdatesWithAct();
+
+        expect(mockHtmlToText).not.toHaveBeenCalled();
+    });
+});