feat: Troubleshooting page & resetting Onyx state #35306
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import React, {useMemo, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import Onyx 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 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 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, | ||
| ]; | ||
|
|
||
| type BaseMenuItem = { | ||
| translationKey: TranslationPaths; | ||
| icon: React.FC<SvgProps>; | ||
| action: () => void; | ||
| }; | ||
|
|
||
| function TroubleshootPage() { | ||
| const {translate} = useLocalize(); | ||
| const theme = useTheme(); | ||
| const styles = useThemeStyles(); | ||
| const {isProduction} = useEnvironment(); | ||
| const [isConfirmationModalVisible, setIsConfirmationModalVisible] = useState(false); | ||
|
|
||
| const menuItems = useMemo(() => { | ||
| const baseMenuItems: BaseMenuItem[] = [ | ||
| { | ||
| translationKey: 'initialSettingsPage.troubleshoot.clearCacheAndRestart', | ||
| icon: Expensicons.RotateLeft, | ||
| action: () => setIsConfirmationModalVisible(true), | ||
| }, | ||
| ]; | ||
|
|
||
| return baseMenuItems.map((item) => ({ | ||
| key: item.translationKey, | ||
| title: translate(item.translationKey), | ||
| icon: item.icon, | ||
| onPress: item.action, | ||
| })); | ||
| }, [translate]); | ||
|
|
||
| return ( | ||
| <IllustratedHeaderPageLayout | ||
| title={translate('initialSettingsPage.aboutPage.troubleshoot')} | ||
| onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)} | ||
| backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor} | ||
| illustration={LottieAnimations.Desk} | ||
| testID={TroubleshootPage.displayName} | ||
| > | ||
| <View style={[styles.settingsPageBody, styles.ph5]}> | ||
| <Text style={[styles.textHeadline, styles.mb1]}>{translate('initialSettingsPage.aboutPage.troubleshoot')}</Text> | ||
| <Text style={styles.mb4}> | ||
| <Text>{translate('initialSettingsPage.troubleshoot.description')}</Text>{' '} | ||
| <TextLink | ||
| style={styles.link} | ||
| onPress={() => Report.navigateToConciergeChat()} | ||
| > | ||
| {translate('initialSettingsPage.troubleshoot.submitBug')} | ||
| </TextLink> | ||
| </Text> | ||
| </View> | ||
| <MenuItemList | ||
| menuItems={menuItems} | ||
| shouldUseSingleExecution | ||
| /> | ||
| {/* Enable additional test features in non-production environments */} | ||
|
There was a problem hiding this comment. Not a blocker: From David's initial proposal https://expensify.slack.com/archives/C01GTK53T8Q/p1703982689203629, I thought we would also show this on PROD.
Did we decide to show the TestToolMenu only on non-prod env? This isn't necessary for now but just wanted to confirm. There was a problem hiding this comment. Good point, I left the logic for displaying |
||
| {!isProduction && ( | ||
| <View style={[styles.ml5, styles.mr8, styles.mt6]}> | ||
| <TestToolMenu /> | ||
| </View> | ||
| )} | ||
| <ConfirmModal | ||
| title={translate('common.areYouSure')} | ||
| isVisible={isConfirmationModalVisible} | ||
| onConfirm={() => { | ||
| setIsConfirmationModalVisible(false); | ||
| Onyx.clear(keysToPreserve).then(() => { | ||
| App.openApp(); | ||
| }); | ||
|
Comment on lines
+105
to
+107
There was a problem hiding this comment. @TMisiukiewicz In offline mode, the data will be cleared, but the request will fail. Consequently, the user will be left with an unusable app. Even when the user goes back online, the CleanShot.2024-02-02.at.13.45.18.mp4There was a problem hiding this comment.
I'm uncertain about the appropriate course of action in such situations. Should we create a backup of the old data and restore it, or simply log out the user? I will ask about this case in the linked issue. There was a problem hiding this comment. cc @techievivek Would love to get your opinions on this scenario. There was a problem hiding this comment. @fedirjh I was testing it and i think requests are stored in a queue. As you can see, when I brought back the internet connection, the Screen.Recording.2024-02-02.at.14.29.52.movThere was a problem hiding this comment.
Ah Interesting. My previous test was with the Chrome devtools where the request is marked as failed. But with disabling the network, I got the same results as you. There was a problem hiding this comment. I think we are good to close this thread for the scope of this PR since we have agreed to enable the feature only for online users. |
||
| }} | ||
| onCancel={() => setIsConfirmationModalVisible(false)} | ||
| prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')} | ||
| confirmText={translate('initialSettingsPage.troubleshoot.resetAndRefresh')} | ||
| cancelText={translate('common.cancel')} | ||
| /> | ||
| </IllustratedHeaderPageLayout> | ||
| ); | ||
| } | ||
|
|
||
| TroubleshootPage.displayName = 'TroubleshootPage'; | ||
|
|
||
| export default TroubleshootPage; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@TMisiukiewicz Hey, just wondering if there was any specific reason not to include
ONYXKEYS.USERhere? We're considering adding it in #49087, but wanted to check first if there are any good arguments against doing so.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jjcoffee some time passed so I don't remember the exact context, but I think adding
ONYXKEYS.USERshould be fine here