Refactor/rows

cmd/server/update.go

@@ -12,7 +12,7 @@ import (
 
 func runAutoUpdate(cmd string, currentVersion string, disableAutoUpdate bool) error {
 	if disableAutoUpdate {
-		logger.Info("Auto-update disabled using DISABLE_AUTO_UPDATE=true")
+		logger.Info("Auto-update disabled using disable_auto_update: true in config file")
 		return nil
 	}
 
@@ -21,7 +21,7 @@ func runAutoUpdate(cmd string, currentVersion string, disableAutoUpdate bool) er
 		return nil
 	}
 
-	logger.Info("Checking for updates...You can disable auto-update by setting DISABLE_AUTO_UPDATE=true")
+	logger.Info("Checking for updates...You can disable auto-update by setting disable_auto_update: true in config file")
 
 	repo := selfupdate.ParseSlug("biisal/rowsql")
 

frontend/src/components/tables/DataView.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { SheetClose, SheetFooter } from "@/components/ui/sheet";
+import { useRowContext } from "@/hooks/useRows";
+
+const formatValue = (value: unknown) => {
+  if (typeof value === "string") {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
+  }
+  return value?.toString();
+};
+export const DataView = () => {
+  const {
+    rowDetailsSheetData: rowDetailssheetData,
+    deleteRow,
+    setViewState,
+  } = useRowContext();
+  if (!rowDetailssheetData) return null;
+  const row = rowDetailssheetData.row.columns;
+
+  const handleEdit = () => {
+    setViewState("edit");
+  };
+  return (
+    <>
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="flex flex-col divide-y p-4">
+          {(row || []).map((col) => (
+            <div key={col.columnName} className="flex flex-col gap-1 py-3">
+              <label className="text-xs font-medium text-muted-foreground capitalize">
+                {col.columnName}
+              </label>
+              <div className="font-mono text-sm break-all whitespace-pre-wrap">
+                {(() => {
+                  const value = col.value;
+                  if (value === undefined)
+                    return <p className="text-muted-foreground">-</p>;
+                  if (value === null)
+                    return <p className="text-muted-foreground">null</p>;
+                  return formatValue(value);
+                })()}
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <SheetFooter>
+        <div className="grid grid-cols-2 gap-4">
+          {rowDetailssheetData?.row.hash && (
+            <>
+              <Button
+                variant={"danger"}
+                onClick={() => deleteRow(rowDetailssheetData.row.hash)}
+              >
+                Delete
+              </Button>
+            </>
+          )}
+          <Button onClick={handleEdit}>Edit</Button>
+        </div>
+        <SheetClose asChild>
+          <Button className="w-full" variant={"outline"}>
+            Close
+          </Button>
+        </SheetClose>
+      </SheetFooter>
+    </>
+  );
+};

frontend/src/components/tables/RowDetailsSheet.tsx

@@ -1,89 +1,44 @@
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
-  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
 import { RowUpsertForm } from "@/components/rows/RowUpsertForm";
 import { useRowContext } from "@/hooks/useRows";
+import { DataView } from "@/components/tables/DataView";
 
-const formatValue = (value: unknown) => {
-  if (typeof value === "string") {
-    try {
-      return JSON.stringify(JSON.parse(value), null, 2);
-    } catch {
-      return value;
-    }
-  }
-  return value?.toString();
-};
 export const RowDetailsSheet = () => {
   const {
+    viewState,
     rowDetailsSheetData: rowDetailssheetData,
     setRowDetailsSheetOpen,
     rowDetailsSheetOpen,
-    deleteRow,
+    tableName,
+    closeRowDetails,
   } = useRowContext();
-  if (!rowDetailssheetData) return null;
-  const row = rowDetailssheetData.row.columns;
   return (
-    <Sheet open={rowDetailsSheetOpen} onOpenChange={setRowDetailsSheetOpen}>
+    <Sheet
+      open={rowDetailsSheetOpen}
+      onOpenChange={(open) =>
+        !open ? closeRowDetails() : setRowDetailsSheetOpen(true)
+      }
+    >
       <SheetContent className="flex min-w-[90%] flex-col md:min-w-xl">
         <SheetHeader className="bg-muted-foreground/10">
-          <SheetTitle>{rowDetailssheetData?.tableName}</SheetTitle>
-          <SheetDescription>Viewing record details.</SheetDescription>
+          <SheetTitle>{rowDetailssheetData?.tableName || tableName}</SheetTitle>
+          <SheetDescription>
+            {viewState === "edit"
+              ? "Editing record details."
+              : "Viewing record details."}
+          </SheetDescription>
         </SheetHeader>
 
-        <ScrollArea type="always" className="min-h-0 flex-1">
-          <div className="flex flex-col divide-y p-4">
-            {(row || []).map((col) => (
-              <div key={col.columnName} className="flex flex-col gap-1 py-3">
-                <label className="text-xs font-medium text-muted-foreground capitalize">
-                  {col.columnName}
-                </label>
-                <div className="font-mono text-sm break-all whitespace-pre-wrap">
-                  {(() => {
-                    const value = col.value;
-                    if (value === undefined)
-                      return <p className="text-muted-foreground">-</p>;
-                    if (value === null)
-                      return <p className="text-muted-foreground">null</p>;
-                    return formatValue(value);
-                  })()}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-
-        <SheetFooter>
-          <div className="grid grid-cols-2 gap-4">
-            {rowDetailssheetData?.row.hash && (
-              <>
-                <RowUpsertForm hash={rowDetailssheetData.row.hash}>
-                  <Button className="">Edit</Button>
-                </RowUpsertForm>
-
-                <Button
-                  variant={"danger"}
-                  onClick={() => deleteRow(rowDetailssheetData.row.hash)}
-                >
-                  Delete
-                </Button>
-              </>
-            )}
-          </div>
-          <SheetClose asChild>
-            <Button className="w-full" variant={"outline"}>
-              Close
-            </Button>
-          </SheetClose>
-        </SheetFooter>
+        {viewState === "view" && <DataView />}
+        {viewState === "edit" && (
+          <RowUpsertForm hash={rowDetailssheetData?.row?.hash} />
+        )}
       </SheetContent>
     </Sheet>
   );

frontend/src/components/tables/TableView.tsx

@@ -18,22 +18,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { RowDetailsSheet } from "./RowDetailsSheet";
 import { Input } from "@/components/ui/input";
 import { ChevronRight } from "lucide-react";
 import { useRowContext } from "@/hooks/useRows";
 import { toast } from "sonner";
 import type { RowSet } from "@/client";
 
-interface TableViewProps {
-  tableName: string;
-}
-
 export type RowData = { hash: string } & Record<string, unknown>;
 
-export const TableView = ({ tableName }: TableViewProps) => {
-  const { setRowDetailsSheetOpen, setRowDetailsSheetData, isLoading, data } =
-    useRowContext();
+export const TableView = () => {
+  const { openRowDetails, isLoading, data } = useRowContext();
   const [globalFilter, setGlobalFilter] = useState("");
 
   const columns: ColumnDef<RowData>[] = React.useMemo(
@@ -74,8 +68,8 @@ export const TableView = ({ tableName }: TableViewProps) => {
       toast.error("Row not found");
       return;
     }
-    setRowDetailsSheetData({ row: rowSet, tableName });
-    setRowDetailsSheetOpen(true);
+
+    openRowDetails(rowSet, "view");
   };
   // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
@@ -103,7 +97,6 @@ export const TableView = ({ tableName }: TableViewProps) => {
         className="max-w-sm"
       />
 
-      <RowDetailsSheet />
       <Table>
         <TableCaption>click the row to view complete data</TableCaption>
         <TableHeader>

frontend/src/hooks/useRows.tsx

@@ -21,8 +21,9 @@ export type RowData = { hash: string } & Record<string, unknown>;
 type SheetData = { row: RowSet; tableName: string };
 
 export interface RowContextType {
+  viewState: ViewState;
+  setViewState: Dispatch<SetStateAction<ViewState>>;
   rowDetailsSheetData: SheetData | null;
-  setRowDetailsSheetData: Dispatch<SetStateAction<SheetData | null>>;
   rowDetailsSheetOpen: boolean;
   setRowDetailsSheetOpen: Dispatch<SetStateAction<boolean>>;
   globalFilter: string;
@@ -33,8 +34,12 @@ export interface RowContextType {
   data?: ListRowsResponse;
   page: number;
   rowFetchError: ErrorModel | null;
+  openRowDetails: (row?: RowSet, mode?: ViewState) => void;
+  closeRowDetails: () => void;
 }
 
+type ViewState = "view" | "edit";
+
 const RowContext = createContext<RowContextType | null>(null);
 interface RowProviderProps {
   children: ReactNode;
@@ -45,6 +50,7 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
   const [rowDetailsSheetData, setRowDetailsSheetData] =
     useState<SheetData | null>(null);
   const [rowDetailsSheetOpen, setRowDetailsSheetOpen] = useState(false);
+  const [viewState, setViewState] = useState<ViewState>("view");
   const [globalFilter, setGlobalFilter] = useState("");
 
   const [searchParams] = useSearchParams();
@@ -54,15 +60,27 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
 
   const queryClient = useQueryClient();
 
+  const openRowDetails = (row?: RowSet, mode: ViewState = "view") => {
+    setViewState(mode);
+    setRowDetailsSheetData(row ? { row, tableName } : null);
+    setRowDetailsSheetOpen(true);
+  };
+
+  const closeRowDetails = () => {
+    setRowDetailsSheetOpen(false);
+    // Reset after animation if needed, but for now simple reset
+    setViewState("view");
+    setRowDetailsSheetData(null);
+  };
+
   const deleteMutation = useMutation({
     ...deleteRowMutation(),
     onSuccess: () => {
       toast.success("Row deleted successfully");
       queryClient.invalidateQueries({
         queryKey: listRowsQueryKey({ path: { tableName: tableName! } }),
       });
-      setRowDetailsSheetOpen(false);
-      setRowDetailsSheetData(null);
+      closeRowDetails();
     },
   });
 
@@ -90,8 +108,9 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
   return (
     <RowContext.Provider
       value={{
+        viewState,
+        setViewState,
         rowDetailsSheetData,
-        setRowDetailsSheetData,
         rowDetailsSheetOpen,
         globalFilter,
         setGlobalFilter,
@@ -102,6 +121,8 @@ export const RowProvider = ({ children, tableName }: RowProviderProps) => {
         data,
         rowFetchError,
         page,
+        openRowDetails,
+        closeRowDetails,
       }}
     >
       {children}

frontend/src/pages/TableRows.tsx

@@ -3,12 +3,13 @@ import { AppPagination } from "@/components/shared/AppPagination";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DeleteAlert, RowOrderForm, TableView } from "@/components/tables";
 import { RowProvider, useRowContext } from "@/hooks/useRows";
-import { RowUpsertForm } from "@/components/rows/RowUpsertForm";
+import { Button } from "@/components/ui/button";
+import { RowDetailsSheet } from "@/components/tables/RowDetailsSheet";
 
 function TablePageContent() {
   const { tableName } = useParams<{ tableName: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { page, rowFetchError, data } = useRowContext();
+  const { page, rowFetchError, data, openRowDetails } = useRowContext();
 
   if (!tableName) {
     return (
@@ -32,12 +33,15 @@ function TablePageContent() {
 
   return (
     <div className="flex-1 p-4 md:p-8 overflow-y-auto w-full max-w-full">
+      <RowDetailsSheet />
       <div className="space-y-6">
         <div className="flex items-center justify-between">
           <h1 className="text-3xl font-bold tracking-tight">{tableName}</h1>
           <div className="flex items-center justify-center gap-1">
             <DeleteAlert tableName={tableName} />
-            <RowUpsertForm />
+            <Button onClick={() => openRowDetails(undefined, "edit")}>
+              Insert
+            </Button>
           </div>
         </div>
 
@@ -56,7 +60,7 @@ function TablePageContent() {
             />
           </CardHeader>
           <CardContent className="p-4">
-            <TableView tableName={tableName || ""} />
+            <TableView />
             <div className="flex items-center flex-col sm:flex-row justify-center md:justify-between  py-4">
               <AppPagination
                 currentPage={page}

internal/router/handler.go

@@ -192,8 +192,6 @@ func (h DBHandler) InsertOrUpdateRow(ctx context.Context, input *InsertOrUpdateR
 	}
 	form := input.Body
 
-	logger.Info("Request data: %+v", form)
-
 	pageInt := input.Page
 	hash := strings.TrimSpace(input.Hash)
 
@@ -253,7 +251,6 @@ type CreeteNewTableInput struct {
 
 func (h DBHandler) CreeteNewTable(ctx context.Context, input *CreeteNewTableInput) (*struct{}, error) {
 	req := input.Body
-	logger.Info("Request data: %+v", req)
 	if err := h.service.CreateTable(ctx, req.TableName, req.Inputs); err != nil {
 		logger.Error("%s", err)
 		logger.Error("Failed to create table '%s'", req.TableName)