[Details Revamp] Allow Editing Report Title from Details Page

src/components/MenuItem.tsx

@@ -260,6 +260,9 @@ type MenuItemBaseProps = {
     /** Text to display under the main item */
     furtherDetails?: string;
 
+    /** Render custom content under the main item */
+    furtherDetailsContent?: () => ReactNode;
+
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
 
@@ -335,6 +338,7 @@ function MenuItem(
         iconRight = Expensicons.ArrowRight,
         furtherDetailsIcon,
         furtherDetails,
+        furtherDetailsContent,
         description,
         helperText,
         helperTextStyle,
@@ -680,6 +684,7 @@ function MenuItem(
                                                                 </Text>
                                                             </View>
                                                         )}
+                                                        {!!furtherDetailsContent && <View style={[styles.flexRow, styles.alignItemsCenter]}>{furtherDetailsContent()}</View>}
                                                         {titleComponent}
                                                     </View>
                                                 </View>

src/components/ReportActionItem/MoneyReportView.tsx

@@ -64,8 +64,11 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) {
                 <>
                     {ReportUtils.reportFieldsEnabled(report) &&
                         sortedPolicyReportFields.map((reportField) => {
-                            const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField);
-                            const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue;
+                            if (ReportUtils.isReportFieldOfTypeTitle(reportField)) {
+                                return null;
+                            }
+
+                            const fieldValue = reportField.value ?? reportField.defaultValue;
                             const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
                             const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
 

src/pages/ReportDetailsPage.tsx

@@ -1,6 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {Str} from 'expensify-common';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -527,6 +528,45 @@
         </OfflineWithFeedback>
     );
 
+    const titleField = useMemo<OnyxTypes.PolicyReportField | undefined>((): OnyxTypes.PolicyReportField | undefined => {
+        const fields = ReportUtils.getAvailableReportFields(report, Object.values(policy?.fieldList ?? {}));
+        return fields.find((reportField) => ReportUtils.isReportFieldOfTypeTitle(reportField));
+    }, []);
+    const fieldKey = ReportUtils.getReportFieldKey(titleField?.fieldID ?? '-1');
+    const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, titleField, policy);
+
+    const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled;
+
+    const nameSectionTitleField = titleField && (
+        <OfflineWithFeedback
+            pendingAction={report.pendingFields?.[fieldKey]}
+            errors={report.errorFields?.[fieldKey]}
+            errorRowStyles={styles.ph5}
+            key={`menuItem-${fieldKey}`}
+            onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}
+        >
+            <View style={[styles.flex1, !isFieldDisabled && styles.mt3]}>
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon={!isFieldDisabled}
+                    interactive={!isFieldDisabled}
+                    title={reportName}
+                    titleStyle={styles.newKansasLarge}
+                    shouldCheckActionAllowedOnPress={false}
+                    description={Str.UCFirst(titleField.name)}
+                    onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '-1', titleField.fieldID ?? '-1'))}
+                    furtherDetailsContent={() => (
+                        <ParentNavigationSubtitle
+                            parentNavigationSubtitleData={parentNavigationSubtitleData}
+                            parentReportID={report?.parentReportID}
+                            parentReportActionID={report?.parentReportActionID}
+                            pressableStyles={[styles.mt1, styles.mw100]}
+                        />
+                    )}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+
     const navigateBackToAfterDelete = useRef<Route>();
 
     const deleteTransaction = useCallback(() => {
@@ -555,9 +595,11 @@
                 <ScrollView style={[styles.flex1]}>
                     <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
                         {renderedAvatar}
-                        {isExpenseReport && nameSectionExpenseIOU}
+                        {isExpenseReport && !shouldShowTitleField && nameSectionExpenseIOU}
                     </View>
 
+                    {isExpenseReport && shouldShowTitleField && nameSectionTitleField}
+
                     {!isExpenseReport && nameSectionGroupWorkspace}
 
                     {shouldShowReportDescription && (