From ac8bd8638a5ff5b744dd204ebf874dad56d0150c Mon Sep 17 00:00:00 2001
From: Angus Holder <aholder97@gmail.com>
Date: Mon, 27 Jan 2020 06:06:29 -0800
Subject: [PATCH] Enable using Ctrl+Return to execute a query in the database
 plugin (#761)

Summary:
Having a key shortcut to execute the query you're typing helps to speed up the edit-run cycle.

## Changelog

In the database SQL execution tab, you can now execute queries with Ctrl+Return instead of pressing the 'Execute' button.
Pull Request resolved: https://github.com/facebook/flipper/pull/761

Test Plan:
I typed a query into the textarea, and while it was focussed, press Ctrl+Return, and the query executed.

Mousing over the 'Execute' button displays a tooltip informing you of this keyboard shortcut.

![image](https://user-images.githubusercontent.com/7407345/73128700-31860880-3fcb-11ea-9a7c-28a55b46a151.png)

Reviewed By: mweststrate

Differential Revision: D19578527

Pulled By: passy

fbshipit-source-id: be131e44e293caa578d48e324fc43b457edb1e4e
---
 src/plugins/databases/index.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/plugins/databases/index.js b/src/plugins/databases/index.js
index e20181b23..ed2aea0fa 100644
--- a/src/plugins/databases/index.js
+++ b/src/plugins/databases/index.js
@@ -1012,6 +1012,15 @@ export default class DatabasesPlugin extends FlipperPlugin<
     this.dispatchAction({type: 'Execute'});
   };
 
+  onQueryTextareaKeyPress = (event: KeyboardEvent) => {
+    // Implement ctrl+enter as a shortcut for clicking 'Execute'.
+    if (event.key === '\n' && event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.onExecuteClicked();
+    }
+  };
+
   onFavoriteClicked = (selected: any) => {
     this.setState({query: selected.target.value});
   };
@@ -1304,6 +1313,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
                   marginBottom: '1%',
                 }}
                 onChange={this.onQueryChanged.bind(this)}
+                onKeyPress={this.onQueryTextareaKeyPress}
                 placeholder="Type query here.."
                 value={
                   this.state.query !== null &&
@@ -1351,7 +1361,11 @@ export default class DatabasesPlugin extends FlipperPlugin<
               </ButtonGroup>
               <Spacer />
               <ButtonGroup>
-                <Button onClick={this.onExecuteClicked}>Execute</Button>
+                <Button
+                  onClick={this.onExecuteClicked}
+                  title={'Execute SQL [Ctrl+Return]'}>
+                  Execute
+                </Button>
               </ButtonGroup>
             </Toolbar>
           </div>