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

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/spec/helpers/reducerIndex.ts

@@ -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/src/SqlLab/components/AceEditorWrapper/useKeywords.test.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/components/App/App.test.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/App/index.jsx

@@ -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/QueryTable/index.tsx

@@ -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/SqlEditor/SqlEditor.test.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/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx

@@ -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/TabbedSqlEditors/TabbedSqlEditors.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/TabbedSqlEditors/index.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 {