[HOLD for payment 2024-08-02] [$250] Name of the Expensify user is not centered in the profile detail view

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.6-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1720777243552389

Action Performed:

1. Open Expensify chat report
2. Click on the header to see the details

Expected Result:

"Expensify" name should be centered like "Chronos"

Actual Result:

The name for the Expensify user is not centered in the details view

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d58bde936bd4c0a6
• Upwork Job ID: 1812986703312855628
• Last Price Increase: 2024-07-15
• Automatic offers:
• nkdengineer | Contributor | 103218448

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Name of the Expensify user is not centered in the profile detail view

What is the root cause of that problem?

The text is not centered when isSystemChat is true.

App/src/pages/ReportDetailsPage.tsx

Lines 573 to 592 in ec19663

	const nameSectionGroupWorkspace = (
	<OfflineWithFeedback
	pendingAction={report?.pendingFields?.reportName}
	errors={report?.errorFields?.reportName}
	errorRowStyles={[styles.ph5]}
	onClose={() => Report.clearPolicyRoomNameErrors(report?.reportID)}
	>
	<View style={[styles.flex1, !shouldDisableRename && styles.mt3]}>
	<MenuItemWithTopDescription
	shouldShowRightIcon={!shouldDisableRename}
	interactive={!shouldDisableRename}
	title={reportName}
	titleStyle={styles.newKansasLarge}
	shouldCheckActionAllowedOnPress={false}
	description={!shouldDisableRename ? roomDescription : ''}
	furtherDetails={chatRoomSubtitle && !isGroupChat ? additionalRoomDetails : ''}
	onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NAME.getRoute(report.reportID))}
	/>
	</View>
	</OfflineWithFeedback>

What changes do you think we should make in order to solve the problem?

We should check for isSystemChat and add marginHorizontal: auto to titleStyle prop if it is true.

What alternative solutions did you explore? (Optional)

We can add flex:1 and textAlign: center if isSystemChat is true. We should also check for other similar cases.

[Tony-MK]

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

When the header of the report is clicked the app navigates to the report details page through the navigateToDetailsPage function.

Instead of the profile page since the CONST.ACCOUNT_ID.NOTIFICATIONS account id is part of the CONST.RESTRICTED_ACCOUNT_IDS in the profile page.

App/src/pages/ProfilePage.tsx

Line 148 in ec19663

const shouldShowBlockingView = (!isValidAccountID && !isLoading) || CONST.RESTRICTED_ACCOUNT_IDS.includes(accountID);

The report detail page does not align the title to the center while the profile page does.

App/src/pages/ReportDetailsPage.tsx

Lines 573 to 580 in ec19663

	const nameSectionGroupWorkspace = (
	<OfflineWithFeedback
	pendingAction={report?.pendingFields?.reportName}
	errors={report?.errorFields?.reportName}
	errorRowStyles={[styles.ph5]}
	onClose={() => Report.clearPolicyRoomNameErrors(report?.reportID)}
	>
	<View style={[styles.flex1, !shouldDisableRename && styles.mt3]}>

What changes do you think we should make in order to solve the problem?

We should include the styles.alignItemsCenter for the nameSectionGroupWorkspace with the condition that the account id is the main participant to be displayed and is CONST.ACCOUNT_ID.NOTIFICATIONS or chat is a system chat, isSystemChat.

App/src/pages/ReportDetailsPage.tsx

Line 580 in ec19663

<View style={[styles.flex1, !shouldDisableRename && styles.mt3]}>

We could change the line of code above with the one below for the isSystemChat solution option.

 <View style={[styles.flex1, !shouldDisableRename && styles.mt3, isSystemChat && styles.alignItemsCenter]}>

What alternative solutions did you explore? (Optional)

Create a different section like nameSectionGroupWorkspace and nameSectionTitleField to align the titles to the center for chats with the CONST.ACCOUNT_ID.NOTIFICATIONS account id, unlike other reports where it is aligned to the left.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

In ReportDetailPage, the report name is not aligned

App/src/pages/ReportDetailsPage.tsx

Lines 585 to 591 in 77d95c5

	<MenuItemWithTopDescription
	shouldShowRightIcon={!shouldDisableRename}
	interactive={!shouldDisableRename}
	title={reportName}
	titleStyle={styles.newKansasLarge}
	shouldCheckActionAllowedOnPress={false}
	description={!shouldDisableRename ? roomDescription : ''}

What changes do you think we should make in order to solve the problem?

This bug happens for all reports that are not DM and the report name can not be edited.
If the report name cannot be edited we should add titleContainerStyle prop with style styles.alignItemsCenter to MenuItemWithTopDescription. This change will also work when the report has the description.

titleContainerStyle={shouldDisableRename && styles.alignItemsCenter}

App/src/pages/ReportDetailsPage.tsx

Lines 585 to 591 in 77d95c5

	<MenuItemWithTopDescription
	shouldShowRightIcon={!shouldDisableRename}
	interactive={!shouldDisableRename}
	title={reportName}
	titleStyle={styles.newKansasLarge}
	shouldCheckActionAllowedOnPress={false}
	description={!shouldDisableRename ? roomDescription : ''}

And add style styles.mw100 here to avoid the title overflowing.

App/src/components/MenuItem.tsx

Line 656 in 39463bd

<View style={[styles.flexRow, styles.alignItemsCenter]}>

What alternative solutions did you explore? (Optional)

NA

Screen.Recording.2024-07-15.at.14.36.14.mov

Result

[melvin-bot]

@strepanier03 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01d58bde936bd4c0a6

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)