From 388afe1b9c7d12aeae8e3db108aabeb163fb34f9 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 29 Mar 2024 17:19:00 +0700 Subject: [PATCH 01/13] fix create troubleshoot page --- .../simple-illustration__lightbulb.svg | 33 ++++ src/components/Icon/Illustrations.ts | 2 + src/components/Section/index.tsx | 18 +- .../ModalStackNavigators/index.tsx | 1 - .../BaseCentralPaneNavigator.tsx | 1 + .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 3 +- .../TAB_TO_CENTRAL_PANE_MAPPING.ts | 1 + src/libs/Navigation/linkingConfig/config.ts | 8 +- src/libs/Navigation/types.ts | 2 + src/pages/settings/AboutPage/AboutPage.tsx | 5 - .../settings/AboutPage/TroubleshootPage.tsx | 158 --------------- src/pages/settings/InitialSettingsPage.tsx | 5 + .../Troubleshoot/TroubleshootPage.tsx | 182 ++++++++++++++++++ 13 files changed, 245 insertions(+), 174 deletions(-) create mode 100644 assets/images/simple-illustrations/simple-illustration__lightbulb.svg delete mode 100644 src/pages/settings/AboutPage/TroubleshootPage.tsx create mode 100644 src/pages/settings/Troubleshoot/TroubleshootPage.tsx diff --git a/assets/images/simple-illustrations/simple-illustration__lightbulb.svg b/assets/images/simple-illustrations/simple-illustration__lightbulb.svg new file mode 100644 index 000000000000..1dc359764147 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__lightbulb.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 28d1d53ed60c..3637ce3d2150 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -52,6 +52,7 @@ import HotDogStand from '@assets/images/simple-illustrations/simple-illustration import Hourglass from '@assets/images/simple-illustrations/simple-illustration__hourglass.svg'; import House from '@assets/images/simple-illustrations/simple-illustration__house.svg'; import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg'; +import Lightbulb from '@assets/images/simple-illustrations/simple-illustration__lightbulb.svg'; import LockClosed from '@assets/images/simple-illustrations/simple-illustration__lockclosed.svg'; import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg'; import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg'; @@ -158,4 +159,5 @@ export { Pencil, Tag, CarIce, + Lightbulb, }; diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 93a2e91639a6..848761c9e982 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -70,6 +70,9 @@ type SectionProps = ChildrenProps & { /** Overlay content to display on top of animation */ overlayContent?: () => ReactNode; + + /** The component to display in the title of the section */ + renderSubtitle?: () => ReactNode; }; function Section({ @@ -90,6 +93,7 @@ function Section({ illustrationBackgroundColor, illustrationStyle, overlayContent, + renderSubtitle, }: SectionProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -139,11 +143,15 @@ function Section({ )} - {!!subtitle && ( - - {subtitle} - - )} + {renderSubtitle + ? renderSubtitle?.() + : !!subtitle && ( + + {subtitle} + + )} {children} diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index ef1fc3c2dfb0..4c57741e19eb 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -198,7 +198,6 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, [SCREENS.SETTINGS.CLOSE]: () => require('../../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType, [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require('../../../../pages/settings/AppDownloadLinks').default as React.ComponentType, - [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../../pages/settings/AboutPage/TroubleshootPage').default as React.ComponentType, [SCREENS.SETTINGS.CONSOLE]: () => require('../../../../pages/settings/AboutPage/ConsolePage').default as React.ComponentType, [SCREENS.SETTINGS.SHARE_LOG]: () => require('../../../../pages/settings/AboutPage/ShareLogPage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require('../../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType, diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 16f403342a58..b13d38570cd7 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -20,6 +20,7 @@ const settingsScreens = { [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, [SCREENS.SETTINGS.ABOUT]: () => require('../../../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, + [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType, } satisfies Screens; function BaseCentralPaneNavigator() { diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 95233bfed079..ffac214c154d 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -35,7 +35,8 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS, ], [SCREENS.SETTINGS.SECURITY]: [SCREENS.SETTINGS.TWO_FACTOR_AUTH, SCREENS.SETTINGS.CLOSE], - [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS, SCREENS.SETTINGS.TROUBLESHOOT], + [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS], + [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE], }; export default CENTRAL_PANE_TO_RHP_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts index 78a644ab4aee..a349a3425e29 100755 --- a/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -10,6 +10,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record = { SCREENS.SETTINGS.WALLET.ROOT, SCREENS.SETTINGS.ABOUT, SCREENS.SETTINGS.WORKSPACES, + SCREENS.SETTINGS.TROUBLESHOOT, ], }; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index c9c5d47a2df3..cd4fd463820f 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -60,6 +60,10 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_ABOUT, exact: true, }, + [SCREENS.SETTINGS.TROUBLESHOOT]: { + path: ROUTES.SETTINGS_TROUBLESHOOT, + exact: true, + }, [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES, }, }, @@ -176,10 +180,6 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_APP_DOWNLOAD_LINKS, exact: true, }, - [SCREENS.SETTINGS.TROUBLESHOOT]: { - path: ROUTES.SETTINGS_TROUBLESHOOT, - exact: true, - }, [SCREENS.SETTINGS.CONSOLE]: { path: ROUTES.SETTINGS_CONSOLE, exact: true, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 60b2ed63ab49..d1d5e788dc26 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -58,6 +58,7 @@ type CentralPaneNavigatorParamList = { [SCREENS.SETTINGS.SECURITY]: undefined; [SCREENS.SETTINGS.WALLET.ROOT]: undefined; [SCREENS.SETTINGS.ABOUT]: undefined; + [SCREENS.SETTINGS.TROUBLESHOOT]: undefined; [SCREENS.SETTINGS.WORKSPACES]: undefined; }; @@ -102,6 +103,7 @@ type SettingsNavigatorParamList = { [SCREENS.SETTINGS.CLOSE]: undefined; [SCREENS.SETTINGS.SECURITY]: undefined; [SCREENS.SETTINGS.ABOUT]: undefined; + [SCREENS.SETTINGS.TROUBLESHOOT]: undefined; [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: undefined; [SCREENS.SETTINGS.TROUBLESHOOT]: undefined; [SCREENS.SETTINGS.CONSOLE]: undefined; diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index 0c087b2c93d6..56336386c46b 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -87,11 +87,6 @@ function AboutPage() { }, link: CONST.UPWORK_URL, }, - { - translationKey: 'initialSettingsPage.aboutPage.troubleshoot', - icon: Expensicons.Lightbulb, - action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_TROUBLESHOOT)), - }, { translationKey: 'initialSettingsPage.aboutPage.reportABug', icon: Expensicons.Bug, diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx deleted file mode 100644 index e04a834c6341..000000000000 --- a/src/pages/settings/AboutPage/TroubleshootPage.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React, {useMemo, useState} from 'react'; -import {View} from 'react-native'; -import Onyx, {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; -import type {SvgProps} from 'react-native-svg'; -import ConfirmModal from '@components/ConfirmModal'; -import * as Expensicons from '@components/Icon/Expensicons'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; -import LottieAnimations from '@components/LottieAnimations'; -import MenuItemList from '@components/MenuItemList'; -import Switch from '@components/Switch'; -import TestToolMenu from '@components/TestToolMenu'; -import TestToolRow from '@components/TestToolRow'; -import Text from '@components/Text'; -import TextLink from '@components/TextLink'; -import useEnvironment from '@hooks/useEnvironment'; -import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import useWaitForNavigation from '@hooks/useWaitForNavigation'; -import * as Console from '@libs/actions/Console'; -import Navigation from '@libs/Navigation/Navigation'; -import * as App from '@userActions/App'; -import * as Report from '@userActions/Report'; -import type {TranslationPaths} from '@src/languages/types'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {OnyxKey} from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; - -const keysToPreserve: OnyxKey[] = [ - ONYXKEYS.ACCOUNT, - ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, - ONYXKEYS.IS_LOADING_APP, - ONYXKEYS.IS_SIDEBAR_LOADED, - ONYXKEYS.MODAL, - ONYXKEYS.NETWORK, - ONYXKEYS.SESSION, - ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, - ONYXKEYS.NVP_TRY_FOCUS_MODE, - ONYXKEYS.PREFERRED_THEME, - ONYXKEYS.NVP_PREFERRED_LOCALE, - ONYXKEYS.CREDENTIALS, -]; - -type BaseMenuItem = { - translationKey: TranslationPaths; - icon: React.FC; - action: () => void | Promise; -}; - -type TroubleshootPageOnyxProps = { - shouldStoreLogs: OnyxEntry; -}; - -type TroubleshootPageProps = TroubleshootPageOnyxProps; - -function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { - const {translate} = useLocalize(); - const theme = useTheme(); - const styles = useThemeStyles(); - const {isProduction} = useEnvironment(); - const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false); - const waitForNavigate = useWaitForNavigation(); - - const menuItems = useMemo(() => { - const debugConsoleItem: BaseMenuItem = { - translationKey: 'initialSettingsPage.troubleshoot.viewConsole', - icon: Expensicons.Gear, - action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)), - }; - - const baseMenuItems: BaseMenuItem[] = [ - { - translationKey: 'initialSettingsPage.troubleshoot.clearCacheAndRestart', - icon: Expensicons.RotateLeft, - action: () => setIsConfirmationModalVisible(true), - }, - ]; - - if (shouldStoreLogs) { - baseMenuItems.push(debugConsoleItem); - } - - return baseMenuItems - .map((item) => ({ - key: item.translationKey, - title: translate(item.translationKey), - icon: item.icon, - onPress: item.action, - })) - .reverse(); - }, [shouldStoreLogs, translate, waitForNavigate]); - - return ( - Navigation.goBack()} - backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor} - illustration={LottieAnimations.Desk} - testID={TroubleshootPage.displayName} - > - - {translate('initialSettingsPage.aboutPage.troubleshoot')} - - {translate('initialSettingsPage.troubleshoot.description')}{' '} - Report.navigateToConciergeChat()} - > - {translate('initialSettingsPage.troubleshoot.submitBug')} - - - - - - (shouldStoreLogs ? Console.disableLoggingAndFlushLogs() : Console.setShouldStoreLogs(true))} - /> - - - - {/* Enable additional test features in non-production environments */} - {!isProduction && ( - - - - )} - { - setIsConfirmationModalVisible(false); - Onyx.clear(keysToPreserve).then(() => { - App.openApp(); - }); - }} - onCancel={() => setIsConfirmationModalVisible(false)} - prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')} - confirmText={translate('initialSettingsPage.troubleshoot.resetAndRefresh')} - cancelText={translate('common.cancel')} - /> - - ); -} - -TroubleshootPage.displayName = 'TroubleshootPage'; - -export default withOnyx({ - shouldStoreLogs: { - key: ONYXKEYS.SHOULD_STORE_LOGS, - }, -})(TroubleshootPage); diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 73bd031b5978..4cf97c940bfd 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -250,6 +250,11 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa icon: Expensicons.Info, routeName: ROUTES.SETTINGS_ABOUT, }, + { + translationKey: 'initialSettingsPage.aboutPage.troubleshoot', + icon: Expensicons.Lightbulb, + routeName: ROUTES.SETTINGS_TROUBLESHOOT, + }, { translationKey: signOutTranslationKey, icon: Expensicons.Exit, diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx new file mode 100644 index 000000000000..e2deb70da250 --- /dev/null +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -0,0 +1,182 @@ +import React, {useMemo, useState} from 'react'; +import {View} from 'react-native'; +import Onyx, {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import type {SvgProps} from 'react-native-svg'; +import ConfirmModal from '@components/ConfirmModal'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; +import LottieAnimations from '@components/LottieAnimations'; +import MenuItemList from '@components/MenuItemList'; +import ScreenWrapper from '@components/ScreenWrapper'; +import ScrollView from '@components/ScrollView'; +import Section from '@components/Section'; +import Switch from '@components/Switch'; +import TestToolMenu from '@components/TestToolMenu'; +import TestToolRow from '@components/TestToolRow'; +import Text from '@components/Text'; +import TextLink from '@components/TextLink'; +import useEnvironment from '@hooks/useEnvironment'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWaitForNavigation from '@hooks/useWaitForNavigation'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as Console from '@libs/actions/Console'; +import Navigation from '@libs/Navigation/Navigation'; +import * as App from '@userActions/App'; +import * as Report from '@userActions/Report'; +import type {TranslationPaths} from '@src/languages/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {OnyxKey} from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; + +const keysToPreserve: OnyxKey[] = [ + ONYXKEYS.ACCOUNT, + ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, + ONYXKEYS.IS_LOADING_APP, + ONYXKEYS.IS_SIDEBAR_LOADED, + ONYXKEYS.MODAL, + ONYXKEYS.NETWORK, + ONYXKEYS.SESSION, + ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, + ONYXKEYS.NVP_TRY_FOCUS_MODE, + ONYXKEYS.PREFERRED_THEME, + ONYXKEYS.NVP_PREFERRED_LOCALE, + ONYXKEYS.CREDENTIALS, +]; + +type BaseMenuItem = { + translationKey: TranslationPaths; + icon: React.FC; + action: () => void | Promise; +}; + +type TroubleshootPageOnyxProps = { + shouldStoreLogs: OnyxEntry; +}; + +type TroubleshootPageProps = TroubleshootPageOnyxProps; + +function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { + const {translate} = useLocalize(); + const theme = useTheme(); + const styles = useThemeStyles(); + const {isProduction} = useEnvironment(); + const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false); + const waitForNavigate = useWaitForNavigation(); + const {isSmallScreenWidth} = useWindowDimensions(); + + const menuItems = useMemo(() => { + const debugConsoleItem: BaseMenuItem = { + translationKey: 'initialSettingsPage.troubleshoot.viewConsole', + icon: Expensicons.Gear, + action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)), + }; + + const baseMenuItems: BaseMenuItem[] = [ + { + translationKey: 'initialSettingsPage.troubleshoot.clearCacheAndRestart', + icon: Expensicons.RotateLeft, + action: () => setIsConfirmationModalVisible(true), + }, + ]; + + if (shouldStoreLogs) { + baseMenuItems.push(debugConsoleItem); + } + + return baseMenuItems + .map((item) => ({ + key: item.translationKey, + title: translate(item.translationKey), + icon: item.icon, + onPress: item.action, + })) + .reverse(); + }, [shouldStoreLogs, translate, waitForNavigate]); + + return ( + + Navigation.goBack(ROUTES.SETTINGS)} + icon={Illustrations.Lightbulb} + /> + + +
( + + {translate('initialSettingsPage.troubleshoot.description')}{' '} + Report.navigateToConciergeChat()} + > + {translate('initialSettingsPage.troubleshoot.submitBug')} + + + )} + > + + + + (shouldStoreLogs ? Console.disableLoggingAndFlushLogs() : Console.setShouldStoreLogs(true))} + /> + + + + {!isProduction && ( + + + + )} + { + setIsConfirmationModalVisible(false); + Onyx.clear(keysToPreserve).then(() => { + App.openApp(); + }); + }} + onCancel={() => setIsConfirmationModalVisible(false)} + prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')} + confirmText={translate('initialSettingsPage.troubleshoot.resetAndRefresh')} + cancelText={translate('common.cancel')} + /> + +
+ + + + ); +} + +TroubleshootPage.displayName = 'TroubleshootPage'; + +export default withOnyx({ + shouldStoreLogs: { + key: ONYXKEYS.SHOULD_STORE_LOGS, + }, +})(TroubleshootPage); From 465db73c5d620fc12c68dcfb7a38d62405d9c1a5 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 29 Mar 2024 18:28:52 +0700 Subject: [PATCH 02/13] fix margin right issue --- src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx index e2deb70da250..379615b171d9 100644 --- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -129,11 +129,12 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { > {translate('initialSettingsPage.troubleshoot.submitBug')} + . )} > - + {!isProduction && ( - + )} From 3fe9d34dd677dea2442c2622c8a1f7b26d5af2a1 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 3 Apr 2024 14:35:15 +0700 Subject: [PATCH 03/13] fix remove unused file --- .../settings/AboutPage/TroubleshootPage.tsx | 150 ------------------ 1 file changed, 150 deletions(-) delete mode 100644 src/pages/settings/AboutPage/TroubleshootPage.tsx diff --git a/src/pages/settings/AboutPage/TroubleshootPage.tsx b/src/pages/settings/AboutPage/TroubleshootPage.tsx deleted file mode 100644 index 0e192540ebd2..000000000000 --- a/src/pages/settings/AboutPage/TroubleshootPage.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import React, {useMemo, useState} from 'react'; -import {View} from 'react-native'; -import Onyx, {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; -import type {SvgProps} from 'react-native-svg'; -import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu'; -import ConfirmModal from '@components/ConfirmModal'; -import * as Expensicons from '@components/Icon/Expensicons'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; -import LottieAnimations from '@components/LottieAnimations'; -import MenuItemList from '@components/MenuItemList'; -import TestToolMenu from '@components/TestToolMenu'; -import Text from '@components/Text'; -import TextLink from '@components/TextLink'; -import useEnvironment from '@hooks/useEnvironment'; -import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import useWaitForNavigation from '@hooks/useWaitForNavigation'; -import Navigation from '@libs/Navigation/Navigation'; -import * as App from '@userActions/App'; -import * as Report from '@userActions/Report'; -import type {TranslationPaths} from '@src/languages/types'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {OnyxKey} from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; -import SCREENS from '@src/SCREENS'; - -const keysToPreserve: OnyxKey[] = [ - ONYXKEYS.ACCOUNT, - ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, - ONYXKEYS.IS_LOADING_APP, - ONYXKEYS.IS_SIDEBAR_LOADED, - ONYXKEYS.MODAL, - ONYXKEYS.NETWORK, - ONYXKEYS.SESSION, - ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, - ONYXKEYS.NVP_TRY_FOCUS_MODE, - ONYXKEYS.PREFERRED_THEME, - ONYXKEYS.NVP_PREFERRED_LOCALE, - ONYXKEYS.CREDENTIALS, -]; - -type BaseMenuItem = { - translationKey: TranslationPaths; - icon: React.FC; - action: () => void | Promise; -}; - -type TroubleshootPageOnyxProps = { - shouldStoreLogs: OnyxEntry; -}; - -type TroubleshootPageProps = TroubleshootPageOnyxProps; - -function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { - const {translate} = useLocalize(); - const theme = useTheme(); - const styles = useThemeStyles(); - const {isProduction} = useEnvironment(); - const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false); - const waitForNavigate = useWaitForNavigation(); - - const menuItems = useMemo(() => { - const debugConsoleItem: BaseMenuItem = { - translationKey: 'initialSettingsPage.troubleshoot.viewConsole', - icon: Expensicons.Gear, - action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_CONSOLE)), - }; - - const baseMenuItems: BaseMenuItem[] = [ - { - translationKey: 'initialSettingsPage.troubleshoot.clearCacheAndRestart', - icon: Expensicons.RotateLeft, - action: () => setIsConfirmationModalVisible(true), - }, - ]; - - if (shouldStoreLogs) { - baseMenuItems.push(debugConsoleItem); - } - - return baseMenuItems - .map((item) => ({ - key: item.translationKey, - title: translate(item.translationKey), - icon: item.icon, - onPress: item.action, - })) - .reverse(); - }, [shouldStoreLogs, translate, waitForNavigate]); - - return ( - Navigation.goBack()} - backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor} - illustration={LottieAnimations.Desk} - testID={TroubleshootPage.displayName} - > - - {translate('initialSettingsPage.aboutPage.troubleshoot')} - - {translate('initialSettingsPage.troubleshoot.description')}{' '} - Report.navigateToConciergeChat()} - > - {translate('initialSettingsPage.troubleshoot.submitBug')} - - - - - - - - {/* Enable additional test features in non-production environments */} - {!isProduction && ( - - - - )} - { - setIsConfirmationModalVisible(false); - Onyx.clear(keysToPreserve).then(() => { - App.openApp(); - }); - }} - onCancel={() => setIsConfirmationModalVisible(false)} - prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')} - confirmText={translate('initialSettingsPage.troubleshoot.resetAndRefresh')} - cancelText={translate('common.cancel')} - /> - - ); -} - -TroubleshootPage.displayName = 'TroubleshootPage'; - -export default withOnyx({ - shouldStoreLogs: { - key: ONYXKEYS.SHOULD_STORE_LOGS, - }, -})(TroubleshootPage); From 0b8743bd1857fd02d9fa7b13023217161eaee44c Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 3 Apr 2024 14:40:54 +0700 Subject: [PATCH 04/13] fix use ClientSideLoggingToolMenu --- src/pages/settings/Troubleshoot/TroubleshootPage.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx index 379615b171d9..39dfb228d57a 100644 --- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import Onyx, {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg'; +import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu'; import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -12,9 +13,7 @@ import MenuItemList from '@components/MenuItemList'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; -import Switch from '@components/Switch'; import TestToolMenu from '@components/TestToolMenu'; -import TestToolRow from '@components/TestToolRow'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useEnvironment from '@hooks/useEnvironment'; @@ -23,7 +22,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import * as Console from '@libs/actions/Console'; import Navigation from '@libs/Navigation/Navigation'; import * as App from '@userActions/App'; import * as Report from '@userActions/Report'; @@ -135,13 +133,7 @@ function TroubleshootPage({shouldStoreLogs}: TroubleshootPageProps) { > - - (shouldStoreLogs ? Console.disableLoggingAndFlushLogs() : Console.setShouldStoreLogs(true))} - /> - + Date: Wed, 3 Apr 2024 17:28:50 +0700 Subject: [PATCH 05/13] fix add translations --- src/components/TestToolMenu.tsx | 18 ++++++++++-------- src/languages/en.ts | 8 ++++++++ src/languages/es.ts | 10 +++++++++- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 647f25c450e5..ebfbeffd68df 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; @@ -30,6 +31,7 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( <> @@ -37,13 +39,13 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { style={[styles.textLabelSupporting, styles.mb4]} numberOfLines={1} > - Test Preferences + {translate('initialSettingsPage.troubleshoot.testingPreferences')} {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */} {!CONFIG.IS_USING_LOCAL_WEB && ( - + + {/* When toggled all network requests will fail. */} - + {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */} - +