Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
justinpark merged 20 commits into from
Jan 31, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1d868dc
feat(sqllab): Replace FilterableTable by AgGrid Table
justinpark Aug 9, 2024
5979481
missing license
justinpark Aug 9, 2024
3ae9a80
fix unit test
justinpark Aug 9, 2024
bdde6e0
fix unit test
justinpark Aug 11, 2024
c0b5fcb
centering header main position
justinpark Aug 15, 2024
58c6cd6
update theme by quartz
justinpark Aug 19, 2024
f8cf9eb
adjust fontsize by size
justinpark Aug 20, 2024
284ad5b
set size to small
justinpark Aug 20, 2024
5120678
allow multi row selection
justinpark Aug 21, 2024
57fdf86
Add column movable and autosize
justinpark Aug 22, 2024
d124e32
fix test specs
justinpark Aug 22, 2024
ef8b92a
Add specs for additional menu actions
justinpark Aug 22, 2024
6be3975
bump to 32.2.1 and minor updates
justinpark Oct 2, 2024
5168c43
update types for 32.2
justinpark Oct 2, 2024
7ddc6e7
set enableFilterButton
justinpark Oct 2, 2024
f0dbace
fix tests related to 32 ver upgrade
justinpark Oct 4, 2024
c782649
lint
justinpark Jan 15, 2025
65911ec
spell
justinpark Jan 22, 2025
fd0df78
update data access for font-src
justinpark Jan 22, 2025
de95ae8
remove default font-style override
justinpark Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions superset-frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions superset-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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,
Expand Down
33 changes: 16 additions & 17 deletions superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(''));
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down
Loading