[incubator-superset] branch master updated: fix: Revert "Replace reactable with DataTable from superset-ui in QueryTable (#10981)" (#11125)

[ta...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

tai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7a72082  fix: Revert "Replace reactable with DataTable from superset-ui in QueryTable (#10981)" (#11125)
7a72082 is described below

commit 7a72082d31257012235c962db853e908f8e4af4c
Author: ʈᵃᵢ <td...@gmail.com>
AuthorDate: Thu Oct 1 10:06:22 2020 -0700

    fix: Revert "Replace reactable with DataTable from superset-ui in QueryTable (#10981)" (#11125)
    
    This reverts commit e93d92e8ac6d4f85d193943e27d585fb6e01568c.
---
 .../spec/javascripts/sqllab/QueryTable_spec.jsx    | 24 ++++++++------------
 .../spec/javascripts/sqllab/fixtures.ts            |  5 -----
 .../src/SqlLab/components/QueryTable.jsx           | 26 +++++++++-------------
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
index e9e54f0..7bd205a 100644
--- a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
@@ -18,33 +18,27 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import DataTable from '@superset-ui/plugin-chart-table/lib/DataTable';
-import * as useMountedMemo from '@superset-ui/plugin-chart-table/lib/DataTable/utils/useMountedMemo';
+import { Table } from 'reactable-arc';
 import QueryTable from 'src/SqlLab/components/QueryTable';
 
-import { dataTableProps } from 'spec/javascripts/sqllab/fixtures';
+import { queries } from './fixtures';
 
 describe('QueryTable', () => {
-  // hack for mocking hook that implements sticky behaviour of DataTable
-  jest
-    .spyOn(useMountedMemo, 'default')
-    .mockImplementation(() => ({ width: 100, height: 100 }));
   const mockedProps = {
-    ...dataTableProps,
-    displayLimit: 10000,
+    queries,
   };
   it('is valid', () => {
-    expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
+    expect(React.isValidElement(<QueryTable />)).toBe(true);
   });
   it('is valid with props', () => {
     expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
   });
   it('renders a proper table', () => {
     const wrapper = shallow(<QueryTable {...mockedProps} />);
-    expect(wrapper.find(DataTable)).toExist();
-    expect(wrapper.find(DataTable).shallow().find('table')).toExist();
-    expect(
-      wrapper.find(DataTable).shallow().find('tbody').find('tr'),
-    ).toHaveLength(2);
+    expect(wrapper.find(Table)).toExist();
+    expect(wrapper.find(Table).shallow().find('table')).toExist();
+    expect(wrapper.find(Table).shallow().find('table').find('Tr')).toHaveLength(
+      2,
+    );
   });
 });
diff --git a/superset-frontend/spec/javascripts/sqllab/fixtures.ts b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
index 3e3fc5d..d71ffe9 100644
--- a/superset-frontend/spec/javascripts/sqllab/fixtures.ts
+++ b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
@@ -493,8 +493,3 @@ export const query = {
   ctas: false,
   cached: false,
 };
-
-export const dataTableProps = {
-  columns: ['dbId', 'sql'],
-  queries,
-};
diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx
index 6edf79f..978427d 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable.jsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx
@@ -19,17 +19,17 @@
 import React 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 DataTable from '@superset-ui/plugin-chart-table/lib/DataTable';
 
 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 = {
@@ -213,20 +213,14 @@ class QueryTable extends React.PureComponent {
       })
       .reverse();
     return (
-      <DataTable
-        tableClassName="table table-condensed"
-        columns={this.props.columns.map(column => ({
-          accessor: column,
-          Header: () => <th>{column}</th>,
-          Cell: ({ value }) => <td>{value}</td>,
-        }))}
-        data={data}
-        pageSize={10}
-        maxPageItemCount={9}
-        searchInput={false}
-        height="100%"
-        sticky
-      />
+      <div className="QueryTable">
+        <Table
+          columns={this.props.columns}
+          className="table table-condensed"
+          data={data}
+          itemsPerPage={50}
+        />
+      </div>
     );
   }
 }