Make keyboard shortcuts modal discoverable in UI

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem

We recently added a modal to display all the available keyboard shortcuts. However, currently it's only discoverable via the keyboard shortcut that opens it.

Why this is important

Keyboard shortcuts are convenient, fun, and supercharge the usability of our app. However, regular users currently have no way to discover those keyboard shortcuts.

Solution

1. Add a new list item in Settings -> About to open the keyboard shortcuts modal.
2. (desktop) add View keyboard shortcuts to the application menu.

Platform:

• Web
• Desktop App

[roryabraham]

HOLD on https://github.com/Expensify/Expensify/issues/187957

[roryabraham]

The changes we'll need are the following (as outlined in this comment):

1. Add a menu item in /settings/about saying Keyboard Shortcuts that opens this modal.
   • Note: This is currently on hold because we need a keyboard icon from our design team. Issue for the icon is here.
2. Add a new desktop application menu item saying View Keyboard Shortcuts, which also opens the modal.

However, we'll also want to move the KeyboardShortcutsModal from ScreenWrapper to Expensify, so that there's one global keyboard shortcuts modal that can be opened from anywhere. Putting it in ScreenWrapper was a mistake because now we have a duplicate modal many times in the DOM for every component that uses a ScreenWrapper. In essence, the KeyboardShortcutsModal will be used much like the UpdateAppModal.

[parasharrajat]

KeyboardShortcutsModal from ScreenWrapper to Expensify,

Good Catch.

[akshayasalvi]

@roryabraham

1. We'll move the KeyboardShortcutsModal.isOpen to Onyx.IS_SHORTCUTS_MODAL_OPEN and update the relevant functions to hide and show the visibility

2. We then create KeyboardShortcuts in libs/action to update the Onyx keys

3. We'll add row in AboutPage to add the shortcuts menu, with the relevant update calls

4. Add the menu in desktop/main.js

const keyboardShortcutsMenu = new MenuItem({
    label: 'View Keyboard Shortcuts',
    enabled: true,
    click: showKeyboardShortcutsModal,
});

and

appMenu.submenu.insert(2, keyboardShortcutsMenu);

5. Move the modal to Expensify as mentioned above.

[roryabraham]

Okay @akshayasalvi, just for clarity sake are you volunteering to do this as part of the scope for #5588, or do you think that this should be treated as a separate job?

[akshayasalvi]

I’ll do it as a part of the scope from the previous work.

[roryabraham]

Great, thanks! Feel free to submit a pull request whenever you're ready, and then before we merge it we'll just make sure to get the correct keyboard icon that our design team is making in the settings menu list item.

[roryabraham]

@akshayasalvi Here's the keyboard icon, this is off hold now.

keyboard.svg.zip

[MelvinBot]

📣 @akshayasalvi You have been assigned to this job by @roryabraham!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖