Skip to content

Separate subtitle from report title push row #89714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
youssef-lr merged 6 commits into from
May 14, 2026
Merged

Separate subtitle from report title push row #89714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
205c8a9
feat: separate subtitle from editable report title
gijoe0295 May 6, 2026
c293216
feat: separate subtitle from read-only report title
gijoe0295 May 6, 2026
5bb849d
feat: separate subtitle from workspace rooms
gijoe0295 May 6, 2026
e3bad73
add parent navigation subtitle data existence check
gijoe0295 May 6, 2026
3e0ad3b
Merge branch 'main' of github.com:gijoe0295/App into feat/separate-su…
gijoe0295 May 13, 2026
e6a97d8
fix: workspace chat name is left aligned
gijoe0295 May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/ParentNavigationSubtitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ type ParentNavigationSubtitleProps = {

/** Display name of the human agent; falls back to a generic label when missing */
humanAgentName?: string;

Comment thread
gijoe0295 marked this conversation as resolved.
/** Whether to show the "from" prefix */
shouldShowFromPrefix?: boolean;
};

function ParentNavigationSubtitle({
Expand All @@ -83,6 +86,7 @@ function ParentNavigationSubtitle({
subtitleNumberOfLines = 1,
humanAgentAccountID,
humanAgentName,
shouldShowFromPrefix = true,
}: ParentNavigationSubtitleProps) {
const currentRoute = useRoute();
const styles = useThemeStyles();
Expand Down Expand Up @@ -235,7 +239,7 @@ function ParentNavigationSubtitle({
>
{!!reportName && (
<>
<Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
{shouldShowFromPrefix && <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>}
{hasAccessToParentReport ? (
<TextLink
testID="parent-navigation-subtitle-link"
Expand All @@ -247,8 +251,8 @@ function ParentNavigationSubtitle({
pressableStyles,
styles.optionAlternateText,
styles.textLabelSupporting,
hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link,
textStyles,
hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link,
]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
Expand Down
167 changes: 55 additions & 112 deletions src/pages/ReportDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@ import type {OnyxEntry} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import DisplayNames from '@components/DisplayNames';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
import MenuItem from '@components/MenuItem';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import {ModalActions} from '@components/Modal/Global/ModalContext';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import type {PromotedAction} from '@components/PromotedActionsBar';
import PromotedActionsBar, {PromotedActions} from '@components/PromotedActionsBar';
import ReportActionAvatars from '@components/ReportActionAvatars';
Expand Down Expand Up @@ -51,7 +49,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';
Expand All @@ -68,12 +65,12 @@ import {
createDraftTransactionAndNavigateToParticipantSelector,
getAvailableReportFields,
getChatRoomSubtitle,
getDisplayNamesWithTooltips,
getIcons,
getOriginalReportID,
getParentNavigationSubtitle,
getParticipantsAccountIDsForDisplay,
getParticipantsList,
getPolicyName,
getReportDescription,
getReportFieldKey,
getReportForHeader,
Expand Down Expand Up @@ -109,7 +106,6 @@ import {
navigateBackOnDeleteTransaction,
navigateToPrivateNotes,
shouldDisableRename as shouldDisableRenameUtil,
shouldUseFullTitleToDisplay,
} from '@libs/ReportUtils';
import StringUtils from '@libs/StringUtils';
import {isDemoTransaction} from '@libs/TransactionUtils';
Expand Down Expand Up @@ -163,7 +159,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();
Expand Down Expand Up @@ -206,7 +202,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]);
Expand Down Expand Up @@ -366,10 +361,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat;
const rawReportName = getReportNameFromReportNameUtils(reportForHeader, reportAttributes);
const reportName = shouldParseFullTitle ? Parser.htmlToText(rawReportName) : rawReportName;
const additionalRoomDetails =
(isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom
? chatRoomSubtitle
: `${translate('threads.in')} ${chatRoomSubtitle}`;
const additionalRoomDetails = isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom ? chatRoomSubtitle : `${translate('threads.in')} ${chatRoomSubtitle}`;

let roomDescription: string | undefined;
if (caseID === CASES.MONEY_REQUEST) {
Expand Down Expand Up @@ -663,26 +655,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 (
Expand Down Expand Up @@ -769,64 +746,7 @@ 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 shouldDisplayGroupWorkspaceAsPushRow = !isThread && (isGroupChat || isUserCreatedPolicyRoom || isDefaultRoom);
const nameSectionGroupWorkspace = (
<OfflineWithFeedback
pendingAction={report?.pendingFields?.reportName}
Expand All @@ -839,11 +759,11 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
shouldShowRightIcon={!shouldDisableRename}
interactive={!shouldDisableRename}
title={StringUtils.lineBreaksToSpaces(reportName)}
titleStyle={styles.newKansasLarge}
titleContainerStyle={shouldDisableRename && styles.alignItemsCenter}
titleStyle={[styles.newKansasLarge, !shouldDisplayGroupWorkspaceAsPushRow && styles.textAlignCenter]}
titleContainerStyle={!shouldDisplayGroupWorkspaceAsPushRow && styles.alignItemsCenter}
shouldCheckActionAllowedOnPress={false}
description={!shouldDisableRename ? roomDescription : ''}
furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
description={shouldDisplayGroupWorkspaceAsPushRow ? roomDescription : ''}
furtherDetails={chatRoomSubtitle && !isGroupChat && !shouldDisplayGroupWorkspaceAsPushRow ? additionalRoomDetails : ''}
furtherDetailsNumberOfLines={isWorkspaceChat ? 0 : undefined}
furtherDetailsStyle={isWorkspaceChat ? [styles.textAlignCenter, styles.breakWord] : undefined}
onPress={() => {
Expand All @@ -852,6 +772,14 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
numberOfLinesTitle={isThread ? 2 : 0}
shouldBreakWord
/>
{shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
<MenuItemWithTopDescription
shouldShowRightIcon={false}
interactive={false}
description={translate('workspace.common.workspace')}
title={getPolicyName({report})}
/>
)}
</View>
</OfflineWithFeedback>
);
Expand All @@ -866,13 +794,24 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
const shouldShowEditableTitleField = caseID !== CASES.MONEY_REQUEST && canEditReportTitle(report, policy, currentUserPersonalDetails?.accountID);

const nameSectionFurtherDetailsContent = (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
reportID={report?.reportID}
parentReportID={report?.parentReportID}
parentReportActionID={report?.parentReportActionID}
pressableStyles={[styles.mt1, styles.mw100]}
subtitleNumberOfLines={2}
<MenuItemWithTopDescription
shouldShowRightIcon={false}
interactive={false}
titleComponent={
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
reportID={report?.reportID}
parentReportID={report?.parentReportID}
parentReportActionID={report?.parentReportActionID}
pressableStyles={[styles.mt1, styles.mw100]}
textStyles={[styles.popoverMenuText, styles.flexShrink1, styles.preWrap, styles.mw100]}
subtitleNumberOfLines={2}
shouldShowFromPrefix={false}
/>
}
description={translate('threads.from')}
descriptionTextStyle={[styles.mutedNormalTextLabel, styles.mb1]}
shouldCheckActionAllowedOnPress={false}
/>
);

Expand All @@ -886,22 +825,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));
}}
furtherDetailsComponent={nameSectionFurtherDetailsContent}
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>
Expand Down Expand Up @@ -1069,6 +1011,9 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading

const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]);

const shouldShowFurtherDetailsContent =
!isEmptyObject(parentNavigationSubtitleData) && (shouldShowEditableTitleField || isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport);

return (
<ScreenWrapper testID="ReportDetailsPage">
<FullPageNotFoundView shouldShow={isEmptyObject(report)}>
Expand All @@ -1077,11 +1022,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}
<View style={[styles.reportDetailsTitleContainer, styles.pb0]}>{renderedAvatar}</View>
{isExpenseReport && nameSectionTitleField}
{isExpenseReport && shouldShowFurtherDetailsContent && nameSectionFurtherDetailsContent}

{!isExpenseReport && nameSectionGroupWorkspace}

Expand Down
8 changes: 0 additions & 8 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2704,14 +2704,6 @@ const staticStyles = (theme: ThemeColors) =>
...display.dFlex,
...flex.flexColumn,
...flex.alignItemsCenter,
paddingHorizontal: 20,
},

reportDetailsRoomInfo: {
...flex.flex1,
...display.dFlex,
...flex.flexColumn,
...flex.alignItemsCenter,
},

reportSettingsVisibilityText: {
Expand Down
Loading