HIGH: (Comment linking: Step 4) Main "glue" PR for Comment Linking

patches/react-native-web+0.19.9+004+fixLastSpacer.patch

@@ -17,7 +17,7 @@ index faeb323..68d740a 100644
 
  /**
   * Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist)
-@@ -1119,7 +1111,8 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1107,7 +1099,8 @@ class VirtualizedList extends StateSafePureComponent {
        _keylessItemComponentName = '';
        var spacerKey = this._getSpacerKey(!horizontal);
        var renderRegions = this.state.renderMask.enumerateRegions();

src/components/FlatList/MVCPFlatList.js

@@ -46,7 +46,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
         return horizontal ? scrollRef.current.getScrollableNode().scrollLeft : scrollRef.current.getScrollableNode().scrollTop;
     }, [horizontal]);
 
-    const getContentView = React.useCallback(() => scrollRef.current?.getScrollableNode().childNodes[0], []);
+    const getContentView = React.useCallback(() => scrollRef.current?.getScrollableNode()?.childNodes[0], []);
 
     const scrollToOffset = React.useCallback(
         (offset, animated) => {
@@ -67,12 +67,13 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
         }
 
         const scrollOffset = getScrollOffset();
+        lastScrollOffsetRef.current = scrollOffset;
 
         const contentViewLength = contentView.childNodes.length;
         for (let i = mvcpMinIndexForVisible; i < contentViewLength; i++) {
             const subview = contentView.childNodes[i];
             const subviewOffset = horizontal ? subview.offsetLeft : subview.offsetTop;
-            if (subviewOffset > scrollOffset || i === contentViewLength - 1) {
+            if (subviewOffset > scrollOffset) {
                 prevFirstVisibleOffsetRef.current = subviewOffset;
                 firstVisibleViewRef.current = subview;
                 break;
@@ -125,6 +126,7 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
                 }
 
                 adjustForMaintainVisibleContentPosition();
+                prepareForMaintainVisibleContentPosition();
             });
         });
         mutationObserver.observe(contentView, {
@@ -134,13 +136,11 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
         });
 
         mutationObserverRef.current = mutationObserver;
-    }, [adjustForMaintainVisibleContentPosition, getContentView, getScrollOffset, scrollToOffset]);
+    }, [adjustForMaintainVisibleContentPosition, prepareForMaintainVisibleContentPosition, getContentView, getScrollOffset, scrollToOffset]);
 
-    React.useEffect(() => {
-        requestAnimationFrame(() => {
-            prepareForMaintainVisibleContentPosition();
-            setupMutationObserver();
-        });
+    React.useLayoutEffect(() => {
+        prepareForMaintainVisibleContentPosition();
+        setupMutationObserver();
     }, [prepareForMaintainVisibleContentPosition, setupMutationObserver]);
 
     const setMergedRef = useMergeRefs(scrollRef, forwardedRef);
@@ -168,13 +168,11 @@ const MVCPFlatList = React.forwardRef(({maintainVisibleContentPosition, horizont
 
     const onScrollInternal = React.useCallback(
         (ev) => {
-            lastScrollOffsetRef.current = getScrollOffset();
-
             prepareForMaintainVisibleContentPosition();
 
             onScroll?.(ev);
         },
-        [getScrollOffset, prepareForMaintainVisibleContentPosition, onScroll],
+        [prepareForMaintainVisibleContentPosition, onScroll],
     );
 
     return (

src/components/InvertedFlatList/BaseInvertedFlatList.tsx

@@ -3,19 +3,15 @@ import React, {forwardRef} from 'react';
 import type {FlatListProps} from 'react-native';
 import FlatList from '@components/FlatList';
 
-const WINDOW_SIZE = 15;
-const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
-
 function BaseInvertedFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
     return (
         <FlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
-            windowSize={WINDOW_SIZE}
             maintainVisibleContentPosition={{
-                minIndexForVisible: 0,
-                autoscrollToTopThreshold: AUTOSCROLL_TO_TOP_THRESHOLD,
+                // This needs to be 1 to avoid using loading views as anchors.
+                minIndexForVisible: 1,
             }}
             inverted
         />

src/components/ReportActionItem/MoneyRequestAction.js

@@ -108,7 +108,7 @@ function MoneyRequestAction({
         if (!childReportID) {
             const thread = ReportUtils.buildTransactionThread(action, requestReportID);
             const userLogins = PersonalDetailsUtils.getLoginsByAccountIDs(thread.participantAccountIDs);
-            Report.openReport(thread.reportID, userLogins, thread, action.reportActionID);
+            Report.openReport(thread.reportID, '', userLogins, thread, action.reportActionID);
             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(thread.reportID));
             return;
         }

src/hooks/useReportScrollManager/index.native.ts

@@ -29,7 +29,21 @@ function useReportScrollManager(): ReportScrollManagerData {
         flatListRef.current?.scrollToOffset({animated: false, offset: 0});
     }, [flatListRef, setScrollPosition]);
 
-    return {ref: flatListRef, scrollToIndex, scrollToBottom};
+    /**
+     * Scroll to the offset of the flatlist.
+     */
+    const scrollToOffsetWithoutAnimation = useCallback(
+        (offset: number) => {
+            if (!flatListRef?.current) {
+                return;
+            }
+
+            flatListRef.current.scrollToOffset({animated: false, offset});
+        },
+        [flatListRef],
+    );
+
+    return {ref: flatListRef, scrollToIndex, scrollToBottom, scrollToOffsetWithoutAnimation};
 }
 
 export default useReportScrollManager;

src/hooks/useReportScrollManager/index.ts

@@ -28,7 +28,21 @@ function useReportScrollManager(): ReportScrollManagerData {
         flatListRef.current.scrollToOffset({animated: false, offset: 0});
     }, [flatListRef]);
 
-    return {ref: flatListRef, scrollToIndex, scrollToBottom};
+    /**
+     * Scroll to the bottom of the flatlist.
+     */
+    const scrollToOffsetWithoutAnimation = useCallback(
+        (offset: number) => {
+            if (!flatListRef?.current) {
+                return;
+            }
+
+            flatListRef.current.scrollToOffset({animated: false, offset});
+        },
+        [flatListRef],
+    );
+
+    return {ref: flatListRef, scrollToIndex, scrollToBottom, scrollToOffsetWithoutAnimation};
 }
 
 export default useReportScrollManager;

src/hooks/useReportScrollManager/types.ts

@@ -4,6 +4,7 @@ type ReportScrollManagerData = {
     ref: FlatListRefType;
     scrollToIndex: (index: number, isEditing?: boolean) => void;
     scrollToBottom: () => void;
+    scrollToOffsetWithoutAnimation: (offset: number) => void;
 };
 
 export default ReportScrollManagerData;

src/libs/ReportActionsUtils.ts

@@ -186,7 +186,7 @@ function isTransactionThread(parentReportAction: OnyxEntry<ReportAction>): boole
  * This gives us a stable order even in the case of multiple reportActions created on the same millisecond
  *
  */
-function getSortedReportActions(reportActions: ReportAction[] | null, shouldSortInDescendingOrder = false, shouldMarkTheFirstItemAsNewest = false): ReportAction[] {
+function getSortedReportActions(reportActions: ReportAction[] | null, shouldSortInDescendingOrder = false): ReportAction[] {
     if (!Array.isArray(reportActions)) {
         throw new Error(`ReportActionsUtils.getSortedReportActions requires an array, received ${typeof reportActions}`);
     }
@@ -214,15 +214,47 @@ function getSortedReportActions(reportActions: ReportAction[] | null, shouldSort
         return (first.reportActionID < second.reportActionID ? -1 : 1) * invertedMultiplier;
     });
 
-    // If shouldMarkTheFirstItemAsNewest is true, label the first reportAction as isNewestReportAction
-    if (shouldMarkTheFirstItemAsNewest && sortedActions?.length > 0) {
-        sortedActions[0] = {
-            ...sortedActions[0],
-            isNewestReportAction: true,
-        };
+    return sortedActions;
+}
+// Returns the largest gapless range of reportActions including a the provided reportActionID, where a "gap" is defined as a reportAction's `previousReportActionID` not matching the previous reportAction in the sortedReportActions array.
+// See unit tests for example of inputs and expected outputs.
+// Note: sortedReportActions sorted in descending order
+function getContinuousReportActionChain(sortedReportActions: ReportAction[], id?: string): ReportAction[] {
+    let index;
+
+    if (id) {
+        index = sortedReportActions.findIndex((obj) => obj.reportActionID === id);
+    } else {
+        index = sortedReportActions.findIndex((obj) => obj.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD);
     }
 
-    return sortedActions;
+    if (index === -1) {
+        return [];
+    }
+
+    let startIndex = index;
+    let endIndex = index;
+
+    // Iterate forwards through the array, starting from endIndex. This loop checks the continuity of actions by:
+    // 1. Comparing the current item's previousReportActionID with the next item's reportActionID.
+    //    This ensures that we are moving in a sequence of related actions from newer to older.
+    while (endIndex < sortedReportActions.length - 1 && sortedReportActions[endIndex].previousReportActionID === sortedReportActions[endIndex + 1].reportActionID) {
+        endIndex++;
+    }
+
+    // Iterate backwards through the sortedReportActions, starting from startIndex. This loop has two main checks:
+    // 1. It compares the current item's reportActionID with the previous item's previousReportActionID.
+    //    This is to ensure continuity in a sequence of actions.
+    // 2. If the first condition fails, it then checks if the previous item has a pendingAction of 'add'.
+    //    This additional check is to include recently sent messages that might not yet be part of the established sequence.
+    while (
+        (startIndex > 0 && sortedReportActions[startIndex].reportActionID === sortedReportActions[startIndex - 1].previousReportActionID) ||
+        sortedReportActions[startIndex - 1]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD
+    ) {
+        startIndex--;
+    }
+
+    return sortedReportActions.slice(startIndex, endIndex + 1);
 }
 
 /**
@@ -494,12 +526,26 @@ function filterOutDeprecatedReportActions(reportActions: ReportActions | null):
  * to ensure they will always be displayed in the same order (in case multiple actions have the same timestamp).
  * This is all handled with getSortedReportActions() which is used by several other methods to keep the code DRY.
  */
-function getSortedReportActionsForDisplay(reportActions: ReportActions | null, shouldMarkTheFirstItemAsNewest = false): ReportAction[] {
-    const filteredReportActions = Object.entries(reportActions ?? {})
-        .filter(([key, reportAction]) => shouldReportActionBeVisible(reportAction, key))
-        .map((entry) => entry[1]);
+function getSortedReportActionsForDisplay(reportActions: ReportActions | null, shouldIncludeInvisibleActions = false): ReportAction[] {
+    let filteredReportActions;
+
+    if (shouldIncludeInvisibleActions) {
+        filteredReportActions = Object.values(reportActions ?? {});
+    } else {
+        filteredReportActions = Object.entries(reportActions ?? {})
+            .filter(([key, reportAction]) => shouldReportActionBeVisible(reportAction, key))
+            .map((entry) => entry[1]);
+    }
+
     const baseURLAdjustedReportActions = filteredReportActions.map((reportAction) => replaceBaseURL(reportAction));
-    return getSortedReportActions(baseURLAdjustedReportActions, true, shouldMarkTheFirstItemAsNewest);
+    return getSortedReportActions(baseURLAdjustedReportActions, true);
+}
+
+function getReportActionsWithoutRemoved(reportActions: ReportAction[] | null): ReportAction[] {
+    if (!reportActions) {
+        return [];
+    }
+    return reportActions.filter((item) => shouldReportActionBeVisible(item, item.reportActionID));
 }
 
 /**
@@ -827,6 +873,7 @@ export {
     getReportPreviewAction,
     getSortedReportActions,
     getSortedReportActionsForDisplay,
+    getReportActionsWithoutRemoved,
     isConsecutiveActionMadeByPreviousActor,
     isCreatedAction,
     isCreatedTaskReportAction,
@@ -853,6 +900,7 @@ export {
     shouldReportActionBeVisible,
     shouldHideNewMarker,
     shouldReportActionBeVisibleAsLastAction,
+    getContinuousReportActionChain,
     hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
     isMemberChangeAction,

src/libs/actions/Report.ts

@@ -464,6 +464,8 @@ function reportActionsExist(reportID: string): boolean {
  * Gets the latest page of report actions and updates the last read message
  * If a chat with the passed reportID is not found, we will create a chat based on the passed participantList
  *
+ * @param reportID The ID of the report to open
+ * @param reportActionID The ID of the report action to navigate to
  * @param participantLoginList The list of users that are included in a new chat, not including the user creating it
  * @param newReportObject The optimistic report object created when making a new chat, saved as optimistic data
  * @param parentReportActionID The parent report action that a thread was created from (only passed for new threads)
@@ -472,6 +474,7 @@ function reportActionsExist(reportID: string): boolean {
  */
 function openReport(
     reportID: string,
+    reportActionID?: string,
     participantLoginList: string[] = [],
     newReportObject: Partial<Report> = {},
     parentReportActionID = '0',
@@ -544,6 +547,7 @@ function openReport(
     type OpenReportParameters = {
         reportID: string;
         emailList?: string;
+        reportActionID?: string;
         accountIDList?: string;
         parentReportActionID?: string;
         shouldRetry?: boolean;
@@ -554,6 +558,7 @@ function openReport(
 
     const parameters: OpenReportParameters = {
         reportID,
+        reportActionID,
         emailList: participantLoginList ? participantLoginList.join(',') : '',
         accountIDList: participantAccountIDList ? participantAccountIDList.join(',') : '',
         parentReportActionID,
@@ -689,7 +694,7 @@ function navigateToAndOpenReport(userLogins: string[], shouldDismissModal = true
     const reportID = chat ? chat.reportID : newChat.reportID;
 
     // We want to pass newChat here because if anything is passed in that param (even an existing chat), we will try to create a chat on the server
-    openReport(reportID, userLogins, newChat);
+    openReport(reportID, '', userLogins, newChat);
     if (shouldDismissModal) {
         Navigation.dismissModal(reportID);
     } else {
@@ -711,7 +716,7 @@ function navigateToAndOpenReportWithAccountIDs(participantAccountIDs: number[])
     const reportID = chat ? chat.reportID : newChat.reportID;
 
     // We want to pass newChat here because if anything is passed in that param (even an existing chat), we will try to create a chat on the server
-    openReport(reportID, [], newChat, '0', false, participantAccountIDs);
+    openReport(reportID, '', [], newChat, '0', false, participantAccountIDs);
     Navigation.dismissModal(reportID);
 }
 
@@ -745,7 +750,7 @@ function navigateToAndOpenChildReport(childReportID = '0', parentReportAction: P
         );
 
         const participantLogins = PersonalDetailsUtils.getLoginsByAccountIDs(newChat?.participantAccountIDs ?? []);
-        openReport(newChat.reportID, participantLogins, newChat, parentReportAction.reportActionID);
+        openReport(newChat.reportID, '', participantLogins, newChat, parentReportAction.reportActionID);
         Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(newChat.reportID));
     }
 }
@@ -1474,7 +1479,7 @@ function toggleSubscribeToChildReport(childReportID = '0', parentReportAction: P
         );
 
         const participantLogins = PersonalDetailsUtils.getLoginsByAccountIDs(participantAccountIDs);
-        openReport(newChat.reportID, participantLogins, newChat, parentReportAction.reportActionID);
+        openReport(newChat.reportID, '', participantLogins, newChat, parentReportAction.reportActionID);
         const notificationPreference =
             prevNotificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN ? CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS : CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN;
         updateNotificationPreference(newChat.reportID, prevNotificationPreference, notificationPreference, false, parentReportID, parentReportAction?.reportActionID);
@@ -2022,7 +2027,7 @@ function openReportFromDeepLink(url: string, isAuthenticated: boolean) {
 
     if (reportID && !isAuthenticated) {
         // Call the OpenReport command to check in the server if it's a public room. If so, we'll open it as an anonymous user
-        openReport(reportID, [], {}, '0', true);
+        openReport(reportID, '', [], {}, '0', true);
 
         // Show the sign-in page if the app is offline
         if (isNetworkOffline) {