refactor: Remove reactable arc (#11535)

* Refactor DisplayQueryButton into functional component and use react-table

* Refactor EstimateQueryCostButton to functional component

* Use react-table instead of reactable-arc

* Remove reactable-arc dependency

* Add margin for copy button

* Make search case insensitive

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
@@ -27,10 +27,10 @@ import sqlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
 import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
 import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
 import { DropdownButton, Row, Col, FormControl } from 'react-bootstrap';
-import { Table } from 'reactable-arc';
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 
 import { Menu } from 'src/common/components';
+import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import Button from 'src/components/Button';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import CopyToClipboard from '../../components/CopyToClipboard';
@@ -66,77 +66,93 @@ const MENU_KEYS = {
   DOWNLOAD_AS_IMAGE: 'download_as_image',
 };
 
-export class DisplayQueryButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    const { datasource } = props.latestQueryFormData;
-    this.state = {
-      language: null,
-      query: null,
-      data: null,
-      isLoading: false,
-      error: null,
-      filterText: '',
-      sqlSupported: datasource && datasource.split('__')[1] === 'table',
-      isPropertiesModalOpen: false,
-    };
-    this.beforeOpen = this.beforeOpen.bind(this);
-    this.changeFilterText = this.changeFilterText.bind(this);
-    this.closePropertiesModal = this.closePropertiesModal.bind(this);
-    this.handleMenuClick = this.handleMenuClick.bind(this);
-  }
+const CopyButton = styled(Button)`
+  padding: ${({ theme }) => theme.gridUnit / 2}px
+    ${({ theme }) => theme.gridUnit * 2.5}px;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
 
-  beforeOpen(resultType) {
-    this.setState({ isLoading: true });
+  // needed to override button's first-of-type margin: 0
+  && {
+    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+  }
+`;
+
+export const DisplayQueryButton = props => {
+  const { datasource } = props.latestQueryFormData;
+
+  const [language, setLanguage] = useState(null);
+  const [query, setQuery] = useState(null);
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [filterText, setFilterText] = useState('');
+  const [sqlSupported] = useState(
+    datasource && datasource.split('__')[1] === 'table',
+  );
+  const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
+
+  const tableData = useMemo(() => {
+    if (!data?.length) {
+      return [];
+    }
+    const formattedData = applyFormattingToTabularData(data);
+    return formattedData.filter(row =>
+      Object.values(row).some(value =>
+        value.toString().toLowerCase().includes(filterText.toLowerCase()),
+      ),
+    );
+  }, [data, filterText]);
+
+  const columns = useMemo(
+    () =>
+      data?.length
+        ? Object.keys(data[0]).map(key => ({ accessor: key, Header: key }))
+        : [],
+    [data],
+  );
+
+  const beforeOpen = resultType => {
+    setIsLoading(true);
 
     getChartDataRequest({
-      formData: this.props.latestQueryFormData,
+      formData: props.latestQueryFormData,
       resultFormat: 'json',
       resultType,
     })
       .then(response => {
         // Currently displaying of only first query is supported
         const result = response.result[0];
-        this.setState({
-          language: result.language,
-          query: result.query,
-          data: result.data,
-          isLoading: false,
-          error: null,
-        });
+        setLanguage(result.language);
+        setQuery(result.query);
+        setData(result.data);
+        setIsLoading(false);
+        setError(null);
       })
       .catch(response => {
         getClientErrorObject(response).then(({ error, statusText }) => {
-          this.setState({
-            error: error || statusText || t('Sorry, An error occurred'),
-            isLoading: false,
-          });
+          setError(error || statusText || t('Sorry, An error occurred'));
+          setIsLoading(false);
         });
       });
-  }
+  };
 
-  changeFilterText(event) {
-    this.setState({ filterText: event.target.value });
-  }
+  const changeFilterText = event => {
+    setFilterText(event.target.value);
+  };
 
-  openPropertiesModal() {
-    this.setState({ isPropertiesModalOpen: true });
-  }
+  const openPropertiesModal = () => {
+    setIsPropertiesModalOpen(true);
+  };
 
-  closePropertiesModal() {
-    this.setState({ isPropertiesModalOpen: false });
-  }
+  const closePropertiesModal = () => {
+    setIsPropertiesModalOpen(false);
+  };
 
-  handleMenuClick({ key, domEvent }) {
-    const {
-      chartHeight,
-      slice,
-      onOpenInEditor,
-      latestQueryFormData,
-    } = this.props;
+  const handleMenuClick = ({ key, domEvent }) => {
+    const { chartHeight, slice, onOpenInEditor, latestQueryFormData } = props;
     switch (key) {
       case MENU_KEYS.EDIT_PROPERTIES:
-        this.openPropertiesModal();
+        openPropertiesModal();
         break;
       case MENU_KEYS.RUN_IN_SQL_LAB:
         onOpenInEditor(latestQueryFormData);
@@ -154,20 +170,20 @@ export class DisplayQueryButton extends React.PureComponent {
       default:
         break;
     }
-  }
+  };
 
-  renderQueryModalBody() {
-    if (this.state.isLoading) {
+  const renderQueryModalBody = () => {
+    if (isLoading) {
       return <Loading />;
     }
-    if (this.state.error) {
-      return <pre>{this.state.error}</pre>;
+    if (error) {
+      return <pre>{error}</pre>;
     }
-    if (this.state.query) {
+    if (query) {
       return (
         <div>
           <CopyToClipboard
-            text={this.state.query}
+            text={query}
             shouldShowText={false}
             copyNode={
               <Button style={{ position: 'absolute', right: 20 }}>
@@ -175,32 +191,16 @@ export class DisplayQueryButton extends React.PureComponent {
               </Button>
             }
           />
-          <SyntaxHighlighter language={this.state.language} style={github}>
-            {this.state.query}
+          <SyntaxHighlighter language={language} style={github}>
+            {query}
           </SyntaxHighlighter>
         </div>
       );
     }
     return null;
-  }
+  };
 
-  renderResultsModalBody() {
-    if (this.state.isLoading) {
-      return <Loading />;
-    }
-    if (this.state.error) {
-      return <pre>{this.state.error}</pre>;
-    }
-    if (this.state.data) {
-      if (this.state.data.length === 0) {
-        return 'No data';
-      }
-      return this.renderDataTable(this.state.data);
-    }
-    return null;
-  }
-
-  renderDataTable(data) {
+  const renderDataTable = () => {
     return (
       <div style={{ overflow: 'auto' }}>
         <Row>
@@ -213,9 +213,9 @@ export class DisplayQueryButton extends React.PureComponent {
               text={prepareCopyToClipboardTabularData(data)}
               wrapped={false}
               copyNode={
-                <Button style={{ padding: '2px 10px', fontSize: '11px' }}>
+                <CopyButton>
                   <i className="fa fa-clipboard" />
-                </Button>
+                </CopyButton>
               }
             />
           </Col>
@@ -223,108 +223,121 @@ export class DisplayQueryButton extends React.PureComponent {
             <FormControl
               placeholder={t('Search')}
               bsSize="sm"
-              value={this.state.filterText}
-              onChange={this.changeFilterText}
+              value={filterText}
+              onChange={changeFilterText}
               style={{ paddingBottom: '5px' }}
             />
           </Col>
         </Row>
-        <Table
-          className="table table-condensed"
-          sortable
-          data={applyFormattingToTabularData(data)}
-          hideFilterInput
-          filterBy={this.state.filterText}
-          filterable={data.length ? Object.keys(data[0]) : null}
+        <TableView
+          columns={columns}
+          data={tableData}
+          withPagination={false}
           noDataText={t('No data')}
+          emptyWrapperType={EmptyWrapperType.Small}
+          className="table-condensed"
         />
       </div>
     );
-  }
+  };
 
-  renderSamplesModalBody() {
-    if (this.state.isLoading) {
+  const renderResultsModalBody = () => {
+    if (isLoading) {
       return <Loading />;
     }
-    if (this.state.error) {
-      return <pre>{this.state.error}</pre>;
+    if (error) {
+      return <pre>{error}</pre>;
     }
-    if (this.state.data) {
-      return this.renderDataTable(this.state.data);
+    if (data) {
+      if (data.length === 0) {
+        return 'No data';
+      }
+      return renderDataTable();
     }
     return null;
-  }
+  };
 
-  render() {
-    const { slice } = this.props;
-    return (
-      <DropdownButton
-        noCaret
-        data-test="query-dropdown"
-        title={
-          <span>
-            <i className="fa fa-bars" />
-            &nbsp;
-          </span>
-        }
-        bsSize="sm"
-        pullRight
-        id="query"
-      >
-        <Menu onClick={this.handleMenuClick} selectable={false}>
-          {slice && [
-            <Menu.Item key={MENU_KEYS.EDIT_PROPERTIES}>
-              {t('Edit properties')}
-            </Menu.Item>,
-            <PropertiesModal
-              slice={slice}
-              show={this.state.isPropertiesModalOpen}
-              onHide={this.closePropertiesModal}
-              onSave={this.props.sliceUpdated}
-            />,
-          ]}
-          <Menu.Item>
-            <ModalTrigger
-              triggerNode={
-                <span data-test="view-query-menu-item">{t('View query')}</span>
-              }
-              modalTitle={t('View query')}
-              beforeOpen={() => this.beforeOpen('query')}
-              modalBody={this.renderQueryModalBody()}
-              responsive
-            />
+  const renderSamplesModalBody = () => {
+    if (isLoading) {
+      return <Loading />;
+    }
+    if (error) {
+      return <pre>{error}</pre>;
+    }
+    if (data) {
+      return renderDataTable();
+    }
+    return null;
+  };
+
+  const { slice } = props;
+  return (
+    <DropdownButton
+      noCaret
+      data-test="query-dropdown"
+      title={
+        <span>
+          <i className="fa fa-bars" />
+          &nbsp;
+        </span>
+      }
+      bsSize="sm"
+      pullRight
+      id="query"
+    >
+      <Menu onClick={handleMenuClick} selectable={false}>
+        {slice && [
+          <Menu.Item key={MENU_KEYS.EDIT_PROPERTIES}>
+            {t('Edit properties')}
+          </Menu.Item>,
+          <PropertiesModal
+            slice={slice}
+            show={isPropertiesModalOpen}
+            onHide={closePropertiesModal}
+            onSave={props.sliceUpdated}
+          />,
+        ]}
+        <Menu.Item>
+          <ModalTrigger
+            triggerNode={
+              <span data-test="view-query-menu-item">{t('View query')}</span>
+            }
+            modalTitle={t('View query')}
+            beforeOpen={() => beforeOpen('query')}
+            modalBody={renderQueryModalBody()}
+            responsive
+          />
+        </Menu.Item>
+        <Menu.Item>
+          <ModalTrigger
+            triggerNode={<span>{t('View results')}</span>}
+            modalTitle={t('View results')}
+            beforeOpen={() => beforeOpen('results')}
+            modalBody={renderResultsModalBody()}
+            responsive
+          />
+        </Menu.Item>
+        <Menu.Item>
+          <ModalTrigger
+            triggerNode={<span>{t('View samples')}</span>}
+            modalTitle={t('View samples')}
+            beforeOpen={() => beforeOpen('samples')}
+            modalBody={renderSamplesModalBody()}
+            responsive
+          />
+        </Menu.Item>
+        {sqlSupported && (
+          <Menu.Item key={MENU_KEYS.RUN_IN_SQL_LAB}>
+            {t('Run in SQL Lab')}
           </Menu.Item>
-          <Menu.Item>
-            <ModalTrigger
-              triggerNode={<span>{t('View results')}</span>}
-              modalTitle={t('View results')}
-              beforeOpen={() => this.beforeOpen('results')}
-              modalBody={this.renderResultsModalBody()}
-              responsive
-            />
-          </Menu.Item>
-          <Menu.Item>
-            <ModalTrigger
-              triggerNode={<span>{t('View samples')}</span>}
-              modalTitle={t('View samples')}
-              beforeOpen={() => this.beforeOpen('samples')}
-              modalBody={this.renderSamplesModalBody()}
-              responsive
-            />
-          </Menu.Item>
-          {this.state.sqlSupported && (
-            <Menu.Item key={MENU_KEYS.RUN_IN_SQL_LAB}>
-              {t('Run in SQL Lab')}
-            </Menu.Item>
-          )}
-          <Menu.Item key={MENU_KEYS.DOWNLOAD_AS_IMAGE}>
-            {t('Download as image')}
-          </Menu.Item>
-        </Menu>
-      </DropdownButton>
-    );
-  }
-}
+        )}
+        <Menu.Item key={MENU_KEYS.DOWNLOAD_AS_IMAGE}>
+          {t('Download as image')}
+        </Menu.Item>
+      </Menu>
+    </DropdownButton>
+  );
+};
 
 DisplayQueryButton.propTypes = propTypes;