[explore] refactor slice action button group (#1074)

* pull explore actions button group into component * use button component * make sure we render all action buttons * test that embed code is correct * don't need before each * generalize modal trigger for use with plain links or icons
2016-09-20 13:45:27 -07:00 · 2016-09-20 13:45:27 -07:00 · 0e7af8d8a6
parent 32980a653c
commit 0e7af8d8a6
17 changed files with 592 additions and 203 deletions
--- a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
@ -33,6 +33,7 @@ class QueryTable extends React.Component {
    this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
  }
  notImplemented() {
+    /* eslint no-alert: 0 */
    alert('Not implemented yet!');
  }
  render() {
--- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@ -10,6 +10,7 @@ let queryCount = 1;

 class QueryEditors extends React.Component {
  renameTab(qe) {
+    /* eslint no-alert: 0 */
    const newTitle = prompt('Enter a new title for the tab');
    if (newTitle) {
      this.props.actions.queryEditorSetTitle(qe, newTitle);
--- a/caravel/assets/javascripts/components/CopyToClipboard.jsx
+++ b/caravel/assets/javascripts/components/CopyToClipboard.jsx
@ -0,0 +1,102 @@
+import React, { PropTypes } from 'react';
+import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
+
+const propTypes = {
+  copyNode: PropTypes.node,
+  onCopyEnd: PropTypes.func,
+  shouldShowText: PropTypes.bool,
+  text: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+  copyNode: <span>Copy</span>,
+  onCopyEnd: () => {},
+  shouldShowText: true,
+};
+
+export default class CopyToClipboard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasCopied: false,
+    };
+
+    // bindings
+    this.copyToClipboard = this.copyToClipboard.bind(this);
+    this.resetTooltipText = this.resetTooltipText.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
+  }
+
+  onMouseOut() {
+    // delay to avoid flash of text change on tooltip
+    setTimeout(this.resetTooltipText, 200);
+  }
+
+  resetTooltipText() {
+    this.setState({ hasCopied: false });
+  }
+
+  copyToClipboard() {
+    const textToCopy = this.props.text;
+    const textArea = document.createElement('textarea');
+
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-1000px';
+    textArea.value = textToCopy;
+
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    try {
+      if (!document.execCommand('copy')) {
+        throw new Error('Not successful');
+      }
+    } catch (err) {
+      window.alert('Sorry, your browser does not support copying. Use Ctrl / Cmd + C!'); // eslint-disable-line
+    }
+
+    document.body.removeChild(textArea);
+
+    this.setState({ hasCopied: true });
+    this.props.onCopyEnd();
+  }
+
+  tooltipText() {
+    let tooltipText;
+    if (this.state.hasCopied) {
+      tooltipText = 'Copied!';
+    } else {
+      tooltipText = 'Copy text';
+    }
+    return tooltipText;
+  }
+
+  render() {
+    const tooltip = (
+      <Tooltip id="copy-to-clipboard-tooltip">
+        {this.tooltipText()}
+      </Tooltip>
+    );
+
+    return (
+      <div>
+        {this.props.shouldShowText &&
+          <span>{this.props.text}</span>
+        }
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <OverlayTrigger placement="top" overlay={tooltip} trigger={['hover']}>
+          <Button
+            bsStyle="link"
+            onClick={this.copyToClipboard}
+            onMouseOut={this.onMouseOut}
+          >
+            {this.props.copyNode}
+          </Button>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+CopyToClipboard.propTypes = propTypes;
+CopyToClipboard.defaultProps = defaultProps;
--- a/caravel/assets/javascripts/components/ModalTrigger.jsx
+++ b/caravel/assets/javascripts/components/ModalTrigger.jsx
@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react';
+import { Modal } from 'react-bootstrap';
+import cx from 'classnames';
+
+const propTypes = {
+  triggerNode: PropTypes.node.isRequired,
+  modalTitle: PropTypes.string.isRequired,
+  modalBody: PropTypes.node.isRequired,
+  beforeOpen: PropTypes.func,
+  isButton: PropTypes.bool,
+};
+
+const defaultProps = {
+  beforeOpen: () => {},
+  isButton: false,
+};
+
+export default class ModalTrigger extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+  }
+
+  close() {
+    this.setState({ showModal: false });
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.props.beforeOpen();
+    this.setState({ showModal: true });
+  }
+
+  render() {
+    const classNames = cx({
+      'btn btn-default btn-sm': this.props.isButton,
+    });
+    return (
+      <a href="#" className={classNames} onClick={this.open}>
+        {this.props.triggerNode}
+        <Modal show={this.state.showModal} onHide={this.close}>
+          <Modal.Header closeButton>
+            <Modal.Title>{this.props.modalTitle}</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            {this.props.modalBody}
+          </Modal.Body>
+        </Modal>
+      </a>
+    );
+  }
+}
+
+ModalTrigger.propTypes = propTypes;
+ModalTrigger.defaultProps = defaultProps;
--- a/caravel/assets/javascripts/explore/components/DisplayQueryButton.jsx
+++ b/caravel/assets/javascripts/explore/components/DisplayQueryButton.jsx
@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+import ModalTrigger from './../../components/ModalTrigger';
+
+const propTypes = {
+  slice: PropTypes.object.isRequired,
+};
+
+export default class DisplayQueryButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewSqlQuery: '',
+    };
+    this.beforeOpen = this.beforeOpen.bind(this);
+  }
+
+  beforeOpen() {
+    this.setState({
+      viewSqlQuery: this.props.slice.viewSqlQuery,
+    });
+  }
+
+  render() {
+    const modalBody = (<pre>{this.state.viewSqlQuery}</pre>);
+    return (
+      <ModalTrigger
+        isButton
+        triggerNode={<span>Query</span>}
+        modalTitle="Query"
+        modalBody={modalBody}
+        beforeOpen={this.beforeOpen}
+      />
+    );
+  }
+}
+
+DisplayQueryButton.propTypes = propTypes;
--- a/caravel/assets/javascripts/explore/components/EmbedCodeButton.jsx
+++ b/caravel/assets/javascripts/explore/components/EmbedCodeButton.jsx
@ -0,0 +1,105 @@
+import React, { PropTypes } from 'react';
+import CopyToClipboard from './../../components/CopyToClipboard';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
+
+const propTypes = {
+  slice: PropTypes.object.isRequired,
+};
+
+export default class EmbedCodeButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: '400',
+      width: '600',
+      srcLink: window.location.origin + props.slice.data.standalone_endpoint,
+    };
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  handleInputChange(e) {
+    const value = e.currentTarget.value;
+    const name = e.currentTarget.name;
+    const data = {};
+    data[name] = value;
+    this.setState(data);
+  }
+
+  generateEmbedHTML() {
+    const { width, height, srcLink } = this.state;
+    /* eslint max-len: 0 */
+    const embedHTML =
+      `<iframe src="${srcLink}" width="${width}" height="${height}" seamless frameBorder="0" scrolling="no"></iframe>`;
+    return embedHTML;
+  }
+
+  renderPopover() {
+    const html = this.generateEmbedHTML();
+    return (
+      <Popover id="embed-code-popover">
+        <div>
+          <div className="row">
+            <div className="col-sm-10">
+              <textarea name="embedCode" value={html} rows="4" readOnly className="form-control input-sm"></textarea>
+            </div>
+            <div className="col-sm-2">
+              <CopyToClipboard
+                shouldShowText={false}
+                text={html}
+                copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
+              />
+            </div>
+          </div>
+          <br />
+          <div className="row">
+            <div className="col-md-6 col-sm-12">
+              <div className="form-group">
+                <small>
+                  <label className="control-label" htmlFor="embed-height">Height</label>
+                </small>
+                <input
+                  className="form-control input-sm"
+                  type="text"
+                  defaultValue={this.state.height}
+                  name="height"
+                  onChange={this.handleInputChange}
+                />
+              </div>
+            </div>
+            <div className="col-md-6 col-sm-12">
+              <div className="form-group">
+                <small>
+                  <label className="control-label" htmlFor="embed-width">Width</label>
+                </small>
+                <input
+                  className="form-control input-sm"
+                  type="text"
+                  defaultValue={this.state.width}
+                  name="width"
+                  onChange={this.handleInputChange}
+                  id="embed-width"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Popover>
+    );
+  }
+  render() {
+    return (
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement="left"
+        overlay={this.renderPopover()}
+      >
+        <span className="btn btn-default btn-sm">
+          <i className="fa fa-code"></i>&nbsp;
+        </span>
+      </OverlayTrigger>
+    );
+  }
+}
+
+EmbedCodeButton.propTypes = propTypes;
--- a/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
+++ b/caravel/assets/javascripts/explore/components/ExploreActionButtons.jsx
@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+import URLShortLinkButton from './URLShortLinkButton';
+import EmbedCodeButton from './EmbedCodeButton';
+import DisplayQueryButton from './DisplayQueryButton';
+
+const propTypes = {
+  canDownload: PropTypes.string.isRequired,
+  slice: PropTypes.object.isRequired,
+};
+
+export default function ExploreActionButtons({ canDownload, slice }) {
+  const exportToCSVClasses = cx('btn btn-default btn-sm', {
+    'disabled disabledButton': !canDownload,
+  });
+
+  return (
+    <div className="btn-group results" role="group">
+      <URLShortLinkButton slice={slice} />
+
+      <EmbedCodeButton slice={slice} />
+
+      <a
+        href={slice.data.json_endpoint}
+        className="btn btn-default btn-sm"
+        title="Export to .json"
+        target="_blank"
+      >
+        <i className="fa fa-file-code-o"></i> .json
+      </a>
+
+      <a
+        href={slice.data.csv_endpoint}
+        className={exportToCSVClasses}
+        title="Export to .csv format"
+        target="_blank"
+      >
+        <i className="fa fa-file-text-o"></i> .csv
+      </a>
+
+      <DisplayQueryButton slice={slice} />
+    </div>
+  );
+}
+
+ExploreActionButtons.propTypes = propTypes;
--- a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
+++ b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
+import CopyToClipboard from './../../components/CopyToClipboard';
+import $ from 'jquery';
+
+const propTypes = {
+  slice: PropTypes.object.isRequired,
+};
+
+export default class URLShortLinkButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shortUrl: '',
+    };
+
+    this.getShortUrl();
+  }
+
+  getShortUrl() {
+    $.ajax({
+      type: 'POST',
+      url: '/r/shortner/',
+      data: {
+        data: '/' + window.location.pathname + this.props.slice.querystring(),
+      },
+      success: (data) => {
+        this.setState({
+          shortUrl: data,
+        });
+      },
+      error: (error) => {
+        /* eslint no-console: 0 */
+        if (console && console.warn) {
+          console.warn('Something went wrong...');
+          console.warn(error);
+        }
+      },
+    });
+  }
+
+  renderPopover() {
+    return (
+      <Popover id="shorturl-popover">
+        <CopyToClipboard
+          text={this.state.shortUrl}
+          copyNode={<i className="fa fa-clipboard" title="Copy to clipboard"></i>}
+        />
+      </Popover>
+    );
+  }
+
+  render() {
+    const shortUrl = this.state.shortUrl;
+    const isDisabled = shortUrl === '';
+    return (
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement="left"
+        overlay={this.renderPopover()}
+      >
+        <span className="btn btn-default btn-sm" disabled={isDisabled}>
+          <i className="fa fa-link"></i>&nbsp;
+        </span>
+      </OverlayTrigger>
+    );
+  }
+}
+
+URLShortLinkButton.propTypes = propTypes;
--- a/caravel/assets/javascripts/explore/explore.jsx
+++ b/caravel/assets/javascripts/explore/explore.jsx
@ -11,6 +11,7 @@ const jQuery = window.jQuery = require('jquery'); // eslint-disable-line
 import React from 'react';
 import ReactDOM from 'react-dom';
 import QueryAndSaveBtns from './components/QueryAndSaveBtns.jsx';
+import ExploreActionButtons from './components/ExploreActionButtons.jsx';

 require('jquery-ui');
 $.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
@ -62,7 +63,6 @@ function query(forceUpdate, pushState) {
    force = false;
  }
  $('.query-and-save button').attr('disabled', 'disabled');
-  $('.btn-group.results span,a').attr('disabled', 'disabled');
  if (force) {  // Don't hide the alert message when the page is just loaded
    $('div.alert').remove();
  }
@ -160,148 +160,6 @@ function initExploreView() {

  px.initFavStars();

-  function copyURLToClipboard(url) {
-    const textArea = document.createElement('textarea');
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-1000px';
-    textArea.value = url;
-
-    document.body.appendChild(textArea);
-    textArea.select();
-    let successful;
-    try {
-      successful = document.execCommand('copy');
-      if (!successful) {
-        throw new Error('Not successful');
-      }
-    } catch (err) {
-      window.alert('Sorry, your browser does not support copying. Use Ctrl / Cmd + C!'); // eslint-disable-line
-    }
-    document.body.removeChild(textArea);
-    return successful;
-  }
-
-  $('#shortner').click(function () {
-    $.ajax({
-      type: 'POST',
-      url: '/r/shortner/',
-      data: {
-        data: '/' + window.location.pathname + slice.querystring(),
-      },
-      success(data) {
-        const close = (
-          '<a style="cursor: pointer;">' +
-            '<i class="fa fa-close" id="close_shortner"></i>' +
-          '</a>'
-        );
-        const copy = (
-          '<a style="cursor: pointer;">' +
-            '<i class="fa fa-clipboard" title="Copy to clipboard" id="copy_url"></i>' +
-          '</a>'
-        );
-        const spaces = '&nbsp;&nbsp;&nbsp;';
-        const popover = data + spaces + copy + spaces + close;
-
-        const $shortner = $('#shortner')
-          .popover({
-            content: popover,
-            placement: 'left',
-            html: true,
-            trigger: 'manual',
-          })
-          .popover('show');
-        function destroyPopover() {
-          $shortner.popover('destroy');
-        }
-
-        $('#copy_url')
-        .tooltip()
-        .click(function () {
-          const success = copyURLToClipboard(data);
-          if (success) {
-            $(this).attr('data-original-title', 'Copied!')
-            .tooltip('fixTitle')
-            .tooltip('show');
-            window.setTimeout(destroyPopover, 1200);
-          }
-        });
-        $('#close_shortner').click(destroyPopover);
-      },
-      error(error) {
-        showModal({
-          title: 'Error',
-          body: 'Sorry, an error occurred during this operation:<br/>' + error,
-        });
-      },
-    });
-  });
-
-  $('#standalone').click(function () {
-    const srcLink = window.location.origin + slice.data.standalone_endpoint;
-    const close = (
-      '<a style="cursor: pointer;">' +
-        '<i class="fa fa-close" id="close_standalone"></i>' +
-      '</a>'
-    );
-    const copy = (
-      '<a style="cursor: pointer;">' +
-        '<i class="fa fa-clipboard" title="Copy to clipboard" id="copy_embed"></i>' +
-      '</a>'
-    );
-    const spaces = '&nbsp;&nbsp;&nbsp;';
-    const widthInput = '<input type="number" id="standalone_width" placeholder="width">';
-    const heightInput = '<input type="number" id="standalone_height" placeholder="height">';
-    let popover = "<input id='standalone_text' value='' disabled></input>";
-    popover = popover + spaces + copy + spaces + close + spaces + widthInput + spaces + heightInput;
-    let dataToCopy = '';
-
-    const $standalone = $(this);
-
-    function destroyPopover() {
-      $standalone.popover('destroy');
-    }
-
-    $standalone.popover({
-      content: popover,
-      title: 'embed html',
-      placement: 'left',
-      html: true,
-      trigger: 'manual',
-    })
-    .popover('show');
-    $('#copy_embed').tooltip().click(function () {
-      const success = copyURLToClipboard(dataToCopy);
-      if (success) {
-        $(this).attr('data-original-title', 'Copied!')
-        .tooltip('fixTitle')
-        .tooltip('show');
-        window.setTimeout(destroyPopover, 1200);
-      }
-    });
-
-    $('#close_standalone').click(destroyPopover);
-
-    const $standaloneWidth = $('#standalone_width');
-    const $standaloneHeight = $('#standalone_height');
-    const $standaloneText = $('#standalone_text');
-
-    function generateEmbedHTML() {
-      const width = $standaloneWidth.val();
-      const height = $standaloneHeight.val();
-      dataToCopy = `<iframe src="${srcLink}" width="${width}" height="${height}"`;
-      dataToCopy = dataToCopy + ' seamless frameBorder="0" scrolling="no"></iframe>';
-      $standaloneText.val(dataToCopy);
-    }
-
-    $standaloneHeight.change(function () {
-      generateEmbedHTML();
-    });
-    $standaloneWidth.change(function () {
-      generateEmbedHTML();
-    });
-    generateEmbedHTML();
-  });
-
  $('#viz_type').change(function () {
    $('#query').submit();
  });
@ -386,15 +244,6 @@ function initExploreView() {
    addFilter(undefined, 'having');
  });

-  const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
-  ReactDOM.render(
-    <QueryAndSaveBtns
-      canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
-      onQuery={() => query(true)}
-    />,
-    queryAndSaveBtnsEl
-  );
-
  function createChoices(term, data) {
    const filtered = $(data).filter(function () {
      return this.text.localeCompare(term) === 0;
@ -487,6 +336,26 @@ function initExploreView() {
  prepSaveDialog();
 }

+function initComponents() {
+  const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
+  ReactDOM.render(
+    <QueryAndSaveBtns
+      canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
+      onQuery={() => query(true)}
+    />,
+    queryAndSaveBtnsEl
+  );
+
+  const exploreActionsEl = document.getElementById('js-explore-actions');
+  ReactDOM.render(
+    <ExploreActionButtons
+      canDownload={exploreActionsEl.getAttribute('data-can-download')}
+      slice={slice}
+    />,
+    exploreActionsEl
+  );
+}
+
 $(document).ready(function () {
  const data = $('.slice').data('slice');

@ -497,7 +366,10 @@ $(document).ready(function () {
  $('.slice').data('slice', slice);

  // call vis render method, which issues ajax
+  // calls render on the slice for the first time
  query(false, false);

  slice.bindResizeToWindowResize();
+
+  initComponents();
 });
--- a/caravel/assets/javascripts/modules/caravel.js
+++ b/caravel/assets/javascripts/modules/caravel.js
@ -151,19 +151,13 @@ const px = function () {
              .tooltip('fixTitle');
          }
        }
+
        if (data !== undefined) {
-          $('#query_container').html(data.query);
+          slice.viewSqlQuery = data.query;
        }
+
        $('#timer').removeClass('label-warning label-danger');
        $('#timer').addClass('label-success');
-        $('span.view_query').removeClass('disabled');
-        $('#json').click(function () {
-          window.location = data.json_endpoint;
-        });
-        $('#csv').click(function () {
-          window.location = data.csv_endpoint;
-        });
-        $('.btn-group.results span,a').removeAttr('disabled');
        $('.query-and-save button').removeAttr('disabled');
        always(data);
      },
@ -195,7 +189,6 @@ const px = function () {
        container.show();
        $('span.query').removeClass('disabled');
        $('#timer').addClass('btn-danger');
-        $('.btn-group.results span,a').removeAttr('disabled');
        $('.query-and-save button').removeAttr('disabled');
        always(data);
      },
--- a/caravel/assets/spec/javascripts/components/CopyToClipboard_spec.jsx
+++ b/caravel/assets/spec/javascripts/components/CopyToClipboard_spec.jsx
@ -0,0 +1,17 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import CopyToClipboard from '../../../javascripts/components/CopyToClipboard';
+
+describe('CopyToClipboard', () => {
+  const defaultProps = {
+    text: 'some text to copy',
+  };
+
+  it('renders', () => {
+    expect(
+      React.isValidElement(<CopyToClipboard {...defaultProps} />)
+    ).to.equal(true);
+  });
+});
--- a/caravel/assets/spec/javascripts/components/ModalTrigger_spec.jsx
+++ b/caravel/assets/spec/javascripts/components/ModalTrigger_spec.jsx
@ -0,0 +1,19 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import ModalTrigger from '../../../javascripts/components/ModalTrigger';
+
+describe('ModalTrigger', () => {
+  const defaultProps = {
+    triggerNode: <i className="fa fa-link" />,
+    modalTitle: 'My Modal Title',
+    modalBody: <div>Modal Body</div>,
+  };
+
+  it('renders', () => {
+    expect(
+      React.isValidElement(<ModalTrigger {...defaultProps} />)
+    ).to.equal(true);
+  });
+});
--- a/caravel/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/DisplayQueryButton_spec.jsx
@ -0,0 +1,17 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import DisplayQueryButton from '../../../../javascripts/explore/components/DisplayQueryButton';
+
+describe('DisplayQueryButton', () => {
+  const defaultProps = {
+    slice: {
+      viewSqlQuery: 'sql query string',
+    },
+  };
+
+  it('renders', () => {
+    expect(React.isValidElement(<DisplayQueryButton {...defaultProps} />)).to.equal(true);
+  });
+});
--- a/caravel/assets/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
@ -0,0 +1,37 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow, mount } from 'enzyme';
+import { OverlayTrigger } from 'react-bootstrap';
+
+import EmbedCodeButton from '../../../../javascripts/explore/components/EmbedCodeButton';
+
+describe('EmbedCodeButton', () => {
+  const defaultProps = {
+    slice: {
+      data: {
+        standalone_endpoint: 'endpoint_url',
+      },
+    },
+  };
+
+  it('renders', () => {
+    expect(React.isValidElement(<EmbedCodeButton {...defaultProps} />)).to.equal(true);
+  });
+
+  it('renders overlay trigger', () => {
+    const wrapper = shallow(<EmbedCodeButton {...defaultProps} />);
+    expect(wrapper.find(OverlayTrigger)).to.have.length(1);
+  });
+
+  it('returns correct embed code', () => {
+    const wrapper = mount(<EmbedCodeButton {...defaultProps} />);
+    wrapper.setState({
+      height: '1000',
+      width: '2000',
+      srcLink: 'http://localhost/endpoint_url',
+    });
+    const embedHTML = `<iframe src="http://localhost/endpoint_url" width="2000" height="1000" seamless frameBorder="0" scrolling="no"></iframe>`;
+    expect(wrapper.instance().generateEmbedHTML()).to.equal(embedHTML);
+  });
+});
--- a/caravel/assets/spec/javascripts/explore/components/ExploreActionButtons_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/ExploreActionButtons_spec.jsx
@ -0,0 +1,29 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { shallow } from 'enzyme';
+
+import ExploreActionButtons from '../../../../javascripts/explore/components/ExploreActionButtons';
+
+describe('ExploreActionButtons', () => {
+  const defaultProps = {
+    canDownload: 'True',
+    slice: {
+      data: {
+        csv_endpoint: '',
+        json_endpoint: '',
+      },
+    },
+  };
+
+  it('renders', () => {
+    expect(
+      React.isValidElement(<ExploreActionButtons {...defaultProps} />)
+    ).to.equal(true);
+  });
+
+  it('should render 5 children/buttons', () => {
+    const wrapper = shallow(<ExploreActionButtons {...defaultProps} />);
+    expect(wrapper.children()).to.have.length(5);
+  });
+});
--- a/caravel/assets/spec/javascripts/explore/components/URLShortLinkButton_spec.jsx
+++ b/caravel/assets/spec/javascripts/explore/components/URLShortLinkButton_spec.jsx
@ -0,0 +1,17 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+
+import URLShortLinkButton from '../../../../javascripts/explore/components/URLShortLinkButton';
+
+describe('URLShortLinkButton', () => {
+  const defaultProps = {
+    slice: {
+      querystring: () => 'query string',
+    },
+  };
+
+  it('renders', () => {
+    expect(React.isValidElement(<URLShortLinkButton {...defaultProps} />)).to.equal(true);
+  });
+});
--- a/caravel/templates/caravel/explore.html
+++ b/caravel/templates/caravel/explore.html
@ -205,29 +205,12 @@
                      data-toggle="tooltip">
                      {{ _("0 sec") }}
                    </span>
-                    <div class="btn-group results" role="group">
-                      <a role="button" tabindex="0" class="btn btn-default btn-sm" id="shortner" data-toggle="popover" data-trigger="focus">
-                        <i class="fa fa-link" data-toggle="tooltip" title="{{ _("Short URL") }}"></i>&nbsp;
-                      </a>
-                      <span class="btn btn-default btn-sm" id="standalone" title="{{ _("Generate an embeddable iframe") }}" data-toggle="tooltip">
-                        <i class="fa fa-code"></i>&nbsp;
-                      </span>
-                      <span class="btn btn-default btn-sm" id="json" title="{{ _("Export to .json")}}" data-toggle="tooltip">
-                        <i class="fa fa-file-code-o"></i>
-                        .json
-                      </span>
-                      <span class="btn btn-default btn-sm {{ "disabled disabledButton" if not can_download }}" id="csv" title="{{ _("Export to .csv format") }}" data-toggle="tooltip">
-                        <i class="fa fa-file-text-o"></i>.csv
-                      </span>
-                      <span
-                        class="btn btn-default btn-sm disabled view_query"
-                        data-toggle="modal"
-                        data-target="#query_modal">
-                        <span data-toggle="tooltip" title="{{ _("View database query") }}">
-                          {{ _("query") }}
-                        </span>
-                      </span>
-                    </div>
+
+                    <span
+                      id="js-explore-actions"
+                      data-can-download="{{can_download}}"
+                    >
+                    </span>
                  </div>
                </div>
              </div>
@ -245,24 +228,7 @@
          </div>
        </div>
      </div>
-      <div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
-              <h4 class="modal-title">{{ _("Query") }}</h4>
-            </div>
-            <div class="modal-body">
-              <pre id="query_container"></pre>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">{{ _("Close") }}</button>
-            </div>
-          </div>
-        </div>
-      </div>
+
      <div class="modal fade" id="sourceinfo_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">