From 85bcbca2881825d6190f19c28aee08f99d271890 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 5 Aug 2022 11:49:25 -0700
Subject: [PATCH 01/30] add database selector

---
 .../dataset/DatasetPage/LeftPanel/index.tsx   | 24 ++++++++++++++++++-
 .../CRUD/data/dataset/DatasetPage/index.tsx   | 10 ++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index 5ffb6a12c9ce..b9ccc21eeb8e 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -17,7 +17,29 @@
  * under the License.
  */
 import React from 'react';
+import DatabaseSelector from 'src/components/DatabaseSelector';
 
 export default function LeftPanel() {
-  return <div>Left Panel</div>;
+  return (
+    <div>
+      <DatabaseSelector
+        handleError={() => null}
+       /* key={}
+        db={}
+        emptyState={}
+        formMode={}
+        getDbList={}
+        handleError={}
+        onDbChange={}
+        onEmptyResults={}
+        onSchemaChange={}
+        onSchemasLoad={}
+        schema={}
+        sqlLabMode={}
+        isDatabaseSelectEnabled={}
+        readOnly={}
+        */
+      />
+    </div>
+  );
 }
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
index 42de041fa03f..1da2d307a979 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-// import React, { useReducer, Reducer } from 'react';
+import React, { useReducer, Reducer } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
@@ -64,14 +64,14 @@ export function datasetReducer(
 export default function DatasetPage() {
   // this is commented out for now, but can be commented in as the component
   // is built up. Uncomment the useReducer in imports too
-  // const [dataset, setDataset] = useReducer<
-  //   Reducer<Partial<DatasetObject> | null, DSReducerActionType>
-  // >(datasetReducer, null);
+  const [dataset, setDataset] = useReducer<
+    Reducer<Partial<DatasetObject> | null, DSReducerActionType>
+  >(datasetReducer, null);
 
   return (
     <div>
       <Header />
-      <LeftPanel />
+      <LeftPanel setDataset={setDataset} />
       <div css={{ display: 'flex' }}>
         <DatasetPanel />
         <Footer />

From cd87fdae13240afcef3cabc873e51f5a5b00479f Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 8 Aug 2022 15:05:51 -0700
Subject: [PATCH 02/30] add schema util

---
 .../data/dataset/DatasetPage/LeftPanel/index.tsx   | 14 ++++++++++----
 .../views/CRUD/data/dataset/DatasetPage/index.tsx  | 12 +++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index b9ccc21eeb8e..dd882b6a5f6b 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -16,21 +16,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { Dispatch, FunctionComponent, Reducer } from 'react';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 
-export default function LeftPanel() {
+interface LeftPanelProps {
+  setDataset: () => null & Dispatch<Reducer>;
+  setSchema: () => null & Dispatch<Reducer>;
+}
+
+export default function LeftPanel({ setDataset, setSchema }: LeftPanelProps) {
   return (
     <div>
       <DatabaseSelector
         handleError={() => null}
-       /* key={}
+        onDbChange={setDataset}
+        onSchemaChange={setSchema}
+        /* key={}
         db={}
         emptyState={}
         formMode={}
         getDbList={}
         handleError={}
-        onDbChange={}
         onEmptyResults={}
         onSchemaChange={}
         onSchemasLoad={}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
index 1da2d307a979..56e551019d49 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
@@ -68,10 +68,20 @@ export default function DatasetPage() {
     Reducer<Partial<DatasetObject> | null, DSReducerActionType>
   >(datasetReducer, null);
 
+  const onChangeDatabase = (db: any) => {
+    setDataset(db);
+    setDataset({ type: DatasetActionType.selectDatabase, payload: db });
+  };
+
+  const onChangeSchema = (schema: any) => {
+    setDataset(schema);
+    setDataset({ type: DatasetActionType.selectSchema, payload: schema });
+  };
+
   return (
     <div>
       <Header />
-      <LeftPanel setDataset={setDataset} />
+      <LeftPanel setDataset={onChangeDatabase} setSchema={onChangeSchema} />
       <div css={{ display: 'flex' }}>
         <DatasetPanel />
         <Footer />

From 413aea9ee4faf73304d3acc8f5620df3482719e5 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 12 Aug 2022 09:32:17 -0700
Subject: [PATCH 03/30] add pagination

---
 .../src/components/TableSelector/index.tsx    |   6 +-
 .../DatasetPage/DatasetPanel/index.tsx        |  13 ++
 .../data/dataset/DatasetPage/Header/index.tsx |   6 +-
 .../dataset/DatasetPage/LeftPanel/index.tsx   | 141 +++++++++++++++---
 .../CRUD/data/dataset/DatasetPage/index.tsx   |  31 ++--
 5 files changed, 157 insertions(+), 40 deletions(-)

diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 4c07e256cc2e..4c4bceab8b7e 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -100,7 +100,7 @@ interface TableSelectorProps {
   tableSelectMode?: 'single' | 'multiple';
 }
 
-interface Table {
+export interface Table {
   label: string;
   value: string;
   type: string;
@@ -113,13 +113,13 @@ interface Table {
   };
 }
 
-interface TableOption {
+export interface TableOption {
   label: JSX.Element;
   text: string;
   value: string;
 }
 
-const TableOption = ({ table }: { table: Table }) => {
+export const TableOption = ({ table }: { table: Table }) => {
   const { label, type, extra } = table;
   return (
     <TableLabel title={label}>
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
index 9fe93b8fb588..b4ba43c19b91 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx
@@ -16,8 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { styled } from '@superset-ui/core';
 import React from 'react';
 
+const DatasetPanelStyle = styled.div`
+    background: #FFFFFF;
+    position: relative;
+    width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    border-top: 1px solid #E0E0E0;
+`;
+
 export default function DatasetPanel() {
   return <div>Dataset Panel</div>;
 }
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx
index 44f0e19f7bcc..8dac3dfa039d 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx
@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { styled } from '@superset-ui/core';
 import React from 'react';
 
+const HeaderStyle = styled.div`
+  height: 67px;
+`;
 export default function Header() {
-  return <div>Header</div>;
+  return <HeaderStyle>Header</HeaderStyle>;
 }
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index dd882b6a5f6b..9f299f312c26 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -16,36 +16,135 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { Dispatch, FunctionComponent, Reducer } from 'react';
+import { SupersetClient } from '@superset-ui/core';
+import React, {
+  useEffect,
+  Dispatch,
+  FunctionComponent,
+  Reducer,
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
+import { styled } from '@superset-ui/core';
+import { TableOption, Table } from 'src/components/TableSelector';
 import DatabaseSelector from 'src/components/DatabaseSelector';
+import { DatasetActionType } from '../types';
 
 interface LeftPanelProps {
-  setDataset: () => null & Dispatch<Reducer>;
-  setSchema: () => null & Dispatch<Reducer>;
+  setDataset: (db: any) => void;
+  schema?: string | undefined | null;
+  dbId?: string;
 }
 
-export default function LeftPanel({ setDataset, setSchema }: LeftPanelProps) {
+const LeftPanelStyle = styled.div`
+  ${({ theme }) => `
+  max-width: 350px;
+  height: 100%;
+  background-color: ${theme.colors.grayscale.light5}; 
+  .options-list {
+    overflow: auto;
+    height: 400px;
+  }
+`}
+`;
+
+export default function LeftPanel({
+  setDataset,
+  schema,
+  dbId,
+}: LeftPanelProps) {
+  const [tableOptions, setTableOptions] = useState<Array<TableOption>>([]);
+  const [page, setPage] = useState({
+    startIndex: 0,
+    lastIndex: 25,
+    length: 0,
+  });
+  const [resetTables, setResetTables] = useState(false);
+  const [loadTables, setLoadTables] = useState(false);
+
+  const setDatabase = (db: any) => {
+    setDataset({ type: DatasetActionType.selectDatabase, payload: db });
+    setResetTables(true);
+  };
+
+  const setSchema = (schema: any) => {
+    if (schema) {
+      setDataset({ type: DatasetActionType.selectSchema, payload: schema });
+      setLoadTables(true);
+    }
+    setResetTables(true);
+  };
+
+  const observer = useRef<IntersectionObserver | null>();
+  const lastElementRef = useCallback(node => {
+    if (observer.current) observer.current.disconnect();
+    observer.current = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        setPage(prev => ({ ...prev, lastIndex: page.lastIndex + 50 }));
+      }
+    });
+    if (node) observer.current.observe(node);
+  }, []);
+
+  useEffect(() => {
+    if (loadTables) {
+      const encodedSchema = encodeURIComponent(schema as string);
+      const forceRefresh = null;
+      const endpoint = encodeURI(
+        `/superset/tables/${dbId}/${encodedSchema}/undefined/${forceRefresh}/`,
+      );
+      SupersetClient.get({ endpoint })
+        .then(({ json }) => {
+          const options: TableOption[] = json.options.map((table: Table) => {
+            const option: TableOption = {
+              value: table.value,
+              label: <TableOption table={table} />,
+              text: table.label,
+            };
+
+            return option;
+          });
+
+          setPage(existing => ({ ...existing, length: json.tableLength }));
+          setTableOptions(options);
+          setLoadTables(false);
+          setResetTables(false);
+        })
+        .catch(e => {
+          console.log('error', e);
+        });
+    }
+  }, [loadTables]);
+
+  useEffect(() => {
+    if (resetTables) {
+      setTableOptions([]);
+      setResetTables(false);
+    }
+  }, [resetTables]);
+
+  const paginatedTabeOptipons = tableOptions.slice(0, page.lastIndex);
   return (
-    <div>
+    <LeftPanelStyle>
+      <p> Select Database & Schema</p>
       <DatabaseSelector
         handleError={() => null}
-        onDbChange={setDataset}
+        onDbChange={setDatabase}
         onSchemaChange={setSchema}
-        /* key={}
-        db={}
-        emptyState={}
-        formMode={}
-        getDbList={}
-        handleError={}
-        onEmptyResults={}
-        onSchemaChange={}
-        onSchemasLoad={}
-        schema={}
-        sqlLabMode={}
-        isDatabaseSelectEnabled={}
-        readOnly={}
-        */
       />
-    </div>
+      <div className="options-list">
+        {paginatedTabeOptipons.map((o, i) => {
+          if (paginatedTabeOptipons.length === i + 1) {
+            return (
+              <div key={i} ref={lastElementRef}>
+                {o.label}
+              </div>
+            );
+          }
+          return <div key={i}>{o.label}</div>;
+        })}
+      </div>
+    </LeftPanelStyle>
   );
 }
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
index 56e551019d49..a7a81338d3ac 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import React, { useReducer, Reducer } from 'react';
+import React, { useReducer, Reducer, useState } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
 import RightPanel from './RightPanel';
 import Footer from './Footer';
 import { DatasetActionType, DatasetObject, DSReducerActionType } from './types';
+import { styled } from '@superset-ui/core';
 
 export function datasetReducer(
   state: Partial<DatasetObject> | null,
@@ -32,6 +32,8 @@ export function datasetReducer(
   const trimmedState = {
     ...(state || {}),
   };
+  console.log('action.type', action.type)
+
   switch (action.type) {
     case DatasetActionType.selectDatabase:
       return {
@@ -43,7 +45,7 @@ export function datasetReducer(
     case DatasetActionType.selectSchema:
       return {
         ...trimmedState,
-        ...action.payload,
+        schema: action.payload,
         table_name: null,
       };
     case DatasetActionType.selectTable:
@@ -61,6 +63,10 @@ export function datasetReducer(
   }
 }
 
+const DatasetPageStyle = styled.div`
+  height: 100vh;
+`;
+
 export default function DatasetPage() {
   // this is commented out for now, but can be commented in as the component
   // is built up. Uncomment the useReducer in imports too
@@ -68,25 +74,20 @@ export default function DatasetPage() {
     Reducer<Partial<DatasetObject> | null, DSReducerActionType>
   >(datasetReducer, null);
 
-  const onChangeDatabase = (db: any) => {
-    setDataset(db);
-    setDataset({ type: DatasetActionType.selectDatabase, payload: db });
-  };
-
-  const onChangeSchema = (schema: any) => {
-    setDataset(schema);
-    setDataset({ type: DatasetActionType.selectSchema, payload: schema });
-  };
 
   return (
-    <div>
+    <DatasetPageStyle>
       <Header />
-      <LeftPanel setDataset={onChangeDatabase} setSchema={onChangeSchema} />
+      <LeftPanel
+        setDataset={setDataset}
+        schema={dataset?.schema}
+        dbId={dataset?.id}
+      />
       <div css={{ display: 'flex' }}>
         <DatasetPanel />
         <Footer />
       </div>
       <RightPanel />
-    </div>
+    </DatasetPageStyle>
   );
 }

From aeb0d6f4a23098a211b9dbe3b4fdcd66471d2d02 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 12 Aug 2022 09:34:15 -0700
Subject: [PATCH 04/30] remove conosle.logs

---
 .../CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx  | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index 9f299f312c26..3811eeb2b684 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -17,15 +17,7 @@
  * under the License.
  */
 import { SupersetClient } from '@superset-ui/core';
-import React, {
-  useEffect,
-  Dispatch,
-  FunctionComponent,
-  Reducer,
-  useState,
-  useRef,
-  useCallback,
-} from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { styled } from '@superset-ui/core';
 import { TableOption, Table } from 'src/components/TableSelector';
 import DatabaseSelector from 'src/components/DatabaseSelector';

From 0f0ded94a0ad9a128e004ed7e4de56d5b8a3dcd3 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 18 Aug 2022 06:58:45 -0700
Subject: [PATCH 05/30] add search

---
 .../dataset/DatasetPage/LeftPanel/index.tsx   | 137 +++++++++++-------
 1 file changed, 84 insertions(+), 53 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index 3811eeb2b684..66896b1a085f 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -16,12 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { SupersetClient } from '@superset-ui/core';
-import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { styled } from '@superset-ui/core';
+import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import { Input } from 'src/components/Input';
+import { Form } from 'src/components/Form';
 import { TableOption, Table } from 'src/components/TableSelector';
+import Loading from 'src/components/Loading';
 import DatabaseSelector from 'src/components/DatabaseSelector';
+import { debounce } from 'lodash';
 import { DatasetActionType } from '../types';
+import { CodeSandboxCircleFilled } from '@ant-design/icons';
 
 interface LeftPanelProps {
   setDataset: (db: any) => void;
@@ -47,19 +57,37 @@ export default function LeftPanel({
   dbId,
 }: LeftPanelProps) {
   const [tableOptions, setTableOptions] = useState<Array<TableOption>>([]);
-  const [page, setPage] = useState({
-    startIndex: 0,
-    lastIndex: 25,
-    length: 0,
-  });
   const [resetTables, setResetTables] = useState(false);
   const [loadTables, setLoadTables] = useState(false);
+  const [searchVal, setSearchVal] = useState('');
 
   const setDatabase = (db: any) => {
     setDataset({ type: DatasetActionType.selectDatabase, payload: db });
     setResetTables(true);
   };
 
+  const getTablesList = (url: string) => {
+    SupersetClient.get({ url })
+      .then(({ json }) => {
+        const options: TableOption[] = json.options.map((table: Table) => {
+          const option: TableOption = {
+            value: table.value,
+            label: <TableOption table={table} />,
+            text: table.label,
+          };
+
+          return option;
+        });
+
+        setTableOptions(options);
+        setLoadTables(false);
+        setResetTables(false);
+      })
+      .catch(e => {
+        console.log('error', e);
+      });
+  };
+
   const setSchema = (schema: any) => {
     if (schema) {
       setDataset({ type: DatasetActionType.selectSchema, payload: schema });
@@ -68,44 +96,15 @@ export default function LeftPanel({
     setResetTables(true);
   };
 
-  const observer = useRef<IntersectionObserver | null>();
-  const lastElementRef = useCallback(node => {
-    if (observer.current) observer.current.disconnect();
-    observer.current = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting) {
-        setPage(prev => ({ ...prev, lastIndex: page.lastIndex + 50 }));
-      }
-    });
-    if (node) observer.current.observe(node);
-  }, []);
+  const encodedSchema = encodeURIComponent(schema as string);
+  const forceRefresh = null;
 
   useEffect(() => {
     if (loadTables) {
-      const encodedSchema = encodeURIComponent(schema as string);
-      const forceRefresh = null;
       const endpoint = encodeURI(
         `/superset/tables/${dbId}/${encodedSchema}/undefined/${forceRefresh}/`,
       );
-      SupersetClient.get({ endpoint })
-        .then(({ json }) => {
-          const options: TableOption[] = json.options.map((table: Table) => {
-            const option: TableOption = {
-              value: table.value,
-              label: <TableOption table={table} />,
-              text: table.label,
-            };
-
-            return option;
-          });
-
-          setPage(existing => ({ ...existing, length: json.tableLength }));
-          setTableOptions(options);
-          setLoadTables(false);
-          setResetTables(false);
-        })
-        .catch(e => {
-          console.log('error', e);
-        });
+      getTablesList(endpoint);
     }
   }, [loadTables]);
 
@@ -116,7 +115,25 @@ export default function LeftPanel({
     }
   }, [resetTables]);
 
-  const paginatedTabeOptipons = tableOptions.slice(0, page.lastIndex);
+  const search = useMemo(
+    () =>
+      debounce(
+        (value: string) => {
+          console.log('i hit', value)
+          console.log('dbId', dbId)
+          const encodeTableName =
+            value === '' ? undefined : encodeURIComponent(value);
+          console.log('encode', encodeTableName)
+          const endpoint = encodeURI(
+            `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/${forceRefresh}/`,
+          );
+          getTablesList(endpoint);
+        },
+        [FAST_DEBOUNCE],
+      ),
+    [dbId, encodedSchema],
+  );
+
   return (
     <LeftPanelStyle>
       <p> Select Database & Schema</p>
@@ -125,18 +142,32 @@ export default function LeftPanel({
         onDbChange={setDatabase}
         onSchemaChange={setSchema}
       />
-      <div className="options-list">
-        {paginatedTabeOptipons.map((o, i) => {
-          if (paginatedTabeOptipons.length === i + 1) {
-            return (
-              <div key={i} ref={lastElementRef}>
-                {o.label}
-              </div>
-            );
-          }
-          return <div key={i}>{o.label}</div>;
-        })}
-      </div>
+      {loadTables && (
+        <div>
+          <Loading />
+          <p>loading schemas ...</p>
+        </div>
+      )}
+      {!schema && !loadTables ? null : (
+        <>
+          <Form>
+            <Input
+              value={searchVal}
+              onChange={evt => {
+                search(evt.target.value);
+                setSearchVal(evt.target.value);
+              }}
+              className="table-form"
+              placeholder={t('Search Tables')}
+            />
+          </Form>
+          <div className="options-list">
+            {tableOptions.map((o, i) => (
+              <div key={i}>{o.label}</div>
+            ))}
+          </div>
+        </>
+      )}
     </LeftPanelStyle>
   );
 }

From 7e1ca3400bf45cd6275d6a3749d68516a26595b7 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 18 Aug 2022 06:59:07 -0700
Subject: [PATCH 06/30] remove logs

---
 .../dataset/DatasetPage/LeftPanel/index.tsx   | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
index 66896b1a085f..4d8b8b253746 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx
@@ -30,8 +30,8 @@ import { TableOption, Table } from 'src/components/TableSelector';
 import Loading from 'src/components/Loading';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import { debounce } from 'lodash';
-import { DatasetActionType } from '../types';
 import { CodeSandboxCircleFilled } from '@ant-design/icons';
+import { DatasetActionType } from '../types';
 
 interface LeftPanelProps {
   setDataset: (db: any) => void;
@@ -117,20 +117,14 @@ export default function LeftPanel({
 
   const search = useMemo(
     () =>
-      debounce(
-        (value: string) => {
-          console.log('i hit', value)
-          console.log('dbId', dbId)
-          const encodeTableName =
-            value === '' ? undefined : encodeURIComponent(value);
-          console.log('encode', encodeTableName)
-          const endpoint = encodeURI(
-            `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/${forceRefresh}/`,
-          );
-          getTablesList(endpoint);
-        },
-        [FAST_DEBOUNCE],
-      ),
+      debounce((value: string) => {
+        const encodeTableName =
+          value === '' ? undefined : encodeURIComponent(value);
+        const endpoint = encodeURI(
+          `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/${forceRefresh}/`,
+        );
+        getTablesList(endpoint);
+      }, FAST_DEBOUNCE),
     [dbId, encodedSchema],
   );
 

From 3bbe07085ad3b4cc2dd4c540252d3d619857966c Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 24 Aug 2022 08:51:04 -0700
Subject: [PATCH 07/30] more updates

---
 .../dataset/AddDataset/LeftPanel/index.tsx    | 183 +++++++++++++++++-
 .../CRUD/data/dataset/AddDataset/index.tsx    |  16 +-
 2 files changed, 183 insertions(+), 16 deletions(-)

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 908cf1a83311..a75086f26a56 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
@@ -16,18 +16,183 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { t } from '@superset-ui/core';
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
+import { Input } from 'src/components/Input';
+import { Form } from 'src/components/Form';
+import { TableOption, Table } from 'src/components/TableSelector';
+import Loading from 'src/components/Loading';
+import DatabaseSelector from 'src/components/DatabaseSelector';
+import { debounce } from 'lodash';
 import { EmptyStateMedium } from 'src/components/EmptyState';
+import { DatasetActionType } from '../types';
+
+interface LeftPanelProps {
+  setDataset: (db: any) => void;
+  schema?: string | undefined | null;
+  dbId?: string;
+}
+
+const LeftPanelStyle = styled.div`
+  ${({ theme }) => `
+  max-width: 350px;
+  padding: 16px;
+  height: 100%;
+  background-color: ${theme.colors.grayscale.light5}; 
+  .refresh {
+    position: absolute;
+    top: 290px;
+    left: 67px;
+    span[role="button"]{
+      font-size: 17px;
+    }
+  }
+  .section-title {
+    margin-top: 44px;
+    margin-bottom: 44px;
+    font-weight: 600;
+  }
+  .options-list {
+    overflow: auto;
+    max-height: 700px;
+    .options {
+      margin: 16px;
+    }
+  }
+  .table-form {
+    margin-bottom: 32px;
+  }
+`}
+`;
+
+export default function LeftPanel({
+  setDataset,
+  schema,
+  dbId,
+}: LeftPanelProps) {
+  const [tableOptions, setTableOptions] = useState<Array<TableOption>>([]);
+  const [resetTables, setResetTables] = useState(false);
+  const [loadTables, setLoadTables] = useState(false);
+  const [searchVal, setSearchVal] = useState('');
+
+  const setDatabase = (db: any) => {
+    setDataset({ type: DatasetActionType.selectDatabase, payload: db });
+    setResetTables(true);
+  };
+
+  const getTablesList = (url: string) => {
+    SupersetClient.get({ url })
+      .then(({ json }) => {
+        const options: TableOption[] = json.options.map((table: Table) => {
+          const option: TableOption = {
+            value: table.value,
+            label: <TableOption table={table} />,
+            text: table.label,
+          };
+
+          return option;
+        });
+
+        setTableOptions(options);
+        setLoadTables(false);
+        setResetTables(false);
+      })
+      .catch(e => {
+        console.log('error', e);
+      });
+  };
+
+  const setSchema = (schema: any) => {
+    if (schema) {
+      setDataset({ type: DatasetActionType.selectSchema, payload: schema });
+      setLoadTables(true);
+    }
+    setResetTables(true);
+  };
+
+  const encodedSchema = encodeURIComponent(schema as string);
+  const forceRefresh = null;
+
+  useEffect(() => {
+    if (loadTables) {
+      const endpoint = encodeURI(
+        `/superset/tables/${dbId}/${encodedSchema}/undefined/${forceRefresh}/`,
+      );
+      getTablesList(endpoint);
+    }
+  }, [loadTables]);
+
+  useEffect(() => {
+    if (resetTables) {
+      setTableOptions([]);
+      setResetTables(false);
+    }
+  }, [resetTables]);
+
+  const search = useMemo(
+    () =>
+      debounce((value: string) => {
+        const encodeTableName =
+          value === '' ? undefined : encodeURIComponent(value);
+        const endpoint = encodeURI(
+          `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/${forceRefresh}/`,
+        );
+        getTablesList(endpoint);
+      }, FAST_DEBOUNCE),
+    [dbId, encodedSchema],
+  );
 
-export default function LeftPanel() {
   return (
-    <>
-      <EmptyStateMedium
-        image="empty-table.svg"
-        title={t('No database tables found')}
-        description={t('Try selecting a different schema')}
+    <LeftPanelStyle>
+      <p className="section-title db-schema"> Select Database & Schema</p>
+      <DatabaseSelector
+        handleError={() => null}
+        onDbChange={setDatabase}
+        onSchemaChange={setSchema}
       />
-    </>
+      {loadTables && (
+        <div>
+          <Loading />
+          <p>loading schemas ...</p>
+        </div>
+      )}
+      {!schema && !loadTables ? (
+        <>
+          <EmptyStateMedium
+            image="empty-table.svg"
+            title={t('No database tables found')}
+            description={t('Try selecting a different schema')}
+          />
+        </>
+      ) : (
+        <>
+          <Form>
+            <p className="section-title">Select Database Table</p>
+            <Input
+              value={searchVal}
+              onChange={evt => {
+                search(evt.target.value);
+                setSearchVal(evt.target.value);
+              }}
+              className="table-form"
+              placeholder={t('Search Tables')}
+            />
+          </Form>
+          <div className="options-list">
+            {tableOptions.map((o, i) => (
+              <div className="options" key={i}>
+                {o.label}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </LeftPanelStyle>
   );
 }
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
index f298525d76cf..b135728b39ab 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
@@ -16,13 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useReducer, Reducer, useState } from 'react';
+import React, { useReducer, Reducer } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
 import Footer from './Footer';
 import { DatasetActionType, DatasetObject, DSReducerActionType } from './types';
-import { styled } from '@superset-ui/core';
 import DatasetLayout from '../DatasetLayout';
 
 export function datasetReducer(
@@ -32,7 +31,6 @@ export function datasetReducer(
   const trimmedState = {
     ...(state || {}),
   };
-  console.log('action.type', action.type)
 
   switch (action.type) {
     case DatasetActionType.selectDatabase:
@@ -70,14 +68,18 @@ export default function AddDataset() {
     Reducer<Partial<DatasetObject> | null, DSReducerActionType>
   >(datasetReducer, null);
 
+  const LeftPanelComponent = () => (
+    <LeftPanel
+      setDataset={setDataset}
+      schema={dataset?.schema}
+      dbId={dataset?.id}
+    />
+  );
 
-  // setDataset={setDataset}
-  // schema={dataset?.schema}
-  // dbId={dataset?.id}
   return (
     <DatasetLayout
       header={Header()}
-      leftPanel={LeftPanel()}
+      leftPanel={LeftPanelComponent()}
       datasetPanel={DatasetPanel()}
       footer={Footer()}
     />

From 23e03b1d94daba407e2f4e7254f92d3a83324da1 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 24 Aug 2022 10:55:21 -0700
Subject: [PATCH 08/30] update loading style and add state

---
 .../dataset/AddDataset/LeftPanel/index.tsx    | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

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 a75086f26a56..fe24759edc8f 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
@@ -16,17 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {
-  useEffect,
-  useState,
-  useRef,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Form } from 'src/components/Form';
 import { TableOption, Table } from 'src/components/TableSelector';
+import RefreshLabel from 'src/components/RefreshLabel';
 import Loading from 'src/components/Loading';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import { debounce } from 'lodash';
@@ -42,7 +37,7 @@ interface LeftPanelProps {
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
   max-width: 350px;
-  padding: 16px;
+  padding: ${theme.gridUnit * 4}px;
   height: 100%;
   background-color: ${theme.colors.grayscale.light5}; 
   .refresh {
@@ -50,23 +45,41 @@ const LeftPanelStyle = styled.div`
     top: 290px;
     left: 67px;
     span[role="button"]{
-      font-size: 17px;
+      font-size: ${theme.gridUnit * 4.25}px;
     }
   }
   .section-title {
     margin-top: 44px;
     margin-bottom: 44px;
-    font-weight: 600;
+    font-weight: ${theme.typography.weights.bold};
   }
   .options-list {
     overflow: auto;
     max-height: 700px;
     .options {
-      margin: 16px;
+      padding: ${theme.gridUnit * 1.75}px;
+      border-radius: ${theme.borderRadius}px;
     }
   }
+  form > span {
+    position: absolute;
+    top: 410px;
+    left: 171px;
+    font-size: 17px;   
+  }
   .table-form {
-    margin-bottom: 32px;
+    margin-bottom: ${theme.gridUnit * 8}px;
+  }
+  .loading {
+    position: absolute;
+    bottom: 380px;
+    img {
+      position: absolute;
+      top: -53px;
+      right: -15px;
+      width: 71px;
+    }
+  }
   }
 `}
 `;
@@ -80,6 +93,7 @@ export default function LeftPanel({
   const [resetTables, setResetTables] = useState(false);
   const [loadTables, setLoadTables] = useState(false);
   const [searchVal, setSearchVal] = useState('');
+  const [refresh, setRefresh] = useState(false);
 
   const setDatabase = (db: any) => {
     setDataset({ type: DatasetActionType.selectDatabase, payload: db });
@@ -102,6 +116,7 @@ export default function LeftPanel({
         setTableOptions(options);
         setLoadTables(false);
         setResetTables(false);
+        setRefresh(false);
       })
       .catch(e => {
         console.log('error', e);
@@ -117,12 +132,11 @@ export default function LeftPanel({
   };
 
   const encodedSchema = encodeURIComponent(schema as string);
-  const forceRefresh = null;
 
   useEffect(() => {
     if (loadTables) {
       const endpoint = encodeURI(
-        `/superset/tables/${dbId}/${encodedSchema}/undefined/${forceRefresh}/`,
+        `/superset/tables/${dbId}/${encodedSchema}/undefined/${refresh}/`,
       );
       getTablesList(endpoint);
     }
@@ -141,7 +155,7 @@ export default function LeftPanel({
         const encodeTableName =
           value === '' ? undefined : encodeURIComponent(value);
         const endpoint = encodeURI(
-          `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/${forceRefresh}/`,
+          `/superset/tables/${dbId}/${encodedSchema}/${encodeTableName}/`,
         );
         getTablesList(endpoint);
       }, FAST_DEBOUNCE),
@@ -157,8 +171,8 @@ export default function LeftPanel({
         onSchemaChange={setSchema}
       />
       {loadTables && (
-        <div>
-          <Loading />
+        <div className="loading">
+          <Loading position="inline" />
           <p>loading schemas ...</p>
         </div>
       )}
@@ -174,6 +188,13 @@ export default function LeftPanel({
         <>
           <Form>
             <p className="section-title">Select Database Table</p>
+            <RefreshLabel
+              onClick={() => {
+                setLoadTables(true);
+                setRefresh(true);
+              }}
+              tooltipContent={t('Refresh table list')}
+            />
             <Input
               value={searchVal}
               onChange={evt => {

From b0cf2368618695f5845860ddffc6eb6006653d6c Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 24 Aug 2022 19:39:09 -0700
Subject: [PATCH 09/30] remove header styles

---
 .../src/views/CRUD/data/dataset/AddDataset/Header/index.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
index 8dac3dfa039d..44f0e19f7bcc 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx
@@ -16,12 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
 import React from 'react';
 
-const HeaderStyle = styled.div`
-  height: 67px;
-`;
 export default function Header() {
-  return <HeaderStyle>Header</HeaderStyle>;
+  return <div>Header</div>;
 }

From 3c680b598856662a03e64597343d94cef1b17294 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:46:38 -0700
Subject: [PATCH 10/30] add test, fix types, other updates

---
 .../AddDataset/LeftPanel/LeftPanel.test.tsx   | 65 ++++++++++++++++++-
 .../dataset/AddDataset/LeftPanel/index.tsx    |  8 ++-
 .../CRUD/data/dataset/AddDataset/index.tsx    | 10 ++-
 .../CRUD/data/dataset/AddDataset/types.tsx    | 14 ++--
 4 files changed, 83 insertions(+), 14 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 9fdb1aee8f55..5cce5a56a25f 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
@@ -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();
+  });
 });
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 fe24759edc8f..4b120c3e21a9 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
@@ -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}
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
index b135728b39ab..502d6735cd82 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
+++ b/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:
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
index 3d5d67f7e144..f71c31f54dae 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
+++ b/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>;
     }
   | {

From 8e5d19592f49c25634142a077aaa3aa7a916b884 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:10 -0700
Subject: [PATCH 11/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4b120c3e21a9..ea80c2168d27 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
@@ -56,7 +56,7 @@ const LeftPanelStyle = styled.div`
   }
   .options-list {
     overflow: auto;
-    max-height: 700px;
+    max-height: ${theme.gridUnit * 175}px;
     .options {
       padding: ${theme.gridUnit * 1.75}px;
       border-radius: ${theme.borderRadius}px;

From 1ffcf863bd7457bfc6cd3e57f281172a7df6f623 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:16 -0700
Subject: [PATCH 12/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 ea80c2168d27..d6ca27029e55 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
@@ -64,9 +64,9 @@ const LeftPanelStyle = styled.div`
   }
   form > span {
     position: absolute;
-    top: 410px;
-    left: 171px;
-    font-size: 17px;   
+    top: ${theme.gridUnit * 102.5}px;
+    left: ${theme.gridUnit * 42.75}px;
+    font-size: ${theme.gridUnit * 4.25}px;
   }
   .table-form {
     margin-bottom: ${theme.gridUnit * 8}px;

From b7fb96d8e202e3fd2f8e5d2e0092e2bc8b1fdb84 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:26 -0700
Subject: [PATCH 13/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 d6ca27029e55..35b3595f12f0 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
@@ -37,7 +37,7 @@ interface LeftPanelProps {
 
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
-  max-width: 350px;
+  max-width: ${theme.gridUnit * 87.5}px;
   padding: ${theme.gridUnit * 4}px;
   height: 100%;
   background-color: ${theme.colors.grayscale.light5}; 

From 2fbc0b18c908240c5ef41f6be842894583e01bb6 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:32 -0700
Subject: [PATCH 14/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 35b3595f12f0..9f1477c49901 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
@@ -50,8 +50,8 @@ const LeftPanelStyle = styled.div`
     }
   }
   .section-title {
-    margin-top: 44px;
-    margin-bottom: 44px;
+    margin-top: ${theme.gridUnit * 11}px;
+    margin-bottom: ${theme.gridUnit * 11}px;
     font-weight: ${theme.typography.weights.bold};
   }
   .options-list {

From d9829962603d6a04ba37fdf830d1ce9e6a87cf69 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:39 -0700
Subject: [PATCH 15/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../CRUD/data/dataset/AddDataset/LeftPanel/index.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 9f1477c49901..a98c306a23e0 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
@@ -73,12 +73,12 @@ const LeftPanelStyle = styled.div`
   }
   .loading {
     position: absolute;
-    bottom: 380px;
+    bottom: ${theme.gridUnit * 95}px;
     img {
       position: absolute;
-      top: -53px;
-      right: -15px;
-      width: 71px;
+      top: -${theme.gridUnit * 13.25}px;
+      right: -${theme.gridUnit * 3.75}px;
+      width: ${theme.gridUnit * 17.75}px;
     }
   }
   }

From 16ae23b502345affc5c83c07f8b48234b796f978 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 25 Aug 2022 15:51:48 -0700
Subject: [PATCH 16/30] Update
 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
---
 .../views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 a98c306a23e0..833c8ff5af8b 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
@@ -43,8 +43,8 @@ const LeftPanelStyle = styled.div`
   background-color: ${theme.colors.grayscale.light5}; 
   .refresh {
     position: absolute;
-    top: 290px;
-    left: 67px;
+    top: ${theme.gridUnit * 72.5}px;
+    left: ${theme.gridUnit * 16.75}px;
     span[role="button"]{
       font-size: ${theme.gridUnit * 4.25}px;
     }

From e0097b220801e67a31a5f842b5a35108d2e49eda Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 26 Aug 2022 07:25:53 -0700
Subject: [PATCH 17/30] fix types

---
 .../dataset/AddDataset/LeftPanel/LeftPanel.test.tsx    |  7 +------
 .../CRUD/data/dataset/AddDataset/LeftPanel/index.tsx   | 10 ++++++----
 .../src/views/CRUD/data/dataset/AddDataset/types.tsx   |  6 +++---
 3 files changed, 10 insertions(+), 13 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 5cce5a56a25f..0b9b162deddd 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
@@ -75,18 +75,13 @@ describe('LeftPanel', () => {
     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', () => {
+  it('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();
   });
 });
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 4b120c3e21a9..a516ba101566 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
@@ -28,11 +28,12 @@ import { debounce } from 'lodash';
 import { EmptyStateMedium } from 'src/components/EmptyState';
 import { DatasetActionType } from '../types';
 import { DatasetObject } from '../types';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
 
 interface LeftPanelProps {
   setDataset: (db: any) => void;
   schema?: string | undefined | null;
-  dbId?: string;
+  dbId?: number;
 }
 
 const LeftPanelStyle = styled.div`
@@ -96,7 +97,9 @@ export default function LeftPanel({
   const [searchVal, setSearchVal] = useState('');
   const [refresh, setRefresh] = useState(false);
 
-  const setDatabase = (db: ) => {
+  const { addDangerToast } = useToasts();
+
+  const setDatabase = (db: Partial<DatasetObject>) => {
     setDataset({ type: DatasetActionType.selectDatabase, payload: db });
     setResetTables(true);
   };
@@ -126,7 +129,6 @@ export default function LeftPanel({
 
   const setSchema = (schema: string) => {
     if (schema) {
-      console.log('schema', schema);
       setDataset({ type: DatasetActionType.selectSchema, payload: schema });
       setLoadTables(true);
     }
@@ -168,7 +170,7 @@ export default function LeftPanel({
     <LeftPanelStyle>
       <p className="section-title db-schema"> Select Database & Schema</p>
       <DatabaseSelector
-        handleError={() => null}
+        handleError={addDangerToast}
         onDbChange={setDatabase}
         onSchemaChange={setSchema}
       />
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
index f71c31f54dae..2629ac9e03f2 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
@@ -24,9 +24,9 @@ export enum DatasetActionType {
 }
 
 export interface DatasetObject {
-  id: string;
-  database_name: string;
-  owners: number[];
+  id: number;
+  database_name?: string;
+  owners?: number[];
   schema?: string | null;
   dataset_name: string;
   table_name?: string | null;

From 472a27b1e2b1512beb668b9e93ddb7c9cb7d97e4 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 26 Aug 2022 09:03:05 -0700
Subject: [PATCH 18/30] fix styles

---
 .../dataset/AddDataset/LeftPanel/index.tsx    | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

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 0ba85e69c9dc..e583993354af 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
@@ -26,9 +26,8 @@ import Loading from 'src/components/Loading';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import { debounce } from 'lodash';
 import { EmptyStateMedium } from 'src/components/EmptyState';
-import { DatasetActionType } from '../types';
-import { DatasetObject } from '../types';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
+import { DatasetActionType, DatasetObject } from '../types';
 
 interface LeftPanelProps {
   setDataset: (db: any) => void;
@@ -42,9 +41,14 @@ const LeftPanelStyle = styled.div`
   padding: ${theme.gridUnit * 4}px;
   height: 100%;
   background-color: ${theme.colors.grayscale.light5}; 
+  position: relative;
+  .emptystate {
+    height: auto;
+    margin-top: 70px;
+  }
   .refresh {
     position: absolute;
-    top: ${theme.gridUnit * 72.5}px;
+    top: ${theme.gridUnit * 43.25}px;
     left: ${theme.gridUnit * 16.75}px;
     span[role="button"]{
       font-size: ${theme.gridUnit * 4.25}px;
@@ -55,9 +59,18 @@ const LeftPanelStyle = styled.div`
     margin-bottom: ${theme.gridUnit * 11}px;
     font-weight: ${theme.typography.weights.bold};
   }
+  .table-title {
+    margin-top: ${theme.gridUnit * 11}px;
+    margin-bottom: ${theme.gridUnit * 6}px;
+    font-weight: ${theme.typography.weights.bold};
+  }
   .options-list {
     overflow: auto;
-    max-height: ${theme.gridUnit * 175}px;
+    position: absolute;
+    bottom: 0px;
+    top: 390px;
+    left: 13px;
+    right: 0;
     .options {
       padding: ${theme.gridUnit * 1.75}px;
       border-radius: ${theme.borderRadius}px;
@@ -65,7 +78,7 @@ const LeftPanelStyle = styled.div`
   }
   form > span {
     position: absolute;
-    top: ${theme.gridUnit * 102.5}px;
+    top: ${theme.gridUnit * 73}px;
     left: ${theme.gridUnit * 42.75}px;
     font-size: ${theme.gridUnit * 4.25}px;
   }
@@ -181,17 +194,17 @@ export default function LeftPanel({
         </div>
       )}
       {!schema && !loadTables ? (
-        <>
+        <div className="emptystate">
           <EmptyStateMedium
             image="empty-table.svg"
             title={t('No database tables found')}
             description={t('Try selecting a different schema')}
           />
-        </>
+        </div>
       ) : (
         <>
           <Form>
-            <p className="section-title">Select Database Table</p>
+            <p className="table-title">Select Database Table</p>
             <RefreshLabel
               onClick={() => {
                 setLoadTables(true);

From 48b15b268b9ee4fd4f8cf65e60d9bf63a880054b Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 29 Aug 2022 16:35:23 -0700
Subject: [PATCH 19/30] update type

---
 .../CRUD/data/dataset/AddDataset/LeftPanel/index.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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 e583993354af..f052f84b62f1 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
@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState, useMemo } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  SetStateAction,
+  Dispatch,
+} from 'react';
 import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Form } from 'src/components/Form';
@@ -30,7 +36,7 @@ import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { DatasetActionType, DatasetObject } from '../types';
 
 interface LeftPanelProps {
-  setDataset: (db: any) => void;
+  setDataset: Dispatch<SetStateAction<object>>;
   schema?: string | undefined | null;
   dbId?: number;
 }

From ee25dc766f522bd54c85876d4974bbcdd46f15cf Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 29 Aug 2022 17:07:05 -0700
Subject: [PATCH 20/30] fix tests

---
 .../data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx     | 4 +---
 .../CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx   | 5 ++++-
 2 files changed, 5 insertions(+), 4 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 0b9b162deddd..22295613c85d 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
@@ -56,8 +56,6 @@ describe('LeftPanel', () => {
     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',
@@ -76,7 +74,7 @@ describe('LeftPanel', () => {
     expect(screen.getByText(/try selecting a different schema/i)).toBeVisible();
   });
   it('renders list of options when user clicks on schema', () => {
-    render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId="1" />, {
+    render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
       useRedux: true,
     });
     // screen.debug('container', container)
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
index 59c3ee3ed153..0d0138bfed34 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
@@ -40,7 +40,10 @@ describe('DatasetLayout', () => {
   });
 
   it('renders a LeftPanel when passed in', () => {
-    render(<DatasetLayout leftPanel={LeftPanel()} />);
+    render(
+      <DatasetLayout leftPanel={<LeftPanel setDataset={() => null} />} />,
+      { useRedux: true },
+    );
 
     expect(screen.getByRole('img', { name: /empty/i })).toBeVisible();
     expect(screen.getByText(/no database tables found/i)).toBeVisible();

From a4258baf8aa823073388e0fe1e05be713724b411 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 30 Aug 2022 02:09:44 -0700
Subject: [PATCH 21/30] fix test

---
 .../src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
index 23c5c3b471a1..13b9c2472f6b 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
@@ -22,7 +22,7 @@ import AddDataset from 'src/views/CRUD/data/dataset/AddDataset';
 
 describe('AddDataset', () => {
   it('renders a blank state AddDataset', () => {
-    render(<AddDataset />);
+    render(<AddDataset />, { useRedux: true });
 
     const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i });
 

From 4ce4d29033cd8a74e6903e1253a1b8503552e294 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 30 Aug 2022 02:12:46 -0700
Subject: [PATCH 22/30] run precommit

---
 .../src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 f052f84b62f1..b7ec56e8762c 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
@@ -46,7 +46,7 @@ const LeftPanelStyle = styled.div`
   max-width: ${theme.gridUnit * 87.5}px;
   padding: ${theme.gridUnit * 4}px;
   height: 100%;
-  background-color: ${theme.colors.grayscale.light5}; 
+  background-color: ${theme.colors.grayscale.light5};
   position: relative;
   .emptystate {
     height: auto;

From a02db58159ec74432195045140fdc35a1b96ebd9 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 30 Aug 2022 22:10:29 -0700
Subject: [PATCH 23/30] add suggestions

---
 .../AddDataset/LeftPanel/LeftPanel.test.tsx   |  1 -
 .../dataset/AddDataset/LeftPanel/index.tsx    | 19 +++++++++++--------
 .../CRUD/data/dataset/AddDataset/index.tsx    |  4 +---
 .../CRUD/data/dataset/AddDataset/types.tsx    |  7 ++-----
 4 files changed, 14 insertions(+), 17 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 22295613c85d..070aa8cac8d8 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
@@ -77,7 +77,6 @@ describe('LeftPanel', () => {
     render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
       useRedux: true,
     });
-    // screen.debug('container', container)
     SupersetClientGet.mockImplementation(getSchemaMockFunction);
     SupersetClientGet.mockImplementation(getTableMockFunction);
     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 b7ec56e8762c..e9ba16aa7f78 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
@@ -50,7 +50,7 @@ const LeftPanelStyle = styled.div`
   position: relative;
   .emptystate {
     height: auto;
-    margin-top: 70px;
+    margin-top: ${theme.gridUnit * 17.5}px;
   }
   .refresh {
     position: absolute;
@@ -73,9 +73,9 @@ const LeftPanelStyle = styled.div`
   .options-list {
     overflow: auto;
     position: absolute;
-    bottom: 0px;
-    top: 390px;
-    left: 13px;
+    bottom: 0;
+    top: ${theme.gridUnit * 97.5}px;
+    left: ${theme.gridUnit * 3.25}px;
     right: 0;
     .options {
       padding: ${theme.gridUnit * 1.75}px;
@@ -148,13 +148,16 @@ export default function LeftPanel({
 
   const setSchema = (schema: string) => {
     if (schema) {
-      setDataset({ type: DatasetActionType.selectSchema, payload: schema });
+      setDataset({
+        type: DatasetActionType.selectSchema,
+        payload: { name: 'schema', value: schema },
+      });
       setLoadTables(true);
     }
     setResetTables(true);
   };
 
-  const encodedSchema = encodeURIComponent(schema as string);
+  const encodedSchema = schema ? encodeURIComponent(schema) : undefined;
 
   useEffect(() => {
     if (loadTables) {
@@ -187,7 +190,7 @@ export default function LeftPanel({
 
   return (
     <LeftPanelStyle>
-      <p className="section-title db-schema"> Select Database & Schema</p>
+      <p className="section-title db-schema">Select Database & Schema</p>
       <DatabaseSelector
         handleError={addDangerToast}
         onDbChange={setDatabase}
@@ -196,7 +199,7 @@ export default function LeftPanel({
       {loadTables && (
         <div className="loading">
           <Loading position="inline" />
-          <p>loading schemas ...</p>
+          <p>Tables loading ...</p>
         </div>
       )}
       {!schema && !loadTables ? (
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
index 502d6735cd82..a1ec33ad170e 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
@@ -47,7 +47,7 @@ export function datasetReducer(
     case DatasetActionType.selectSchema:
       return {
         ...trimmedState,
-        schema: action.payload as string,
+        [action.payload.name]: action.payload.value,
         table_name: null,
       };
     case DatasetActionType.selectTable:
@@ -66,8 +66,6 @@ export function datasetReducer(
 }
 
 export default function AddDataset() {
-  // this is commented out for now, but can be commented in as the component
-  // is built up. Uncomment the useReducer in imports too
   const [dataset, setDataset] = useReducer<
     Reducer<Partial<DatasetObject> | null, DSReducerActionType>
   >(datasetReducer, null);
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
index 2629ac9e03f2..530ed8dd3312 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
@@ -43,13 +43,10 @@ export type Schema = {
 
 export type DSReducerActionType =
   | {
-      type:
-        | DatasetActionType.selectDatabase
-        | DatasetActionType.selectTable
-        | DatasetActionType.selectSchema;
+      type: DatasetActionType.selectDatabase | DatasetActionType.selectTable;
       payload: Partial<DatasetObject>;
     }
   | {
-      type: DatasetActionType.changeDataset;
+      type: DatasetActionType.changeDataset | DatasetActionType.selectSchema;
       payload: DatasetReducerPayloadType;
     };

From 1689774cba7d3d8217caabd8976709a4daa24699 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 31 Aug 2022 17:37:36 -0700
Subject: [PATCH 24/30] match styles and desgin

---
 .../dataset/AddDataset/LeftPanel/index.tsx    | 81 ++++++++++++-------
 1 file changed, 50 insertions(+), 31 deletions(-)

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 e9ba16aa7f78..2b8c71a912d4 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
@@ -26,6 +26,7 @@ import React, {
 import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Form } from 'src/components/Form';
+import Icons from 'src/components/Icons';
 import { TableOption, Table } from 'src/components/TableSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
 import Loading from 'src/components/Loading';
@@ -41,6 +42,10 @@ interface LeftPanelProps {
   dbId?: number;
 }
 
+const SearchIcon = styled(Icons.Search)`
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+`;
+
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
   max-width: ${theme.gridUnit * 87.5}px;
@@ -82,7 +87,7 @@ const LeftPanelStyle = styled.div`
       border-radius: ${theme.borderRadius}px;
     }
   }
-  form > span {
+  form > span[aria-label="refresh"] {
     position: absolute;
     top: ${theme.gridUnit * 73}px;
     left: ${theme.gridUnit * 42.75}px;
@@ -91,15 +96,19 @@ const LeftPanelStyle = styled.div`
   .table-form {
     margin-bottom: ${theme.gridUnit * 8}px;
   }
-  .loading {
+  .loading-container {
     position: absolute;
-    bottom: ${theme.gridUnit * 95}px;
+    top: 359px;
+    left: 0;
+    right: 0;
+    text-align: center;
     img {
-      position: absolute;
-      top: -${theme.gridUnit * 13.25}px;
-      right: -${theme.gridUnit * 3.75}px;
-      width: ${theme.gridUnit * 17.75}px;
+      width: ${theme.gridUnit * 20}px;
+      margin-bottom: 10px;
     }
+    p {
+      color: ${theme.colors.grayscale.light1}
+    } 
   }
   }
 `}
@@ -188,21 +197,24 @@ export default function LeftPanel({
     [dbId, encodedSchema],
   );
 
+  const Loader = (inline: string) => (
+    <div className="loading-container">
+      <Loading position="inline" />
+      <p>{inline} </p>
+    </div>
+  );
+
   return (
     <LeftPanelStyle>
-      <p className="section-title db-schema">Select Database & Schema</p>
+      <p className="section-title db-schema">Select database & schema</p>
       <DatabaseSelector
         handleError={addDangerToast}
         onDbChange={setDatabase}
         onSchemaChange={setSchema}
       />
-      {loadTables && (
-        <div className="loading">
-          <Loading position="inline" />
-          <p>Tables loading ...</p>
-        </div>
-      )}
-      {!schema && !loadTables ? (
+      {loadTables && !refresh && Loader('Table loading')}
+
+      {schema && !loadTables && !tableOptions.length && !searchVal && (
         <div className="emptystate">
           <EmptyStateMedium
             image="empty-table.svg"
@@ -210,10 +222,12 @@ export default function LeftPanel({
             description={t('Try selecting a different schema')}
           />
         </div>
-      ) : (
+      )}
+
+      {schema && (tableOptions.length > 0 || searchVal.length > 0) && (
         <>
           <Form>
-            <p className="table-title">Select Database Table</p>
+            <p className="table-title">Select database table</p>
             <RefreshLabel
               onClick={() => {
                 setLoadTables(true);
@@ -221,22 +235,27 @@ export default function LeftPanel({
               }}
               tooltipContent={t('Refresh table list')}
             />
-            <Input
-              value={searchVal}
-              onChange={evt => {
-                search(evt.target.value);
-                setSearchVal(evt.target.value);
-              }}
-              className="table-form"
-              placeholder={t('Search Tables')}
-            />
+            {refresh && Loader('Refresh tables')}
+            {!refresh && (
+              <Input
+                value={searchVal}
+                prefix={<SearchIcon iconSize="l" />}
+                onChange={evt => {
+                  search(evt.target.value);
+                  setSearchVal(evt.target.value);
+                }}
+                className="table-form"
+                placeholder={t('Search tables')}
+              />
+            )}
           </Form>
           <div className="options-list" data-test="options-list">
-            {tableOptions.map((o, i) => (
-              <div className="options" key={i}>
-                {o.label}
-              </div>
-            ))}
+            {!refresh &&
+              tableOptions.map((o, i) => (
+                <div className="options" key={i}>
+                  {o.label}
+                </div>
+              ))}
           </div>
         </>
       )}

From b16937845b45eafa3646a433c6202c064e156b45 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 1 Sep 2022 10:02:46 -0700
Subject: [PATCH 25/30] update test

---
 .../AddDataset/LeftPanel/LeftPanel.test.tsx   | 172 +++++++++++++++++-
 1 file changed, 162 insertions(+), 10 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 070aa8cac8d8..92bce1343b9e 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,14 +18,141 @@
  */
 import React from 'react';
 import { SupersetClient } from '@superset-ui/core';
-import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent } from 'spec/helpers/testing-library';
 import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel';
+import { act } from 'react-dom/test-utils';
 
 describe('LeftPanel', () => {
   const mockFun = jest.fn();
 
   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;
+        }
+        if (endpoint.includes('/function_names')) {
+          return {
+            json: { function_names: [] },
+          } as any;
+        }
+        return {
+          json: {
+            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,
+              },
+            ],
+          },
+        } as any;
+      },
+    );
+  });
   const getSchemaMockFunction = async () =>
     ({
       json: {
@@ -66,19 +193,44 @@ describe('LeftPanel', () => {
     expect(databaseSelect).toBeInTheDocument();
     expect(schemaSelect).toBeInTheDocument();
   });
-  it('renders a blank state LeftPanel if there is no schema selected', () => {
+  it('does not render blank state if there is nothing 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();
+    const emptyState = screen.queryByRole('img', { name: /empty/i });
+    expect(emptyState).not.toBeInTheDocument();
+    // expect(screen.getByText(/no database tables found/i)).toBeVisible();
+    // expect(screen.getByText(/try selecting a different schema/i)).toBeVisible();
   });
-  it('renders list of options when user clicks on schema', () => {
+  it('renders list of options when user clicks on schema', async () => {
+    // Todo: (Phillip) finish testing for showing list of options once table is implemented
+    /* SupersetClientGet.mockImplementation(getSchemaMockFunction);
+    SupersetClientGet.mockImplementation(getTableMockFunction);
     render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
       useRedux: true,
     });
-    SupersetClientGet.mockImplementation(getSchemaMockFunction);
-    SupersetClientGet.mockImplementation(getTableMockFunction);
-    expect(screen.getByTestId('options-list')).toBeInTheDocument();
+
+    const databaseSelect = screen.getByRole('combobox', {
+      name: 'Select database or type database name',
+    });
+    userEvent.click(databaseSelect);
+
+    await act(async () => {
+      // console.log('click ---->', screen.getAllByText('test-mysql'));
+      const options = screen.queryAllByText('text-mysql');
+      console.log
+      // userEvent.click(screen.getAllByText('test-mysql')[0]);
+    });
+
+    screen.logTestingPlaygroundURL();
+    const schemaSelect = screen.getByRole('combobox', {
+      name: 'Select schema or type schema name',
+    });
+    userEvent.click(schemaSelect);
+    await act(async () => {
+      console.log('click ---->', screen.getAllByText('schema_a'));
+      userEvent.click(screen.getAllByText('schema_a')[1]);
+    });
+
+    expect(screen.getByTestId('options-list')).toBeInTheDocument(); */
+    expect.anything();
   });
 });

From 20126904d224e472c67c4ad8e80eb4ffe26c569a Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 6 Sep 2022 13:39:35 -0700
Subject: [PATCH 26/30] update test and last changes

---
 .../AddDataset/LeftPanel/LeftPanel.test.tsx   | 54 ++++++++-----------
 .../dataset/AddDataset/LeftPanel/index.tsx    |  2 +-
 2 files changed, 24 insertions(+), 32 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 92bce1343b9e..9b317efaa4ad 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
@@ -19,7 +19,7 @@
 import React from 'react';
 import { SupersetClient } from '@superset-ui/core';
 import userEvent from '@testing-library/user-event';
-import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel';
 import { act } from 'react-dom/test-utils';
 
@@ -28,7 +28,6 @@ describe('LeftPanel', () => {
 
   const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
 
-
   beforeEach(() => {
     jest.resetAllMocks();
     SupersetClientGet.mockImplementation(
@@ -38,11 +37,6 @@ describe('LeftPanel', () => {
             json: { result: ['information_schema', 'public'] },
           } as any;
         }
-        if (endpoint.includes('/function_names')) {
-          return {
-            json: { function_names: [] },
-          } as any;
-        }
         return {
           json: {
             count: 2,
@@ -153,12 +147,6 @@ describe('LeftPanel', () => {
       },
     );
   });
-  const getSchemaMockFunction = async () =>
-    ({
-      json: {
-        result: ['schema_a', 'schema_b'],
-      },
-    } as any);
 
   const getTableMockFunction = async () =>
     ({
@@ -197,13 +185,8 @@ describe('LeftPanel', () => {
     render(<LeftPanel setDataset={mockFun} />, { useRedux: true });
     const emptyState = screen.queryByRole('img', { name: /empty/i });
     expect(emptyState).not.toBeInTheDocument();
-    // expect(screen.getByText(/no database tables found/i)).toBeVisible();
-    // expect(screen.getByText(/try selecting a different schema/i)).toBeVisible();
   });
   it('renders list of options when user clicks on schema', async () => {
-    // Todo: (Phillip) finish testing for showing list of options once table is implemented
-    /* SupersetClientGet.mockImplementation(getSchemaMockFunction);
-    SupersetClientGet.mockImplementation(getTableMockFunction);
     render(<LeftPanel setDataset={mockFun} schema="schema_a" dbId={1} />, {
       useRedux: true,
     });
@@ -212,25 +195,34 @@ describe('LeftPanel', () => {
       name: 'Select database or type database name',
     });
     userEvent.click(databaseSelect);
+    expect(await screen.findByText('test-postgres')).toBeInTheDocument();
 
-    await act(async () => {
-      // console.log('click ---->', screen.getAllByText('test-mysql'));
-      const options = screen.queryAllByText('text-mysql');
-      console.log
-      // userEvent.click(screen.getAllByText('test-mysql')[0]);
+    act(() => {
+      userEvent.click(screen.getAllByText('test-postgres')[0]);
+    });
+    const tableSelect = screen.getByRole('combobox', {
+      name: /select schema or type schema name/i,
     });
 
     screen.logTestingPlaygroundURL();
-    const schemaSelect = screen.getByRole('combobox', {
-      name: 'Select schema or type schema name',
+    await waitFor(() => {
+      expect(tableSelect).toBeEnabled();
     });
-    userEvent.click(schemaSelect);
-    await act(async () => {
-      console.log('click ---->', screen.getAllByText('schema_a'));
-      userEvent.click(screen.getAllByText('schema_a')[1]);
+
+    userEvent.click(tableSelect);
+    expect(
+      await screen.findByRole('option', { name: 'information_schema' }),
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByRole('option', { name: 'public' }),
+    ).toBeInTheDocument();
+
+    SupersetClientGet.mockImplementation(getTableMockFunction);
+    act(() => {
+      userEvent.click(screen.getAllByText('public')[1]);
     });
 
-    expect(screen.getByTestId('options-list')).toBeInTheDocument(); */
-    expect.anything();
+    // Todo: (Phillip) finish testing for showing list of options once table is implemented
+    // 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 2b8c71a912d4..2b87298b34e0 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
@@ -66,7 +66,7 @@ const LeftPanelStyle = styled.div`
     }
   }
   .section-title {
-    margin-top: ${theme.gridUnit * 11}px;
+    margin-top: ${theme.gridUnit * 5.5}px;
     margin-bottom: ${theme.gridUnit * 11}px;
     font-weight: ${theme.typography.weights.bold};
   }

From e81484f9296739b2b79547f0a5da4063ce795007 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 6 Sep 2022 14:44:00 -0700
Subject: [PATCH 27/30] fix merge

---
 .../src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 2b87298b34e0..c2d5d42d6a1d 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
@@ -27,8 +27,9 @@ import { SupersetClient, t, styled, FAST_DEBOUNCE } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Form } from 'src/components/Form';
 import Icons from 'src/components/Icons';
-import { TableOption, Table } from 'src/components/TableSelector';
+import { TableOption } from 'src/components/TableSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
+import { Table } from 'src/hooks/apiResources';
 import Loading from 'src/components/Loading';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import { debounce } from 'lodash';

From f0dd3869eb2b8a4c739893ba8a819781a60a4a05 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 6 Sep 2022 14:59:33 -0700
Subject: [PATCH 28/30] fix indentation

---
 .../dataset/AddDataset/LeftPanel/index.tsx    | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

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 c2d5d42d6a1d..9d79d5cc8f6e 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
@@ -49,68 +49,68 @@ const SearchIcon = styled(Icons.Search)`
 
 const LeftPanelStyle = styled.div`
   ${({ theme }) => `
-  max-width: ${theme.gridUnit * 87.5}px;
-  padding: ${theme.gridUnit * 4}px;
-  height: 100%;
-  background-color: ${theme.colors.grayscale.light5};
-  position: relative;
-  .emptystate {
-    height: auto;
-    margin-top: ${theme.gridUnit * 17.5}px;
-  }
-  .refresh {
-    position: absolute;
-    top: ${theme.gridUnit * 43.25}px;
-    left: ${theme.gridUnit * 16.75}px;
-    span[role="button"]{
+    max-width: ${theme.gridUnit * 87.5}px;
+    padding: ${theme.gridUnit * 4}px;
+    height: 100%;
+    background-color: ${theme.colors.grayscale.light5};
+    position: relative;
+    .emptystate {
+      height: auto;
+      margin-top: ${theme.gridUnit * 17.5}px;
+    }
+    .refresh {
+      position: absolute;
+      top: ${theme.gridUnit * 43.25}px;
+      left: ${theme.gridUnit * 16.75}px;
+      span[role="button"]{
+        font-size: ${theme.gridUnit * 4.25}px;
+      }
+    }
+    .section-title {
+      margin-top: ${theme.gridUnit * 5.5}px;
+      margin-bottom: ${theme.gridUnit * 11}px;
+      font-weight: ${theme.typography.weights.bold};
+    }
+    .table-title {
+      margin-top: ${theme.gridUnit * 11}px;
+      margin-bottom: ${theme.gridUnit * 6}px;
+      font-weight: ${theme.typography.weights.bold};
+    }
+    .options-list {
+      overflow: auto;
+      position: absolute;
+      bottom: 0;
+      top: ${theme.gridUnit * 97.5}px;
+      left: ${theme.gridUnit * 3.25}px;
+      right: 0;
+      .options {
+        padding: ${theme.gridUnit * 1.75}px;
+        border-radius: ${theme.borderRadius}px;
+      }
+    }
+    form > span[aria-label="refresh"] {
+      position: absolute;
+      top: ${theme.gridUnit * 73}px;
+      left: ${theme.gridUnit * 42.75}px;
       font-size: ${theme.gridUnit * 4.25}px;
     }
-  }
-  .section-title {
-    margin-top: ${theme.gridUnit * 5.5}px;
-    margin-bottom: ${theme.gridUnit * 11}px;
-    font-weight: ${theme.typography.weights.bold};
-  }
-  .table-title {
-    margin-top: ${theme.gridUnit * 11}px;
-    margin-bottom: ${theme.gridUnit * 6}px;
-    font-weight: ${theme.typography.weights.bold};
-  }
-  .options-list {
-    overflow: auto;
-    position: absolute;
-    bottom: 0;
-    top: ${theme.gridUnit * 97.5}px;
-    left: ${theme.gridUnit * 3.25}px;
-    right: 0;
-    .options {
-      padding: ${theme.gridUnit * 1.75}px;
-      border-radius: ${theme.borderRadius}px;
+    .table-form {
+      margin-bottom: ${theme.gridUnit * 8}px;
     }
-  }
-  form > span[aria-label="refresh"] {
-    position: absolute;
-    top: ${theme.gridUnit * 73}px;
-    left: ${theme.gridUnit * 42.75}px;
-    font-size: ${theme.gridUnit * 4.25}px;
-  }
-  .table-form {
-    margin-bottom: ${theme.gridUnit * 8}px;
-  }
-  .loading-container {
-    position: absolute;
-    top: 359px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    img {
-      width: ${theme.gridUnit * 20}px;
-      margin-bottom: 10px;
+    .loading-container {
+      position: absolute;
+      top: 359px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      img {
+        width: ${theme.gridUnit * 20}px;
+        margin-bottom: 10px;
+      }
+      p {
+        color: ${theme.colors.grayscale.light1}
+      }
     }
-    p {
-      color: ${theme.colors.grayscale.light1}
-    } 
-  }
   }
 `}
 `;

From 4057c66d84dd9314e1c47402df3cdedf566b12f6 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 6 Sep 2022 15:12:58 -0700
Subject: [PATCH 29/30] remove log

---
 .../CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx    | 1 -
 1 file changed, 1 deletion(-)

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 9b317efaa4ad..4e9d1a89ca70 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
@@ -204,7 +204,6 @@ describe('LeftPanel', () => {
       name: /select schema or type schema name/i,
     });
 
-    screen.logTestingPlaygroundURL();
     await waitFor(() => {
       expect(tableSelect).toBeEnabled();
     });

From 8a92b3e7a2d797fe5ba4ab10e4d50f1678b85fb9 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 6 Sep 2022 22:35:26 -0700
Subject: [PATCH 30/30] fix parent component tests

---
 .../views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx  | 6 +-----
 .../CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx  | 3 +--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
index 13b9c2472f6b..cee1cea5e2d8 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
@@ -30,13 +30,9 @@ describe('AddDataset', () => {
     expect(screen.getByText(/header/i)).toBeVisible();
     // Left panel
     expect(blankeStateImgs[0]).toBeVisible();
-    expect(screen.getByText(/no database tables found/i)).toBeVisible();
-    // Database panel
-    expect(blankeStateImgs[1]).toBeVisible();
-    expect(screen.getByText(/select dataset source/i)).toBeVisible();
     // Footer
     expect(screen.getByText(/footer/i)).toBeVisible();
 
-    expect(blankeStateImgs.length).toBe(2);
+    expect(blankeStateImgs.length).toBe(1);
   });
 });
diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
index 0d0138bfed34..dbdc89e2aef2 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
@@ -45,8 +45,7 @@ describe('DatasetLayout', () => {
       { useRedux: true },
     );
 
-    expect(screen.getByRole('img', { name: /empty/i })).toBeVisible();
-    expect(screen.getByText(/no database tables found/i)).toBeVisible();
+    expect(LeftPanel).toBeTruthy();
   });
 
   it('renders a DatasetPanel when passed in', () => {