move keyboard shortcut hints to tooltips

apache · Dec 18, 2020 · 15be611 · 15be611
1 parent fb4c447
commit 15be611
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -55,7 +55,12 @@ const RunQueryActionButton = ({
 
   if (shouldShowStopBtn) {
     return (
-      <Button {...commonBtnProps} cta onClick={stopQuery}>
+      <Button
+        {...commonBtnProps}
+        cta
+        onClick={stopQuery}
+        tooltip={t('Stop running (Ctrl + x)')}
+      >
         <i className="fa fa-stop" /> {t('Stop')}
       </Button>
     );
@@ -67,7 +72,7 @@ const RunQueryActionButton = ({
         cta
         onClick={() => runQuery(true)}
         key="run-async-btn"
-        tooltip={t('Run query asynchronously (Ctrl + ↵)')}
+        tooltip={t('Run query (Ctrl + Return)')}
         disabled={!sql.trim()}
       >
         <i className="fa fa-bolt" /> {runBtnText}
@@ -80,7 +85,7 @@ const RunQueryActionButton = ({
       cta
       onClick={() => runQuery(false)}
       key="run-btn"
-      tooltip={t('Run query synchronously (Ctrl + ↵)')}
+      tooltip={t('Run query (Ctrl + Return)')}
       disabled={!sql.trim()}
     >
       <i className="fa fa-refresh" /> {runBtnText}

diff --git a/superset-frontend/src/SqlLab/components/SqlEditor.jsx b/superset-frontend/src/SqlLab/components/SqlEditor.jsx
@@ -26,12 +26,12 @@ import Split from 'react-split';
 import { t, styled } from '@superset-ui/core';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
+import Mousetrap from 'mousetrap';
 
 import { Tooltip } from 'src/common/components/Tooltip';
 import Label from 'src/components/Label';
 import Button from 'src/components/Button';
 import Timer from 'src/components/Timer';
-import Hotkeys from 'src/components/Hotkeys';
 import {
   Dropdown,
   Menu as AntdMenu,
@@ -155,6 +155,12 @@ class SqlEditor extends React.PureComponent {
     this.setState({ height: this.getSqlEditorHeight() });
 
     window.addEventListener('resize', this.handleWindowResize);
+
+    // setup hotkeys
+    const hotkeys = this.getHotkeyConfig();
+    hotkeys.forEach(keyConfig => {
+      Mousetrap.bind([keyConfig.key], keyConfig.func);
+    });
   }
 
   componentWillUnmount() {
@@ -487,7 +493,7 @@ class SqlEditor extends React.PureComponent {
     return menuDropdown;
   }
 
-  renderEditorBottomBar(hotkeys) {
+  renderEditorBottomBar() {
     let ctasControls;
     if (
       this.props.database &&
@@ -615,9 +621,6 @@ class SqlEditor extends React.PureComponent {
                 </Dropdown>
               </LimitSelectStyled>
             </span>
-            <span>
-              <Hotkeys header={t('Keyboard shortcuts')} hotkeys={hotkeys} />
-            </span>
           </Form>
         </div>
         <div className="rightItems">

diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -28,6 +28,7 @@ import { styled, t } from '@superset-ui/core';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
 import { areArraysShallowEqual } from 'src/reduxUtils';
+import { Tooltip } from 'src/common/components/Tooltip';
 import * as Actions from '../actions/sqlLab';
 import SqlEditor from './SqlEditor';
 import TabStatusIcon from './TabStatusIcon';
@@ -409,7 +410,11 @@ class TabbedSqlEditors extends React.PureComponent {
         fullWidth={false}
         hideAdd={this.props.offline}
         onEdit={this.handleEdit}
-        addIcon={<i data-test="add-tab-icon" className="fa fa-plus-circle" />}
+        addIcon={
+          <Tooltip id="add-tab" placement="bottom" title="New tab (Ctrl + t)">
+            <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+          </Tooltip>
+        }
       >
         {editors}
       </EditableTabs>