Merge pull request #85292 from TaduJR/fix-Reports-Total-report-number-x-of-y-does-not-update-when-new-report-is-created-offline

fix: filter deleted reports from navigation and disable in search list

Author: tylerkaraszewski

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

@@ -22,7 +22,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {handleActionButtonPress} from '@libs/actions/Search';
 import {syncMissingAttendeesViolation} from '@libs/AttendeeUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import {isInvoiceReport, isOpenExpenseReport, isProcessingReport} from '@libs/ReportUtils';
+import {isInvoiceReport, isOpenExpenseReport, isProcessingReport, isReportPendingDelete} from '@libs/ReportUtils';
 import {isViolationDismissed, shouldShowViolation} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -82,6 +82,10 @@ function ExpenseReportListItem<TItem extends ListItem>({
         return reportItem.isDisabled ?? reportItem.isDisabledCheckbox;
     }, [reportItem.isDisabled, reportItem.isDisabledCheckbox]);
 
+    // Prefer live Onyx data over stale search snapshot for pending delete check.
+    const reportForPendingDeleteCheck = parentReport ?? reportItem;
+    const isPendingDelete = isReportPendingDelete(reportForPendingDeleteCheck);
+
     // Prefer live Onyx policy data over snapshot to ensure fresh policy settings
     // like isAttendeeTrackingEnabled is not missing
     // Use snapshotReport/snapshotPolicy as fallbacks to fix offline issues where
@@ -162,8 +166,9 @@ function ExpenseReportListItem<TItem extends ListItem>({
             styles.bgTransparent,
             item.isSelected && styles.activeComponentBG,
             styles.mh0,
+            isPendingDelete && styles.cursorDisabled,
         ],
-        [styles, item.isSelected],
+        [styles, item.isSelected, isPendingDelete],
     );
 
     const listItemWrapperStyle = useMemo(
@@ -237,10 +242,12 @@ function ExpenseReportListItem<TItem extends ListItem>({
             onLongPressRow={onLongPressRow}
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
-            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
+            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isPendingDelete && styles.cursorDisabled]}
             accessible={false}
             shouldShowRightCaret={false}
             shouldUseDefaultRightHandSideCheckmark={false}
+            isDisabled={isPendingDelete}
+            shouldDisableHoverStyle={isPendingDelete}
         >
             {(hovered) => (
                 <View style={[styles.flex1]}>
@@ -258,6 +265,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
                         isDisabledCheckbox={isDisabledCheckbox}
                         isHovered={hovered}
                         isFocused={isFocused}
+                        isPendingDelete={isPendingDelete}
                     />
                     {getDescription}
                 </View>

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

@@ -47,6 +47,7 @@ type ExpenseReportListItemRowProps = {
     isDisabledCheckbox?: boolean;
     isHovered?: boolean;
     isFocused?: boolean;
+    isPendingDelete?: boolean;
     columns?: SearchColumnType[];
 };
 
@@ -65,6 +66,7 @@ function ExpenseReportListItemRow({
     columns = [],
     isHovered = false,
     isFocused = false,
+    isPendingDelete = false,
 }: ExpenseReportListItemRowProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
@@ -207,6 +209,7 @@ function ExpenseReportListItemRow({
                     reportID={item.reportID}
                     hash={item.hash}
                     amount={item.total}
+                    shouldDisablePointerEvents={isPendingDelete}
                 />
             </View>
         ),
@@ -312,7 +315,7 @@ function ExpenseReportListItemRow({
                         hash={item.hash}
                         amount={item.total}
                         extraSmall
-                        shouldDisablePointerEvents={isInMobileSelectionMode}
+                        shouldDisablePointerEvents={isInMobileSelectionMode || isPendingDelete}
                     />
                 </View>
             </View>

src/hooks/useSearchSections.ts

@@ -1,14 +1,30 @@
-import type {OnyxEntry} from 'react-native-onyx';
-import {selectFilteredReportActions} from '@libs/ReportUtils';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {isReportPendingDelete, selectFilteredReportActions} from '@libs/ReportUtils';
 import {getSections, getSortedSections} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report} from '@src/types/onyx';
 import type LastSearchParams from '@src/types/onyx/ReportNavigation';
 import useActionLoadingReportIDs from './useActionLoadingReportIDs';
 import useArchivedReportsIdSet from './useArchivedReportsIdSet';
 import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
 import useLocalize from './useLocalize';
 import useOnyx from './useOnyx';
 
+/**
+ * Returns sorted keys of reports pending deletion.
+ * Sorted string[] keeps Onyx comparison cheap (PERF-11).
+ */
+const selectPendingDeleteReportKeys = (reports: OnyxCollection<Report>): string[] => {
+    const keys: string[] = [];
+    for (const [key, report] of Object.entries(reports ?? {})) {
+        if (isReportPendingDelete(report)) {
+            keys.push(key);
+        }
+    }
+    return keys.sort();
+};
+
 type UseSearchSectionsResult = {
     allReports: Array<string | undefined>;
     isSearchLoading: boolean;
@@ -18,6 +34,8 @@ type UseSearchSectionsResult = {
 function useSearchSections(): UseSearchSectionsResult {
     const [lastSearchQuery] = useOnyx(ONYXKEYS.REPORT_NAVIGATION_LAST_SEARCH_QUERY);
     const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${lastSearchQuery?.queryJSON?.hash}`);
+    const [pendingDeleteReportKeys = CONST.EMPTY_ARRAY] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: selectPendingDeleteReportKeys});
+    const pendingDeleteReportKeysSet = new Set(pendingDeleteReportKeys);
     const currentUserDetails = useCurrentUserPersonalDetails();
     const {localeCompare, formatPhoneNumber, translate} = useLocalize();
     const isActionLoadingSet = useActionLoadingReportIDs();
@@ -42,7 +60,7 @@ function useSearchSections(): UseSearchSectionsResult {
     const currentUserEmail = currentUserDetails.email ?? '';
     const searchKey = lastSearchQuery?.searchKey;
 
-    let allReports: Array<string | undefined> = [];
+    let results: Array<string | undefined> = [];
     if (!!type && !!searchResultsData && !!searchResultsSearch) {
         const [searchData] = getSections({
             type,
@@ -62,10 +80,18 @@ function useSearchSections(): UseSearchSectionsResult {
             cardList,
             conciergeReportID,
         });
-        allReports = getSortedSections(type, status ?? '', searchData, localeCompare, translate, sortBy, sortOrder, groupBy).map((value) => value.reportID);
+        results = getSortedSections(type, status ?? '', searchData, localeCompare, translate, sortBy, sortOrder, groupBy).map((value) => value.reportID);
     }
 
+    const allReports = results.filter((id) => {
+        if (!id) {
+            return false;
+        }
+        return !pendingDeleteReportKeysSet.has(`${ONYXKEYS.COLLECTION.REPORT}${id}`);
+    });
+
     return {allReports, isSearchLoading: !!currentSearchResults?.search?.isLoading, lastSearchQuery};
 }
 
+export {selectPendingDeleteReportKeys};
 export default useSearchSections;

src/libs/ReportUtils.ts

@@ -10252,6 +10252,14 @@ function isMoneyRequestReportPendingDeletion(reportOrID: OnyxEntry<Report> | str
     return parentReportAction?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 }
 
+/**
+ * Check if a report itself is pending deletion via its own pendingAction or pendingFields.preview.
+ * Unlike isMoneyRequestReportPendingDeletion (which checks the parent report action), this checks the report directly.
+ */
+function isReportPendingDelete(report: OnyxEntry<Pick<Report, 'pendingAction' | 'pendingFields'>>): boolean {
+    return report?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || report?.pendingFields?.preview === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+}
+
 function navigateToLinkedReportAction(
     ancestor: Ancestor,
     isInNarrowPaneModal: boolean,
@@ -13473,6 +13481,7 @@ export {
     isMoneyRequest,
     isMoneyRequestReport,
     isMoneyRequestReportPendingDeletion,
+    isReportPendingDelete,
     isOneOnOneChat,
     isOneTransactionThread,
     isOpenExpenseReport,

tests/unit/ReportUtilsTest.ts

@@ -119,6 +119,7 @@ import {
     isPayer,
     isReportIneligibleForMoveExpenses,
     isReportOutstanding,
+    isReportPendingDelete,
     isRootGroupChat,
     isSelfDMOrSelfDMThread,
     isWorkspaceMemberLeavingWorkspaceRoom,
@@ -5006,6 +5007,32 @@ describe('ReportUtils', () => {
         });
     });
 
+    describe('isReportPendingDelete', () => {
+        it('should return true when pendingAction is DELETE', () => {
+            expect(isReportPendingDelete({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE})).toBe(true);
+        });
+
+        it('should return true when pendingFields.preview is DELETE', () => {
+            expect(isReportPendingDelete({pendingFields: {preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}})).toBe(true);
+        });
+
+        it('should return true when both pendingAction and pendingFields.preview are DELETE', () => {
+            expect(isReportPendingDelete({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, pendingFields: {preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}})).toBe(true);
+        });
+
+        it('should return false when neither field indicates deletion', () => {
+            expect(isReportPendingDelete({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD})).toBe(false);
+        });
+
+        it('should return false for undefined report', () => {
+            expect(isReportPendingDelete(undefined)).toBe(false);
+        });
+
+        it('should return false when pendingFields exists but preview is not DELETE', () => {
+            expect(isReportPendingDelete({pendingFields: {preview: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}})).toBe(false);
+        });
+    });
+
     describe('canEditMoneyRequest', () => {
         it('it should return false for archived invoice', async () => {
             const invoiceReport: Report = {