From dbdb6b093aeb0b482494e7a4ee65b5836b5070ea Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Thu, 30 May 2019 10:38:49 -0700
Subject: [PATCH] [SQL Lab] fix unnecessary offline action (#7594)

---
 .../sqllab/QueryAutoRefresh_spec.jsx          | 72 +++++++++++++++++++
 .../spec/javascripts/sqllab/fixtures.js       |  2 +
 .../SqlLab/components/QueryAutoRefresh.jsx    | 23 ++++--
 3 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 superset/assets/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx

diff --git a/superset/assets/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx b/superset/assets/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx
new file mode 100644
index 000000000..527ecd680
--- /dev/null
+++ b/superset/assets/spec/javascripts/sqllab/QueryAutoRefresh_spec.jsx
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+
+import QueryAutoRefresh from '../../../src/SqlLab/components/QueryAutoRefresh';
+import { initialState, runningQuery } from './fixtures';
+
+describe('QueryAutoRefresh', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const sqlLab = {
+    ...initialState.sqlLab,
+    queries: {
+      ryhMUZCGb: runningQuery,
+    },
+  };
+  const state = {
+    ...initialState,
+    sqlLab,
+
+  };
+  const store = mockStore(state);
+
+  const getWrapper = () => (
+    shallow(<QueryAutoRefresh />, {
+      context: { store },
+    }).dive());
+
+  let wrapper;
+
+  it('shouldCheckForQueries', () => {
+    wrapper = getWrapper();
+    expect(wrapper.instance().shouldCheckForQueries()).toBe(true);
+  });
+
+  it('setUserOffline', () => {
+    wrapper = getWrapper();
+    const spy = sinon.spy(wrapper.instance().props.actions, 'setUserOffline');
+
+    // state not changed
+    wrapper.setState({
+      offline: false,
+    });
+    expect(spy.called).toBe(false);
+
+    // state is changed
+    wrapper.setState({
+      offline: true,
+    });
+    expect(spy.callCount).toBe(1);
+  });
+});
diff --git a/superset/assets/spec/javascripts/sqllab/fixtures.js b/superset/assets/spec/javascripts/sqllab/fixtures.js
index f43f43f55..6bd090eca 100644
--- a/superset/assets/spec/javascripts/sqllab/fixtures.js
+++ b/superset/assets/spec/javascripts/sqllab/fixtures.js
@@ -366,11 +366,13 @@ export const runningQuery = {
   id: 'ryhMUZCGb',
   progress: 90,
   state: 'running',
+  startDttm: Date.now() - 500,
 };
 export const cachedQuery = Object.assign({}, queries[0], { cached: true });
 
 export const initialState = {
   sqlLab: {
+    offline: false,
     alerts: [],
     queries: {},
     databases: {},
diff --git a/superset/assets/src/SqlLab/components/QueryAutoRefresh.jsx b/superset/assets/src/SqlLab/components/QueryAutoRefresh.jsx
index 6704d393f..3fcab31a6 100644
--- a/superset/assets/src/SqlLab/components/QueryAutoRefresh.jsx
+++ b/superset/assets/src/SqlLab/components/QueryAutoRefresh.jsx
@@ -30,9 +30,20 @@ const MAX_QUERY_AGE_TO_POLL = 21600000;
 const QUERY_TIMEOUT_LIMIT = 10000;
 
 class QueryAutoRefresh extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      offline: props.offline,
+    };
+  }
   componentWillMount() {
     this.startTimer();
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.offline !== this.state.offline) {
+      this.props.actions.setUserOffline(this.state.offline);
+    }
+  }
   componentWillUnmount() {
     this.stopTimer();
   }
@@ -70,12 +81,12 @@ class QueryAutoRefresh extends React.PureComponent {
         if (Object.keys(json).length > 0) {
           this.props.actions.refreshQueries(json);
         }
-        this.props.actions.setUserOffline(false);
-        }).catch(() => {
-          this.props.actions.setUserOffline(true);
-        });
+        this.setState({ offline: false });
+      }).catch(() => {
+        this.setState({ offline: true });
+      });
     } else {
-      this.props.actions.setUserOffline(false);
+      this.setState({ offline: false });
     }
   }
   render() {
@@ -83,6 +94,7 @@ class QueryAutoRefresh extends React.PureComponent {
   }
 }
 QueryAutoRefresh.propTypes = {
+  offline: PropTypes.bool.isRequired,
   queries: PropTypes.object.isRequired,
   actions: PropTypes.object.isRequired,
   queriesLastUpdate: PropTypes.number.isRequired,
@@ -90,6 +102,7 @@ QueryAutoRefresh.propTypes = {
 
 function mapStateToProps({ sqlLab }) {
   return {
+    offline: sqlLab.offline,
     queries: sqlLab.queries,
     queriesLastUpdate: sqlLab.queriesLastUpdate,
   };