add test, fix types, other updates

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

@@ -17,15 +17,76 @@
  * under the License.
  */
 import React from 'react';
+import { SupersetClient } from '@superset-ui/core';
 import { render, screen } from 'spec/helpers/testing-library';
 import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel';
 
 describe('LeftPanel', () => {
-  it('renders a blank state LeftPanel', () => {
-    render(<LeftPanel />);
+  const mockFun = jest.fn();
+
+  const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
+
+  const getSchemaMockFunction = async () =>
+    ({
+      json: {
+        result: ['schema_a', 'schema_b'],
+      },
+    } as any);
+
+  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' },
+        ],
+      },
+    } as any);
+
+  it('should render', () => {
+    const { container } = render(<LeftPanel setDataset={mockFun} />, {
+      useRedux: true,
+    });
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render tableselector and databaselector container and selects', () => {
+    render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
+
+    expect(screen.getByText(/select database & schema/i)).toBeVisible();
+    // expect(screen.getByText(/schema/i)).toBeVisible();
+    // expect(screen.getByText(/database/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();
+  });
+  it('renders a blank state LeftPanel if there is no schema selected', () => {
+    render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
 
     expect(screen.getByRole('img', { name: /empty/i })).toBeVisible();
     expect(screen.getByText(/no database tables found/i)).toBeVisible();
     expect(screen.getByText(/try selecting a different schema/i)).toBeVisible();
   });
+  it.only('renders list of options when user clicks on schema', () => {
+    render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId="1" />, {
+      useRedux: true,
+    });
+    // screen.debug('container', container)
+    SupersetClientGet.mockImplementation(getSchemaMockFunction);
+    SupersetClientGet.mockImplementation(getTableMockFunction);
+    const schemaSelect = screen.getByRole('combobox', {
+      name: 'Select schema or type schema name',
+    });
+    expect(screen.getByTestId('options-list')).toBeInTheDocument();
+    screen.logTestingPlaygroundURL();
+    expect.anything();
+  });
 });

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

@@ -27,6 +27,7 @@ import DatabaseSelector from 'src/components/DatabaseSelector';
 import { debounce } from 'lodash';
 import { EmptyStateMedium } from 'src/components/EmptyState';
 import { DatasetActionType } from '../types';
+import { DatasetObject } from '../types';
 
 interface LeftPanelProps {
   setDataset: (db: any) => void;
@@ -95,7 +96,7 @@ export default function LeftPanel({
   const [searchVal, setSearchVal] = useState('');
   const [refresh, setRefresh] = useState(false);
 
-  const setDatabase = (db: any) => {
+  const setDatabase = (db: ) => {
     setDataset({ type: DatasetActionType.selectDatabase, payload: db });
     setResetTables(true);
   };
@@ -123,8 +124,9 @@ export default function LeftPanel({
       });
   };
 
-  const setSchema = (schema: any) => {
+  const setSchema = (schema: string) => {
     if (schema) {
+      console.log('schema', schema);
       setDataset({ type: DatasetActionType.selectSchema, payload: schema });
       setLoadTables(true);
     }
@@ -205,7 +207,7 @@ export default function LeftPanel({
               placeholder={t('Search Tables')}
             />
           </Form>
-          <div className="options-list">
+          <div className="options-list" data-test="options-list">
             {tableOptions.map((o, i) => (
               <div className="options" key={i}>
                 {o.label}

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

@@ -24,10 +24,14 @@ import Footer from './Footer';
 import { DatasetActionType, DatasetObject, DSReducerActionType } from './types';
 import DatasetLayout from '../DatasetLayout';
 
+type Schema = {
+  schema: string;
+};
+
 export function datasetReducer(
-  state: Partial<DatasetObject> | null,
+  state: DatasetObject | null,
   action: DSReducerActionType,
-): Partial<DatasetObject> | null {
+): Partial<DatasetObject> | Schema | null {
   const trimmedState = {
     ...(state || {}),
   };
@@ -43,7 +47,7 @@ export function datasetReducer(
     case DatasetActionType.selectSchema:
       return {
         ...trimmedState,
-        schema: action.payload,
+        schema: action.payload as string,
         table_name: null,
       };
     case DatasetActionType.selectTable:

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

@@ -24,10 +24,8 @@ export enum DatasetActionType {
 }
 
 export interface DatasetObject {
-  database: {
-    id: string;
-    database_name: string;
-  };
+  id: string;
+  database_name: string;
   owners: number[];
   schema?: string | null;
   dataset_name: string;
@@ -39,12 +37,16 @@ interface DatasetReducerPayloadType {
   value?: string;
 }
 
+export type Schema = {
+  schema?: string | null | undefined;
+};
+
 export type DSReducerActionType =
   | {
       type:
         | DatasetActionType.selectDatabase
-        | DatasetActionType.selectSchema
-        | DatasetActionType.selectTable;
+        | DatasetActionType.selectTable
+        | DatasetActionType.selectSchema;
       payload: Partial<DatasetObject>;
     }
   | {