feat: use select and update

lucbpz · lucbpz · commit 0f31aee1e340 · 2023-01-04T10:41:24.000-07:00
diff --git a/ui/src/components/DBDataGrid.tsx b/ui/src/components/DBDataGrid.tsx
@@ -1,40 +1,97 @@
 import { DataGridPro, GridColumns, GridRowsProp } from "@mui/x-data-grid-pro";
+import { useSelectTable } from "../hooks/useSelectTable";
+import { useUpdate } from "../hooks/useUpdate";
+import { IDBConnection } from "../utils/types";
 
-export function DBDataGrid() {
+export function DBDataGrid({
+  database,
+  table,
+}: {
+  database: IDBConnection;
+  table: string;
+}) {
+  const { rows, columns, getTableRows } = useSelectTable(database, table);
+  const { updateField } = useUpdate(database, table);
+  const rowsWithInternalId = rows.map((row: any, index) => ({
+    ...row,
+    internalId: index,
+  }));
   return (
     <DataGridPro
-      rows={rows}
-      columns={columns}
-      experimentalFeatures={{ newEditingApi: true }}
+      rows={rowsWithInternalId}
+      columns={parseColumns(columns)}
       disableColumnFilter
       disableColumnMenu
       disableColumnSelector
       disableDensitySelector
+      disableSelectionOnClick
+      getRowId={(row) => row.internalId}
       sx={{
-        px: 2,
+        pr: 3,
+        "& .light-bg": {
+          backgroundColor: (theme) => theme.palette.background.paper,
+        },
+      }}
+      onCellEditCommit={(props) => {
+        const modifiedRow: any = rowsWithInternalId.find(
+          (row: any) => row.internalId === props.id
+        );
+        const newValue = props.value;
+        const field = props.field;
+        const { internalId, ...row } = modifiedRow;
+        updateField(row, field, newValue).then(() => {
+          getTableRows();
+        });
       }}
     />
   );
 }
 
-const columns: GridColumns = [
-  { field: "id", headerName: "Id", editable: true, sortable: false, flex: 1 },
-  {
-    field: "name",
-    headerName: "Name",
-    editable: true,
-    sortable: false,
-    flex: 1,
-  },
-  {
-    field: "description",
-    headerName: "Description",
+const parseColumns = (columnNames: string[]): GridColumns => {
+  const zeroColumn: GridColumns = [
+    {
+      field: "internalId",
+      headerName: "",
+      hide: false,
+      sortable: false,
+      editable: false,
+      flex: 0,
+      width: 0,
+      headerClassName: "light-bg",
+      cellClassName: "light-bg",
+    },
+  ];
+  const columns = columnNames.map((columnName) => ({
+    field: columnName,
+    headerName: columnName.toUpperCase(),
+    headerClassName: "light-bg",
     editable: true,
     sortable: false,
     flex: 1,
-  },
-];
+  }));
+  return zeroColumn.concat(columns);
+};
 
-const rows: GridRowsProp = [
-  { id: "1", name: "test name", description: "test description" },
-];
+const getColumnsFromRows = (rows: any[]) => {
+  const columns: GridColumns = [
+    {
+      field: "internalId",
+      headerName: "",
+      hide: false,
+      flex: 0,
+    },
+  ];
+  if (rows.length > 0) {
+    const row = rows[0];
+    for (const key in row) {
+      columns.push({
+        field: key,
+        headerName: key.toUpperCase(),
+        editable: true,
+        sortable: false,
+        flex: 1,
+      });
+    }
+  }
+  return columns;
+};
diff --git a/ui/src/components/DatabaseViewerDialog.tsx b/ui/src/components/DatabaseViewerDialog.tsx
@@ -89,7 +89,16 @@ export default function DatabaseViewerDialog(props: Props) {
 
   return (
     <div>
-      <Dialog {...dialogProps}>
+      <Dialog {...dialogProps} sx={{
+        "& .MuiDialog-paper": {
+          border: 0,
+          backgroundColor: (theme) => theme.palette.background.default,
+        },
+        "& .MuiToolbar-root": {
+          backgroundColor: (theme) => theme.palette.background.default,
+          border: 0,
+        }
+      }}>
         <AppBar sx={{ position: "relative" }}>
           <Toolbar>
             <IconButton
@@ -109,7 +118,9 @@ export default function DatabaseViewerDialog(props: Props) {
             <IconButton
               edge="start"
               color="inherit"
-              onClick={() => getDBTables()}
+              onClick={() => {
+                getDBTables();
+              }}
               aria-label="sync"
             >
               <Sync
@@ -141,26 +152,27 @@ export default function DatabaseViewerDialog(props: Props) {
             height: "100%",
           }}
         >
-          <Grid container spacing={3} height="100%">
-            <Grid item xs>
+          <Grid container gap={3} height="100%">
+            <Grid item xs sx={{
+              paddingY: 1,
+              background: (theme) => theme.palette.background.paper,
+            }}>
               <Box>
                 <TreeView
                   aria-label="file system navigator"
                   defaultCollapseIcon={<Storage />}
                   defaultExpandIcon={<Storage />}
+                  defaultEndIcon={<Storage />}
                   multiSelect={false}
                   onNodeSelect={handleOpenTable}
                 >
-                  {tables.map((table, key) => (
-                    <React.Fragment key={key}>
-                      <TreeItem nodeId={table} label={table} />
-                      {key < tables.length - 1 && <Divider />}
-                    </React.Fragment>
+                  {tables.map((table) => (
+                      <TreeItem key={table} nodeId={table} label={table} sx={{paddingY: 0.5}}/>
                   ))}
                 </TreeView>
               </Box>
             </Grid>
-            <Grid item xs={9}>
+            <Grid xs={9}>
               <>
                 {tabs.length === 0 && <NoRowsOverlay />}
                 {tabs.length > 0 && (
@@ -182,13 +194,23 @@ export default function DatabaseViewerDialog(props: Props) {
                             iconPosition="end"
                             label={tab.name}
                             value={tab.table}
+                            sx={{
+                              minHeight: 0,
+                            }}
                           />
                         ))}
                       </TabList>
                     </Box>
                     {tabs.map((tab, key) => (
-                      <TabPanel value={tab.name} key={key}>
-                        <DBDataGrid />
+                      <TabPanel
+                        value={tab.name}
+                        key={key}
+                        sx={{
+                          height: "92%",
+                          padding: 0,
+                        }}
+                      >
+                        <DBDataGrid database={database} table={tab.name} />
                       </TabPanel>
                     ))}
                   </TabContext>
diff --git a/ui/src/hooks/useSelectTable.ts b/ui/src/hooks/useSelectTable.ts
@@ -0,0 +1,104 @@
+import { createDockerDesktopClient } from "@docker/extension-api-client";
+import { useEffect, useState } from "react";
+import { IDBConnection } from "../utils/types";
+
+const ddClient = createDockerDesktopClient();
+
+interface Column {
+  Name: string;
+  Type: string;
+  Null: string;
+  Default: string;
+}
+
+export const useSelectTable = (database: IDBConnection, table: string) => {
+  const [columns, setColumns] = useState<string[]>([]);
+  const [rows, setRows] = useState<unknown[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const getTableColumns = async () => {
+    setLoading(true);
+    try {
+      const result = await ddClient.extension.host!.cli.exec("usql", [
+        database.connectionString,
+        "-J", // json output
+        "-q", // quiet, do not print connection string
+        "-c", // execute the command
+        "'\\d " + table + "'",
+      ]);
+
+      const columns = result.parseJsonObject() as Column[];
+      console.log(columns);
+      setColumns(columns.map((column) => column.Name));
+    } catch (err) {
+      console.log(err);
+      //setError(err?.message);
+    }
+    setLoading(false);
+  };
+
+  const getTableRows = async () => {
+    setLoading(true);
+    try {
+      const result = await ddClient.extension.host!.cli.exec("usql", [
+        database.connectionString,
+        "-J", // json output
+        "-q", // quiet, do not print connection string
+        "-c", // execute the command
+        getSelectClause(database.image, table),
+        // "'\\d " + table + "'",
+      ]);
+      console.log(database, table);
+      const rows = result.parseJsonObject() as unknown[];
+      //   const rows = result.parseJsonObject() as Column[];
+      //   setrows(rows.map((column) => column.Name));
+      setRows(parseRowsData(rows, database.image));
+    } catch (err) {
+      console.log(err);
+      //setError(err?.message);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getTableColumns();
+    getTableRows();
+  }, [table]);
+
+  return { getTableRows, columns, rows, loading, error };
+};
+
+const getSelectClause = (database: string, table: string) => {
+  switch (database) {
+    case "postgres":
+      return getPostgresSelectClause(table);
+    case "mysql":
+      return getPostgresSelectClause(table);
+    default:
+      return getPostgresSelectClause(table);
+  }
+};
+
+const getPostgresSelectClause = (table: string) => {
+  return "'select * from " + table + "'";
+};
+
+const parseRowsData = (rows: unknown[], database: string) => {
+  switch (database) {
+    case "postgres":
+      return parsePostgresRowsData(rows);
+    case "mysql":
+      return parseMysqlRowsData(rows);
+    default:
+      return rows;
+  }
+};
+
+const parsePostgresRowsData = (rows: unknown[]) => {
+  return rows;
+};
+
+const parseMysqlRowsData = (rows: unknown[]) => {
+  return rows;
+};
diff --git a/ui/src/hooks/useUpdate.ts b/ui/src/hooks/useUpdate.ts
@@ -0,0 +1,80 @@
+import { createDockerDesktopClient } from "@docker/extension-api-client";
+import { IDBConnection } from "../utils/types";
+
+const ddClient = createDockerDesktopClient();
+
+export const useUpdate = (database: IDBConnection, table: string) => {
+  const updateField = async (
+    modifiedRow: Record<string, any>,
+    field: string,
+    value: string
+  ) => {
+    try {
+      const result = await ddClient.extension.host!.cli.exec("usql", [
+        database.connectionString,
+        "-J", // json output
+        "-q", // quiet, do not print connection string
+        "-c", // execute the command
+        getUpdateClause(modifiedRow, database.image, table, field, value),
+      ]);
+      console.log(result);
+      return result.stdout;
+    } catch (err: any) {
+      console.log(err);
+      ddClient.desktopUI.toast.error(err.stderr);
+      //setError(err?.message);
+    }
+  };
+  return { updateField };
+};
+
+const getUpdateClause = (
+  modifiedRow: Record<string, any>,
+  database: string,
+  table: string,
+  field: string,
+  value: any
+) => {
+  switch (database) {
+    case "postgres":
+      return getPostgresUpdateClause(modifiedRow, table, field, value);
+    case "mysql":
+      return getPostgresUpdateClause(modifiedRow, table, field, value);
+    default:
+      return getPostgresUpdateClause(modifiedRow, table, field, value);
+  }
+};
+
+const getPostgresUpdateClause = (
+  modifiedRow: Record<string, any>,
+  table: string,
+  field: string,
+  value: any
+) => {
+  return (
+    '"update ' +
+    table +
+    " set " +
+    field +
+    " = " +
+    getValueOrString(value) +
+    " where " +
+    getWhereClause(modifiedRow) +
+    '"'
+  );
+};
+
+const getValueOrString = (value: string) => {
+  if (typeof value === "string") {
+    return "'" + value + "'";
+  }
+  return value;
+};
+
+const getWhereClause = (modifiedRow: Record<string, any>) => {
+  let whereClause = [];
+  for (const [key, value] of Object.entries(modifiedRow)) {
+    whereClause.push(key + " = " + getValueOrString(value));
+  }
+  return whereClause.join(" and ");
+};
