fix: Dataset left panel now uses client side search (#21770)

superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx

@@ -17,216 +17,224 @@
  * under the License.
  */
 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 LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel';
 
-describe('LeftPanel', () => {
+const databasesEndpoint = 'glob:*/api/v1/database/?q*';
-  const mockFun = jest.fn();
+const schemasEndpoint = 'glob:*/api/v1/database/*/schemas*';
+const tablesEndpoint = 'glob:*/superset/tables*';
 
-  const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
+fetchMock.get(databasesEndpoint, {
+  count: 2,
+  description_columns: {},
+  ids: [1, 2],
+  label_columns: {
+    allow_file_upload: 'Allow Csv Upload',
+    allow_ctas: 'Allow Ctas',
+    allow_cvas: 'Allow Cvas',
+    allow_dml: 'Allow Dml',
+    allow_multi_schema_metadata_fetch: 'Allow Multi Schema Metadata Fetch',
+    allow_run_async: 'Allow Run Async',
+    allows_cost_estimate: 'Allows Cost Estimate',
+    allows_subquery: 'Allows Subquery',
+    allows_virtual_table_explore: 'Allows Virtual Table Explore',
+    disable_data_preview: 'Disables SQL Lab Data Preview',
+    backend: 'Backend',
+    changed_on: 'Changed On',
+    changed_on_delta_humanized: 'Changed On Delta Humanized',
+    'created_by.first_name': 'Created By First Name',
+    'created_by.last_name': 'Created By Last Name',
+    database_name: 'Database Name',
+    explore_database_id: 'Explore Database Id',
+    expose_in_sqllab: 'Expose In Sqllab',
+    force_ctas_schema: 'Force Ctas Schema',
+    id: 'Id',
+  },
+  list_columns: [
+    'allow_file_upload',
+    'allow_ctas',
+    'allow_cvas',
+    'allow_dml',
+    'allow_multi_schema_metadata_fetch',
+    'allow_run_async',
+    'allows_cost_estimate',
+    'allows_subquery',
+    'allows_virtual_table_explore',
+    'disable_data_preview',
+    'backend',
+    'changed_on',
+    'changed_on_delta_humanized',
+    'created_by.first_name',
+    'created_by.last_name',
+    'database_name',
+    'explore_database_id',
+    'expose_in_sqllab',
+    'force_ctas_schema',
+    'id',
+  ],
+  list_title: 'List Database',
+  order_columns: [
+    'allow_file_upload',
+    'allow_dml',
+    'allow_run_async',
+    'changed_on',
+    'changed_on_delta_humanized',
+    'created_by.first_name',
+    'database_name',
+    'expose_in_sqllab',
+  ],
+  result: [
+    {
+      allow_file_upload: false,
+      allow_ctas: false,
+      allow_cvas: false,
+      allow_dml: false,
+      allow_multi_schema_metadata_fetch: false,
+      allow_run_async: false,
+      allows_cost_estimate: null,
+      allows_subquery: true,
+      allows_virtual_table_explore: true,
+      disable_data_preview: false,
+      backend: 'postgresql',
+      changed_on: '2021-03-09T19:02:07.141095',
+      changed_on_delta_humanized: 'a day ago',
+      created_by: null,
+      database_name: 'test-postgres',
+      explore_database_id: 1,
+      expose_in_sqllab: true,
+      force_ctas_schema: null,
+      id: 1,
+    },
+    {
+      allow_csv_upload: false,
+      allow_ctas: false,
+      allow_cvas: false,
+      allow_dml: false,
+      allow_multi_schema_metadata_fetch: false,
+      allow_run_async: false,
+      allows_cost_estimate: null,
+      allows_subquery: true,
+      allows_virtual_table_explore: true,
+      disable_data_preview: false,
+      backend: 'mysql',
+      changed_on: '2021-03-09T19:02:07.141095',
+      changed_on_delta_humanized: 'a day ago',
+      created_by: null,
+      database_name: 'test-mysql',
+      explore_database_id: 1,
+      expose_in_sqllab: true,
+      force_ctas_schema: null,
+      id: 2,
+    },
+  ],
+});
 
-  beforeEach(() => {
+fetchMock.get(schemasEndpoint, {
-    jest.resetAllMocks();
+  result: ['information_schema', 'public'],
-    SupersetClientGet.mockImplementation(
+});
-      async ({ endpoint }: { endpoint: string }) => {
+
-        if (endpoint.includes('schemas')) {
+fetchMock.get(tablesEndpoint, {
-          return {
+  tableLength: 3,
-            json: { result: ['information_schema', 'public'] },
+  options: [
-          } as any;
+    { value: 'Sheet1', type: 'table', extra: null },
-        }
+    { value: 'Sheet2', type: 'table', extra: null },
-        return {
+    { value: 'Sheet3', type: 'table', extra: null },
-          json: {
+  ],
-            count: 2,
+});
-            description_columns: {},
+
-            ids: [1, 2],
+const mockFun = jest.fn();
-            label_columns: {
+
-              allow_file_upload: 'Allow Csv Upload',
+test('should render', async () => {
-              allow_ctas: 'Allow Ctas',
+  render(<LeftPanel setDataset={mockFun} />, {
-              allow_cvas: 'Allow Cvas',
+    useRedux: true,
-              allow_dml: 'Allow Dml',
+  });
-              allow_multi_schema_metadata_fetch:
+  expect(
-                'Allow Multi Schema Metadata Fetch',
+    await screen.findByText(/select database & schema/i),
-              allow_run_async: 'Allow Run Async',
+  ).toBeInTheDocument();
-              allows_cost_estimate: 'Allows Cost Estimate',
+});
-              allows_subquery: 'Allows Subquery',
+
-              allows_virtual_table_explore: 'Allows Virtual Table Explore',
+test('should render schema selector, database selector container, and selects', async () => {
-              disable_data_preview: 'Disables SQL Lab Data Preview',
+  render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
-              backend: 'Backend',
+
-              changed_on: 'Changed On',
+  expect(await screen.findByText(/select database & schema/i)).toBeVisible();
-              changed_on_delta_humanized: 'Changed On Delta Humanized',
+
-              'created_by.first_name': 'Created By First Name',
+  const databaseSelect = screen.getByRole('combobox', {
-              'created_by.last_name': 'Created By Last Name',
+    name: 'Select database or type database name',
-              database_name: 'Database Name',
+  });
-              explore_database_id: 'Explore Database Id',
+  const schemaSelect = screen.getByRole('combobox', {
-              expose_in_sqllab: 'Expose In Sqllab',
+    name: 'Select schema or type schema name',
-              force_ctas_schema: 'Force Ctas Schema',
+  });
-              id: 'Id',
+  expect(databaseSelect).toBeInTheDocument();
-            },
+  expect(schemaSelect).toBeInTheDocument();
-            list_columns: [
+});
-              'allow_file_upload',
+
-              'allow_ctas',
+test('does not render blank state if there is nothing selected', async () => {
-              'allow_cvas',
+  render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
-              'allow_dml',
+
-              'allow_multi_schema_metadata_fetch',
+  expect(
-              'allow_run_async',
+    await screen.findByText(/select database & schema/i),
-              'allows_cost_estimate',
+  ).toBeInTheDocument();
-              'allows_subquery',
+  const emptyState = screen.queryByRole('img', { name: /empty/i });
-              'allows_virtual_table_explore',
+  expect(emptyState).not.toBeInTheDocument();
-              'disable_data_preview',
+});
-              'backend',
+
-              'changed_on',
+test('renders list of options when user clicks on schema', async () => {
-              'changed_on_delta_humanized',
+  render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
-              'created_by.first_name',
+    useRedux: true,
-              'created_by.last_name',
-              'database_name',
-              'explore_database_id',
-              'expose_in_sqllab',
-              'force_ctas_schema',
-              'id',
-            ],
-            list_title: 'List Database',
-            order_columns: [
-              'allow_file_upload',
-              'allow_dml',
-              'allow_run_async',
-              'changed_on',
-              'changed_on_delta_humanized',
-              'created_by.first_name',
-              'database_name',
-              'expose_in_sqllab',
-            ],
-            result: [
-              {
-                allow_file_upload: false,
-                allow_ctas: false,
-                allow_cvas: false,
-                allow_dml: false,
-                allow_multi_schema_metadata_fetch: false,
-                allow_run_async: false,
-                allows_cost_estimate: null,
-                allows_subquery: true,
-                allows_virtual_table_explore: true,
-                disable_data_preview: false,
-                backend: 'postgresql',
-                changed_on: '2021-03-09T19:02:07.141095',
-                changed_on_delta_humanized: 'a day ago',
-                created_by: null,
-                database_name: 'test-postgres',
-                explore_database_id: 1,
-                expose_in_sqllab: true,
-                force_ctas_schema: null,
-                id: 1,
-              },
-              {
-                allow_csv_upload: false,
-                allow_ctas: false,
-                allow_cvas: false,
-                allow_dml: false,
-                allow_multi_schema_metadata_fetch: false,
-                allow_run_async: false,
-                allows_cost_estimate: null,
-                allows_subquery: true,
-                allows_virtual_table_explore: true,
-                disable_data_preview: false,
-                backend: 'mysql',
-                changed_on: '2021-03-09T19:02:07.141095',
-                changed_on_delta_humanized: 'a day ago',
-                created_by: null,
-                database_name: 'test-mysql',
-                explore_database_id: 1,
-                expose_in_sqllab: true,
-                force_ctas_schema: null,
-                id: 2,
-              },
-            ],
-          },
-        } as any;
-      },
-    );
   });
 
-  const getTableMockFunction = async () =>
+  // Click 'test-postgres' database to access schemas
-    ({
+  const databaseSelect = screen.getByRole('combobox', {
-      json: {
+    name: 'Select database or type database name',
-        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' },
-        ],
-      },
-    } as any);
-
-  test('should render', async () => {
-    const { container } = render(<LeftPanel setDataset={mockFun} />, {
-      useRedux: true,
-    });
-
-    expect(
-      await screen.findByText(/select database & schema/i),
-    ).toBeInTheDocument();
-    expect(container).toBeInTheDocument();
   });
-
+  // Schema select should be disabled until database is selected
-  test('should render tableselector and databaselector container and selects', async () => {
+  const schemaSelect = screen.getByRole('combobox', {
-    render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
+    name: /select schema or type schema name/i,
-
-    expect(await screen.findByText(/select database & schema/i)).toBeVisible();
-
-    const databaseSelect = screen.getByRole('combobox', {
-      name: 'Select database or type database name',
-    });
-    const schemaSelect = screen.getByRole('combobox', {
-      name: 'Select schema or type schema name',
-    });
-    expect(databaseSelect).toBeInTheDocument();
-    expect(schemaSelect).toBeInTheDocument();
   });
+  userEvent.click(databaseSelect);
+  expect(await screen.findByText('test-postgres')).toBeInTheDocument();
+  expect(schemaSelect).toBeDisabled();
+  userEvent.click(screen.getByText('test-postgres'));
 
-  test('does not render blank state if there is nothing selected', async () => {
+  // Wait for schema field to be enabled
-    render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
+  await waitFor(() => {
-
+    expect(schemaSelect).toBeEnabled();
-    expect(
+  });
-      await screen.findByText(/select database & schema/i),
+});
-    ).toBeInTheDocument();
+
-    const emptyState = screen.queryByRole('img', { name: /empty/i });
+test('searches for a table name', async () => {
-    expect(emptyState).not.toBeInTheDocument();
+  render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
-  });
+    useRedux: true,
-
+  });
-  test('renders list of options when user clicks on schema', async () => {
+
-    render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
+  const databaseSelect = screen.getByRole('combobox', {
-      useRedux: true,
+    name: /select database or type database name/i,
-    });
+  });
-
+  userEvent.click(databaseSelect);
-    const databaseSelect = screen.getByRole('combobox', {
+  userEvent.click(await screen.findByText('test-postgres'));
-      name: 'Select database or type database name',
+
-    });
+  const schemaSelect = screen.getByRole('combobox', {
-    userEvent.click(databaseSelect);
+    name: /select schema or type schema name/i,
-    expect(await screen.findByText('test-postgres')).toBeInTheDocument();
+  });
-
+
-    userEvent.click(screen.getAllByText('test-postgres')[0]);
+  await waitFor(() => expect(schemaSelect).toBeEnabled());
-    const tableSelect = screen.getByRole('combobox', {
+
-      name: /select schema or type schema name/i,
+  userEvent.click(schemaSelect);
-    });
+  userEvent.click(screen.getAllByText('public')[1]);
-
+
-    await waitFor(() => {
+  await waitFor(() => {
-      expect(tableSelect).toBeEnabled();
+    expect(screen.getByText('Sheet1')).toBeInTheDocument();
-    });
+    expect(screen.getByText('Sheet2')).toBeInTheDocument();
-
+    expect(screen.getByText('Sheet3')).toBeInTheDocument();
-    userEvent.click(tableSelect);
+  });
-    expect(
+
-      await screen.findByRole('option', { name: 'information_schema' }),
+  userEvent.type(screen.getByRole('textbox'), 'Sheet2');
-    ).toBeInTheDocument();
+
-    expect(
+  await waitFor(() => {
-      await screen.findByRole('option', { name: 'public' }),
+    expect(screen.queryByText('Sheet1')).not.toBeInTheDocument();
-    ).toBeInTheDocument();
+    expect(screen.getByText('Sheet2')).toBeInTheDocument();
-
+    expect(screen.queryByText('Sheet3')).not.toBeInTheDocument();
-    SupersetClientGet.mockImplementation(getTableMockFunction);
-
-    // Todo: (Phillip) finish testing for showing list of options once table is implemented
-    // userEvent.click(screen.getAllByText('public')[1]);
-    // expect(screen.getByTestId('options-list')).toBeInTheDocument();
   });
 });

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'