List tables

Author: benja-M-1

ui/src/components/DatabaseViewerDialog.tsx

@@ -31,7 +31,7 @@ export default function DatabaseViewerDialog({
   database: IDBConnection;
 }) {
   const [open, setOpen] = React.useState(false);
-  const { getDBTables } = useGetDatabaseTables(database);
+  const { getDBTables, tables } = useGetDatabaseTables(database);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -92,18 +92,16 @@ export default function DatabaseViewerDialog({
                   defaultCollapseIcon={<Storage />}
                   defaultExpandIcon={<Storage />}
                 >
-                  <TreeItem nodeId="fake-table-1" label="Fake Table 1">
-                    <TreeItem nodeId="fake-table-1-ID" label="ID" />
-                    <TreeItem nodeId="fake-table-1-NAME" label="NAME" />
-                    <TreeItem nodeId="fake-table-1-DESCRIPTION" label="DESCRIPTION" />
-                  </TreeItem>
-                  <Divider />
-
-                  <TreeItem nodeId="fake-table-2" label="Fake Table 2">
-                    <TreeItem nodeId="fake-table-2-ID" label="ID" />
-                    <TreeItem nodeId="fake-table-2-NAME" label="NAME" />
-                    <TreeItem nodeId="fake-table-2-DESCRIPTION" label="DESCRIPTION" />
-                  </TreeItem>
+                  {tables.map((table, key) => (
+                    <>
+                      <TreeItem nodeId={table} label={table}>
+                        <TreeItem nodeId="fake-table-2-ID" label="ID" />
+                        <TreeItem nodeId="fake-table-2-NAME" label="NAME" />
+                        <TreeItem nodeId="fake-table-2-DESCRIPTION" label="DESCRIPTION" />
+                      </TreeItem>
+                      { key < tables.length -1 && <Divider />}
+                    </>
+                  ))}
                 </TreeView>
               </Box>
             </Grid>

ui/src/hooks/useGetDatabaseTables.ts

@@ -4,24 +4,28 @@ import { IDBConnection } from "../utils/types";
 
 const ddClient = createDockerDesktopClient();
 
+interface Table {
+  Schema: string;
+  Name: string;
+}
+
 export const useGetDatabaseTables = (connection: IDBConnection) => {
   const [tables, setTables] = useState<string[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
   const getDBTables = async () => {
-    console.log("hi!");
     setLoading(true);
     try {
-      const result = await ddClient.extension.host?.cli.exec("usql", [
+      const result = await ddClient.extension.host!.cli.exec("usql", [
         connection.connectionString,
         "-J", // json output
         "-q", // quiet, do not print connection string
         "-c", // execute the command[
         "'\\dt'",
       ]);
-      console.log(result);
-      //   setTables(data);
+      const tables = result.parseJsonObject() as Table[];
+      setTables(tables.map((table) => table.Name));
     } catch (err) {
       console.log(err);
       //setError(err?.message);