Merge pull request #89585 from TaduJR/fix-Reports-Highlight-animation-is-visible-on-added-expense-after-duplication

fix: Reports - Highlight animation is visible on added expense after duplication

Author: blimpich

src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

@@ -41,7 +41,7 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
-    const {markReportIDAsExpense} = useWideRHPActions();
+    const {markReportRHPWidth} = useWideRHPActions();
 
     const {prevTransactionID, nextTransactionID} = useMemo(() => {
         if (!transactionIDsList || transactionIDsList.length < 2) {
@@ -144,7 +144,7 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
         const navigationParams = {reportID: nextThreadReportID, reportActionID: undefined, backTo};
 
         if (nextThreadReportID) {
-            markReportIDAsExpense(nextThreadReportID);
+            markReportRHPWidth(nextThreadReportID, 'wide');
         }
         // We know that the next thread report exists, it just wasn't fetched to Onyx yet, so we set it optimistically.
         if (!nextThreadReport && nextThreadReportID) {
@@ -190,7 +190,7 @@ function MoneyRequestReportTransactionsNavigation({currentTransactionID, isFromR
         const navigationParams = {reportID: prevThreadReportID, reportActionID: undefined, backTo};
 
         if (prevThreadReportID) {
-            markReportIDAsExpense(prevThreadReportID);
+            markReportRHPWidth(prevThreadReportID, 'wide');
         }
         // We know that the previous thread report exists, it just wasn't fetched to Onyx yet, so we set it optimistically.
         if (!prevThreadReport && prevThreadReportID) {

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

@@ -153,7 +153,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
 
     const isActionColumnWide = transactions.some((transaction) => !!transaction.isActionColumnWide || isDeletedTransaction(transaction));
 
-    const {markReportIDAsExpense} = useWideRHPActions();
+    const {markReportRHPWidth} = useWideRHPActions();
     const selectRow = onSelectRow as (item: TItem, transactionPreviewData?: TransactionPreviewData, event?: ModifiedMouseEvent) => void;
     const getTransactionPreviewData = (transactionItem: TransactionListItemType): TransactionPreviewData => {
         const parentReportAction = getReportAction(transactionItem?.reportID, transactionItem?.reportAction?.reportActionID);
@@ -212,7 +212,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                 });
                 return;
             }
-            markReportIDAsExpense(reportID);
+            markReportRHPWidth(reportID, 'wide');
             const route = ROUTES.SEARCH_REPORT.getRoute({reportID, backTo});
             if (openInternalRouteInNewTab(route, event)) {
                 return;

src/components/Search/index.tsx

@@ -134,7 +134,7 @@ function Search({
     const navigation = useNavigation<PlatformStackNavigationProp<SearchFullscreenNavigatorParamList>>();
     const isFocused = useIsFocused();
 
-    const {markReportIDAsExpense, markReportIDAsMultiTransactionExpense, unmarkReportIDAsMultiTransactionExpense} = useWideRHPActions();
+    const {markReportRHPWidth, unmarkReportRHPWidth} = useWideRHPActions();
     const {currentSearchHash, currentSearchKey, shouldResetSearchQuery, suggestedSearches} = useSearchQueryContext();
     const {lastSearchType, shouldUseLiveData} = useSearchResultsContext();
 
@@ -579,9 +579,9 @@ function Search({
                 }
 
                 if (item.transactions.length > 1) {
-                    markReportIDAsMultiTransactionExpense(reportID);
+                    markReportRHPWidth(reportID, 'super-wide');
                 } else {
-                    unmarkReportIDAsMultiTransactionExpense(reportID);
+                    unmarkReportRHPWidth(reportID, 'super-wide');
                 }
 
                 // Persist the current search context so prev/next navigation arrows
@@ -626,7 +626,7 @@ function Search({
                 return;
             }
 
-            markReportIDAsExpense(reportID);
+            markReportRHPWidth(reportID, 'wide');
 
             if (isTransactionItem && transactionPreviewData) {
                 setOptimisticDataForTransactionThreadPreview(transactionItem, transactionPreviewData, transactionItem?.reportAction?.childReportID);
@@ -639,10 +639,9 @@ function Search({
             requestAnimationFrame(() => Navigation.navigate(route));
         },
         [
-            markReportIDAsExpense,
+            markReportRHPWidth,
             handleSearch,
-            markReportIDAsMultiTransactionExpense,
-            unmarkReportIDAsMultiTransactionExpense,
+            unmarkReportRHPWidth,
             introSelected,
             betas,
             isSelfTourViewed,

src/components/WideRHPContextProvider/default.ts

@@ -12,15 +12,11 @@ const defaultWideRHPStateContextValue: WideRHPStateContextType = {
 };
 
 const defaultWideRHPActionsContextValue: WideRHPActionsContextType = {
-    showWideRHPVersion: () => {},
-    showSuperWideRHPVersion: () => {},
-    removeWideRHPRouteKey: () => {},
-    removeSuperWideRHPRouteKey: () => {},
-    markReportIDAsExpense: () => {},
-    markReportIDAsMultiTransactionExpense: () => {},
-    unmarkReportIDAsMultiTransactionExpense: () => {},
-    isReportIDMarkedAsExpense: () => false,
-    isReportIDMarkedAsMultiTransactionExpense: () => false,
+    setRHPWidth: () => {},
+    removeRHPRouteKey: () => {},
+    markReportRHPWidth: () => {},
+    unmarkReportRHPWidth: () => {},
+    getReportRHPWidthHint: () => undefined,
     syncRHPKeys: () => {},
     clearWideRHPKeys: () => {},
     setIsWideRHPClosing: () => {},

src/components/WideRHPContextProvider/index.tsx

@@ -18,7 +18,7 @@ import type {Report} from '@src/types/onyx';
 import {defaultWideRHPActionsContextValue, defaultWideRHPStateContextValue} from './default';
 import getIsRHPDisplayedBelow from './getIsRHPDisplayedBelow';
 import getVisibleRHPKeys from './getVisibleRHPRouteKeys';
-import type {WideRHPActionsContextType, WideRHPStateContextType} from './types';
+import type {RHPWidth, RHPWidthHint, WideRHPActionsContextType, WideRHPStateContextType} from './types';
 import useShouldRenderOverlay from './useShouldRenderOverlay';
 
 // 0 is folded/hidden, 1 is expanded/shown
@@ -74,7 +74,7 @@ function showWideRHPRoute(route: NavigationRoute, setAllRHPRouteKeys: React.Disp
 // Function to remove a Wide/Super Wide RHP route key to the array including wide/super wide RHP route keys
 function removeWideRHPRoute(route: NavigationRoute, setAllRHPRouteKeys: React.Dispatch<React.SetStateAction<string[]>>) {
     if (!route.key) {
-        console.error(`The route passed to removeWideRHPRouteKey should have the "key" property defined.`);
+        console.error(`The route passed to removeWideRHPRoute should have the "key" property defined.`);
         return;
     }
 
@@ -106,9 +106,8 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
     const [allSuperWideRHPRouteKeys, setAllSuperWideRHPRouteKeys] = useState<string[]>([]);
     const [superWideRHPRouteKeys, setSuperWideRHPRouteKeys] = useState<string[]>([]);
 
-    // Report IDs that should be displayed in Wide/Super Wide RHP
-    const [expenseReportIDs, setExpenseReportIDs] = useState<Set<string>>(new Set());
-    const [multiTransactionExpenseReportIDs, setMultiTransactionExpenseReportIDs] = useState<Set<string>>(new Set());
+    // A reportID maps to at most one hint, making "wide vs super-wide" structurally mutually exclusive.
+    const [reportRHPWidthHints, setReportRHPWidthHints] = useState<Map<string, RHPWidthHint>>(() => new Map());
 
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: expenseReportSelector});
 
@@ -186,96 +185,77 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
     const shouldRenderTertiaryOverlay = useShouldRenderOverlay(isRHPFocused && isWideRHPBelow && isSuperWideRHPBelow, thirdOverlayProgress);
 
     /**
-     * Removes a route from the super wide RHP route keys list, disabling wide RHP display for that route.
+     * Removes the route from both wide and super-wide sets. Used on screen unmount.
      */
-    const removeSuperWideRHPRouteKey = (route: NavigationRoute) => removeWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
-
-    /**
-     * Removes a route from the wide RHP route keys list, disabling wide RHP display for that route.
-     */
-    const removeWideRHPRouteKey = (route: NavigationRoute) => removeWideRHPRoute(route, setAllWideRHPRouteKeys);
-
-    /**
-     * Adds a route to the wide RHP route keys list, enabling wide RHP display for that route.
-     */
-    const showWideRHPVersion = (route: NavigationRoute) => {
-        removeSuperWideRHPRouteKey(route);
-        showWideRHPRoute(route, setAllWideRHPRouteKeys);
+    const removeRHPRouteKey = (route: NavigationRoute) => {
+        removeWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
+        removeWideRHPRoute(route, setAllWideRHPRouteKeys);
     };
 
     /**
-     * Adds a route to the super wide RHP route keys list, enabling super wide RHP display for that route.
+     * Single entry point for setting a route's RHP width. Registrations are mutually exclusive — the
+     * route lives in at most one of {wide, super-wide} sets at any time (or neither, for 'narrow').
      */
-    const showSuperWideRHPVersion = (route: NavigationRoute) => {
-        removeWideRHPRouteKey(route);
-        showWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
-    };
-
-    /**
-     * Marks a report ID as an expense report, adding it to the expense reports set.
-     * This enables optimistic wide RHP display for expense reports.
-     * It helps us open expense as wide, before it fully loads.
-     */
-    const markReportIDAsExpense = (reportID?: string) => {
-        if (!reportID) {
+    const setRHPWidth = (route: NavigationRoute, width: RHPWidth) => {
+        if (width === 'super-wide') {
+            removeWideRHPRoute(route, setAllWideRHPRouteKeys);
+            showWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
             return;
         }
-        const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
-        const isInvoice = report?.type === CONST.REPORT.TYPE.INVOICE;
-        const isTask = report?.type === CONST.REPORT.TYPE.TASK;
-        if (isInvoice || isTask) {
+        if (width === 'wide') {
+            removeWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
+            showWideRHPRoute(route, setAllWideRHPRouteKeys);
             return;
         }
-        setExpenseReportIDs((prev) => {
-            const newSet = new Set(prev);
-            newSet.add(reportID);
-            return newSet;
-        });
+        removeWideRHPRoute(route, setAllSuperWideRHPRouteKeys);
+        removeWideRHPRoute(route, setAllWideRHPRouteKeys);
     };
 
     /**
-     * Checks if a report ID is marked as an expense report.
-     * Used to determine if wide RHP should be displayed optimistically.
-     * It helps us open expense as wide, before it fully loads.
+     * Sets an optimistic width hint for a reportID before its screen renders, so the right width is
+     * registered on first paint. Invoices and tasks are excluded from the 'wide' hint.
+     * It helps us open expense as wide / super wide, before it fully loads.
      */
-    const isReportIDMarkedAsExpense = (reportID: string) => {
-        return expenseReportIDs.has(reportID);
-    };
-
-    /**
-     * Marks a report ID as a multi-transaction expense report, adding it to the expense reports set.
-     * This enables optimistic super wide RHP display for expense reports.
-     * It helps us open expense as super wide, before it fully loads.
-     */
-    const markReportIDAsMultiTransactionExpense = (reportID: string) => {
-        setMultiTransactionExpenseReportIDs((prev) => {
-            const newSet = new Set(prev);
-            newSet.add(reportID);
-            return newSet;
+    const markReportRHPWidth = (reportID: string | undefined, width: RHPWidthHint) => {
+        if (!reportID) {
+            return;
+        }
+        if (width === 'wide') {
+            const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+            if (report?.type === CONST.REPORT.TYPE.INVOICE || report?.type === CONST.REPORT.TYPE.TASK) {
+                return;
+            }
+        }
+        setReportRHPWidthHints((prev) => {
+            if (prev.get(reportID) === width) {
+                return prev;
+            }
+            const next = new Map(prev);
+            next.set(reportID, width);
+            return next;
         });
     };
 
     /**
-     * Removes a report ID from the multi-transaction expense reports set.
-     * This disables optimistic super wide RHP display for that specific report
-     * (e.g., when transactions are deleted or report no longer qualifies as multi-transaction)
+     * Clears the optimistic width hint for a reportID. Pass `width` to clear only when it matches the
+     * current hint; omit to clear unconditionally. Called when a report no longer qualifies for a hint.
      */
-    const unmarkReportIDAsMultiTransactionExpense = (reportID: string) => {
-        setMultiTransactionExpenseReportIDs((prev) => {
-            const newSet = new Set(prev);
-            newSet.delete(reportID);
-            return newSet;
+    const unmarkReportRHPWidth = (reportID: string, width?: RHPWidthHint) => {
+        setReportRHPWidthHints((prev) => {
+            const current = prev.get(reportID);
+            if (current === undefined) {
+                return prev;
+            }
+            if (width !== undefined && current !== width) {
+                return prev;
+            }
+            const next = new Map(prev);
+            next.delete(reportID);
+            return next;
         });
     };
 
-    /**
-     * Checks if a report ID is marked as a multi-transaction expense report.
-     * Used to determine if super wide RHP should be displayed optimistically.
-     * It helps us open expense as super wide, before it fully loads.
-     */
-    const isReportIDMarkedAsMultiTransactionExpense = (reportID: string) => {
-        return multiTransactionExpenseReportIDs.has(reportID);
-    };
+    const getReportRHPWidthHint = (reportID: string): RHPWidthHint | undefined => reportRHPWidthHints.get(reportID);
 
     /**
      * Effect that handles responsive RHP width calculation when window dimensions change.
@@ -319,16 +299,12 @@ function WideRHPContextProvider({children}: React.PropsWithChildren) {
 
     // Because of the React Compiler we don't need to memoize it manually
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const actionsValue = {
-        showWideRHPVersion,
-        showSuperWideRHPVersion,
-        removeWideRHPRouteKey,
-        removeSuperWideRHPRouteKey,
-        markReportIDAsExpense,
-        markReportIDAsMultiTransactionExpense,
-        unmarkReportIDAsMultiTransactionExpense,
-        isReportIDMarkedAsExpense,
-        isReportIDMarkedAsMultiTransactionExpense,
+    const actionsValue: WideRHPActionsContextType = {
+        setRHPWidth,
+        removeRHPRouteKey,
+        markReportRHPWidth,
+        unmarkReportRHPWidth,
+        getReportRHPWidthHint,
         syncRHPKeys,
         clearWideRHPKeys,
         setIsWideRHPClosing,
@@ -366,3 +342,4 @@ export {
     useWideRHPState,
     useWideRHPActions,
 };
+export type {RHPWidth} from './types';

src/components/WideRHPContextProvider/types.ts

@@ -1,5 +1,9 @@
 import type {NavigationRoute} from '@libs/Navigation/types';
 
+type RHPWidth = 'narrow' | 'wide' | 'super-wide';
+
+type RHPWidthHint = Exclude<RHPWidth, 'narrow'>;
+
 type WideRHPStateContextType = {
     // Route keys of screens that should be displayed in wide format
     wideRHPRouteKeys: string[];
@@ -27,32 +31,20 @@ type WideRHPStateContextType = {
 };
 
 type WideRHPActionsContextType = {
-    // Show given route as in wide format
-    showWideRHPVersion: (route: NavigationRoute) => void;
-
-    // Show given route as in super wide format
-    showSuperWideRHPVersion: (route: NavigationRoute) => void;
-
-    // Remove given route from the array
-    removeWideRHPRouteKey: (route: NavigationRoute) => void;
-
-    // Remove given route from the array
-    removeSuperWideRHPRouteKey: (route: NavigationRoute) => void;
-
-    // Mark reportID as expense before condition check
-    markReportIDAsExpense: (reportID?: string) => void;
+    // Register the route at the given width. 'narrow' removes from both sets.
+    setRHPWidth: (route: NavigationRoute, width: RHPWidth) => void;
 
-    // Mark reportID as multi-transaction expense before condition check
-    markReportIDAsMultiTransactionExpense: (reportID: string) => void;
+    // Remove the route from both sets (used on screen unmount).
+    removeRHPRouteKey: (route: NavigationRoute) => void;
 
-    // Unmark reportID as multi-transaction expense before condition check
-    unmarkReportIDAsMultiTransactionExpense: (reportID: string) => void;
+    // Set an optimistic width hint for a reportID before navigation.
+    markReportRHPWidth: (reportID: string | undefined, width: RHPWidthHint) => void;
 
-    // Check if reportID is marked as expense
-    isReportIDMarkedAsExpense: (reportID: string) => boolean;
+    // Clear the hint(s) for a reportID. Pass `width` to clear only that one.
+    unmarkReportRHPWidth: (reportID: string, width?: RHPWidthHint) => void;
 
-    // Check if reportID is marked as multi-transaction expense
-    isReportIDMarkedAsMultiTransactionExpense: (reportID: string) => boolean;
+    // Read the optimistic width hint for a reportID.
+    getReportRHPWidthHint: (reportID: string) => RHPWidthHint | undefined;
 
     // Sync super wide and wide RHP keys with the visible RHP screens
     syncRHPKeys: () => void;
@@ -67,4 +59,4 @@ type WideRHPActionsContextType = {
     setIsSuperWideRHPClosing: (isClosing: boolean) => void;
 };
 
-export type {WideRHPStateContextType, WideRHPActionsContextType};
+export type {RHPWidth, RHPWidthHint, WideRHPStateContextType, WideRHPActionsContextType};

src/components/WideRHPContextProvider/useRHPWidth/index.native.ts

@@ -0,0 +1,6 @@
+import type {RHPWidth} from '..';
+
+// Wide/Super-Wide RHP is not displayed on native platforms.
+const useRHPWidth: (width: RHPWidth) => void = () => {};
+
+export default useRHPWidth;