iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sqllab): Dynamic query limit dropdown (#25855)

This commit is contained in:
Rob Moore 2023-11-06 16:34:17 +00:00 committed by GitHub
parent 916f7bcbba
commit fb35bac070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx
View File

@ -25,7 +25,6 @@ import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
import QueryLimitSelect, {
LIMIT_DROPDOWN,
QueryLimitSelectProps,
convertToNumWithSpaces,
} from 'src/SqlLab/components/QueryLimitSelect';
@ -106,13 +105,67 @@ describe('QueryLimitSelect', () => {
});
it('renders dropdown select', async () => {
const { baseElement, getByRole } = setup({}, mockStore(initialState));
const { baseElement, getAllByRole, getByRole } = setup(
{ maxRow: 50000 },
mockStore(initialState),
);
const dropdown = baseElement.getElementsByClassName(
'ant-dropdown-trigger',
)[0];
userEvent.click(dropdown);
await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
const expectedLabels = [10, 100, 1000, 10000, 50000].map(i =>
convertToNumWithSpaces(i),
);
const actualLabels = getAllByRole('menuitem').map(elem =>
elem.textContent?.trim(),
);
expect(actualLabels).toEqual(expectedLabels);
});
it('renders dropdown select correctly when maxRow is less than 10', async () => {
const { baseElement, getAllByRole, getByRole } = setup(
{ maxRow: 5 },
mockStore(initialState),
);
const dropdown = baseElement.getElementsByClassName(
'ant-dropdown-trigger',
)[0];
userEvent.click(dropdown);
await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
const expectedLabels = [5].map(i => convertToNumWithSpaces(i));
const actualLabels = getAllByRole('menuitem').map(elem =>
elem.textContent?.trim(),
);
expect(actualLabels).toEqual(expectedLabels);
});
it('renders dropdown select correctly when maxRow is a multiple of 10', async () => {
const { baseElement, getAllByRole, getByRole } = setup(
{ maxRow: 10000 },
mockStore(initialState),
);
const dropdown = baseElement.getElementsByClassName(
'ant-dropdown-trigger',
)[0];
userEvent.click(dropdown);
await waitFor(() => expect(getByRole('menu')).toBeInTheDocument());
const expectedLabels = [10, 100, 1000, 10000].map(i =>
convertToNumWithSpaces(i),
);
const actualLabels = getAllByRole('menuitem').map(elem =>
elem.textContent?.trim(),
);
expect(actualLabels).toEqual(expectedLabels);
});
it('dispatches QUERY_EDITOR_SET_QUERY_LIMIT action on dropdown menu click', async () => {
@ -133,7 +186,7 @@ describe('QueryLimitSelect', () => {
expect(store.getActions()).toEqual([
{
type: 'QUERY_EDITOR_SET_QUERY_LIMIT',
queryLimit: LIMIT_DROPDOWN[expectedIndex],
queryLimit: 100,
queryEditor: {
id: defaultQueryEditor.id,
},

13
superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
View File

@ -31,8 +31,6 @@ export interface QueryLimitSelectProps {
defaultQueryLimit: number;
}
export const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
export function convertToNumWithSpaces(num: number) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
}
@ -63,12 +61,17 @@ function renderQueryLimit(
maxRow: number,
setQueryLimit: (limit: number) => void,
) {
// Adding SQL_MAX_ROW value to dropdown
LIMIT_DROPDOWN.push(maxRow);
const limitDropdown = [];
// Construct limit dropdown as increasing powers of ten until we reach SQL_MAX_ROW
for (let i = 10; i < maxRow; i *= 10) {
limitDropdown.push(i);
}
limitDropdown.push(maxRow);
return (
<Menu>
{[...new Set(LIMIT_DROPDOWN)].map(limit => (
{[...new Set(limitDropdown)].map(limit => (
<Menu.Item key={`${limit}`} onClick={() => setQueryLimit(limit)}>
{/* // eslint-disable-line no-use-before-define */}
<a role="button">{convertToNumWithSpaces(limit)}</a>{' '}