refactor(ExploreCtasResultsButton): convert to functional component (#…

…17939) * chore: fix misspelling of button * Feat: Update ExploreCtasResultsButton to functional component * Fix pull request * Fix index.tsx * Fix prettier issues and actions * Streamline the onClick so it calls visualize directly * Update MSP and MDP to arrow functions * Test destructured props * Fix props destructuring error * Simplify with optional chaining on line 94 and clean up buildVizOptions Co-authored-by: David Woolner <davidwoolner@gmail.com> Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
apache · Feb 8, 2022 · 51f716f · 51f716f
1 parent 7194a01
commit 51f716f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 60 deletions.
diff --git a/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx b/superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx
@@ -35,29 +35,24 @@ const propTypes = {
   templateParams: PropTypes.string,
 };
 
-class ExploreCtasResultsButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.visualize = this.visualize.bind(this);
-    this.onClick = this.onClick.bind(this);
-  }
-
-  onClick() {
-    this.visualize();
-  }
-
-  buildVizOptions() {
-    return {
-      datasourceName: this.props.table,
-      schema: this.props.schema,
-      dbId: this.props.dbId,
-      templateParams: this.props.templateParams,
-    };
-  }
+function ExploreCtasResultsButton({
+  table,
+  schema,
+  dbId,
+  templateParams,
+  errorMessage,
+  actions,
+}) {
+  const { createCtasDatasource, addInfoToast, addDangerToast } = actions;
+  const buildVizOptions = {
+    datasourceName: table,
+    schema,
+    dbId,
+    templateParams,
+  };
 
-  visualize() {
-    this.props.actions
-      .createCtasDatasource(this.buildVizOptions())
+  const visualize = () => {
+    createCtasDatasource(buildVizOptions)
       .then(data => {
         const formData = {
           datasource: `${data.table_id}__table`,
@@ -68,53 +63,40 @@ class ExploreCtasResultsButton extends React.PureComponent {
           all_columns: [],
           row_limit: 1000,
         };
-        this.props.actions.addInfoToast(
-          t('Creating a data source and creating a new tab'),
-        );
-
+        addInfoToast(t('Creating a data source and creating a new tab'));
         // open new window for data visualization
         exploreChart(formData);
       })
       .catch(() => {
-        this.props.actions.addDangerToast(
-          this.props.errorMessage || t('An error occurred'),
-        );
+        addDangerToast(errorMessage || t('An error occurred'));
       });
-  }
+  };
 
-  render() {
-    return (
-      <>
-        <Button
-          buttonSize="small"
-          onClick={this.onClick}
-          tooltip={t('Explore the result set in the data exploration view')}
-        >
-          <InfoTooltipWithTrigger
-            icon="line-chart"
-            placement="top"
-            label="explore"
-          />{' '}
-          {t('Explore')}
-        </Button>
-      </>
-    );
-  }
+  return (
+    <Button
+      buttonSize="small"
+      onClick={visualize}
+      tooltip={t('Explore the result set in the data exploration view')}
+    >
+      <InfoTooltipWithTrigger
+        icon="line-chart"
+        placement="top"
+        label="explore"
+      />{' '}
+      {t('Explore')}
+    </Button>
+  );
 }
 ExploreCtasResultsButton.propTypes = propTypes;
 
-function mapStateToProps({ sqlLab, common }) {
-  return {
-    errorMessage: sqlLab.errorMessage,
-    timeout: common.conf ? common.conf.SUPERSET_WEBSERVER_TIMEOUT : null,
-  };
-}
+const mapStateToProps = ({ sqlLab, common }) => ({
+  errorMessage: sqlLab.errorMessage,
+  timeout: common.conf?.SUPERSET_WEBSERVER_TIMEOUT,
+});
 
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions, dispatch),
+});
 
 export default connect(
   mapStateToProps,

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -729,7 +729,6 @@ export default class ResultSet extends React.PureComponent<
                     table={tempTable}
                     schema={tempSchema}
                     dbId={exploreDBId}
-                    database={this.props.database}
                     actions={this.props.actions}
                   />
                 </ButtonGroup>