From b426a2905dcb00bc09d8bd7bcc514707c4c4fde7 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Tue, 18 Mar 2025 10:13:25 +0800 Subject: [PATCH 01/13] Fix: On tapping device back button to close troubleshoot box from LHN, navigated out of site --- src/components/CustomDevMenu/index.native.tsx | 2 +- src/components/ScreenWrapper.tsx | 2 +- .../Search/SearchRouter/SearchRouterModal.tsx | 4 ++-- src/components/TestToolsModal.tsx | 5 +++-- src/hooks/useDebugShortcut.tsx | 2 +- src/libs/actions/TestTool.ts | 10 +++++++++- 6 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx index 55ab64205587..239f29a2cf51 100644 --- a/src/components/CustomDevMenu/index.native.tsx +++ b/src/components/CustomDevMenu/index.native.tsx @@ -1,6 +1,6 @@ import {useEffect} from 'react'; import {DevSettings} from 'react-native'; -import toggleTestToolsModal from '@userActions/TestTool'; +import {toggleTestToolsModal} from '@userActions/TestTool'; import type CustomDevMenuElement from './types'; const CustomDevMenu: CustomDevMenuElement = Object.assign( diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 6ea4ca3951ae..d4de6ca84419 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -20,7 +20,7 @@ import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {ReportsSplitNavigatorParamList, RootNavigatorParamList} from '@libs/Navigation/types'; import addViewportResizeListener from '@libs/VisualViewport'; -import toggleTestToolsModal from '@userActions/TestTool'; +import {toggleTestToolsModal} from '@userActions/TestTool'; import CONFIG from '@src/CONFIG'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 29d1bab8405f..cd5dfe6899a7 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -7,7 +7,7 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import useViewportOffsetTop from '@hooks/useViewportOffsetTop'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import {isMobileChrome, isMobileSafari} from '@libs/Browser'; +import {isMobileSafari} from '@libs/Browser'; import CONST from '@src/CONST'; import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; @@ -36,7 +36,7 @@ function SearchRouterModal() { fullscreen propagateSwipe swipeDirection={shouldUseNarrowLayout ? CONST.SWIPE_DIRECTION.RIGHT : undefined} - shouldHandleNavigationBack={isMobileChrome()} + shouldHandleNavigationBack onClose={closeSearchRouter} onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)} onModalShow={() => setShouldHideInputCaret(false)} diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx index 68538294d569..6d528853ad5c 100644 --- a/src/components/TestToolsModal.tsx +++ b/src/components/TestToolsModal.tsx @@ -8,7 +8,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import {getBrowser, isChromeIOS} from '@libs/Browser'; import Navigation from '@navigation/Navigation'; -import toggleTestToolsModal from '@userActions/TestTool'; +import {closeTestToolsModal, toggleTestToolsModal} from '@userActions/TestTool'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -50,7 +50,8 @@ function TestToolsModal() { Date: Tue, 18 Mar 2025 10:48:50 +0800 Subject: [PATCH 02/13] ESLint fix --- src/libs/actions/TestTool.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/TestTool.ts b/src/libs/actions/TestTool.ts index 5ff3b4e6b886..682e30de3364 100644 --- a/src/libs/actions/TestTool.ts +++ b/src/libs/actions/TestTool.ts @@ -2,7 +2,7 @@ import throttle from 'lodash/throttle'; import Onyx from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import * as Modal from './Modal'; +import {close} from './Modal'; let isTestToolsModalOpen = false; Onyx.connect({ @@ -20,7 +20,7 @@ function toggleTestToolsModal() { Onyx.set(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, !isTestToolsModalOpen); }; if (!isTestToolsModalOpen) { - Modal.close(toggleIsTestToolsModalOpen); + close(toggleIsTestToolsModalOpen); return; } toggleIsTestToolsModalOpen(); From aef18de265ff8f1f33c252f3b52e82bd6597f961 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Tue, 1 Apr 2025 09:44:32 +0800 Subject: [PATCH 03/13] prettier fix --- src/components/TestToolsModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx index 341af038e336..eddb81cd73a5 100644 --- a/src/components/TestToolsModal.tsx +++ b/src/components/TestToolsModal.tsx @@ -7,7 +7,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@navigation/Navigation'; -import toggleTestToolsModal, {shouldShowProfileTool, closeTestToolsModal} from '@userActions/TestTool'; +import toggleTestToolsModal, {closeTestToolsModal, shouldShowProfileTool} from '@userActions/TestTool'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; From 95b9e8f4423d205a17e4c0ca7d038a6202d6572a Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Tue, 15 Apr 2025 17:58:23 +0800 Subject: [PATCH 04/13] add modal screen --- src/NAVIGATORS.ts | 1 + src/ROUTES.ts | 2 + src/SCREENS.ts | 4 + src/components/TestToolsModalPage.tsx | 73 +++++++++++++++++++ .../Navigation/AppNavigator/AuthScreens.tsx | 7 ++ .../Navigators/TestToolsModalNavigator.tsx | 37 ++++++++++ src/libs/Navigation/linkingConfig/config.ts | 9 +++ src/libs/Navigation/types.ts | 6 ++ src/libs/actions/TestTool.ts | 38 ++++------ src/styles/index.ts | 14 ++++ 10 files changed, 169 insertions(+), 22 deletions(-) create mode 100644 src/components/TestToolsModalPage.tsx create mode 100644 src/libs/Navigation/AppNavigator/Navigators/TestToolsModalNavigator.tsx diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts index 853e2591b499..c57165ede1c8 100644 --- a/src/NAVIGATORS.ts +++ b/src/NAVIGATORS.ts @@ -17,4 +17,5 @@ export default { SEARCH_FULLSCREEN_NAVIGATOR: 'SearchFullscreenNavigator', SHARE_MODAL_NAVIGATOR: 'ShareModalNavigator', PUBLIC_RIGHT_MODAL_NAVIGATOR: 'PublicRightModalNavigator', + TEST_TOOLS_MODAL_NAVIGATOR: 'TestToolsModalNavigator', } as const; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3ea3e617af0d..dee2bf612543 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -1821,6 +1821,8 @@ const ROUTES = { }, MIGRATED_USER_WELCOME_MODAL: 'onboarding/migrated-user-welcome', + TEST_TOOLS_MODAL: 'test-tools', + TRANSACTION_RECEIPT: { route: 'r/:reportID/transaction/:transactionID/receipt', getRoute: (reportID: string | undefined, transactionID: string | undefined, readonly = false, isFromReviewDuplicates = false) => { diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 01a83f520507..9ef1021043f3 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -639,6 +639,10 @@ const SCREENS = { ROOT: 'MigratedUserWelcomeModal_Root', }, + TEST_TOOLS_MODAL: { + ROOT: 'TestToolsModal_Root', + }, + I_KNOW_A_TEACHER: 'I_Know_A_Teacher', INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal', I_AM_A_TEACHER: 'I_Am_A_Teacher', diff --git a/src/components/TestToolsModalPage.tsx b/src/components/TestToolsModalPage.tsx new file mode 100644 index 000000000000..7d10294567db --- /dev/null +++ b/src/components/TestToolsModalPage.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import {View} from 'react-native'; +import SafeAreaConsumer from '@components/SafeAreaConsumer'; +import useIsAuthenticated from '@hooks/useIsAuthenticated'; +import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import Navigation from '@navigation/Navigation'; +import {shouldShowProfileTool} from '@userActions/TestTool'; +import ROUTES from '@src/ROUTES'; +import Button from './Button'; +import ClientSideLoggingToolMenu from './ClientSideLoggingToolMenu'; +import ProfilingToolMenu from './ProfilingToolMenu'; +import ScrollView from './ScrollView'; +import TestToolMenu from './TestToolMenu'; +import TestToolRow from './TestToolRow'; +import Text from './Text'; + +function getRouteBasedOnAuthStatus(isAuthenticated: boolean, activeRoute: string) { + return isAuthenticated ? ROUTES.SETTINGS_CONSOLE.getRoute(activeRoute) : ROUTES.PUBLIC_CONSOLE_DEBUG.getRoute(activeRoute); +} + +function TestToolsModalPage() { + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const {windowWidth, windowHeight} = useWindowDimensions(); + const StyleUtils = useStyleUtils(); + const styles = useThemeStyles(); + const theme = useTheme(); + const {translate} = useLocalize(); + const activeRoute = Navigation.getActiveRoute(); + const isAuthenticated = useIsAuthenticated(); + const route = getRouteBasedOnAuthStatus(isAuthenticated, activeRoute); + + const maxHeight = windowHeight; + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + {translate('initialSettingsPage.troubleshoot.releaseOptions')} + + {shouldShowProfileTool() && } + + {!!false && ( + +