[$500] LHN - Selecting Mark as unread not displaying chat in bold

[kbecciv]

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: 1.4.21
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Long press the chat which is not in bold and select "mark as unread"

Expected Result:

Selecting "Mark as unread" must display chat in bold in LHN.

Actual Result:

Selecting "Mark as unread" not displaying chat in bold in LHN.

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

Bug6331459_1704300031496.unread.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010c13f72ee15736be
• Upwork Job ID: 1742588451596718080
• Last Price Increase: 2024-01-10

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010c13f72ee15736be

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[namhihi237]

Proposal

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

Selecting "Mark as unread" must display chat in bold in LHN.

What is the root cause of that problem?

Currently in the OptionRowLHN menu context here, we pass '0' as the reportActionID

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 130 to 136 in 3826e5d

	ReportActionContextMenu.showContextMenu(
	CONST.CONTEXT_MENU_TYPES.REPORT,
	event,
	'',
	popoverAnchor,
	props.reportID,
	'0',

So that here it will take current time.

App/src/libs/actions/Report.ts

Lines 954 to 955 in 2fe1174

	// If no action created date is provided, use the last action's from other user
	const actionCreationTime = reportActionCreated || (latestReportActionFromOtherUsers?.created ?? DateUtils.getDBTime(0));

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

We should get the last report action if we do not pass the reportAction

const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(reportActions);
const lastReportAction = sortedReportActions[0];
const actionCreationTime = reportActionCreated || (lastReportAction?.created ?? latestReportActionFromOtherUsers?.created ?? DateUtils.getDBTime(0));

Result:

Screen.Recording.2024-01-04.at.00.38.35.mov

What alternative solutions did you explore? (Optional)

We should pass the last report action ID here.
Get reportActions from OptionRowLHNData.

const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(props.reportActions);
const lastReportAction = _.first(sortedReportActions);

[dragnoir]

Proposal

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

Mark as unred is not marking the report as unread (no bold effect)

What is the root cause of that problem?

the function markCommentAsUnread from report.ts needs data from Onyx.
The moments we try to mark the report as unred, the data of this report, is not available on Onyx

If we check from dev tool, application, Onyx database, we will not find the "report_Actions_xxxxxxxxx" of the report.

If we open the report, then mark it unred, it works, because the Onyx data is updated.

The function markCommentAsUnread subtract 1 millisecond from actionCreationTime to update lastReadTime with the new value. if no OnyxData and reportActions is undefined, then lastReadTime will be minus 1 millisecond from DateUtils.getDBTime(0)

App/src/libs/actions/Report.ts

Lines 955 to 960 in 3b385ef

	const actionCreationTime = reportActionCreated || (latestReportActionFromOtherUsers?.created ?? DateUtils.getDBTime(0));
	// We subtract 1 millisecond so that the lastReadTime is updated to just before a given reportAction's created date
	// For example, if we want to mark a report action with ID 100 and created date '2014-04-01 16:07:02.999' unread, we set the lastReadTime to '2014-04-01 16:07:02.998'
	// Since the report action with ID 100 will be the first with a timestamp above '2014-04-01 16:07:02.998', it's the first one that will be shown as unread
	const lastReadTime = DateUtils.subtractMillisecondsFromDateTime(actionCreationTime, 1);

With the new lastReadTime time (wrong one), The function isUnread will compare lastReadTime < lastVisibleActionCreated where the new lastReadTime is wrong (minus 1 ms from DateUtils.getDBTime(0) and not lastVisibleActionCreated)

App/src/libs/ReportUtils.ts

Lines 3293 to 3302 in 3b385ef

	function isUnread(report: OnyxEntry<Report>): boolean {
	if (!report) {
	return false;
	}
	// lastVisibleActionCreated and lastReadTime are both datetime strings and can be compared directly
	const lastVisibleActionCreated = report.lastVisibleActionCreated ?? '';
	const lastReadTime = report.lastReadTime ?? '';
	return lastReadTime < lastVisibleActionCreated;
	}

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

We need to update Onyx data on markCommentAsUnread before calling the data from the local storage.

App/src/libs/actions/Report.ts

Line 943 in 3b385ef

function markCommentAsUnread(reportID: string, reportActionCreated: string) {

We can use openReport(reportID); from the same file to update the OnyxData, then reportActions will not turn undefined.

What alternative solutions did you explore? (Optional)

We can update the Onyx data when the user press on item from LHNOptionsList. The onPress will use a function like fetchReportIfNeeded, then do the markCommentAsUnread

[bernhardoj]

Looks like a regression from #32958.

[situchan]

I am not able to reproduce on latest main

[bernhardoj]

You need to mark it as unread on a report with undefined report actions (not loaded to Onyx yet). Try relogin first.

[melvin-bot]

@slafortune, @allroundexperts Huh... This is 4 days overdue. Who can take care of this?

[slafortune]

@situchan @allroundexperts are either of you able to reproduce this still?

[situchan]

still not

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[dragnoir]

@situchan try to clean cache from dev tool, logout then login and try this from LHN without opening a report and for old chat. I just tested on staging and I can see the issue.

16.mp4

[allroundexperts]

@dragnoir Your solution works partially. Adding openReport call inside the markAsUnread function doesn't make it bold on the first time. You have to mark it as unread, wait for a few seconds and then mark is as unread again in order to make the bolding work.

[allroundexperts]

Still looking for better proposals.

[bernhardoj]

Proposal

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

Mark as unread on some chat doesn't turn the title to bold/

What is the root cause of that problem?

The title will turn to bold if ReportUtils.isUnread returns true. It compares if lastReadTime < lastVisibleActionCreated

App/src/libs/ReportUtils.ts

Line 3350 in fd45dea

return lastReadTime < lastVisibleActionCreated;

When pressing the mark as unread, it will take the report action created time subtracted by 1.

App/src/libs/actions/Report.ts

Lines 955 to 968 in fd45dea

	const latestReportActionFromOtherUsers = Object.values(reportActions ?? {}).reduce((latest: ReportAction | null, current: ReportAction) => {
	if (current.actorAccountID !== currentUserAccountID && (!latest || current.created > latest.created)) {
	return current;
	}
	return latest;
	}, null);
	// If no action created date is provided, use the last action's from other user
	const actionCreationTime = reportActionCreated || (latestReportActionFromOtherUsers?.created ?? DateUtils.getDBTime(0));
	// We subtract 1 millisecond so that the lastReadTime is updated to just before a given reportAction's created date
	// For example, if we want to mark a report action with ID 100 and created date '2014-04-01 16:07:02.999' unread, we set the lastReadTime to '2014-04-01 16:07:02.998'
	// Since the report action with ID 100 will be the first with a timestamp above '2014-04-01 16:07:02.998', it's the first one that will be shown as unread
	const lastReadTime = DateUtils.subtractMillisecondsFromDateTime(actionCreationTime, 1);

The report action created time that we take is:

1. The report action that we mark as unread, but this is not the case for us because we mark it from LHN, so it's undefined
2. The last report action of other users from the report actions onyx
3. Fallback to current time

But in our case, the report's report actions Onyx is not available yet, so the 2nd case fails too and falls back to the current time, so lastReadTime is always > lastVisibleActionCreated.

This is the regression from #32958 where we remove the fallback of the current report's lastVisibleActionCreated.

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

Add back the fallback of the report's lastVisibleActionCreated

const actionCreationTime = reportActionCreated || (latestReportActionFromOtherUsers?.created ?? allReports?.[reportID]?.lastVisibleActionCreated ?? DateUtils.getDBTime(0));

[allroundexperts]

If we decide to fix this here, then @bernhardoj's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[youssef-lr]

This is no longer reproducible.

[allroundexperts]

@youssef-lr This is easily reproducible. You need to logout and then login. Without opening the report, try marking it as unread.

[youssef-lr]

You need to logout and then login. Without opening the report, try marking it as unread.

I personally don't see a real world scenario for this. We typically mark messages as unread to get back to them later, after reading them, which means the report actions will be loaded. We also use infinite sessions so our typical users will only need to log in once.

[bernhardoj]

@youssef-lr I agree that it would be rare for any real user to encounter this case, but this works fine before #32958, so I think it makes sense if we fix it here.

[situchan]

If this should be fixed, should be treated as regression from #32958.
cc: @MonilBhavsar

[youssef-lr]

Thanks @situchan, I reopened #31748.