fix: move "Troubleshoot" out of About

src/components/Icon/Illustrations.ts

@@ -55,6 +55,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';
@@ -172,4 +173,5 @@ export {
     Pencil,
     Tag,
     CarIce,
+    Lightbulb,
 };

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({
                     )}
                 </View>
 
-                {!!subtitle && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt2, subtitleStyles]}>
-                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
-                    </View>
-                )}
+                {renderSubtitle
+                    ? renderSubtitle?.()
+                    : !!subtitle && (
+                          <View
+                              style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt2, subtitleStyles]}
+                          >
+                              <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
+                          </View>
+                      )}
 
                 <View style={[styles.w100, childrenStyles]}>{children}</View>
 

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';
@@ -32,20 +33,21 @@ 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 (
         <>
             <Text
                 style={[styles.textLabelSupporting, styles.mb4]}
                 numberOfLines={1}
             >
-                Test Preferences
+                {translate('initialSettingsPage.troubleshoot.testingPreferences')}
             </Text>
             {/* 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 && (
-                <TestToolRow title="Use Staging Server">
+                <TestToolRow title={translate('initialSettingsPage.troubleshoot.useStagingServer')}>
                     <Switch
                         accessibilityLabel="Use Staging Server"
                         isOn={shouldUseStagingServer}
@@ -55,7 +57,7 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
             )}
 
             {/* When toggled the app will be forced offline. */}
-            <TestToolRow title="Force offline">
+            <TestToolRow title={translate('initialSettingsPage.troubleshoot.forceOffline')}>
                 <Switch
                     accessibilityLabel="Force offline"
                     isOn={!!network?.shouldForceOffline}
@@ -64,7 +66,7 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
             </TestToolRow>
 
             {/* When toggled all network requests will fail. */}
-            <TestToolRow title="Simulate failing network requests">
+            <TestToolRow title={translate('initialSettingsPage.troubleshoot.simulatFailingNetworkRequests')}>
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
                     isOn={!!network?.shouldFailAllRequests}
@@ -73,19 +75,19 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
             </TestToolRow>
 
             {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
-            <TestToolRow title="Authentication status">
+            <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
                 <Button
                     small
-                    text="Invalidate"
+                    text={translate('initialSettingsPage.troubleshoot.invalidate')}
                     onPress={() => Session.invalidateAuthToken()}
                 />
             </TestToolRow>
 
             {/* Invalidate stored user auto-generated credentials. Useful for manually testing sign out logic. */}
-            <TestToolRow title="Device credentials">
+            <TestToolRow title={translate('initialSettingsPage.troubleshoot.deviceCredentials')}>
                 <Button
                     small
-                    text="Destroy"
+                    text={translate('initialSettingsPage.troubleshoot.destroy')}
                     onPress={() => Session.invalidateCredentials()}
                 />
             </TestToolRow>

src/languages/en.ts

@@ -896,6 +896,14 @@ export default {
             useProfiling: 'Use profiling',
             profileTrace: 'Profile trace',
             releaseOptions: 'Release options',
+            testingPreferences: 'Testing preferences',
+            useStagingServer: 'Use Staging Server',
+            forceOffline: 'Force offline',
+            simulatFailingNetworkRequests: 'Simulate failing network requests',
+            authenticationStatus: 'Authentication status',
+            deviceCredentials: 'Device credentials',
+            invalidate: 'Invalidate',
+            destroy: 'Destroy',
         },
         debugConsole: {
             saveLog: 'Save log',

src/languages/es.ts

@@ -889,11 +889,19 @@ export default {
             submitBug: 'envíe un error',
             confirmResetDescription: 'Todos los borradores no enviados se perderán, pero el resto de tus datos estarán a salvo.',
             resetAndRefresh: 'Restablecer y actualizar',
-            clientSideLogging: 'Logs del cliente',
+            clientSideLogging: 'Registro a nivel cliente',
             noLogsToShare: 'No hay logs que compartir',
             useProfiling: 'Usar el trazado',
             profileTrace: 'Traza de ejecución',
             releaseOptions: 'Opciones de publicación',
+            testingPreferences: 'Preferencias para Tests',
+            useStagingServer: 'Usar Servidor “Staging”',
+            forceOffline: 'Forzar desconexión',
+            simulatFailingNetworkRequests: 'Simular fallos en solicitudes de red',
+            authenticationStatus: 'Estado de autenticación',
+            deviceCredentials: 'Credenciales del dispositivo',
+            invalidate: 'Invalidar',
+            destroy: 'Destruir',
         },
         debugConsole: {
             saveLog: 'Guardar registro',

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

@@ -202,7 +202,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PREFERENCES.THEME]: () => 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,

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,
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType,
 } satisfies Screens;
 

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -35,7 +35,8 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         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;

src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts

@@ -10,6 +10,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
         SCREENS.SETTINGS.WALLET.ROOT,
         SCREENS.SETTINGS.ABOUT,
         SCREENS.SETTINGS.WORKSPACES,
+        SCREENS.SETTINGS.TROUBLESHOOT,
     ],
 };
 

src/libs/Navigation/linkingConfig/config.ts

@@ -60,6 +60,10 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                     path: ROUTES.SETTINGS_ABOUT,
                     exact: true,
                 },
+                [SCREENS.SETTINGS.TROUBLESHOOT]: {
+                    path: ROUTES.SETTINGS_TROUBLESHOOT,
+                    exact: true,
+                },
                 [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES,
                 [SCREENS.SETTINGS.SAVE_THE_WORLD]: ROUTES.SETTINGS_SAVE_THE_WORLD,
             },
@@ -203,10 +207,6 @@ const config: LinkingOptions<RootStackParamList>['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,

src/libs/Navigation/types.ts

@@ -59,6 +59,7 @@ type CentralPaneNavigatorParamList = {
     [SCREENS.SETTINGS.SECURITY]: undefined;
     [SCREENS.SETTINGS.WALLET.ROOT]: undefined;
     [SCREENS.SETTINGS.ABOUT]: undefined;
+    [SCREENS.SETTINGS.TROUBLESHOOT]: undefined;
     [SCREENS.SETTINGS.WORKSPACES]: undefined;
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined;
 };
@@ -104,6 +105,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;

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,