You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2020/09/22 20:25:20 UTC
[incubator-superset] branch master updated: Replace reactable with
DataTable from superset-ui in QueryTable (#10981)
This is an automated email from the ASF dual-hosted git repository.
rusackas 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 e93d92e Replace reactable with DataTable from superset-ui in QueryTable (#10981)
e93d92e is described below
commit e93d92e8ac6d4f85d193943e27d585fb6e01568c
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Tue Sep 22 22:24:30 2020 +0200
Replace reactable with DataTable from superset-ui in QueryTable (#10981)
* Replace reactable with DataTable from superset-ui in QueryTable
* Fix tests
* Fix pagination
* Fix tests
---
.../spec/javascripts/sqllab/QueryTable_spec.jsx | 24 ++++++++++++--------
.../spec/javascripts/sqllab/fixtures.ts | 5 +++++
.../src/SqlLab/components/QueryTable.jsx | 26 +++++++++++++---------
3 files changed, 36 insertions(+), 19 deletions(-)
diff --git a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
index 7bd205a..e9e54f0 100644
--- a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
@@ -18,27 +18,33 @@
*/
import React from 'react';
import { shallow } from 'enzyme';
-import { Table } from 'reactable-arc';
+import DataTable from '@superset-ui/plugin-chart-table/lib/DataTable';
+import * as useMountedMemo from '@superset-ui/plugin-chart-table/lib/DataTable/utils/useMountedMemo';
import QueryTable from 'src/SqlLab/components/QueryTable';
-import { queries } from './fixtures';
+import { dataTableProps } from 'spec/javascripts/sqllab/fixtures';
describe('QueryTable', () => {
+ // hack for mocking hook that implements sticky behaviour of DataTable
+ jest
+ .spyOn(useMountedMemo, 'default')
+ .mockImplementation(() => ({ width: 100, height: 100 }));
const mockedProps = {
- queries,
+ ...dataTableProps,
+ displayLimit: 10000,
};
it('is valid', () => {
- expect(React.isValidElement(<QueryTable />)).toBe(true);
+ expect(React.isValidElement(<QueryTable {...mockedProps} />)).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(Table)).toExist();
- expect(wrapper.find(Table).shallow().find('table')).toExist();
- expect(wrapper.find(Table).shallow().find('table').find('Tr')).toHaveLength(
- 2,
- );
+ expect(wrapper.find(DataTable)).toExist();
+ expect(wrapper.find(DataTable).shallow().find('table')).toExist();
+ expect(
+ wrapper.find(DataTable).shallow().find('tbody').find('tr'),
+ ).toHaveLength(2);
});
});
diff --git a/superset-frontend/spec/javascripts/sqllab/fixtures.ts b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
index d71ffe9..3e3fc5d 100644
--- a/superset-frontend/spec/javascripts/sqllab/fixtures.ts
+++ b/superset-frontend/spec/javascripts/sqllab/fixtures.ts
@@ -493,3 +493,8 @@ 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 978427d..6edf79f 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,14 +213,20 @@ class QueryTable extends React.PureComponent {
})
.reverse();
return (
- <div className="QueryTable">
- <Table
- columns={this.props.columns}
- className="table table-condensed"
- data={data}
- itemsPerPage={50}
- />
- </div>
+ <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
+ />
);
}
}