[Search v1] Implement Search navigation logic

src/CONST.ts

@@ -3282,12 +3282,20 @@ const CONST = {
         NEW_ROOM: 'room',
         RECEIPT_TAB_ID: 'ReceiptTab',
         IOU_REQUEST_TYPE: 'iouRequestType',
+        SEARCH: 'search',
     },
     TAB_REQUEST: {
         MANUAL: 'manual',
         SCAN: 'scan',
         DISTANCE: 'distance',
     },
+    TAB_SEARCH: {
+        ALL: 'all',
+        SENT: 'sent',
+        DRAFTS: 'drafts',
+        WAITING_ON_YOU: 'waitingOnYou',
+        FINISHED: 'finished',
+    },
     STATUS_TEXT_MAX_LENGTH: 100,
 
     DROPDOWN_BUTTON_SIZE: {

src/ROUTES.ts

@@ -22,13 +22,23 @@ const ROUTES = {
 
     ALL_SETTINGS: 'all-settings',
 
+    SEARCH: {
+        route: '/search/:query',
+        getRoute: (query: string) => `search/${query}` as const,
+    },
+
+    SEARCH_REPORT: {
+        route: '/search/:query/view/:reportID',
+        getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const,
+    },
+
     // 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
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
         route: 'flag/:reportID/:reportActionID',
         getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}` as const,
     },
-    SEARCH: 'search',
+    FIND: 'find',
     DETAILS: {
         route: 'details',
         getRoute: (login: string) => `details?login=${encodeURIComponent(login)}` as const,

src/SCREENS.ts

@@ -23,6 +23,11 @@ const SCREENS = {
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',
+    SEARCH: {
+        CENTRAL_PANE: 'Search_Central_Pane',
+        REPORT: 'Search_Report',
+        BOTTOM_TAB: 'Search_Bottom_Tab',
+    },
     SETTINGS: {
         ROOT: 'Settings_Root',
         SHARE_CODE: 'Settings_Share_Code',
@@ -95,7 +100,7 @@ const SCREENS = {
         ROOT: 'SaveTheWorld_Root',
     },
     LEFT_MODAL: {
-        SEARCH: 'Search',
+        FIND: 'Find',
         WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
     },
     WORKSPACE_SWITCHER: {
@@ -127,6 +132,7 @@ const SCREENS = {
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
         PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
+        SEARCH_REPORT: 'Search_Report',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',
@@ -319,7 +325,7 @@ const SCREENS = {
     },
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
     ROOM_INVITE_ROOT: 'RoomInvite_Root',
-    SEARCH_ROOT: 'Search_Root',
+    FIND_ROOT: 'FIND_Root',
     FLAG_COMMENT_ROOT: 'FlagComment_Root',
     REIMBURSEMENT_ACCOUNT: 'ReimbursementAccount',
     GET_ASSISTANCE: 'GetAssistance',

src/components/TabSelector/TabSelector.tsx

@@ -33,6 +33,16 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate
             return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')};
         case CONST.TAB_REQUEST.DISTANCE:
             return {icon: Expensicons.Car, title: translate('common.distance')};
+        case CONST.TAB_SEARCH.ALL:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'All'};
+        case CONST.TAB_SEARCH.SENT:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Sent'};
+        case CONST.TAB_SEARCH.DRAFTS:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Drafts'};
+        case CONST.TAB_SEARCH.WAITING_ON_YOU:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Waiting on you'};
+        case CONST.TAB_SEARCH.FINISHED:
+            return {icon: Expensicons.ExpensifyLogoNew, title: 'Finished'};
         default:
             throw new Error(`Route ${route} has no icon nor title set.`);
     }

src/components/TestToolMenu.tsx

@@ -10,6 +10,7 @@ import * as Network from '@userActions/Network';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx';
@@ -103,6 +104,16 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
                     }}
                 />
             </TestToolRow>
+            {/* Navigate to the new Search Page. This button is temporary and should be removed after passing QA tests. */}
+            <TestToolRow title="New Search Page">
+                <Button
+                    small
+                    text="Navigate"
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+                    }}
+                />
+            </TestToolRow>
         </>
     );
 }

src/hooks/useActiveRoute.ts

@@ -1,7 +1,8 @@
 import {useContext} from 'react';
 import ActiveRouteContext from '@libs/Navigation/AppNavigator/Navigators/ActiveRouteContext';
+import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types';
 
-function useActiveRoute(): string {
+function useActiveRoute(): NavigationPartialRoute<keyof CentralPaneNavigatorParamList> | undefined {
     return useContext(ActiveRouteContext);
 }
 

src/libs/E2E/tests/openSearchPageTest.e2e.ts

@@ -24,7 +24,7 @@ const test = () => {
         Performance.subscribeToMeasurements((entry) => {
             if (entry.name === CONST.TIMING.SIDEBAR_LOADED) {
                 console.debug(`[E2E] Sidebar loaded, navigating to search route…`);
-                Navigation.navigate(ROUTES.SEARCH);
+                Navigation.navigate(ROUTES.FIND);
                 return;
             }
 

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -238,7 +238,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         const unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
             searchShortcutConfig.shortcutKey,
             () => {
-                Modal.close(Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.SEARCH)));
+                Modal.close(Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.FIND)));
             },
             shortcutsOverviewShortcutConfig.descriptionKey,
             shortcutsOverviewShortcutConfig.modifiers,

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -7,6 +7,7 @@ import type {
     DetailsNavigatorParamList,
     EditRequestNavigatorParamList,
     EnablePaymentsNavigatorParamList,
+    FindNavigatorParamList,
     FlagCommentNavigatorParamList,
     MoneyRequestNavigatorParamList,
     NewChatNavigatorParamList,
@@ -22,7 +23,7 @@ import type {
     ReportSettingsNavigatorParamList,
     RoomInviteNavigatorParamList,
     RoomMembersNavigatorParamList,
-    SearchNavigatorParamList,
+    SearchReportParamList,
     SettingsNavigatorParamList,
     SignInNavigatorParamList,
     SplitDetailsNavigatorParamList,
@@ -147,8 +148,12 @@ const RoomInviteModalStackNavigator = createModalStackNavigator<RoomInviteNaviga
     [SCREENS.ROOM_INVITE_ROOT]: () => require('../../../../pages/RoomInvitePage').default as React.ComponentType,
 });
 
-const SearchModalStackNavigator = createModalStackNavigator<SearchNavigatorParamList>({
-    [SCREENS.SEARCH_ROOT]: () => require('../../../../pages/SearchPage').default as React.ComponentType,
+const SearchModalStackNavigator = createModalStackNavigator<FindNavigatorParamList>({
+    [SCREENS.FIND_ROOT]: () => require('../../../../pages/SearchPage').default as React.ComponentType,
+});
+
+const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
+    [SCREENS.SEARCH.REPORT]: () => require('../../../../pages/home/ReportScreen').default as React.ComponentType,
 });
 
 const NewChatModalStackNavigator = createModalStackNavigator<NewChatNavigatorParamList>({
@@ -350,4 +355,5 @@ export {
     WalletStatementStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
     WorkspaceSettingsModalStackNavigator,
+    SearchReportModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/ActiveRouteContext.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types';
 
-const ActiveRouteContext = React.createContext('');
+const ActiveRouteContext = React.createContext<NavigationPartialRoute<keyof CentralPaneNavigatorParamList> | undefined>(undefined);
 
 export default ActiveRouteContext;

src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

@@ -5,6 +5,7 @@ import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/create
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import type {BottomTabNavigatorParamList} from '@libs/Navigation/types';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
+import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab';
 import SCREENS from '@src/SCREENS';
 import ActiveRouteContext from './ActiveRouteContext';
 
@@ -21,12 +22,16 @@ function BottomTabNavigator() {
     const activeRoute = useNavigationState(getTopmostCentralPaneRoute);
 
     return (
-        <ActiveRouteContext.Provider value={activeRoute?.name ?? ''}>
+        <ActiveRouteContext.Provider value={activeRoute}>
             <Tab.Navigator screenOptions={screenOptions}>
                 <Tab.Screen
                     name={SCREENS.HOME}
                     component={SidebarScreen}
                 />
+                <Tab.Screen
+                    name={SCREENS.SEARCH.BOTTOM_TAB}
+                    component={SearchPageBottomTab}
+                />
                 <Tab.Screen
                     name={SCREENS.SETTINGS.ROOT}
                     getComponent={loadInitialSettingsPage}

src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx

@@ -4,6 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
+import SearchPage from '@pages/Search/SearchPage';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
@@ -41,6 +42,12 @@ function BaseCentralPaneNavigator() {
                 initialParams={{openOnAdminRoom: openOnAdminRoom === 'true' || undefined}}
                 component={ReportScreenWrapper}
             />
+            <Stack.Screen
+                name={SCREENS.SEARCH.CENTRAL_PANE}
+                // We do it this way to avoid adding the url params to url
+                component={SearchPage}
+            />
+
             {Object.entries(settingsScreens).map(([screenName, componentGetter]) => (
                 <Stack.Screen
                     key={screenName}

src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx

@@ -32,7 +32,7 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
             <View style={styles.LHPNavigatorContainer(isSmallScreenWidth)}>
                 <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
-                        name={SCREENS.LEFT_MODAL.SEARCH}
+                        name={SCREENS.LEFT_MODAL.FIND}
                         component={ModalStackNavigators.SearchModalStackNavigator}
                     />
                     <Stack.Screen

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -137,6 +137,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
                         name="ProcessMoneyRequestHold"
                         component={ModalStackNavigators.ProcessMoneyRequestHoldStackNavigator}
                     />
+                    <Stack.Screen
+                        name={SCREENS.RIGHT_MODAL.SEARCH_REPORT}
+                        component={ModalStackNavigators.SearchReportModalStackNavigator}
+                    />
                 </Stack.Navigator>
             </View>
         </NoDropZone>

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -13,6 +13,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@libs/actions/Session';
 import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
+import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import type {RootStackParamList, State} from '@libs/Navigation/types';
 import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
@@ -64,6 +65,12 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
 
     // Parent navigator of the bottom tab bar is the root navigator.
     const currentTabName = useNavigationState<RootStackParamList, string | undefined>((state) => {
+        const topmostCentralPaneRoute = getTopmostCentralPaneRoute(state);
+
+        if (topmostCentralPaneRoute && topmostCentralPaneRoute.name === SCREENS.SEARCH.CENTRAL_PANE) {
+            return SCREENS.SEARCH.CENTRAL_PANE;
+        }
+
         const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
         return topmostBottomTabRoute?.name ?? SCREENS.HOME;
     });
@@ -95,7 +102,27 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-
+            {/** @TODO: Uncomment this code and change order of the items according to the designs once the new search tab is ready */}
+            {/* <Tooltip text={translate('common.search')}>
+                <PressableWithFeedback
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+                    }}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.search')}
+                    wrapperStyle={styles.flex1}
+                    style={styles.bottomTabBarItem}
+                >
+                    <View>
+                        <Icon
+                            src={Expensicons.ReceiptSearch}
+                            fill={currentTabName === SCREENS.SEARCH.CENTRAL_PANE ? theme.iconMenu : theme.icon}
+                            width={variables.iconBottomBar}
+                            height={variables.iconBottomBar}
+                        />
+                    </View>
+                </PressableWithFeedback>
+            </Tooltip> */}
             <BottomTabBarFloatingActionButton />
             <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
         </View>

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx

@@ -66,7 +66,7 @@ function TopBar({policy, session}: TopBarProps) {
                         <PressableWithoutFeedback
                             accessibilityLabel={translate('sidebarScreen.buttonSearch')}
                             style={[styles.flexRow, styles.mr2]}
-                            onPress={Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.SEARCH))}
+                            onPress={Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.FIND))}
                         >
                             <Icon
                                 src={Expensicons.MagnifyingGlass}