From bb16b2db43fd29e3d394ae4fc803eaffbca663bb Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 14 Jul 2024 12:50:17 +0200
Subject: [PATCH] add postgres where clause for table data query. add ui for
 where clause

---
 TODO.md                                       | 13 +++++
 api/src/drivers/driver.interface.ts           |  6 +-
 api/src/drivers/postgres.ts                   | 25 +++++---
 api/src/index.ts                              |  9 ++-
 .../components/db-table-view/data-table.tsx   | 46 +++++++++++++--
 frontend/src/components/ui/index.ts           |  1 +
 frontend/src/components/ui/input.tsx          | 29 ++++++++--
 frontend/src/components/ui/tooltip.tsx        | 58 +++++++++++++++++++
 frontend/src/services/db/db.service.ts        | 23 +++++++-
 frontend/src/services/db/db.types.ts          |  1 +
 10 files changed, 190 insertions(+), 21 deletions(-)
 create mode 100644 TODO.md
 create mode 100644 frontend/src/components/ui/tooltip.tsx

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..b5d4b10
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,13 @@
+# TODO
+
+## Databases
+
+- [ ] Fully support PostgreSQL and MySQL
+- [ ] Add support for SQLite
+- [ ] Add support for MSSQL
+- [ ] Add support for MongoDB
+- [ ] Add support for Redis
+
+## Nice to have
+
+- [ ] Seed database with fake data (something like mockaroo, but taking advantage of db introspection)
\ No newline at end of file
diff --git a/api/src/drivers/driver.interface.ts b/api/src/drivers/driver.interface.ts
index cc60795..9a22ecb 100644
--- a/api/src/drivers/driver.interface.ts
+++ b/api/src/drivers/driver.interface.ts
@@ -24,7 +24,11 @@ export interface Driver {
   ): Promise<any[]>;
   getTableData(
     credentials: Credentials,
-    args: WithSortPagination<{ tableName: string; dbName: string }>,
+    args: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ): Promise<{
     count: number;
     data: Record<string, any>[];
diff --git a/api/src/drivers/postgres.ts b/api/src/drivers/postgres.ts
index 6865dae..37cead4 100644
--- a/api/src/drivers/postgres.ts
+++ b/api/src/drivers/postgres.ts
@@ -159,22 +159,31 @@ export class PostgresDriver implements Driver {
       page,
       sortDesc,
       sortField,
-    }: WithSortPagination<{ tableName: string; dbName: string }>,
+      whereQuery,
+    }: WithSortPagination<{
+      tableName: string;
+      dbName: string;
+      whereQuery?: string;
+    }>,
   ) {
     const sql = await this.queryRunner(credentials);
 
     const offset = (perPage * page).toString();
-    const rows = sql`
-    SELECT COUNT(*)
-    FROM ${sql(dbName)}.${sql(tableName)}`;
 
-    const tables = sql`
+    const rowsQuery = `
+    SELECT COUNT(*)
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}`;
+
+    const tablesQuery = `
     SELECT *
-    FROM ${sql(dbName)}.${sql(tableName)}
-    ${sortField ? sql`ORDER BY ${sql(sortField)} ${sortDesc ? sql`DESC` : sql`ASC`}` : sql``}
+    FROM "${dbName}"."${tableName}"
+    ${whereQuery ? `WHERE ${whereQuery}` : ""}
+    ${sortField ? `ORDER BY "${sortField}" ${sortDesc ? "DESC" : "ASC"}` : ""}
     LIMIT ${perPage} OFFSET ${offset}
     `;
-
+    const rows = sql.unsafe(rowsQuery);
+    const tables = sql.unsafe(tablesQuery);
     const [[count], data] = await Promise.all([rows, tables]);
 
     void sql.end();
diff --git a/api/src/index.ts b/api/src/index.ts
index 6d84db6..adc2889 100644
--- a/api/src/index.ts
+++ b/api/src/index.ts
@@ -95,7 +95,13 @@ const app = new Elysia({ prefix: "/api" })
     "/databases/:dbName/tables/:tableName/data",
     async ({ query, params, jwt, set, cookie: { auth } }) => {
       const { tableName, dbName } = params;
-      const { perPage = "50", page = "0", sortField, sortDesc } = query;
+      const {
+        perPage = "50",
+        page = "0",
+        sortField,
+        sortDesc,
+        whereQuery,
+      } = query;
       const credentials = await jwt.verify(auth.value);
 
       if (!credentials) {
@@ -111,6 +117,7 @@ const app = new Elysia({ prefix: "/api" })
         page: Number.parseInt(page, 10),
         sortField,
         sortDesc: sortDesc === "true",
+        whereQuery,
       });
     },
   )
diff --git a/frontend/src/components/db-table-view/data-table.tsx b/frontend/src/components/db-table-view/data-table.tsx
index e0d7ae7..cb7b91c 100644
--- a/frontend/src/components/db-table-view/data-table.tsx
+++ b/frontend/src/components/db-table-view/data-table.tsx
@@ -5,12 +5,14 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  FormInput,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
 } from "@/components/ui";
 import { cn, isImageUrl, isUrl } from "@/lib/utils";
 import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
@@ -25,8 +27,9 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ArrowUp, Rows3 } from "lucide-react";
+import { ArrowUp, Info, Rows3, Search } from "lucide-react";
 import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
 
 export const DataTable = ({
   tableName,
@@ -43,14 +46,16 @@ export const DataTable = ({
   onPageIndexChange: (pageIndex: number) => void;
   onPageSizeChange: (pageSize: number) => void;
 }) => {
+  const whereQueryForm = useForm<{ whereQuery: string }>();
   const formatDates = useSettingsStore.use.formatDates();
   const showImagesPreview = useSettingsStore.use.showImagesPreview();
-
+  const [whereQuery, setWhereQuery] = useState("");
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 
   const { data: details } = useTableColumnsQuery({ dbName, tableName });
-  const { data } = useTableDataQuery({
+  const { data, refetch } = useTableDataQuery({
+    whereQuery,
     tableName,
     dbName,
     perPage: pageSize,
@@ -58,7 +63,6 @@ export const DataTable = ({
     sortDesc: sorting[0]?.desc,
     sortField: sorting[0]?.id,
   });
-
   const paginationUpdater: OnChangeFn<PaginationState> = (args) => {
     if (typeof args === "function") {
       const newArgs = args({
@@ -87,7 +91,7 @@ export const DataTable = ({
         return (
           <div
             className={cn(
-              "whitespace-nowrap",
+              "whitespace-nowrap ",
               data_type === "integer" && "text-right",
             )}
           >
@@ -170,6 +174,37 @@ export const DataTable = ({
       <div className={"flex gap-4 items-center justify-between"}>
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Rows3 /> {tableName}
+          <form
+            className={"flex gap-2"}
+            onSubmit={whereQueryForm.handleSubmit((data) => {
+              if (data.whereQuery === whereQuery) {
+                void refetch();
+                return;
+              }
+              setWhereQuery(data.whereQuery);
+            })}
+          >
+            <FormInput
+              name={"whereQuery"}
+              control={whereQueryForm.control}
+              placeholder="WHERE clause"
+            />
+            <Button variant={"outline"} size={"icon"} type={"submit"}>
+              <Search className={"size-[1.2rem] shrink-0"} />
+            </Button>
+            <Tooltip
+              content={
+                <div>
+                  Your input will be prefixed with WHERE and appended to the raw
+                  SQL query.
+                  <div>You can use AND, OR, NOT, BETWEEN, LIKE, =, etc.</div>
+                  <div>To remove the WHERE clause, submit an empty input.</div>
+                </div>
+              }
+            >
+              <Info className={"size-4 shrink-0 cursor-help"} />
+            </Tooltip>
+          </form>
         </h1>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -227,6 +262,7 @@ export const DataTable = ({
                         <Button
                           variant="ghost"
                           onClick={header.column.getToggleSortingHandler()}
+                          className={"select-text"}
                           title={
                             header.column.getNextSortingOrder() === "asc"
                               ? "Sort ascending"
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 98ab095..e3d50df 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -15,5 +15,6 @@ export * from "./sql-data-table-cell";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./toggle";
 export * from "./toggle-group";
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 2ab0aea..d86e9bc 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,21 +1,39 @@
 import { Label } from "@/components/ui/label";
 import { useAutoId } from "@/hooks";
 import { cn } from "@/lib/utils";
-import { type InputHTMLAttributes, forwardRef } from "react";
+import {
+  type ChangeEvent,
+  type InputHTMLAttributes,
+  forwardRef,
+  memo,
+  useCallback,
+} from "react";
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   errorMessage?: string;
+  onValueChange?: (value: string) => void;
 }
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, id, errorMessage, ...props }, ref) => {
+const RawInput = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, label, id, onValueChange, onChange, errorMessage, ...props },
+    ref,
+  ) => {
     const finalId = useAutoId(id);
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+      },
+      [onValueChange, onChange],
+    );
 
     return (
       <div className={"grid gap-1.5"}>
         {!!label && <Label htmlFor={finalId}>{label}</Label>}
         <input
+          onChange={handleChange}
           id={finalId}
           className={cn(
             "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
@@ -31,6 +49,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   },
 );
-Input.displayName = "Input";
+RawInput.displayName = "Input";
+
+const Input = memo(RawInput);
+Input.displayName = "MemoizedInput";
 
 export { Input };
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..55409f8
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,58 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 100,
+  disableHoverableContent,
+  ...props
+}: Omit<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+  "content"
+> & {
+  content: React.ReactNode;
+}) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+        disableHoverableContent={disableHoverableContent}
+      >
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipContent {...props}>{content}</TooltipContent>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/frontend/src/services/db/db.service.ts b/frontend/src/services/db/db.service.ts
index e6a03b9..d6cdc3a 100644
--- a/frontend/src/services/db/db.service.ts
+++ b/frontend/src/services/db/db.service.ts
@@ -17,6 +17,8 @@ import type {
   TableForeignKeys,
   TableIndexes,
 } from "@/services/db/db.types";
+import { HTTPError } from "ky";
+import { toast } from "sonner";
 
 class DbService {
   login(data: LoginArgs) {
@@ -44,12 +46,29 @@ class DbService {
     perPage,
     sortField,
     sortDesc,
+    whereQuery,
   }: GetTableDataArgs) {
     return dbInstance
       .get(`api/databases/${dbName}/tables/${tableName}/data`, {
-        searchParams: getValuable({ perPage, page, sortField, sortDesc }),
+        searchParams: getValuable({
+          perPage,
+          page,
+          sortField,
+          sortDesc,
+          whereQuery,
+        }),
       })
-      .json<GetTableDataResponse>();
+      .json<GetTableDataResponse>()
+      .catch(async (error) => {
+        if (error instanceof HTTPError) {
+          const errorJson = await error.response.json();
+          console.log(errorJson);
+          toast.error(errorJson.message);
+        } else {
+          toast.error(error.message);
+        }
+        return { count: 0, data: [] };
+      });
   }
 
   getTableColumns({ dbName, tableName }: GetTableColumnsArgs) {
diff --git a/frontend/src/services/db/db.types.ts b/frontend/src/services/db/db.types.ts
index b59fd7d..c14e3fc 100644
--- a/frontend/src/services/db/db.types.ts
+++ b/frontend/src/services/db/db.types.ts
@@ -47,6 +47,7 @@ export type GetTableDataArgs = {
   page?: number;
   sortField?: string;
   sortDesc?: boolean;
+  whereQuery?: string;
 };
 
 export type GetTableDataResponse = {