[Search v1] Add ReportScreen to RHP

src/ROUTES.ts

@@ -28,6 +28,11 @@ const ROUTES = {
         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: {

src/SCREENS.ts

@@ -25,6 +25,7 @@ const SCREENS = {
     WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane',
     SEARCH: {
         CENTRAL_PANE: 'Search_Central_Pane',
+        REPORT: 'Search_Report',
         BOTTOM_TAB: 'Search_Bottom_Tab',
     },
     SETTINGS: {
@@ -131,6 +132,7 @@ const SCREENS = {
         ROOM_INVITE: 'RoomInvite',
         REFERRAL: 'Referral',
         PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold',
+        SEARCH_REPORT: 'Search_Report',
     },
     ONBOARDING_MODAL: {
         ONBOARDING: 'Onboarding',

src/components/MoneyReportHeader.tsx

@@ -52,13 +52,16 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & {
     /** The reportID of the transaction thread report associated with this current report, if any */
     // eslint-disable-next-line react/no-unused-prop-types
     transactionThreadReportID?: string | null;
+
+    /** Whether we should display the header as in narrow layout */
+    isNarrowLayout?: boolean;
 };
 
-function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport, transactionThreadReport, reportActions}: MoneyReportHeaderProps) {
+function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport, transactionThreadReport, reportActions, isNarrowLayout = false}: MoneyReportHeaderProps) {
     const styles = useThemeStyles();
     const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false);
     const {translate} = useLocalize();
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
     const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const requestParentReportAction = useMemo(() => {
@@ -108,7 +111,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency);
     const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy);
     const displayedAmount = ReportUtils.hasHeldExpenses(moneyRequestReport.reportID) && canAllowSettlement ? nonHeldAmount : formattedAmount;
-    const isMoreContentShown = shouldShowNextStep || (shouldShowAnyButton && isSmallScreenWidth);
+    const isMoreContentShown = shouldShowNextStep || (shouldShowAnyButton && isNarrowLayout);
 
     const confirmPayment = (type?: PaymentMethodType | undefined) => {
         if (!type) {
@@ -185,15 +188,15 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 shouldShowPinButton={false}
                 report={moneyRequestReport}
                 policy={policy}
-                shouldShowBackButton={isSmallScreenWidth}
+                shouldShowBackButton={isNarrowLayout}
                 onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 // Shows border if no buttons or next steps are showing below the header
-                shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextStep && !isSmallScreenWidth)}
+                shouldShowBorderBottom={!(shouldShowAnyButton && isNarrowLayout) && !(shouldShowNextStep && !isNarrowLayout)}
                 shouldShowThreeDotsButton
                 threeDotsMenuItems={threeDotsMenuItems}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
             >
-                {shouldShowSettlementButton && !isSmallScreenWidth && (
+                {shouldShowSettlementButton && !isNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
                             currency={moneyRequestReport.currency}
@@ -213,7 +216,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                         />
                     </View>
                 )}
-                {shouldShowSubmitButton && !isSmallScreenWidth && (
+                {shouldShowSubmitButton && !isNarrowLayout && (
                     <View style={styles.pv2}>
                         <Button
                             medium
@@ -227,7 +230,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 )}
             </HeaderWithBackButton>
             <View style={isMoreContentShown ? [styles.dFlex, styles.flexColumn, styles.borderBottom] : []}>
-                {shouldShowSettlementButton && isSmallScreenWidth && (
+                {shouldShowSettlementButton && isNarrowLayout && (
                     <View style={[styles.ph5, styles.pb2]}>
                         <SettlementButton
                             currency={moneyRequestReport.currency}
@@ -246,7 +249,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                         />
                     </View>
                 )}
-                {shouldShowSubmitButton && isSmallScreenWidth && (
+                {shouldShowSubmitButton && isNarrowLayout && (
                     <View style={[styles.ph5, styles.pb2]}>
                         <Button
                             medium
@@ -269,7 +272,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                     nonHeldAmount={!ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID) ? nonHeldAmount : undefined}
                     requestType={requestType}
                     fullAmount={fullAmount}
-                    isSmallScreenWidth={isSmallScreenWidth}
+                    isSmallScreenWidth={isNarrowLayout}
                     onClose={() => setIsHoldMenuVisible(false)}
                     isVisible={isHoldMenuVisible}
                     paymentType={paymentType}

src/components/MoneyRequestHeader.tsx

@@ -50,9 +50,12 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
 
     /** The report action the transaction is tied to from the parent report */
     parentReportAction: OnyxEntry<ReportAction>;
+
+    /** Whether we should display the header as in narrow layout */
+    isNarrowLayout?: boolean;
 };
 
-function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) {
+function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy, isNarrowLayout = false}: MoneyRequestHeaderProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -61,7 +64,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     const isSettled = ReportUtils.isSettled(moneyRequestReport?.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
 
     // Only the requestor can take delete the expense, admins can only edit it.
     const isActionOwner = typeof parentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && parentReportAction.actorAccountID === session?.accountID;
@@ -144,14 +147,14 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
             return;
         }
 
-        if (isSmallScreenWidth) {
+        if (isNarrowLayout) {
             if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD) {
                 Navigation.goBack();
             }
         } else {
             Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD);
         }
-    }, [isSmallScreenWidth, shouldShowHoldMenu]);
+    }, [isNarrowLayout, shouldShowHoldMenu]);
 
     const handleHoldRequestClose = () => {
         IOU.setShownHoldUseExplanation();
@@ -180,7 +183,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                         ownerAccountID: parentReport?.ownerAccountID,
                     }}
                     policy={policy}
-                    shouldShowBackButton={isSmallScreenWidth}
+                    shouldShowBackButton={isNarrowLayout}
                     onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 />
                 {isPending && (
@@ -209,7 +212,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                 cancelText={translate('common.cancel')}
                 danger
             />
-            {isSmallScreenWidth && shouldShowHoldMenu && (
+            {isNarrowLayout && shouldShowHoldMenu && (
                 <ProcessMoneyRequestHoldMenu
                     onClose={handleHoldRequestClose}
                     onConfirm={handleHoldRequestClose}

src/hooks/useIsNarrowLayout.ts

@@ -0,0 +1,12 @@
+import {useNavigationState} from '@react-navigation/native';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
+import SCREENS from '@src/SCREENS';
+import useWindowDimensions from './useWindowDimensions';
+
+// This hook checks whether narrow layout styles should be applied to the screen.
+// SCREENS.SEARCH.REPORT is the screen displaying the chat in RHP, this page should be styled like a page displayed on a small screen.
+export default function useIsNarrowLayout() {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const activeRoute = useNavigationState(getTopmostRouteName);
+    return activeRoute === SCREENS.SEARCH.REPORT || isSmallScreenWidth;
+}

src/hooks/useThumbnailDimensions.ts

@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import CONST from '@src/CONST';
-import useWindowDimensions from './useWindowDimensions';
+import useIsNarrowLayout from './useIsNarrowLayout';
 
 type ThumbnailDimensions = {
     thumbnailDimensionsStyles: {
@@ -13,8 +13,8 @@ type ThumbnailDimensions = {
 };
 
 export default function useThumbnailDimensions(width: number, height: number): ThumbnailDimensions {
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const fixedDimension = isSmallScreenWidth ? CONST.THUMBNAIL_IMAGE.SMALL_SCREEN.SIZE : CONST.THUMBNAIL_IMAGE.WIDE_SCREEN.SIZE;
+    const isNarrowLayout = useIsNarrowLayout();
+    const fixedDimension = isNarrowLayout ? CONST.THUMBNAIL_IMAGE.SMALL_SCREEN.SIZE : CONST.THUMBNAIL_IMAGE.WIDE_SCREEN.SIZE;
     const thumbnailDimensionsStyles = useMemo(() => {
         if (!width || !height) {
             return {width: fixedDimension, aspectRatio: CONST.THUMBNAIL_IMAGE.NAN_ASPECT_RATIO};

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

@@ -23,6 +23,7 @@ import type {
     ReportSettingsNavigatorParamList,
     RoomInviteNavigatorParamList,
     RoomMembersNavigatorParamList,
+    SearchReportParamList,
     SettingsNavigatorParamList,
     SignInNavigatorParamList,
     SplitDetailsNavigatorParamList,
@@ -333,7 +334,6 @@ const PrivateNotesModalStackNavigator = createModalStackNavigator<PrivateNotesNa
 const SignInModalStackNavigator = createModalStackNavigator<SignInNavigatorParamList>({
     [SCREENS.SIGN_IN_ROOT]: () => require('../../../../pages/signin/SignInModal').default as React.ComponentType,
 });
-
 const ReferralModalStackNavigator = createModalStackNavigator<ReferralDetailsNavigatorParamList>({
     [SCREENS.REFERRAL_DETAILS]: () => require('../../../../pages/ReferralDetailsPage').default as React.ComponentType,
 });
@@ -342,6 +342,10 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require('../../../../pages/ProcessMoneyRequestHoldPage').default as React.ComponentType,
 });
 
+const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
+    [SCREENS.SEARCH.REPORT]: () => require('../../../../pages/home/ReportScreen').default as React.ComponentType,
+});
+
 export {
     AddPersonalBankAccountModalStackNavigator,
     DetailsModalStackNavigator,
@@ -372,4 +376,5 @@ export {
     WalletStatementStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
     WorkspaceSettingsModalStackNavigator,
+    SearchReportModalStackNavigator,
 };

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/getTopmostRouteName.ts

@@ -0,0 +1,12 @@
+import type {NavigationState, PartialState} from '@react-navigation/native';
+
+// Get the name of topmost route in the navigation stack.
+function getTopmostRouteName(state: NavigationState | PartialState<NavigationState>): string | undefined {
+    if (!state) {
+        return;
+    }
+
+    return state.routes.at(-1)?.name;
+}
+
+export default getTopmostRouteName;

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -38,6 +38,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],
     [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE],
+    [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT],
 };
 
 export default CENTRAL_PANE_TO_RHP_MAPPING;

src/libs/Navigation/linkingConfig/config.ts

@@ -666,6 +666,11 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD,
                     },
                 },
+                [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: {
+                    screens: {
+                        [SCREENS.SEARCH.REPORT]: ROUTES.SEARCH_REPORT.route,
+                    },
+                },
             },
         },
 

src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts

@@ -195,6 +195,10 @@ function getAdaptedState(state: PartialState<NavigationState<RootStackParamList>
             if (matchingRootRoute?.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
                 routes.push(createCentralPaneNavigator({name: SCREENS.SETTINGS.WORKSPACES}));
             }
+            if (matchingRootRoute?.state?.routes[0]?.name === SCREENS.SEARCH.CENTRAL_PANE) {
+                const centralPaneRoute = matchingRootRoute?.state?.routes[0];
+                delete (centralPaneRoute?.params as Record<string, string | undefined>)?.reportID;
+            }
             if (matchingRootRoute && (!isNarrowLayout || !isRHPScreenOpenedFromLHN)) {
                 routes.push(matchingRootRoute);
             }

src/libs/Navigation/types.ts

@@ -672,6 +672,7 @@ type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.PROCESS_MONEY_REQUEST_HOLD]: NavigatorScreenParams<ProcessMoneyRequestHoldNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.REFERRAL]: NavigatorScreenParams<ReferralDetailsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
+    [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams<SearchReportParamList>;
 };
 
 type WorkspacesCentralPaneNavigatorParamList = {
@@ -826,6 +827,13 @@ type AuthScreensParamList = SharedScreensParamList & {
     };
 };
 
+type SearchReportParamList = {
+    [SCREENS.SEARCH.REPORT]: {
+        query: string;
+        reportID: string;
+    };
+};
+
 type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList;
 
 type BottomTabName = keyof BottomTabNavigatorParamList;
@@ -891,4 +899,5 @@ export type {
     WelcomeVideoModalNavigatorParamList,
     WorkspaceSwitcherNavigatorParamList,
     WorkspacesCentralPaneNavigatorParamList,
+    SearchReportParamList,
 };

src/libs/actions/Task.ts

@@ -960,7 +960,7 @@ function deleteTask(report: OnyxEntry<OnyxTypes.Report>) {
  * Closes the current open task modal and clears out the task info from the store.
  */
 function dismissModalAndClearOutTaskInfo() {
-    Navigation.dismissModal();
+    Navigation.goBack();
     clearOutTaskInfo();
 }