Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
a3df517
"Group name" field out of Settings and into Report
dragnoir Apr 24, 2024
2dfbf0a
Merge branch 'Expensify:main' into 40262-fix
dragnoir Apr 26, 2024
d6c3d73
fix for isArchivedRoom
dragnoir Apr 26, 2024
8820119
fix code
dragnoir Apr 26, 2024
0fd8837
Merge branch 'main' into 40262-fix
dragnoir Apr 30, 2024
48344f4
remove underTitle
dragnoir Apr 30, 2024
e388d47
support archived rooms
dragnoir Apr 30, 2024
cda911d
fix ts
dragnoir Apr 30, 2024
940270c
add Workspace support
dragnoir Apr 30, 2024
e43214c
Merge branch 'main' into 40262-fix
dragnoir May 1, 2024
62e1b95
fix regression
dragnoir May 1, 2024
197d7c5
add workspace support
dragnoir May 1, 2024
38b582e
fix issue
dragnoir May 1, 2024
23b526e
Merge branch 'main' into 40262-fix
dragnoir May 9, 2024
dc45908
fix TS warning
dragnoir May 9, 2024
84e6618
remove 'in' from invoice
dragnoir May 9, 2024
2e4c24f
replace "Room name" by "Name" for Invoice and Workspace
dragnoir May 9, 2024
ed809e8
fix lint
dragnoir May 9, 2024
41300db
Merge branch 'Expensify:main' into 40262-fix
dragnoir May 11, 2024
1880e35
Merge branch 'Expensify:main' into 40262-fix
dragnoir May 14, 2024
1750b3d
Merge branch 'Expensify:main' into 40262-fix
dragnoir May 17, 2024
c149e06
center non editable
dragnoir May 17, 2024
b628b52
fix margin
dragnoir May 17, 2024
0f1c733
fix linkedPolicy
dragnoir May 17, 2024
ae6d382
fix invoice
dragnoir May 17, 2024
a1ff130
fix center alignment
dragnoir May 17, 2024
4f6b853
Merge branch 'Expensify:main' into 40262-fix
dragnoir May 27, 2024
f08a68e
Merge branch 'Expensify:main' into 40262-fix
dragnoir May 29, 2024
62838ac
remove null
dragnoir May 29, 2024
018898d
update room name logic
dragnoir May 29, 2024
5d0f955
fix regression
dragnoir May 29, 2024
c44ae09
rename to additionalRoomDetails
dragnoir May 29, 2024
14cadc4
combine nested conditions
dragnoir May 29, 2024
9d1b640
Merge branch 'main' into 40262-fix
dragnoir May 30, 2024
f63daad
Merge branch 'main' into 40262-fix
dragnoir Jun 3, 2024
effab38
fix lint
dragnoir Jun 3, 2024
2a43c99
add OfflineWithFeedback
dragnoir Jun 3, 2024
9311622
remove canModifyRoomName
dragnoir Jun 4, 2024
47bc342
Merge branch 'main' into 40262-fix
dragnoir Jun 4, 2024
4bec870
lint
dragnoir Jun 4, 2024
fc361d5
remove spacing
dragnoir Jun 4, 2024
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
14 changes: 11 additions & 3 deletions src/components/MenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,9 @@ type MenuItemBaseProps = {

/** Optional account id if it's user avatar or policy id if it's workspace avatar */
avatarID?: number | string;

/** Should we center all text or not */
shouldCenter?: boolean;
};

type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
Expand Down Expand Up @@ -354,6 +357,7 @@ function MenuItem(
shouldPutLeftPaddingWhenNoIcon = false,
onFocus,
avatarID,
shouldCenter = false,
}: MenuItemProps,
ref: PressableRef,
) {
Expand All @@ -371,6 +375,7 @@ function MenuItem(
[
styles.flexShrink1,
styles.popoverMenuText,
shouldCenter ? styles.textAlignCenter : {},
Comment thread
dragnoir marked this conversation as resolved.
// eslint-disable-next-line no-nested-ternary
shouldPutLeftPaddingWhenNoIcon || (icon && !Array.isArray(icon)) ? (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3) : {},
shouldShowBasicTitle ? {} : styles.textStrong,
Expand Down Expand Up @@ -576,7 +581,7 @@ function MenuItem(
{description}
</Text>
)}
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<View style={[!shouldCenter && styles.flexRow, styles.alignItemsCenter]}>
{!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
<View style={styles.renderHTMLTitle}>
<RenderHTML html={processedTitle} />
Expand Down Expand Up @@ -609,7 +614,7 @@ function MenuItem(
</Text>
)}
{!!furtherDetails && (
<View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
<View style={[!shouldCenter && styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
{!!furtherDetailsIcon && (
<Icon
src={furtherDetailsIcon}
Expand All @@ -619,7 +624,10 @@ function MenuItem(
/>
)}
<Text
style={furtherDetailsIcon ? [styles.furtherDetailsText, styles.ph2, styles.pt1] : styles.textLabelSupporting}
style={[
furtherDetailsIcon ? [styles.furtherDetailsText, styles.ph2, styles.pt1] : styles.textLabelSupporting,
shouldCenter && styles.textAlignCenter,
]}
numberOfLines={2}
>
{furtherDetails}
Expand Down
122 changes: 88 additions & 34 deletions src/pages/ReportDetailsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,34 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy ?? null), [policy]);
const isPolicyEmployee = useMemo(() => PolicyUtils.isPolicyEmployee(report?.policyID ?? '', policies), [report?.policyID, policies]);
const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(report), [report]);

const shouldUseFullTitle = useMemo(() => ReportUtils.shouldUseFullTitleToDisplay(report), [report]);
const isChatRoom = useMemo(() => ReportUtils.isChatRoom(report), [report]);
const isTaskReport = useMemo(() => ReportUtils.isTaskReport(report), [report]);
const isUserCreatedPolicyRoom = useMemo(() => ReportUtils.isUserCreatedPolicyRoom(report), [report]);
const isDefaultRoom = useMemo(() => ReportUtils.isDefaultRoom(report), [report]);
const isChatThread = useMemo(() => ReportUtils.isChatThread(report), [report]);
const isArchivedRoom = useMemo(() => ReportUtils.isArchivedRoom(report), [report]);
const isMoneyRequestReport = useMemo(() => ReportUtils.isMoneyRequestReport(report), [report]);
const isMoneyRequest = useMemo(() => ReportUtils.isMoneyRequest(report), [report]);
const isInvoiceReport = useMemo(() => ReportUtils.isInvoiceReport(report), [report]);
const isTaskReport = useMemo(() => ReportUtils.isTaskReport(report), [report]);
const isInvoiceRoom = useMemo(() => ReportUtils.isInvoiceRoom(report), [report]);
const canEditReportDescription = useMemo(() => ReportUtils.canEditReportDescription(report, policy), [report, policy]);
const shouldShowReportDescription = isChatRoom && (canEditReportDescription || report.description !== '');

const linkedWorkspace = useMemo(() => Object.values(policies ?? {}).find((linkedPolicy) => linkedPolicy && linkedPolicy.id === report?.policyID) ?? null, [policies, report?.policyID]);
Comment thread
marcaaron marked this conversation as resolved.
const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace), [report, linkedWorkspace]);
const isDeprecatedGroupDM = useMemo(() => ReportUtils.isDeprecatedGroupDM(report), [report]);
const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
const shouldShowRoomName =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're changing

const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report) && !ReportUtils.isInvoiceRoom(report);

to

const shouldShowRoomName =
  !ReportUtils.isChatThread(report) &&
  !isDeprecatedGroupDM &&
  !isPolicyExpenseChat &&
  !isTaskReport &&
  !isMoneyRequestReport &&
  !isInvoiceRoom &&
  !(isMoneyRequestReport || isInvoiceReport || isMoneyRequest);

I agree we should confirm this behavior on Slack (and implement it inside of ReportUtils).
@dragnoir, could you start a slack thread to confirm the behavior?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldShowRoomName is taken from here

const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report) && !ReportUtils.isInvoiceRoom(report);

and I added the new behavior we needed. I don't think it needs to be a utility, because it's used just once on the ReportDetailsPage.

About the last discussion, #40858 (comment) shouldShowRoomName is different from shouldShowRoomName

confirm this behavior

Can you please explain what behavior you mean?

Those new adjustments we already discussed it starting from this comment #40858 (comment) so I think the new behavior of the shouldShowRoomName is already approved.

What do you think?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dragnoir, thank you! Missed the summary of changes in #40858 (comment), we should probably include it in the issue details
Could you merge the latest main please?

!ReportUtils.isChatThread(report) &&
!isDeprecatedGroupDM &&
!isPolicyExpenseChat &&
!isTaskReport &&
!isMoneyRequestReport &&
!isInvoiceRoom &&
!(isMoneyRequestReport || isInvoiceReport || isMoneyRequest);
// eslint-disable-next-line react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx
const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(report), [report, policy]);
const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
const isSystemChat = useMemo(() => ReportUtils.isSystemChat(report), [report]);
const isGroupChat = useMemo(() => ReportUtils.isGroupChat(report), [report]);
const isThread = useMemo(() => ReportUtils.isThread(report), [report]);
Expand All @@ -99,17 +111,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD

return ReportUtils.getVisibleChatMemberAccountIDs(report.reportID ?? '');
}, [report, session, isGroupChat, isSystemChat]);

// Get the active chat members by filtering out the pending members with delete action
const activeChatMembers = participants.flatMap((accountID) => {
const pendingMember = report?.pendingChatMembers?.findLast((member) => member.accountID === accountID.toString());
return !pendingMember || pendingMember.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? accountID : [];
});

const isGroupDMChat = useMemo(() => ReportUtils.isDM(report) && participants.length > 1, [report, participants.length]);

const isPrivateNotesFetchTriggered = report?.isLoadingPrivateNotes !== undefined;

const isSelfDM = useMemo(() => ReportUtils.isSelfDM(report), [report]);

useEffect(() => {
Expand Down Expand Up @@ -307,7 +315,27 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
);
}, [report, icons, isMoneyRequestReport, isInvoiceReport, isGroupChat, isThread, styles]);

const reportName = ReportUtils.isDeprecatedGroupDM(report) || isGroupChat ? ReportUtils.getGroupChatName(undefined, false, report.reportID ?? '') : ReportUtils.getReportName(report);
const reportName =
ReportUtils.isDeprecatedGroupDM(report) || ReportUtils.isGroupChat(report)
? ReportUtils.getGroupChatName(undefined, false, report.reportID ?? '')
: ReportUtils.getReportName(report);

const additionalRoomDetails =
(isPolicyExpenseChat && !!report?.isOwnPolicyExpenseChat) || ReportUtils.isExpenseReport(report) || isPolicyExpenseChat || isInvoiceRoom
? chatRoomSubtitle
: `${translate('threads.in')} ${chatRoomSubtitle}`;

const roomTitle = isPolicyExpenseChat || isGroupChat ? reportName : report?.reportName ?? reportName;
Comment thread
dragnoir marked this conversation as resolved.

let roomDescription;
if (isInvoiceRoom || isPolicyExpenseChat) {
roomDescription = translate('common.name');
} else if (isGroupChat) {
roomDescription = translate('groupConfirmPage.groupName');
} else {
roomDescription = translate('newRoomPage.roomName');
}

return (
<ScreenWrapper testID={ReportDetailsPage.displayName}>
<FullPageNotFoundView shouldShow={isEmptyObject(report)}>
Expand All @@ -317,34 +345,38 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
shouldNavigateToTopMostReport={!(route.params && 'backTo' in route.params)}
/>
<ScrollView style={[styles.flex1]}>
<View style={styles.reportDetailsTitleContainer}>
<View style={[styles.reportDetailsTitleContainer, !shouldShowRoomName && styles.mb5]}>
{renderAvatar}
<View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
<View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
<DisplayNames
fullTitle={reportName ?? ''}
displayNamesWithTooltips={displayNamesWithTooltips}
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
onPress={() => {
Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(report?.policyID ?? ''));
}}
>
{chatRoomSubtitleText}
</PressableWithoutFeedback>
) : (
chatRoomSubtitleText
{!shouldShowRoomName && (
<>
<View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
<DisplayNames
fullTitle={reportName ?? ''}
displayNamesWithTooltips={displayNamesWithTooltips}
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
onPress={() => {
Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(report?.policyID ?? ''));
}}
>
{chatRoomSubtitleText}
</PressableWithoutFeedback>
) : (
chatRoomSubtitleText
)}
</>
)}
{!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport) && (
<ParentNavigationSubtitle
Expand All @@ -356,6 +388,28 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
)}
</View>
</View>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={report?.pendingFields?.reportName}
errors={report?.errorFields?.reportName}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(report?.reportID)}
>
<View style={[styles.flex1, !shouldDisableRename && styles.mt3, isGroupChat && styles.mb5]}>
<MenuItemWithTopDescription
shouldShowRightIcon={!shouldDisableRename}
interactive={!shouldDisableRename}
title={roomTitle}
titleStyle={styles.newKansasLarge}
shouldCheckActionAllowedOnPress={false}
description={!shouldDisableRename ? roomDescription : ''}
furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID))}
shouldCenter={shouldDisableRename}
/>
</View>
</OfflineWithFeedback>
)}
{shouldShowReportDescription && (
<OfflineWithFeedback
pendingAction={report.pendingFields?.description}
Expand Down
Loading