diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx index 0a722cb22c390..d22ebc7cd4f5a 100644 --- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx @@ -6,6 +6,7 @@ import * as Actions from '../actions'; import SqlEditor from './SqlEditor'; import { getParamFromQuery } from '../../../utils/common'; import CopyQueryTabUrl from './CopyQueryTabUrl'; +import { areObjectsEqual } from '../../reduxUtils'; const propTypes = { actions: React.PropTypes.object.isRequired, @@ -34,6 +35,7 @@ class TabbedSqlEditors extends React.PureComponent { uri, cleanUri, query, + queriesArray: [], }; } componentWillMount() { @@ -51,6 +53,19 @@ class TabbedSqlEditors extends React.PureComponent { window.history.replaceState({}, document.title, this.state.cleanUri); } } + 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]); + } + } + this.setState({ queriesArray }); + } + } renameTab(qe) { /* eslint no-alert: 0 */ const newTitle = prompt('Enter a new title for the tab'); @@ -93,12 +108,7 @@ class TabbedSqlEditors extends React.PureComponent { render() { const editors = this.props.queryEditors.map((qe, i) => { const isSelected = (qe.id === this.activeQueryEditor().id); - const queriesArray = []; - for (const id in this.props.queries) { - if (this.props.queries[id].sqlEditorId === qe.id) { - queriesArray.push(this.props.queries[id]); - } - } + let latestQuery; if (qe.latestQueryId) { latestQuery = this.props.queries[qe.latestQueryId]; @@ -142,7 +152,7 @@ class TabbedSqlEditors extends React.PureComponent { (t.queryEditorId === qe.id))} queryEditor={qe} - queries={queriesArray} + queries={this.state.queriesArray} latestQuery={latestQuery} database={database} actions={this.props.actions} diff --git a/caravel/assets/javascripts/reduxUtils.js b/caravel/assets/javascripts/reduxUtils.js index c642c3d1018b0..75c9f7660c8fa 100644 --- a/caravel/assets/javascripts/reduxUtils.js +++ b/caravel/assets/javascripts/reduxUtils.js @@ -94,3 +94,21 @@ export function areArraysShallowEqual(arr1, arr2) { } return true; } + +export function areObjectsEqual(obj1, obj2) { + if (!obj1 || !obj2) { + return false; + } + if (! Object.keys(obj1).length !== Object.keys(obj2).length) { + return false; + } + for (const id in obj1) { + if (!obj2.hasOwnProperty(id)) { + return false; + } + if (obj1[id] !== obj2[id]) { + return false; + } + } + return true; +}