feat: Use AntD table in FilterableTable (#23035)

Co-authored-by: justin-park <[email protected]>

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",
@@ -268,7 +267,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",

superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx

@@ -225,13 +225,13 @@ 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();
+    expect(getByRole('table')).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();
+    expect(getByRole('table')).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.getByRole('table')).toBeVisible();
     expect(
       screen.queryByRole('button', {
         name: /fetch data preview/i,

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
+    // the Table component
     const rowsHeight = alertIsOpen
       ? height - alertContainerHeight
       : height - rowMessageHeight;