Bumping the JS libs to fix the build (#2616)

* bumping the js libs * New linting rules * More linting * More * Done linting * npm >=4.5.0 * Bumping node * Tweaking the build * Fixing the damn build * Fixing the apps
2026-04-13 05:07:53 +00:00 · 2017-04-13 15:04:09 -07:00
parent a2b30f35fc
commit 366ecefbaa
132 changed files with 611 additions and 553 deletions
--- a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
+++ b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
@@ -59,15 +59,9 @@ class AceEditorWrapper extends React.PureComponent {
      this.setState({ sql: nextProps.sql });
    }
  }
-  textChange(text) {
-    this.setState({ sql: text });
-  }
  onBlur() {
    this.props.onBlur(this.state.sql);
  }
-  getCompletions(aceEditor, session, pos, prefix, callback) {
-    callback(null, this.state.words);
-  }
  onEditorLoad(editor) {
    editor.commands.addCommand({
      name: 'runQuery',
@@ -87,10 +81,10 @@ class AceEditorWrapper extends React.PureComponent {
    let words = [];
    const columns = {};
    const tables = props.tables || [];
-    tables.forEach(t => {
+    tables.forEach((t) => {
      words.push({ name: t.name, value: t.name, score: 55, meta: 'table' });
      const cols = t.columns || [];
-      cols.forEach(col => {
+      cols.forEach((col) => {
        columns[col.name] = null;  // using an object as a unique set
      });
    });
@@ -107,6 +101,12 @@ class AceEditorWrapper extends React.PureComponent {
      }
    });
  }
+  getCompletions(aceEditor, session, pos, prefix, callback) {
+    callback(null, this.state.words);
+  }
+  textChange(text) {
+    this.setState({ sql: text });
+  }
  render() {
    return (
      <AceEditor
--- a/superset/assets/javascripts/SqlLab/components/App.jsx
+++ b/superset/assets/javascripts/SqlLab/components/App.jsx
@@ -1,14 +1,14 @@
-const $ = window.$ = require('jquery');
-import * as Actions from '../actions';
 import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';

 import TabbedSqlEditors from './TabbedSqlEditors';
 import QueryAutoRefresh from './QueryAutoRefresh';
 import QuerySearch from './QuerySearch';
 import AlertsWrapper from '../../components/AlertsWrapper';
+import * as Actions from '../actions';

-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+const $ = window.$ = require('jquery');

 class App extends React.PureComponent {
  constructor(props) {
@@ -28,6 +28,9 @@ class App extends React.PureComponent {
    window.removeEventListener('hashchange', this.onHashChanged.bind(this));
    window.removeEventListener('resize', this.handleResize.bind(this));
  }
+  onHashChanged() {
+    this.setState({ hash: window.location.hash });
+  }
  getHeight() {
    const navHeight = 90;
    const headerHeight = $('.nav-tabs').outerHeight() ?
@@ -39,9 +42,6 @@ class App extends React.PureComponent {
  handleResize() {
    this.setState({ contentHeight: this.getHeight() });
  }
-  onHashChanged() {
-    this.setState({ hash: window.location.hash });
-  }
  render() {
    let content;
    if (this.state.hash) {
--- a/superset/assets/javascripts/SqlLab/components/ColumnElement.jsx
+++ b/superset/assets/javascripts/SqlLab/components/ColumnElement.jsx
@@ -17,43 +17,39 @@ const tooltipTitleMap = {
  index: 'Index',
 };

-class ColumnElement extends React.PureComponent {
-  render() {
-    const col = this.props.column;
-    let name = col.name;
-    let icons;
-    if (col.keys && col.keys.length > 0) {
-      name = <strong>{col.name}</strong>;
-      icons = col.keys.map((key, i) => (
-        <span key={i} className="ColumnElement">
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="idx-json" bsSize="lg">
-                <strong>{tooltipTitleMap[key.type]}</strong>
-                <hr />
-                <pre className="text-small">
-                  {JSON.stringify(key, null, '  ')}
-                </pre>
-              </Tooltip>
-              }
-          >
-            <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
-          </OverlayTrigger>
-        </span>
-      ));
-    }
-    return (
-      <div className="clearfix table-column">
-        <div className="pull-left m-l-10 col-name">
-          {name}{icons}
-        </div>
-        <div className="pull-right text-muted">
-          <small> {col.type}</small>
-        </div>
-      </div>);
+export default function ColumnElement(props) {
+  const col = props.column;
+  let name = col.name;
+  let icons;
+  if (col.keys && col.keys.length > 0) {
+    name = <strong>{col.name}</strong>;
+    icons = col.keys.map((key, i) => (
+      <span key={i} className="ColumnElement">
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id="idx-json" bsSize="lg">
+              <strong>{tooltipTitleMap[key.type]}</strong>
+              <hr />
+              <pre className="text-small">
+                {JSON.stringify(key, null, '  ')}
+              </pre>
+            </Tooltip>
+            }
+        >
+          <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
+        </OverlayTrigger>
+      </span>
+    ));
  }
+  return (
+    <div className="clearfix table-column">
+      <div className="pull-left m-l-10 col-name">
+        {name}{icons}
+      </div>
+      <div className="pull-right text-muted">
+        <small> {col.type}</small>
+      </div>
+    </div>);
 }
 ColumnElement.propTypes = propTypes;
-
-export default ColumnElement;
--- a/superset/assets/javascripts/SqlLab/components/DataPreviewModal.jsx
+++ b/superset/assets/javascripts/SqlLab/components/DataPreviewModal.jsx
@@ -1,9 +1,9 @@
-import * as Actions from '../actions';
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Modal } from 'react-bootstrap';

+import * as Actions from '../actions';
 import ResultSet from './ResultSet';

 const propTypes = {
--- a/superset/assets/javascripts/SqlLab/components/HighlightedSql.jsx
+++ b/superset/assets/javascripts/SqlLab/components/HighlightedSql.jsx
@@ -25,38 +25,35 @@ class HighlightedSql extends React.Component {
    };
  }
  shrinkSql() {
-    const props = this.props;
-    const sql = props.sql || '';
+    const sql = this.props.sql || '';
    let lines = sql.split('\n');
-    if (lines.length >= props.maxLines) {
-      lines = lines.slice(0, props.maxLines);
+    if (lines.length >= this.props.maxLines) {
+      lines = lines.slice(0, this.props.maxLines);
      lines.push('{...}');
    }
    return lines.map((line) => {
-      if (line.length > props.maxWidth) {
-        return line.slice(0, props.maxWidth) + '{...}';
+      if (line.length > this.props.maxWidth) {
+        return line.slice(0, this.props.maxWidth) + '{...}';
      }
      return line;
    })
    .join('\n');
  }
  triggerNode() {
-    const props = this.props;
-    let shownSql = props.shrink ? this.shrinkSql(props.sql) : props.sql;
+    const shownSql = this.props.shrink ? this.shrinkSql(this.props.sql) : this.props.sql;
    return (
      <SyntaxHighlighter language="sql" style={github}>
        {shownSql}
      </SyntaxHighlighter>);
  }
  generateModal() {
-    const props = this.props;
    let rawSql;
-    if (props.rawSql && props.rawSql !== this.props.sql) {
+    if (this.props.rawSql && this.props.rawSql !== this.props.sql) {
      rawSql = (
        <div>
          <h4>Raw SQL</h4>
          <SyntaxHighlighter language="sql" style={github}>
-            {props.rawSql}
+            {this.props.rawSql}
          </SyntaxHighlighter>
        </div>
      );
--- a/superset/assets/javascripts/SqlLab/components/Link.jsx
+++ b/superset/assets/javascripts/SqlLab/components/Link.jsx
@@ -22,7 +22,7 @@ const defaultProps = {

 class Link extends React.PureComponent {
  render() {
-    let tooltip = (
+    const tooltip = (
      <Tooltip id="tooltip">
        {this.props.tooltip}
      </Tooltip>
@@ -34,7 +34,7 @@ class Link extends React.PureComponent {
        style={this.props.style}
        className={'Link ' + this.props.className}
      >
-          {this.props.children}
+        {this.props.children}
      </a>
    );
    if (this.props.tooltip) {
--- a/superset/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import * as Actions from '../actions';

 const $ = require('jquery');
+
 const QUERY_UPDATE_FREQ = 2000;
 const QUERY_UPDATE_BUFFER_MS = 5000;

--- a/superset/assets/javascripts/SqlLab/components/QueryHistory.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QueryHistory.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Alert } from 'react-bootstrap';

 import QueryTable from './QueryTable';
-import { Alert } from 'react-bootstrap';

 const propTypes = {
  queries: React.PropTypes.array.isRequired,
--- a/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QuerySearch.jsx
@@ -1,4 +1,3 @@
-const $ = window.$ = require('jquery');
 import React from 'react';
 import { Button } from 'react-bootstrap';
 import Select from 'react-select';
@@ -8,8 +7,11 @@ import { now, epochTimeXHoursAgo,
 import { STATUS_OPTIONS, TIME_OPTIONS } from '../constants';
 import AsyncSelect from '../../components/AsyncSelect';

+const $ = window.$ = require('jquery');
+
 const propTypes = {
  actions: React.PropTypes.object.isRequired,
+  height: React.PropTypes.integer,
 };

 class QuerySearch extends React.PureComponent {
@@ -75,7 +77,7 @@ class QuerySearch extends React.PureComponent {
  }
  insertParams(baseUrl, params) {
    const validParams = params.filter(
-      function (p) { return p !== ''; }
+      function (p) { return p !== ''; },
    );
    return baseUrl + '?' + validParams.join('&');
  }
@@ -94,7 +96,7 @@ class QuerySearch extends React.PureComponent {
    return options;
  }
  dbMutator(data) {
-    const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
+    const options = data.result.map(db => ({ value: db.id, label: db.database_name }));
    this.props.actions.setDatabases(data.result);
    if (data.result.length === 0) {
      this.props.actions.addAlert({
@@ -154,8 +156,8 @@ class QuerySearch extends React.PureComponent {
            <Select
              name="select-from"
              placeholder="[From]-"
-              options={TIME_OPTIONS.
-                slice(1, TIME_OPTIONS.length).map((t) => ({ value: t, label: t }))}
+              options={TIME_OPTIONS
+                .slice(1, TIME_OPTIONS.length).map(t => ({ value: t, label: t }))}
              value={this.state.from}
              autosize={false}
              onChange={this.changeFrom.bind(this)}
@@ -165,7 +167,7 @@ class QuerySearch extends React.PureComponent {
            <Select
              name="select-to"
              placeholder="[To]-"
-              options={TIME_OPTIONS.map((t) => ({ value: t, label: t }))}
+              options={TIME_OPTIONS.map(t => ({ value: t, label: t }))}
              value={this.state.to}
              autosize={false}
              onChange={this.changeTo.bind(this)}
@@ -175,7 +177,7 @@ class QuerySearch extends React.PureComponent {
            <Select
              name="select-status"
              placeholder="[Query Status]"
-              options={STATUS_OPTIONS.map((s) => ({ value: s, label: s }))}
+              options={STATUS_OPTIONS.map(s => ({ value: s, label: s }))}
              value={this.state.status}
              isLoading={false}
              autosize={false}
@@ -190,23 +192,23 @@ class QuerySearch extends React.PureComponent {
          (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)
          :
          (
-          <div
-            style={{ height: this.props.height }}
-            className="scrollbar-container"
-          >
-            <div className="scrollbar-content">
-              <QueryTable
-                columns={[
-                  'state', 'db', 'user', 'time',
-                  'progress', 'rows', 'sql', 'querylink',
-                ]}
-                onUserClicked={this.onUserClicked.bind(this)}
-                onDbClicked={this.onDbClicked.bind(this)}
-                queries={this.state.queriesArray}
-                actions={this.props.actions}
-              />
+            <div
+              style={{ height: this.props.height }}
+              className="scrollbar-container"
+            >
+              <div className="scrollbar-content">
+                <QueryTable
+                  columns={[
+                    'state', 'db', 'user', 'time',
+                    'progress', 'rows', 'sql', 'querylink',
+                  ]}
+                  onUserClicked={this.onUserClicked.bind(this)}
+                  onDbClicked={this.onDbClicked.bind(this)}
+                  queries={this.state.queriesArray}
+                  actions={this.props.actions}
+                />
+              </div>
            </div>
-          </div>
          )
        }
      </div>
--- a/superset/assets/javascripts/SqlLab/components/QueryTable.jsx
+++ b/superset/assets/javascripts/SqlLab/components/QueryTable.jsx
@@ -141,7 +141,7 @@ class QueryTable extends React.PureComponent {
        // if query was run using ctas and force_ctas_schema was set
        // tempTable will have the schema
        const schemaUsed = q.ctas && q.tempTable && q.tempTable.includes('.') ? '' : q.schema;
-        q.output = [schemaUsed, q.tempTable].filter((v) => (v)).join('.');
+        q.output = [schemaUsed, q.tempTable].filter(v => (v)).join('.');
      }
      q.progress = (
        <ProgressBar
--- a/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
+++ b/superset/assets/javascripts/SqlLab/components/ResultSet.jsx
@@ -17,6 +17,7 @@ const propTypes = {
  showSql: React.PropTypes.bool,
  visualize: React.PropTypes.bool,
  cache: React.PropTypes.bool,
+  resultSetHeight: React.PropTypes.number,
 };
 const defaultProps = {
  search: true,
@@ -36,7 +37,6 @@ class ResultSet extends React.PureComponent {
      searchText: '',
      showModal: false,
      data: [],
-      resultSetHeight: '0',
    };
  }
  componentWillReceiveProps(nextProps) {
@@ -46,7 +46,7 @@ class ResultSet extends React.PureComponent {
      && nextProps.query.results.data.length > 0) {
      this.setState(
        { data: nextProps.query.results.data },
-        this.clearQueryResults(nextProps.query)
+        this.clearQueryResults(nextProps.query),
      );
    }
    if (nextProps.query.resultsKey
@@ -204,7 +204,7 @@ class ResultSet extends React.PureComponent {
                  const newRow = {};
                  for (const k in row) {
                    const val = row[k];
-                    if (typeof(val) === 'string') {
+                    if (typeof (val) === 'string') {
                      newRow[k] = val;
                    } else {
                      newRow[k] = JSON.stringify(val);
@@ -212,11 +212,11 @@ class ResultSet extends React.PureComponent {
                  }
                  return newRow;
                })}
-                columns={results.columns.map((col) => col.name)}
+                columns={results.columns.map(col => col.name)}
                sortable
                className="table table-condensed table-bordered"
                filterBy={this.state.searchText}
-                filterable={results.columns.map((c) => c.name)}
+                filterable={results.columns.map(c => c.name)}
                hideFilterInput
              />
            </div>
--- a/superset/assets/javascripts/SqlLab/components/SaveQuery.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SaveQuery.jsx
@@ -51,6 +51,9 @@ class SaveQuery extends React.PureComponent {
  onDescriptionChange(e) {
    this.setState({ description: e.target.value });
  }
+  toggleSave(e) {
+    this.setState({ target: e.target, showSave: !this.state.showSave });
+  }
  renderPopover() {
    return (
      <Popover id="embed-code-popover">
@@ -103,9 +106,6 @@ class SaveQuery extends React.PureComponent {
      </Popover>
    );
  }
-  toggleSave(e) {
-    this.setState({ target: e.target, showSave: !this.state.showSave });
-  }
  render() {
    return (
      <span className="SaveQuery">
--- a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -1,12 +1,12 @@
+import React from 'react';
+import shortid from 'shortid';
 import { Alert, Tab, Tabs } from 'react-bootstrap';
-import QueryHistory from './QueryHistory';
-import ResultSet from './ResultSet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import * as Actions from '../actions';
-import React from 'react';

-import shortid from 'shortid';
+import * as Actions from '../actions';
+import QueryHistory from './QueryHistory';
+import ResultSet from './ResultSet';

 /*
    editorQueries are queries executed by users passed from SqlEditor component
@@ -78,7 +78,7 @@ class SouthPane extends React.PureComponent {
      results = <Alert bsStyle="info">Run a query to display results here</Alert>;
    }

-    const dataPreviewTabs = props.dataPreviewQueries.map((query) => (
+    const dataPreviewTabs = props.dataPreviewQueries.map(query => (
      <Tab
        title={`Preview for ${query.tableName}`}
        eventKey={query.id}
--- a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
@@ -19,7 +19,7 @@ import SaveQuery from './SaveQuery';
 import Timer from '../../components/Timer';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
-import { STATE_BSSTYLE_MAP } from '../constants.js';
+import { STATE_BSSTYLE_MAP } from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';

 const propTypes = {
@@ -59,6 +59,9 @@ class SqlEditor extends React.PureComponent {
      this.startQuery();
    }
  }
+  setQueryEditorSql(sql) {
+    this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
+  }
  runQuery(runAsync = false) {
    let effectiveRunAsync = runAsync;
    if (!this.props.database.allow_run_sync) {
@@ -87,9 +90,6 @@ class SqlEditor extends React.PureComponent {
  createTableAs() {
    this.startQuery(true, true);
  }
-  setQueryEditorSql(sql) {
-    this.props.actions.queryEditorSetSql(this.props.queryEditor, sql);
-  }
  ctasChanged(event) {
    this.setState({ ctas: event.target.value });
  }
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -1,11 +1,13 @@
-const $ = window.$ = require('jquery');
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import TableElement from './TableElement';
-import AsyncSelect from '../../components/AsyncSelect';
 import Select from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';

+import TableElement from './TableElement';
+import AsyncSelect from '../../components/AsyncSelect';
+
+const $ = window.$ = require('jquery');
+
 const propTypes = {
  queryEditor: React.PropTypes.object.isRequired,
  tables: React.PropTypes.array,
@@ -43,8 +45,16 @@ class SqlEditorLeftBar extends React.PureComponent {
      this.fetchSchemas(val);
    }
  }
+  getTableNamesBySubStr(input) {
+    if (!this.props.queryEditor.dbId || !input) {
+      return Promise.resolve({ options: [] });
+    }
+    const url = `/superset/tables/${this.props.queryEditor.dbId}/` +
+                `${this.props.queryEditor.schema}/${input}`;
+    return $.get(url).then(data => ({ options: data.options }));
+  }
  dbMutator(data) {
-    const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
+    const options = data.result.map(db => ({ value: db.id, label: db.database_name }));
    this.props.actions.setDatabases(data.result);
    if (data.result.length === 0) {
      this.props.actions.addAlert({
@@ -57,14 +67,6 @@ class SqlEditorLeftBar extends React.PureComponent {
  resetState() {
    this.props.actions.resetState();
  }
-  getTableNamesBySubStr(input) {
-    if (!this.props.queryEditor.dbId || !input) {
-      return Promise.resolve({ options: [] });
-    }
-    const url = `/superset/tables/${this.props.queryEditor.dbId}/` +
-                `${this.props.queryEditor.schema}/${input}`;
-    return $.get(url).then((data) => ({ options: data.options }));
-  }
  fetchTables(dbId, schema, substr) {
    // This can be large so it shouldn't be put in the Redux store
    if (dbId && schema) {
@@ -117,7 +119,7 @@ class SqlEditorLeftBar extends React.PureComponent {
      this.setState({ schemaLoading: true });
      const url = `/superset/schemas/${actualDbId}/`;
      $.get(url, (data) => {
-        const schemaOptions = data.schemas.map((s) => ({ value: s, label: s }));
+        const schemaOptions = data.schemas.map(s => ({ value: s, label: s }));
        this.setState({ schemaOptions });
        this.setState({ schemaLoading: false });
      });
@@ -138,7 +140,7 @@ class SqlEditorLeftBar extends React.PureComponent {
              value={this.props.queryEditor.dbId}
              databaseId={this.props.queryEditor.dbId}
              actions={this.props.actions}
-              valueRenderer={(o) => (
+              valueRenderer={o => (
                <div>
                  <span className="text-muted">Database:</span> {o.label}
                </div>
@@ -153,7 +155,7 @@ class SqlEditorLeftBar extends React.PureComponent {
              placeholder={`Select a schema (${this.state.schemaOptions.length})`}
              options={this.state.schemaOptions}
              value={this.props.queryEditor.schema}
-              valueRenderer={(o) => (
+              valueRenderer={o => (
                <div>
                  <span className="text-muted">Schema:</span> {o.label}
                </div>
@@ -183,7 +185,7 @@ class SqlEditorLeftBar extends React.PureComponent {
                name="async-select-table"
                ref="selectTable"
                value={this.state.tableName}
-                placeholder={"Type to search ..."}
+                placeholder={'Type to search ...'}
                autosize={false}
                onChange={this.changeTable.bind(this)}
                loadOptions={this.getTableNamesBySubStr.bind(this)}
@@ -192,7 +194,7 @@ class SqlEditorLeftBar extends React.PureComponent {
          </div>
          <hr />
          <div className="m-t-5">
-            {this.props.tables.map((table) => (
+            {this.props.tables.map(table => (
              <TableElement
                table={table}
                key={table.id}
--- a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -2,14 +2,16 @@ import React from 'react';
 import { DropdownButton, MenuItem, Tab, Tabs } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import URI from 'urijs';
+
 import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import CopyQueryTabUrl from './CopyQueryTabUrl';
 import { areArraysShallowEqual } from '../../reduxUtils';
-import URI from 'urijs';

 const propTypes = {
  actions: React.PropTypes.object.isRequired,
+  defaultDbId: React.PropTypes.number,
  databases: React.PropTypes.object.isRequired,
  queries: React.PropTypes.object.isRequired,
  queryEditors: React.PropTypes.array,
@@ -68,11 +70,6 @@ class TabbedSqlEditors extends React.PureComponent {
      this.popNewTab();
    }
  }
-  popNewTab() {
-    queryCount++;
-    // Clean the url in browser history
-    window.history.replaceState({}, document.title, this.state.sqlLabUrl);
-  }
  componentWillReceiveProps(nextProps) {
    const nextActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
    const queriesArray = [];
@@ -96,6 +93,11 @@ class TabbedSqlEditors extends React.PureComponent {
      this.setState({ dataPreviewQueries });
    }
  }
+  popNewTab() {
+    queryCount++;
+    // Clean the url in browser history
+    window.history.replaceState({}, document.title, this.state.sqlLabUrl);
+  }
  renameTab(qe) {
    /* eslint no-alert: 0 */
    const newTitle = prompt('Enter a new title for the tab');
@@ -190,7 +192,7 @@ class TabbedSqlEditors extends React.PureComponent {
              {isSelected &&
                <SqlEditor
                  height={this.props.editorHeight}
-                  tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
+                  tables={this.props.tables.filter(t => (t.queryEditorId === qe.id))}
                  queryEditor={qe}
                  editorQueries={this.state.queriesArray}
                  dataPreviewQueries={this.state.dataPreviewQueries}
--- a/superset/assets/javascripts/SqlLab/components/TableElement.jsx
+++ b/superset/assets/javascripts/SqlLab/components/TableElement.jsx
@@ -57,6 +57,10 @@ class TableElement extends React.PureComponent {
    this.setState({ sortColumns: !this.state.sortColumns });
  }

+  removeFromStore() {
+    this.props.actions.removeTable(this.props.table);
+  }
+
  renderHeader() {
    const table = this.props.table;
    let header;
@@ -119,9 +123,6 @@ class TableElement extends React.PureComponent {
    );
    return metadata;
  }
-  removeFromStore() {
-    this.props.actions.removeTable(this.props.table);
-  }

  render() {
    const table = this.props.table;
--- a/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx
+++ b/superset/assets/javascripts/SqlLab/components/VisualizeModal.jsx
@@ -129,7 +129,7 @@ class VisualizeModal extends React.PureComponent {
        data: JSON.stringify(vizOptions),
      },
      dataType: 'json',
-      success: resp => {
+      success: (resp) => {
        const columns = Object.keys(this.state.columns).map(k => this.state.columns[k]);
        const data = JSON.parse(resp);
        const mainMetric = columns.filter(d => d.agg)[0];
@@ -181,7 +181,7 @@ class VisualizeModal extends React.PureComponent {
        </div>
      );
    }
-    const tableData = this.props.query.results.columns.map((col) => ({
+    const tableData = this.props.query.results.columns.map(col => ({
      column: col.name,
      is_dimension: (
        <input