[sql lab] only show single run query button (#1858)

* only show single run query button, allow async if possible

* only pass the needed props, rather than entire objects to the component

* add simple test

* fix linting

superset/assets/javascripts/SqlLab/components/RunQueryActionButton.jsx

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import Button from '../../components/Button';
+
+const propTypes = {
+  allowAsync: PropTypes.bool.isRequired,
+  dbId: PropTypes.number.isRequired,
+  queryState: PropTypes.string.isRequired,
+  runQuery: PropTypes.func.isRequired,
+  selectedText: PropTypes.string,
+  stopQuery: PropTypes.func.isRequired,
+};
+
+export default function RunQueryActionButton(props) {
+  const runBtnText = props.selectedText ? 'Run Selected Query' : 'Run Query';
+  const btnStyle = props.selectedText ? 'warning' : 'primary';
+  const shouldShowStopBtn = ['running', 'pending'].indexOf(props.queryState) > -1;
+  const asyncToolTip = 'Run query asynchronously';
+
+  const commonBtnProps = {
+    bsSize: 'small',
+    bsStyle: btnStyle,
+    disabled: !(props.dbId),
+  };
+
+  const syncBtn = (
+    <Button
+      {...commonBtnProps}
+      onClick={() => props.runQuery(false)}
+      key="run-btn"
+    >
+      <i className="fa fa-table" /> {runBtnText}
+    </Button>
+  );
+
+  const asyncBtn = (
+    <Button
+      {...commonBtnProps}
+      onClick={() => props.runQuery(true)}
+      key="run-async-btn"
+      tooltip={asyncToolTip}
+    >
+      <i className="fa fa-table" /> {runBtnText}
+    </Button>
+  );
+
+  const stopBtn = (
+    <Button
+      {...commonBtnProps}
+      onClick={props.stopQuery}
+    >
+      <i className="fa fa-stop" /> Stop
+    </Button>
+  );
+
+  let button;
+  if (shouldShowStopBtn) {
+    button = stopBtn;
+  } else if (props.allowAsync) {
+    button = asyncBtn;
+  } else {
+    button = syncBtn;
+  }
+
+  return (
+    <div className="inline m-r-5 pull-left">
+      {button}
+    </div>
+  );
+}
+
+RunQueryActionButton.propTypes = propTypes;

superset/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  Button as BootstrapButton,
-  ButtonGroup,
   Col,
   FormGroup,
   InputGroup,
@@ -21,6 +19,7 @@ import Timer from '../../components/Timer';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
 import { STATE_BSSTYLE_MAP } from '../constants.js';
+import RunQueryActionButton from './RunQueryActionButton';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
@@ -104,64 +103,6 @@ class SqlEditor extends React.PureComponent {
   }
 
   render() {
-    let runButtons = [];
-    let runText = 'Run Query';
-    let btnStyle = 'primary';
-    if (this.props.queryEditor.selectedText) {
-      runText = 'Run Selection';
-      btnStyle = 'warning';
-    }
-    if (this.props.database && this.props.database.allow_run_sync) {
-      runButtons.push(
-        <BootstrapButton
-          bsSize="small"
-          bsStyle={btnStyle}
-          style={{ width: '100px' }}
-          onClick={this.runQuery.bind(this, false)}
-          disabled={!(this.props.queryEditor.dbId)}
-          key="run-btn"
-        >
-          <i className="fa fa-table" /> {runText}
-        </BootstrapButton>
-      );
-    }
-    if (this.props.database && this.props.database.allow_run_async) {
-      const asyncToolTip = 'Run query asynchronously';
-      runButtons.push(
-        <Button
-          bsSize="small"
-          bsStyle={btnStyle}
-          style={{ width: '100px' }}
-          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>
-      );
-    }
-    runButtons = (
-      <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
-        {runButtons}
-      </ButtonGroup>
-    );
-    if (
-        this.props.latestQuery &&
-        ['running', 'pending'].indexOf(this.props.latestQuery.state) > -1) {
-      runButtons = (
-        <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
-          <BootstrapButton
-            bsStyle="primary"
-            bsSize="small"
-            style={{ width: '100px' }}
-            onClick={this.stopQuery.bind(this)}
-          >
-            <a className="fa fa-stop" /> Stop
-          </BootstrapButton>
-        </ButtonGroup>
-      );
-    }
     let limitWarning = null;
     if (this.props.latestQuery && this.props.latestQuery.limit_reached) {
       const tooltip = (
@@ -208,7 +149,14 @@ class SqlEditor extends React.PureComponent {
       <div className="sql-toolbar clearfix">
         <div className="pull-left">
           <Form inline>
-            {runButtons}
+            <RunQueryActionButton
+              allowAsync={this.props.database && this.props.database.allow_run_async}
+              dbId={this.props.queryEditor.dbId}
+              queryState={this.props.latestQuery && this.props.latestQuery.state}
+              runQuery={this.runQuery.bind(this)}
+              selectedText={this.props.queryEditor.selectedText}
+              stopQuery={this.stopQuery.bind(this)}
+            />
             {ctasControls}
           </Form>
         </div>

superset/assets/spec/javascripts/explorev2/components/RunQueryActionButton_spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+import { shallow } from 'enzyme';
+
+import RunQueryActionButton
+  from '../../../../javascripts/SqlLab/components/RunQueryActionButton';
+import Button from '../../../../javascripts/components/Button';
+
+describe('RunQueryActionButton', () => {
+  let wrapper;
+  const defaultProps = {
+    allowAsync: false,
+    dbId: 1,
+    queryState: 'pending',
+    runQuery: () => {}, // eslint-disable-line
+    selectedText: null,
+    stopQuery: () => {}, // eslint-disable-line
+  };
+
+  beforeEach(() => {
+    wrapper = shallow(<RunQueryActionButton {...defaultProps} />);
+  });
+
+  it('is a valid react element', () => {
+    expect(
+      React.isValidElement(<RunQueryActionButton {...defaultProps} />)
+    ).to.equal(true);
+  });
+
+  it('renders a single Button', () => {
+    expect(wrapper.find(Button)).to.have.lengthOf(1);
+  });
+});