Merge pull request Expensify#68741 from dukenv0307/fix/67944

Background is changed when reloading keyboard shortcut modal

Author: techievivek

src/ROUTES.ts

@@ -387,7 +387,10 @@ const ROUTES = {
 
     SETTINGS_SAVE_THE_WORLD: 'settings/teachersunite',
 
-    KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
+    KEYBOARD_SHORTCUTS: {
+        route: 'keyboard-shortcuts',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('keyboard-shortcuts', backTo),
+    },
 
     NEW: 'new',
     NEW_CHAT: 'new/chat',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -370,10 +370,10 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         return;
                     }
 
-                    if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS)) {
+                    if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()))) {
                         return;
                     }
-                    return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS);
+                    return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()));
                 });
             },
             shortcutsOverviewShortcutConfig.descriptionKey,

src/libs/Navigation/linkingConfig/config.ts

@@ -913,7 +913,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             exact: true,
                         },
                         [SCREENS.KEYBOARD_SHORTCUTS]: {
-                            path: ROUTES.KEYBOARD_SHORTCUTS,
+                            path: ROUTES.KEYBOARD_SHORTCUTS.route,
                         },
                         [SCREENS.WORKSPACE.NAME]: ROUTES.WORKSPACE_OVERVIEW_NAME.route,
                         [SCREENS.SETTINGS.SHARE_CODE]: {

src/libs/Navigation/types.ts

@@ -933,7 +933,9 @@ type SettingsNavigatorParamList = {
         /** cardID of selected card */
         cardID: string;
     };
-    [SCREENS.KEYBOARD_SHORTCUTS]: undefined;
+    [SCREENS.KEYBOARD_SHORTCUTS]: {
+        backTo: Routes;
+    };
     [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: undefined;
     [SCREENS.SETTINGS.EXIT_SURVEY.RESPONSE]: {
         [EXIT_SURVEY_REASON_FORM_INPUT_IDS.REASON]: ValueOf<typeof CONST.EXIT_SURVEY.REASONS>;

src/pages/KeyboardShortcutsPage.tsx

@@ -1,3 +1,4 @@
+import type {RouteProp} from '@react-navigation/native';
 import React from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -8,16 +9,24 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
+import Navigation from '@libs/Navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
 
 type Shortcut = {
     displayName: string;
     descriptionKey: 'search' | 'newChat' | 'openShortcutDialog' | 'escape' | 'copy';
 };
 
-function KeyboardShortcutsPage() {
+type KeyboardShortcutsPageProps = {
+    route: RouteProp<SettingsNavigatorParamList, typeof SCREENS.KEYBOARD_SHORTCUTS>;
+};
+
+function KeyboardShortcutsPage({route}: KeyboardShortcutsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const backTo = route.params.backTo;
     const shortcuts = Object.values(CONST.KEYBOARD_SHORTCUTS)
         .map((shortcut) => {
             const platformAdjustedModifiers = KeyboardShortcut.getPlatformEquivalentForKeys(shortcut.modifiers);
@@ -46,7 +55,10 @@ function KeyboardShortcutsPage() {
             includeSafeAreaPaddingBottom={false}
             testID={KeyboardShortcutsPage.displayName}
         >
-            <HeaderWithBackButton title={translate('keyboardShortcutsPage.title')} />
+            <HeaderWithBackButton
+                title={translate('keyboardShortcutsPage.title')}
+                onBackButtonPress={() => Navigation.goBack(backTo)}
+            />
             <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <View style={[styles.ph5, styles.pv3]}>
                     <Text style={[styles.mb3, styles.webViewStyles.baseFontStyle]}>{translate('keyboardShortcutsPage.subtitle')}</Text>

src/pages/settings/AboutPage/AboutPage.tsx

@@ -65,7 +65,7 @@ function AboutPage() {
             {
                 translationKey: 'initialSettingsPage.aboutPage.viewKeyboardShortcuts',
                 icon: Expensicons.Keyboard,
-                action: waitForNavigate(() => Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS)),
+                action: waitForNavigate(() => Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()))),
             },
             {
                 translationKey: 'initialSettingsPage.aboutPage.viewTheCode',

src/setup/platformSetup/index.desktop.ts

@@ -18,7 +18,7 @@ export default function () {
 
     // Trigger action to show keyboard shortcuts
     window.electron.on(ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, () => {
-        Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS);
+        Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()));
     });
 
     // Start current date updater