fix(keyboard shortcuts): Add missing shortcuts and fix the ones that don't work as expected (#7116)

* keyboard shortcut: show doc/collection settings

* add environment switch keybinding and modals on test and design view

* remove unused request switch

packages/insomnia/src/common/hotkeys.ts

@@ -13,8 +13,6 @@ export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
   'preferences_showKeyboardShortcuts': 'Show Keyboard Shortcuts',
   'preferences_showGeneral': 'Show App Preferences',
   'request_quickSwitch': 'Quick search',
-  'request_showRecent': 'Show Recent Requests',
-  'request_showRecentPrevious': 'Show Recent Requests (Previous)',
   'plugin_reload': 'Reload Plugins',
   'showAutocomplete': 'Show Autocomplete',
   'request_send': 'Send Request',
@@ -63,14 +61,6 @@ const defaultRegistry: HotKeyRegistry = {
     macKeys: [{ meta: true, keyCode: keyboardKeys.p.keyCode }],
     winLinuxKeys: [{ ctrl: true, keyCode: keyboardKeys.p.keyCode }],
   },
-  request_showRecent: {
-    macKeys: [{ ctrl: true, keyCode: keyboardKeys.tab.keyCode }],
-    winLinuxKeys: [{ ctrl: true, keyCode: keyboardKeys.tab.keyCode }],
-  },
-  request_showRecentPrevious: {
-    macKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.tab.keyCode }],
-    winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.tab.keyCode }],
-  },
   plugin_reload: {
     macKeys: [{ shift: true, meta: true, keyCode: keyboardKeys.r.keyCode }],
     winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.r.keyCode }],

packages/insomnia/src/common/settings.ts

@@ -34,8 +34,6 @@ export type KeyboardShortcut =
   | 'preferences_showKeyboardShortcuts'
   | 'preferences_showGeneral'
   | 'request_quickSwitch'
-  | 'request_showRecent'
-  | 'request_showRecentPrevious'
   | 'plugin_reload'
   | 'showAutocomplete'
   | 'request_send'

packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx

@@ -21,6 +21,7 @@ import { useAIContext } from '../../context/app/ai-context';
 import { WorkspaceLoaderData } from '../../routes/workspace';
 import { Icon } from '../icon';
 import { InsomniaAI } from '../insomnia-ai-icon';
+import { useDocBodyKeyboardShortcuts } from '../keydown-binder';
 import { showError, showPrompt } from '../modals';
 import { ExportRequestsModal } from '../modals/export-requests-modal';
 import { configGenerators, showGenerateConfigModal } from '../modals/generate-config-modal';
@@ -63,6 +64,10 @@ export const WorkspaceDropdown: FC = () => {
     generateTests,
   } = useAIContext();
 
+  useDocBodyKeyboardShortcuts({
+    workspace_showSettings: () => setIsSettingsModalOpen(true),
+  });
+
   const handlePluginClick = useCallback(async ({ action, plugin, label }: WorkspaceAction, workspace: Workspace) => {
     setLoadingActions({ ...loadingActions, [label]: true });
     try {

packages/insomnia/src/ui/routes/debug.tsx

@@ -195,6 +195,7 @@ export const Debug: FC = () => {
   const [isRequestSettingsModalOpen, setIsRequestSettingsModalOpen] =
     useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
+  const [isEnvironmentSelectOpen, setIsEnvironmentSelectOpen] = useState(false);
   const [isCertificatesModalOpen, setCertificatesModalOpen] = useState(false);
 
   const patchRequest = useRequestPatcher();
@@ -386,10 +387,8 @@ export const Debug: FC = () => {
           ),
       });
     },
-    // TODO: fix these
-    request_showRecent: () => { },
-    request_quickSwitch: () => { },
     environment_showEditor: () => setEnvironmentModalOpen(true),
+    environment_showSwitchMenu: () => setIsEnvironmentSelectOpen(true),
     showCookiesEditor: () => setIsCookieModalOpen(true),
     request_showGenerateCodeEditor: () => {
       if (activeRequest && isRequest(activeRequest)) {
@@ -661,6 +660,8 @@ export const Debug: FC = () => {
               <Select
                 aria-label="Select an environment"
                 className="overflow-hidden"
+                onOpenChange={setIsEnvironmentSelectOpen}
+                isOpen={isEnvironmentSelectOpen}
                 onSelectionChange={environmentId => {
                   setActiveEnvironmentFetcher.submit(
                     {

packages/insomnia/src/ui/routes/design.tsx

@@ -60,6 +60,7 @@ import { WorkspaceDropdown } from '../components/dropdowns/workspace-dropdown';
 import { WorkspaceSyncDropdown } from '../components/dropdowns/workspace-sync-dropdown';
 import { Icon } from '../components/icon';
 import { InsomniaAI } from '../components/insomnia-ai-icon';
+import { useDocBodyKeyboardShortcuts } from '../components/keydown-binder';
 import { CookiesModal } from '../components/modals/cookies-modal';
 import { CertificatesModal } from '../components/modals/workspace-certificates-modal';
 import { WorkspaceEnvironmentsEditModal } from '../components/modals/workspace-environments-edit-modal';
@@ -220,6 +221,7 @@ const Design: FC = () => {
 
   const [isCookieModalOpen, setIsCookieModalOpen] = useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
+  const [isEnvironmentSelectOpen, setIsEnvironmentSelectOpen] = useState(false);
   const [isCertificatesModalOpen, setCertificatesModalOpen] = useState(false);
 
   const { apiSpec, lintMessages, rulesetPath, parsedSpec } = useLoaderData() as LoaderData;
@@ -351,6 +353,12 @@ const Design: FC = () => {
     );
   };
 
+  useDocBodyKeyboardShortcuts({
+    environment_showEditor: () => setEnvironmentModalOpen(true),
+    environment_showSwitchMenu: () => setIsEnvironmentSelectOpen(true),
+    showCookiesEditor: () => setIsCookieModalOpen(true),
+  });
+
   const specActionList: SpecActionItem[] = [
     {
       id: 'ai-generate-tests-in-collection',
@@ -417,6 +425,8 @@ const Design: FC = () => {
               <Select
                 aria-label="Select an environment"
                 className="overflow-hidden"
+                isOpen={isEnvironmentSelectOpen}
+                onOpenChange={setIsEnvironmentSelectOpen}
                 onSelectionChange={environmentId => {
                   setActiveEnvironmentFetcher.submit(
                     {

packages/insomnia/src/ui/routes/unit-test.tsx

@@ -42,6 +42,7 @@ import { WorkspaceSyncDropdown } from '../components/dropdowns/workspace-sync-dr
 import { EditableInput } from '../components/editable-input';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Icon } from '../components/icon';
+import { useDocBodyKeyboardShortcuts } from '../components/keydown-binder';
 import { showPrompt } from '../components/modals';
 import { CookiesModal } from '../components/modals/cookies-modal';
 import { CertificatesModal } from '../components/modals/workspace-certificates-modal';
@@ -108,6 +109,7 @@ const TestRoute: FC = () => {
 
   const [isCookieModalOpen, setIsCookieModalOpen] = useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
+  const [isEnvironmentSelectOpen, setIsEnvironmentSelectOpen] = useState(false);
   const [isCertificatesModalOpen, setCertificatesModalOpen] = useState(false);
 
   const createUnitTestSuiteFetcher = useFetcher();
@@ -124,6 +126,12 @@ const TestRoute: FC = () => {
 
   const navigate = useNavigate();
 
+  useDocBodyKeyboardShortcuts({
+    environment_showEditor: () => setEnvironmentModalOpen(true),
+    environment_showSwitchMenu: () => setIsEnvironmentSelectOpen(true),
+    showCookiesEditor: () => setIsCookieModalOpen(true),
+  });
+
   const testSuiteActionList: {
     id: string;
     name: string;
@@ -264,6 +272,8 @@ const TestRoute: FC = () => {
               <Select
                 aria-label="Select an environment"
                 className="overflow-hidden"
+                isOpen={isEnvironmentSelectOpen}
+                onOpenChange={setIsEnvironmentSelectOpen}
                 onSelectionChange={environmentId => {
                   setActiveEnvironmentFetcher.submit(
                     {