fix: port CREATED_REPORT_FOR_UNAPPROVED_TRANSACTIONS case to computeReportName

src/libs/ReportNameUtils.ts

@@ -6,7 +6,6 @@
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {LocaleContextProps, LocalizedTranslate} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
-import IntlStore from '@src/languages/IntlStore';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {
     PersonalDetails,
@@ -25,7 +24,7 @@
 import {convertToDisplayString} from './CurrencyUtils';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from './LocalePhoneNumber';
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-import {translateLocal, translate as translateWithLocale} from './Localize';
+import {translateLocal} from './Localize';
 // eslint-disable-next-line import/no-cycle
 import {getForReportAction, getMovedReportID} from './ModifiedExpenseMessage';
 import Parser from './Parser';
@@ -142,7 +141,7 @@
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value;
@@ -783,6 +782,14 @@
         return report?.reportName;
     }
 
+    if (isActionOfType(parentReportAction, CONST.REPORT.ACTIONS.TYPE.CREATED_REPORT_FOR_UNAPPROVED_TRANSACTIONS)) {
+        const {originalID} = getOriginalMessage(parentReportAction) ?? {};
+        const originalReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${originalID}`];
+        const reportName = computeReportName(originalReport, reports, policies, transactions, allReportNameValuePairs, personalDetailsList, reportActions, currentUserAccountID);
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        return getCreatedReportForUnapprovedTransactionsMessage(originalID, reportName, translateLocal);
+    }
+
     if (isTaskReport(report)) {
         const taskName = report?.reportName ?? '';
 
@@ -871,37 +878,16 @@
 }
 
 /**
- * Check for existence of report name in derived values first, then fall back to the report object
+ * Returns the report name from OnyxDerived `reportAttributes` when available, falling back to the raw report object.
  *
- * @param report
- * @param reportAttributesDerivedValue
- * @param reports
- * @param parentReportActionParam
+ * **Always prefer passing `reportAttributesDerivedValue` from the derived Onyx key** (`ONYXKEYS.DERIVED.REPORT_ATTRIBUTES`).
+ * The fallback to `report.reportName` exists only for edge-cases where the derived value is not yet populated.
+ * Do NOT compute any part of the name here. Adjust `computeReportName` (internal) function if any change to report name are required.
  */
-function getReportName(
-    report?: Report,
-    reportAttributesDerivedValue?: ReportAttributesDerivedValue['reports'],
-    reports?: OnyxCollection<Report>,
-    parentReportActionParam?: OnyxEntry<ReportAction> | null,
-): string {
+function getReportName(report?: Report, reportAttributesDerivedValue?: ReportAttributesDerivedValue['reports']): string {
     if (!report || !report.reportID) {
         return '';
     }
-
-    const parentReportAction = parentReportActionParam;
-    if (isActionOfType(parentReportAction, CONST.REPORT.ACTIONS.TYPE.CREATED_REPORT_FOR_UNAPPROVED_TRANSACTIONS)) {
-        const {originalID} = getOriginalMessage(parentReportAction) ?? {};
-        const originalReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${originalID}`];
-        const originalReportName = originalReport ? getReportName(originalReport, reportAttributesDerivedValue) : '';
-        const currentLocale = IntlStore.getCurrentLocale();
-        const translateInCurrentLocale: LocalizedTranslate = (path, ...parameters) => translateWithLocale(currentLocale, path, ...parameters);
-        return getCreatedReportForUnapprovedTransactionsMessage(originalID, originalReportName, translateInCurrentLocale);
-    }
-
-    if (isInvoiceRoom(report)) {
-        return getInvoicesChatName({report, receiverPolicy: undefined, personalDetails: allPersonalDetails});
-    }
-
     return reportAttributesDerivedValue?.[report.reportID]?.reportName ?? report.reportName ?? '';
 }
 

src/pages/inbox/HeaderView.tsx

@@ -130,7 +130,6 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const isGroupChat = isGroupChatReportUtils(report) || isDeprecatedGroupDM(report, isReportArchived);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [onboarding] = useOnyx(ONYXKEYS.NVP_ONBOARDING);
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const allParticipants = getParticipantsAccountIDsForDisplay(report, false, true, undefined, reportMetadata);
     const shouldAddEllipsis = allParticipants?.length > CONST.DISPLAY_PARTICIPANTS_LIMIT;
     const participants = allParticipants.slice(0, CONST.DISPLAY_PARTICIPANTS_LIMIT);
@@ -151,7 +150,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
     const isReportHeaderDataArchived = useReportIsArchived(reportHeaderData?.reportID);
     const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     // Use sorted display names for the title for group chats on native small screen widths
-    const title = getReportName(reportHeaderData, reportAttributes, reports, parentReportAction);
+    const title = getReportName(reportHeaderData, reportAttributes);
     const subtitle = getChatRoomSubtitle(reportHeaderData, false, isReportHeaderDataArchived);
     // This is used to get the status badge for invoice report subtitle.
     const statusTextForInvoiceReport = isParentInvoiceAndIsChatThread

tests/ui/components/HeaderViewTest.tsx

@@ -6,6 +6,7 @@ import ComposeProviders from '@components/ComposeProviders';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import OnyxListItemProvider from '@components/OnyxListItemProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import initOnyxDerivedValues from '@libs/actions/OnyxDerived';
 import type Navigation from '@libs/Navigation/Navigation';
 import {buildOptimisticCreatedReportForUnapprovedAction} from '@libs/ReportUtils';
 import HeaderView from '@pages/inbox/HeaderView';
@@ -16,6 +17,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 import {createRandomReport} from '../../utils/collections/reports';
+import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates';
 import waitForBatchedUpdatesWithAct from '../../utils/waitForBatchedUpdatesWithAct';
 
 jest.mock('@react-navigation/native', () => {
@@ -49,6 +51,8 @@ describe('HeaderView', () => {
 
     beforeAll(() => {
         Onyx.init({keys: ONYXKEYS});
+        initOnyxDerivedValues();
+        return waitForBatchedUpdates();
     });
 
     it('should update invoice room title when the invoice receiver detail is updated', async () => {
@@ -64,11 +68,14 @@ describe('HeaderView', () => {
             },
         };
         await act(async () => {
-            await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
-                [accountID]: {
-                    displayName,
+            await Onyx.multiSet({
+                [`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`]: report,
+                [ONYXKEYS.PERSONAL_DETAILS_LIST]: {
+                    [accountID]: {
+                        displayName,
+                    },
                 },
-            });
+            } as unknown as KeyValueMapping);
         });
 
         render(
@@ -150,17 +157,21 @@ describe('HeaderView', () => {
 
         const threadReport = {
             ...createRandomReport(Number(threadReportID), undefined),
+            type: CONST.REPORT.TYPE.CHAT,
             parentReportID,
             parentReportActionID: parentReportAction.reportActionID,
         };
 
+        // Set report actions first so they're available when the derived value computes report names
+        await Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}` as `${typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS}${string}`, {
+            [parentReportAction.reportActionID]: parentReportAction,
+        });
+        await waitForBatchedUpdates();
+
         await Onyx.multiSet({
             [`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`]: originalReport,
             [`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`]: parentReport,
             [`${ONYXKEYS.COLLECTION.REPORT}${threadReportID}`]: threadReport,
-            [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`]: {
-                [parentReportAction.reportActionID]: parentReportAction,
-            },
         } as unknown as KeyValueMapping);
 
         render(