Conditional HTML parsing for Displaynames and HTML parsing for threadheaders

src/components/DisplayNames/index.native.tsx

@@ -8,8 +8,11 @@ import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragm
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
-function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText, forwardedFSClass, testID}: DisplayNamesProps) {
+function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText, forwardedFSClass, testID, shouldParseHtml = false}: DisplayNamesProps) {
     const {translate} = useLocalize();
+    const title = shouldParseHtml
+        ? StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')
+        : StringUtils.lineBreaksToSpaces(fullTitle) || translate('common.hidden');
     const titleContainsTextAndCustomEmoji = useMemo(() => containsCustomEmoji(fullTitle) && !containsOnlyCustomEmoji(fullTitle), [fullTitle]);
     return (
         <Text
@@ -21,11 +24,11 @@ function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfL
         >
             {titleContainsTextAndCustomEmoji ? (
                 <TextWithEmojiFragment
-                    message={StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')}
+                    message={title}
                     style={textStyles}
                 />
             ) : (
-                StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')
+                title
             )}
             {renderAdditionalText?.()}
         </Text>

src/components/DisplayNames/index.tsx

@@ -16,9 +16,12 @@ function DisplayNames({
     displayNamesWithTooltips,
     renderAdditionalText,
     forwardedFSClass,
+    shouldParseHtml = false,
 }: DisplayNamesProps) {
     const {translate} = useLocalize();
-    const title = StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden');
+    const title = shouldParseHtml
+        ? StringUtils.lineBreaksToSpaces(Parser.htmlToText(fullTitle)) || translate('common.hidden')
+        : StringUtils.lineBreaksToSpaces(fullTitle) || translate('common.hidden');
 
     if (!tooltipEnabled) {
         return (

src/components/DisplayNames/types.ts

@@ -49,6 +49,9 @@ type DisplayNamesProps = ForwardedFSClassProps & {
 
     /** TestID indicating order */
     testID?: number;
+
+    /** Whether to parse HTML in the fullTitle */
+    shouldParseHtml?: boolean;
 };
 
 export default DisplayNamesProps;

src/pages/ReportDetailsPage.tsx

@@ -41,7 +41,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportDetailsNavigatorParamList} from '@libs/Navigation/types';
 import {getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
-import Parser from '@libs/Parser';
 import Permissions from '@libs/Permissions';
 import {isPolicyAdmin as isPolicyAdminUtil, isPolicyEmployee as isPolicyEmployeeUtil, shouldShowPolicy} from '@libs/PolicyUtils';
 import {getOneTransactionThreadReportID, getOriginalMessage, getTrackExpenseActionableWhisper, isDeletedAction, isMoneyRequestAction, isTrackExpenseAction} from '@libs/ReportActionsUtils';
@@ -331,8 +330,7 @@ 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 reportName = Parser.htmlToText(getReportName(report, undefined, undefined, undefined, undefined, reportAttributes));
+    const reportName = getReportName(report, undefined, undefined, undefined, undefined, reportAttributes);
 
     const additionalRoomDetails =
         (isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom

tests/unit/DisplayNamesShouldParseHTMLTest.tsx

@@ -0,0 +1,113 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import DisplayNames from '@components/DisplayNames';
+
+jest.mock('@hooks/useLocalize', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: () => ({
+        translate: jest.fn((key: string): string => {
+            if (key === 'common.hidden') {
+                return 'hidden';
+            }
+            return key;
+        }),
+    }),
+}));
+
+jest.mock('@libs/Parser', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: {
+        htmlToText: jest.fn((html: string) => {
+            // Simulate stripTag behavior: remove anything that looks like HTML tags
+            return html.replace(/(<([^>]+)>)/gi, '');
+        }),
+    },
+}));
+
+jest.mock('@libs/StringUtils', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: {
+        lineBreaksToSpaces: jest.fn((text: string) => text),
+    },
+}));
+
+describe('DisplayNames - shouldParseHtml prop', () => {
+    const testTitle = '< >';
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should NOT parse HTML by default (shouldParseHtml defaults to false)', () => {
+        render(
+            <DisplayNames
+                fullTitle={testTitle}
+                numberOfLines={1}
+                tooltipEnabled={false}
+            />,
+        );
+
+        // With shouldParseHtml = false (default), "< >" should be preserved
+        expect(screen.getByText('< >')).toBeTruthy();
+    });
+
+    it('should parse HTML when shouldParseHtml is explicitly set to true', () => {
+        const htmlTitle = '<b>Bold Text</b>';
+        render(
+            <DisplayNames
+                fullTitle={htmlTitle}
+                numberOfLines={1}
+                tooltipEnabled={false}
+                shouldParseHtml
+            />,
+        );
+
+        // With shouldParseHtml = true, HTML tags should be stripped
+        expect(screen.getByText('Bold Text')).toBeTruthy();
+        expect(screen.queryByText('<b>Bold Text</b>')).toBeNull();
+    });
+
+    it('should preserve special characters when shouldParseHtml is false', () => {
+        const specialCharsTitle = '< > & " \' test';
+        render(
+            <DisplayNames
+                fullTitle={specialCharsTitle}
+                numberOfLines={1}
+                tooltipEnabled={false}
+            />,
+        );
+
+        // Special characters should be preserved when not parsing HTML
+        expect(screen.getByText(specialCharsTitle)).toBeTruthy();
+    });
+
+    it('should show "hidden" when title is empty and HTML parsing is disabled', () => {
+        render(
+            <DisplayNames
+                fullTitle=""
+                numberOfLines={1}
+                tooltipEnabled={false}
+            />,
+        );
+
+        expect(screen.getByText('hidden')).toBeTruthy();
+    });
+
+    it('should show "hidden" when title becomes empty after HTML parsing', () => {
+        const onlyTagsTitle = '<div></div>';
+        render(
+            <DisplayNames
+                fullTitle={onlyTagsTitle}
+                numberOfLines={1}
+                tooltipEnabled={false}
+                shouldParseHtml
+            />,
+        );
+
+        // After parsing, only tags remain which get stripped to empty string
+        expect(screen.getByText('hidden')).toBeTruthy();
+    });
+});