[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$500] Display keyboard shortcuts menu in the RHP

[stephanieelliott]

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

---

Action Performed:

Click CMD + J to open the keyboard shortcuts menu

Expected Result:

The keyboard shortcuts menu opens in the RHP

Actual Result:

The keyboard shortcuts menu opens as a modal in the middle of the browser window like this:

Workaround:

n/a

Platforms:

• Web
• Desktop App

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018fa7bda44a6beb13
• Upwork Job ID: 1704930075112583168
• Last Price Increase: 2023-09-21
• Automatic offers:
• samh-nl | Contributor | 26988957

[melvin-bot]

Triggered auto assignment to @kadiealexander (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[stephanieelliott]

Tagging in @shawnborton for mockup of what the shortcut menu should look like in the RHP

[samh-nl]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Display keyboard shortcuts menu in the RHP

What is the root cause of that problem?

The keyboard shortcuts modal uses a deviating implementation compared to other pages.

What changes do you think we should make in order to solve the problem?

1. Remove <KeyboardShortcutsModal /> from Expensify.js
2. In main.js, rename showKeyboardShortcutsModal to showKeyboardShortcutsPage
3. In main.js, rename ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL to SHOW_KEYBOARD_SHORTCUTS_PAGE
4. Make a new page component KeyboardShortcutsPage and add it to both ModalStackNavigators and RightModalNavigator
5. In AuthScreens, listen to the keyboard shortcut and navigate to the page when triggered, in a similar fashion to how we do so for the search page. We should define a new route, e.g. ROUTES.KEYBOARD_SHORTCUTS.

App/src/libs/Navigation/AppNavigator/AuthScreens.js

Lines 167 to 180 in 95c9e47

	this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
	searchShortcutConfig.shortcutKey,
	() => {
	Modal.close(() => {
	if (Navigation.isActiveRoute(ROUTES.SEARCH)) {
	return;
	}
	return Navigation.navigate(ROUTES.SEARCH);
	});
	},
	searchShortcutConfig.descriptionKey,
	searchShortcutConfig.modifiers,
	true,
	);

6. Similar to the current modal, we fetch the shortcuts from KeyboardShortcut.getDocumentedShortcuts() upon mount and set this to state. Subsequently, we iterate and render the shortcuts. E.g.:

const renderShortcut = (shortcut) => (
    <View key={shortcut.displayName} style={styles.mb5}>
        <View style={styles.mb1}>
            <Text>{shortcut.displayName}</Text>
        </View>
        <View>
            <Text style={styles.textLabelSupporting}>{translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)}</Text>
        </View>
    </View>
);

7. Finally, we cleanup various things that are no longer relevant, including:

• StyleUtils.getKeyboardShortcutsModalWidth
• Style definitions: styles.keyboardShortcutModalContainer, styles.keyboardShortcutTableWrapper, styles.keyboardShortcutTableContainer
• ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN
• The file KeyboardShortcuts.js in libs/actions/

What alternative solutions did you explore? (Optional)

Alternatively, we can implement it as a right-docked modal. However, this does not inherently add a backdrop (<Overlay />). This could be added, but extra logic would have to be put in place to ensure it does not cause a double backdrop in the case that the RHP was already open.

1. In KeyboardShortcutsModal, we change modalType to CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED.
2. Remove the isSmallScreenWidth prop
3. Remove the innerContainerStyle prop that is passed to the Modal component
4. To render the left-arrow rather than close button, remove shouldShowCloseButton and shouldShowBackButton={false} from HeaderWithBackButton. Furthermore, replace onCloseButtonPress with onBackButtonPress.
5. Remove the <View style={[styles.keyboardShortcutTableWrapper]}> wrapper.
6. Remove the styles (i.e. styles.keyboardShortcutTableContainer) applied to the inner View component.
7. Update renderRow (same as step 6 above).
8. In styles.js/StyleUtils, cleanup the removed styles.