feat(shortcut): shortcut close env form

packages/insomnia/src/common/hotkeys.ts

@@ -20,6 +20,7 @@ export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
   'request_send': 'Send Request',
   'request_showOptions': 'Send Request (Options)',
   'environment_showEditor': 'Show Environment Editor',
+  'environment_closeEditor': 'Close Environment Editor',
   'environment_showSwitchMenu': 'Switch Environments',
   'request_toggleHttpMethodMenu': 'Change HTTP Method',
   'request_toggleHistory': 'Show Request History',
@@ -99,6 +100,10 @@ const defaultRegistry: HotKeyRegistry = {
     macKeys: [{ meta: true, keyCode: keyboardKeys.e.keyCode }],
     winLinuxKeys: [{ ctrl: true, keyCode: keyboardKeys.e.keyCode }],
   },
+  environment_closeEditor: {
+    macKeys: [{ meta: true, shift: true, keyCode: keyboardKeys.s.keyCode }],
+    winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.s.keyCode }],
+  },
   environment_showSwitchMenu: {
     macKeys: [{ shift: true, meta: true, keyCode: keyboardKeys.e.keyCode }],
     winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.e.keyCode }],

packages/insomnia/src/common/settings.ts

@@ -41,6 +41,7 @@ export type KeyboardShortcut =
   | 'request_send'
   | 'request_showOptions'
   | 'environment_showEditor'
+  | 'environment_closeEditor'
   | 'environment_showSwitchMenu'
   | 'request_toggleHttpMethodMenu'
   | 'request_toggleHistory'

packages/insomnia/src/ui/components/base/modal.tsx

@@ -81,7 +81,7 @@ export const Modal = forwardRef<ModalHandle, ModalProps>(({
 
   const handleKeydown = createKeybindingsHandler({
     'Escape': () => {
-      hide();
+      containerRef.current?.focus();
     },
   });
   useEffect(() => {

packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { FC, Fragment, useEffect, useRef } from 'react';
+import React, { FC, Fragment, useEffect, useRef, KeyboardEvent } from 'react';
 import { ListDropTargetDelegate, ListKeyboardDelegate, mergeProps, OverlayContainer, useDraggableCollection, useDraggableItem, useDropIndicator, useDroppableCollection, useDroppableItem, useFocusRing, useListBox, useOption } from 'react-aria';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 import { DraggableCollectionState, DroppableCollectionState, Item, ListState, useDraggableCollectionState, useDroppableCollectionState, useListState } from 'react-stately';
@@ -17,6 +17,7 @@ import { ModalHeader } from '../base/modal-header';
 import { PromptButton } from '../base/prompt-button';
 import { EnvironmentEditor, EnvironmentEditorHandle } from '../editors/environment-editor';
 import { HelpTooltip } from '../help-tooltip';
+import { useDocBodyKeyboardShortcuts } from '../keydown-binder';
 import { Tooltip } from '../tooltip';
 
 const ROOT_ENVIRONMENT_NAME = 'Base Environment';
@@ -244,6 +245,10 @@ export const WorkspaceEnvironmentsEditModal = (props: ModalProps) => {
     modalRef.current?.show();
   }, []);
 
+  useDocBodyKeyboardShortcuts({
+    environment_closeEditor: () => modalRef.current?.hide(),
+  });
+
   if (!routeData) {
     return null;
   }
@@ -306,10 +311,16 @@ export const WorkspaceEnvironmentsEditModal = (props: ModalProps) => {
       sourceEnv.metaSortKey = targetEnv.metaSortKey + 1;
     }
     updateEnvironment(sourceEnv._id, { metaSortKey: sourceEnv.metaSortKey });
-  }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter') {
+      modalRef.current?.hide();
+    }
+  };
 
   return (
-    <OverlayContainer>
+    <OverlayContainer onKeyDown={handleKeyDown} tabIndex={0}>
       <Modal ref={modalRef} wide tall onHide={props.onHide}>
         <ModalHeader>Manage Environments</ModalHeader>
         <ModalBody noScroll className="env-modal">