diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index db0495c0b480..9c2ee7ef0a5a 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/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, diff --git a/src/components/Search/SearchList/ListItem/ChatListItem.tsx b/src/components/Search/SearchList/ListItem/ChatListItem.tsx index b28ef86c559d..31031347d576 100644 --- a/src/components/Search/SearchList/ListItem/ChatListItem.tsx +++ b/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({ 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({ action={reportActionItem} report={reportStable} transactionThreadReport={transactionThreadReport} + chatReport={chatReportStable} onPress={handlePress} parentReportAction={undefined} displayAsGroup={false} diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index 2c7a8b34c4bd..8315be3d6569 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/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(() => 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({ ; + /** The chat report associated with the report for this action (report.chatReportID) */ + chatReport: OnyxEntry; + /** Report action belonging to the report's parent */ parentReportAction: OnyxEntry; @@ -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} diff --git a/src/pages/inbox/report/ReportActionsList.tsx b/src/pages/inbox/report/ReportActionsList.tsx index 4bb59cd2d6e7..31d8e5adb3cc 100644 --- a/src/pages/inbox/report/ReportActionsList.tsx +++ b/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) => 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, diff --git a/src/pages/inbox/report/ReportActionsListItemRenderer.tsx b/src/pages/inbox/report/ReportActionsListItemRenderer.tsx index ebdfdf4bf420..584105c03b99 100644 --- a/src/pages/inbox/report/ReportActionsListItemRenderer.tsx +++ b/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; + /** The chat report associated with the report for this action (report.chatReportID) */ + chatReport?: OnyxEntry; + /** 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} diff --git a/src/pages/inbox/report/actionContents/ActionContentRouter.tsx b/src/pages/inbox/report/actionContents/ActionContentRouter.tsx index fd4845368f0e..55a29bce9f45 100644 --- a/src/pages/inbox/report/actionContents/ActionContentRouter.tsx +++ b/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; - /** Original report from which the given reportAction is first created */ - originalReport: OnyxEntry; - /** 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; diff --git a/tests/ui/ClearReportActionErrorsUITest.tsx b/tests/ui/ClearReportActionErrorsUITest.tsx index cf93362b23bf..fd4306d99a0c 100644 --- a/tests/ui/ClearReportActionErrorsUITest.tsx +++ b/tests/ui/ClearReportActionErrorsUITest.tsx @@ -86,6 +86,7 @@ describe('ClearReportActionErrors UI', () => { { { { { { { { { { { { { { { { { { { { { { { { { { { { {