You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ly...@apache.org on 2022/10/11 16:18:22 UTC
[superset] 01/02: Add client side searching to table list in dataset left panel
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 <kc...@gmail.com>
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'