Add tooltips to RunAsync and CTAS button (apache#1792)

* Add tooltips to RunAsync and CTAS button * Use button from components * Phrasing
goodstress · Dec 12, 2016 · 699602d · 699602d
1 parent 2993ff1
commit 699602d
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Button,
+  Button as BootstrapButton,
   ButtonGroup,
   Col,
   FormGroup,
@@ -14,6 +14,8 @@ import {
   Collapse,
 } from 'react-bootstrap';
 
+import Button from '../../components/Button';
+
 import SouthPane from './SouthPane';
 import Timer from '../../components/Timer';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
@@ -111,7 +113,7 @@ class SqlEditor extends React.PureComponent {
     }
     if (this.props.database && this.props.database.allow_run_sync) {
       runButtons.push(
-        <Button
+        <BootstrapButton
           bsSize="small"
           bsStyle={btnStyle}
           style={{ width: '100px' }}
@@ -120,10 +122,11 @@ class SqlEditor extends React.PureComponent {
           key="run-btn"
         >
           <i className="fa fa-table" /> {runText}
-        </Button>
+        </BootstrapButton>
       );
     }
     if (this.props.database && this.props.database.allow_run_async) {
+      const asyncToolTip = 'Run query asynchronously';
       runButtons.push(
         <Button
           bsSize="small"
@@ -132,6 +135,7 @@ class SqlEditor extends React.PureComponent {
           onClick={this.runQuery.bind(this, true)}
           disabled={!(this.props.queryEditor.dbId)}
           key="run-async-btn"
+          tooltip={asyncToolTip}
         >
           <i className="fa fa-table" /> Run Async
         </Button>
@@ -147,14 +151,14 @@ class SqlEditor extends React.PureComponent {
         ['running', 'pending'].indexOf(this.props.latestQuery.state) > -1) {
       runButtons = (
         <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
-          <Button
+          <BootstrapButton
             bsStyle="primary"
             bsSize="small"
             style={{ width: '100px' }}
             onClick={this.stopQuery.bind(this)}
           >
             <a className="fa fa-stop" /> Stop
-          </Button>
+          </BootstrapButton>
         </ButtonGroup>
       );
     }
@@ -175,6 +179,7 @@ class SqlEditor extends React.PureComponent {
     }
     let ctasControls;
     if (this.props.database && this.props.database.allow_ctas) {
+      const ctasToolTip = 'Create table as with query results';
       ctasControls = (
         <FormGroup>
           <InputGroup>
@@ -190,6 +195,7 @@ class SqlEditor extends React.PureComponent {
                 bsSize="small"
                 disabled={this.state.ctas.length === 0}
                 onClick={this.createTableAs.bind(this)}
+                tooltip={ctasToolTip}
               >
                 <i className="fa fa-table" /> CTAS
               </Button>