Merge pull request Expensify#29063 from samh-nl/feat/issue-27449

feat: keyboard shortcuts page
software-mansion-labs · Oct 11, 2023 · 72a11ca · 72a11ca
2 parents 8cb0b6d + 2eb5cfa
commit 72a11ca
Show file tree

Hide file tree

Showing 19 changed files with 105 additions and 270 deletions.
diff --git a/desktop/ELECTRON_EVENTS.js b/desktop/ELECTRON_EVENTS.js
@@ -6,7 +6,7 @@ const ELECTRON_EVENTS = {
     REQUEST_FOCUS_APP: 'requestFocusApp',
     REQUEST_UPDATE_BADGE_COUNT: 'requestUpdateBadgeCount',
     REQUEST_VISIBILITY: 'requestVisibility',
-    SHOW_KEYBOARD_SHORTCUTS_MODAL: 'show-keyboard-shortcuts-modal',
+    KEYBOARD_SHORTCUTS_PAGE: 'keyboard-shortcuts-page',
     START_UPDATE: 'start-update',
     UPDATE_DOWNLOADED: 'update-downloaded',
 };

diff --git a/desktop/contextBridge.js b/desktop/contextBridge.js
@@ -11,7 +11,7 @@ const WHITELIST_CHANNELS_RENDERER_TO_MAIN = [
     ELECTRON_EVENTS.LOCALE_UPDATED,
 ];
 
-const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR];
+const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR];
 
 const getErrorMessage = (channel) => `Electron context bridge cannot be used with channel '${channel}'`;
 

diff --git a/desktop/main.js b/desktop/main.js
@@ -174,11 +174,11 @@ const manuallyCheckForUpdates = (menuItem, browserWindow) => {
  * Trigger event to show keyboard shortcuts
  * @param {BrowserWindow} browserWindow
  */
-const showKeyboardShortcutsModal = (browserWindow) => {
+const showKeyboardShortcutsPage = (browserWindow) => {
     if (!browserWindow.isVisible()) {
         return;
     }
-    browserWindow.webContents.send(ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL);
+    browserWindow.webContents.send(ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE);
 };
 
 // Actual auto-update listeners
@@ -330,9 +330,9 @@ const mainWindow = () => {
                             {
                                 id: 'viewShortcuts',
                                 label: Localize.translate(preferredLocale, `desktopApplicationMenu.viewShortcuts`),
-                                accelerator: 'CmdOrCtrl+I',
+                                accelerator: 'CmdOrCtrl+J',
                                 click: () => {
-                                    showKeyboardShortcutsModal(browserWindow);
+                                    showKeyboardShortcutsPage(browserWindow);
                                 },
                             },
                             {type: 'separator'},

diff --git a/src/CONST.ts b/src/CONST.ts
@@ -304,7 +304,7 @@ const CONST = {
             },
             type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
-        SHORTCUT_MODAL: {
+        SHORTCUTS: {
             descriptionKey: 'openShortcutDialog',
             shortcutKey: 'J',
             modifiers: ['CTRL'],

diff --git a/src/Expensify.js b/src/Expensify.js
@@ -26,7 +26,6 @@ import Navigation from './libs/Navigation/Navigation';
 import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
 import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
 import SplashScreenHider from './components/SplashScreenHider';
-import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
@@ -194,7 +193,6 @@ function Expensify(props) {
         <DeeplinkWrapper isAuthenticated={isAuthenticated}>
             {shouldInit && (
                 <>
-                    <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -169,9 +169,6 @@ const ONYXKEYS = {
     /** Is report data loading? */
     IS_LOADING_APP: 'isLoadingApp',
 
-    /** Is Keyboard shortcuts modal open? */
-    IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen',
-
     /** Is the test tools modal open? */
     IS_TEST_TOOLS_MODAL_OPEN: 'isTestToolsModalOpen',
 
@@ -353,7 +350,6 @@ type OnyxValues = {
     [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string;
     [ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: boolean;
     [ONYXKEYS.IS_LOADING_REPORT_DATA]: boolean;
-    [ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN]: boolean;
     [ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN]: boolean;
     [ONYXKEYS.WALLET_TRANSFER]: OnyxTypes.WalletTransfer;
     [ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID]: string;

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -112,6 +112,8 @@ export default {
     SETTINGS_STATUS: 'settings/profile/status',
     SETTINGS_STATUS_SET: 'settings/profile/status/set',
 
+    KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
+
     NEW: 'new',
     NEW_CHAT: 'new/chat',
     NEW_ROOM: 'new/room',

diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1593,7 +1593,7 @@ export default {
     statementPage: {
         generatingPDF: "We're generating your PDF right now. Please come back later!",
     },
-    keyboardShortcutModal: {
+    keyboardShortcutsPage: {
         title: 'Keyboard shortcuts',
         subtitle: 'Save time with these handy keyboard shortcuts:',
         shortcuts: {

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1617,7 +1617,7 @@ export default {
     statementPage: {
         generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!',
     },
-    keyboardShortcutModal: {
+    keyboardShortcutsPage: {
         title: 'Atajos de teclado',
         subtitle: 'Ahorra tiempo con estos atajos de teclado:',
         shortcuts: {

diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
@@ -164,7 +164,9 @@ function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOn
  */
 const KeyboardShortcut = {
     subscribe,
+    getDisplayName,
     getDocumentedShortcuts,
+    getPlatformEquivalentForKeys,
 };
 
 export default KeyboardShortcut;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -176,12 +176,25 @@ class AuthScreens extends React.Component {
         Download.clearDownloads();
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
 
+        const shortcutsOverviewShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUTS;
         const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH;
         const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT;
 
-        // Listen for the key K being pressed so that focus can be given to
-        // the chat switcher, or new group chat
-        // based on the key modifiers pressed and the operating system
+        // Listen to keyboard shortcuts for opening certain pages
+        this.unsubscribeShortcutsOverviewShortcut = KeyboardShortcut.subscribe(
+            shortcutsOverviewShortcutConfig.shortcutKey,
+            () => {
+                Modal.close(() => {
+                    if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS)) {
+                        return;
+                    }
+                    return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS);
+                });
+            },
+            shortcutsOverviewShortcutConfig.descriptionKey,
+            shortcutsOverviewShortcutConfig.modifiers,
+            true,
+        );
         this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
             searchShortcutConfig.shortcutKey,
             () => {
@@ -217,6 +230,9 @@ class AuthScreens extends React.Component {
     }
 
     componentWillUnmount() {
+        if (this.unsubscribeShortcutsOverviewShortcut) {
+            this.unsubscribeShortcutsOverviewShortcut();
+        }
         if (this.unsubscribeSearchShortcut) {
             this.unsubscribeSearchShortcut();
         }

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -166,6 +166,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({
     ReimbursementAccount: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default,
     GetAssistance: () => require('../../../pages/GetAssistancePage').default,
     Settings_TwoFactorAuth: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default,
+    KeyboardShortcuts: () => require('../../../pages/KeyboardShortcutsPage').default,
 });
 
 const EnablePaymentsStackNavigator = createModalStackNavigator({

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
@@ -222,6 +222,9 @@ export default {
                             GetAssistance: {
                                 path: ROUTES.GET_ASSISTANCE.route,
                             },
+                            KeyboardShortcuts: {
+                                path: ROUTES.KEYBOARD_SHORTCUTS,
+                            },
                         },
                     },
                     Private_Notes: {