feat: add tableselector to dataset creation page

superset-frontend/src/components/TableSelector/index.tsx

@@ -101,7 +101,7 @@ interface TableSelectorProps {
   tableSelectMode?: 'single' | 'multiple';
 }
 
-interface Table {
+export interface Table {
   label: string;
   value: string;
   type: string;
@@ -114,13 +114,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}>

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 });
 

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

@@ -17,15 +17,69 @@
  * 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();
+
+    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('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);
+    expect(screen.getByTestId('options-list')).toBeInTheDocument();
+  });
 });

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

@@ -16,18 +16,227 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { t } from '@superset-ui/core';
+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';
+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';
 import { EmptyStateMedium } from 'src/components/EmptyState';
+import { useToasts } from 'src/components/MessageToasts/withToasts';
+import { DatasetActionType, DatasetObject } from '../types';
+
+interface LeftPanelProps {
+  setDataset: Dispatch<SetStateAction<object>>;
+  schema?: string | undefined | null;
+  dbId?: number;
+}
+
+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: 70px;
+  }
+  .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 * 11}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: 0px;
+    top: 390px;
+    left: 13px;
+    right: 0;
+    .options {
+      padding: ${theme.gridUnit * 1.75}px;
+      border-radius: ${theme.borderRadius}px;
+    }
+  }
+  form > span {
+    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 {
+    position: absolute;
+    bottom: ${theme.gridUnit * 95}px;
+    img {
+      position: absolute;
+      top: -${theme.gridUnit * 13.25}px;
+      right: -${theme.gridUnit * 3.75}px;
+      width: ${theme.gridUnit * 17.75}px;
+    }
+  }
+  }
+`}
+`;
+
+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 [refresh, setRefresh] = useState(false);
+
+  const { addDangerToast } = useToasts();
+
+  const setDatabase = (db: Partial<DatasetObject>) => {
+    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);
+        setRefresh(false);
+      })
+      .catch(e => {
+        console.log('error', e);
+      });
+  };
+
+  const setSchema = (schema: string) => {
+    if (schema) {
+      setDataset({ type: DatasetActionType.selectSchema, payload: schema });
+      setLoadTables(true);
+    }
+    setResetTables(true);
+  };
+
+  const encodedSchema = encodeURIComponent(schema as string);
+
+  useEffect(() => {
+    if (loadTables) {
+      const endpoint = encodeURI(
+        `/superset/tables/${dbId}/${encodedSchema}/undefined/${refresh}/`,
+      );
+      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}/`,
+        );
+        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={addDangerToast}
+        onDbChange={setDatabase}
+        onSchemaChange={setSchema}
       />
-    </>
+      {loadTables && (
+        <div className="loading">
+          <Loading position="inline" />
+          <p>loading schemas ...</p>
+        </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="table-title">Select Database Table</p>
+            <RefreshLabel
+              onClick={() => {
+                setLoadTables(true);
+                setRefresh(true);
+              }}
+              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')}
+            />
+          </Form>
+          <div className="options-list" data-test="options-list">
+            {tableOptions.map((o, i) => (
+              <div className="options" key={i}>
+                {o.label}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </LeftPanelStyle>
   );
 }