diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 4ddca3c3b391..d18bf59ab222 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -120,6 +120,10 @@ const DYNAMIC_ROUTES = { getRoute: (country = '') => `country?country=${country}`, queryParams: ['country'], }, + KEYBOARD_SHORTCUTS: { + path: 'keyboard-shortcuts', + entryScreens: ['*'], + }, DETAILS_CONSTANT_PICKER: { path: 'constant-picker', entryScreens: [SCREENS.DEBUG.REPORT, SCREENS.DEBUG.REPORT_ACTION, SCREENS.DEBUG.TRANSACTION, SCREENS.DEBUG.TRANSACTION_VIOLATION], @@ -688,13 +692,6 @@ const ROUTES = { SETTINGS_SAVE_THE_WORLD: 'settings/teachersunite', - KEYBOARD_SHORTCUTS: { - route: 'keyboard-shortcuts', - - // eslint-disable-next-line no-restricted-syntax -- Legacy route generation - getRoute: (backTo?: string) => getUrlWithBackToParam('keyboard-shortcuts', backTo), - }, - NEW: 'new', NEW_CHAT: 'new/chat', NEW_CHAT_CONFIRM: 'new/chat/confirm', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index a16d81bffb02..60d6b0695f38 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -121,6 +121,7 @@ const SCREENS = { HELP: 'Settings_Help', DYNAMIC_VERIFY_ACCOUNT: 'Dynamic_Verify_Account', DYNAMIC_ADD_BANK_ACCOUNT_VERIFY_ACCOUNT: 'Dynamic_Add_Bank_Account_Verify_Account', + DYNAMIC_KEYBOARD_SHORTCUTS: 'Dynamic_Keyboard_Shortcuts', PROFILE: { ROOT: 'Settings_Profile', @@ -910,7 +911,6 @@ const SCREENS = { REFERRAL_DETAILS: 'Referral_Details', REPORT_VERIFY_ACCOUNT: 'Report_Verify_Account', EXPENSE_REPORT_VERIFY_ACCOUNT: 'Expense_Report_Verify_Account', - KEYBOARD_SHORTCUTS: 'KeyboardShortcuts', SHARE: { ROOT: 'Share_Root', SHARE_DETAILS: 'Share_Details', diff --git a/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ShortcutsOverviewHandler.tsx b/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ShortcutsOverviewHandler.tsx index ca67c783c73f..bcabe83d8710 100644 --- a/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ShortcutsOverviewHandler.tsx +++ b/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ShortcutsOverviewHandler.tsx @@ -1,10 +1,14 @@ import {useEffect} from 'react'; import useShouldShowRequire2FAPage from '@hooks/useShouldShowRequire2FAPage'; import KeyboardShortcut from '@libs/KeyboardShortcut'; +import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; +import findMatchingDynamicSuffix from '@libs/Navigation/helpers/dynamicRoutesUtils/findMatchingDynamicSuffix'; import Navigation from '@libs/Navigation/Navigation'; import * as Modal from '@userActions/Modal'; import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; + +const KEYBOARD_SHORTCUTS_PATH = DYNAMIC_ROUTES.KEYBOARD_SHORTCUTS.path; function ShortcutsOverviewHandler() { const shouldShowRequire2FAPage = useShouldShowRequire2FAPage(); @@ -19,10 +23,11 @@ function ShortcutsOverviewHandler() { return; } - if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()))) { + const activeRoute = Navigation.getActiveRoute(); + if (findMatchingDynamicSuffix(activeRoute) === KEYBOARD_SHORTCUTS_PATH) { return; } - return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute())); + return Navigation.navigate(createDynamicRoute(KEYBOARD_SHORTCUTS_PATH)); }); }, shortcutConfig.descriptionKey, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index f18ce8a6f3f3..d81ddd9d9cfb 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -633,7 +633,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/ReimbursementAccount/EnterSignerInfo').default, [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: () => require('../../../../pages/settings/Wallet/ReportCardLostPage').default, [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED_CONFIRM_MAGIC_CODE]: () => require('../../../../pages/settings/Wallet/ReportCardLostConfirmMagicCodePage').default, - [SCREENS.KEYBOARD_SHORTCUTS]: () => require('../../../../pages/KeyboardShortcutsPage').default, + [SCREENS.SETTINGS.DYNAMIC_KEYBOARD_SHORTCUTS]: () => require('../../../../pages/settings/DynamicKeyboardShortcutsPage').default, [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: () => require('../../../../pages/settings/ExitSurvey/ExitSurveyReasonPage').default, [SCREENS.SETTINGS.EXIT_SURVEY.CONFIRM]: () => require('../../../../pages/settings/ExitSurvey/ExitSurveyConfirmPage').default, [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_IMPORT]: () => require('../../../../pages/workspace/accounting/qbo/import/QuickbooksImportPage').default, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 4308034d8dbc..cb9385fc6756 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -1177,9 +1177,7 @@ const config: LinkingOptions['config'] = { exact: true, }, [SCREENS.REIMBURSEMENT_ACCOUNT_ENTER_SIGNER_INFO]: ROUTES.BANK_ACCOUNT_ENTER_SIGNER_INFO.route, - [SCREENS.KEYBOARD_SHORTCUTS]: { - path: ROUTES.KEYBOARD_SHORTCUTS.route, - }, + [SCREENS.SETTINGS.DYNAMIC_KEYBOARD_SHORTCUTS]: DYNAMIC_ROUTES.KEYBOARD_SHORTCUTS.path, [SCREENS.WORKSPACE.NAME]: ROUTES.WORKSPACE_OVERVIEW_NAME.route, [SCREENS.SETTINGS.SHARE_CODE]: { path: ROUTES.SETTINGS_SHARE_CODE, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 05abef226318..74c5a28c7d67 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1194,10 +1194,7 @@ type SettingsNavigatorParamList = { /** Reason for replacing the card */ reason: ReplacementReason; }; - [SCREENS.KEYBOARD_SHORTCUTS]: { - // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md - backTo: Routes; - }; + [SCREENS.SETTINGS.DYNAMIC_KEYBOARD_SHORTCUTS]: undefined; [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: { // eslint-disable-next-line no-restricted-syntax -- `backTo` usages in this file are legacy. Do not add new `backTo` params to screens. See contributingGuides/NAVIGATION.md backTo: Routes; diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index b1ccdff8aa27..4ec1c91a7029 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -20,6 +20,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import {isInternalTestBuild} from '@libs/Environment/Environment'; +import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute'; import Navigation from '@libs/Navigation/Navigation'; import {showContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu'; import colors from '@styles/theme/colors'; @@ -28,7 +29,7 @@ import {navigateToConciergeChat} from '@userActions/Report'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; +import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES'; import type IconAsset from '@src/types/utils/IconAsset'; import type WithSentryLabel from '@src/types/utils/SentryLabel'; import pkg from '../../../../package.json'; @@ -82,7 +83,7 @@ function AboutPage() { translationKey: 'initialSettingsPage.aboutPage.viewKeyboardShortcuts', icon: icons.Keyboard, sentryLabel: CONST.SENTRY_LABEL.SETTINGS_ABOUT.VIEW_KEYBOARD_SHORTCUTS, - action: waitForNavigate(() => Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS.getRoute(Navigation.getActiveRoute()))), + action: waitForNavigate(() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.KEYBOARD_SHORTCUTS.path))), }, { translationKey: 'initialSettingsPage.aboutPage.viewTheCode', diff --git a/src/pages/KeyboardShortcutsPage.tsx b/src/pages/settings/DynamicKeyboardShortcutsPage.tsx similarity index 78% rename from src/pages/KeyboardShortcutsPage.tsx rename to src/pages/settings/DynamicKeyboardShortcutsPage.tsx index 2048e1fc8764..267ba29154a1 100644 --- a/src/pages/KeyboardShortcutsPage.tsx +++ b/src/pages/settings/DynamicKeyboardShortcutsPage.tsx @@ -1,4 +1,3 @@ -import type {RouteProp} from '@react-navigation/native'; import React from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -6,27 +5,24 @@ import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; +import useDynamicBackPath from '@hooks/useDynamicBackPath'; 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'; +import {DYNAMIC_ROUTES} from '@src/ROUTES'; type Shortcut = { displayName: string; descriptionKey: 'search' | 'newChat' | 'openShortcutDialog' | 'escape' | 'copy'; }; -type KeyboardShortcutsPageProps = { - route: RouteProp; -}; - -function KeyboardShortcutsPage({route}: KeyboardShortcutsPageProps) { +function DynamicKeyboardShortcutsPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const backTo = route.params.backTo; + const backPath = useDynamicBackPath(DYNAMIC_ROUTES.KEYBOARD_SHORTCUTS.path); + const shortcuts = Object.values(CONST.KEYBOARD_SHORTCUTS) .map((shortcut) => { const platformAdjustedModifiers = KeyboardShortcut.getPlatformEquivalentForKeys(shortcut.modifiers); @@ -36,10 +32,7 @@ function KeyboardShortcutsPage({route}: KeyboardShortcutsPageProps) { }; }) .filter((shortcut): shortcut is Shortcut => !!shortcut.descriptionKey); - /** - * Render the information of a single shortcut - * @param shortcut - The shortcut to render - */ + const renderShortcut = (shortcut: Shortcut) => ( Navigation.goBack(backTo)} + onBackButtonPress={() => Navigation.goBack(backPath)} /> @@ -69,4 +62,4 @@ function KeyboardShortcutsPage({route}: KeyboardShortcutsPageProps) { ); } -export default KeyboardShortcutsPage; +export default DynamicKeyboardShortcutsPage; diff --git a/tests/navigation/findMatchingDynamicSuffixTests.ts b/tests/navigation/findMatchingDynamicSuffixTests.ts index 6baaaf187d4c..6f1a76f942a9 100644 --- a/tests/navigation/findMatchingDynamicSuffixTests.ts +++ b/tests/navigation/findMatchingDynamicSuffixTests.ts @@ -36,4 +36,8 @@ describe('findMatchingDynamicSuffix', () => { it('should match a suffix when path has suffix-specific query params', () => { expect(findMatchingDynamicSuffix('settings/profile/address/country?country=US')).toBe('country'); }); + + it('should match keyboard-shortcuts dynamic suffix', () => { + expect(findMatchingDynamicSuffix('settings/about/keyboard-shortcuts')).toBe('keyboard-shortcuts'); + }); });