Use SearchRouter instead of Chat finder and migrate e2e tests

src/CONST.ts

@@ -1078,7 +1078,7 @@ const CONST = {
     },
     TIMING: {
         CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
-        CHAT_FINDER_RENDER: 'search_render',
+        SEARCH_ROUTER_OPEN: 'search_router_render',
         CHAT_RENDER: 'chat_render',
         OPEN_REPORT: 'open_report',
         HOMEPAGE_INITIAL_RENDER: 'homepage_initial_render',

src/ROUTES.ts

@@ -74,7 +74,6 @@ const ROUTES = {
         route: 'flag/:reportID/:reportActionID',
         getRoute: (reportID: string, reportActionID: string, backTo?: string) => getUrlWithBackToParam(`flag/${reportID}/${reportActionID}` as const, backTo),
     },
-    CHAT_FINDER: 'chat-finder',
     PROFILE: {
         route: 'a/:accountID',
         getRoute: (accountID?: string | number, backTo?: string, login?: string) => {

src/components/Search/SearchRouter/SearchButton.tsx

@@ -5,7 +5,11 @@ import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Performance from '@libs/Performance';
 import Permissions from '@libs/Permissions';
+import * as Session from '@userActions/Session';
+import Timing from '@userActions/Timing';
+import CONST from '@src/CONST';
 import {useSearchRouterContext} from './SearchRouterContext';
 
 function SearchButton() {
@@ -22,9 +26,13 @@ function SearchButton() {
         <PressableWithoutFeedback
             accessibilityLabel={translate('common.search')}
             style={[styles.flexRow, styles.touchableButtonImage]}
-            onPress={() => {
+            onPress={Session.checkIfActionIsAllowed(() => {
+                // Todo [Search] add finishing for this timing in <SearchRouterList>
+                Timing.start(CONST.TIMING.SEARCH_ROUTER_OPEN);
+                Performance.markStart(CONST.TIMING.SEARCH_ROUTER_OPEN);
+
                 openSearchRouter();
-            }}
+            })}
         >
             <Icon
                 src={Expensicons.MagnifyingGlass}

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -32,6 +32,8 @@ if (!appInstanceId) {
 // import your test here, define its name and config first in e2e/config.js
 const tests: Tests = {
     [E2EConfig.TEST_NAMES.AppStartTime]: require<TestModule>('./tests/appStartTimeTest.e2e').default,
+    // Todo [Search] rename
+    [E2EConfig.TEST_NAMES.OpenSearchRouter]: require<TestModule>('./tests/openSearchRouterTest.e2e').default,
     [E2EConfig.TEST_NAMES.ChatOpening]: require<TestModule>('./tests/chatOpeningTest.e2e').default,
     [E2EConfig.TEST_NAMES.ReportTyping]: require<TestModule>('./tests/reportTypingTest.e2e').default,
     [E2EConfig.TEST_NAMES.Linking]: require<TestModule>('./tests/linkingTest.e2e').default,

src/libs/E2E/tests/openChatFinderPageTest.e2e.ts → src/libs/E2E/tests/openSearchRouterTest.e2e.ts

@@ -10,7 +10,7 @@ import ROUTES from '@src/ROUTES';
 
 const test = () => {
     // check for login (if already logged in the action will simply resolve)
-    console.debug('[E2E] Logging in for chat finder');
+    console.debug('[E2E] Logging in for new search router');
 
     E2ELogin().then((neededLogin: boolean): Promise<Response> | undefined => {
         if (neededLogin) {
@@ -20,7 +20,7 @@ const test = () => {
             );
         }
 
-        console.debug('[E2E] Logged in, getting chat finder metrics and submitting them…');
+        console.debug('[E2E] Logged in, getting search router metrics and submitting them…');
 
         const [openSearchPagePromise, openSearchPageResolve] = getPromiseWithResolve();
         const [loadSearchOptionsPromise, loadSearchOptionsResolve] = getPromiseWithResolve();
@@ -32,19 +32,12 @@ const test = () => {
         });
 
         Performance.subscribeToMeasurements((entry) => {
-            if (entry.name === CONST.TIMING.SIDEBAR_LOADED) {
-                console.debug(`[E2E] Sidebar loaded, navigating to chat finder route…`);
-                Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);
-                Navigation.navigate(ROUTES.CHAT_FINDER);
-                return;
-            }
-
             console.debug(`[E2E] Entry: ${JSON.stringify(entry)}`);
 
-            if (entry.name === CONST.TIMING.CHAT_FINDER_RENDER) {
+            if (entry.name === CONST.TIMING.SEARCH_ROUTER_OPEN) {
                 E2EClient.submitTestResults({
                     branch: Config.E2E_BRANCH,
-                    name: 'Open Chat Finder Page TTI',
+                    name: 'Open Search Router TTI',
                     metric: entry.duration,
                     unit: 'ms',
                 })

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -8,6 +8,7 @@ import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
 import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
+import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import usePermissions from '@hooks/usePermissions';
@@ -232,6 +233,8 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils);
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
+    const {openSearchRouter} = useSearchRouterContext();
+
     const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(onboardingIsMediumOrLargerScreenWidth), [screenOptions, onboardingIsMediumOrLargerScreenWidth]);
     const onboardingScreenOptions = useMemo(
         () => getOnboardingModalScreenOptions(shouldUseNarrowLayout, styles, StyleUtils, onboardingIsMediumOrLargerScreenWidth),
@@ -240,6 +243,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const modal = useRef<OnyxTypes.Modal>({});
     const [didPusherInit, setDidPusherInit] = useState(false);
     const {isOnboardingCompleted} = useOnboardingFlowRouter();
+
     let initialReportID: string | undefined;
     const isInitialRender = useRef(true);
     if (isInitialRender.current) {
@@ -350,13 +354,15 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         );
 
         // Listen for the key K being pressed so that focus can be given to
-        // the chat switcher, or new group chat
+        // Search Router, or new group chat
         // based on the key modifiers pressed and the operating system
         const unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
             searchShortcutConfig.shortcutKey,
             () => {
                 Modal.close(
-                    Session.checkIfActionIsAllowed(() => Navigation.navigate(ROUTES.CHAT_FINDER)),
+                    Session.checkIfActionIsAllowed(() => {
+                        openSearchRouter();
+                    }),
                     true,
                     true,
                 );

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

@@ -2,32 +2,25 @@ import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Breadcrumbs from '@components/Breadcrumbs';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import Text from '@components/Text';
-import Tooltip from '@components/Tooltip';
 import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import Performance from '@libs/Performance';
 import * as SearchUtils from '@libs/SearchUtils';
 import SignInButton from '@pages/home/sidebar/SignInButton';
 import * as Session from '@userActions/Session';
-import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
-type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; isCustomSearchQuery?: boolean; shouldDisplaySearchRouter?: boolean};
+type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; shouldDisplayCancelSearch?: boolean};
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, isCustomSearchQuery = false, shouldDisplaySearchRouter = false}: TopBarProps) {
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancelSearch = false}: TopBarProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
     const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}});
@@ -63,7 +56,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                     </View>
                 </View>
                 {displaySignIn && <SignInButton />}
-                {isCustomSearchQuery && (
+                {shouldDisplayCancelSearch && (
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('common.cancel')}
                         style={[styles.textBlue]}
@@ -74,25 +67,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                         <Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>
                     </PressableWithoutFeedback>
                 )}
-                {shouldDisplaySearchRouter && <SearchButton />}
-                {displaySearch && (
-                    <Tooltip text={translate('common.find')}>
-                        <PressableWithoutFeedback
-                            accessibilityLabel={translate('sidebarScreen.buttonFind')}
-                            style={[styles.flexRow, styles.mr2, styles.touchableButtonImage]}
-                            onPress={Session.checkIfActionIsAllowed(() => {
-                                Timing.start(CONST.TIMING.CHAT_FINDER_RENDER);
-                                Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);
-                                Navigation.navigate(ROUTES.CHAT_FINDER);
-                            })}
-                        >
-                            <Icon
-                                src={Expensicons.MagnifyingGlass}
-                                fill={theme.icon}
-                            />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
-                )}
+                {displaySearch && <SearchButton />}
             </View>
         </View>
     );

src/libs/Navigation/linkingConfig/config.ts

@@ -76,7 +76,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         [SCREENS.NOT_FOUND]: '*',
         [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: {
             screens: {
-                [SCREENS.LEFT_MODAL.CHAT_FINDER]: ROUTES.CHAT_FINDER,
                 [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: {
                     path: ROUTES.WORKSPACE_SWITCHER,
                 },

src/libs/Navigation/types.ts

@@ -1233,7 +1233,6 @@ type TransactionDuplicateNavigatorParamList = {
 };
 
 type LeftModalNavigatorParamList = {
-    [SCREENS.LEFT_MODAL.CHAT_FINDER]: undefined;
     [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: undefined;
 };
 

src/pages/Search/SearchPageBottomTab.tsx

@@ -85,6 +85,8 @@ function SearchPageBottomTab() {
         );
     }
 
+    const shouldDisplayCancelSearch = shouldUseNarrowLayout && !SearchUtils.isCannedSearchQuery(queryJSON);
+
     return (
         <ScreenWrapper
             testID={SearchPageBottomTab.displayName}
@@ -97,9 +99,8 @@ function SearchPageBottomTab() {
                         <TopBar
                             activeWorkspaceID={policyID}
                             breadcrumbLabel={translate('common.search')}
-                            shouldDisplaySearch={false}
-                            shouldDisplaySearchRouter={shouldUseNarrowLayout}
-                            isCustomSearchQuery={shouldUseNarrowLayout && !SearchUtils.isCannedSearchQuery(queryJSON)}
+                            shouldDisplaySearch={shouldUseNarrowLayout}
+                            shouldDisplayCancelSearch={shouldDisplayCancelSearch}
                         />
                     </View>
                     <Animated.View style={[styles.searchTopBarStyle, topBarAnimatedStyle]}>

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx

@@ -4,6 +4,7 @@ import {useOnyx} from 'react-native-onyx';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateLastAccessedWorkspace} from '@libs/actions/Policy/Policy';
 import * as Browser from '@libs/Browser';
@@ -27,6 +28,7 @@ function BaseSidebarScreen() {
     const styles = useThemeStyles();
     const activeWorkspaceID = useActiveWorkspaceFromNavigationState();
     const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [activeWorkspace] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID ?? -1}`);
 
     useEffect(() => {
@@ -43,6 +45,8 @@ function BaseSidebarScreen() {
         updateLastAccessedWorkspace(undefined);
     }, [activeWorkspace, activeWorkspaceID]);
 
+    const shouldDisplaySearch = shouldUseNarrowLayout;
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -56,6 +60,7 @@ function BaseSidebarScreen() {
                     <TopBar
                         breadcrumbLabel={translate('common.inbox')}
                         activeWorkspaceID={activeWorkspaceID}
+                        shouldDisplaySearch={shouldDisplaySearch}
                     />
                     <View style={[styles.flex1]}>
                         <SidebarLinksData

tests/e2e/config.ts

@@ -4,6 +4,7 @@ const OUTPUT_DIR = process.env.WORKING_DIRECTORY || './tests/e2e/results';
 // add your test name here …
 const TEST_NAMES = {
     AppStartTime: 'App start time',
+    OpenSearchRouter: 'Open search router TTI',
     ReportTyping: 'Report typing',
     ChatOpening: 'Chat opening',
     Linking: 'Linking',
@@ -72,6 +73,9 @@ export default {
             name: TEST_NAMES.AppStartTime,
             // ... any additional config you might need
         },
+        [TEST_NAMES.OpenSearchRouter]: {
+            name: TEST_NAMES.OpenSearchRouter,
+        },
         [TEST_NAMES.ReportTyping]: {
             name: TEST_NAMES.ReportTyping,
             reportScreen: {