Merge pull request #40129 from software-mansion-labs/migrate-search-p…

…age-to-chat-finder-page

Migrate search page to chat finder page

src/CONST.ts

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

src/ROUTES.ts

@@ -28,7 +28,7 @@ const ROUTES = {
         route: 'flag/:reportID/:reportActionID',
         getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}` as const,
     },
-    SEARCH: 'search',
+    CHAT_FINDER: 'chat-finder',
     DETAILS: {
         route: 'details',
         getRoute: (login: string) => `details?login=${encodeURIComponent(login)}` as const,

src/SCREENS.ts

@@ -95,7 +95,7 @@ const SCREENS = {
         ROOT: 'SaveTheWorld_Root',
     },
     LEFT_MODAL: {
-        SEARCH: 'Search',
+        CHAT_FINDER: 'ChatFinder',
         WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
     },
     WORKSPACE_SWITCHER: {
@@ -319,7 +319,7 @@ const SCREENS = {
     },
     ROOM_MEMBERS_ROOT: 'RoomMembers_Root',
     ROOM_INVITE_ROOT: 'RoomInvite_Root',
-    SEARCH_ROOT: 'Search_Root',
+    CHAT_FINDER_ROOT: 'ChatFinder_Root',
     FLAG_COMMENT_ROOT: 'FlagComment_Root',
     REIMBURSEMENT_ACCOUNT: 'ReimbursementAccount',
     GET_ASSISTANCE: 'GetAssistance',

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -35,7 +35,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('./tests/appStartTimeTest.e2e').default,
-    [E2EConfig.TEST_NAMES.OpenSearchPage]: require('./tests/openSearchPageTest.e2e').default,
+    [E2EConfig.TEST_NAMES.OpenChatFinderPage]: require('./tests/openChatFinderPageTest.e2e').default,
     [E2EConfig.TEST_NAMES.ChatOpening]: require('./tests/chatOpeningTest.e2e').default,
     [E2EConfig.TEST_NAMES.ReportTyping]: require('./tests/reportTypingTest.e2e').default,
     [E2EConfig.TEST_NAMES.Linking]: require('./tests/linkingTest.e2e').default,

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

@@ -9,7 +9,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 search');
+    console.debug('[E2E] Logging in for chat finder');
 
     E2ELogin().then((neededLogin: boolean): Promise<Response> | undefined => {
         if (neededLogin) {
@@ -19,24 +19,24 @@ const test = () => {
             );
         }
 
-        console.debug('[E2E] Logged in, getting search metrics and submitting them…');
+        console.debug('[E2E] Logged in, getting chat finder metrics and submitting them…');
 
         Performance.subscribeToMeasurements((entry) => {
             if (entry.name === CONST.TIMING.SIDEBAR_LOADED) {
-                console.debug(`[E2E] Sidebar loaded, navigating to search route…`);
-                Navigation.navigate(ROUTES.SEARCH);
+                console.debug(`[E2E] Sidebar loaded, navigating to chat finder route…`);
+                Navigation.navigate(ROUTES.CHAT_FINDER);
                 return;
             }
 
             console.debug(`[E2E] Entry: ${JSON.stringify(entry)}`);
-            if (entry.name !== CONST.TIMING.SEARCH_RENDER) {
+            if (entry.name !== CONST.TIMING.CHAT_FINDER_RENDER) {
                 return;
             }
 
             console.debug(`[E2E] Submitting!`);
             E2EClient.submitTestResults({
                 branch: Config.E2E_BRANCH,
-                name: 'Open Search Page TTI',
+                name: 'Open Chat Finder Page TTI',
                 duration: entry.duration,
             })
                 .then(() => {

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.CHAT_FINDER)));
             },
             shortcutsOverviewShortcutConfig.descriptionKey,
             shortcutsOverviewShortcutConfig.modifiers,

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

@@ -4,6 +4,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import type {
     AddPersonalBankAccountNavigatorParamList,
+    ChatFinderNavigatorParamList,
     DetailsNavigatorParamList,
     EditRequestNavigatorParamList,
     EnablePaymentsNavigatorParamList,
@@ -22,7 +23,6 @@ import type {
     ReportSettingsNavigatorParamList,
     RoomInviteNavigatorParamList,
     RoomMembersNavigatorParamList,
-    SearchNavigatorParamList,
     SettingsNavigatorParamList,
     SignInNavigatorParamList,
     SplitDetailsNavigatorParamList,
@@ -147,8 +147,8 @@ 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 ChatFinderModalStackNavigator = createModalStackNavigator<ChatFinderNavigatorParamList>({
+    [SCREENS.CHAT_FINDER_ROOT]: () => require('../../../../pages/ChatFinderPage').default as React.ComponentType,
 });
 
 const NewChatModalStackNavigator = createModalStackNavigator<NewChatNavigatorParamList>({
@@ -342,7 +342,7 @@ export {
     ReportDescriptionModalStackNavigator,
     RoomInviteModalStackNavigator,
     RoomMembersModalStackNavigator,
-    SearchModalStackNavigator,
+    ChatFinderModalStackNavigator,
     SettingsModalStackNavigator,
     SignInModalStackNavigator,
     SplitDetailsModalStackNavigator,

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

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

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.CHAT_FINDER))}
                         >
                             <Icon
                                 src={Expensicons.MagnifyingGlass}

src/libs/Navigation/linkingConfig/config.ts

@@ -71,9 +71,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         [SCREENS.NOT_FOUND]: '*',
         [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: {
             screens: {
-                [SCREENS.LEFT_MODAL.SEARCH]: {
+                [SCREENS.LEFT_MODAL.CHAT_FINDER]: {
                     screens: {
-                        [SCREENS.SEARCH_ROOT]: ROUTES.SEARCH,
+                        [SCREENS.CHAT_FINDER_ROOT]: ROUTES.CHAT_FINDER,
                     },
                 },
                 [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: {

src/libs/Navigation/types.ts

@@ -300,8 +300,8 @@ type NewChatNavigatorParamList = {
     };
 };
 
-type SearchNavigatorParamList = {
-    [SCREENS.SEARCH_ROOT]: undefined;
+type ChatFinderNavigatorParamList = {
+    [SCREENS.CHAT_FINDER_ROOT]: undefined;
 };
 
 type DetailsNavigatorParamList = {
@@ -614,7 +614,7 @@ type PrivateNotesNavigatorParamList = {
 };
 
 type LeftModalNavigatorParamList = {
-    [SCREENS.LEFT_MODAL.SEARCH]: NavigatorScreenParams<SearchNavigatorParamList>;
+    [SCREENS.LEFT_MODAL.CHAT_FINDER]: NavigatorScreenParams<ChatFinderNavigatorParamList>;
     [SCREENS.LEFT_MODAL.WORKSPACE_SWITCHER]: NavigatorScreenParams<WorkspaceSwitcherNavigatorParamList>;
 };
 
@@ -790,7 +790,7 @@ type AuthScreensParamList = SharedScreensParamList & {
     };
 };
 
-type RootStackParamList = PublicScreensParamList & AuthScreensParamList & SearchNavigatorParamList;
+type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList;
 
 type BottomTabName = keyof BottomTabNavigatorParamList;
 
@@ -834,7 +834,7 @@ export type {
     ParticipantsNavigatorParamList,
     RoomMembersNavigatorParamList,
     RoomInviteNavigatorParamList,
-    SearchNavigatorParamList,
+    ChatFinderNavigatorParamList,
     NewChatNavigatorParamList,
     NewTaskNavigatorParamList,
     TeachersUniteNavigatorParamList,

src/pages/SearchPage/SearchPageFooter.tsx → src/pages/ChatFinderPage/ChatFinderPageFooter.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
 import CONST from '@src/CONST';
 
-function SearchPageFooter() {
+function ChatFinderPageFooter() {
     return <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />;
 }
 
-SearchPageFooter.displayName = 'SearchPageFooter';
+ChatFinderPageFooter.displayName = 'ChatFinderPageFooter';
 
-export default SearchPageFooter;
+export default ChatFinderPageFooter;

src/pages/SearchPage/index.tsx → src/pages/ChatFinderPage/index.tsx

@@ -25,33 +25,33 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
-import SearchPageFooter from './SearchPageFooter';
+import ChatFinderPageFooter from './ChatFinderPageFooter';
 
-type SearchPageOnyxProps = {
+type ChatFinderPageOnyxProps = {
     /** Beta features list */
     betas: OnyxEntry<OnyxTypes.Beta[]>;
 
     /** Whether or not we are searching for reports on the server */
     isSearchingForReports: OnyxEntry<boolean>;
 };
 
-type SearchPageProps = SearchPageOnyxProps & StackScreenProps<RootStackParamList, typeof SCREENS.SEARCH_ROOT>;
+type ChatFinderPageProps = ChatFinderPageOnyxProps & StackScreenProps<RootStackParamList, typeof SCREENS.CHAT_FINDER_ROOT>;
 
-type SearchPageSectionItem = {
+type ChatFinderPageSectionItem = {
     data: OptionData[];
     shouldShow: boolean;
 };
 
-type SearchPageSectionList = SearchPageSectionItem[];
+type ChatFinderPageSectionList = ChatFinderPageSectionItem[];
 
 const setPerformanceTimersEnd = () => {
-    Timing.end(CONST.TIMING.SEARCH_RENDER);
-    Performance.markEnd(CONST.TIMING.SEARCH_RENDER);
+    Timing.end(CONST.TIMING.CHAT_FINDER_RENDER);
+    Performance.markEnd(CONST.TIMING.CHAT_FINDER_RENDER);
 };
 
-const SerachPageFooterInstance = <SearchPageFooter />;
+const ChatFinderPageFooterInstance = <ChatFinderPageFooter />;
 
-function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps) {
+function ChatFinderPage({betas, isSearchingForReports, navigation}: ChatFinderPageProps) {
     const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false);
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
@@ -65,8 +65,8 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
 
     useEffect(() => {
-        Timing.start(CONST.TIMING.SEARCH_RENDER);
-        Performance.markStart(CONST.TIMING.SEARCH_RENDER);
+        Timing.start(CONST.TIMING.CHAT_FINDER_RENDER);
+        Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);
     }, []);
 
     useEffect(() => {
@@ -113,8 +113,8 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
 
     const {recentReports, personalDetails: localPersonalDetails, userToInvite, headerMessage} = debouncedSearchValue.trim() !== '' ? filteredOptions : searchOptions;
 
-    const sections = useMemo((): SearchPageSectionList => {
-        const newSections: SearchPageSectionList = [];
+    const sections = useMemo((): ChatFinderPageSectionList => {
+        const newSections: ChatFinderPageSectionList = [];
 
         if (recentReports?.length > 0) {
             newSections.push({
@@ -162,12 +162,13 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID={SearchPage.displayName}
+            testID={ChatFinderPage.displayName}
             onEntryTransitionEnd={handleScreenTransitionEnd}
             shouldEnableMaxHeight
             navigation={navigation}
         >
             <HeaderWithBackButton
+                // ASK: What text do we want to use for the title?
                 title={translate('common.search')}
                 onBackButtonPress={Navigation.goBack}
             />
@@ -183,21 +184,21 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
                 onLayout={setPerformanceTimersEnd}
                 onSelectRow={selectReport}
                 showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd}
-                footerContent={!isDismissed && SerachPageFooterInstance}
+                footerContent={!isDismissed && ChatFinderPageFooterInstance}
                 isLoadingNewOptions={isSearchingForReports ?? undefined}
             />
         </ScreenWrapper>
     );
 }
 
-SearchPage.displayName = 'SearchPage';
+ChatFinderPage.displayName = 'ChatFinderPage';
 
-export default withOnyx<SearchPageProps, SearchPageOnyxProps>({
+export default withOnyx<ChatFinderPageProps, ChatFinderPageOnyxProps>({
     betas: {
         key: ONYXKEYS.BETAS,
     },
     isSearchingForReports: {
         key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
         initWithStoredValues: false,
     },
-})(SearchPage);
+})(ChatFinderPage);

tests/e2e/config.ts

@@ -4,7 +4,7 @@ const OUTPUT_DIR = process.env.WORKING_DIRECTORY || './tests/e2e/results';
 // add your test name here …
 const TEST_NAMES = {
     AppStartTime: 'App start time',
-    OpenSearchPage: 'Open search page TTI',
+    OpenChatFinderPage: 'Open chat finder page TTI',
     ReportTyping: 'Report typing',
     ChatOpening: 'Chat opening',
     Linking: 'Linking',
@@ -71,8 +71,8 @@ export default {
 
             // ... any additional config you might need
         },
-        [TEST_NAMES.OpenSearchPage]: {
-            name: TEST_NAMES.OpenSearchPage,
+        [TEST_NAMES.OpenChatFinderPage]: {
+            name: TEST_NAMES.OpenChatFinderPage,
         },
         // TODO: Fix text and enable again
         // [TEST_NAMES.ReportTyping]: {