[Sqllab] Add offline state to sqllab (#6013)

* add timeout and refresh for failed backend

* show offline state instead of refreshing

* add southpane tests

superset/assets/spec/javascripts/sqllab/SouthPane_spec.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { shallow } from 'enzyme';
+
+import { STATUS_OPTIONS } from '../../../src/SqlLab/constants';
+import { initialState } from './fixtures';
+import SouthPane from '../../../src/SqlLab/components/SouthPane';
+
+describe('SouthPane', () => {
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const store = mockStore(initialState);
+
+  const mockedProps = {
+    editorQueries: [],
+    dataPreviewQueries: [],
+    actions: {},
+    activeSouthPaneTab: '',
+    height: 1,
+    databases: {},
+    offline: false,
+  };
+
+  const getWrapper = () => (
+    shallow(<SouthPane {...mockedProps} />, {
+      context: { store },
+    }).dive());
+
+  let wrapper;
+  it('should render offline when the state is offline', () => {
+    wrapper = getWrapper();
+    wrapper.setProps({ offline: true });
+    expect(wrapper.find('.m-r-3').render().text()).toBe(STATUS_OPTIONS.offline);
+  });
+});

superset/assets/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import configureStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
+import thunk from 'redux-thunk';
 
-import { table, defaultQueryEditor, databases, tables } from './fixtures';
+import { table, defaultQueryEditor, databases, initialState, tables } from './fixtures';
 import SqlEditorLeftBar from '../../../src/SqlLab/components/SqlEditorLeftBar';
 import TableElement from '../../../src/SqlLab/components/TableElement';
 
@@ -21,11 +23,16 @@ describe('SqlEditorLeftBar', () => {
     database: {},
     height: 0,
   };
+  const middlewares = [thunk];
+  const mockStore = configureStore(middlewares);
+  const store = mockStore(initialState);
 
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<SqlEditorLeftBar {...mockedProps} />);
+    wrapper = shallow(<SqlEditorLeftBar {...mockedProps} />, {
+      context: { store },
+    }).dive();
   });
 
   it('is valid', () => {

superset/assets/spec/javascripts/sqllab/TabbedSqlEditors_spec.jsx

@@ -166,4 +166,10 @@ describe('TabbedSqlEditors', () => {
     const lastTab = wrapper.find(Tab).last();
     expect(lastTab.props().eventKey).toContain('add_tab');
   });
+  it('should disable new tab when offline', () => {
+    wrapper = getWrapper();
+    expect(wrapper.find(Tab).last().props().disabled).toBe(false);
+    wrapper.setProps({ offline: true });
+    expect(wrapper.find(Tab).last().props().disabled).toBe(true);
+  });
 });