diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx index adf0780e3..68a014ba5 100644 --- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx +++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx @@ -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, }, diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx index 44e180bb2..040910f9a 100644 --- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx @@ -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 ( - {[...new Set(LIMIT_DROPDOWN)].map(limit => ( + {[...new Set(limitDropdown)].map(limit => ( setQueryLimit(limit)}> {/* // eslint-disable-line no-use-before-define */} {convertToNumWithSpaces(limit)}{' '}