Merge pull request Expensify#92064 from Expensify/ionatan_addkeyboardshortcuts

iwiznia · web-flow · commit 718d98e8b3ec · 2026-06-05T11:46:26.000+02:00
[Payment due @truph01] Add keyboard shortcuts for searching expense reports and for jumping to a report's policy
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -1204,6 +1204,28 @@ const CONST = {
                 DEFAULT: {input: keyInputSpace},
             },
         },
+        EXPENSE_REPORT_SEARCH: {
+            descriptionKey: 'expenseReportSearch',
+            shortcutKey: 'U',
+            modifiers: ['CTRL'],
+            trigger: {
+                DEFAULT: {input: 'u', modifierFlags: keyModifierControl},
+                [PLATFORM_OS_MACOS]: {input: 'u', modifierFlags: keyModifierCommand},
+                [PLATFORM_IOS]: {input: 'u', modifierFlags: keyModifierCommand},
+            },
+            type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
+        },
+        GO_TO_WORKSPACE: {
+            descriptionKey: 'goToWorkspace',
+            shortcutKey: 'B',
+            modifiers: ['CTRL'],
+            trigger: {
+                DEFAULT: {input: 'b', modifierFlags: keyModifierControl},
+                [PLATFORM_OS_MACOS]: {input: 'b', modifierFlags: keyModifierCommand},
+                [PLATFORM_IOS]: {input: 'b', modifierFlags: keyModifierCommand},
+            },
+            type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
+        },
     },
     KEYBOARD_SHORTCUTS_TYPES: {
         NAVIGATION_SHORTCUT: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -48,6 +48,7 @@ import type Report from '@src/types/onyx/Report';
 import type {SubstitutionMap} from './getQueryWithSubstitutions';
 import {getQueryWithSubstitutions} from './getQueryWithSubstitutions';
 import {getUpdatedSubstitutionsMap} from './getUpdatedSubstitutionsMap';
+import {clearPendingRouterQuery, peekPendingRouterQuery} from './SearchRouterContext';
 import {getContextualReportData, getContextualSearchAutocompleteKey, getContextualSearchQuery} from './SearchRouterUtils';
 import updateAutocompleteSubstitutionsForSelection from './updateAutocompleteSubstitutionsForSelection';
 import useAskConcierge from './useAskConcierge';
@@ -77,11 +78,17 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'ConciergeAvatar']);
     const {askConcierge, shouldShowAskConcierge} = useAskConcierge();
 
+    const initialQuery = peekPendingRouterQuery();
+
     // The actual input text that the user sees
-    const [textInputValue, , setTextInputValue] = useDebouncedState('', 500);
+    const [textInputValue, , setTextInputValue] = useDebouncedState(initialQuery, 500);
     // The input text that was last used for autocomplete; needed for the SearchAutocompleteList when browsing list via arrow keys
-    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(textInputValue);
-    const [selection, setSelection] = useState({start: textInputValue.length, end: textInputValue.length});
+    const [autocompleteQueryValue, setAutocompleteQueryValue] = useState(initialQuery);
+    const [selection, setSelection] = useState({start: initialQuery.length, end: initialQuery.length});
+
+    useEffect(() => {
+        clearPendingRouterQuery();
+    }, []);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
     const textInputRef = useRef<AnimatedTextInputRef>(null);
 
diff --git a/src/components/Search/SearchRouter/SearchRouterContext.tsx b/src/components/Search/SearchRouter/SearchRouterContext.tsx
@@ -10,12 +10,26 @@ import SCREENS from '@src/SCREENS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {closeSearch, openSearch} from './toggleSearch';
 
+// Module-level pending query used to seed the SearchRouter input on open.
+// Set before opening, peeked during SearchRouter render, cleared on mount.
+let pendingRouterQuery = '';
+
+function peekPendingRouterQuery(): string {
+    return pendingRouterQuery;
+}
+
+function clearPendingRouterQuery() {
+    pendingRouterQuery = '';
+}
+
+export {peekPendingRouterQuery, clearPendingRouterQuery};
+
 type SearchRouterStateContextType = {
     isSearchRouterDisplayed: boolean;
 };
 
 type SearchRouterActionsContextType = {
-    openSearchRouter: () => void;
+    openSearchRouter: (query?: string) => void;
     closeSearchRouter: () => void;
     toggleSearch: () => void;
     registerSearchPageInput: (ref: AnimatedTextInputRef) => void;
@@ -81,7 +95,8 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
         });
     };
 
-    const openSearchRouter = () => {
+    const openSearchRouter = (query?: string) => {
+        pendingRouterQuery = query ?? '';
         if (isBrowserWithHistory) {
             window.history.pushState({isSearchModalOpen: true} satisfies HistoryState, '');
         }
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -8018,6 +8018,8 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
             newChat: 'Neuer Chat-Bildschirm',
             copy: 'Kommentar kopieren',
             openDebug: 'Testeinstellungen öffnen',
+            expenseReportSearch: 'Spesenberichte suchen',
+            goToWorkspace: 'Zum Workspace des aktuellen Berichts gehen',
         },
     },
     guides: {
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -8058,6 +8058,8 @@ const translations = {
             newChat: 'New chat screen',
             copy: 'Copy comment',
             openDebug: 'Open testing preferences dialog',
+            expenseReportSearch: 'Search expense reports',
+            goToWorkspace: "Go to the current report's workspace",
         },
     },
     guides: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -7814,6 +7814,8 @@ ${amount} para ${merchant} - ${date}`,
             newChat: 'Nueva pantalla de chat',
             copy: 'Copiar comentario',
             openDebug: 'Abrir el diálogo de preferencias de pruebas',
+            expenseReportSearch: 'Buscar informes de gastos',
+            goToWorkspace: 'Ir al espacio de trabajo del informe actual',
         },
     },
     guides: {
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -8053,6 +8053,8 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
             newChat: 'Nouvel écran de discussion',
             copy: 'Copier le commentaire',
             openDebug: 'Ouvrir la boîte de dialogue des préférences de test',
+            expenseReportSearch: 'Rechercher des notes de frais',
+            goToWorkspace: "Aller à l'espace de travail de la note de frais actuelle",
         },
     },
     guides: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -8008,6 +8008,8 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
             newChat: 'Nuova schermata chat',
             copy: 'Copia commento',
             openDebug: 'Apri la finestra delle preferenze di test',
+            expenseReportSearch: 'Cerca i report spese',
+            goToWorkspace: 'Vai allo spazio di lavoro del report corrente',
         },
     },
     guides: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -7909,6 +7909,8 @@ ${reportName}
             newChat: '新しいチャット画面',
             copy: 'コメントをコピー',
             openDebug: 'テスト設定ダイアログを開く',
+            expenseReportSearch: '経費レポートを検索',
+            goToWorkspace: '現在のレポートのワークスペースに移動',
         },
     },
     guides: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -7976,6 +7976,8 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
             newChat: 'Nieuw chatscherm',
             copy: 'Opmerking kopiëren',
             openDebug: 'Dialoogvenster testvoorkeuren openen',
+            expenseReportSearch: 'Onkostendeclaraties zoeken',
+            goToWorkspace: 'Ga naar de werkruimte van het huidige rapport',
         },
     },
     guides: {
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -7968,6 +7968,8 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
             newChat: 'Nowy ekran czatu',
             copy: 'Skopiuj komentarz',
             openDebug: 'Otwórz okno preferencji testowania',
+            expenseReportSearch: 'Szukaj raportów wydatków',
+            goToWorkspace: 'Przejdź do przestrzeni roboczej bieżącego raportu',
         },
     },
     guides: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -7970,6 +7970,8 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
             newChat: 'Nova tela de chat',
             copy: 'Copiar comentário',
             openDebug: 'Abrir caixa de diálogo de preferências de teste',
+            expenseReportSearch: 'Buscar relatórios de despesas',
+            goToWorkspace: 'Ir para o workspace do relatório atual',
         },
     },
     guides: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -7758,6 +7758,8 @@ ${reportName}
             newChat: '新聊天界面',
             copy: '复制评论',
             openDebug: '打开测试首选项对话框',
+            expenseReportSearch: '搜索报销报告',
+            goToWorkspace: '前往当前报表的工作区',
         },
     },
     guides: {
diff --git a/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ExpenseReportSearchHandler.tsx b/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/ExpenseReportSearchHandler.tsx
@@ -0,0 +1,37 @@
+import {useEffect} from 'react';
+import {useSearchRouterActions} from '@components/Search/SearchRouter/SearchRouterContext';
+import useShouldShowRequire2FAPage from '@hooks/useShouldShowRequire2FAPage';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import Navigation from '@libs/Navigation/Navigation';
+import {callFunctionIfActionIsAllowed} from '@userActions/Session';
+import CONST from '@src/CONST';
+
+function ExpenseReportSearchHandler() {
+    const {openSearchRouter} = useSearchRouterActions();
+    const shouldShowRequire2FAPage = useShouldShowRequire2FAPage();
+
+    useEffect(() => {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.EXPENSE_REPORT_SEARCH;
+        const unsubscribe = KeyboardShortcut.subscribe(
+            shortcutConfig.shortcutKey,
+            () => {
+                callFunctionIfActionIsAllowed(() => {
+                    if (Navigation.isOnboardingFlow() || shouldShowRequire2FAPage) {
+                        return;
+                    }
+                    openSearchRouter('type:expense-report report-id:');
+                })();
+            },
+            shortcutConfig.descriptionKey,
+            shortcutConfig.modifiers,
+            true,
+        );
+
+        return () => unsubscribe();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldShowRequire2FAPage]);
+
+    return null;
+}
+
+export default ExpenseReportSearchHandler;
diff --git a/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/GoToWorkspaceHandler.tsx b/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/GoToWorkspaceHandler.tsx
@@ -0,0 +1,48 @@
+import {useEffect, useRef} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import Navigation from '@libs/Navigation/Navigation';
+import {getReportOrDraftReport} from '@libs/ReportUtils';
+import {callFunctionIfActionIsAllowed} from '@userActions/Session';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+function GoToWorkspaceHandler() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const shouldUseNarrowLayoutRef = useRef(shouldUseNarrowLayout);
+
+    useEffect(() => {
+        shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
+    }, [shouldUseNarrowLayout]);
+
+    useEffect(() => {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.GO_TO_WORKSPACE;
+        const unsubscribe = KeyboardShortcut.subscribe(
+            shortcutConfig.shortcutKey,
+            callFunctionIfActionIsAllowed(() => {
+                const reportID = Navigation.getTopmostReportId();
+                if (!reportID) {
+                    return;
+                }
+
+                const report = getReportOrDraftReport(reportID);
+                const policyID = report?.policyID ?? (report?.parentReportID ? getReportOrDraftReport(report.parentReportID)?.policyID : undefined);
+                if (!policyID || policyID === CONST.POLICY.ID_FAKE) {
+                    return;
+                }
+
+                const route = shouldUseNarrowLayoutRef.current ? ROUTES.WORKSPACE_INITIAL.getRoute(policyID, Navigation.getActiveRoute()) : ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID);
+                Navigation.navigate(route);
+            }),
+            shortcutConfig.descriptionKey,
+            shortcutConfig.modifiers,
+            true,
+        );
+
+        return () => unsubscribe();
+    }, []);
+
+    return null;
+}
+
+export default GoToWorkspaceHandler;
diff --git a/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/index.tsx b/src/libs/Navigation/AppNavigator/KeyboardShortcutsHandler/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import EscapeHandler from './EscapeHandler';
+import ExpenseReportSearchHandler from './ExpenseReportSearchHandler';
+import GoToWorkspaceHandler from './GoToWorkspaceHandler';
 import MarkAllMessagesAsReadHandler from './MarkAllMessagesAsReadHandler';
 import NewChatHandler from './NewChatHandler';
 import SearchHandler from './SearchHandler';
@@ -13,6 +15,8 @@ function KeyboardShortcutsHandler() {
             <SearchHandler />
             <NewChatHandler />
             <MarkAllMessagesAsReadHandler />
+            <ExpenseReportSearchHandler />
+            <GoToWorkspaceHandler />
         </>
     );
 }
diff --git a/src/pages/settings/DynamicKeyboardShortcutsPage.tsx b/src/pages/settings/DynamicKeyboardShortcutsPage.tsx
@@ -15,7 +15,7 @@ import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
 type Shortcut = {
     displayName: string;
-    descriptionKey: 'search' | 'newChat' | 'openShortcutDialog' | 'escape' | 'copy';
+    descriptionKey: 'search' | 'newChat' | 'openShortcutDialog' | 'escape' | 'copy' | 'markAllMessagesAsRead' | 'openDebug' | 'expenseReportSearch' | 'goToWorkspace';
 };
 
 function DynamicKeyboardShortcutsPage() {
