[sqllab] bugfix SouthPane doesn't update as expected (#1699)
* [sqllab] bugfix SouthPane doesn't update as expected * Linting
This commit is contained in:
parent
84e8f741ae
commit
b7019ad4f3
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue