feat: separate subtitle from read-only report title

Author: gijoe0295

src/pages/ReportDetailsPage.tsx

@@ -51,7 +51,6 @@ import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/crea
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportDetailsNavigatorParamList, RightModalNavigatorParamList} 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';
@@ -68,7 +67,6 @@ import {
     createDraftTransactionAndNavigateToParticipantSelector,
     getAvailableReportFields,
     getChatRoomSubtitle,
-    getDisplayNamesWithTooltips,
     getIcons,
     getOriginalReportID,
     getParentNavigationSubtitle,
@@ -109,7 +107,6 @@ import {
     navigateBackOnDeleteTransaction,
     navigateToPrivateNotes,
     shouldDisableRename as shouldDisableRenameUtil,
-    shouldUseFullTitleToDisplay,
 } from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
 import {isDemoTransaction} from '@libs/TransactionUtils';
@@ -163,7 +160,7 @@ const CASES = {
 type CaseID = ValueOf<typeof CASES>;
 
 function ReportDetailsPage({policy, report, route, reportMetadata, reportLoadingState}: ReportDetailsPageProps) {
-    const {translate, localeCompare, formatPhoneNumber} = useLocalize();
+    const {translate, formatPhoneNumber} = useLocalize();
     const {isOffline} = useNetwork();
     const {isRestrictedToPreferredPolicy, preferredPolicyID} = usePreferredPolicy();
     const activePolicy = useActivePolicy();
@@ -206,7 +203,6 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
     const isPolicyAdmin = useMemo(() => isPolicyAdminUtil(policy), [policy]);
     const isPolicyEmployee = useMemo(() => isPolicyEmployeeUtil(report?.policyID, policy), [report?.policyID, policy]);
     const isPolicyExpenseChat = useMemo(() => isPolicyExpenseChatUtil(report), [report]);
-    const shouldUseFullTitle = useMemo(() => shouldUseFullTitleToDisplay(report), [report]);
     const isChatRoom = useMemo(() => isChatRoomUtil(report), [report]);
     const isUserCreatedPolicyRoom = useMemo(() => isUserCreatedPolicyRoomUtil(report), [report]);
     const isDefaultRoom = useMemo(() => isDefaultRoomUtil(report), [report]);
@@ -663,26 +659,11 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
         delegateEmail,
     ]);
 
-    const displayNamesWithTooltips = useMemo(() => {
-        const hasMultipleParticipants = participants.length > 1;
-        return getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participants, personalDetails), hasMultipleParticipants, localeCompare, formatPhoneNumber);
-    }, [participants, personalDetails, localeCompare, formatPhoneNumber]);
-
     const icons = useMemo(
         () => getIcons(report, formatPhoneNumber, personalDetails, null, '', -1, policy, undefined, isReportArchived),
         [report, formatPhoneNumber, personalDetails, policy, isReportArchived],
     );
 
-    const chatRoomSubtitleText = chatRoomSubtitle ? (
-        <DisplayNames
-            fullTitle={chatRoomSubtitle}
-            tooltipEnabled
-            numberOfLines={1}
-            textStyles={[styles.sidebarLinkText, styles.textLabelSupporting, styles.pre, styles.mt1, styles.textAlignCenter]}
-            shouldUseFullTitle
-        />
-    ) : null;
-
     const renderedAvatar = useMemo(() => {
         if (isChatRoom && !isThread) {
             return (
@@ -769,64 +750,6 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
         return result;
     }, [canJoin, report, backTo, currentUserPersonalDetails.accountID]);
 
-    const nameSectionExpenseIOU = (
-        <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
-            {shouldDisableRename && (
-                <>
-                    <View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
-                        <DisplayNames
-                            fullTitle={reportName}
-                            displayNamesWithTooltips={displayNamesWithTooltips}
-                            shouldParseFullTitle={!isGroupChat}
-                            tooltipEnabled
-                            numberOfLines={isChatRoom && !isChatThread ? 0 : 1}
-                            textStyles={[styles.textHeadline, styles.textAlignCenter, isChatRoom && !isChatThread ? undefined : styles.pre]}
-                            shouldUseFullTitle={shouldUseFullTitle}
-                        />
-                    </View>
-                    {isPolicyAdmin ? (
-                        <PressableWithoutFeedback
-                            style={[styles.w100]}
-                            disabled={policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
-                            role={CONST.ROLE.BUTTON}
-                            accessibilityLabel={chatRoomSubtitle}
-                            accessible
-                            sentryLabel={CONST.SENTRY_LABEL.REPORT_DETAILS.WORKSPACE_LINK}
-                            onPress={() => {
-                                let policyID = report?.policyID;
-
-                                if (!policyID) {
-                                    policyID = '';
-                                }
-
-                                Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
-                            }}
-                        >
-                            {chatRoomSubtitleText}
-                        </PressableWithoutFeedback>
-                    ) : (
-                        chatRoomSubtitleText
-                    )}
-                </>
-            )}
-            {!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport) && (
-                <View style={[styles.w100, styles.mt1, styles.alignItemsCenter]}>
-                    <View style={styles.mw100}>
-                        <ParentNavigationSubtitle
-                            parentNavigationSubtitleData={parentNavigationSubtitleData}
-                            reportID={report?.reportID}
-                            parentReportID={report?.parentReportID}
-                            parentReportActionID={report?.parentReportActionID}
-                            pressableStyles={[styles.mt1, styles.mw100]}
-                            textStyles={[styles.textAlignCenter]}
-                            subtitleNumberOfLines={2}
-                        />
-                    </View>
-                </View>
-            )}
-        </View>
-    );
-
     const nameSectionGroupWorkspace = (
         <OfflineWithFeedback
             pendingAction={report?.pendingFields?.reportName}
@@ -882,6 +805,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
                 />
             }
             description={translate('threads.from')}
+            descriptionTextStyle={[styles.mutedNormalTextLabel, styles.mb1]}
             shouldCheckActionAllowedOnPress={false}
         />
     );
@@ -896,21 +820,25 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
         >
             <View style={[styles.flex1]}>
                 <MenuItemWithTopDescription
-                    shouldShowRightIcon={!isFieldDisabled}
-                    interactive={!isFieldDisabled}
+                    shouldShowRightIcon={shouldShowEditableTitleField && !isFieldDisabled}
+                    interactive={shouldShowEditableTitleField && !isFieldDisabled}
                     title={reportName}
                     titleStyle={styles.newKansasLarge}
                     shouldCheckActionAllowedOnPress={false}
                     description={translate('task.title')}
-                    onPress={() => {
-                        let policyID = report.policyID;
-
-                        if (!policyID) {
-                            policyID = '';
-                        }
-
-                        Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, CONST.REPORT_FIELD_TITLE_FIELD_ID, backTo));
-                    }}
+                    onPress={
+                        shouldShowEditableTitleField
+                            ? () => {
+                                  let policyID = report.policyID;
+
+                                  if (!policyID) {
+                                      policyID = '';
+                                  }
+
+                                  Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, CONST.REPORT_FIELD_TITLE_FIELD_ID, backTo));
+                              }
+                            : undefined
+                    }
                 />
             </View>
         </OfflineWithFeedback>
@@ -1079,6 +1007,9 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
 
     const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]);
 
+    const shouldShowFurtherDetailsContent =
+        shouldShowEditableTitleField || (!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport));
+
     return (
         <ScreenWrapper testID="ReportDetailsPage">
             <FullPageNotFoundView shouldShow={isEmptyObject(report)}>
@@ -1087,16 +1018,9 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
                     onBackButtonPress={() => Navigation.goBack(backTo)}
                 />
                 <ScrollView contentContainerStyle={[styles.flexGrow1]}>
-                    <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
-                        {renderedAvatar}
-                        {isExpenseReport && !shouldShowEditableTitleField && nameSectionExpenseIOU}
-                    </View>
-                    {isExpenseReport && shouldShowEditableTitleField && (
-                        <>
-                            {nameSectionTitleField}
-                            {nameSectionFurtherDetailsContent}
-                        </>
-                    )}
+                    <View style={[styles.reportDetailsTitleContainer, styles.pb0]}>{renderedAvatar}</View>
+                    {isExpenseReport && nameSectionTitleField}
+                    {isExpenseReport && shouldShowFurtherDetailsContent && nameSectionFurtherDetailsContent}
 
                     {!isExpenseReport && nameSectionGroupWorkspace}
 

src/styles/index.ts

@@ -2700,14 +2700,6 @@ const staticStyles = (theme: ThemeColors) =>
             ...display.dFlex,
             ...flex.flexColumn,
             ...flex.alignItemsCenter,
-            paddingHorizontal: 20,
-        },
-
-        reportDetailsRoomInfo: {
-            ...flex.flex1,
-            ...display.dFlex,
-            ...flex.flexColumn,
-            ...flex.alignItemsCenter,
         },
 
         reportSettingsVisibilityText: {