From 73077b1e939d8b01ec18b4f64cb9f358929fa509 Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Sun, 23 Jan 2022 14:57:27 +0300
Subject: [PATCH 1/9] Move ExploreResultsButton to FC & tsx

---
 .../{index.jsx => index.tsx}                  | 135 ++++++++----------
 1 file changed, 58 insertions(+), 77 deletions(-)
 rename superset-frontend/src/SqlLab/components/ExploreResultsButton/{index.jsx => index.tsx} (65%)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.jsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
similarity index 65%
rename from superset-frontend/src/SqlLab/components/ExploreResultsButton/index.jsx
rename to superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index 969a7255a2340..dfe7e005bc901 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.jsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -16,39 +16,41 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React, { FC } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import shortid from 'shortid';
 import Button from 'src/components/Button';
-import * as actions from 'src/SqlLab/actions/sqlLab';
+import rootReducer from 'src/SqlLab/reducers';
 
-const propTypes = {
-  actions: PropTypes.object.isRequired,
-  query: PropTypes.object,
-  errorMessage: PropTypes.string,
-  timeout: PropTypes.number,
-  database: PropTypes.object.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-const defaultProps = {
-  query: {},
-};
+type RootState = ReturnType<typeof rootReducer>;
+
+interface ExploreResultsButtonProps {
+  actions: {
+    createCtasDatasource: Function;
+    addInfoToast: Function;
+    addDangerToast: Function;
+  };
+  query?: object;
+  database: object;
+  onClick: Function;
+}
 
-class ExploreResultsButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.getInvalidColumns = this.getInvalidColumns.bind(this);
-    this.renderInvalidColumnMessage =
-      this.renderInvalidColumnMessage.bind(this);
-  }
+const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
+  actions,
+  query = {},
+  database,
+  onClick,
+}) => {
+  const dispatch = useDispatch();
+  const errorMessage = useSelector(
+    (state: RootState) => state.sqlLab.errorMessage,
+  );
 
-  getColumns() {
+  const getColumns = () => {
     const { props } = this;
     if (
       props.query &&
@@ -58,24 +60,24 @@ class ExploreResultsButton extends React.PureComponent {
       return props.query.results.selected_columns;
     }
     return [];
-  }
+  };
 
-  getQueryDuration() {
+  const getQueryDuration = () => {
     return moment
       .duration(this.props.query.endDttm - this.props.query.startDttm)
       .asSeconds();
-  }
+  };
 
-  getInvalidColumns() {
+  const getInvalidColumns = () => {
     const re1 = /__\d+$/; // duplicate column name pattern
     const re2 = /^__timestamp/i; // reserved temporal column alias
 
     return this.props.query.results.selected_columns
       .map(col => col.name)
       .filter(col => re1.test(col) || re2.test(col));
-  }
+  };
 
-  datasourceName() {
+  const datasourceName = () => {
     const { query } = this.props;
     const uniqueId = shortid.generate();
     let datasourceName = uniqueId;
@@ -84,9 +86,9 @@ class ExploreResultsButton extends React.PureComponent {
       datasourceName += `${query.tab}-${uniqueId}`;
     }
     return datasourceName;
-  }
+  };
 
-  buildVizOptions() {
+  const buildVizOptions = () => {
     const { schema, sql, dbId, templateParams } = this.props.query;
     return {
       dbId,
@@ -96,9 +98,9 @@ class ExploreResultsButton extends React.PureComponent {
       datasourceName: this.datasourceName(),
       columns: this.getColumns(),
     };
-  }
+  };
 
-  renderTimeoutWarning() {
+  const renderTimeoutWarning = () => {
     return (
       <Alert
         type="warning"
@@ -127,9 +129,9 @@ class ExploreResultsButton extends React.PureComponent {
         }
       />
     );
-  }
+  };
 
-  renderInvalidColumnMessage() {
+  const renderInvalidColumnMessage = () => {
     const invalidColumns = this.getInvalidColumns();
     if (invalidColumns.length === 0) {
       return null;
@@ -147,47 +149,26 @@ class ExploreResultsButton extends React.PureComponent {
           invalid column names.`)}
       </div>
     );
-  }
-
-  render() {
-    const allowsSubquery =
-      this.props.database && this.props.database.allows_subquery;
-    return (
-      <>
-        <Button
-          buttonSize="small"
-          onClick={this.props.onClick}
-          disabled={!allowsSubquery}
-          tooltip={t('Explore the result set in the data exploration view')}
-        >
-          <InfoTooltipWithTrigger
-            icon="line-chart"
-            placement="top"
-            label="explore"
-          />{' '}
-          {t('Explore')}
-        </Button>
-      </>
-    );
-  }
-}
-ExploreResultsButton.propTypes = propTypes;
-ExploreResultsButton.defaultProps = defaultProps;
-
-function mapStateToProps({ sqlLab, common }) {
-  return {
-    errorMessage: sqlLab.errorMessage,
-    timeout: common.conf ? common.conf.SUPERSET_WEBSERVER_TIMEOUT : null,
   };
-}
 
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
+  const allowsSubquery = this.props.database && this.props.database.allows_subquery;
+  return (
+    <>
+      <Button
+        buttonSize="small"
+        onClick={this.props.onClick}
+        disabled={!allowsSubquery}
+        tooltip={t('Explore the result set in the data exploration view')}
+      >
+        <InfoTooltipWithTrigger
+          icon="line-chart"
+          placement="top"
+          label="explore"
+        />{' '}
+        {t('Explore')}
+      </Button>
+    </>
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ExploreResultsButton);
+export default ExploreResultsButton;

From 04eae5d7b1d4a3a5918ae950710616c24c8c6adc Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Sun, 23 Jan 2022 15:05:52 +0300
Subject: [PATCH 2/9] Refactoring

---
 .../components/ExploreResultsButton/index.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index dfe7e005bc901..666d0234d70ab 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -51,20 +51,19 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   );
 
   const getColumns = () => {
-    const { props } = this;
     if (
-      props.query &&
-      props.query.results &&
-      props.query.results.selected_columns
+      query &&
+      query.results &&
+      query.results.selected_columns
     ) {
-      return props.query.results.selected_columns;
+      return query.results.selected_columns;
     }
     return [];
   };
 
   const getQueryDuration = () => {
     return moment
-      .duration(this.props.query.endDttm - this.props.query.startDttm)
+      .duration(query.endDttm - query.startDttm)
       .asSeconds();
   };
 
@@ -72,13 +71,12 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
     const re1 = /__\d+$/; // duplicate column name pattern
     const re2 = /^__timestamp/i; // reserved temporal column alias
 
-    return this.props.query.results.selected_columns
+    return query.results.selected_columns
       .map(col => col.name)
       .filter(col => re1.test(col) || re2.test(col));
   };
 
   const datasourceName = () => {
-    const { query } = this.props;
     const uniqueId = shortid.generate();
     let datasourceName = uniqueId;
     if (query) {
@@ -89,14 +87,14 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   };
 
   const buildVizOptions = () => {
-    const { schema, sql, dbId, templateParams } = this.props.query;
+    const { schema, sql, dbId, templateParams } = query;
     return {
       dbId,
       schema,
       sql,
       templateParams,
-      datasourceName: this.datasourceName(),
-      columns: this.getColumns(),
+      datasourceName: datasourceName(),
+      columns: getColumns(),
     };
   };
 
@@ -108,7 +106,7 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
           <>
             {t(
               'This query took %s seconds to run, ',
-              Math.round(this.getQueryDuration()),
+              Math.round(getQueryDuration()),
             ) +
               t(
                 'and the explore view times out at %s seconds ',
@@ -132,7 +130,7 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   };
 
   const renderInvalidColumnMessage = () => {
-    const invalidColumns = this.getInvalidColumns();
+    const invalidColumns = getInvalidColumns();
     if (invalidColumns.length === 0) {
       return null;
     }
@@ -151,12 +149,12 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
     );
   };
 
-  const allowsSubquery = this.props.database && this.props.database.allows_subquery;
+  const allowsSubquery = database && database.allows_subquery;
   return (
     <>
       <Button
         buttonSize="small"
-        onClick={this.props.onClick}
+        onClick={onClick}
         disabled={!allowsSubquery}
         tooltip={t('Explore the result set in the data exploration view')}
       >

From 14eb2aeae85d65f4190bd65c92d253fa3ab1f8b2 Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Sun, 23 Jan 2022 15:34:54 +0300
Subject: [PATCH 3/9] Refactoring

---
 .../components/ExploreResultsButton/index.tsx | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index 666d0234d70ab..c11f9f5229ab7 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -23,7 +23,8 @@ import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import shortid from 'shortid';
-import Button from 'src/components/Button';
+import Button, { OnClickHandler } from 'src/components/Button';
+import { Query } from 'src/SqlLab/types';
 import rootReducer from 'src/SqlLab/reducers';
 
 type RootState = ReturnType<typeof rootReducer>;
@@ -34,9 +35,11 @@ interface ExploreResultsButtonProps {
     addInfoToast: Function;
     addDangerToast: Function;
   };
-  query?: object;
-  database: object;
-  onClick: Function;
+  query?: Query;
+  database: {
+    allows_subquery?: boolean;
+  };
+  onClick: OnClickHandler;
 }
 
 const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
@@ -46,20 +49,12 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   onClick,
 }) => {
   const dispatch = useDispatch();
-  const errorMessage = useSelector(
-    (state: RootState) => state.sqlLab.errorMessage,
+  const conf = useSelector(
+    (state: RootState) => state.common.conf,
   );
+  const timeout = conf ? conf.SUPERSET_WEBSERVER_TIMEOUT : null;
 
-  const getColumns = () => {
-    if (
-      query &&
-      query.results &&
-      query.results.selected_columns
-    ) {
-      return query.results.selected_columns;
-    }
-    return [];
-  };
+  const getColumns = () => query?.results?.selected_columns ?? [];
 
   const getQueryDuration = () => {
     return moment
@@ -110,7 +105,7 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
             ) +
               t(
                 'and the explore view times out at %s seconds ',
-                this.props.timeout,
+                dispatch(timeout),
               ) +
               t(
                 'following this flow will most likely lead to your query timing out. ',

From d40f5c564cd1d32ee15dbecc783d893175a2b99f Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Sun, 23 Jan 2022 15:35:55 +0300
Subject: [PATCH 4/9] Refactoring

---
 .../src/SqlLab/components/ExploreResultsButton/index.tsx    | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index c11f9f5229ab7..6d689c175acdb 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -30,11 +30,6 @@ import rootReducer from 'src/SqlLab/reducers';
 type RootState = ReturnType<typeof rootReducer>;
 
 interface ExploreResultsButtonProps {
-  actions: {
-    createCtasDatasource: Function;
-    addInfoToast: Function;
-    addDangerToast: Function;
-  };
   query?: Query;
   database: {
     allows_subquery?: boolean;
@@ -43,7 +38,6 @@ interface ExploreResultsButtonProps {
 }
 
 const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
-  actions,
   query = {},
   database,
   onClick,

From 48b2ef2bcf859ba726b9fb589e8e9c6649013cea Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Mon, 24 Jan 2022 10:06:47 +0300
Subject: [PATCH 5/9] Refactoring

---
 .../SqlLab/components/ExploreResultsButton/index.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index 6d689c175acdb..c4a7eba6d7216 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { FC } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import moment from 'moment';
 import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
@@ -42,10 +42,7 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   database,
   onClick,
 }) => {
-  const dispatch = useDispatch();
-  const conf = useSelector(
-    (state: RootState) => state.common.conf,
-  );
+  const conf = useSelector((state: RootState) => state.common.conf);
   const timeout = conf ? conf.SUPERSET_WEBSERVER_TIMEOUT : null;
 
   const getColumns = () => query?.results?.selected_columns ?? [];
@@ -97,10 +94,7 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
               'This query took %s seconds to run, ',
               Math.round(getQueryDuration()),
             ) +
-              t(
-                'and the explore view times out at %s seconds ',
-                dispatch(timeout),
-              ) +
+              t('and the explore view times out at %s seconds ', timeout) +
               t(
                 'following this flow will most likely lead to your query timing out. ',
               ) +

From 113fe4e6ccfbb48e7c266069ade22c2a18aeacaf Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Tue, 25 Jan 2022 07:24:15 +0300
Subject: [PATCH 6/9] Refactoring

---
 .../components/ExploreResultsButton/index.tsx | 100 ------------------
 .../src/SqlLab/components/ResultSet/index.tsx |   6 +-
 2 files changed, 1 insertion(+), 105 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index c4a7eba6d7216..5510b74795ce5 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -17,20 +17,11 @@
  * under the License.
  */
 import React, { FC } from 'react';
-import { useSelector } from 'react-redux';
-import moment from 'moment';
-import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import shortid from 'shortid';
 import Button, { OnClickHandler } from 'src/components/Button';
-import { Query } from 'src/SqlLab/types';
-import rootReducer from 'src/SqlLab/reducers';
-
-type RootState = ReturnType<typeof rootReducer>;
 
 interface ExploreResultsButtonProps {
-  query?: Query;
   database: {
     allows_subquery?: boolean;
   };
@@ -38,100 +29,9 @@ interface ExploreResultsButtonProps {
 }
 
 const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
-  query = {},
   database,
   onClick,
 }) => {
-  const conf = useSelector((state: RootState) => state.common.conf);
-  const timeout = conf ? conf.SUPERSET_WEBSERVER_TIMEOUT : null;
-
-  const getColumns = () => query?.results?.selected_columns ?? [];
-
-  const getQueryDuration = () => {
-    return moment
-      .duration(query.endDttm - query.startDttm)
-      .asSeconds();
-  };
-
-  const getInvalidColumns = () => {
-    const re1 = /__\d+$/; // duplicate column name pattern
-    const re2 = /^__timestamp/i; // reserved temporal column alias
-
-    return query.results.selected_columns
-      .map(col => col.name)
-      .filter(col => re1.test(col) || re2.test(col));
-  };
-
-  const datasourceName = () => {
-    const uniqueId = shortid.generate();
-    let datasourceName = uniqueId;
-    if (query) {
-      datasourceName = query.user ? `${query.user}-` : '';
-      datasourceName += `${query.tab}-${uniqueId}`;
-    }
-    return datasourceName;
-  };
-
-  const buildVizOptions = () => {
-    const { schema, sql, dbId, templateParams } = query;
-    return {
-      dbId,
-      schema,
-      sql,
-      templateParams,
-      datasourceName: datasourceName(),
-      columns: getColumns(),
-    };
-  };
-
-  const renderTimeoutWarning = () => {
-    return (
-      <Alert
-        type="warning"
-        message={
-          <>
-            {t(
-              'This query took %s seconds to run, ',
-              Math.round(getQueryDuration()),
-            ) +
-              t('and the explore view times out at %s seconds ', timeout) +
-              t(
-                'following this flow will most likely lead to your query timing out. ',
-              ) +
-              t(
-                'We recommend your summarize your data further before following that flow. ',
-              ) +
-              t('If activated you can use the ')}
-            <strong>CREATE TABLE AS </strong>
-            {t(
-              'feature to store a summarized data set that you can then explore.',
-            )}
-          </>
-        }
-      />
-    );
-  };
-
-  const renderInvalidColumnMessage = () => {
-    const invalidColumns = getInvalidColumns();
-    if (invalidColumns.length === 0) {
-      return null;
-    }
-    return (
-      <div>
-        {t('Column name(s) ')}
-        <code>
-          <strong>{invalidColumns.join(', ')} </strong>
-        </code>
-        {t(`cannot be used as a column name. The column name/alias "__timestamp"
-          is reserved for the main temporal expression, and column aliases ending with
-          double underscores followed by a numeric value (e.g. "my_col__1") are reserved
-          for deduplicating duplicate column names. Please use aliases to rename the
-          invalid column names.`)}
-      </div>
-    );
-  };
-
   const allowsSubquery = database && database.allows_subquery;
   return (
     <>
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index a341e82e9f33a..f015b56070a75 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -527,13 +527,9 @@ export default class ResultSet extends React.PureComponent<
           />
           <ResultSetButtons>
             {this.props.visualize &&
-              this.props.database &&
-              this.props.database.allows_virtual_table_explore && (
+              this.props.database?.allows_virtual_table_explore && (
                 <ExploreResultsButton
-                  // @ts-ignore Redux types are difficult to work with, ignoring for now
-                  query={this.props.query}
                   database={this.props.database}
-                  actions={this.props.actions}
                   onClick={this.handleExploreBtnClick}
                 />
               )}

From 3ab69c9e4eeed2cf80b4fb7aaef551c367148f35 Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Tue, 25 Jan 2022 07:31:52 +0300
Subject: [PATCH 7/9] Refactoring

---
 .../components/ExploreResultsButton/index.tsx | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index 5510b74795ce5..535c15edad81c 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -32,23 +32,21 @@ const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
   database,
   onClick,
 }) => {
-  const allowsSubquery = database && database.allows_subquery;
+  const allowsSubquery = database?.allows_subquery ?? false;
   return (
-    <>
-      <Button
-        buttonSize="small"
-        onClick={onClick}
-        disabled={!allowsSubquery}
-        tooltip={t('Explore the result set in the data exploration view')}
-      >
-        <InfoTooltipWithTrigger
-          icon="line-chart"
-          placement="top"
-          label="explore"
-        />{' '}
-        {t('Explore')}
-      </Button>
-    </>
+    <Button
+      buttonSize="small"
+      onClick={onClick}
+      disabled={!allowsSubquery}
+      tooltip={t('Explore the result set in the data exploration view')}
+    >
+      <InfoTooltipWithTrigger
+        icon="line-chart"
+        placement="top"
+        label="explore"
+      />{' '}
+      {t('Explore')}
+    </Button>
   );
 };
 

From 190b2cbada161c759e309ce89f1927812107733b Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Fri, 28 Jan 2022 11:10:21 +0300
Subject: [PATCH 8/9] Refactoring

---
 .../src/SqlLab/components/ExploreResultsButton/index.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index 535c15edad81c..ed08028f43d70 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { FC } from 'react';
+import React from 'react';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import Button, { OnClickHandler } from 'src/components/Button';
@@ -28,10 +28,10 @@ interface ExploreResultsButtonProps {
   onClick: OnClickHandler;
 }
 
-const ExploreResultsButton: FC<ExploreResultsButtonProps> = ({
+const ExploreResultsButton = ({
   database,
   onClick,
-}) => {
+}: ExploreResultsButtonProps) => {
   const allowsSubquery = database?.allows_subquery ?? false;
   return (
     <Button

From e065ceeb603617709c160b34266f4a91e4c182f7 Mon Sep 17 00:00:00 2001
From: EugeneTorap <evgenykrutpro@gmail.com>
Date: Sun, 6 Feb 2022 12:16:24 +0300
Subject: [PATCH 9/9] Fix test

---
 .../ExploreResultsButton.test.jsx             | 138 +-----------------
 .../components/ExploreResultsButton/index.tsx |   2 +-
 2 files changed, 8 insertions(+), 132 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.jsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.jsx
index b524235dc290a..e9f1740517e0f 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.jsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.jsx
@@ -20,14 +20,10 @@ import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import fetchMock from 'fetch-mock';
-import shortid from 'shortid';
 import sqlLabReducer from 'src/SqlLab/reducers/index';
 import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
-import * as exploreUtils from 'src/explore/exploreUtils';
 import Button from 'src/components/Button';
-import { queries, queryWithBadColumns } from 'src/SqlLab/fixtures';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
 describe('ExploreResultsButton', () => {
   const middlewares = [thunk];
@@ -46,146 +42,26 @@ describe('ExploreResultsButton', () => {
   const store = mockStore(initialState);
   const mockedProps = {
     database,
-    show: true,
-    query: queries[0],
     onClick() {},
   };
-  const mockColumns = {
-    ds: {
-      is_date: true,
-      name: 'ds',
-      type: 'STRING',
-    },
-    gender: {
-      is_date: false,
-      name: 'gender',
-      type: 'STRING',
-    },
-  };
-  const mockChartTypeBarChart = {
-    label: 'Distribution - Bar Chart',
-    value: 'dist_bar',
-  };
-  const mockChartTypeTB = {
-    label: 'Time Series - Bar Chart',
-    value: 'bar',
-  };
+
   const getExploreResultsButtonWrapper = (props = mockedProps) =>
-    shallow(<ExploreResultsButton store={store} {...props} />)
+    shallow(
+      <ThemeProvider theme={supersetTheme}>
+        <ExploreResultsButton store={store} {...props} />
+      </ThemeProvider>,
+    )
       .dive()
       .dive();
 
-  it('renders', () => {
-    expect(React.isValidElement(<ExploreResultsButton />)).toBe(true);
-  });
-
   it('renders with props', () => {
     expect(
       React.isValidElement(<ExploreResultsButton {...mockedProps} />),
     ).toBe(true);
   });
 
-  it('detects bad columns', () => {
-    const wrapper = getExploreResultsButtonWrapper({
-      database,
-      show: true,
-      query: queryWithBadColumns,
-      onClick() {},
-    });
-
-    const badCols = wrapper.instance().getInvalidColumns();
-    expect(badCols).toEqual(['my_dupe_col__2', '__timestamp', '__TIMESTAMP']);
-
-    const msgWrapper = shallow(wrapper.instance().renderInvalidColumnMessage());
-    expect(msgWrapper.find('div')).toHaveLength(1);
-  });
-
   it('renders a Button', () => {
     const wrapper = getExploreResultsButtonWrapper();
     expect(wrapper.find(Button)).toExist();
   });
-
-  describe('datasourceName', () => {
-    let wrapper;
-    let stub;
-    beforeEach(() => {
-      wrapper = getExploreResultsButtonWrapper();
-      stub = sinon.stub(shortid, 'generate').returns('abcd');
-    });
-    afterEach(() => {
-      stub.restore();
-    });
-
-    it('should generate data source name from query', () => {
-      const sampleQuery = queries[0];
-      const name = wrapper.instance().datasourceName();
-      expect(name).toBe(`${sampleQuery.user}-${sampleQuery.tab}-abcd`);
-    });
-    it('should generate data source name with empty query', () => {
-      wrapper.setProps({ query: {} });
-      const name = wrapper.instance().datasourceName();
-      expect(name).toBe('undefined-abcd');
-    });
-
-    it('should build viz options', () => {
-      wrapper.setState({ chartType: mockChartTypeTB });
-      const spy = sinon.spy(wrapper.instance(), 'buildVizOptions');
-      wrapper.instance().buildVizOptions();
-      expect(spy.returnValues[0]).toEqual({
-        schema: 'test_schema',
-        sql: wrapper.instance().props.query.sql,
-        dbId: wrapper.instance().props.query.dbId,
-        columns: Object.values(mockColumns),
-        templateParams: undefined,
-        datasourceName: 'admin-Demo-abcd',
-      });
-    });
-  });
-
-  it('should build visualize advise for long query', () => {
-    const longQuery = { ...queries[0], endDttm: 1476910666798 };
-    const props = {
-      show: true,
-      query: longQuery,
-      database,
-      onClick() {},
-    };
-    const longQueryWrapper = shallow(
-      <ExploreResultsButton store={store} {...props} />,
-    )
-      .dive()
-      .dive();
-    const inst = longQueryWrapper.instance();
-    expect(inst.getQueryDuration()).toBe(100.7050400390625);
-  });
-
-  describe('visualize', () => {
-    const wrapper = getExploreResultsButtonWrapper();
-    const mockOptions = { attr: 'mockOptions' };
-    wrapper.setState({
-      chartType: mockChartTypeBarChart,
-      datasourceName: 'mockDatasourceName',
-    });
-
-    const visualizeURL = '/superset/sqllab_viz/';
-    const visualizeEndpoint = `glob:*${visualizeURL}`;
-    const visualizationPayload = { table_id: 107 };
-    fetchMock.post(visualizeEndpoint, visualizationPayload);
-
-    beforeEach(() => {
-      sinon.stub(exploreUtils, 'getExploreUrl').callsFake(() => 'mockURL');
-      sinon.spy(exploreUtils, 'exportChart');
-      sinon.spy(exploreUtils, 'exploreChart');
-      sinon
-        .stub(wrapper.instance(), 'buildVizOptions')
-        .callsFake(() => mockOptions);
-    });
-    afterEach(() => {
-      exploreUtils.getExploreUrl.restore();
-      exploreUtils.exploreChart.restore();
-      exploreUtils.exportChart.restore();
-      wrapper.instance().buildVizOptions.restore();
-      fetchMock.reset();
-    });
-  });
 });
diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
index ed08028f43d70..7c19a4d3b4afe 100644
--- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx
@@ -22,7 +22,7 @@ import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import Button, { OnClickHandler } from 'src/components/Button';
 
 interface ExploreResultsButtonProps {
-  database: {
+  database?: {
     allows_subquery?: boolean;
   };
   onClick: OnClickHandler;