Merge pull request Expensify#75988 from whiletrace/hotf#75457-v2

 Group - Group chat header hidden; tap shows empty name while preview…

Author: carlosmiceli

src/components/DisplayNames/types.ts

@@ -52,6 +52,9 @@ type DisplayNamesProps = ForwardedFSClassProps & {
     /** If we should add an ellipsis after the participants list */
     shouldAddEllipsis?: boolean;
 
+    /** Whether to parse HTML in the title */
+    shouldParseHtml?: boolean;
+
     /** Additional Text component to render after the displayNames */
     renderAdditionalText?: () => React.ReactNode;
 

src/pages/ReportDetailsPage.tsx

@@ -338,7 +338,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(getReportNameFromReportNameUtils(report, reportAttributes));
+    const reportName = isGroupChat ? getReportNameFromReportNameUtils(report, reportAttributes) : Parser.htmlToText(getReportNameFromReportNameUtils(report, reportAttributes));
     const additionalRoomDetails =
         (isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom
             ? chatRoomSubtitle
@@ -550,6 +550,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
         isSelfDM,
         isArchivedRoom,
         isGroupChat,
+        expensifyIcons,
         isDefaultRoom,
         isChatThread,
         isPolicyEmployee,
@@ -665,6 +666,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
         policy,
         participants,
         moneyRequestReport?.reportID,
+        expensifyIcons.Camera,
     ]);
 
     const canJoin = canJoinChat(report, parentReportAction, policy, !!reportNameValuePairs?.private_isArchived);
@@ -693,6 +695,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
                         <DisplayNames
                             fullTitle={reportName}
                             displayNamesWithTooltips={displayNamesWithTooltips}
+                            shouldParseFullTitle={!isGroupChat}
                             tooltipEnabled
                             numberOfLines={isChatRoom && !isChatThread ? 0 : 1}
                             textStyles={[styles.textHeadline, styles.textAlignCenter, isChatRoom && !isChatThread ? undefined : styles.pre]}

src/pages/home/HeaderView.tsx

@@ -156,7 +156,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const isPersonalExpenseChat = isPolicyExpenseChat && isCurrentUserSubmitter(report);
     const hasTeam2025Pricing = useHasTeam2025Pricing();
     // This is used to ensure that we display the text exactly as the user entered it when displaying thread header text, instead of parsing their text to HTML.
-    const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT;
+    const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat;
     const subscriptionPlan = useSubscriptionPlan();
     const ancestors = useAncestors(report);
 
@@ -303,7 +303,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                                             <DisplayNames
                                                 fullTitle={title}
                                                 displayNamesWithTooltips={displayNamesWithTooltips}
-                                                shouldParseFullTitle={shouldParseFullTitle}
+                                                shouldParseFullTitle={shouldParseFullTitle && !isGroupChat}
                                                 tooltipEnabled
                                                 numberOfLines={1}
                                                 textStyles={[styles.headerText, styles.pre]}

tests/ui/components/DisplayNames.test.tsx

@@ -0,0 +1,73 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import DisplayNames from '@components/DisplayNames';
+import Parser from '@libs/Parser';
+
+jest.mock('@libs/Parser', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: {
+        htmlToText: jest.fn((html: string) => html.replaceAll(/<[^>]*>/g, '')),
+    },
+}));
+
+jest.mock('@hooks/useLocalize', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(() => ({
+        translate: jest.fn((key: string) => key),
+    })),
+}));
+
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const mockHtmlToText = Parser.htmlToText as jest.Mock;
+
+describe('DisplayNames HTML Parsing', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('DisplayNames Component - shouldParseFullTitle prop', () => {
+        it('should parse HTML when shouldParseFullTitle is true', () => {
+            const htmlTitle = '<strong>Test Title</strong>';
+
+            render(
+                <DisplayNames
+                    fullTitle={htmlTitle}
+                    numberOfLines={1}
+                    shouldParseFullTitle
+                />,
+            );
+
+            expect(mockHtmlToText).toHaveBeenCalledWith(htmlTitle);
+            expect(mockHtmlToText).toHaveBeenCalledTimes(1);
+        });
+
+        it('should NOT parse HTML when shouldParseFullTitle is false', () => {
+            const htmlTitle = '<strong>Test Title</strong>';
+
+            render(
+                <DisplayNames
+                    fullTitle={htmlTitle}
+                    numberOfLines={1}
+                    shouldParseFullTitle={false}
+                />,
+            );
+            expect(mockHtmlToText).not.toHaveBeenCalled();
+            expect(screen.getByText(htmlTitle)).toBeTruthy();
+        });
+
+        it('HTML is parsed by default when shouldParseFullTitle is not provided', () => {
+            const htmlTitle = '<em>Test Title </em>';
+
+            render(
+                <DisplayNames
+                    fullTitle={htmlTitle}
+                    numberOfLines={1}
+                />,
+            );
+
+            expect(mockHtmlToText).toHaveBeenCalledWith(htmlTitle);
+        });
+    });
+});

tests/unit/Search/SearchContextTest.tsx

@@ -57,6 +57,7 @@ const mockTransaction = {
     transactionID: '1',
     action: 'approve',
     allActions: ['approve'],
+    canDelete: true,
     formattedFrom: 'Main Applause QA',
     formattedTo: 'Main Applause QA',
     formattedTotal: -1284,