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
2020-11-11 00:13:29 +01:00 · 2020-11-11 00:13:29 +01:00 · 98d1c6964c
parent 777a84cdbf
commit 98d1c6964c
6 changed files with 237 additions and 223 deletions
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@ -42518,11 +42518,6 @@
        "has": "^1.0.1"
      }
    },
-    "reactable-arc": {
-      "version": "0.14.42",
-      "resolved": "https://registry.npmjs.org/reactable-arc/-/reactable-arc-0.14.42.tgz",
-      "integrity": "sha512-dYWTX+JdknG/DgQlqbjf4ZIJj2z6blEfl7gqTNsLD66gcM+YrgRsTbl4S0E71/iPzfgGujxyk3TLilbozx9c9Q=="
-    },
    "reactcss": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@ -157,7 +157,6 @@
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-virtualized-select": "^3.1.3",
    "react-window": "^1.8.5",
-    "reactable-arc": "0.14.42",
    "redux": "^3.5.2",
    "redux-localstorage": "^0.4.1",
    "redux-thunk": "^2.1.0",
--- a/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx
+++ b/superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx
@ -16,15 +16,16 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Table } from 'reactable-arc';
 import { Alert } from 'react-bootstrap';
 import { t } from '@superset-ui/core';

+import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
 import Loading from '../../components/Loading';
 import ModalTrigger from '../../components/ModalTrigger';
+import { EmptyWrapperType } from '../../components/TableView/TableView';

 const propTypes = {
  dbId: PropTypes.number.isRequired,
@ -42,65 +43,68 @@ const defaultProps = {
  disabled: false,
 };

-class EstimateQueryCostButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.queryCostModal = React.createRef();
-    this.onClick = this.onClick.bind(this);
-    this.renderModalBody = this.renderModalBody.bind(this);
-  }
+const EstimateQueryCostButton = props => {
+  const { cost } = props.queryCostEstimate;
+  const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
+  const columns = useMemo(
+    () =>
+      Array.isArray(cost) && cost.length
+        ? Object.keys(cost[0]).map(key => ({ accessor: key, Header: key }))
+        : [],
+    [cost],
+  );

-  onClick() {
-    this.props.getEstimate();
-  }
+  const onClick = () => {
+    props.getEstimate();
+  };

-  renderModalBody() {
-    if (this.props.queryCostEstimate.error !== null) {
+  const renderModalBody = () => {
+    if (props.queryCostEstimate.error !== null) {
      return (
        <Alert key="query-estimate-error" bsStyle="danger">
-          {this.props.queryCostEstimate.error}
+          {props.queryCostEstimate.error}
        </Alert>
      );
    }
-    if (this.props.queryCostEstimate.completed) {
+    if (props.queryCostEstimate.completed) {
      return (
-        <Table
-          className="table cost-estimate"
-          data={this.props.queryCostEstimate.cost}
+        <TableView
+          columns={columns}
+          data={tableData}
+          withPagination={false}
+          emptyWrapperType={EmptyWrapperType.Small}
+          className="cost-estimate"
        />
      );
    }
    return <Loading position="normal" />;
-  }
+  };

-  render() {
-    const { disabled, selectedText, tooltip } = this.props;
-    const btnText = selectedText
-      ? t('Estimate Selected Query Cost')
-      : t('Estimate Query Cost');
-    return (
-      <span className="EstimateQueryCostButton">
-        <ModalTrigger
-          ref={this.queryCostModal}
-          modalTitle={t('Query Cost Estimate')}
-          modalBody={this.renderModalBody()}
-          triggerNode={
-            <Button
-              buttonStyle="warning"
-              buttonSize="small"
-              onClick={this.onClick}
-              key="query-estimate-btn"
-              tooltip={tooltip}
-              disabled={disabled}
-            >
-              <i className="fa fa-clock-o" /> {btnText}
-            </Button>
-          }
-        />
-      </span>
-    );
-  }
-}
+  const { disabled, selectedText, tooltip } = props;
+  const btnText = selectedText
+    ? t('Estimate Selected Query Cost')
+    : t('Estimate Query Cost');
+  return (
+    <span className="EstimateQueryCostButton">
+      <ModalTrigger
+        modalTitle={t('Query Cost Estimate')}
+        modalBody={renderModalBody()}
+        triggerNode={
+          <Button
+            buttonStyle="warning"
+            buttonSize="small"
+            onClick={onClick}
+            key="query-estimate-btn"
+            tooltip={tooltip}
+            disabled={disabled}
+          >
+            <i className="fa fa-clock-o" /> {btnText}
+          </Button>
+        }
+      />
+    </span>
+  );
+};

 EstimateQueryCostButton.propTypes = propTypes;
 EstimateQueryCostButton.defaultProps = defaultProps;
--- a/superset-frontend/src/components/TableView/index.ts
+++ b/superset-frontend/src/components/TableView/index.ts
@ -16,4 +16,5 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+export * from './TableView';
 export { default } from './TableView';
--- a/superset-frontend/src/components/dataViewCommon/TableCollection.tsx
+++ b/superset-frontend/src/components/dataViewCommon/TableCollection.tsx
@ -52,6 +52,8 @@ export const Table = styled.table`
    position: sticky;
    top: 0;

+    white-space: nowrap;
+
    &:first-of-type {
      padding-left: ${({ theme }) => theme.gridUnit * 4}px;
    }
--- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx
+++ b/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;