diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index ddbbf382afaf9..ab6406f87b7db 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -98,6 +98,8 @@ type SearchProps = { onDEWModalOpen?: () => void; }; +const hashToString = (queryHash?: number) => (queryHash || queryHash === 0 ? String(queryHash) : undefined); + function mapTransactionItemToSelectedEntry( item: TransactionListItemType, itemTransaction: OnyxEntry, @@ -542,9 +544,7 @@ function Search({ if (!validGroupBy) { return []; } - return (baseFilteredData as TransactionGroupListItemType[]) - .map((item) => (item.transactionsQueryJSON?.hash ? String(item.transactionsQueryJSON.hash) : undefined)) - .filter((hashValue): hashValue is string => !!hashValue); + return (baseFilteredData as TransactionGroupListItemType[]).map((item) => hashToString(item.transactionsQueryJSON?.hash)).filter((hashValue): hashValue is string => !!hashValue); }, [validGroupBy, baseFilteredData]); const groupByTransactionSnapshots = useMultipleSnapshots(groupByTransactionHashes); @@ -555,7 +555,7 @@ function Search({ } const enriched = (baseFilteredData as TransactionGroupListItemType[]).map((item) => { - const snapshot = item.transactionsQueryJSON?.hash ? groupByTransactionSnapshots[String(item.transactionsQueryJSON.hash)] : undefined; + const snapshot = groupByTransactionSnapshots[hashToString(item.transactionsQueryJSON?.hash) ?? '']; if (!snapshot?.data) { return item; } diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index eb4fd0bdcba1d..7cb5be7d361d9 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -17,11 +17,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; +import {getReportAction} from '@libs/ReportActionsUtils'; +import {getReportOrDraftReport} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getTableMinWidth} from '@libs/SearchUIUtils'; import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import {getTransactionViolations} from '@libs/TransactionUtils'; +import type {TransactionPreviewData} from '@userActions/Search'; import {setActiveTransactionIDs} from '@userActions/TransactionThreadNavigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -33,6 +37,7 @@ function TransactionGroupListExpanded({ showTooltip, canSelectMultiple, onCheckboxPress, + onSelectRow, columns, groupBy, accountID, @@ -57,6 +62,7 @@ function TransactionGroupListExpanded({ const [isMobileSelectionModeEnabled] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [visibleColumns] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: columnsSelector}); + const [allTransactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION); const transactionsSnapshotMetadata = transactionsSnapshot?.search; @@ -90,6 +96,21 @@ function TransactionGroupListExpanded({ const dateColumnSize = shouldShowYearForSomeTransaction ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL; const {markReportIDAsExpense} = useWideRHPActions(); + const selectRow = onSelectRow as (item: TItem, transactionPreviewData?: TransactionPreviewData) => void; + const getTransactionPreviewData = (transactionItem: TransactionListItemType): TransactionPreviewData => { + const parentReportAction = getReportAction(transactionItem?.reportID, transactionItem?.reportAction?.reportActionID); + const parentReport = getReportOrDraftReport(transactionItem?.reportID); + const transactionThreadReport = getReportOrDraftReport(transactionItem?.reportAction?.childReportID); + const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionItem?.transactionID)}`]; + + return { + hasParentReport: !!parentReport, + hasTransaction: !!transaction, + hasParentReportAction: !!parentReportAction, + hasTransactionThreadReport: !!transactionThreadReport, + }; + }; + const openReportInRHP = (transactionItem: TransactionListItemType) => { const backTo = Navigation.getActiveRoute(); const reportID = getReportIDForTransaction(transactionItem, transactionItem?.reportAction?.childReportID); @@ -112,7 +133,7 @@ function TransactionGroupListExpanded({ // The arrow navigation in RHP is only allowed for group-by:reports if (!isExpenseReportType) { - navigateToTransactionThread(); + selectRow(transactionItem as unknown as TItem, getTransactionPreviewData(transactionItem)); return; } diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index a487e000d2c9b..d048fb30b92d6 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -484,6 +484,7 @@ function TransactionGroupListItem({ showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} onCheckboxPress={onCheckboxPress} + onSelectRow={onSelectRow} columns={columns} groupBy={groupBy} accountID={currentUserDetails.accountID} diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts index d82358af34486..559709abc01cd 100644 --- a/src/components/SelectionListWithSections/types.ts +++ b/src/components/SelectionListWithSections/types.ts @@ -749,7 +749,7 @@ type TransactionGroupListItemProps = ListItemProps = Pick< TransactionGroupListItemProps, - 'showTooltip' | 'canSelectMultiple' | 'onCheckboxPress' | 'columns' | 'groupBy' | 'accountID' | 'isOffline' | 'violations' + 'showTooltip' | 'canSelectMultiple' | 'onCheckboxPress' | 'onSelectRow' | 'columns' | 'groupBy' | 'accountID' | 'isOffline' | 'violations' > & { transactions: TransactionListItemType[]; transactionsVisibleLimit: number;