feat(sqllab): Replace FilterableTable by AgGrid Table (apache#29900)

one-acre-fund · Jan 31, 2025 · f73d61a · f73d61a
1 parent 3f46bcf
commit f73d61a
Show file tree

Hide file tree

Showing 13 changed files with 1,287 additions and 204 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -123,6 +123,8 @@
     "@visx/xychart": "^3.5.1",
     "abortcontroller-polyfill": "^1.7.8",
     "ace-builds": "^1.36.3",
+    "ag-grid-community": "32.2.1",
+    "ag-grid-react": "32.2.1",
     "antd": "4.10.3",
     "antd-v5": "npm:antd@^5.18.0",
     "bootstrap": "^3.4.1",

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

diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
@@ -38,7 +38,7 @@ describe('FilterableTable', () => {
     const { getByRole, getByText } = render(
       <FilterableTable {...mockedProps} />,
     );
-    expect(getByRole('table')).toBeInTheDocument();
+    expect(getByRole('treegrid')).toBeInTheDocument();
     mockedProps.data.forEach(({ b: columnBContent }) => {
       expect(getByText(columnBContent)).toBeInTheDocument();
     });
@@ -78,11 +78,10 @@ describe('FilterableTable sorting - RTL', () => {
     };
     render(<FilterableTable {...stringProps} />);
 
-    const stringColumn = within(screen.getByRole('table'))
+    const stringColumn = within(screen.getByRole('treegrid'))
       .getByText('columnA')
-      .closest('th');
-    // Antd 4.x Table does not follow the table role structure. Need a hacky selector to point the cell item
-    const gridCells = screen.getByTitle('Bravo').closest('.virtual-grid');
+      .closest('[role=button]');
+    const gridCells = screen.getByText('Bravo').closest('[role=rowgroup]');
 
     // Original order
     expect(gridCells?.textContent).toEqual(
@@ -124,10 +123,10 @@ describe('FilterableTable sorting - RTL', () => {
     };
     render(<FilterableTable {...integerProps} />);
 
-    const integerColumn = within(screen.getByRole('table'))
+    const integerColumn = within(screen.getByRole('treegrid'))
       .getByText('columnB')
-      .closest('th');
-    const gridCells = screen.getByTitle('21').closest('.virtual-grid');
+      .closest('[role=button]');
+    const gridCells = screen.getByText('21').closest('[role=rowgroup]');
 
     // Original order
     expect(gridCells?.textContent).toEqual(['21', '0', '623'].join(''));
@@ -159,10 +158,10 @@ describe('FilterableTable sorting - RTL', () => {
     };
     render(<FilterableTable {...floatProps} />);
 
-    const floatColumn = within(screen.getByRole('table'))
+    const floatColumn = within(screen.getByRole('treegrid'))
       .getByText('columnC')
-      .closest('th');
-    const gridCells = screen.getByTitle('45.67').closest('.virtual-grid');
+      .closest('[role=button]');
+    const gridCells = screen.getByText('45.67').closest('[role=rowgroup]');
 
     // Original order
     expect(gridCells?.textContent).toEqual(
@@ -214,10 +213,10 @@ describe('FilterableTable sorting - RTL', () => {
     };
     render(<FilterableTable {...mixedFloatProps} />);
 
-    const mixedFloatColumn = within(screen.getByRole('table'))
+    const mixedFloatColumn = within(screen.getByRole('treegrid'))
       .getByText('columnD')
-      .closest('th');
-    const gridCells = screen.getByTitle('48710.92').closest('.virtual-grid');
+      .closest('[role=button]');
+    const gridCells = screen.getByText('48710.92').closest('[role=rowgroup]');
 
     // Original order
     expect(gridCells?.textContent).toEqual(
@@ -312,10 +311,10 @@ describe('FilterableTable sorting - RTL', () => {
     };
     render(<FilterableTable {...dsProps} />);
 
-    const dsColumn = within(screen.getByRole('table'))
+    const dsColumn = within(screen.getByRole('treegrid'))
       .getByText('columnDS')
-      .closest('th');
-    const gridCells = screen.getByTitle('2021-01-01').closest('.virtual-grid');
+      .closest('[role=button]');
+    const gridCells = screen.getByText('2021-01-01').closest('[role=rowgroup]');
 
     // Original order
     expect(gridCells?.textContent).toEqual(