feat: add tableselector to dataset creation page

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

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

@@ -16,18 +16,204 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { t } from '@superset-ui/core';
+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';
 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: ${theme.gridUnit * 4}px;
+  height: 100%;
+  background-color: ${theme.colors.grayscale.light5}; 
+  .refresh {
+    position: absolute;
+    top: 290px;
+    left: 67px;
+    span[role="button"]{
+      font-size: ${theme.gridUnit * 4.25}px;
+    }
+  }
+  .section-title {
+    margin-top: 44px;
+    margin-bottom: 44px;
+    font-weight: ${theme.typography.weights.bold};
+  }
+  .options-list {
+    overflow: auto;
+    max-height: 700px;
+    .options {
+      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: ${theme.gridUnit * 8}px;
+  }
+  .loading {
+    position: absolute;
+    bottom: 380px;
+    img {
+      position: absolute;
+      top: -53px;
+      right: -15px;
+      width: 71px;
+    }
+  }
+  }
+`}
+`;
+
+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 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);
+        setRefresh(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);
+
+  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={() => null}
+        onDbChange={setDatabase}
+        onSchemaChange={setSchema}
       />
-    </>
+      {loadTables && (
+        <div className="loading">
+          <Loading position="inline" />
+          <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>
+            <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">
+            {tableOptions.map((o, i) => (
+              <div className="options" key={i}>
+                {o.label}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </LeftPanelStyle>
   );
 }

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useReducer, Reducer } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
@@ -31,6 +31,7 @@ export function datasetReducer(
   const trimmedState = {
     ...(state || {}),
   };
+
   switch (action.type) {
     case DatasetActionType.selectDatabase:
       return {
@@ -42,7 +43,7 @@ export function datasetReducer(
     case DatasetActionType.selectSchema:
       return {
         ...trimmedState,
-        ...action.payload,
+        schema: action.payload,
         table_name: null,
       };
     case DatasetActionType.selectTable:
@@ -63,14 +64,22 @@ 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);
+  const [dataset, setDataset] = useReducer<
+    Reducer<Partial<DatasetObject> | null, DSReducerActionType>
+  >(datasetReducer, null);
+
+  const LeftPanelComponent = () => (
+    <LeftPanel
+      setDataset={setDataset}
+      schema={dataset?.schema}
+      dbId={dataset?.id}
+    />
+  );
 
   return (
     <DatasetLayout
       header={Header()}
-      leftPanel={LeftPanel()}
+      leftPanel={LeftPanelComponent()}
       datasetPanel={DatasetPanel()}
       footer={Footer()}
     />