[sql-lab] fix react warnings in dev (#1232)

* rename file to match class

* fix react warnings

* fix proptype typo

* add missing keys

caravel/assets/javascripts/SqlLab/components/SouthPane.jsx

@@ -54,8 +54,8 @@ class SouthPane extends React.Component {
     }
     return (
       <div className="SouthPane">
-        <Tabs bsStyle="tabs">
+        <Tabs bsStyle="tabs" id={shortid.generate()}>
-          <Tab title="Results" eventKey={1}>
+          <Tab title="Results" eventKey={1} id={shortid.generate()}>
             <div style={{ overflow: 'auto' }}>
               {results}
             </div>

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

@@ -28,7 +28,7 @@ import shortid from 'shortid';
 import SouthPane from './SouthPane';
 import Timer from './Timer';
 
-import SqlEditorLeft from './SqlEditorLeft';
+import SqlEditorTopToolbar from './SqlEditorTopToolbar';
 
 class SqlEditor extends React.Component {
   constructor(props) {
@@ -155,6 +155,7 @@ class SqlEditor extends React.Component {
           style={{ width: '100px' }}
           onClick={this.runQuery.bind(this, false)}
           disabled={!(this.props.queryEditor.dbId)}
+          key={shortid.generate()}
         >
           <i className="fa fa-table" /> Run Query
         </Button>
@@ -168,6 +169,7 @@ class SqlEditor extends React.Component {
           style={{ width: '100px' }}
           onClick={this.runQuery.bind(this, true)}
           disabled={!(this.props.queryEditor.dbId)}
+          key={shortid.generate()}
         >
           <i className="fa fa-table" /> Run Async
         </Button>
@@ -250,7 +252,7 @@ class SqlEditor extends React.Component {
       <div className="SqlEditor" style={{ minHeight: this.sqlEditorHeight() }}>
         <Row>
           <Col md={3}>
-            <SqlEditorLeft queryEditor={this.props.queryEditor} />
+            <SqlEditorTopToolbar queryEditor={this.props.queryEditor} />
           </Col>
           <Col md={9}>
             <AceEditor

caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx

@@ -142,7 +142,7 @@ class SqlEditorTopToolbar extends React.Component {
         <hr />
         <div className="m-t-5">
           {tables.map((table) => (
-            <TableElement table={table} queryEditor={this.props.queryEditor} />
+            <TableElement table={table} queryEditor={this.props.queryEditor} key={table.id} />
           ))}
         </div>
         {shouldShowReset &&

caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx

@@ -100,6 +100,7 @@ class TabbedSqlEditors extends React.Component {
           <DropdownButton
             bsSize="small"
             id={'ddbtn-tab-' + i}
+            title=""
           >
             <MenuItem eventKey="1" onClick={this.props.actions.removeQueryEditor.bind(this, qe)}>
               <i className="fa fa-close" /> close tab
@@ -118,6 +119,7 @@ class TabbedSqlEditors extends React.Component {
           key={qe.id}
           title={tabTitle}
           eventKey={qe.id}
+          id={`a11y-query-editor-${qe.id}`}
         >
           <div className="panel panel-default">
             <div className="panel-body">
@@ -135,6 +137,7 @@ class TabbedSqlEditors extends React.Component {
         bsStyle="tabs"
         activeKey={this.props.tabHistory[this.props.tabHistory.length - 1]}
         onSelect={this.handleSelect.bind(this)}
+        id="a11y-query-editor-tabs"
       >
         {editors}
         <Tab title={<div><i className="fa fa-plus-circle" />&nbsp;</div>} eventKey="add_tab" />

caravel/assets/javascripts/SqlLab/components/TableElement.jsx

@@ -64,7 +64,7 @@ class TableElement extends React.Component {
       metadata = (
         <div>
           {this.props.table.columns.map((col) => (
-            <div className="clearfix">
+            <div className="clearfix" key={shortid.generate()}>
               <div className="pull-left m-l-10">
                 {col.name}
               </div>

caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx

@@ -209,7 +209,7 @@ class VisualizeModal extends React.Component {
 VisualizeModal.propTypes = {
   query: React.PropTypes.object,
   show: React.PropTypes.bool,
-  onHide: React.PropTypes.function,
+  onHide: React.PropTypes.func,
 };
 VisualizeModal.defaultProps = {
   show: false,