Open reports at first unread action

__mocks__/react-native.ts

@@ -45,7 +45,7 @@ jest.doMock('react-native', () => {
             NativeModules: {
                 ...ReactNative.NativeModules,
                 BootSplash: {
-                    hide: jest.fn(),
+                    hide: jest.fn().mockResolvedValue(undefined),
                     logoSizeRatio: 1,
                     navigationBarHeight: 0,
                 },

src/CONST.ts

@@ -5369,8 +5369,7 @@ const CONST = {
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
 
-    MOBILE_PAGINATION_SIZE: 15,
-    WEB_PAGINATION_SIZE: 30,
+    PAGINATION_SIZE: 15,
 
     /** Dimensions for illustration shown in Confirmation Modal */
     CONFIRM_CONTENT_SVG_SIZE: {

src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

@@ -3,7 +3,7 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo,
 import type {FlatListProps, ListRenderItem, ListRenderItemInfo, FlatList as RNFlatList, ScrollViewProps} from 'react-native';
 import FlatList from '@components/FlatList';
 import usePrevious from '@hooks/usePrevious';
-import getInitialPaginationSize from './getInitialPaginationSize';
+import CONST from '@src/CONST';
 import RenderTaskQueue from './RenderTaskQueue';
 
 // Adapted from https://github.com/facebook/react-native/blob/29a0d7c3b201318a873db0d1b62923f4ce720049/packages/virtualized-lists/Lists/VirtualizeUtils.js#L237
@@ -46,7 +46,7 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
         if (currentDataIndex <= 0) {
             return data;
         }
-        return data.slice(Math.max(0, currentDataIndex - (isInitialData ? 0 : getInitialPaginationSize)));
+        return data.slice(Math.max(0, currentDataIndex - (isInitialData ? 0 : CONST.PAGINATION_SIZE)));
     }, [currentDataIndex, data, isInitialData]);
 
     const isLoadingData = data.length > displayedData.length;
@@ -111,13 +111,32 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
             });
         };
 
+        const scrollToIndexFn: RNFlatList['scrollToIndex'] = (params) => {
+            const actualIndex = params.index - dataIndexDifference;
+            try {
+                listRef.current?.scrollToIndex({...params, index: actualIndex});
+            } catch (ex) {
+                // It is possible that scrolling fails since the item we are trying to scroll to
+                // has not been rendered yet. In this case, we call the onScrollToIndexFailed.
+                props.onScrollToIndexFailed?.({
+                    index: actualIndex,
+                    // These metrics are not implemented.
+                    averageItemLength: 0,
+                    highestMeasuredFrameIndex: 0,
+                });
+            }
+        };
+
         return new Proxy(
             {},
             {
                 get: (_target, prop) => {
                     if (prop === 'scrollToOffset') {
                         return scrollToOffsetFn;
                     }
+                    if (prop === 'scrollToIndex') {
+                        return scrollToIndexFn;
+                    }
                     return listRef.current?.[prop as keyof RNFlatList];
                 },
             },

src/libs/API/parameters/OpenReportParams.ts

@@ -15,6 +15,7 @@ type OpenReportParams = {
     optimisticAccountIDList?: string;
     file?: File | CustomRNImageManipulatorResult;
     guidedSetupData?: string;
+    useLastUnreadReportAction?: boolean;
 };
 
 export default OpenReportParams;

src/libs/Middleware/Pagination.ts

@@ -105,7 +105,7 @@ const Pagination: Middleware = (requestResponse, request) => {
 
         const newPage = sortedPageItems.map((item) => getItemID(item));
 
-        if (response.hasNewerActions === false || (type === 'initial' && !cursorID)) {
+        if (response.hasNewerActions === false) {
             newPage.unshift(CONST.PAGINATION_START_ID);
         }
         if (response.hasOlderActions === false) {
@@ -119,8 +119,14 @@ const Pagination: Middleware = (requestResponse, request) => {
 
         const pagesCollections = pages.get(pageCollectionKey) ?? {};
         const existingPages = pagesCollections[pageKey] ?? [];
-        const mergedPages = PaginationUtils.mergeAndSortContinuousPages(sortedAllItems, [...existingPages, newPage], getItemID);
 
+        // When loading the first page of data, make sure to remove the start maker if the backend returns
+        // that there is new data.
+        const firstPage = existingPages.at(0);
+        if (type === 'initial' && !cursorID && firstPage?.at(0) === CONST.PAGINATION_START_ID && response.hasNewerActions === true) {
+            firstPage.shift();
+        }
+        const mergedPages = PaginationUtils.mergeAndSortContinuousPages(sortedAllItems, [...existingPages, newPage], getItemID);
         response.onyxData.push({
             key: pageKey,
             onyxMethod: Onyx.METHOD.SET,

src/libs/actions/Report.ts

@@ -917,6 +917,7 @@ function openReport(
         emailList: participantLoginList ? participantLoginList.join(',') : '',
         accountIDList: participantAccountIDList ? participantAccountIDList.join(',') : '',
         parentReportActionID,
+        useLastUnreadReportAction: true,
     };
 
     const isInviteOnboardingComplete = introSelected?.isInviteOnboardingComplete ?? false;

src/pages/home/report/ReportActionsList.tsx

@@ -275,7 +275,7 @@ function ReportActionsList({
     /**
      * The reportActionID the unread marker should display above
      */
-    const unreadMarkerReportActionID = useMemo(() => {
+    const {unreadMarkerReportActionID, unreadMarkerReportActionIndex} = useMemo(() => {
         const shouldDisplayNewMarker = (message: OnyxTypes.ReportAction, index: number): boolean => {
             const nextMessage = sortedVisibleReportActions.at(index + 1);
             const isNextMessageUnread = !!nextMessage && isReportActionUnread(nextMessage, unreadMarkerTime);
@@ -332,11 +332,11 @@ function ReportActionsList({
 
             // eslint-disable-next-line react-compiler/react-compiler
             if (reportAction && shouldDisplayNewMarker(reportAction, index)) {
-                return reportAction.reportActionID;
+                return {unreadMarkerReportActionID: reportAction.reportActionID, unreadMarkerReportActionIndex: index};
             }
         }
 
-        return null;
+        return {unreadMarkerReportActionID: null, unreadMarkerReportActionIndex: -1};
     }, [accountID, earliestReceivedOfflineMessageIndex, prevSortedVisibleReportActionsObjects, sortedVisibleReportActions, unreadMarkerTime]);
     prevUnreadMarkerReportActionID.current = unreadMarkerReportActionID;
 
@@ -446,7 +446,7 @@ function ReportActionsList({
     }, [report.lastVisibleActionCreated, report.reportID, isVisible]);
 
     useEffect(() => {
-        if (linkedReportActionID) {
+        if (linkedReportActionID || unreadMarkerReportActionID) {
             return;
         }
         InteractionManager.runAfterInteractions(() => {
@@ -491,7 +491,7 @@ function ReportActionsList({
     useEffect(() => {
         // Why are we doing this, when in the cleanup of the useEffect we are already calling the unsubscribe function?
         // Answer: On web, when navigating to another report screen, the previous report screen doesn't get unmounted,
-        //         meaning that the cleanup might not get called. When we then open a report we had open already previosuly, a new
+        //         meaning that the cleanup might not get called. When we then open a report we had open already previously, a new
         //         ReportScreen will get created. Thus, we have to cancel the earlier subscription of the previous screen,
         //         because the two subscriptions could conflict!
         //         In case we return to the previous screen (e.g. by web back navigation) the useEffect for that screen would
@@ -639,6 +639,27 @@ function ReportActionsList({
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isFocused, isVisible]);
 
+    // Handles scrolling to the unread marker.
+    // If we have an unread marker initially we do not need to scroll to it as this
+    // will be handled by the list `initialScrollKey`.
+    const didScrollToUnreadMarker = useRef(unreadMarkerReportActionIndex >= 0);
+    useEffect(() => {
+        if (unreadMarkerReportActionIndex === -1 || didScrollToUnreadMarker.current) {
+            return;
+        }
+        didScrollToUnreadMarker.current = true;
+        InteractionManager.runAfterInteractions(() => {
+            reportScrollManager.ref?.current?.scrollToIndex({
+                index: unreadMarkerReportActionIndex,
+                animated: true,
+                // This scrolls the unread action at the top of the screen.
+                viewPosition: 1,
+                // This makes sure that the unread indicator doesn't get cut off.
+                viewOffset: -64,
+            });
+        });
+    }, [reportScrollManager, unreadMarkerReportActionIndex]);
+
     const renderItem = useCallback(
         ({item: reportAction, index}: ListRenderItemInfo<OnyxTypes.ReportAction>) => (
             <ReportActionsListItemRenderer
@@ -813,7 +834,7 @@ function ReportActionsList({
                     extraData={extraData}
                     key={listID}
                     shouldEnableAutoScrollToTopThreshold={shouldEnableAutoScrollToTopThreshold}
-                    initialScrollKey={reportActionID}
+                    initialScrollKey={reportActionID ?? unreadMarkerReportActionID}
                 />
             </View>
         </>

src/pages/home/report/ReportActionsView.tsx

@@ -330,8 +330,7 @@ function ReportActionsView({
         (force = false) => {
             if (
                 !force &&
-                (!reportActionID ||
-                    !isFocused ||
+                (!isFocused ||
                     !newestReportAction ||
                     isLoadingInitialReportActions ||
                     isLoadingNewerReportActions ||
@@ -361,7 +360,6 @@ function ReportActionsView({
             }
         },
         [
-            reportActionID,
             isFocused,
             newestReportAction,
             isLoadingInitialReportActions,

tests/ui/PaginationTest.tsx

@@ -4,16 +4,17 @@ import {act, fireEvent, render, screen, within} from '@testing-library/react-nat
 import {addSeconds, format, subMinutes} from 'date-fns';
 import React from 'react';
 import Onyx from 'react-native-onyx';
-import * as Localize from '@libs/Localize';
-import * as SequentialQueue from '@libs/Network/SequentialQueue';
-import * as AppActions from '@userActions/App';
-import * as User from '@userActions/User';
+import {setSidebarLoaded} from '@libs/actions/App';
+import {subscribeToUserEvents} from '@libs/actions/User';
+import {translateLocal} from '@libs/Localize';
+import {waitForIdle} from '@libs/Network/SequentialQueue';
 import App from '@src/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 import type {NativeNavigationMock} from '../../__mocks__/@react-navigation/native';
 import PusherHelper from '../utils/PusherHelper';
+import {getReportScreen, LIST_CONTENT_SIZE, navigateToSidebarOption, REPORT_ID, scrollToOffset, triggerListLayout} from '../utils/ReportTestUtils';
 import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
@@ -30,75 +31,23 @@ jest.mock('@src/components/Navigation/TopLevelBottomTabBar/useIsBottomTabVisible
 TestHelper.setupApp();
 const fetchMock = TestHelper.setupGlobalFetchMock();
 
-const LIST_SIZE = {
-    width: 300,
-    height: 400,
-};
-const LIST_CONTENT_SIZE = {
-    width: 300,
-    height: 600,
-};
 const TEN_MINUTES_AGO = subMinutes(new Date(), 10);
 
-const REPORT_ID = '1';
 const COMMENT_LINKING_REPORT_ID = '2';
 const USER_A_ACCOUNT_ID = 1;
 const USER_A_EMAIL = 'user_a@test.com';
 const USER_B_ACCOUNT_ID = 2;
 const USER_B_EMAIL = 'user_b@test.com';
 
-function getReportScreen(reportID = REPORT_ID) {
-    return screen.getByTestId(`report-screen-${reportID}`);
-}
-
-function scrollToOffset(offset: number) {
-    const hintText = Localize.translateLocal('sidebarScreen.listOfChatMessages');
-    fireEvent.scroll(within(getReportScreen()).getByLabelText(hintText), {
-        nativeEvent: {
-            contentOffset: {
-                y: offset,
-            },
-            contentSize: LIST_CONTENT_SIZE,
-            layoutMeasurement: LIST_SIZE,
-        },
-    });
-}
-
-function triggerListLayout(reportID?: string) {
-    const report = getReportScreen(reportID);
-    fireEvent(within(report).getByTestId('report-actions-view-wrapper'), 'onLayout', {
-        nativeEvent: {
-            layout: {
-                x: 0,
-                y: 0,
-                ...LIST_SIZE,
-            },
-        },
-    });
-
-    fireEvent(within(report).getByTestId('report-actions-list'), 'onContentSizeChange', LIST_CONTENT_SIZE.width, LIST_CONTENT_SIZE.height);
-}
-
 function getReportActions(reportID?: string) {
     const report = getReportScreen(reportID);
     return [
-        ...within(report).queryAllByLabelText(Localize.translateLocal('accessibilityHints.chatMessage')),
+        ...within(report).queryAllByLabelText(translateLocal('accessibilityHints.chatMessage')),
         // Created action has a different accessibility label.
-        ...within(report).queryAllByLabelText(Localize.translateLocal('accessibilityHints.chatWelcomeMessage')),
+        ...within(report).queryAllByLabelText(translateLocal('accessibilityHints.chatWelcomeMessage')),
     ];
 }
 
-async function navigateToSidebarOption(reportID: string): Promise<void> {
-    const optionRow = screen.getByTestId(reportID);
-    fireEvent(optionRow, 'press');
-    await act(() => {
-        (NativeNavigation as NativeNavigationMock).triggerTransitionEnd();
-    });
-    // ReportScreen relies on the onLayout event to receive updates from onyx.
-    triggerListLayout(reportID);
-    await waitForBatchedUpdatesWithAct();
-}
-
 function buildCreatedAction(reportActionID: string, created: string) {
     return {
         reportActionID,
@@ -129,7 +78,7 @@ function buildReportComments(count: number, initialID: string, reverse = false)
 }
 
 function mockOpenReport(messageCount: number, initialID: string) {
-    fetchMock.mockAPICommand('OpenReport', ({reportID}) => {
+    fetchMock.mockAPICommand('OpenReport', ({reportID, reportActionID}) => {
         const comments = buildReportComments(messageCount, initialID);
         return {
             onyxData:
@@ -143,7 +92,7 @@ function mockOpenReport(messageCount: number, initialID: string) {
                       ]
                     : [],
             hasOlderActions: !comments['1'],
-            hasNewerActions: !!reportID,
+            hasNewerActions: !!reportActionID,
         };
     });
 }
@@ -192,7 +141,7 @@ async function signInAndGetApp(): Promise<void> {
     // Render the App and sign in as a test user.
     render(<App />);
     await waitForBatchedUpdatesWithAct();
-    const hintText = Localize.translateLocal('loginForm.loginForm');
+    const hintText = translateLocal('loginForm.loginForm');
     const loginForm = await screen.findAllByLabelText(hintText);
     expect(loginForm).toHaveLength(1);
 
@@ -202,16 +151,17 @@ async function signInAndGetApp(): Promise<void> {
 
     await waitForBatchedUpdatesWithAct();
 
-    User.subscribeToUserEvents();
+    subscribeToUserEvents();
 
     await waitForBatchedUpdates();
 
     await act(async () => {
-        // Simulate setting an unread report and personal details
+        // Simulate setting a report and personal details
         await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
             reportID: REPORT_ID,
             reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
             lastMessageText: 'Test',
+            lastReadTime: format(new Date(), CONST.DATE.FNS_DB_FORMAT_STRING),
             participants: {
                 [USER_B_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
                 [USER_A_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
@@ -229,6 +179,7 @@ async function signInAndGetApp(): Promise<void> {
             reportID: COMMENT_LINKING_REPORT_ID,
             reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
             lastMessageText: 'Test',
+            lastReadTime: format(new Date(), CONST.DATE.FNS_DB_FORMAT_STRING),
             participants: {[USER_A_ACCOUNT_ID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS}},
             lastActorAccountID: USER_A_ACCOUNT_ID,
             type: CONST.REPORT.TYPE.CHAT,
@@ -253,15 +204,15 @@ async function signInAndGetApp(): Promise<void> {
         });
 
         // We manually setting the sidebar as loaded since the onLayout event does not fire in tests
-        AppActions.setSidebarLoaded();
+        setSidebarLoaded();
     });
 
     await waitForBatchedUpdatesWithAct();
 }
 
 describe('Pagination', () => {
     afterEach(async () => {
-        await SequentialQueue.waitForIdle();
+        await waitForIdle();
         await act(async () => {
             await Onyx.clear();