chore: type ResultSet.tsx (#10226)

superset-frontend/spec/javascripts/sqllab/fixtures.js

@@ -387,7 +387,7 @@ export const stoppedQuery = {
   startDttm: 1497400851936,
   state: 'stopped',
   tab: 'Untitled Query 2',
-  tempTableName: '',
+  tempTable: '',
 };
 export const runningQuery = {
   dbId: 1,
@@ -428,7 +428,7 @@ export const query = {
   sql: 'SELECT * FROM something',
   sqlEditorId: defaultQueryEditor.id,
   tab: 'unimportant',
-  tempTableName: null,
+  tempTable: null,
   runAsync: false,
   ctas: false,
   cached: false,

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -350,7 +350,7 @@ export function runQuery(query) {
       sql: query.sql,
       sql_editor_id: query.sqlEditorId,
       tab: query.tab,
-      tmp_table_name: query.tempTableName,
+      tmp_table_name: query.tempTable,
       select_as_cta: query.ctas,
       ctas_method: query.ctas_method,
       templateParams: query.templateParams,

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { CSSProperties } from 'react';
-import PropTypes from 'prop-types';
 import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap';
 import shortid from 'shortid';
 import { t } from '@superset-ui/translation';
@@ -31,40 +30,50 @@ import QueryStateLabel from './QueryStateLabel';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { prepareCopyToClipboardTabularData } from '../../utils/common';
 import { CtasEnum } from '../actions/sqlLab';
-
+import { Query } from '../types';
-const propTypes = {
-  actions: PropTypes.object,
-  csv: PropTypes.bool,
-  query: PropTypes.object,
-  search: PropTypes.bool,
-  showSql: PropTypes.bool,
-  visualize: PropTypes.bool,
-  cache: PropTypes.bool,
-  height: PropTypes.number.isRequired,
-  database: PropTypes.object,
-  displayLimit: PropTypes.number.isRequired,
-};
-const defaultProps = {
-  search: true,
-  visualize: true,
-  showSql: false,
-  csv: true,
-  actions: {},
-  cache: false,
-  database: {},
-};
 
 const SEARCH_HEIGHT = 46;
 
-const LOADING_STYLES = { position: 'relative', minHeight: 100 };
+const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 };
 
-export default class ResultSet extends React.PureComponent {
+interface ResultSetProps {
-  constructor(props) {
+  actions: Record<string, any>;
+  cache?: boolean;
+  csv?: boolean;
+  database?: Record<string, any>;
+  displayLimit: number;
+  height: number;
+  query: Query;
+  search?: boolean;
+  showSql?: boolean;
+  visualize?: boolean;
+}
+
+interface ResultSetState {
+  searchText: string;
+  showExploreResultsButton: boolean;
+  data: Record<string, any>[];
+}
+
+export default class ResultSet extends React.PureComponent<
+  ResultSetProps,
+  ResultSetState
+> {
+  static defaultProps = {
+    cache: false,
+    csv: true,
+    database: {},
+    search: true,
+    showSql: false,
+    visualize: true,
+  };
+
+  constructor(props: ResultSetProps) {
     super(props);
     this.state = {
       searchText: '',
       showExploreResultsButton: false,
-      data: null,
+      data: [],
     };
 
     this.changeSearch = this.changeSearch.bind(this);
@@ -79,7 +88,7 @@ export default class ResultSet extends React.PureComponent {
     // only do this the first time the component is rendered/mounted
     this.reRunQueryIfSessionTimeoutErrorOnMount();
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: ResultSetProps) {
     // when new results comes in, save them locally and clear in store
     if (
       this.props.cache &&
@@ -88,8 +97,7 @@ export default class ResultSet extends React.PureComponent {
       nextProps.query.results.data &&
       nextProps.query.results.data.length > 0
     ) {
-      this.setState(
+      this.setState({ data: nextProps.query.results.data }, () =>
-        { data: nextProps.query.results.data },
         this.clearQueryResults(nextProps.query),
       );
     }
@@ -100,16 +108,16 @@ export default class ResultSet extends React.PureComponent {
       this.fetchResults(nextProps.query);
     }
   }
-  clearQueryResults(query) {
+  clearQueryResults(query: Query) {
     this.props.actions.clearQueryResults(query);
   }
-  popSelectStar(tmpSchema, tmpTable) {
+  popSelectStar(tempSchema: string | null, tempTable: string) {
     const qe = {
       id: shortid.generate(),
-      title: tmpTable,
+      title: tempTable,
       autorun: false,
       dbId: this.props.query.dbId,
-      sql: `SELECT * FROM ${tmpSchema}.${tmpTable}`,
+      sql: `SELECT * FROM ${tempSchema ? `${tempSchema}.` : ''}${tempTable}`,
     };
     this.props.actions.addQueryEditor(qe);
   }
@@ -118,13 +126,13 @@ export default class ResultSet extends React.PureComponent {
       showExploreResultsButton: !this.state.showExploreResultsButton,
     });
   }
-  changeSearch(event) {
+  changeSearch(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({ searchText: event.target.value });
   }
-  fetchResults(query) {
+  fetchResults(query: Query) {
     this.props.actions.fetchQueryResults(query, this.props.displayLimit);
   }
-  reFetchQueryResults(query) {
+  reFetchQueryResults(query: Query) {
     this.props.actions.reFetchQueryResults(query);
   }
   reRunQueryIfSessionTimeoutErrorOnMount() {
@@ -218,14 +226,7 @@ export default class ResultSet extends React.PureComponent {
         </Alert>
       );
     } else if (query.state === 'success' && query.ctas) {
-      // Async queries
+      const { tempSchema, tempTable } = query;
-      let tmpSchema = query.tempSchema;
-      let tmpTable = query.tempTableName;
-      // Sync queries, query.results.query contains the source of truth for them.
-      if (query.results && query.results.query) {
-        tmpTable = query.results.query.tempTable;
-        tmpSchema = query.results.query.tempSchema;
-      }
       let object = 'Table';
       if (query.ctas_method === CtasEnum.VIEW) {
         object = 'View';
@@ -235,20 +236,21 @@ export default class ResultSet extends React.PureComponent {
           <Alert bsStyle="info">
             {t(object)} [
             <strong>
-              {tmpSchema}.{tmpTable}
+              {tempSchema ? `${tempSchema}.` : ''}
+              {tempTable}
             </strong>
             ] {t('was created')} &nbsp;
             <ButtonGroup>
               <Button
                 bsSize="small"
                 className="m-r-5"
-                onClick={() => this.popSelectStar(tmpSchema, tmpTable)}
+                onClick={() => this.popSelectStar(tempSchema, tempTable)}
               >
                 {t('Query in a new tab')}
               </Button>
               <ExploreCtasResultsButton
-                table={tmpTable}
+                table={tempTable}
-                schema={tmpSchema}
+                schema={tempSchema}
                 dbId={exploreDBId}
                 database={this.props.database}
                 actions={this.props.actions}
@@ -333,9 +335,7 @@ export default class ResultSet extends React.PureComponent {
       trackingUrl = (
         <Button
           bsSize="small"
-          onClick={() => {
+          onClick={() => query.trackingUrl && window.open(query.trackingUrl)}
-            window.open(query.trackingUrl);
-          }}
         >
           {t('Track Job')}
         </Button>
@@ -358,5 +358,3 @@ export default class ResultSet extends React.PureComponent {
     );
   }
 }
-ResultSet.propTypes = propTypes;
-ResultSet.defaultProps = defaultProps;

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

@@ -293,7 +293,7 @@ class SqlEditor extends React.PureComponent {
       sqlEditorId: qe.id,
       tab: qe.title,
       schema: qe.schema,
-      tempTableName: ctas ? this.state.ctas : '',
+      tempTable: ctas ? this.state.ctas : '',
       templateParams: qe.templateParams,
       queryLimit: qe.queryLimit || this.props.defaultQueryLimit,
       runAsync: this.props.database

superset-frontend/src/SqlLab/reducers/sqlLab.js

@@ -324,16 +324,14 @@ export default function sqlLabReducer(state = {}, action) {
       });
     },
     [actions.QUERY_SUCCESS]() {
-      let rows;
-      if (action.results.data) {
-        rows = action.results.data.length;
-      }
       const alts = {
         endDttm: now(),
         progress: 100,
         results: action.results,
-        rows,
+        rows: action?.results?.data?.length,
         state: 'success',
+        tempSchema: action?.results?.query?.tempSchema,
+        tempTable: action?.results?.query?.tempTable,
         errorMessage: null,
         cached: false,
       };

superset-frontend/src/SqlLab/types.ts

@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CtasEnum } from './actions/sqlLab';
+
+export type Column = {
+  name: string;
+};
+
+export type Query = {
+  cached: boolean;
+  ctas: boolean;
+  ctas_method?: keyof typeof CtasEnum;
+  dbId: number;
+  errorMessage: string | null;
+  extra: {
+    progress: string | null;
+  };
+  id: string;
+  isDataPreview: boolean;
+  link?: string;
+  progress: number;
+  results: {
+    columns: Column[];
+    data: Record<string, unknown>[];
+    expanded_columns: Column[];
+  };
+  resultsKey: string | null;
+  sql: string;
+  sqlEditorId: string;
+  state:
+    | 'stopped'
+    | 'failed'
+    | 'pending'
+    | 'running'
+    | 'scheduled'
+    | 'success'
+    | 'timed_out';
+  tempSchema: string | null;
+  tempTable: string;
+  trackingUrl: string | null;
+};