This is an automated email from the ASF dual-hosted git repository. lyndsi pushed a commit to branch lyndsi/client-side-search in repository https://gitbox.apache.org/repos/asf/superset.git
commit ead3c2baa4077a22ae16f8af980d62d911749833 Author: lyndsiWilliams <[email protected]> AuthorDate: Wed Sep 28 14:48:46 2022 -0500 Add client side searching to table list in dataset left panel --- .../AddDataset/LeftPanel/LeftPanel.test.tsx | 88 +++++++++++++++------- .../data/dataset/AddDataset/LeftPanel/index.tsx | 8 +- 2 files changed, 65 insertions(+), 31 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx index 9027b232af..574928126b 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx @@ -18,10 +18,18 @@ */ import React from 'react'; import { SupersetClient } from '@superset-ui/core'; +// import fetchMock from 'fetch-mock'; import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor } from 'spec/helpers/testing-library'; +import { render, screen, waitFor, within } from 'spec/helpers/testing-library'; import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel'; +// const tablesEndpoint = 'glob:*/superset/tables*'; + +// fetchMock.get(tablesEndpoint, { +// tableLength: 1, +// options: [{ value: 'Sheet1', type: 'table', extra: null }], +// }); + describe('LeftPanel', () => { const mockFun = jest.fn(); @@ -31,11 +39,18 @@ describe('LeftPanel', () => { jest.resetAllMocks(); SupersetClientGet.mockImplementation( async ({ endpoint }: { endpoint: string }) => { + console.log('FINDME TEST', endpoint); if (endpoint.includes('schemas')) { return { json: { result: ['information_schema', 'public'] }, } as any; } + if (endpoint.includes('tables')) { + return { + tableLength: 1, + options: [{ value: 'Sheet1', type: 'table', extra: null }], + }; + } return { json: { count: 2, @@ -149,28 +164,20 @@ describe('LeftPanel', () => { const getTableMockFunction = async () => ({ - json: { - options: [ - { label: 'table_a', value: 'table_a' }, - { label: 'table_b', value: 'table_b' }, - { label: 'table_c', value: 'table_c' }, - { label: 'table_d', value: 'table_d' }, - ], - }, + tableLength: 1, + options: [{ value: 'Sheet1', type: 'table', extra: null }], } as any); test('should render', async () => { - const { container } = render(<LeftPanel setDataset={mockFun} />, { + render(<LeftPanel setDataset={mockFun} />, { useRedux: true, }); - expect( await screen.findByText(/select database & schema/i), ).toBeInTheDocument(); - expect(container).toBeInTheDocument(); }); - test('should render tableselector and databaselector container and selects', async () => { + test('should render schema selector, databa selector container, and selects', async () => { render(<LeftPanel setDataset={mockFun} />, { useRedux: true }); expect(await screen.findByText(/select database & schema/i)).toBeVisible(); @@ -200,33 +207,56 @@ describe('LeftPanel', () => { useRedux: true, }); + // Click 'test-postgres' database to access schemas const databaseSelect = screen.getByRole('combobox', { name: 'Select database or type database name', }); - userEvent.click(databaseSelect); - expect(await screen.findByText('test-postgres')).toBeInTheDocument(); - - userEvent.click(screen.getAllByText('test-postgres')[0]); - const tableSelect = screen.getByRole('combobox', { + // Schema select should be disabled until database is selected + const schemaSelect = screen.getByRole('combobox', { name: /select schema or type schema name/i, }); + userEvent.click(databaseSelect); + expect(await screen.findByText('test-postgres')).toBeInTheDocument(); + expect(schemaSelect).toBeDisabled(); + userEvent.click(screen.getByText('test-postgres')); + // screen.debug(databaseSelect); + // userEvent.selectOptions(databaseSelect, 'test-postgres'); + // Wait for schema field to be enabled await waitFor(() => { - expect(tableSelect).toBeEnabled(); + expect(schemaSelect).toBeEnabled(); }); + const lbs = screen.getAllByRole('listbox'); + const cbs = screen.getAllByRole('combobox'); + const options = screen.getAllByRole('option'); - userEvent.click(tableSelect); - expect( - await screen.findByRole('option', { name: 'information_schema' }), - ).toBeInTheDocument(); - expect( - await screen.findByRole('option', { name: 'public' }), - ).toBeInTheDocument(); + // userEvent.selectOptions(schemaSelect, ''); + screen.debug(within(lbs[0]).getAllByRole('option')[1]); + userEvent.click(within(lbs[0]).getAllByRole('option')[1]); + // await waitFor(() => + // expect(screen.getByRole('option', { name: 'public' })).toBeVisible(), + // ); + // // screen.debug(screen.getByRole('option', { name: 'information_schema' })); + // expect( + // await screen.findByRole('option', { name: 'information_schema' }), + // ).toBeVisible(); + // expect(await screen.findByRole('option', { name: 'public' })).toBeVisible(); + + // SupersetClientGet.mockImplementation(await getTableMockFunction()); + // screen.logTestingPlaygroundURL(); - SupersetClientGet.mockImplementation(getTableMockFunction); + // userEvent.click(screen.getByRole('option', { name: '2' })); + // screen.logTestingPlaygroundURL(); - // Todo: (Phillip) finish testing for showing list of options once table is implemented - // userEvent.click(screen.getAllByText('public')[1]); + // // Todo: (Phillip) finish testing for showing list of options once table is implemented + // // screen.debug(screen.getByText('table_a')); + // screen.debug(screen.getAllByRole('option')); + // userEvent.selectOptions( + // schemaSelect, + // screen.getByRole('option', { name: 'public' }), + // ); + // screen.logTestingPlaygroundURL(); + // screen.debug(screen.getByTestId('options-list')); // expect(screen.getByTestId('options-list')).toBeInTheDocument(); }); }); diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx index bcc7a4a0db..03c865ddcb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx @@ -219,10 +219,14 @@ export default function LeftPanel({ [dbId, encodedSchema], ); + const filteredOptions = tableOptions.filter(option => + option?.value?.toLowerCase().includes(searchVal.toLowerCase()), + ); + const Loader = (inline: string) => ( <div className="loading-container"> <Loading position="inline" /> - <p>{inline} </p> + <p>{inline}</p> </div> ); @@ -273,7 +277,7 @@ export default function LeftPanel({ </Form> <div className="options-list" data-test="options-list"> {!refresh && - tableOptions.map((option, i) => ( + filteredOptions.map((option, i) => ( <div className={ selectedTable === i ? 'options-highlighted' : 'options'
