refactor: Refactor QueryTable to use react-table (#11216)

* Refactor QueryTable to use react-table

* Fix lodash import

* Fix tests

* Fix imports and QuerySearch styles

* Update superset-frontend/src/SqlLab/components/QuerySearch.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Update superset-frontend/src/SqlLab/components/QuerySearch.jsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Lint fix

* Refactored QueryTable into functional component

* Remove calculating content height

* Lint fix

Co-authored-by: Evan Rusackas <evan@preset.io>

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

@@ -16,20 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Table } from 'reactable-arc';
 import { ProgressBar, Well } from 'react-bootstrap';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/core';
 
+import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
+import { fDuration } from 'src/modules/dates';
 import Link from '../../components/Link';
 import ResultSet from './ResultSet';
 import ModalTrigger from '../../components/ModalTrigger';
 import HighlightedSql from './HighlightedSql';
-import { fDuration } from '../../modules/dates';
 import QueryStateLabel from './QueryStateLabel';
 
 const propTypes = {
@@ -47,34 +47,44 @@ const defaultProps = {
   onDbClicked: () => {},
 };
 
-class QueryTable extends React.PureComponent {
-  openQuery(id) {
-    const url = `/superset/sqllab?queryId=${id}`;
-    window.open(url);
-  }
+const openQuery = id => {
+  const url = `/superset/sqllab?queryId=${id}`;
+  window.open(url);
+};
 
-  restoreSql(query) {
-    this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
-  }
+const QueryTable = props => {
+  const columns = useMemo(
+    () =>
+      props.columns.map(column => ({
+        accessor: column,
+        Header: column,
+        disableSortBy: true,
+      })),
+    [props.columns],
+  );
 
-  openQueryInNewTab(query) {
-    this.props.actions.cloneQueryToNewTab(query, true);
-  }
+  const data = useMemo(() => {
+    const restoreSql = query => {
+      props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+    };
 
-  openAsyncResults(query, displayLimit) {
-    this.props.actions.fetchQueryResults(query, displayLimit);
-  }
+    const openQueryInNewTab = query => {
+      props.actions.cloneQueryToNewTab(query, true);
+    };
 
-  clearQueryResults(query) {
-    this.props.actions.clearQueryResults(query);
-  }
+    const openAsyncResults = (query, displayLimit) => {
+      props.actions.fetchQueryResults(query, displayLimit);
+    };
 
-  removeQuery(query) {
-    this.props.actions.removeQuery(query);
-  }
+    const clearQueryResults = query => {
+      props.actions.clearQueryResults(query);
+    };
 
-  render() {
-    const data = this.props.queries
+    const removeQuery = query => {
+      props.actions.removeQuery(query);
+    };
+
+    return props.queries
       .map(query => {
         const q = { ...query };
         if (q.endDttm) {
@@ -92,7 +102,7 @@ class QueryTable extends React.PureComponent {
           <Button
             buttonSize="small"
             buttonStyle="link"
-            onClick={this.props.onUserClicked.bind(this, q.userId)}
+            onClick={() => props.onUserClicked(q.userId)}
           >
             {q.user}
           </Button>
@@ -101,7 +111,7 @@ class QueryTable extends React.PureComponent {
           <Button
             buttonSize="small"
             buttonStyle="link"
-            onClick={this.props.onDbClicked.bind(this, q.dbId)}
+            onClick={() => props.onDbClicked(q.dbId)}
           >
             {q.db}
           </Button>
@@ -112,7 +122,7 @@ class QueryTable extends React.PureComponent {
             <Button
               buttonSize="small"
               buttonStyle="link"
-              onClick={this.openQuery.bind(this, q.queryId)}
+              onClick={() => openQuery(q.queryId)}
             >
               <i className="fa fa-external-link m-r-3" />
               {t('Edit')}
@@ -140,19 +150,15 @@ class QueryTable extends React.PureComponent {
                 </Label>
               }
               modalTitle={t('Data preview')}
-              beforeOpen={this.openAsyncResults.bind(
-                this,
-                query,
-                this.props.displayLimit,
-              )}
-              onExit={this.clearQueryResults.bind(this, query)}
+              beforeOpen={() => openAsyncResults(query, props.displayLimit)}
+              onExit={() => clearQueryResults(query)}
               modalBody={
                 <ResultSet
                   showSql
                   query={query}
-                  actions={this.props.actions}
+                  actions={props.actions}
                   height={400}
-                  displayLimit={this.props.displayLimit}
+                  displayLimit={props.displayLimit}
                 />
               }
             />
@@ -190,7 +196,7 @@ class QueryTable extends React.PureComponent {
           <div style={{ width: '75px' }}>
             <Link
               className="fa fa-pencil m-r-3"
-              onClick={this.restoreSql.bind(this, query)}
+              onClick={() => restoreSql(query)}
               tooltip={t(
                 'Overwrite text in the editor with a query on this table',
               )}
@@ -198,32 +204,34 @@ class QueryTable extends React.PureComponent {
             />
             <Link
               className="fa fa-plus-circle m-r-3"
-              onClick={this.openQueryInNewTab.bind(this, query)}
+              onClick={() => openQueryInNewTab(query)}
               tooltip={t('Run query in a new tab')}
               placement="top"
             />
             <Link
               className="fa fa-trash m-r-3"
               tooltip={t('Remove query from log')}
-              onClick={this.removeQuery.bind(this, query)}
+              onClick={() => removeQuery(query)}
             />
           </div>
         );
         return q;
       })
       .reverse();
-    return (
-      <div className="QueryTable">
-        <Table
-          columns={this.props.columns}
-          className="table table-condensed"
-          data={data}
-          itemsPerPage={50}
-        />
-      </div>
-    );
-  }
-}
+  }, [props]);
+
+  return (
+    <div className="QueryTable">
+      <TableView
+        columns={columns}
+        data={data}
+        className="table-condensed"
+        pageSize={50}
+      />
+    </div>
+  );
+};
+
 QueryTable.propTypes = propTypes;
 QueryTable.defaultProps = defaultProps;