Skip to content

Commit 90f60ca

Browse files
youssef-lryoussef-lr
authored
Merge pull request Expensify#89714 from gijoe0295/feat/separate-subtitle-from-report-title-push-row
Separate subtitle from report title push row
2 parents 404171d + e6a97d8 commit 90f60ca

3 files changed

Lines changed: 61 additions & 122 deletions

File tree

‎src/components/ParentNavigationSubtitle.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ type ParentNavigationSubtitleProps = {
6666

6767
/** Display name of the human agent; falls back to a generic label when missing */
6868
humanAgentName?: string;
69+
70+
/** Whether to show the "from" prefix */
71+
shouldShowFromPrefix?: boolean;
6972
};
7073

7174
function ParentNavigationSubtitle({
@@ -83,6 +86,7 @@ function ParentNavigationSubtitle({
8386
subtitleNumberOfLines = 1,
8487
humanAgentAccountID,
8588
humanAgentName,
89+
shouldShowFromPrefix = true,
8690
}: ParentNavigationSubtitleProps) {
8791
const currentRoute = useRoute();
8892
const styles = useThemeStyles();
@@ -235,7 +239,7 @@ function ParentNavigationSubtitle({
235239
>
236240
{!!reportName && (
237241
<>
238-
<Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>
242+
{shouldShowFromPrefix && <Text style={[styles.optionAlternateText, styles.textLabelSupporting, textStyles]}>{`${translate('threads.from')} `}</Text>}
239243
{hasAccessToParentReport ? (
240244
<TextLink
241245
testID="parent-navigation-subtitle-link"
@@ -247,8 +251,8 @@ function ParentNavigationSubtitle({
247251
pressableStyles,
248252
styles.optionAlternateText,
249253
styles.textLabelSupporting,
250-
hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link,
251254
textStyles,
255+
hovered ? StyleUtils.getColorStyle(theme.linkHover) : styles.link,
252256
]}
253257
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
254258
>

‎src/pages/ReportDetailsPage.tsx‎

Lines changed: 55 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,13 @@ import type {OnyxEntry} from 'react-native-onyx';
99
import type {ValueOf} from 'type-fest';
1010
import AvatarWithImagePicker from '@components/AvatarWithImagePicker';
1111
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
12-
import DisplayNames from '@components/DisplayNames';
1312
import HeaderWithBackButton from '@components/HeaderWithBackButton';
1413
import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
1514
import MenuItem from '@components/MenuItem';
1615
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
1716
import {ModalActions} from '@components/Modal/Global/ModalContext';
1817
import OfflineWithFeedback from '@components/OfflineWithFeedback';
1918
import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
20-
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
2119
import type {PromotedAction} from '@components/PromotedActionsBar';
2220
import PromotedActionsBar, {PromotedActions} from '@components/PromotedActionsBar';
2321
import ReportActionAvatars from '@components/ReportActionAvatars';
@@ -51,7 +49,6 @@ import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/crea
5149
import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
5250
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
5351
import type {ReportDetailsNavigatorParamList, RightModalNavigatorParamList} from '@libs/Navigation/types';
54-
import {getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
5552
import Parser from '@libs/Parser';
5653
import Permissions from '@libs/Permissions';
5754
import {isPolicyAdmin as isPolicyAdminUtil, isPolicyEmployee as isPolicyEmployeeUtil, shouldShowPolicy} from '@libs/PolicyUtils';
@@ -68,12 +65,12 @@ import {
6865
createDraftTransactionAndNavigateToParticipantSelector,
6966
getAvailableReportFields,
7067
getChatRoomSubtitle,
71-
getDisplayNamesWithTooltips,
7268
getIcons,
7369
getOriginalReportID,
7470
getParentNavigationSubtitle,
7571
getParticipantsAccountIDsForDisplay,
7672
getParticipantsList,
73+
getPolicyName,
7774
getReportDescription,
7875
getReportFieldKey,
7976
getReportForHeader,
@@ -109,7 +106,6 @@ import {
109106
navigateBackOnDeleteTransaction,
110107
navigateToPrivateNotes,
111108
shouldDisableRename as shouldDisableRenameUtil,
112-
shouldUseFullTitleToDisplay,
113109
} from '@libs/ReportUtils';
114110
import StringUtils from '@libs/StringUtils';
115111
import {isDemoTransaction} from '@libs/TransactionUtils';
@@ -163,7 +159,7 @@ const CASES = {
163159
type CaseID = ValueOf<typeof CASES>;
164160

165161
function ReportDetailsPage({policy, report, route, reportMetadata, reportLoadingState}: ReportDetailsPageProps) {
166-
const {translate, localeCompare, formatPhoneNumber} = useLocalize();
162+
const {translate, formatPhoneNumber} = useLocalize();
167163
const {isOffline} = useNetwork();
168164
const {isRestrictedToPreferredPolicy, preferredPolicyID} = usePreferredPolicy();
169165
const activePolicy = useActivePolicy();
@@ -206,7 +202,6 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
206202
const isPolicyAdmin = useMemo(() => isPolicyAdminUtil(policy), [policy]);
207203
const isPolicyEmployee = useMemo(() => isPolicyEmployeeUtil(report?.policyID, policy), [report?.policyID, policy]);
208204
const isPolicyExpenseChat = useMemo(() => isPolicyExpenseChatUtil(report), [report]);
209-
const shouldUseFullTitle = useMemo(() => shouldUseFullTitleToDisplay(report), [report]);
210205
const isChatRoom = useMemo(() => isChatRoomUtil(report), [report]);
211206
const isUserCreatedPolicyRoom = useMemo(() => isUserCreatedPolicyRoomUtil(report), [report]);
212207
const isDefaultRoom = useMemo(() => isDefaultRoomUtil(report), [report]);
@@ -366,10 +361,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
366361
const shouldParseFullTitle = parentReportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT && !isGroupChat;
367362
const rawReportName = getReportNameFromReportNameUtils(reportForHeader, reportAttributes);
368363
const reportName = shouldParseFullTitle ? Parser.htmlToText(rawReportName) : rawReportName;
369-
const additionalRoomDetails =
370-
(isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom
371-
? chatRoomSubtitle
372-
: `${translate('threads.in')} ${chatRoomSubtitle}`;
364+
const additionalRoomDetails = isExpenseReportUtil(report) || isPolicyExpenseChat || isInvoiceRoom ? chatRoomSubtitle : `${translate('threads.in')} ${chatRoomSubtitle}`;
373365

374366
let roomDescription: string | undefined;
375367
if (caseID === CASES.MONEY_REQUEST) {
@@ -663,26 +655,11 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
663655
delegateEmail,
664656
]);
665657

666-
const displayNamesWithTooltips = useMemo(() => {
667-
const hasMultipleParticipants = participants.length > 1;
668-
return getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(participants, personalDetails), hasMultipleParticipants, localeCompare, formatPhoneNumber);
669-
}, [participants, personalDetails, localeCompare, formatPhoneNumber]);
670-
671658
const icons = useMemo(
672659
() => getIcons(report, formatPhoneNumber, personalDetails, null, '', -1, policy, undefined, isReportArchived),
673660
[report, formatPhoneNumber, personalDetails, policy, isReportArchived],
674661
);
675662

676-
const chatRoomSubtitleText = chatRoomSubtitle ? (
677-
<DisplayNames
678-
fullTitle={chatRoomSubtitle}
679-
tooltipEnabled
680-
numberOfLines={1}
681-
textStyles={[styles.sidebarLinkText, styles.textLabelSupporting, styles.pre, styles.mt1, styles.textAlignCenter]}
682-
shouldUseFullTitle
683-
/>
684-
) : null;
685-
686663
const renderedAvatar = useMemo(() => {
687664
if (isChatRoom && !isThread) {
688665
return (
@@ -769,64 +746,7 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
769746
return result;
770747
}, [canJoin, report, backTo, currentUserPersonalDetails.accountID]);
771748

772-
const nameSectionExpenseIOU = (
773-
<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
774-
{shouldDisableRename && (
775-
<>
776-
<View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
777-
<DisplayNames
778-
fullTitle={reportName}
779-
displayNamesWithTooltips={displayNamesWithTooltips}
780-
shouldParseFullTitle={!isGroupChat}
781-
tooltipEnabled
782-
numberOfLines={isChatRoom && !isChatThread ? 0 : 1}
783-
textStyles={[styles.textHeadline, styles.textAlignCenter, isChatRoom && !isChatThread ? undefined : styles.pre]}
784-
shouldUseFullTitle={shouldUseFullTitle}
785-
/>
786-
</View>
787-
{isPolicyAdmin ? (
788-
<PressableWithoutFeedback
789-
style={[styles.w100]}
790-
disabled={policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
791-
role={CONST.ROLE.BUTTON}
792-
accessibilityLabel={chatRoomSubtitle}
793-
accessible
794-
sentryLabel={CONST.SENTRY_LABEL.REPORT_DETAILS.WORKSPACE_LINK}
795-
onPress={() => {
796-
let policyID = report?.policyID;
797-
798-
if (!policyID) {
799-
policyID = '';
800-
}
801-
802-
Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID));
803-
}}
804-
>
805-
{chatRoomSubtitleText}
806-
</PressableWithoutFeedback>
807-
) : (
808-
chatRoomSubtitleText
809-
)}
810-
</>
811-
)}
812-
{!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport) && (
813-
<View style={[styles.w100, styles.mt1, styles.alignItemsCenter]}>
814-
<View style={styles.mw100}>
815-
<ParentNavigationSubtitle
816-
parentNavigationSubtitleData={parentNavigationSubtitleData}
817-
reportID={report?.reportID}
818-
parentReportID={report?.parentReportID}
819-
parentReportActionID={report?.parentReportActionID}
820-
pressableStyles={[styles.mt1, styles.mw100]}
821-
textStyles={[styles.textAlignCenter]}
822-
subtitleNumberOfLines={2}
823-
/>
824-
</View>
825-
</View>
826-
)}
827-
</View>
828-
);
829-
749+
const shouldDisplayGroupWorkspaceAsPushRow = !isThread && (isGroupChat || isUserCreatedPolicyRoom || isDefaultRoom);
830750
const nameSectionGroupWorkspace = (
831751
<OfflineWithFeedback
832752
pendingAction={report?.pendingFields?.reportName}
@@ -839,11 +759,11 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
839759
shouldShowRightIcon={!shouldDisableRename}
840760
interactive={!shouldDisableRename}
841761
title={StringUtils.lineBreaksToSpaces(reportName)}
842-
titleStyle={styles.newKansasLarge}
843-
titleContainerStyle={shouldDisableRename && styles.alignItemsCenter}
762+
titleStyle={[styles.newKansasLarge, !shouldDisplayGroupWorkspaceAsPushRow && styles.textAlignCenter]}
763+
titleContainerStyle={!shouldDisplayGroupWorkspaceAsPushRow && styles.alignItemsCenter}
844764
shouldCheckActionAllowedOnPress={false}
845-
description={!shouldDisableRename ? roomDescription : ''}
846-
furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
765+
description={shouldDisplayGroupWorkspaceAsPushRow ? roomDescription : ''}
766+
furtherDetails={chatRoomSubtitle && !isGroupChat && !shouldDisplayGroupWorkspaceAsPushRow ? additionalRoomDetails : ''}
847767
furtherDetailsNumberOfLines={isWorkspaceChat ? 0 : undefined}
848768
furtherDetailsStyle={isWorkspaceChat ? [styles.textAlignCenter, styles.breakWord] : undefined}
849769
onPress={() => {
@@ -852,6 +772,14 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
852772
numberOfLinesTitle={isThread ? 2 : 0}
853773
shouldBreakWord
854774
/>
775+
{shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
776+
<MenuItemWithTopDescription
777+
shouldShowRightIcon={false}
778+
interactive={false}
779+
description={translate('workspace.common.workspace')}
780+
title={getPolicyName({report})}
781+
/>
782+
)}
855783
</View>
856784
</OfflineWithFeedback>
857785
);
@@ -866,13 +794,24 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
866794
const shouldShowEditableTitleField = caseID !== CASES.MONEY_REQUEST && canEditReportTitle(report, policy, currentUserPersonalDetails?.accountID);
867795

868796
const nameSectionFurtherDetailsContent = (
869-
<ParentNavigationSubtitle
870-
parentNavigationSubtitleData={parentNavigationSubtitleData}
871-
reportID={report?.reportID}
872-
parentReportID={report?.parentReportID}
873-
parentReportActionID={report?.parentReportActionID}
874-
pressableStyles={[styles.mt1, styles.mw100]}
875-
subtitleNumberOfLines={2}
797+
<MenuItemWithTopDescription
798+
shouldShowRightIcon={false}
799+
interactive={false}
800+
titleComponent={
801+
<ParentNavigationSubtitle
802+
parentNavigationSubtitleData={parentNavigationSubtitleData}
803+
reportID={report?.reportID}
804+
parentReportID={report?.parentReportID}
805+
parentReportActionID={report?.parentReportActionID}
806+
pressableStyles={[styles.mt1, styles.mw100]}
807+
textStyles={[styles.popoverMenuText, styles.flexShrink1, styles.preWrap, styles.mw100]}
808+
subtitleNumberOfLines={2}
809+
shouldShowFromPrefix={false}
810+
/>
811+
}
812+
description={translate('threads.from')}
813+
descriptionTextStyle={[styles.mutedNormalTextLabel, styles.mb1]}
814+
shouldCheckActionAllowedOnPress={false}
876815
/>
877816
);
878817

@@ -886,22 +825,25 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
886825
>
887826
<View style={[styles.flex1]}>
888827
<MenuItemWithTopDescription
889-
shouldShowRightIcon={!isFieldDisabled}
890-
interactive={!isFieldDisabled}
828+
shouldShowRightIcon={shouldShowEditableTitleField && !isFieldDisabled}
829+
interactive={shouldShowEditableTitleField && !isFieldDisabled}
891830
title={reportName}
892831
titleStyle={styles.newKansasLarge}
893832
shouldCheckActionAllowedOnPress={false}
894833
description={translate('task.title')}
895-
onPress={() => {
896-
let policyID = report.policyID;
897-
898-
if (!policyID) {
899-
policyID = '';
900-
}
901-
902-
Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, CONST.REPORT_FIELD_TITLE_FIELD_ID, backTo));
903-
}}
904-
furtherDetailsComponent={nameSectionFurtherDetailsContent}
834+
onPress={
835+
shouldShowEditableTitleField
836+
? () => {
837+
let policyID = report.policyID;
838+
839+
if (!policyID) {
840+
policyID = '';
841+
}
842+
843+
Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, policyID, CONST.REPORT_FIELD_TITLE_FIELD_ID, backTo));
844+
}
845+
: undefined
846+
}
905847
/>
906848
</View>
907849
</OfflineWithFeedback>
@@ -1069,6 +1011,9 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
10691011

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

1014+
const shouldShowFurtherDetailsContent =
1015+
!isEmptyObject(parentNavigationSubtitleData) && (shouldShowEditableTitleField || isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport);
1016+
10721017
return (
10731018
<ScreenWrapper testID="ReportDetailsPage">
10741019
<FullPageNotFoundView shouldShow={isEmptyObject(report)}>
@@ -1077,11 +1022,9 @@ function ReportDetailsPage({policy, report, route, reportMetadata, reportLoading
10771022
onBackButtonPress={() => Navigation.goBack(backTo)}
10781023
/>
10791024
<ScrollView contentContainerStyle={[styles.flexGrow1]}>
1080-
<View style={[styles.reportDetailsTitleContainer, styles.pb0]}>
1081-
{renderedAvatar}
1082-
{isExpenseReport && !shouldShowEditableTitleField && nameSectionExpenseIOU}
1083-
</View>
1084-
{isExpenseReport && shouldShowEditableTitleField && nameSectionTitleField}
1025+
<View style={[styles.reportDetailsTitleContainer, styles.pb0]}>{renderedAvatar}</View>
1026+
{isExpenseReport && nameSectionTitleField}
1027+
{isExpenseReport && shouldShowFurtherDetailsContent && nameSectionFurtherDetailsContent}
10851028

10861029
{!isExpenseReport && nameSectionGroupWorkspace}
10871030

‎src/styles/index.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2712,14 +2712,6 @@ const staticStyles = (theme: ThemeColors) =>
27122712
...display.dFlex,
27132713
...flex.flexColumn,
27142714
...flex.alignItemsCenter,
2715-
paddingHorizontal: 20,
2716-
},
2717-
2718-
reportDetailsRoomInfo: {
2719-
...flex.flex1,
2720-
...display.dFlex,
2721-
...flex.flexColumn,
2722-
...flex.alignItemsCenter,
27232715
},
27242716

27252717
reportSettingsVisibilityText: {

0 commit comments

Comments
 (0)