[sqllab] some frontend tests (#1400)

* [sqllab] some frontend tests * linting * Addressing comments * Addressing unaddressed comments * Touchups
apache · Oct 25, 2016 · 940659b · 940659b
1 parent 7c59337
commit 940659b
Show file tree

Hide file tree

Showing 44 changed files with 875 additions and 558 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 *.pyc
+caravel/assets/coverage/*
 changelog.sh
 .DS_Store
 .coverage

diff --git a/caravel/assets/.eslintignore b/caravel/assets/.eslintignore
@@ -5,6 +5,5 @@ dist/*
 images/*
 node_modules/*
 node_modules*/*
-spec/*
 stylesheets/*
 vendor/*
diff --git a/caravel/assets/javascripts/SqlLab/actions.js b/caravel/assets/javascripts/SqlLab/actions.js
@@ -18,8 +18,6 @@ export const QUERY_EDITOR_SET_TITLE = 'QUERY_EDITOR_SET_TITLE';
 export const QUERY_EDITOR_SET_AUTORUN = 'QUERY_EDITOR_SET_AUTORUN';
 export const QUERY_EDITOR_SET_SQL = 'QUERY_EDITOR_SET_SQL';
 export const SET_DATABASES = 'SET_DATABASES';
-export const ADD_WORKSPACE_QUERY = 'ADD_WORKSPACE_QUERY';
-export const REMOVE_WORKSPACE_QUERY = 'REMOVE_WORKSPACE_QUERY';
 export const SET_ACTIVE_QUERY_EDITOR = 'SET_ACTIVE_QUERY_EDITOR';
 export const ADD_ALERT = 'ADD_ALERT';
 export const REMOVE_ALERT = 'REMOVE_ALERT';
@@ -141,7 +139,8 @@ export function setDatabases(databases) {
 }
 
 export function addQueryEditor(queryEditor) {
-  return { type: ADD_QUERY_EDITOR, queryEditor };
+  const newQe = Object.assign({}, queryEditor, { id: shortid.generate() });
+  return { type: ADD_QUERY_EDITOR, queryEditor: newQe };
 }
 
 export function cloneQueryToNewTab(query) {
@@ -153,7 +152,9 @@ export function setNetworkStatus(networkOn) {
 }
 
 export function addAlert(alert) {
-  return { type: ADD_ALERT, alert };
+  const o = Object.assign({}, alert);
+  o.id = shortid.generate();
+  return { type: ADD_ALERT, o };
 }
 
 export function removeAlert(alert) {
@@ -208,13 +209,6 @@ export function removeTable(table) {
   return { type: REMOVE_TABLE, table };
 }
 
-export function addWorkspaceQuery(query) {
-  return { type: ADD_WORKSPACE_QUERY, query };
-}
-
-export function removeWorkspaceQuery(query) {
-  return { type: REMOVE_WORKSPACE_QUERY, query };
-}
 export function refreshQueries(alteredQueries) {
   return { type: REFRESH_QUERIES, alteredQueries };
 }
diff --git a/caravel/assets/javascripts/SqlLab/components/Alerts.jsx b/caravel/assets/javascripts/SqlLab/components/Alerts.jsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import { Alert } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as Actions from '../actions';
 
 class Alerts extends React.Component {
   removeAlert(alert) {
@@ -11,6 +8,7 @@ class Alerts extends React.Component {
   render() {
     const alerts = this.props.alerts.map((alert) =>
       <Alert
+        key={alert.id}
         bsStyle={alert.bsStyle}
         style={{ width: '500px', textAlign: 'midddle', margin: '10px auto' }}
       >
@@ -33,9 +31,4 @@ Alerts.propTypes = {
   actions: React.PropTypes.object,
 };
 
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
-export default connect(null, mapDispatchToProps)(Alerts);
+export default Alerts;
diff --git a/caravel/assets/javascripts/SqlLab/components/App.jsx b/caravel/assets/javascripts/SqlLab/components/App.jsx
@@ -48,7 +48,7 @@ class App extends React.Component {
     }
     return (
       <div className="App SqlLab">
-        <Alerts alerts={this.props.alerts} />
+        <Alerts alerts={this.props.alerts} actions={this.props.actions} />
         <DataPreviewModal />
         <div className="container-fluid">
           {content}
@@ -60,6 +60,7 @@ class App extends React.Component {
 
 App.propTypes = {
   alerts: React.PropTypes.array,
+  actions: React.PropTypes.object,
 };
 
 function mapStateToProps(state) {
@@ -73,4 +74,5 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
+export { App };
 export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx
diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx
@@ -3,11 +3,11 @@ import CopyToClipboard from '../../components/CopyToClipboard';
 import { getShortUrl } from '../../../utils/common';
 
 const propTypes = {
-  qe: React.PropTypes.object,
+  queryEditor: React.PropTypes.object,
 };
 
 const defaultProps = {
-  qe: null,
+  queryEditor: null,
 };
 
 export default class CopyQueryTabUrl extends React.Component {
@@ -20,7 +20,7 @@ export default class CopyQueryTabUrl extends React.Component {
 
   componentWillMount() {
     const params = [];
-    const qe = this.props.qe;
+    const qe = this.props.queryEditor;
     if (qe.dbId) params.push('dbid=' + qe.dbId);
     if (qe.title) params.push('title=' + encodeURIComponent(qe.title));
     if (qe.schema) params.push('schema=' + encodeURIComponent(qe.schema));

diff --git a/caravel/assets/javascripts/SqlLab/components/DataPreviewModal.jsx b/caravel/assets/javascripts/SqlLab/components/DataPreviewModal.jsx
@@ -32,7 +32,7 @@ class DataPreviewModal extends React.Component {
             </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <ResultSet query={query} visualize={false} csv={false} />
+            <ResultSet query={query} visualize={false} csv={false} actions={this.props.actions} />
           </Modal.Body>
         </Modal>
       );

diff --git a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
@@ -1,9 +1,6 @@
 const $ = window.$ = require('jquery');
 import React from 'react';
-import { bindActionCreators } from 'redux';
 import Select from 'react-select';
-import { connect } from 'react-redux';
-import * as Actions from '../actions';
 
 class DatabaseSelect extends React.Component {
   constructor(props) {
@@ -53,15 +50,4 @@ DatabaseSelect.propTypes = {
   valueRenderer: React.PropTypes.func,
 };
 
-DatabaseSelect.defaultProps = {
-  onChange: () => {},
-  databaseId: null,
-};
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
-
-export default connect(null, mapDispatchToProps)(DatabaseSelect);
+export default DatabaseSelect;
diff --git a/caravel/assets/javascripts/SqlLab/components/Link.jsx b/caravel/assets/javascripts/SqlLab/components/Link.jsx
@@ -1,6 +1,24 @@
 import React from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
+const propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  href: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+  placement: React.PropTypes.string,
+  style: React.PropTypes.object,
+  tooltip: React.PropTypes.string,
+};
+const defaultProps = {
+  className: '',
+  href: '#',
+  onClick: () => {},
+  placement: 'top',
+  style: {},
+  tooltip: null,
+};
+
 
 class Link extends React.Component {
   render() {
@@ -34,21 +52,7 @@ class Link extends React.Component {
     return link;
   }
 }
-Link.propTypes = {
-  children: React.PropTypes.object,
-  className: React.PropTypes.string,
-  href: React.PropTypes.string,
-  onClick: React.PropTypes.func,
-  placement: React.PropTypes.string,
-  style: React.PropTypes.object,
-  tooltip: React.PropTypes.string,
-};
-Link.defaultProps = {
-  disabled: false,
-  href: '#',
-  tooltip: null,
-  placement: 'top',
-  onClick: () => {},
-};
+Link.propTypes = propTypes;
+Link.defaultProps = defaultProps;
 
 export default Link;
diff --git a/caravel/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx b/caravel/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx
@@ -30,14 +30,10 @@ class QueryAutoRefresh extends React.Component {
       if (Object.keys(data).length > 0) {
         this.props.actions.refreshQueries(data);
       }
-      if (!this.props.networkOn) {
-        this.props.actions.setNetworkStatus(true);
-      }
+      this.props.actions.setNetworkStatus(true);
     })
     .fail(() => {
-      if (this.props.networkOn) {
-        this.props.actions.setNetworkStatus(false);
-      }
+      this.props.actions.setNetworkStatus(false);
     });
   }
   render() {
@@ -47,7 +43,6 @@ class QueryAutoRefresh extends React.Component {
 QueryAutoRefresh.propTypes = {
   actions: React.PropTypes.object,
   queriesLastUpdate: React.PropTypes.number,
-  networkOn: React.PropTypes.bool,
 };
 QueryAutoRefresh.defaultProps = {
   // queries: null,
@@ -56,7 +51,6 @@ QueryAutoRefresh.defaultProps = {
 function mapStateToProps(state) {
   return {
     queriesLastUpdate: state.queriesLastUpdate,
-    networkOn: state.networkOn,
   };
 }
 

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx b/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx
@@ -1,28 +1,23 @@
 import React from 'react';
 
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as Actions from '../actions';
-
 import QueryTable from './QueryTable';
 import { Alert } from 'react-bootstrap';
 
+const propTypes = {
+  queries: React.PropTypes.array.isRequired,
+  actions: React.PropTypes.object.isRequired,
+};
+
 const QueryHistory = (props) => {
-  const activeQeId = props.tabHistory[props.tabHistory.length - 1];
-  const queriesArray = [];
-  for (const id in props.queries) {
-    if (props.queries[id].sqlEditorId === activeQeId) {
-      queriesArray.push(props.queries[id]);
-    }
-  }
-  if (queriesArray.length > 0) {
+  if (props.queries.length > 0) {
     return (
       <QueryTable
         columns={[
           'state', 'started', 'duration', 'progress',
           'rows', 'sql', 'output', 'actions',
         ]}
-        queries={queriesArray}
+        queries={props.queries}
+        actions={props.actions}
       />
     );
   }
@@ -32,27 +27,6 @@ const QueryHistory = (props) => {
     </Alert>
   );
 };
+QueryHistory.propTypes = propTypes;
 
-QueryHistory.defaultProps = {
-  queries: {},
-};
-
-QueryHistory.propTypes = {
-  queries: React.PropTypes.object,
-  tabHistory: React.PropTypes.array,
-  actions: React.PropTypes.object,
-};
-
-function mapStateToProps(state) {
-  return {
-    queries: state.queries,
-    tabHistory: state.tabHistory,
-  };
-}
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(QueryHistory);
+export default QueryHistory;