Implement get all ancestor of the thread

src/libs/ReportActionsUtils.ts

@@ -810,6 +810,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): boolean {
+    const lastReadTime = report.lastReadTime ?? '';
+    const sortedReportActions = getSortedReportActions(Object.values(getAllReportActions(report.reportID)));
+    const currentActionIndex = sortedReportActions.findIndex((action) => action.reportActionID === reportAction.reportActionID);
+    if (currentActionIndex === -1) {
+        return false;
+    }
+    const nextReportAction = sortedReportActions[currentActionIndex + 1];
+    return isReportActionUnread(reportAction, lastReadTime) && (!nextReportAction || !isReportActionUnread(nextReportAction, lastReadTime));
+}
+
 export {
     extractLinksFromMessageHtml,
     getAllReportActions,
@@ -860,6 +883,7 @@ export {
     getMemberChangeMessageFragment,
     getMemberChangeMessagePlainText,
     isReimbursementDeQueuedAction,
+    isCurrentActionUnread,
 };
 
 export type {LastVisibleMessage};

src/libs/ReportUtils.ts

@@ -367,6 +367,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;
@@ -4434,6 +4441,38 @@ function shouldDisableThread(reportAction: OnyxEntry<ReportAction>, reportID: st
     );
 }
 
+function getAllAncestorReportActions(report: Report): Ancestor[] {
+    let parentReportID = report.parentReportID;
+    let parentReportActionID = report.parentReportActionID;
+    // Store the child of parent report
+    let currentReport = report;
+    let currentUnread = false;
+    const allAncestors: Ancestor[] = [];
+    while (parentReportID) {
+        const parentReport = getReport(parentReportID);
+        const parentReportAction = ReportActionsUtils.getReportAction(parentReportID, parentReportActionID ?? '0');
+        if (!parentReportAction || ReportActionsUtils.isTransactionThread(parentReportAction) || !parentReport) {
+            break;
+        }
+        const isParentReportActionUnread = ReportActionsUtils.isCurrentActionUnread(parentReport, parentReportAction);
+        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();
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -4613,6 +4652,7 @@ export {
     shouldDisplayThreadReplies,
     shouldDisableThread,
     getChildReportNotificationPreference,
+    getAllAncestorReportActions,
 };
 
 export type {ExpenseOriginalMessage, OptionData, OptimisticChatReport, OptimisticCreatedReportAction};

src/pages/home/report/ReportActionItem.js

@@ -120,6 +120,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 = {
@@ -131,6 +134,7 @@ const defaultProps = {
     shouldHideThreadDividerLine: false,
     userWallet: {},
     parentReportActions: {},
+    onPress: undefined,
 };
 
 function ReportActionItem(props) {
@@ -693,6 +697,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.js

@@ -3,19 +3,22 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
+import reportActionFragmentPropTypes from './reportActionFragmentPropTypes';
 import ReportActionItem from './ReportActionItem';
-import reportActionPropTypes from './reportActionPropTypes';
 
 const propTypes = {
     /** Flag to show, hide the thread divider line */
@@ -27,77 +30,127 @@ const propTypes = {
     /** Position index of the report parent action in the overall report FlatList view */
     index: PropTypes.number.isRequired,
 
-    /** The id of the parent report */
-    // eslint-disable-next-line react/no-unused-prop-types
-    parentReportID: PropTypes.string.isRequired,
-
     /** ONYX PROPS */
 
-    /** The report currently being looked at */
-    report: reportPropTypes,
+    /** List of reports */
+    /* eslint-disable-next-line react/no-unused-prop-types */
+    allReports: PropTypes.objectOf(reportPropTypes),
 
-    /** The actions from the parent report */
-    // TO DO: Replace with HOC https://github.com/Expensify/App/issues/18769.
-    parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+    /** All report actions for all reports */
+    /* eslint-disable-next-line react/no-unused-prop-types */
+    allReportActions: PropTypes.objectOf(
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                error: PropTypes.string,
+                message: PropTypes.arrayOf(reportActionFragmentPropTypes),
+                created: PropTypes.string,
+                pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
+            }),
+        ),
+    ),
 
     ...windowDimensionsPropTypes,
 };
 const defaultProps = {
-    report: {},
-    parentReportActions: {},
+    allReports: {},
+    allReportActions: {},
     shouldHideThreadDividerLine: false,
 };
 
 function ReportActionItemParentAction(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const parentReportAction = props.parentReportActions[`${props.report.parentReportActionID}`];
+    const report = ReportUtils.getReport(props.reportID);
+    const allAncestors = ReportUtils.getAllAncestorReportActions(report);
 
-    // 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(lodashGet(parentReportAction, 'pendingAction'))}
-            pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')}
-            errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom') || lodashGet(props.report, 'errorFields.createChat')}
-            errorRowStyles={[styles.ml10, styles.mr2]}
-            onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)}
-        >
-            <View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
+        <>
+            <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), styles.justifyContentEnd]}>
                 <AnimatedEmptyStateBackground />
                 <View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]} />
-                {parentReportAction && (
-                    <ReportActionItem
-                        report={props.report}
-                        action={parentReportAction}
-                        displayAsGroup={false}
-                        isMostRecentIOUReportAction={false}
-                        shouldDisplayNewMarker={props.shouldDisplayNewMarker}
-                        index={props.index}
-                    />
-                )}
+                {_.map(allAncestors, (ancestor, index) => {
+                    const isNearestAncestor = index === allAncestors.length - 1;
+                    const shouldHideThreadDividerLine = isNearestAncestor ? props.shouldHideThreadDividerLine : ancestor.shouldHideThreadDividerLine;
+                    return (
+                        <OfflineWithFeedback
+                            shouldDisableOpacity={Boolean(lodashGet(ancestor.reportAction, 'pendingAction'))}
+                            pendingAction={lodashGet(ancestor.report, 'pendingFields.addWorkspaceRoom') || lodashGet(ancestor.report, 'pendingFields.createChat')}
+                            errors={lodashGet(ancestor.report, 'errorFields.addWorkspaceRoom') || lodashGet(ancestor.report, 'errorFields.createChat')}
+                            errorRowStyles={[styles.ml10, styles.mr2]}
+                            onClose={() => Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)}
+                        >
+                            <ReportActionItem
+                                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={props.index}
+                            />
+                            {!shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
+                        </OfflineWithFeedback>
+                    );
+                })}
             </View>
-            {!props.shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
-        </OfflineWithFeedback>
+        </>
     );
 }
 
 ReportActionItemParentAction.defaultProps = defaultProps;
 ReportActionItemParentAction.propTypes = propTypes;
 ReportActionItemParentAction.displayName = 'ReportActionItemParentAction';
 
+/**
+ * @param {Object} [reportActions]
+ * @returns {Object|undefined}
+ */
+const reportActionsSelector = (reportActions) =>
+    reportActions &&
+    _.map(reportActions, (reportAction) => ({
+        errors: lodashGet(reportAction, 'errors', []),
+        pendingAction: lodashGet(reportAction, 'pendingAction'),
+        message: reportAction.message,
+        created: reportAction.created,
+    }));
+
+/**
+ * @param {Object} [report]
+ * @returns {Object|undefined}
+ */
+const reportSelector = (report) =>
+    report && {
+        reportID: report.reportID,
+        isHidden: report.isHidden,
+        errorFields: {
+            createChat: report.errorFields && report.errorFields.createChat,
+            addWorkspaceRoom: report.errorFields && report.errorFields.addWorkspaceRoom,
+        },
+        pendingFields: {
+            createChat: report.pendingFields && report.pendingFields.createChat,
+            addWorkspaceRoom: report.pendingFields && report.pendingFields.addWorkspaceRoom,
+        },
+        statusNum: report.statusNum,
+        stateNum: report.stateNum,
+        lastReadTime: report.lastReadTime,
+        // Other important less obivous properties for filtering:
+        parentReportActionID: report.parentReportActionID,
+        parentReportID: report.parentReportID,
+        isDeletedParentAction: report.isDeletedParentAction,
+    };
+
 export default compose(
     withWindowDimensions,
     withLocalize,
     withOnyx({
-        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,
+            selector: reportActionsSelector,
         },
-        parentReportActions: {
-            key: ({parentReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`,
-            canEvict: false,
+        allReports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+            selector: reportSelector,
         },
     }),
 )(ReportActionItemParentAction);

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}
         />