Use antd table in FilterableTable

apache · May 1, 2023 · f915aac · f915aac
1 parent fd3030f
commit f915aac
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 336 deletions.
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -196,7 +196,6 @@
     "react-table": "^7.8.0",
     "react-transition-group": "^2.5.3",
     "react-ultimate-pagination": "^1.3.0",
-    "react-virtualized": "9.19.1",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "redux": "^4.2.1",
@@ -267,7 +266,6 @@
     "@types/react-select": "^3.0.19",
     "@types/react-table": "^7.0.19",
     "@types/react-ultimate-pagination": "^1.2.0",
-    "@types/react-virtualized": "^9.21.10",
     "@types/react-window": "^1.8.5",
     "@types/redux-localstorage": "^1.0.8",
     "@types/redux-mock-store": "^1.0.2",

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx b/superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
@@ -224,14 +224,14 @@ describe('ResultSet', () => {
   });
 
   test('renders if there is no limit in query.results but has queryLimit', async () => {
-    const { getByRole } = setup(mockedProps, mockStore(initialState));
-    expect(getByRole('grid')).toBeInTheDocument();
+    const { getByTestId } = setup(mockedProps, mockStore(initialState));
+    expect(getByTestId('table-container')).toBeInTheDocument();
   });
 
   test('renders if there is a limit in query.results but not queryLimit', async () => {
     const props = { ...mockedProps, query: queryWithNoQueryLimit };
-    const { getByRole } = setup(props, mockStore(initialState));
-    expect(getByRole('grid')).toBeInTheDocument();
+    const { getByTestId } = setup(props, mockStore(initialState));
+    expect(getByTestId('table-container')).toBeInTheDocument();
   });
 
   test('Async queries - renders "Fetch data preview" button when data preview has no results', () => {
@@ -256,7 +256,7 @@ describe('ResultSet', () => {
 
   test('Async queries - renders on the first call', () => {
     setup(asyncQueryProps, mockStore(initialState));
-    expect(screen.getByRole('grid')).toBeVisible();
+    expect(screen.getByTestId('table-container')).toBeVisible();
     expect(
       screen.queryByRole('button', {
         name: /fetch data preview/i,

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -42,9 +42,7 @@ import { mountExploreUrl } from 'src/explore/exploreUtils';
 import { postFormData } from 'src/explore/exploreUtils/formData';
 import ProgressBar from 'src/components/ProgressBar';
 import Loading from 'src/components/Loading';
-import FilterableTable, {
-  MAX_COLUMNS_FOR_TABLE,
-} from 'src/components/FilterableTable';
+import FilterableTable from 'src/components/FilterableTable';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
 import { prepareCopyToClipboardTabularData } from 'src/utils/common';
@@ -282,12 +280,7 @@ const ResultSet = ({
               onChange={changeSearch}
               value={searchText}
               className="form-control input-sm"
-              disabled={columns.length > MAX_COLUMNS_FOR_TABLE}
-              placeholder={
-                columns.length > MAX_COLUMNS_FOR_TABLE
-                  ? t('Too many columns to filter')
-                  : t('Filter results')
-              }
+              placeholder={t('Filter results')}
             />
           )}
         </ResultSetControls>
@@ -486,7 +479,7 @@ const ResultSet = ({
     // We need to calculate the height of this.renderRowsReturned()
     // if we want results panel to be proper height because the
     // FilterTable component needs an explicit height to render
-    // react-virtualized Table component
+    // antd Table component
     const rowsHeight = alertIsOpen
       ? height - alertContainerHeight
       : height - rowMessageHeight;

diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
@@ -20,7 +20,6 @@ import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
 import FilterableTable, {
-  MAX_COLUMNS_FOR_TABLE,
   convertBigIntStrToNumber,
 } from 'src/components/FilterableTable';
 import { render, screen } from 'spec/helpers/testing-library';
@@ -49,27 +48,6 @@ describe('FilterableTable', () => {
     expect(wrapper.find('.ReactVirtualized__Grid')).toExist();
     expect(wrapper.find('.ReactVirtualized__Table__row')).toHaveLength(3);
   });
-  it('renders a grid with 2 Grid rows for wide tables', () => {
-    const wideTableColumns = MAX_COLUMNS_FOR_TABLE + 1;
-    const wideTableMockedProps = {
-      orderedColumnKeys: Array.from(
-        Array(wideTableColumns),
-        (_, x) => `col_${x}`,
-      ),
-      data: [
-        {
-          ...Array.from(Array(wideTableColumns)).map((val, x) => ({
-            [`col_${x}`]: x,
-          })),
-        },
-      ],
-      height: 500,
-    };
-    const wideTableWrapper = mount(
-      <FilterableTable {...wideTableMockedProps} />,
-    );
-    expect(wideTableWrapper.find('.ReactVirtualized__Grid')).toHaveLength(2);
-  });
   it('filters on a string', () => {
     const props = {
       ...mockedProps,