mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
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
This commit is contained in:
parent
9f01a7fdf8
commit
e93d92e8ac
@ -18,27 +18,33 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
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 QueryTable from 'src/SqlLab/components/QueryTable';
|
||||||
|
|
||||||
import { queries } from './fixtures';
|
import { dataTableProps } from 'spec/javascripts/sqllab/fixtures';
|
||||||
|
|
||||||
describe('QueryTable', () => {
|
describe('QueryTable', () => {
|
||||||
|
// hack for mocking hook that implements sticky behaviour of DataTable
|
||||||
|
jest
|
||||||
|
.spyOn(useMountedMemo, 'default')
|
||||||
|
.mockImplementation(() => ({ width: 100, height: 100 }));
|
||||||
const mockedProps = {
|
const mockedProps = {
|
||||||
queries,
|
...dataTableProps,
|
||||||
|
displayLimit: 10000,
|
||||||
};
|
};
|
||||||
it('is valid', () => {
|
it('is valid', () => {
|
||||||
expect(React.isValidElement(<QueryTable />)).toBe(true);
|
expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
||||||
});
|
});
|
||||||
it('is valid with props', () => {
|
it('is valid with props', () => {
|
||||||
expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
expect(React.isValidElement(<QueryTable {...mockedProps} />)).toBe(true);
|
||||||
});
|
});
|
||||||
it('renders a proper table', () => {
|
it('renders a proper table', () => {
|
||||||
const wrapper = shallow(<QueryTable {...mockedProps} />);
|
const wrapper = shallow(<QueryTable {...mockedProps} />);
|
||||||
expect(wrapper.find(Table)).toExist();
|
expect(wrapper.find(DataTable)).toExist();
|
||||||
expect(wrapper.find(Table).shallow().find('table')).toExist();
|
expect(wrapper.find(DataTable).shallow().find('table')).toExist();
|
||||||
expect(wrapper.find(Table).shallow().find('table').find('Tr')).toHaveLength(
|
expect(
|
||||||
2,
|
wrapper.find(DataTable).shallow().find('tbody').find('tr'),
|
||||||
);
|
).toHaveLength(2);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -493,3 +493,8 @@ export const query = {
|
|||||||
ctas: false,
|
ctas: false,
|
||||||
cached: false,
|
cached: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const dataTableProps = {
|
||||||
|
columns: ['dbId', 'sql'],
|
||||||
|
queries,
|
||||||
|
};
|
||||||
|
@ -19,17 +19,17 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { Table } from 'reactable-arc';
|
|
||||||
import { ProgressBar, Well } from 'react-bootstrap';
|
import { ProgressBar, Well } from 'react-bootstrap';
|
||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
import DataTable from '@superset-ui/plugin-chart-table/lib/DataTable';
|
||||||
|
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
|
import { fDuration } from 'src/modules/dates';
|
||||||
import Link from '../../components/Link';
|
import Link from '../../components/Link';
|
||||||
import ResultSet from './ResultSet';
|
import ResultSet from './ResultSet';
|
||||||
import ModalTrigger from '../../components/ModalTrigger';
|
import ModalTrigger from '../../components/ModalTrigger';
|
||||||
import HighlightedSql from './HighlightedSql';
|
import HighlightedSql from './HighlightedSql';
|
||||||
import { fDuration } from '../../modules/dates';
|
|
||||||
import QueryStateLabel from './QueryStateLabel';
|
import QueryStateLabel from './QueryStateLabel';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
@ -213,14 +213,20 @@ class QueryTable extends React.PureComponent {
|
|||||||
})
|
})
|
||||||
.reverse();
|
.reverse();
|
||||||
return (
|
return (
|
||||||
<div className="QueryTable">
|
<DataTable
|
||||||
<Table
|
tableClassName="table table-condensed"
|
||||||
columns={this.props.columns}
|
columns={this.props.columns.map(column => ({
|
||||||
className="table table-condensed"
|
accessor: column,
|
||||||
data={data}
|
Header: () => <th>{column}</th>,
|
||||||
itemsPerPage={50}
|
Cell: ({ value }) => <td>{value}</td>,
|
||||||
/>
|
}))}
|
||||||
</div>
|
data={data}
|
||||||
|
pageSize={10}
|
||||||
|
maxPageItemCount={9}
|
||||||
|
searchInput={false}
|
||||||
|
height="100%"
|
||||||
|
sticky
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user