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

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

@@ -17,27 +17,16 @@
  * 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 mockFun = jest.fn();
+const databasesEndpoint = 'glob:*/api/v1/database/?q*';
+const schemasEndpoint = 'glob:*/api/v1/database/*/schemas*';
+const tablesEndpoint = 'glob:*/superset/tables*';
 
-  const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    SupersetClientGet.mockImplementation(
-      async ({ endpoint }: { endpoint: string }) => {
-        if (endpoint.includes('schemas')) {
-          return {
-            json: { result: ['information_schema', 'public'] },
-          } as any;
-        }
-        return {
-          json: {
+fetchMock.get(databasesEndpoint, {
   count: 2,
   description_columns: {},
   ids: [1, 2],
@@ -46,8 +35,7 @@ describe('LeftPanel', () => {
     allow_ctas: 'Allow Ctas',
     allow_cvas: 'Allow Cvas',
     allow_dml: 'Allow Dml',
-              allow_multi_schema_metadata_fetch:
-                'Allow Multi Schema Metadata Fetch',
+    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',
@@ -141,36 +129,33 @@ describe('LeftPanel', () => {
       id: 2,
     },
   ],
-          },
-        } as any;
-      },
-    );
-  });
+});
 
-  const getTableMockFunction = async () =>
-    ({
-      json: {
+fetchMock.get(schemasEndpoint, {
+  result: ['information_schema', 'public'],
+});
+
+fetchMock.get(tablesEndpoint, {
+  tableLength: 3,
   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' },
+    { value: 'Sheet1', type: 'table', extra: null },
+    { value: 'Sheet2', type: 'table', extra: null },
+    { value: 'Sheet3', type: 'table', extra: null },
   ],
-      },
-    } as any);
+});
 
-  test('should render', async () => {
-    const { container } = render(<LeftPanel setDataset={mockFun} />, {
+const mockFun = jest.fn();
+
+test('should render', async () => {
+  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, database selector container, and selects', async () => {
   render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
 
   expect(await screen.findByText(/select database & schema/i)).toBeVisible();
@@ -183,9 +168,9 @@ describe('LeftPanel', () => {
   });
   expect(databaseSelect).toBeInTheDocument();
   expect(schemaSelect).toBeInTheDocument();
-  });
+});
 
-  test('does not render blank state if there is nothing selected', async () => {
+test('does not render blank state if there is nothing selected', async () => {
   render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
 
   expect(
@@ -193,40 +178,63 @@ describe('LeftPanel', () => {
   ).toBeInTheDocument();
   const emptyState = screen.queryByRole('img', { name: /empty/i });
   expect(emptyState).not.toBeInTheDocument();
+});
+
+test('renders list of options when user clicks on schema', async () => {
+  render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
+    useRedux: true,
   });
 
-  test('renders list of options when user clicks on schema', async () => {
+  // Click 'test-postgres' database to access schemas
+  const databaseSelect = screen.getByRole('combobox', {
+    name: 'Select database or type database name',
+  });
+  // 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'));
+
+  // Wait for schema field to be enabled
+  await waitFor(() => {
+    expect(schemaSelect).toBeEnabled();
+  });
+});
+
+test('searches for a table name', async () => {
   render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
     useRedux: true,
   });
 
   const databaseSelect = screen.getByRole('combobox', {
-      name: 'Select database or type database name',
+    name: /select database or type database name/i,
   });
   userEvent.click(databaseSelect);
-    expect(await screen.findByText('test-postgres')).toBeInTheDocument();
+  userEvent.click(await screen.findByText('test-postgres'));
 
-    userEvent.click(screen.getAllByText('test-postgres')[0]);
-    const tableSelect = screen.getByRole('combobox', {
+  const schemaSelect = screen.getByRole('combobox', {
     name: /select schema or type schema name/i,
   });
 
+  await waitFor(() => expect(schemaSelect).toBeEnabled());
+
+  userEvent.click(schemaSelect);
+  userEvent.click(screen.getAllByText('public')[1]);
+
   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' }),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByRole('option', { name: 'public' }),
-    ).toBeInTheDocument();
+  userEvent.type(screen.getByRole('textbox'), 'Sheet2');
 
-    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();
+  await waitFor(() => {
+    expect(screen.queryByText('Sheet1')).not.toBeInTheDocument();
+    expect(screen.getByText('Sheet2')).toBeInTheDocument();
+    expect(screen.queryByText('Sheet3')).not.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'