Add Ctrl/Cmd+Enter Send shortcut

Author: pimterry

src/components/send/request-pane.tsx

@@ -12,6 +12,7 @@ import { RequestInput } from '../../model/send/send-request-model';
 import { EditableContentType } from '../../model/events/content-types';
 
 import { ContainerSizedEditor } from '../editor/base-editor';
+import { useHotkeys } from '../../util/ui';
 
 import { SendCardContainer } from './send-card-section';
 import { SendRequestLine } from './send-request-line';
@@ -33,7 +34,17 @@ const METHODS_WITHOUT_BODY = [
     'GET',
     'HEAD',
     'OPTIONS'
-]
+];
+
+const RequestPaneKeyboardShortcuts = (props: {
+    sendRequest: () => void
+}) => {
+    useHotkeys('Ctrl+Enter, Cmd+Enter', (event) => {
+        props.sendRequest()
+    }, [props.sendRequest]);
+
+    return null;
+};
 
 @inject('rulesStore')
 @inject('uiStore')
@@ -75,6 +86,10 @@ export class RequestPane extends React.Component<{
         return <SendCardContainer
             hasExpandedChild={!!uiStore?.expandedSendRequestCard}
         >
+            <RequestPaneKeyboardShortcuts
+                sendRequest={this.sendRequest}
+            />
+
             <SendRequestLine
                 method={requestInput.method}
                 updateMethod={this.updateMethod}

src/components/send/send-request-line.tsx

@@ -4,9 +4,11 @@ import { Method } from 'mockttp';
 import { styled } from '../../styles';
 import { Icon, ArrowIcon } from '../../icons';
 
-import { Button, Select, TextInput } from '../common/inputs';
 import { getMethodColor } from '../../model/events/categorization';
 
+import { Ctrl } from '../../util/ui';
+import { Button, Select, TextInput } from '../common/inputs';
+
 type MethodName = keyof typeof Method;
 const validMethods = Object.values(Method)
     .filter(
@@ -160,7 +162,7 @@ export const SendRequestLine = (props: {
         <SendButton
             type='submit'
             disabled={props.isSending}
-            title='Send this request'
+            title={`Send this request (${Ctrl}+Enter)`}
         >
             { props.isSending
                 ? <Icon spin fixedWidth={true} icon={['fas', 'spinner']} />