From b7019ad4f343ecbd5d33ce4a5800a72a9f4301b6 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 28 Nov 2016 16:24:02 -0800
Subject: [PATCH] [sqllab] bugfix SouthPane doesn't update as expected (#1699)

* [sqllab] bugfix SouthPane doesn't update as expected

* Linting
---
 .../SqlLab/components/SouthPane.jsx           |  6 ---
 .../SqlLab/components/TabbedSqlEditors.jsx    | 39 ++++++++++---------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
index ed312eebb060d..5291c38456b3a 100644
--- a/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SouthPane.jsx
@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import React from 'react';
-import { areArraysShallowEqual } from '../../reduxUtils';
 
 import shortid from 'shortid';
 
@@ -28,11 +27,6 @@ class SouthPane extends React.PureComponent {
   switchTab(id) {
     this.props.actions.setActiveSouthPaneTab(id);
   }
-  shouldComponentUpdate(nextProps) {
-    return !areArraysShallowEqual(this.props.editorQueries, nextProps.editorQueries)
-      || !areArraysShallowEqual(this.props.dataPreviewQueries, nextProps.dataPreviewQueries)
-      || this.props.activeSouthPaneTab !== nextProps.activeSouthPaneTab;
-  }
   render() {
     let latestQuery;
     const props = this.props;
diff --git a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
index b843f4871e288..b74169059493a 100644
--- a/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -6,7 +6,7 @@ import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import { getParamFromQuery } from '../../../utils/common';
 import CopyQueryTabUrl from './CopyQueryTabUrl';
-import { areObjectsEqual } from '../../reduxUtils';
+import { areArraysShallowEqual } from '../../reduxUtils';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
@@ -37,6 +37,7 @@ class TabbedSqlEditors extends React.PureComponent {
       cleanUri,
       query,
       queriesArray: [],
+      dataPreviewQueries: [],
       hideLeftBar: false,
     };
   }
@@ -56,17 +57,27 @@ class TabbedSqlEditors extends React.PureComponent {
     }
   }
   componentWillReceiveProps(nextProps) {
-    const activeQeId = this.props.tabHistory[this.props.tabHistory.length - 1];
-    const newActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
-    if (activeQeId !== newActiveQeId || !areObjectsEqual(this.props.queries, nextProps.queries)) {
-      const queriesArray = [];
-      for (const id in this.props.queries) {
-        if (this.props.queries[id].sqlEditorId === newActiveQeId) {
-          queriesArray.push(this.props.queries[id]);
-        }
+    const nextActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
+    const queriesArray = [];
+    for (const id in nextProps.queries) {
+      if (nextProps.queries[id].sqlEditorId === nextActiveQeId) {
+        queriesArray.push(nextProps.queries[id]);
       }
+    }
+    if (!areArraysShallowEqual(queriesArray, this.state.queriesArray)) {
       this.setState({ queriesArray });
     }
+
+    const dataPreviewQueries = [];
+    nextProps.tables.forEach((table) => {
+      const queryId = table.dataPreviewQueryId;
+      if (queryId && nextProps.queries[queryId] && table.queryEditorId === nextActiveQeId) {
+        dataPreviewQueries.push(nextProps.queries[queryId]);
+      }
+    });
+    if (!areArraysShallowEqual(dataPreviewQueries, this.state.dataPreviewQueries)) {
+      this.setState({ dataPreviewQueries });
+    }
   }
   renameTab(qe) {
     /* eslint no-alert: 0 */
@@ -124,14 +135,6 @@ class TabbedSqlEditors extends React.PureComponent {
       }
       const state = (latestQuery) ? latestQuery.state : '';
 
-      const dataPreviewQueries = [];
-      this.props.tables.forEach((table) => {
-        const queryId = table.dataPreviewQueryId;
-        if (queryId && this.props.queries[queryId] && table.queryEditorId === qe.id) {
-          dataPreviewQueries.push(this.props.queries[queryId]);
-        }
-      });
-
       const tabTitle = (
         <div>
           <div className={'circle ' + state} /> {qe.title} {' '}
@@ -173,7 +176,7 @@ class TabbedSqlEditors extends React.PureComponent {
                   tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
                   queryEditor={qe}
                   editorQueries={this.state.queriesArray}
-                  dataPreviewQueries={dataPreviewQueries}
+                  dataPreviewQueries={this.state.dataPreviewQueries}
                   latestQuery={latestQuery}
                   database={database}
                   actions={this.props.actions}