chore(sqllab): migrate to typescript (#26171)

apache · Feb 6, 2024 · 14f88e3 · 14f88e3
1 parent 5d46d3a
commit 14f88e3
Show file tree

Hide file tree

Showing 16 changed files with 413 additions and 430 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts
@@ -328,6 +328,7 @@ export type Query = {
   actions: Record<string, any>;
   type: DatasourceType;
   columns: QueryColumn[];
+  runAsync?: boolean;
 };
 
 export type QueryResults = {

diff --git a/superset-frontend/spec/helpers/reducerIndex.ts b/superset-frontend/spec/helpers/reducerIndex.ts
@@ -39,8 +39,8 @@ const common = { ...bootstrapData.common };
 const user = { ...bootstrapData.user };
 
 const noopReducer =
-  (initialState: unknown) =>
-  (state = initialState) =>
+  <STATE = unknown>(initialState: STATE) =>
+  (state: STATE = initialState) =>
     state;
 
 export default {

diff --git a/...nd/src/SqlLab/components/App/App.test.jsx → ...nd/src/SqlLab/components/App/App.test.tsx b/...nd/src/SqlLab/components/App/App.test.jsx → ...nd/src/SqlLab/components/App/App.test.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { combineReducers } from 'redux';
+import { AnyAction, combineReducers } from 'redux';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { render } from 'spec/helpers/testing-library';
@@ -38,18 +38,15 @@ jest.mock('src/SqlLab/components/QueryAutoRefresh', () => () => (
   <div data-test="mock-query-auto-refresh" />
 ));
 
-const sqlLabReducer = combineReducers(reducers);
+const sqlLabReducer = combineReducers({
+  localStorageUsageInKilobytes: reducers.localStorageUsageInKilobytes,
+});
+const mockAction = {} as AnyAction;
 
 describe('SqlLab App', () => {
   const middlewares = [thunk];
   const mockStore = configureStore(middlewares);
-  const store = mockStore(sqlLabReducer(undefined, {}), {});
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-  afterEach(() => {
-    jest.useRealTimers();
-  });
+  const store = mockStore(sqlLabReducer(undefined, mockAction));
 
   it('is valid', () => {
     expect(React.isValidElement(<App />)).toBe(true);
@@ -61,15 +58,13 @@ describe('SqlLab App', () => {
     expect(getByTestId('mock-tabbed-sql-editors')).toBeInTheDocument();
   });
 
-  it('logs current usage warning', () => {
+  it('logs current usage warning', async () => {
     const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB + 10;
+    const initialState = {
+      localStorageUsageInKilobytes,
+    };
     const storeExceedLocalStorage = mockStore(
-      sqlLabReducer(
-        {
-          localStorageUsageInKilobytes,
-        },
-        {},
-      ),
+      sqlLabReducer(initialState, mockAction),
     );
 
     const { rerender } = render(<App />, {
@@ -87,14 +82,14 @@ describe('SqlLab App', () => {
     );
   });
 
-  it('logs current local storage usage', () => {
+  it('logs current local storage usage', async () => {
     const localStorageUsageInKilobytes = LOCALSTORAGE_MAX_USAGE_KB - 10;
     const storeExceedLocalStorage = mockStore(
       sqlLabReducer(
         {
           localStorageUsageInKilobytes,
         },
-        {},
+        mockAction,
       ),
     );
 

diff --git a/...ntend/src/SqlLab/components/App/index.jsx → ...ntend/src/SqlLab/components/App/index.tsx b/...ntend/src/SqlLab/components/App/index.jsx → ...ntend/src/SqlLab/components/App/index.tsx
@@ -17,8 +17,6 @@
  * under the License.
  */
 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';
@@ -28,7 +26,8 @@ import {
   LOCALSTORAGE_WARNING_THRESHOLD,
   LOCALSTORAGE_WARNING_MESSAGE_THROTTLE_MS,
 } from 'src/SqlLab/constants';
-import * as Actions from 'src/SqlLab/actions/sqlLab';
+import { addDangerToast } from 'src/components/MessageToasts/actions';
+import type { SqlLabRootState } from 'src/SqlLab/types';
 import { logEvent } from 'src/logger/actions';
 import {
   LOG_ACTIONS_SQLLAB_WARN_LOCAL_STORAGE_USAGE,
@@ -100,8 +99,21 @@ const SqlLabStyles = styled.div`
   `};
 `;
 
-class App extends React.PureComponent {
-  constructor(props) {
+type PureProps = {
+  // add this for testing componentDidUpdate spec
+  updated?: boolean;
+};
+
+type AppProps = ReturnType<typeof mergeProps> & PureProps;
+
+interface AppState {
+  hash: string;
+}
+
+class App extends React.PureComponent<AppProps, AppState> {
+  hasLoggedLocalStorageUsage: boolean;
+
+  constructor(props: AppProps) {
     super(props);
     this.state = {
       hash: window.location.hash,
@@ -125,7 +137,7 @@ class App extends React.PureComponent {
 
   componentDidUpdate() {
     const { localStorageUsageInKilobytes, actions, queries } = this.props;
-    const queryCount = queries?.lenghth || 0;
+    const queryCount = Object.keys(queries || {}).length || 0;
     if (
       localStorageUsageInKilobytes >=
       LOCALSTORAGE_WARNING_THRESHOLD * LOCALSTORAGE_MAX_USAGE_KB
@@ -159,7 +171,7 @@ class App extends React.PureComponent {
     this.setState({ hash: window.location.hash });
   }
 
-  showLocalStorageUsageWarning(currentUsage, queryCount) {
+  showLocalStorageUsageWarning(currentUsage: number, queryCount: number) {
     this.props.actions.addDangerToast(
       t(
         "SQL Lab uses your browser's local storage to store queries and results." +
@@ -190,7 +202,6 @@ class App extends React.PureComponent {
         <Redirect
           to={{
             pathname: '/sqllab/history/',
-            replace: true,
           }}
         />
       );
@@ -207,13 +218,7 @@ class App extends React.PureComponent {
   }
 }
 
-App.propTypes = {
-  actions: PropTypes.object,
-  common: PropTypes.object,
-  localStorageUsageInKilobytes: PropTypes.number.isRequired,
-};
-
-function mapStateToProps(state) {
+function mapStateToProps(state: SqlLabRootState) {
   const { common, localStorageUsageInKilobytes, sqlLab } = state;
   return {
     common,
@@ -223,10 +228,21 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps(dispatch) {
+const mapDispatchToProps = {
+  addDangerToast,
+  logEvent,
+};
+
+function mergeProps(
+  stateProps: ReturnType<typeof mapStateToProps>,
+  dispatchProps: typeof mapDispatchToProps,
+  state: PureProps,
+) {
   return {
-    actions: bindActionCreators({ ...Actions, logEvent }, dispatch),
+    ...state,
+    ...stateProps,
+    actions: dispatchProps,
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(App);
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -103,7 +103,7 @@ import SaveQuery, { QueryPayload } from '../SaveQuery';
 import ScheduleQueryButton from '../ScheduleQueryButton';
 import EstimateQueryCostButton from '../EstimateQueryCostButton';
 import ShareSqlLabQuery from '../ShareSqlLabQuery';
-import SqlEditorLeftBar, { ExtendedTable } from '../SqlEditorLeftBar';
+import SqlEditorLeftBar from '../SqlEditorLeftBar';
 import AceEditorWrapper from '../AceEditorWrapper';
 import RunQueryActionButton from '../RunQueryActionButton';
 import QueryLimitSelect from '../QueryLimitSelect';
@@ -215,7 +215,6 @@ const StyledSqlEditor = styled.div`
 const extensionsRegistry = getExtensionsRegistry();
 
 export type Props = {
-  tables: ExtendedTable[];
   queryEditor: QueryEditor;
   defaultQueryLimit: number;
   maxRow: number;
@@ -235,7 +234,6 @@ const elementStyle = (
 });
 
 const SqlEditor: React.FC<Props> = ({
-  tables,
   queryEditor,
   defaultQueryLimit,
   maxRow,
@@ -839,7 +837,6 @@ const SqlEditor: React.FC<Props> = ({
               <SqlEditorLeftBar
                 database={database}
                 queryEditorId={queryEditor.id}
-                tables={tables}
                 setEmptyState={bool => setShowEmptyState(bool)}
               />
             </StyledSidebar>