diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx index 874d22ea6bb2..18e676991261 100644 --- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx +++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx @@ -229,6 +229,32 @@ test('Should database select display options', async () => { expect(await screen.findByText('test-mysql')).toBeInTheDocument(); }); +test('Should fetch the search keyword when total count exceeds initial options', async () => { + fetchMock.get( + databaseApiRoute, + { + ...fakeDatabaseApiResult, + count: fakeDatabaseApiResult.result.length + 1, + }, + { overwriteRoutes: true }, + ); + + const props = createProps(); + render(, { useRedux: true, store }); + const select = screen.getByRole('combobox', { + name: 'Select database or type to search databases', + }); + await waitFor(() => + expect(fetchMock.calls(databaseApiRoute)).toHaveLength(1), + ); + expect(select).toBeInTheDocument(); + userEvent.type(select, 'keywordtest'); + await waitFor(() => + expect(fetchMock.calls(databaseApiRoute)).toHaveLength(2), + ); + expect(fetchMock.calls(databaseApiRoute)[1][0]).toContain('keywordtest'); +}); + test('should show empty state if there are no options', async () => { fetchMock.reset(); fetchMock.get(databaseApiRoute, { result: [] }); diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx index 7b4afd9af05a..0c0268db5c9e 100644 --- a/superset-frontend/src/components/DatabaseSelector/index.tsx +++ b/superset-frontend/src/components/DatabaseSelector/index.tsx @@ -167,7 +167,7 @@ export default function DatabaseSelector({ }); const endpoint = `/api/v1/database/?q=${queryParams}`; return SupersetClient.get({ endpoint }).then(({ json }) => { - const { result } = json; + const { result, count } = json; if (getDbList) { getDbList(result); } @@ -189,7 +189,7 @@ export default function DatabaseSelector({ return { data: options, - totalCount: options.length, + totalCount: count ?? options.length, }; }); },