Add keyboard shortcuts modal help

frontend/src/App.less

@@ -105,7 +105,7 @@ body {
 
 // make modal window "fullscreen"
 // margins are hard-coded in bootstrap, so it's hard-coded here too
-.modal-body {
+.modal-lg .modal-body {
     height: ~'calc(100vh - 150px)';
 
     .uast-viewer {

frontend/src/components/HelpModal.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Modal } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import CloseIcon from '../icons/close-query-tab.svg';
+import './HelpModal.less';
+
+class HelpModal extends Component {
+  render() {
+    const { showModal, onHide } = this.props;
+
+    return (
+      <Modal show={showModal} onHide={onHide}>
+        <Modal.Header>
+          <Modal.Title>
+            Help
+            <CloseIcon className="btn-modal-close" onClick={onHide} />
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div>
+            For a reference of gitbase SQL, please read{' '}
+            <strong>
+              <a href="https://docs.sourced.tech/gitbase">
+                docs.sourced.tech/gitbase
+              </a>
+            </strong>
+          </div>
+          <h4 className="kb-shortcuts-title">Keyboard shortcuts</h4>
+          <table className="keyboard-shortcuts">
+            <tbody>
+              <tr>
+                <td className="keys">
+                  <div className="key">Ctrl</div>
+                  &nbsp;+&nbsp;
+                  <div className="key">Enter</div>
+                </td>
+                <td>Run the query</td>
+              </tr>
+              <tr>
+                <td className="keys">
+                  <div className="key">Ctrl</div>
+                  &nbsp;+&nbsp;
+                  <div className="key">Space</div>
+                </td>
+                <td>Autocomplete</td>
+              </tr>
+            </tbody>
+          </table>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
+
+HelpModal.propTypes = {
+  showModal: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired
+};
+
+export default HelpModal;

frontend/src/components/HelpModal.less

@@ -0,0 +1,34 @@
+@import '../variables.less';
+
+.kb-shortcuts-title {
+    text-transform: uppercase;
+    line-height: 2em;
+    margin-top: 2em;
+
+    border-bottom: solid 1px @primary-tint-3;
+
+    color: @dark-text;
+    font-size: 20px;
+    font-weight: normal;
+    letter-spacing: 0.8px;
+}
+
+table.keyboard-shortcuts {
+    width: 100%;
+
+    td {
+        padding-bottom: 1em;
+    }
+
+    td.keys {
+        text-align: right;
+        padding-right: 20px;
+    }
+
+    div.key {
+        display: inline;
+        color: @dark-text;
+        font-family: @monospace-font;
+        font-weight: @bold-font-weight;
+    }
+}

frontend/src/components/QueryBox.js

@@ -11,6 +11,7 @@ import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/sql-hint';
 
+import HelpModal from './HelpModal';
 import './QueryBox.less';
 import HelpIcon from '../icons/help.svg';
 
@@ -20,10 +21,14 @@ class QueryBox extends Component {
 
     this.state = {
       schema: undefined,
-      codeMirrorTables: {}
+      codeMirrorTables: {},
+      showModal: false
     };
 
     this.codemirror = React.createRef();
+
+    this.showHelpModal = this.showHelpModal.bind(this);
+    this.handleHelpModalClose = this.handleHelpModalClose.bind(this);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -63,6 +68,18 @@ class QueryBox extends Component {
     );
   }
 
+  showHelpModal() {
+    this.setState({
+      showModal: true
+    });
+  }
+
+  handleHelpModalClose() {
+    this.setState({
+      showModal: false
+    });
+  }
+
   render() {
     const { codeMirrorTables } = this.state;
 
@@ -98,8 +115,7 @@ class QueryBox extends Component {
               <Button
                 className="help-button"
                 bsStyle="gbpl-primary-tint-2-link"
-                href="https://docs.sourced.tech/gitbase"
-                target="_blank"
+                onClick={this.showHelpModal}
               >
                 <HelpIcon className="big-icon" />HELP
               </Button>
@@ -126,6 +142,10 @@ class QueryBox extends Component {
               </Button>
             </Col>
           </Row>
+          <HelpModal
+            showModal={this.state.showModal}
+            onHide={this.handleHelpModalClose}
+          />
         </div>
       </div>
     );

frontend/src/variables.less

@@ -263,10 +263,14 @@
 //** Modal backdrop opacity
 @modal-backdrop-opacity: 0.7;
 
-.modal-dialog {
+.modal-lg.modal-dialog {
     width: 90%;
 }
 
+.modal-title {
+    text-transform: uppercase;
+}
+
 .modal-content {
     box-shadow: unset;
     border-radius: unset;