[HOLD for payment 2024-11-01] [$250] The "New messages" floating button doesn't scroll to bottom for actionable whispers

[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.40-1
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: @paultsimura
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1727285468531329

Action Performed:

1. Create a room;
2. Mention a user that is not a member of this room using the @{user} syntax;
3. Notice the actionable whisper "Heads up, {user} isn't a member of this room" message appears;
4. Verify the "New messages" floating button appears;
5. Scroll up a little;
6. Click the "New messages" floating button;

Expected Result:

The report is scrolled to the bottom so the whisper action becomes visible.

Actual Result:

The report is not scrolled.

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

bug_1.mov

Recording.586.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021839443131047584238
• Upwork Job ID: 1839443131047584238
• Last Price Increase: 2024-10-10
• Automatic offers:
• situchan | Reviewer | 104361028

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (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.

[trjExpensify]

Yeah, that's strange.

[melvin-bot]

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

[melvin-bot]

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

[raza-ak]

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

The "New messages" floating button doesn't scroll to bottom for actionable whispers

What is the root cause of that problem?

The issue is rooted in the ReportActionsList component. Specifically, the scrollToBottomAndMarkReportAsRead function is not initiating the scroll when the hasNewestReportAction value is false.

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

Modify the component logic to ensure that clicking the "New Messages" floating button triggers the scroll functionality. If hasNewestReportAction is false, we explicitly call the scrollToBottom function to ensure that the latest messages or chats are displayed.
Code Changes:

In the src/pages/home/report/ReportActionsList.tsx file, update the logic as follows:

This change ensures that the latest message/chat is visible when hasNewestReportAction is false, effectively resolving the scrolling issue.
Video:

1.mp4

[klajdipaja]

Proposal

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

The "New Message" button should scroll down to the bottom when clicked but only for whisper messages it does not.

What is the root cause of that problem?

The function that handles the scroll to bottom is the one below:

    const scrollToBottomAndMarkReportAsRead = () => {
        if (!hasNewestReportAction) {
            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID));
            Report.openReport(report.reportID);
            return;
        }
        reportScrollManager.scrollToBottom();
        readActionSkipped.current = false;
        Report.readNewestAction(report.reportID);
    };

The flag hasNewestReportAction is not working properly for whisper messages
hasNewestReportAction=sortedVisibleReportActions[0]?.created === report.lastVisibleActionCreated
sortedVisibleReportActions[0] belongs to the whisper action but report.lastVisibleActionCreated to the action the user has executed. Along with that we also have the problem the the unreadMarkerTime is not set correctly since we are setting it to sortedVisibleReportActions[0] we are effectively setting it the whisper message created time which the user has not read yet.

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

We need to modify the useEffect that sets the unreadMarkerTime to actually use the report date as below:

useEffect(() => {
        if (unreadMarkerReportActionID) {
            return;
        }

        const mostRecentReportActionCreated = report.lastVisibleActionCreated ?? '';
        if (mostRecentReportActionCreated === unreadMarkerTime) {
            return;
        }

        setUnreadMarkerTime(mostRecentReportActionCreated);

        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [sortedVisibleReportActions, report.lastVisibleActionCreated]);

This will make sure that the unreadMarker is updated when the report.lastVisibleActionCreated changes and re-render the component to update the hasNewestReportAction flag.

We also need to changee the logic of the unreadMarkerReportActionID to check if the latest message is a whisper for the current user then we should show a "New Message" marker above. The shouldDisplayNewMarker will change the return to check if the latest action is a whisper:

const shouldDisplayNewMarker = (reportAction: OnyxTypes.ReportAction, index: number): boolean => {
            const nextMessage = sortedVisibleReportActions[index + 1];
            const isCurrentMessageUnread = isMessageUnread(reportAction, unreadMarkerTime);
            const isNextMessageRead = !nextMessage || !isMessageUnread(nextMessage, unreadMarkerTime);
            const shouldDisplay = isCurrentMessageUnread && isNextMessageRead && !ReportActionsUtils.shouldHideNewMarker(reportAction);
            const isWithinVisibleThreshold = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < (userActiveSince.current ?? '') : true;
            const isWhisperForUser = isWhisperVisibleOnlyToUser(sortedVisibleReportActions[index]);
            return shouldDisplay && (isWithinVisibleThreshold || isWhisperForUser);
        };

What alternative solutions did you explore? (Optional)

Screen.Recording.2024-09-27.at.6.17.02.PM.mov