Skip to content
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

Jump to bottom

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

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
+1,309 −206
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bbc5f1a
feat(sqllab): Replace FilterableTable by AgGrid Table
justinpark Aug 9, 2024
4a0e891
missing license
justinpark Aug 9, 2024
1fb32f3
fix unit test
justinpark Aug 9, 2024
ffd704f
fix unit test
justinpark Aug 11, 2024
33dcf88
centering header main position
justinpark Aug 15, 2024
869ec1e
update theme by quartz
justinpark Aug 19, 2024
9e7df67
adjust fontsize by size
justinpark Aug 20, 2024
93054df
set size to small
justinpark Aug 20, 2024
8a8363e
allow multi row selection
justinpark Aug 21, 2024
aa6462f
Add column movable and autosize
justinpark Aug 22, 2024
31cc493
fix test specs
justinpark Aug 22, 2024
e5d9e67
Add specs for additional menu actions
justinpark Aug 22, 2024
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
34 changes: 34 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 @@ -126,6 +126,8 @@
"@visx/xychart": "^3.5.1",
"abortcontroller-polyfill": "^1.7.5",
"ace-builds": "^1.35.4",
"ag-grid-community": "31.0.3",
"ag-grid-react": "31.0.3",
"antd": "4.10.3",
"antd-v5": "npm:antd@^5.18.0",
"babel-plugin-typescript-to-proptypes": "^2.0.0",
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 @@ -339,7 +339,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 @@ -357,7 +357,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 @@ -385,7 +385,7 @@ describe('ResultSet', () => {
name: /fetch data preview/i,
}),
).toBeVisible();
expect(screen.queryByRole('table')).toBe(null);
expect(screen.queryByRole('treegrid')).toBe(null);
});

test('Async queries - renders "Refetch results" button when a query has no results', () => {
Expand Down Expand Up @@ -414,7 +414,7 @@ describe('ResultSet', () => {
name: /refetch results/i,
}),
).toBeVisible();
expect(screen.queryByRole('table')).toBe(null);
expect(screen.queryByRole('treegrid')).toBe(null);
});

test('Async queries - renders on the first call', () => {
Expand All @@ -434,7 +434,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
Loading