[NoQA] stabilize stableReportSelector and more reports in the ReportActionItem tree

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -564,6 +564,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
                         parentReportActionForTransactionThread={EmptyParentReportActionForTransactionThread}
                         report={reportStable}
                         transactionThreadReport={transactionThreadReport}
+                        chatReport={chatReport}
                         displayAsGroup={displayAsGroup}
                         shouldDisplayNewMarker={reportAction.reportActionID === unreadMarkerReportActionID}
                         shouldDisplayReplyDivider={visibleReportActions.length > 1}
@@ -580,6 +581,7 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
             visibleReportActions,
             parentReportAction,
             reportStable,
+            chatReport,
             isOffline,
             transactionThreadReport,
             unreadMarkerReportActionID,

src/components/Search/SearchList/ListItem/ChatListItem.tsx

@@ -7,6 +7,7 @@ import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import FS from '@libs/Fullstory';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import ReportActionItem from '@pages/inbox/report/ReportActionItem';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -31,6 +32,7 @@ function ChatListItem<TItem extends ListItem>({
     const reportActionItem = item as unknown as ReportActionListItemType;
     const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem?.reportID}`, {selector: getStableReportSelector});
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportActionItem?.childReportID}`);
+    const [chatReportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportStable?.chatReportID)}`, {selector: getStableReportSelector});
     const styles = useThemeStyles();
     const theme = useTheme();
     const {isSelected} = useRowSelection(item.keyForList);
@@ -81,6 +83,7 @@ function ChatListItem<TItem extends ListItem>({
                 action={reportActionItem}
                 report={reportStable}
                 transactionThreadReport={transactionThreadReport}
+                chatReport={chatReportStable}
                 onPress={handlePress}
                 parentReportAction={undefined}
                 displayAsGroup={false}

src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx

@@ -13,6 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import DebugUtils from '@libs/DebugUtils';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DebugParamList} from '@libs/Navigation/types';
@@ -62,6 +63,8 @@ function DebugReportActionCreatePage({
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [draftReportAction, setDraftReportAction] = useState<string>(() => getInitialReportAction(reportID, session, personalDetailsList));
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
 
     const reportAction = useMemo(() => parseReportActionJSON(draftReportAction), [draftReportAction]);
 
@@ -128,7 +131,8 @@ function DebugReportActionCreatePage({
                                 <ReportActionItem
                                     action={reportAction}
                                     transactionThreadReport={transactionThreadReport}
-                                    report={{reportID}}
+                                    report={report}
+                                    chatReport={chatReport}
                                     parentReportAction={undefined}
                                     displayAsGroup={false}
                                     shouldDisplayNewMarker={false}

src/pages/Debug/ReportAction/DebugReportActionPreview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import ScrollView from '@components/ScrollView';
 import useOnyx from '@hooks/useOnyx';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import ReportActionItem from '@pages/inbox/report/ReportActionItem';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Report, ReportAction} from '@src/types/onyx';
@@ -17,12 +18,14 @@ type DebugReportActionPreviewProps = {
 function DebugReportActionPreview({reportAction, reportID}: DebugReportActionPreviewProps) {
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportAction?.childReportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
 
     return (
         <ScrollView>
             <ReportActionItem
                 action={reportAction ?? ({} as ReportAction)}
                 transactionThreadReport={transactionThreadReport}
+                chatReport={chatReport}
                 report={report ?? ({} as Report)}
                 parentReportAction={undefined}
                 displayAsGroup={false}

src/pages/inbox/report/AncestorReportActionItem.tsx

@@ -7,10 +7,12 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isTripPreview} from '@libs/ReportActionsUtils';
 import {canCurrentUserOpenReport, canUserPerformWriteAction as canUserPerformWriteActionReportUtils, isArchivedReport, navigateToLinkedReportAction} from '@libs/ReportUtils';
 import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {getStableReportSelector} from '@src/selectors/Report';
 import type {Beta, IntroSelected, PersonalDetails, Report, ReportAction, ReportNameValuePairs} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import ReportActionItem from './ReportActionItem';
@@ -87,6 +89,7 @@ function AncestorReportActionItem({
     const styles = useThemeStyles();
     const currentUserPersonalDetail = useCurrentUserPersonalDetails();
     const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailByAccountIDSelector(report?.ownerAccountID)});
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`, {selector: getStableReportSelector});
 
     const shouldDisplayThreadDivider = !isTripPreview(reportAction);
     const isAncestorReportArchived = isArchivedReport(reportNameValuePairs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID}`]);
@@ -150,6 +153,7 @@ function AncestorReportActionItem({
                 onPress={canOpenAncestorReport ? openAncestorReport : undefined}
                 parentReportAction={parentReportAction}
                 transactionThreadReport={transactionThreadReport}
+                chatReport={chatReport}
                 displayAsGroup={false}
                 shouldDisplayNewMarker={shouldDisplayNewMarker}
                 isFirstVisibleReportAction={isFirstVisibleReportAction}

src/pages/inbox/report/ReportActionItem.tsx

@@ -36,7 +36,6 @@ import ControlSelection from '@libs/ControlSelection';
 import {canUseTouchScreen, hasHoverSupport} from '@libs/DeviceCapabilities';
 import type {OnyxDataWithErrors} from '@libs/ErrorUtils';
 import {getLatestErrorMessageField, isReceiptError} from '@libs/ErrorUtils';
-import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isReportMessageAttachment} from '@libs/isReportMessageAttachment';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
@@ -97,6 +96,9 @@ type ReportActionItemProps = {
     /** The transaction thread report associated with the report for this action, if any */
     transactionThreadReport: OnyxEntry<OnyxTypes.Report>;
 
+    /** The chat report associated with the report for this action (report.chatReportID) */
+    chatReport: OnyxEntry<OnyxTypes.Report>;
+
     /** Report action belonging to the report's parent */
     parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
 
@@ -153,6 +155,7 @@ function ReportActionItem({
     action,
     report,
     transactionThreadReport,
+    chatReport,
     linkedReportActionID,
     displayAsGroup,
     parentReportAction,
@@ -171,8 +174,7 @@ function ReportActionItem({
 }: ReportActionItemProps) {
     const reportID = report?.reportID ?? action?.reportID;
     const originalReportID = useOriginalReportID(report?.reportID, action);
-    const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {selector: getStableReportSelector});
-    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`, {selector: getStableReportSelector});
 
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
     const transactionsOnIOUReport = useReportTransactions(iouReport?.reportID);
@@ -210,8 +212,6 @@ function ReportActionItem({
 
     const shouldRenderViewBasedOnAction = useTableReportViewActionRenderConditionals(action);
 
-    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.chatReportID)}`);
-
     const highlightedBackgroundColorIfNeeded = isReportActionLinked || shouldHighlight ? StyleUtils.getBackgroundColorStyle(theme.messageHighlightBG) : {};
 
     const isDeletedParentAction = isDeletedParentActionUtils(action);
@@ -594,7 +594,6 @@ function ReportActionItem({
                                                                 action={action}
                                                                 report={report}
                                                                 reportID={reportID}
-                                                                originalReport={originalReport}
                                                                 originalReportID={originalReportID}
                                                                 iouReport={iouReport}
                                                                 displayAsGroup={displayAsGroup}

src/pages/inbox/report/ReportActionsList.tsx

@@ -214,7 +214,9 @@ function ReportActionsList({
     });
     const isHarvestCreatedExpenseReportAction = isHarvestCreatedExpenseReport(reportNameValuePairs?.origin, reportNameValuePairs?.originalID);
 
-    const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {selector: getStableReportSelector});
+    const stableReportSelector = useCallback((reportEntry: OnyxEntry<OnyxTypes.Report>) => getStableReportSelector(reportEntry), []);
+    const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {selector: stableReportSelector});
+    const [chatReportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportStable?.chatReportID)}`, {selector: stableReportSelector});
 
     const backTo = route?.params?.backTo as string;
     const linkedReportActionID = route?.params?.reportActionID;
@@ -553,6 +555,7 @@ function ReportActionsList({
                         parentReportActionForTransactionThread={parentReportActionForTransactionThread}
                         report={reportStable}
                         transactionThreadReport={transactionThreadReport}
+                        chatReport={chatReportStable}
                         linkedReportActionID={linkedReportActionID}
                         displayAsGroup={
                             !isConsecutiveChronosAutomaticTimerAction(renderedVisibleReportActions, safeIndex, chatIncludesChronosWithID(reportAction?.reportID), isOffline) &&
@@ -591,6 +594,7 @@ function ReportActionsList({
             isHarvestCreatedExpenseReportAction,
             renderedVisibleReportActions,
             reportStable,
+            chatReportStable,
             shouldHideThreadDividerLine,
             shouldUseThreadDividerLine,
             showHiddenHistory,

src/pages/inbox/report/ReportActionsListItemRenderer.tsx

@@ -23,6 +23,9 @@ type ReportActionsListItemRendererProps = {
     /** The transaction thread report associated with the report for this action, if any */
     transactionThreadReport: OnyxEntry<Report>;
 
+    /** The chat report associated with the report for this action (report.chatReportID) */
+    chatReport?: OnyxEntry<Report>;
+
     /** Should the comment have the appearance of being grouped with the previous comment? */
     displayAsGroup: boolean;
 
@@ -59,6 +62,7 @@ function ReportActionsListItemRenderer({
     parentReportAction,
     report,
     transactionThreadReport,
+    chatReport,
     displayAsGroup,
     shouldHideThreadDividerLine,
     shouldDisplayNewMarker,
@@ -168,6 +172,7 @@ function ReportActionsListItemRenderer({
             parentReportAction={parentReportAction}
             report={report}
             transactionThreadReport={transactionThreadReport}
+            chatReport={chatReport}
             parentReportActionForTransactionThread={parentReportActionForTransactionThread}
             action={action}
             linkedReportActionID={linkedReportActionID}

src/pages/inbox/report/actionContents/ActionContentRouter.tsx

@@ -13,6 +13,7 @@ import TaskPreview from '@components/ReportActionItem/TaskPreview';
 import TripRoomPreview from '@components/ReportActionItem/TripRoomPreview';
 import UnreportedTransactionAction from '@components/ReportActionItem/UnreportedTransactionAction';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {
     getChangedApproverActionMessage,
@@ -45,6 +46,8 @@ import {
 import {getMovedActionMessage, isExpenseReport} from '@libs/ReportUtils';
 import ReportActionItemBasicMessage from '@pages/inbox/report/ReportActionItemBasicMessage';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {getStableReportSelector} from '@src/selectors/Report';
 import type * as OnyxTypes from '@src/types/onyx';
 import ApprovalFlowContent, {isApprovalFlowAction} from './ApprovalFlowContent';
 import CardBrokenConnectionContent from './CardBrokenConnectionContent';
@@ -73,9 +76,6 @@ type ActionContentRouterProps = {
     /** Report for this action */
     report: OnyxEntry<OnyxTypes.Report>;
 
-    /** Original report from which the given reportAction is first created */
-    originalReport: OnyxEntry<OnyxTypes.Report>;
-
     /** ID of the original report from which the given reportAction is first created */
     originalReportID?: string;
 
@@ -125,7 +125,6 @@ type ActionContentRouterProps = {
 function ActionContentRouter({
     action,
     report,
-    originalReport,
     originalReportID,
     iouReport,
     reportID,
@@ -145,6 +144,8 @@ function ActionContentRouter({
     const {translate, formatTravelDate} = useLocalize();
     const styles = useThemeStyles();
 
+    const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`, {selector: getStableReportSelector});
+
     // Report that owns this action for mutations (thread / merged-list cases use originalReport). This is a stable projection (heartbeat fields stripped).
     const actionOwnerReportStable = originalReport ?? report;
 

tests/ui/ClearReportActionErrorsUITest.tsx

@@ -86,6 +86,7 @@ describe('ClearReportActionErrors UI', () => {
                         <PortalProvider>
                             <ReportActionItem
                                 report={report}
+                                chatReport={undefined}
                                 transactionThreadReport={undefined}
                                 parentReportAction={undefined}
                                 action={action}