diff --git a/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx b/superset-frontend/spec/javascripts/sqllab/QueryTable_spec.jsx
index e9e54f0883181..7bd205a3b17a1 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 3e3fc5d0ab71b..d71ffe987dba1 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 6edf79f31f927..978427df70942 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
- />
+
);
}
}