Implement get all ancestor of the thread

src/libs/ReportActionsUtils.ts

@@ -806,6 +806,29 @@ function hasRequestFromCurrentAccount(reportID: string, currentAccountID: number
     return reportActions.some((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && action.actorAccountID === currentAccountID);
 }
 
+function isReportActionUnread(reportAction: OnyxEntry<ReportAction>, lastReadTime: string) {
+    if (!lastReadTime) {
+        return Boolean(!isCreatedAction(reportAction));
+    }
+
+    return Boolean(reportAction && lastReadTime && reportAction.created && lastReadTime < reportAction.created);
+}
+
+/**
+ * Check whether the report action of the report is unread or not
+ *
+ */
+function isCurrentActionUnread(report: Report | EmptyObject, reportAction: ReportAction, reportActions: ReportActions): boolean {
+    const lastReadTime = report.lastReadTime ?? '';
+    const sortedReportActions = getSortedReportActions(Object.values(reportActions));
+    const currentActionIndex = sortedReportActions.findIndex((action) => action.reportActionID === reportAction.reportActionID);
+    if (currentActionIndex === -1) {
+        return false;
+    }
+    const prevReportAction = sortedReportActions[currentActionIndex - 1];
+    return isReportActionUnread(reportAction, lastReadTime) && (!prevReportAction || !isReportActionUnread(prevReportAction, lastReadTime));
+}
+
 export {
     extractLinksFromMessageHtml,
     getAllReportActions,
@@ -855,6 +878,7 @@ export {
     getMemberChangeMessageFragment,
     getMemberChangeMessagePlainText,
     isReimbursementDeQueuedAction,
+    isCurrentActionUnread,
 };
 
 export type {LastVisibleMessage};

src/libs/ReportUtils.ts

@@ -403,6 +403,13 @@ type OnyxDataTaskAssigneeChat = {
     optimisticChatCreatedReportAction?: OptimisticCreatedReportAction;
 };
 
+type Ancestor = {
+    report: Report;
+    reportAction: ReportAction;
+    shouldDisplayNewMarker: boolean;
+    shouldHideThreadDividerLine: boolean;
+};
+
 let currentUserEmail: string | undefined;
 let currentUserAccountID: number | undefined;
 let isAnonymousUser = false;
@@ -4640,6 +4647,61 @@ function shouldDisableThread(reportAction: OnyxEntry<ReportAction>, reportID: st
     );
 }
 
+function getAllAncestorReportActions(
+    report: Report | null | undefined,
+    shouldHideThreadDividerLine: boolean,
+    reports: OnyxCollection<Report> = {},
+    reportActions: OnyxCollection<ReportActions> = {},
+): Ancestor[] {
+    if (!report) {
+        return [];
+    }
+    const convertReports: OnyxCollection<Report> = {};
+    const convertReportActions: OnyxCollection<ReportActions> = {};
+    Object.values(reports ?? {}).forEach((itemReport) => {
+        if (!itemReport) {
+            return;
+        }
+        convertReports[itemReport.reportID] = itemReport;
+    });
+    Object.keys(reportActions ?? {}).forEach((actionKey) => {
+        if (!actionKey) {
+            return;
+        }
+        const reportID = CollectionUtils.extractCollectionItemID(actionKey as `reportActions_${string}`);
+        convertReportActions[reportID] = reportActions?.[actionKey] ?? null;
+    });
+    const allAncestors: Ancestor[] = [];
+    let parentReportID = report.parentReportID;
+    let parentReportActionID = report.parentReportActionID;
+    // Store the child of parent report
+    let currentReport = report;
+    let currentUnread = shouldHideThreadDividerLine;
+    while (parentReportID) {
+        const parentReport = convertReports?.[parentReportID];
+        const parentReportAction = convertReportActions?.[parentReportID]?.[parentReportActionID ?? ''] ?? null;
+        if (!parentReportAction || ReportActionsUtils.isTransactionThread(parentReportAction) || !parentReport) {
+            break;
+        }
+        const isParentReportActionUnread = ReportActionsUtils.isCurrentActionUnread(parentReport, parentReportAction, convertReportActions?.[parentReportID] ?? {});
+        allAncestors.push({
+            report: currentReport,
+            reportAction: parentReportAction,
+            shouldDisplayNewMarker: isParentReportActionUnread,
+            // We should hide the thread divider line if the previous ancestor action is unread
+            shouldHideThreadDividerLine: currentUnread,
+        });
+        parentReportID = parentReport?.parentReportID;
+        parentReportActionID = parentReport?.parentReportActionID;
+        if (!isEmptyObject(parentReport)) {
+            currentReport = parentReport;
+            currentUnread = isParentReportActionUnread;
+        }
+    }
+
+    return allAncestors.reverse();
+}
+
 function canBeAutoReimbursed(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = null): boolean {
     if (!policy) {
         return false;
@@ -4839,6 +4901,7 @@ export {
     shouldDisableThread,
     doesReportBelongToWorkspace,
     getChildReportNotificationPreference,
+    getAllAncestorReportActions,
     isReportParticipant,
     isValidReport,
     isReportFieldOfTypeTitle,

src/pages/home/report/ContextMenu/ContextMenuActions.tsx

@@ -248,7 +248,8 @@ const ContextMenuActions: ContextMenuAction[] = [
         shouldShow: (type, reportAction, isArchivedRoom, betas, menuTarget, isChronosReport, reportID, isPinnedChat, isUnreadChat) =>
             type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION || (type === CONST.CONTEXT_MENU_TYPES.REPORT && !isUnreadChat),
         onPress: (closePopover, {reportAction, reportID}) => {
-            Report.markCommentAsUnread(reportID, reportAction?.created);
+            const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction) ?? '';
+            Report.markCommentAsUnread(originalReportID, reportAction?.created);
             if (closePopover) {
                 hideContextMenu(true, ReportActionComposeFocusManager.focus);
             }

src/pages/home/report/ReportActionItem.js

@@ -121,6 +121,9 @@ const propTypes = {
 
     /** All the report actions belonging to the report's parent */
     parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+
+    /** Callback to be called on onPress */
+    onPress: PropTypes.func,
 };
 
 const defaultProps = {
@@ -132,6 +135,7 @@ const defaultProps = {
     shouldHideThreadDividerLine: false,
     userWallet: {},
     parentReportActions: {},
+    onPress: undefined,
 };
 
 function ReportActionItem(props) {
@@ -699,6 +703,7 @@ function ReportActionItem(props) {
     return (
         <PressableWithSecondaryInteraction
             ref={popoverAnchorRef}
+            onPress={props.onPress}
             style={[props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? styles.pointerEventsNone : styles.pointerEventsAuto]}
             onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}

src/pages/home/report/ReportActionItemParentAction.tsx

@@ -1,91 +1,105 @@
-import React from 'react';
+import {deepEqual} from 'fast-equals';
+import lodashIsEqual from 'lodash/isEqual';
+import React, {memo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import ReportActionItem from './ReportActionItem';
 
 type ReportActionItemParentActionOnyxProps = {
     /** The report currently being looked at */
-    report: OnyxEntry<OnyxTypes.Report>;
+    allReportActions: OnyxCollection<OnyxTypes.ReportActions>;
 
     /** The actions from the parent report */
-    parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;
+    allReports: OnyxCollection<OnyxTypes.Report>;
 };
 
 type ReportActionItemParentActionProps = ReportActionItemParentActionOnyxProps & {
     /** Flag to show, hide the thread divider line */
     shouldHideThreadDividerLine?: boolean;
 
-    /** Flag to display the new marker on top of the comment */
-    shouldDisplayNewMarker: boolean;
-
     /** Position index of the report parent action in the overall report FlatList view */
     index: number;
 
     /** The id of the report */
     // eslint-disable-next-line react/no-unused-prop-types
     reportID: string;
-
-    /** The id of the parent report */
-    // eslint-disable-next-line react/no-unused-prop-types
-    parentReportID: string;
 };
 
-function ReportActionItemParentAction({report, parentReportActions = {}, index = 0, shouldHideThreadDividerLine = false, shouldDisplayNewMarker}: ReportActionItemParentActionProps) {
+function ReportActionItemParentAction({allReportActions = {}, allReports = {}, index = 0, shouldHideThreadDividerLine = false, reportID}: ReportActionItemParentActionProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const parentReportAction = parentReportActions?.[`${report?.parentReportActionID ?? ''}`] ?? null;
+    const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+    const allAncestors = ReportUtils.getAllAncestorReportActions(report, shouldHideThreadDividerLine, allReports, allReportActions);
 
-    // In case of transaction threads, we do not want to render the parent report action.
-    if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
-        return null;
-    }
     return (
-        <OfflineWithFeedback
-            shouldDisableOpacity={Boolean(parentReportAction?.pendingAction ?? false)}
-            pendingAction={report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat}
-            errors={report?.errorFields?.addWorkspaceRoom ?? report?.errorFields?.createChat}
-            errorRowStyles={[styles.ml10, styles.mr2]}
-            onClose={() => Report.navigateToConciergeChatAndDeleteReport(report?.reportID ?? '0')}
-        >
-            <View style={StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)}>
+        <>
+            <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), styles.justifyContentEnd]}>
                 <AnimatedEmptyStateBackground />
                 <View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />
-                {parentReportAction && (
-                    <ReportActionItem
-                        // @ts-expect-error TODO: Remove the comment after ReportActionItem is migrated to TypeScript.
-                        report={report}
-                        action={parentReportAction}
-                        displayAsGroup={false}
-                        isMostRecentIOUReportAction={false}
-                        shouldDisplayNewMarker={shouldDisplayNewMarker}
-                        index={index}
-                    />
-                )}
+                {allAncestors.map((ancestor) => (
+                    <OfflineWithFeedback
+                        shouldDisableOpacity={Boolean(ancestor.reportAction?.pendingAction)}
+                        pendingAction={ancestor.report?.pendingFields?.addWorkspaceRoom ?? ancestor.report?.pendingFields?.createChat}
+                        errors={ancestor.report?.errorFields?.addWorkspaceRoom ?? ancestor.report?.errorFields?.createChat}
+                        errorRowStyles={[styles.ml10, styles.mr2]}
+                        onClose={() => Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)}
+                    >
+                        <ReportActionItem
+                            key={ancestor.reportAction.reportActionID}
+                            // @ts-expect-error TODO: Remove this once ReportActionItem (https://github.com/Expensify/App/issues/31982) is migrated to TypeScript.
+                            onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.reportID))}
+                            report={ancestor.report}
+                            action={ancestor.reportAction}
+                            displayAsGroup={false}
+                            isMostRecentIOUReportAction={false}
+                            shouldDisplayNewMarker={ancestor.shouldDisplayNewMarker}
+                            index={index}
+                        />
+                        {!ancestor.shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
+                    </OfflineWithFeedback>
+                ))}
             </View>
-            {!shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
-        </OfflineWithFeedback>
+        </>
     );
 }
 
 ReportActionItemParentAction.displayName = 'ReportActionItemParentAction';
 
 export default withOnyx<ReportActionItemParentActionProps, ReportActionItemParentActionOnyxProps>({
-    report: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+    // We should subscribe all reports and report actions here to dynamic update when any parent report action is changed
+    allReportActions: {
+        key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     },
-    parentReportActions: {
-        key: ({parentReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
-        canEvict: false,
+    allReports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
     },
-})(ReportActionItemParentAction);
+})(
+    memo(ReportActionItemParentAction, (prevProps, nextProps) => {
+        const {allReportActions: prevAllReportActions, allReports: prevAllReports, ...prevPropsWithoutReportActionsAndReports} = prevProps;
+        const {allReportActions: nextAllReportActions, allReports: nextAllReports, ...nextPropsWithoutReportActionsAndReports} = nextProps;
+
+        const prevReport = prevAllReports?.[`${ONYXKEYS.COLLECTION.REPORT}${prevProps.reportID}`];
+        const nextReport = nextAllReports?.[`${ONYXKEYS.COLLECTION.REPORT}${nextProps.reportID}`];
+        const prevAllAncestors = ReportUtils.getAllAncestorReportActions(prevReport, prevProps.shouldHideThreadDividerLine ?? false, prevAllReports, prevAllReportActions);
+        const nextAllAncestors = ReportUtils.getAllAncestorReportActions(nextReport, nextProps.shouldHideThreadDividerLine ?? false, nextAllReports, nextAllReportActions);
+
+        if (prevReport !== nextReport || !deepEqual(prevAllAncestors, nextAllAncestors)) {
+            return false;
+        }
+
+        return lodashIsEqual(prevPropsWithoutReportActionsAndReports, nextPropsWithoutReportActionsAndReports);
+    }),
+);

src/pages/home/report/ReportActionsListItemRenderer.js

@@ -59,7 +59,6 @@ function ReportActionsListItemRenderer({
         <ReportActionItemParentAction
             shouldHideThreadDividerLine={shouldDisplayParentAction && shouldHideThreadDividerLine}
             reportID={report.reportID}
-            parentReportID={`${report.parentReportID}`}
             shouldDisplayNewMarker={shouldDisplayNewMarker}
             index={index}
         />