From 22d6d08ff8a9d008ea0eb5f21f8a57e9dbea0553 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 16 Oct 2024 23:06:51 +0100 Subject: [PATCH 1/6] hide the search router button when the report of a search result is opened in RHP --- src/components/MoneyReportHeader.tsx | 4 +++- src/components/MoneyRequestHeader.tsx | 4 +++- src/libs/Navigation/Navigation.ts | 9 +++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index fdf6f8edd825..b178174d6a45 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -149,6 +149,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails(); const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); + const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); + const confirmPayment = useCallback( (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => { if (!type || !chatReport) { @@ -289,7 +291,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea report={moneyRequestReport} policy={policy} shouldShowBackButton={shouldUseNarrowLayout} - shouldDisplaySearchRouter + shouldDisplaySearchRouter={!isReportOpenInRHP} onBackButtonPress={onBackButtonPress} // Shows border if no buttons or banners are showing below the header shouldShowBorderBottom={!isMoreContentShown} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index d2db257dc776..0c61cd51e1ad 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -59,6 +59,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? ''); const reportID = report?.reportID; + const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); + const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); const markAsCash = useCallback(() => { @@ -134,7 +136,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre }} policy={policy} shouldShowBackButton={shouldUseNarrowLayout} - shouldDisplaySearchRouter + shouldDisplaySearchRouter={!isReportOpenInRHP} onBackButtonPress={onBackButtonPress} > {hasAllPendingRTERViolations && !shouldUseNarrowLayout && ( diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index d5e9c5229a89..a619b50650bb 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -158,6 +158,14 @@ function getActiveRoute(): string { return ''; } +/** + * Checks whether the report is opened in RHP (from search results) + */ +function getIsReportOpenInRHP(): boolean { + const rootState = navigationRef.getRootState(); + return isReportOpenInRHP(rootState); +} + function getReportRHPActiveRoute(): string { if (isReportOpenInRHP(navigationRef.getRootState())) { return getActiveRoute(); @@ -442,6 +450,7 @@ export default { closeRHPFlow, setNavigationActionToMicrotaskQueue, getTopMostCentralPaneRouteFromRootState, + getIsReportOpenInRHP, }; export {navigationRef}; From 50f282bca0ff8d72c482e2d274ddf537d1d4c65b Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 16 Oct 2024 23:23:06 +0100 Subject: [PATCH 2/6] Hide the search router button when the report of a search result is opened in RHP --- src/pages/home/HeaderView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 31aaf7cb1f1c..4e5a2ab02291 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -140,6 +140,9 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant); const isLoading = !report?.reportID || !title; + const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); + const shouldDisplaySearchRouter = !isReportOpenInRHP; + return ( } {canJoin && !shouldUseNarrowLayout && joinButton} - + {shouldDisplaySearchRouter && } Date: Thu, 17 Oct 2024 00:27:13 +0100 Subject: [PATCH 3/6] Fix missing mock in perf tests --- tests/perf-test/ReportScreen.perf-test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 95ac9729e606..86a3cd44093a 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -109,6 +109,7 @@ jest.mock('@src/libs/Permissions', () => ({ jest.mock('@src/libs/Navigation/Navigation', () => ({ isNavigationReady: jest.fn(() => Promise.resolve()), isDisplayedInModal: jest.fn(() => false), + getIsReportOpenInRHP: jest.fn(() => false), })); jest.mock('@react-navigation/native', () => { From 6720b4182449fd13ed4a3588adc67ab9ab12f74c Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 17 Oct 2024 00:31:54 +0100 Subject: [PATCH 4/6] Fix Changed files ESLint check deprecation warning --- tests/perf-test/ReportScreen.perf-test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index 86a3cd44093a..3874c5fa69fb 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -6,7 +6,7 @@ import type ReactNative from 'react-native'; import {Dimensions, InteractionManager} from 'react-native'; import Onyx from 'react-native-onyx'; import type Animated from 'react-native-reanimated'; -import {measurePerformance} from 'reassure'; +import {measureRenders} from 'reassure'; import type {WithNavigationFocusProps} from '@components/withNavigationFocus'; import type Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; @@ -229,7 +229,7 @@ test('[ReportScreen] should render ReportScreen', async () => { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measurePerformance( + await measureRenders( Date: Thu, 17 Oct 2024 11:48:18 +0100 Subject: [PATCH 5/6] Remove getIsReportOpenInRHP function and handle get navigation ref directly in files --- src/components/MoneyReportHeader.tsx | 8 +++++--- src/components/MoneyRequestHeader.tsx | 8 +++++--- src/libs/Navigation/Navigation.ts | 9 --------- src/pages/home/HeaderView.tsx | 7 ++++--- tests/perf-test/ReportScreen.perf-test.tsx | 9 ++++----- 5 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index b178174d6a45..c54ea7a33121 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -8,7 +8,8 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; -import Navigation from '@libs/Navigation/Navigation'; +import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -149,7 +150,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails(); const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); - const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); + const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const shouldDisplaySearchRouter = !isReportInRHP; const confirmPayment = useCallback( (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => { @@ -291,7 +293,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea report={moneyRequestReport} policy={policy} shouldShowBackButton={shouldUseNarrowLayout} - shouldDisplaySearchRouter={!isReportOpenInRHP} + shouldDisplaySearchRouter={shouldDisplaySearchRouter} onBackButtonPress={onBackButtonPress} // Shows border if no buttons or banners are showing below the header shouldShowBorderBottom={!isMoreContentShown} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 0c61cd51e1ad..57e9ed4e160a 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -7,7 +7,8 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; +import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -59,7 +60,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? ''); const reportID = report?.reportID; - const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); + const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const shouldDisplaySearchRouter = !isReportInRHP; const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); @@ -136,7 +138,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre }} policy={policy} shouldShowBackButton={shouldUseNarrowLayout} - shouldDisplaySearchRouter={!isReportOpenInRHP} + shouldDisplaySearchRouter={shouldDisplaySearchRouter} onBackButtonPress={onBackButtonPress} > {hasAllPendingRTERViolations && !shouldUseNarrowLayout && ( diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index a619b50650bb..d5e9c5229a89 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -158,14 +158,6 @@ function getActiveRoute(): string { return ''; } -/** - * Checks whether the report is opened in RHP (from search results) - */ -function getIsReportOpenInRHP(): boolean { - const rootState = navigationRef.getRootState(); - return isReportOpenInRHP(rootState); -} - function getReportRHPActiveRoute(): string { if (isReportOpenInRHP(navigationRef.getRootState())) { return getActiveRoute(); @@ -450,7 +442,6 @@ export default { closeRHPFlow, setNavigationActionToMicrotaskQueue, getTopMostCentralPaneRouteFromRootState, - getIsReportOpenInRHP, }; export {navigationRef}; diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 4e5a2ab02291..a1528486e1ad 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -23,7 +23,8 @@ 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 isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import FreeTrialBadge from '@pages/settings/Subscription/FreeTrialBadge'; @@ -140,8 +141,8 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant); const isLoading = !report?.reportID || !title; - const isReportOpenInRHP = Navigation.getIsReportOpenInRHP(); - const shouldDisplaySearchRouter = !isReportOpenInRHP; + const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const shouldDisplaySearchRouter = !isReportInRHP; return ( ({ jest.mock('@src/libs/Navigation/Navigation', () => ({ isNavigationReady: jest.fn(() => Promise.resolve()), isDisplayedInModal: jest.fn(() => false), - getIsReportOpenInRHP: jest.fn(() => false), })); jest.mock('@react-navigation/native', () => { @@ -229,7 +228,7 @@ test('[ReportScreen] should render ReportScreen', async () => { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measureRenders( + await measurePerformance( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measureRenders( + await measurePerformance( { ...reportCollectionDataSet, ...reportActionsCollectionDataSet, }); - await measureRenders( + await measurePerformance( Date: Thu, 17 Oct 2024 12:23:58 +0100 Subject: [PATCH 6/6] Fix perf tests --- src/components/MoneyReportHeader.tsx | 2 +- src/components/MoneyRequestHeader.tsx | 2 +- src/pages/home/HeaderView.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index d8422fa75157..c4ceb7feff0a 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -158,7 +158,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails(); const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); - const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); const shouldDisplaySearchRouter = !isReportInRHP; const confirmPayment = useCallback( diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 737104df32a1..a046ee6a62f3 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -63,7 +63,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? ''); const reportID = report?.reportID; - const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); const shouldDisplaySearchRouter = !isReportInRHP; const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index a1528486e1ad..f78e98b51858 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -141,7 +141,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant); const isLoading = !report?.reportID || !title; - const isReportInRHP = isReportOpenInRHP(navigationRef.getRootState()); + const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); const shouldDisplaySearchRouter = !isReportInRHP; return (