[HOLD for payment 2024-03-07] [$500] Wrong header is shown for 2nd and 3rd level of child threads

[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: 1.4.43-13
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: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708622339587649

Action Performed:

1. Post a message 1 in a room as account A
2. Create a thread message (messsage 2) for message 1
3. Create another 2nd level thread message from message 2
4. Go to thread of message2
5. Look at the header

Expected Result:

Header should show only the thread which is 1 level up

Actual Result:

Shows "room name" and clicking on that takes to 1 level up

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

Add any screenshot/video evidence

Recording.2767.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d99f7344fe2e0a2c
• Upwork Job ID: 1760784445477494784
• Last Price Increase: 2024-02-22
• Automatic offers:
• paultsimura | Reviewer | 0
• barros001 | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[barros001]

Proposal

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

Wrong header is displayed when you navigate into a thread. It also shows the room as being the parent.

What is the root cause of that problem?

App/src/libs/ReportUtils.ts

Lines 2639 to 2650 in 0a2ece8

	function getParentNavigationSubtitle(report: OnyxEntry<Report>): ParentNavigationSummaryParams {
	if (isThread(report)) {
	const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
	const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
	if (!rootReportName) {
	return {};
	}
	return {rootReportName, workspaceName};
	}
	return {};
	}

getParentNavigationSubtitle will call getRootReportAndWorkspaceName to get the report name when handling a thread report.

App/src/libs/ReportUtils.ts

Lines 2590 to 2593 in 0a2ece8

	if (isChildReport(report) && !isMoneyRequestReport(report) && !isTaskReport(report)) {
	const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
	return getRootReportAndWorkspaceName(parentReport);
	}

getRootReportAndWorkspaceName in turn will navigate up all the way to the root report and return it's name instead. Note how we already check for isTaskReport and isMoneyRequestReport but not isChatReport.

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

Add a check for isChatReport in getRootReportAndWorkspaceName and return the correct parent report name

if (isChildReport(report) && !isMoneyRequestReport(report) && !isTaskReport(report) && !isChatReport(report)) {
    const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
    return getRootReportAndWorkspaceName(parentReport);
}

Screen.Recording.2024-02-22.at.5.28.40.PM.mov

What alternative solutions did you explore? (Optional)

Get rid of getRootReportAndWorkspaceName as it appears the only scenario where we would navigate up to the root is when we're dealing with chats, and according to this issue, we might not want to do that even for chats.

if (isChildReport(report) && !isMoneyRequestReport(report) && !isTaskReport(report) && !isChatReport(report)) {}

The condition above (as proposed) seems to always return false now that we added chat to the list. isMoneyRequestReport, isTaskReport and isChatReport covers all 4 types of reports:

        TYPE: {
            CHAT: 'chat',
            EXPENSE: 'expense',
            IOU: 'iou',
            TASK: 'task',
        },

So unless I'm missing something, we can rename getRootReportAndWorkspaceName to getReportAndWorkspaceName and remove the part that it navigates to the root report. But again, I might be missing a scenario where we actually want to get to the root.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[paultsimura]

I see that @chiragsalian once mentioned that it's an expected behavior: #27986 (comment)

@puneetlath @chiragsalian did the expected behavior change, and we should proceed with the proposals review here?

[dragnoir]

Proposal

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

Wrong header title shown in chat threads

What is the root cause of that problem?

On the HeaderView component, we are using the parentNavigationSubtitleData to get the title of the parent displayed after From...

App/src/pages/home/HeaderView.js

Line 108 in cd14830

const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData);

but this function getParentNavigationSubtitle is using getRootReportAndWorkspaceName(parentReport); to turn the title of the parent report and this is wrong.

App/src/libs/ReportUtils.ts

Lines 2639 to 2643 in cd14830

	function getParentNavigationSubtitle(report: OnyxEntry<Report>): ParentNavigationSummaryParams {
	if (isThread(report)) {
	const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
	const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
	if (!rootReportName) {

As you can see from the name of the function getRootReportAndWorkspaceName, the word ROOT is about getting details from the root, not the parent.

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

We need to get the title from the parent and not from the root. We can use

const  parentReportName  =  getReportName(parentReport);

This will turn the title of the parent and not the title of the root.

POC video:

20240223_135951.mp4

What alternative solutions did you explore? (Optional)

I can see that the function getParentNavigationSubtitle from ReportUtils is used by other components. I think it's better to create two fucntions, one to get Parent Title and a second for the root title and then adjust components depending on the need (root/parent).

[paultsimura]

Not overdue. Waiting for a decision from @puneetlath and @chiragsalian. Also asked in Slack.