feat(sqllab): SPA migration (apache#25151)

Author: justinpark

superset-frontend/cypress-base/cypress/e2e/sqllab/_skip.sourcePanel.index.test.js

@@ -20,7 +20,7 @@ import { selectResultsTab } from './sqllab.helper';
 
 describe.skip('SqlLab datasource panel', () => {
   beforeEach(() => {
-    cy.visit('/superset/sqllab');
+    cy.visit('/sqllab');
   });
 
   // TODO the test bellow is flaky, and has been disabled for the time being

superset-frontend/cypress-base/cypress/e2e/sqllab/query.test.ts

@@ -25,7 +25,7 @@ function parseClockStr(node: JQuery) {
 
 describe('SqlLab query panel', () => {
   beforeEach(() => {
-    cy.visit('/superset/sqllab');
+    cy.visit('/sqllab');
   });
 
   it.skip('supports entering and running a query', () => {

superset-frontend/cypress-base/cypress/e2e/sqllab/sqllab.applitools.test.ts

@@ -19,7 +19,7 @@
 
 describe('SqlLab view', () => {
   beforeEach(() => {
-    cy.visit('/superset/sqllab');
+    cy.visit('/sqllab');
   });
 
   it('should load the SqlLab', () => {

superset-frontend/cypress-base/cypress/e2e/sqllab/tabs.test.ts

@@ -18,7 +18,7 @@
  */
 describe('SqlLab query tabs', () => {
   beforeEach(() => {
-    cy.visit('/superset/sqllab');
+    cy.visit('/sqllab');
   });
 
   const tablistSelector = '[data-test="sql-editor-tabs"] > [role="tablist"]';

superset-frontend/package-lock.json

@@ -29,7 +29,6 @@ import messageToasts from 'src/components/MessageToasts/reducers';
 import saveModal from 'src/explore/reducers/saveModalReducer';
 import explore from 'src/explore/reducers/exploreReducer';
 import sqlLab from 'src/SqlLab/reducers/sqlLab';
-import localStorageUsageInKilobytes from 'src/SqlLab/reducers/localStorageUsage';
 import reports from 'src/features/reports/ReportModal/reducer';
 import getBootstrapData from 'src/utils/getBootstrapData';
 
@@ -59,7 +58,7 @@ export default {
   saveModal,
   explore,
   sqlLab,
-  localStorageUsageInKilobytes,
+  localStorageUsageInKilobytes: noopReducer(0),
   reports,
   common: noopReducer(common),
   user: noopReducer(user),

superset-frontend/spec/helpers/reducerIndex.ts

@@ -28,7 +28,7 @@ import { schemaApiUtil } from 'src/hooks/apiResources/schemas';
 import { tableApiUtil } from 'src/hooks/apiResources/tables';
 import { addTable } from 'src/SqlLab/actions/sqlLab';
 import { initialState } from 'src/SqlLab/fixtures';
-import { reducers } from 'src/SqlLab/reducers';
+import reducers from 'spec/helpers/reducerIndex';
 import {
   SCHEMA_AUTOCOMPLETE_SCORE,
   TABLE_AUTOCOMPLETE_SCORE,

superset-frontend/src/SqlLab/App.jsx

@@ -17,12 +17,13 @@
  * under the License.
  */
 import React from 'react';
+import { combineReducers } from 'redux';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { render } from 'spec/helpers/testing-library';
 
 import App from 'src/SqlLab/components/App';
-import sqlLabReducer from 'src/SqlLab/reducers/index';
+import reducers from 'spec/helpers/reducerIndex';
 import { LOCALSTORAGE_MAX_USAGE_KB } from 'src/SqlLab/constants';
 import { LOG_EVENT } from 'src/logger/actions';
 import {
@@ -37,6 +38,8 @@ jest.mock('src/SqlLab/components/QueryAutoRefresh', () => () => (
   <div data-test="mock-query-auto-refresh" />
 ));
 
+const sqlLabReducer = combineReducers(reducers);
+
 describe('SqlLab App', () => {
   const middlewares = [thunk];
   const mockStore = configureStore(middlewares);

superset-frontend/src/SqlLab/components/AceEditorWrapper/useKeywords.test.ts

@@ -20,9 +20,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
 import { css, styled, t } from '@superset-ui/core';
 import throttle from 'lodash/throttle';
-import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import {
   LOCALSTORAGE_MAX_USAGE_KB,
   LOCALSTORAGE_WARNING_THRESHOLD,
@@ -186,7 +186,14 @@ class App extends React.PureComponent {
   render() {
     const { queries, queriesLastUpdate } = this.props;
     if (this.state.hash && this.state.hash === '#search') {
-      return window.location.replace('/superset/sqllab/history/');
+      return (
+        <Redirect
+          to={{
+            pathname: '/sqllab/history/',
+            replace: true,
+          }}
+        />
+      );
     }
     return (
       <SqlLabStyles data-test="SqlLabApp" className="App SqlLab">
@@ -195,7 +202,6 @@ class App extends React.PureComponent {
           queriesLastUpdate={queriesLastUpdate}
         />
         <TabbedSqlEditors />
-        <ToastContainer />
       </SqlLabStyles>
     );
   }

superset-frontend/src/SqlLab/components/App/App.test.jsx

@@ -61,7 +61,7 @@ interface QueryTableProps {
 }
 
 const openQuery = (id: number) => {
-  const url = `/superset/sqllab?queryId=${id}`;
+  const url = `/sqllab?queryId=${id}`;
   window.open(url);
 };
 

superset-frontend/src/SqlLab/components/App/index.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
-import { reducers } from 'src/SqlLab/reducers';
+import reducers from 'spec/helpers/reducerIndex';
 import SqlEditor from 'src/SqlLab/components/SqlEditor';
 import { setupStore } from 'src/views/store';
 import {

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -26,7 +26,7 @@ import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import { table, initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
 import { api } from 'src/hooks/apiResources/queryApi';
 import { setupStore } from 'src/views/store';
-import { reducers } from 'src/SqlLab/reducers';
+import reducers from 'spec/helpers/reducerIndex';
 
 const mockedProps = {
   tables: [table],

superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx

@@ -110,23 +110,17 @@ describe('TabbedSqlEditors', () => {
     it('should handle id', async () => {
       uriStub.returns({ id: 1 });
       await mountWithAct();
-      expect(window.history.replaceState.getCall(0).args[2]).toBe(
-        '/superset/sqllab',
-      );
+      expect(window.history.replaceState.getCall(0).args[2]).toBe('/sqllab');
     });
     it('should handle savedQueryId', async () => {
       uriStub.returns({ savedQueryId: 1 });
       await mountWithAct();
-      expect(window.history.replaceState.getCall(0).args[2]).toBe(
-        '/superset/sqllab',
-      );
+      expect(window.history.replaceState.getCall(0).args[2]).toBe('/sqllab');
     });
     it('should handle sql', async () => {
       uriStub.returns({ sql: 1, dbid: 1 });
       await mountWithAct();
-      expect(window.history.replaceState.getCall(0).args[2]).toBe(
-        '/superset/sqllab',
-      );
+      expect(window.history.replaceState.getCall(0).args[2]).toBe('/sqllab');
     });
     it('should handle custom url params', async () => {
       uriStub.returns({
@@ -137,7 +131,7 @@ describe('TabbedSqlEditors', () => {
       });
       await mountWithAct();
       expect(window.history.replaceState.getCall(0).args[2]).toBe(
-        '/superset/sqllab?custom_value=str&extra_attr1=true',
+        '/sqllab?custom_value=str&extra_attr1=true',
       );
     });
   });

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx

@@ -29,6 +29,7 @@ import { detectOS } from 'src/utils/common';
 import * as Actions from 'src/SqlLab/actions/sqlLab';
 import { EmptyStateBig } from 'src/components/EmptyState';
 import getBootstrapData from 'src/utils/getBootstrapData';
+import { locationContext } from 'src/pages/SqlLab/LocationContext';
 import SqlEditor from '../SqlEditor';
 import SqlEditorTabHeader from '../SqlEditorTabHeader';
 
@@ -75,7 +76,7 @@ const userOS = detectOS();
 class TabbedSqlEditors extends React.PureComponent {
   constructor(props) {
     super(props);
-    const sqlLabUrl = '/superset/sqllab';
+    const sqlLabUrl = '/sqllab';
     this.state = {
       sqlLabUrl,
     };
@@ -132,6 +133,7 @@ class TabbedSqlEditors extends React.PureComponent {
       new: isNewQuery,
       ...urlParams
     } = {
+      ...this.context.requestedQuery,
       ...bootstrapData.requested_query,
       ...queryParameters,
     };
@@ -332,6 +334,7 @@ class TabbedSqlEditors extends React.PureComponent {
 }
 TabbedSqlEditors.propTypes = propTypes;
 TabbedSqlEditors.defaultProps = defaultProps;
+TabbedSqlEditors.contextType = locationContext;
 
 function mapStateToProps({ sqlLab, common }) {
   return {