Add new navigator to allow for new SearchMoneyRequestReport screen

Kicu · Kicu · commit 66c316d47503 · 2025-02-28T11:25:00.000+01:00
diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts
@@ -14,4 +14,5 @@ export default {
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',
     WORKSPACE_SPLIT_NAVIGATOR: 'WorkspaceSplitNavigator',
+    SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator',
 } as const;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -78,6 +78,16 @@ const ROUTES = {
             return getUrlWithBackToParam(baseRoute, backTo);
         },
     },
+    SEARCH_MONEY_REQUEST_REPORT: {
+        route: 'search/report/:reportID',
+        getRoute: ({reportID, backTo}: {reportID: string | undefined; backTo?: string}) => {
+            if (!reportID) {
+                Log.warn('Invalid reportID is used to build the SEARCH_MONEY_REQUEST_REPORT route');
+            }
+            const baseRoute = `search/view/${reportID}` as const;
+            return getUrlWithBackToParam(baseRoute, backTo);
+        },
+    },
     TRANSACTION_HOLD_REASON_RHP: 'search/hold',
 
     // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -37,6 +37,7 @@ const SCREENS = {
     },
     SEARCH: {
         ROOT: 'Search_Root',
+        MONEY_REQUEST_REPORT: 'Search_Money_Request_Report',
         REPORT_RHP: 'Search_Report_RHP',
         ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP',
         ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP',
diff --git a/src/components/Navigation/BottomTabBar/index.tsx b/src/components/Navigation/BottomTabBar/index.tsx
@@ -27,7 +27,7 @@ import {getPreservedSplitNavigatorState} from '@navigation/AppNavigator/createSp
 import {isFullScreenName} from '@navigation/helpers/isNavigatorName';
 import Navigation from '@navigation/Navigation';
 import navigationRef from '@navigation/navigationRef';
-import type {AuthScreensParamList, RootNavigatorParamList, State, WorkspaceSplitNavigatorParamList} from '@navigation/types';
+import type {RootNavigatorParamList, SearchFullscreenNavigatorParamList, State, WorkspaceSplitNavigatorParamList} from '@navigation/types';
 import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar';
 import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton';
 import variables from '@styles/variables';
@@ -112,7 +112,7 @@ function BottomTabBar({selectedTab, isTooltipAllowed = false}: BottomTabBarProps
             const lastSearchRoute = rootState.routes.findLast((route) => route.name === SCREENS.SEARCH.ROOT);
 
             if (lastSearchRoute) {
-                const {q, ...rest} = lastSearchRoute.params as AuthScreensParamList[typeof SCREENS.SEARCH.ROOT];
+                const {q, ...rest} = lastSearchRoute.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.ROOT];
                 const cleanedQuery = handleQueryWithPolicyID(q, activeWorkspaceID);
 
                 Navigation.navigate(
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -35,7 +35,7 @@ import {
 } from '@libs/SearchUIUtils';
 import {isOnHold} from '@libs/TransactionUtils';
 import Navigation from '@navigation/Navigation';
-import type {AuthScreensParamList} from '@navigation/types';
+import type {SearchFullscreenNavigatorParamList} from '@navigation/types';
 import EmptySearchView from '@pages/Search/EmptySearchView';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -133,7 +133,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for enabling the selection mode on small screens only
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
-    const navigation = useNavigation<PlatformStackNavigationProp<AuthScreensParamList>>();
+    const navigation = useNavigation<PlatformStackNavigationProp<SearchFullscreenNavigatorParamList>>();
     const isFocused = useIsFocused();
     const [lastNonEmptySearchResults, setLastNonEmptySearchResults] = useState<SearchResults | undefined>(undefined);
     const {
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -33,7 +33,6 @@ import NetworkConnection from '@libs/NetworkConnection';
 import onyxSubscribe from '@libs/onyxSubscribe';
 import Pusher from '@libs/Pusher';
 import PusherConnectionManager from '@libs/PusherConnectionManager';
-import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import * as SessionUtils from '@libs/SessionUtils';
 import ConnectionCompletePage from '@pages/ConnectionCompletePage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -96,7 +95,7 @@ const loadWorkspaceJoinUser = () => require<ReactComponentModule>('@pages/worksp
 const loadReportSplitNavigator = () => require<ReactComponentModule>('./Navigators/ReportsSplitNavigator').default;
 const loadSettingsSplitNavigator = () => require<ReactComponentModule>('./Navigators/SettingsSplitNavigator').default;
 const loadWorkspaceSplitNavigator = () => require<ReactComponentModule>('./Navigators/WorkspaceSplitNavigator').default;
-const loadSearchPage = () => require<ReactComponentModule>('@pages/Search/SearchPage').default;
+const loadSearchNavigator = () => require<ReactComponentModule>('./Navigators/SearchNavigator').default;
 
 function initializePusher() {
     return Pusher.init({
@@ -466,10 +465,9 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     getComponent={loadSettingsSplitNavigator}
                 />
                 <RootStack.Screen
-                    name={SCREENS.SEARCH.ROOT}
+                    name={NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR}
                     options={rootNavigatorScreenOptions.fullScreen}
-                    getComponent={loadSearchPage}
-                    initialParams={{q: SearchQueryUtils.buildSearchQueryString()}}
+                    getComponent={loadSearchNavigator}
                 />
                 <RootStack.Screen
                     name={NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/SearchNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/SearchNavigator.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
+import * as SearchQueryUtils from '@libs/SearchQueryUtils';
+import FreezeWrapper from '@navigation/AppNavigator/FreezeWrapper';
+import createPlatformStackNavigator from '@navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import SCREENS from '@src/SCREENS';
+import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
+
+const loadSearchPage = () => require<ReactComponentModule>('@pages/Search/SearchPage').default;
+const loadSearchMoneyReportPage = () => require<ReactComponentModule>('@pages/Search/SearchMoneyRequestReportPage').default;
+
+const Stack = createPlatformStackNavigator<SearchFullscreenNavigatorParamList>();
+
+function SearchNavigator() {
+    return (
+        <FreezeWrapper>
+            <Stack.Navigator
+                screenOptions={{headerShown: false}}
+                defaultCentralScreen={SCREENS.SEARCH.ROOT}
+            >
+                <Stack.Screen
+                    name={SCREENS.SEARCH.ROOT}
+                    getComponent={loadSearchPage}
+                    initialParams={{q: SearchQueryUtils.buildSearchQueryString()}}
+                />
+                <Stack.Screen
+                    name={SCREENS.SEARCH.MONEY_REQUEST_REPORT}
+                    getComponent={loadSearchMoneyReportPage}
+                />
+            </Stack.Navigator>
+        </FreezeWrapper>
+    );
+}
+
+SearchNavigator.displayName = 'SearchNavigator';
+
+export default SearchNavigator;
diff --git a/src/libs/Navigation/AppNavigator/createSplitNavigator/getInitialSplitNavigatorState.ts b/src/libs/Navigation/AppNavigator/createSplitNavigator/getInitialSplitNavigatorState.ts
@@ -1,8 +1,8 @@
 import type {NavigationState, PartialState} from '@react-navigation/native';
 import {SIDEBAR_TO_SPLIT} from '@libs/Navigation/linkingConfig/RELATIONS';
-import type {NavigationPartialRoute, SplitNavigatorBySidebar, SplitNavigatorParamListType, SplitNavigatorSidebarScreen} from '@libs/Navigation/types';
+import type {NavigationPartialRoute, SplitNavigatorBySidebar, SplitNavigatorParamList, SplitNavigatorSidebarScreen} from '@libs/Navigation/types';
 
-type ExtractRouteType<T extends SplitNavigatorSidebarScreen> = Extract<keyof SplitNavigatorParamListType[(typeof SIDEBAR_TO_SPLIT)[T]], string>;
+type ExtractRouteType<T extends SplitNavigatorSidebarScreen> = Extract<keyof SplitNavigatorParamList[(typeof SIDEBAR_TO_SPLIT)[T]], string>;
 
 // The function getPathFromState that we are using in some places isn't working correctly without defined index.
 const getRoutesWithIndex = (routes: NavigationPartialRoute[]): PartialState<NavigationState> => ({routes, index: routes.length - 1});
diff --git a/src/libs/Navigation/helpers/getAdaptedStateFromPath.ts b/src/libs/Navigation/helpers/getAdaptedStateFromPath.ts
@@ -73,7 +73,7 @@ function getMatchingFullScreenRoute(route: NavigationPartialRoute, policyID?: st
         const paramsFromRoute = getParamsFromRoute(SCREENS.SEARCH.ROOT);
 
         return {
-            name: SCREENS.SEARCH.ROOT,
+            name: NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR,
             params: paramsFromRoute.length > 0 ? pick(route.params, paramsFromRoute) : undefined,
         };
     }
diff --git a/src/libs/Navigation/helpers/isNavigatorName.ts b/src/libs/Navigation/helpers/isNavigatorName.ts
@@ -1,5 +1,6 @@
 import {SIDEBAR_TO_SPLIT, SPLIT_TO_SIDEBAR} from '@libs/Navigation/linkingConfig/RELATIONS';
 import type {FullScreenName, OnboardingFlowName, SplitNavigatorName, SplitNavigatorSidebarScreen} from '@libs/Navigation/types';
+import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 
 const ONBOARDING_SCREENS = [
@@ -12,7 +13,7 @@ const ONBOARDING_SCREENS = [
     SCREENS.ONBOARDING.WORKSPACES,
 ];
 
-const FULL_SCREENS_SET = new Set([...Object.values(SIDEBAR_TO_SPLIT), SCREENS.SEARCH.ROOT]);
+const FULL_SCREENS_SET = new Set([...Object.values(SIDEBAR_TO_SPLIT), NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR]);
 const SIDEBARS_SET = new Set(Object.values(SPLIT_TO_SIDEBAR));
 const ONBOARDING_SCREENS_SET = new Set(ONBOARDING_SCREENS);
 const SPLIT_NAVIGATORS_SET = new Set(Object.values(SIDEBAR_TO_SPLIT));
diff --git a/src/libs/Navigation/helpers/resetPolicyIDInNavigationState.ts b/src/libs/Navigation/helpers/resetPolicyIDInNavigationState.ts
@@ -1,5 +1,5 @@
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
+import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
 import * as SearchQueryUtils from '@libs/SearchQueryUtils';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
@@ -21,7 +21,7 @@ function resetPolicyIDInNavigationState() {
         return;
     }
 
-    const {q, ...rest} = lastPolicyRoute.params as AuthScreensParamList[typeof SCREENS.SEARCH.ROOT];
+    const {q, ...rest} = lastPolicyRoute.params as SearchFullscreenNavigatorParamList[typeof SCREENS.SEARCH.ROOT];
     const queryJSON = SearchQueryUtils.buildSearchQueryJSON(q);
     if (!queryJSON || !queryJSON.policyID) {
         return;
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/FULLSCREEN_TO_TAB.ts b/src/libs/Navigation/linkingConfig/RELATIONS/FULLSCREEN_TO_TAB.ts
@@ -2,11 +2,10 @@ import type {ValueOf} from 'type-fest';
 import BOTTOM_TABS from '@components/Navigation/BottomTabBar/BOTTOM_TABS';
 import type {FullScreenName} from '@libs/Navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
-import SCREENS from '@src/SCREENS';
 
 const FULLSCREEN_TO_TAB: Record<FullScreenName, ValueOf<typeof BOTTOM_TABS>> = {
     [NAVIGATORS.REPORTS_SPLIT_NAVIGATOR]: BOTTOM_TABS.HOME,
-    [SCREENS.SEARCH.ROOT]: BOTTOM_TABS.SEARCH,
+    [NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR]: BOTTOM_TABS.SEARCH,
     [NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR]: BOTTOM_TABS.SETTINGS,
     [NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR]: BOTTOM_TABS.SETTINGS,
 };
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -29,9 +29,6 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
         [SCREENS.REPORT_AVATAR]: ROUTES.REPORT_AVATAR.route,
         [SCREENS.TRANSACTION_RECEIPT]: ROUTES.TRANSACTION_RECEIPT.route,
         [SCREENS.WORKSPACE_JOIN_USER]: ROUTES.WORKSPACE_JOIN_USER.route,
-        [SCREENS.SEARCH.ROOT]: {
-            path: ROUTES.SEARCH_ROOT.route,
-        },
 
         [SCREENS.NOT_FOUND]: '*',
         [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: {
@@ -1630,6 +1627,17 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                 },
             },
         },
+
+        [NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR]: {
+            screens: {
+                [SCREENS.SEARCH.ROOT]: {
+                    path: ROUTES.SEARCH_ROOT.route,
+                },
+                [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: {
+                    path: ROUTES.SEARCH_MONEY_REQUEST_REPORT.route,
+                },
+            },
+        },
     },
 };
 
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -57,7 +57,7 @@ type NavigationRoute = NavigationStateRoute | NavigationPartialRoute;
 
 type SplitNavigatorSidebarScreen = keyof typeof SIDEBAR_TO_SPLIT;
 
-type SplitNavigatorParamListType = {
+type SplitNavigatorParamList = {
     [NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR]: SettingsSplitNavigatorParamList;
     [NAVIGATORS.REPORTS_SPLIT_NAVIGATOR]: ReportsSplitNavigatorParamList;
     [NAVIGATORS.WORKSPACE_SPLIT_NAVIGATOR]: WorkspaceSplitNavigatorParamList;
@@ -69,11 +69,6 @@ type BackToParams = {
     backTo?: Routes;
 };
 
-type BackToAndForwardToParms = {
-    backTo?: Routes;
-    forwardTo?: Routes;
-};
-
 type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.SHARE_CODE]: undefined;
     [SCREENS.SETTINGS.PROFILE.PRONOUNS]: undefined;
@@ -1786,6 +1781,7 @@ type AuthScreensParamList = SharedScreensParamList & {
     [NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: NavigatorScreenParams<WelcomeVideoModalNavigatorParamList>;
     [NAVIGATORS.EXPLANATION_MODAL_NAVIGATOR]: NavigatorScreenParams<ExplanationModalNavigatorParamList>;
     [NAVIGATORS.MIGRATED_USER_MODAL_NAVIGATOR]: NavigatorScreenParams<MigratedUserModalNavigatorParamList>;
+    [NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR]: NavigatorScreenParams<SearchFullscreenNavigatorParamList>;
     [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined;
     [SCREENS.TRANSACTION_RECEIPT]: {
         reportID: string;
@@ -1795,11 +1791,6 @@ type AuthScreensParamList = SharedScreensParamList & {
     };
     [SCREENS.CONNECTION_COMPLETE]: undefined;
     [SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
-    [SCREENS.SEARCH.ROOT]: {
-        q: SearchQueryString;
-        name?: string;
-        groupBy?: string;
-    };
 };
 
 type SearchReportParamList = {
@@ -1822,6 +1813,17 @@ type SearchReportParamList = {
     };
 };
 
+type SearchFullscreenNavigatorParamList = {
+    [SCREENS.SEARCH.ROOT]: {
+        q: SearchQueryString;
+        name?: string;
+        groupBy?: string;
+    };
+    [SCREENS.SEARCH.MONEY_REQUEST_REPORT]: {
+        reportID: string;
+    };
+};
+
 type SearchAdvancedFiltersParamList = {
     [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: Record<string, never>;
 };
@@ -1875,17 +1877,15 @@ type DebugParamList = {
     };
 };
 
-type RootNavigatorParamList = PublicScreensParamList & AuthScreensParamList & LeftModalNavigatorParamList;
-
-type WorkspaceScreenName = keyof WorkspaceSplitNavigatorParamList;
+type RootNavigatorParamList = PublicScreensParamList & AuthScreensParamList & LeftModalNavigatorParamList & SearchFullscreenNavigatorParamList;
 
 type OnboardingFlowName = keyof OnboardingModalNavigatorParamList;
 
-type SplitNavigatorName = keyof SplitNavigatorParamListType;
+type SplitNavigatorName = keyof SplitNavigatorParamList;
 
-type SplitNavigatorScreenName = keyof (WorkspaceSplitNavigatorParamList & SettingsSplitNavigatorParamList & ReportsSplitNavigatorParamList);
+type SearchFullscreenNavigatorName = typeof NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR;
 
-type FullScreenName = SplitNavigatorName | typeof SCREENS.SEARCH.ROOT;
+type FullScreenName = SplitNavigatorName | SearchFullscreenNavigatorName;
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -1898,7 +1898,6 @@ declare global {
 export type {
     AddPersonalBankAccountNavigatorParamList,
     AuthScreensParamList,
-    BackToAndForwardToParms,
     BackToParams,
     DebugParamList,
     DetailsNavigatorParamList,
@@ -1937,14 +1936,14 @@ export type {
     SearchAdvancedFiltersParamList,
     SearchReportParamList,
     SearchSavedSearchParamList,
+    SearchFullscreenNavigatorParamList,
     SettingsNavigatorParamList,
     SettingsSplitNavigatorParamList,
     SignInNavigatorParamList,
     SplitDetailsNavigatorParamList,
     SplitNavigatorBySidebar,
     SplitNavigatorName,
-    SplitNavigatorParamListType,
-    SplitNavigatorScreenName,
+    SplitNavigatorParamList,
     SplitNavigatorSidebarScreen,
     StackNavigationAction,
     State,
@@ -1955,7 +1954,6 @@ export type {
     TravelNavigatorParamList,
     WalletStatementNavigatorParamList,
     WelcomeVideoModalNavigatorParamList,
-    WorkspaceScreenName,
     WorkspaceSplitNavigatorParamList,
     MigratedUserModalNavigatorParamList,
     WorkspaceConfirmationNavigatorParamList,
diff --git a/src/pages/Search/SearchMoneyRequestReportPage.tsx b/src/pages/Search/SearchMoneyRequestReportPage.tsx
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
diff --git a/tests/utils/TestNavigationContainer.tsx b/tests/utils/TestNavigationContainer.tsx

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ function getMatchingFullScreenRoute(route: NavigationPartialRoute, policyID?: st`
`73`	`73`	`const paramsFromRoute = getParamsFromRoute(SCREENS.SEARCH.ROOT);`
`74`	`74`
`75`	`75`	`return {`
`76`		`- name: SCREENS.SEARCH.ROOT,`
	`76`	`+ name: NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR,`
`77`	`77`	`params: paramsFromRoute.length > 0 ? pick(route.params, paramsFromRoute) : undefined,`
`78`	`78`	`};`
`79`	`79`	`}`