From ae54ac9d58892878c37ff47d4504299d01edba21 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Mon, 3 Oct 2016 23:58:47 -0700
Subject: [PATCH] [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  | 4 ++--
 caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx  | 6 ++++--
 .../{SqlEditorLeft.jsx => SqlEditorTopToolbar.jsx}          | 2 +-
 .../javascripts/SqlLab/components/TabbedSqlEditors.jsx      | 3 +++
 .../assets/javascripts/SqlLab/components/TableElement.jsx   | 2 +-
 .../assets/javascripts/SqlLab/components/VisualizeModal.jsx | 2 +-
 6 files changed, 12 insertions(+), 7 deletions(-)
 rename caravel/assets/javascripts/SqlLab/components/{SqlEditorLeft.jsx => SqlEditorTopToolbar.jsx} (99%)

diff --git a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
index 3f728dc550..72cf9e6572 100644
--- a/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -54,8 +54,8 @@ class SouthPane extends React.Component {
     }
     return (
       <div className="SouthPane">
-        <Tabs bsStyle="tabs">
-          <Tab title="Results" eventKey={1}>
+        <Tabs bsStyle="tabs" id={shortid.generate()}>
+          <Tab title="Results" eventKey={1} id={shortid.generate()}>
             <div style={{ overflow: 'auto' }}>
               {results}
             </div>
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
index af2fc4f47c..70c81318cf 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx
+++ b/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
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx
similarity index 99%
rename from caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
rename to caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx
index 25ca82d56c..c6653ca033 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
+++ b/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 &&
diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
index 8d65c9be0e..df49c653e8 100644
--- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/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" />
diff --git a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx b/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
index a2f108f7ee..abc84a8fcc 100644
--- a/caravel/assets/javascripts/SqlLab/components/TableElement.jsx
+++ b/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>
diff --git a/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx b/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx
index ee8d2cd3e9..6c0b0fa52d 100644
--- a/caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx
+++ b/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,