[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 [email protected] 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)

[melvin-bot]

@strepanier03, @fedirjh Whoops! This issue is 2 days overdue. Let's get this updated quick!

[fedirjh]

Thanks everyone for the proposal. I think @nkdengineer has the correct solution. Center alignment should be applied to all report names that are not editable.

[fedirjh]

@nkdengineer's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Krishna2323]

@fedirjh thanks for the review but can we please confirm the expected behaviour here? I don't think we need to centre all the report names that are not editable. Using shouldDisableRename will centre thread report, public room, expense report and few others as well. @shawnborton can you please confirm?

App/src/libs/ReportUtils.ts

Lines 6229 to 6238 in e3ebeff

	isDefaultRoom(report) ||
	isArchivedRoom(report, getReportNameValuePairs(report?.reportID)) ||
	isPublicRoom(report) ||
	isThread(report) ||
	isMoneyRequest(report) ||
	isMoneyRequestReport(report) ||
	isPolicyExpenseChat(report) ||
	isInvoiceRoom(report) ||
	isInvoiceReport(report) ||
	isSystemChat(report)

[nkdengineer]

Just a note here. For the expense report, we will render it in another section. For other cases like thread, admin room, and public room, ... it displays the same as system chat and I think there is no reason that we do not centralize these report names if we center the system chat name.

[fedirjh]

Using shouldDisableRename will centre thread report, public room, expense report and few others as well

@Krishna2323 I think that's the expected behaviour. Following the mockups shared in this issue #44149 you can see that non-editable expenses titles are centered

[Krishna2323]

@fedirjh, thanks for the confirmation, I was not sure because expected result states "Expensify" name should be centered like "Chronos" and both are system chats.

[shawnborton]

Yeah, just chiming in to say that if the room name is not editable, we should be centering it in all cases. CC @Expensify/design for the gut check there

[dannymcclain]

Agree—that's what we had previously talked about and decided.

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.12-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Expensify user is not centered in the profile detail view #45981

If no regressions arise, payment will be issued on 2024-08-02. 🎊

For reference, here are some details about the assignees on this issue:

• @fedirjh requires payment through NewDot Manual Requests
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@fedirjh] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[fedirjh]

BugZero Checklist:

• Link to the PR: [Details Revamp] Update ReportDetailsPage for Rooms, Groups, Money Reports and Policy Expenses #43251
• Link to comment: [Details Revamp] Update ReportDetailsPage for Rooms, Groups, Money Reports and Policy Expenses #43251 (comment)
• Link to discussion: N/A This bug should have been caught with the current checklist.
• Determine if we should create a regression test for this bug: Yes

Regression Test Proposal

1. Open the Expensify chat report or any other, where the report title cannot be edited.
2. Click on the header of the report to see the details.
3. Observe the report title and ensure it is centered on the page.

• Do we agree 👍 or 👎

[github-actions]

true

[strepanier03]

Payment Summary

• $250 - @fedirjh via New Expensify manual request
• $250 - @nkdengineer via Upwork (contract)

@JmillsExpensify payment request incoming.

[JmillsExpensify]

$250 approved for @fedirjh. Going to close this once since regression issue is added and all payments approved. @fedirjh Please submit an expense in New Expensify when you get a chance!