Use SearchRouter everywhere and drop Chat finder

src/CONST.ts

@@ -1085,7 +1085,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/SCREENS.ts

@@ -141,7 +141,6 @@ const SCREENS = {
         ROOT: 'SaveTheWorld_Root',
     },
     LEFT_MODAL: {
-        CHAT_FINDER: 'ChatFinder',
         WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
     },
     RIGHT_MODAL: {

src/components/Search/SearchRouter/SearchButton.tsx

@@ -5,7 +5,10 @@ import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Permissions from '@libs/Permissions';
+import Performance from '@libs/Performance';
+import * as Session from '@userActions/Session';
+import Timing from '@userActions/Timing';
+import CONST from '@src/CONST';
 import {useSearchRouterContext} from './SearchRouterContext';
 
 function SearchButton() {
@@ -14,17 +17,16 @@ function SearchButton() {
     const {translate} = useLocalize();
     const {openSearchRouter} = useSearchRouterContext();
 
-    if (!Permissions.canUseNewSearchRouter()) {
-        return;
-    }
-
     return (
         <PressableWithoutFeedback
             accessibilityLabel={translate('common.search')}
             style={[styles.flexRow, styles.touchableButtonImage]}
-            onPress={() => {
+            onPress={Session.checkIfActionIsAllowed(() => {
+                Timing.start(CONST.TIMING.SEARCH_ROUTER_OPEN);
+                Performance.markStart(CONST.TIMING.SEARCH_ROUTER_OPEN);
+
                 openSearchRouter();
-            }}
+            })}
         >
             <Icon
                 src={Expensicons.MagnifyingGlass}

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -19,24 +19,27 @@ import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
+import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {useSearchRouterContext} from './SearchRouterContext';
 import SearchRouterInput from './SearchRouterInput';
 import SearchRouterList from './SearchRouterList';
 
 const SEARCH_DEBOUNCE_DELAY = 150;
 
-function SearchRouter() {
+type SearchRouterProps = {
+    onRouterClose: () => void;
+};
+
+function SearchRouter({onRouterClose}: SearchRouterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
 
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
     const listRef = useRef<SelectionListHandle>(null);
 
     const [textInputValue, debouncedInputValue, setTextInputValue] = useDebouncedState('', 500);
@@ -65,7 +68,9 @@ function SearchRouter() {
             };
         }
 
+        Timing.start(CONST.TIMING.SEARCH_FILTER_OPTIONS);
         const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedInputValue, {sortByReportTypeInSearch: true, preferChatroomsOverThreads: true});
+        Timing.end(CONST.TIMING.SEARCH_FILTER_OPTIONS);
 
         return {
             recentReports: newOptions.recentReports,
@@ -87,15 +92,6 @@ function SearchRouter() {
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
 
-    useEffect(() => {
-        if (!textInputValue && isSearchRouterDisplayed) {
-            return;
-        }
-        listRef.current?.updateAndScrollToFocusedIndex(0);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSearchRouterDisplayed]);
-
     const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined;
 
     const clearUserQuery = () => {
@@ -132,40 +128,43 @@ function SearchRouter() {
     };
 
     const closeAndClearRouter = useCallback(() => {
-        closeSearchRouter();
+        onRouterClose();
         clearUserQuery();
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [closeSearchRouter]);
+    }, [onRouterClose]);
 
     const onSearchSubmit = useCallback(
         (query: SearchQueryJSON | undefined) => {
             if (!query) {
                 return;
             }
-            closeSearchRouter();
+            onRouterClose();
             const queryString = SearchUtils.buildSearchQueryString(query);
             Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: queryString}));
             clearUserQuery();
         },
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [closeSearchRouter],
+        [onRouterClose],
     );
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
-        closeSearchRouter();
+        onRouterClose();
         clearUserQuery();
     });
 
     const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
-        <View style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}>
+        <View
+            style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}
+            testID={SearchRouter.displayName}
+        >
             {isSmallScreenWidth && (
                 <HeaderWithBackButton
                     title={translate('common.search')}
-                    onBackButtonPress={() => closeSearchRouter()}
+                    onBackButtonPress={() => onRouterClose()}
                 />
             )}
             <SearchRouterInput

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -1,10 +1,12 @@
-import React, {useContext, useMemo, useState} from 'react';
+import React, {useContext, useMemo, useRef, useState} from 'react';
+import * as Modal from '@userActions/Modal';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 const defaultSearchContext = {
     isSearchRouterDisplayed: false,
     openSearchRouter: () => {},
     closeSearchRouter: () => {},
+    toggleSearchRouter: () => {},
 };
 
 type SearchRouterContext = typeof defaultSearchContext;
@@ -13,15 +15,39 @@ const Context = React.createContext<SearchRouterContext>(defaultSearchContext);
 
 function SearchRouterContextProvider({children}: ChildrenProps) {
     const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
+    const searchRouterDisplayedRef = useRef(false);
 
     const routerContext = useMemo(() => {
-        const openSearchRouter = () => setIsSearchRouterDisplayed(true);
-        const closeSearchRouter = () => setIsSearchRouterDisplayed(false);
+        const openSearchRouter = () => {
+            Modal.close(
+                () => {
+                    setIsSearchRouterDisplayed(true);
+                    searchRouterDisplayedRef.current = true;
+                },
+                false,
+                true,
+            );
+        };
+        const closeSearchRouter = () => {
+            setIsSearchRouterDisplayed(false);
+            searchRouterDisplayedRef.current = false;
+        };
+
+        // There are callbacks that live outside of React render-loop and interact with SearchRouter
+        // So we need a function that is based on ref to correctly open/close it
+        const toggleSearchRouter = () => {
+            if (searchRouterDisplayedRef.current) {
+                closeSearchRouter();
+            } else {
+                openSearchRouter();
+            }
+        };
 
         return {
             isSearchRouterDisplayed,
             openSearchRouter,
             closeSearchRouter,
+            toggleSearchRouter,
         };
     }, [isSearchRouterDisplayed, setIsSearchRouterDisplayed]);
 

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -68,6 +68,7 @@ function SearchRouterInput({
         <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
             <View style={styles.flex1}>
                 <TextInput
+                    testID="search-router-text-input"
                     value={value}
                     onChangeText={onChangeText}
                     autoFocus

src/components/Search/SearchRouter/SearchRouterList.tsx

@@ -13,10 +13,13 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import Performance from '@libs/Performance';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import * as SearchUtils from '@libs/SearchUtils';
 import * as Report from '@userActions/Report';
+import Timing from '@userActions/Timing';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -47,6 +50,11 @@ type SearchRouterListProps = {
     closeAndClearRouter: () => void;
 };
 
+const setPerformanceTimersEnd = () => {
+    Timing.end(CONST.TIMING.SEARCH_ROUTER_OPEN);
+    Performance.markEnd(CONST.TIMING.SEARCH_ROUTER_OPEN);
+};
+
 function isSearchQueryItem(item: OptionData | SearchQueryItem): item is SearchQueryItem {
     if ('singleIcon' in item && item.singleIcon && 'query' in item && item.query) {
         return true;
@@ -174,8 +182,10 @@ function SearchRouterList(
             ListItem={SearchRouterItem}
             containerStyle={[styles.mh100]}
             sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]}
+            onLayout={setPerformanceTimersEnd}
             ref={ref}
             showScrollIndicator={!isSmallScreenWidth}
+            sectionTitleStyles={styles.mhn2}
         />
     );
 }

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -17,10 +17,10 @@ function SearchRouterModal() {
             type={modalType}
             fullscreen
             isVisible={isSearchRouterDisplayed}
-            popoverAnchorPosition={{right: 20, top: 20}}
+            popoverAnchorPosition={{right: 6, top: 6}}
             onClose={closeSearchRouter}
         >
-            <FocusTrapForModal active={isSearchRouterDisplayed}>{isSearchRouterDisplayed && <SearchRouter />}</FocusTrapForModal>
+            <FocusTrapForModal active={isSearchRouterDisplayed}>{isSearchRouterDisplayed && <SearchRouter onRouterClose={closeSearchRouter} />}</FocusTrapForModal>
         </Modal>
     );
 }

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -32,7 +32,7 @@ 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,
-    [E2EConfig.TEST_NAMES.OpenChatFinderPage]: require<TestModule>('./tests/openChatFinderPageTest.e2e').default,
+    [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

@@ -3,14 +3,12 @@ import E2ELogin from '@libs/E2E/actions/e2eLogin';
 import waitForAppLoaded from '@libs/E2E/actions/waitForAppLoaded';
 import E2EClient from '@libs/E2E/client';
 import getPromiseWithResolve from '@libs/E2E/utils/getPromiseWithResolve';
-import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import CONST from '@src/CONST';
-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,36 +18,29 @@ 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 [openSearchRouterPromise, openSearchRouterResolve] = getPromiseWithResolve();
         const [loadSearchOptionsPromise, loadSearchOptionsResolve] = getPromiseWithResolve();
 
-        Promise.all([openSearchPagePromise, loadSearchOptionsPromise]).then(() => {
+        Promise.all([openSearchRouterPromise, loadSearchOptionsPromise]).then(() => {
             console.debug(`[E2E] Submitting!`);
 
             E2EClient.submitTestDone();
         });
 
         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',
                 })
                     .then(() => {
-                        openSearchPageResolve();
+                        openSearchRouterResolve();
                         console.debug('[E2E] Done with search, exiting…');
                     })
                     .catch((err) => {

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -7,6 +7,7 @@ import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
 import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
+import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
@@ -233,6 +234,8 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils);
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
+    const {toggleSearchRouter} = useSearchRouterContext();
+
     const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(onboardingIsMediumOrLargerScreenWidth), [screenOptions, onboardingIsMediumOrLargerScreenWidth]);
     const onboardingScreenOptions = useMemo(
         () => getOnboardingModalScreenOptions(shouldUseNarrowLayout, styles, StyleUtils, onboardingIsMediumOrLargerScreenWidth),
@@ -241,6 +244,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) {
@@ -363,16 +367,14 @@ 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)),
-                    true,
-                    true,
-                );
+                Session.checkIfActionIsAllowed(() => {
+                    toggleSearchRouter();
+                })();
             },
             shortcutsOverviewShortcutConfig.descriptionKey,
             shortcutsOverviewShortcutConfig.modifiers,