Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate search page to chat finder page #40129

Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/CONST.ts
Original file line number Diff line number Diff line change
Expand Up @@ -875,7 +875,8 @@ const CONST = {
},
TIMING: {
CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
SEARCH_RENDER: 'search_render',
// ASK: Should we also update this name?
CHAT_FINDER_RENDER: 'chat_finder',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm it seems like we save this metric to Firebase and Grafana. So Maybe we should just rename the key, but leave the value as is.

Suggested change
// ASK: Should we also update this name?
CHAT_FINDER_RENDER: 'chat_finder',
CHAT_FINDER_RENDER: 'search_render',

CHAT_RENDER: 'chat_render',
OPEN_REPORT: 'open_report',
HOMEPAGE_INITIAL_RENDER: 'homepage_initial_render',
Expand Down
2 changes: 1 addition & 1 deletion src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const SCREENS = {
ROOT: 'SaveTheWorld_Root',
},
LEFT_MODAL: {
SEARCH: 'Search',
CHAT_FINDER: 'ChatFinder',
WORKSPACE_SWITCHER: 'WorkspaceSwitcher',
},
WORKSPACE_SWITCHER: {
Expand Down Expand Up @@ -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',
Expand Down
3 changes: 2 additions & 1 deletion src/libs/E2E/reactNativeLaunchingTest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,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('./tests/appStartTimeTest.e2e').default,
[E2EConfig.TEST_NAMES.OpenSearchPage]: require('./tests/openSearchPageTest.e2e').default,
// ASK: Should we also update this name?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think we can update this one since it's just a require``

[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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

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 finding');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
console.debug('[E2E] Logging in for chat finding');
console.debug('[E2E] Logging in for chat finder');


E2ELogin().then((neededLogin: boolean): Promise<Response> | undefined => {
if (neededLogin) {
Expand All @@ -19,24 +19,24 @@
);
}

console.debug('[E2E] Logged in, getting search metrics and submitting them…');
console.debug('[E2E] Logged in, getting chat finding metrics and submitting them…');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
console.debug('[E2E] Logged in, getting chat finding 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) {

Check failure on line 32 in src/libs/E2E/tests/openChatFinderPageTest.e2e.ts

View workflow job for this annotation

GitHub Actions / typecheck

Property 'SEARCH_RENDER' does not exist on type '{ readonly CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: "calc_most_recent_last_modified_action"; readonly CHAT_FINDER_RENDER: "chat_finder"; readonly CHAT_RENDER: "chat_render"; ... 15 more ...; readonly RESIZE_DEBOUNCE_TIME: 100; }'.
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(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/libs/Navigation/AppNavigator/AuthScreens.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import type {
AddPersonalBankAccountNavigatorParamList,
ChatFinderNavigatorParamList,
DetailsNavigatorParamList,
EditRequestNavigatorParamList,
EnablePaymentsNavigatorParamList,
Expand All @@ -22,7 +23,6 @@ import type {
ReportSettingsNavigatorParamList,
RoomInviteNavigatorParamList,
RoomMembersNavigatorParamList,
SearchNavigatorParamList,
SettingsNavigatorParamList,
SignInNavigatorParamList,
SplitDetailsNavigatorParamList,
Expand Down Expand Up @@ -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>({
Expand Down Expand Up @@ -342,7 +342,7 @@ export {
ReportDescriptionModalStackNavigator,
RoomInviteModalStackNavigator,
RoomMembersModalStackNavigator,
SearchModalStackNavigator,
ChatFinderModalStackNavigator,
SettingsModalStackNavigator,
SignInModalStackNavigator,
SplitDetailsModalStackNavigator,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]: {
Expand Down
10 changes: 5 additions & 5 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -300,8 +300,8 @@ type NewChatNavigatorParamList = {
};
};

type SearchNavigatorParamList = {
[SCREENS.SEARCH_ROOT]: undefined;
type ChatFinderNavigatorParamList = {
[SCREENS.CHAT_FINDER_ROOT]: undefined;
};

type DetailsNavigatorParamList = {
Expand Down Expand Up @@ -608,7 +608,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>;
};

Expand Down Expand Up @@ -784,7 +784,7 @@ type AuthScreensParamList = SharedScreensParamList & {
};
};

type RootStackParamList = PublicScreensParamList & AuthScreensParamList & SearchNavigatorParamList;
type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList;

type BottomTabName = keyof BottomTabNavigatorParamList;

Expand Down Expand Up @@ -828,7 +828,7 @@ export type {
ParticipantsNavigatorParamList,
RoomMembersNavigatorParamList,
RoomInviteNavigatorParamList,
SearchNavigatorParamList,
ChatFinderNavigatorParamList,
NewChatNavigatorParamList,
NewTaskNavigatorParamList,
TeachersUniteNavigatorParamList,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ReferralProgramCTA from '@components/ReferralProgramCTA';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';

function SearchPageFooter() {
function ChatFinderPageFooter() {
const themeStyles = useThemeStyles();

return (
Expand All @@ -14,6 +14,6 @@ function SearchPageFooter() {
);
}

SearchPageFooter.displayName = 'SearchPageFooter';
ChatFinderPageFooter.displayName = 'ChatFinderPageFooter';

export default SearchPageFooter;
export default ChatFinderPageFooter;
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,34 @@ 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);
// ASK: Should we also update this name?
Timing.end(CONST.TIMING.CHAT_FINDER_RENDER);
Performance.markEnd(CONST.TIMING.CHAT_FINDER_RENDER);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, I think we should update the key, but leave the value of the key as is.

Suggested change
// ASK: Should we also update this name?
Timing.end(CONST.TIMING.CHAT_FINDER_RENDER);
Performance.markEnd(CONST.TIMING.CHAT_FINDER_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 {translate} = useLocalize();
const {isOffline} = useNetwork();
Expand All @@ -65,8 +66,9 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');

useEffect(() => {
Timing.start(CONST.TIMING.SEARCH_RENDER);
Performance.markStart(CONST.TIMING.SEARCH_RENDER);
// ASK: Should we also update this name?
Timing.start(CONST.TIMING.CHAT_FINDER_RENDER);
Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// ASK: Should we also update this name?
Timing.start(CONST.TIMING.CHAT_FINDER_RENDER);
Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);
Timing.start(CONST.TIMING.CHAT_FINDER_RENDER);
Performance.markStart(CONST.TIMING.CHAT_FINDER_RENDER);

}, []);

useEffect(() => {
Expand Down Expand Up @@ -113,8 +115,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({
Expand Down Expand Up @@ -162,12 +164,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?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Expensify/marketing could you take a look at this one? We're introducing a new search page, so the current search page will need to be renamed. I suggested to use Find here, but would love your opinion. For reference, this is the page

Screenshot 2024-04-15 at 10 06 11 AM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once we resolve that, I'll record videos for this PR :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@luacmartins can you actually bring this question out into #marketing? This seems like a slightly larger change that we should discuss and align on first in Slack. Thanks!

title={translate('common.search')}
onBackButtonPress={Navigation.goBack}
/>
Expand All @@ -183,21 +186,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);
7 changes: 4 additions & 3 deletions tests/e2e/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ 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',
// ASK: Should we also update this name?
OpenChatFinderPage: 'Open chat finder page TTI',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, we should. I don't think this value is being saved anywhere (at least I couldn't find that in code)

ReportTyping: 'Report typing',
ChatOpening: 'Chat opening',
Linking: 'Linking',
Expand Down Expand Up @@ -71,8 +72,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]: {
Expand Down
Loading
Loading