This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch revert-f497c1900e896a45daac66cf35776d9ad343f69e
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 4d669b958388ed824845ceeea9bda48dfce44e3a
Author: hughhhh <hughmi...@gmail.com>
AuthorDate: Wed Mar 16 13:29:50 2022 -0700
Revert "refactor: converted QueryAutoRefresh to functional component
(#18179)"
This reverts commit f497c1900e896a45daac66cf35776d9ad343f69e.
---
.../QueryAutoRefresh/QueryAutoRefresh.test.jsx | 40 +++++-----
.../SqlLab/components/QueryAutoRefresh/index.jsx | 86 ++++++++++++----------
2 files changed, 67 insertions(+), 59 deletions(-)
diff --git
a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
index 93cea6d..06bf187 100644
---
a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
+++
b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx
@@ -17,14 +17,12 @@
* under the License.
*/
import React from 'react';
-import { render } from 'spec/helpers/testing-library';
-import { ThemeProvider, supersetTheme } from '@superset-ui/core';
+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 'src/SqlLab/fixtures';
-import fetchMock from 'fetch-mock';
-import * as actions from 'src/SqlLab/actions/sqlLab';
describe('QueryAutoRefresh', () => {
const middlewares = [thunk];
@@ -40,29 +38,31 @@ describe('QueryAutoRefresh', () => {
sqlLab,
};
const store = mockStore(state);
- const setup = (overrides = {}) => (
- <ThemeProvider theme={supersetTheme}>
- <QueryAutoRefresh store={store} {...overrides} />
- </ThemeProvider>
- );
-
- const mockFetch = fetchMock.get('glob:*/superset/queries/*', {});
+ const getWrapper = () =>
+ shallow(<QueryAutoRefresh store={store} />)
+ .dive()
+ .dive();
+ let wrapper;
it('shouldCheckForQueries', () => {
- render(setup(), {
- useRedux: true,
- });
-
- expect(mockFetch.called()).toBe(true);
+ wrapper = getWrapper();
+ expect(wrapper.instance().shouldCheckForQueries()).toBe(true);
});
it('setUserOffline', () => {
- const spy = jest.spyOn(actions, 'setUserOffline');
+ wrapper = getWrapper();
+ const spy = sinon.spy(wrapper.instance().props.actions, 'setUserOffline');
- render(setup(), {
- useRedux: true,
+ // state not changed
+ wrapper.setState({
+ offline: false,
});
+ expect(spy.called).toBe(false);
- expect(spy).toHaveBeenCalled();
+ // state is changed
+ wrapper.setState({
+ offline: true,
+ });
+ expect(spy.callCount).toBe(1);
});
});
diff --git a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
index 43f6c5d..b54936b 100644
--- a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useState, useEffect } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
@@ -28,12 +28,31 @@ const QUERY_UPDATE_BUFFER_MS = 5000;
const MAX_QUERY_AGE_TO_POLL = 21600000;
const QUERY_TIMEOUT_LIMIT = 10000;
-function QueryAutoRefresh({ offline, queries, queriesLastUpdate, actions }) {
- const [offlineState, setOfflineState] = useState(offline);
- let timer = null;
+class QueryAutoRefresh extends React.PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ offline: props.offline,
+ };
+ }
+
+ UNSAFE_componentWillMount() {
+ this.startTimer();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.offline !== this.state.offline) {
+ this.props.actions.setUserOffline(this.state.offline);
+ }
+ }
+
+ componentWillUnmount() {
+ this.stopTimer();
+ }
- const shouldCheckForQueries = () => {
+ shouldCheckForQueries() {
// if there are started or running queries, this method should return true
+ const { queries } = this.props;
const now = new Date().getTime();
const isQueryRunning = q =>
['running', 'started', 'pending', 'fetching'].indexOf(q.state) >= 0;
@@ -41,57 +60,46 @@ function QueryAutoRefresh({ offline, queries,
queriesLastUpdate, actions }) {
return Object.values(queries).some(
q => isQueryRunning(q) && now - q.startDttm < MAX_QUERY_AGE_TO_POLL,
);
- };
+ }
+
+ startTimer() {
+ if (!this.timer) {
+ this.timer = setInterval(this.stopwatch.bind(this), QUERY_UPDATE_FREQ);
+ }
+ }
- const stopwatch = () => {
+ stopTimer() {
+ clearInterval(this.timer);
+ this.timer = null;
+ }
+
+ stopwatch() {
// only poll /superset/queries/ if there are started or running queries
- if (shouldCheckForQueries()) {
+ if (this.shouldCheckForQueries()) {
SupersetClient.get({
endpoint: `/superset/queries/${
- queriesLastUpdate - QUERY_UPDATE_BUFFER_MS
+ this.props.queriesLastUpdate - QUERY_UPDATE_BUFFER_MS
}`,
timeout: QUERY_TIMEOUT_LIMIT,
})
.then(({ json }) => {
if (Object.keys(json).length > 0) {
- actions.refreshQueries(json);
+ this.props.actions.refreshQueries(json);
}
-
- setOfflineState(false);
+ this.setState({ offline: false });
})
.catch(() => {
- setOfflineState(true);
+ this.setState({ offline: true });
});
} else {
- setOfflineState(false);
+ this.setState({ offline: false });
}
- };
-
- const startTimer = () => {
- if (!timer) {
- timer = setInterval(stopwatch(), QUERY_UPDATE_FREQ);
- }
- };
-
- const stopTimer = () => {
- clearInterval(timer);
- timer = null;
- };
-
- useEffect(() => {
- startTimer();
- return () => {
- stopTimer();
- };
- }, []);
+ }
- useEffect(() => {
- actions.setUserOffline(offlineState);
- }, [offlineState]);
-
- return null;
+ render() {
+ return null;
+ }
}
-
QueryAutoRefresh.propTypes = {
offline: PropTypes.bool.isRequired,
queries: PropTypes.object.isRequired,
