diff --git a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx index e9e54f0883..7bd205a3b1 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()).toBe(true); + expect(React.isValidElement()).toBe(true); }); it('is valid with props', () => { expect(React.isValidElement()).toBe(true); }); it('renders a proper table', () => { const wrapper = shallow(); - 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 3e3fc5d0ab..d71ffe987d 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 6edf79f31f..978427df70 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 ( - ({ - accessor: column, - Header: () => {column}, - Cell: ({ value }) => {value}, - }))} - data={data} - pageSize={10} - maxPageItemCount={9} - searchInput={false} - height="100%" - sticky - /> +
+ + ); } }