update form

Author: jamesholcombe

packages/app/src/actions/data/queries/addComputedColumn.ts

@@ -6,19 +6,31 @@ import { revalidateQueryCache } from "@/lib/dal/queries";
 import { addComputedColumn } from "@/db/crud/query";
 import { ComputedColumn } from "@common/db/schema/query";
 
+import {
+  actionError,
+  actionResult,
+  runActionServer,
+} from "@/lib/actions/utils";
+
 export async function addComputedColumnAction(
   projectId: string,
   queryId: string,
-  column: ComputedColumn,
-): Promise<void> {
-  const user = await getServerUser();
-  const userProject = await getProjectForUser(user, projectId);
+  column: Omit<ComputedColumn, "id">,
+) {
+  return runActionServer(async () => {
+    const user = await getServerUser();
+    const userProject = await getProjectForUser(user, projectId);
+
+    if (!userProject) {
+      return actionError("Project not found");
+    }
 
-  if (!userProject) {
-    throw new Error("Project not found");
-  }
+    const newComputedColumn = await addComputedColumn(queryId, {
+      ...column,
+    });
 
-  await addComputedColumn(queryId, column);
+    revalidateQueryCache(queryId, projectId);
 
-  revalidateQueryCache(queryId, projectId);
+    return actionResult(newComputedColumn);
+  });
 }

packages/app/src/actions/data/queries/updateComputedColumn.ts

@@ -5,21 +5,34 @@ import { getProjectForUser } from "@/lib/dal/projects";
 import { revalidateQueryCache } from "@/lib/dal/queries";
 import { updateComputedColumn } from "@/db/crud/query";
 import { ComputedColumn } from "@common/db/schema/query";
+import {
+  runActionServer,
+  actionError,
+  actionResult,
+} from "@/lib/actions/utils";
 
 export async function updateComputedColumnAction(
   projectId: string,
   queryId: string,
-  columnName: string,
-  column: ComputedColumn,
-): Promise<void> {
-  const user = await getServerUser();
-  const userProject = await getProjectForUser(user, projectId);
+  columnId: string,
+  column: Omit<ComputedColumn, "id">,
+) {
+  return runActionServer(async () => {
+    const user = await getServerUser();
+    const userProject = await getProjectForUser(user, projectId);
 
-  if (!userProject) {
-    throw new Error("Project not found");
-  }
+    if (!userProject) {
+      return actionError("Project not found");
+    }
 
-  await updateComputedColumn(queryId, columnName, column);
+    const updatedComputedColumn = await updateComputedColumn(
+      queryId,
+      columnId,
+      column,
+    );
 
-  revalidateQueryCache(queryId, projectId);
+    revalidateQueryCache(queryId, projectId);
+
+    return actionResult(updatedComputedColumn);
+  });
 }

packages/app/src/components/data/query/query-layout-client.tsx

@@ -59,7 +59,7 @@ function QueryLayoutClient({
           minSize={50}
           maxSize={95}
         >
-          <div className="flex flex-1 flex-col">
+          <div className="flex h-full flex-1 flex-col">
             {/* Header with name input, breadcrumbs, and toggle button */}
             <div className="flex items-center justify-between px-6 py-4">
               <div className="flex items-center gap-4">

packages/app/src/components/data/query/query-sidebar.tsx

@@ -40,6 +40,17 @@ const computedColumnSchema = z.object({
 
 type ComputedColumnFormData = z.infer<typeof computedColumnSchema>;
 
+const defaultFunctionBody = `
+// Enter function body for computed column
+// Examples:
+// Simple: category + '_' + status
+// With logic:
+// if(priority > 3) {
+//   return 'High'
+// }
+// return 'Low'
+`;
+
 type QuerySidebarProps = {
   query: Query;
   projectId: string;
@@ -166,16 +177,15 @@ export function QuerySidebar({
   onClose,
   queryData: _queryData,
 }: QuerySidebarProps) {
-  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
 
   const form = useForm<ComputedColumnFormData>({
     resolver: zodResolver(computedColumnSchema),
     defaultValues: {
       name: "",
-      functionBody:
-        "// Enter function body for computed column\n// Examples:\n// Simple: category + '_' + status\n// With logic:\n// if(priority > 3) {\n//   return 'High'\n// }\n// return 'Low'",
+      functionBody: defaultFunctionBody,
     },
   });
 
@@ -184,62 +194,60 @@ export function QuerySidebar({
 
   // Set default column on component load
   useEffect(() => {
-    if (hasComputedColumns && !selectedColumn) {
+    if (hasComputedColumns && !selectedColumnId) {
       const firstColumn = query.computedColumns[0];
       handleEditColumn(firstColumn);
     }
-  }, [hasComputedColumns, selectedColumn]);
+  }, [hasComputedColumns, selectedColumnId]);
 
   const handleEditColumn = (column: ComputedColumn) => {
-    setSelectedColumn(column.name);
+    setSelectedColumnId(column.id);
     form.reset({
       name: column.name,
       functionBody: column.functionBody,
     });
   };
 
   const handleNewColumn = async () => {
-    const defaultBody =
-      "// Enter function body for computed column\n// Examples:\n// Simple: category + '_' + status\n// With logic:\n// if(priority > 3) {\n//   return 'High'\n// }\n// return 'Low'";
-
     setIsCreating(true);
-    try {
-      // Create new column in database
-      await addComputedColumnAction(projectId, query.id, {
-        name: "Untitled",
-        functionBody: defaultBody,
-      });
 
-      // Select the newly created column
-      const newColumn = {
-        name: "Untitled",
-        functionBody: defaultBody,
-      };
+    // Create new column in database
+    const result = await addComputedColumnAction(projectId, query.id, {
+      name: "Untitled",
+      functionBody: defaultFunctionBody,
+    });
+
+    if (!result.success) {
+      console.error("Failed to create new column:", result.error);
+      return;
+    } else {
+      const newColumn = result.data;
       handleEditColumn(newColumn);
-    } catch (error) {
-      console.error("Failed to create new column:", error);
-    } finally {
-      setIsCreating(false);
     }
+
+    setIsCreating(false);
   };
 
   const handleCancelEdit = () => {
-    setSelectedColumn(null);
+    setSelectedColumnId(null);
     form.reset();
   };
 
-  const handleDeleteColumn = async (columnName: string) => {
+  const handleDeleteColumn = async (columnId: string) => {
+    const column = query.computedColumns.find((col) => col.id === columnId);
+    if (!column) return;
+
     if (
       confirm(
-        `Are you sure you want to delete the computed column "${columnName}"?`,
+        `Are you sure you want to delete the computed column "${column.name}"?`,
       )
     ) {
       try {
-        await deleteComputedColumnAction(projectId, query.id, columnName);
-        console.log("Deleted computed column:", columnName);
+        await deleteComputedColumnAction(projectId, query.id, columnId);
+        console.log("Deleted computed column:", column.name);
 
         // Clear form after successful deletion
-        setSelectedColumn(null);
+        setSelectedColumnId(null);
         form.reset();
       } catch (error) {
         console.error("Failed to delete computed column:", error);
@@ -249,36 +257,39 @@ export function QuerySidebar({
 
   const onSubmit = async (data: ComputedColumnFormData) => {
     setIsSubmitting(true);
-    try {
-      if (selectedColumn) {
-        await updateComputedColumnAction(projectId, query.id, selectedColumn, {
+
+    if (selectedColumnId) {
+      const result = await updateComputedColumnAction(
+        projectId,
+        query.id,
+        selectedColumnId,
+        {
           name: data.name.trim(),
           functionBody: data.functionBody.trim(),
-        });
-        // After updating, select the updated column
-        const updatedColumn = query.computedColumns.find(
-          (col) => col.name === selectedColumn,
-        );
-        if (updatedColumn) {
-          handleEditColumn(updatedColumn);
-        }
+        },
+      );
+
+      if (!result.success) {
+        console.error("Failed to update computed column:", result.error);
+        return;
       } else {
-        await addComputedColumnAction(projectId, query.id, {
-          name: data.name.trim(),
-          functionBody: data.functionBody.trim(),
-        });
-        // After adding, select the newly created column
-        const newColumn = {
-          name: data.name.trim(),
-          functionBody: data.functionBody.trim(),
-        };
-        handleEditColumn(newColumn);
+        handleEditColumn(result.data);
+      }
+    } else {
+      const result = await addComputedColumnAction(projectId, query.id, {
+        name: data.name.trim(),
+        functionBody: data.functionBody.trim(),
+      });
+
+      if (!result.success) {
+        console.error("Failed to add computed column:", result.error);
+        return;
+      } else {
+        handleEditColumn(result.data);
       }
-    } catch (error) {
-      console.error("Failed to save computed column:", error);
-    } finally {
-      setIsSubmitting(false);
     }
+
+    setIsSubmitting(false);
   };
 
   return (
@@ -309,18 +320,18 @@ export function QuerySidebar({
                   <Select
                     onValueChange={(value) => {
                       const column = query.computedColumns.find(
-                        (col) => col.name === value,
+                        (col) => col.id === value,
                       );
                       if (column) handleEditColumn(column);
                     }}
-                    value={selectedColumn || ""}
+                    value={selectedColumnId || ""}
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select column" />
                     </SelectTrigger>
                     <SelectContent>
                       {query.computedColumns.map((column) => (
-                        <SelectItem key={column.name} value={column.name}>
+                        <SelectItem key={column.id} value={column.id}>
                           {column.name}
                         </SelectItem>
                       ))}
@@ -390,24 +401,25 @@ export function QuerySidebar({
 
               {/* Action Buttons */}
               <div className="flex gap-2">
-                {selectedColumn && (
+                {selectedColumnId && (
                   <Button
                     type="button"
                     variant="outline"
                     size="sm"
                     onClick={handleCancelEdit}
                     className="flex items-center gap-2"
+                    disabled={!form.formState.isDirty}
                   >
                     Cancel
                   </Button>
                 )}
 
-                {selectedColumn && (
+                {selectedColumnId && (
                   <Button
                     type="button"
                     variant="outline"
                     size="sm"
-                    onClick={() => handleDeleteColumn(selectedColumn)}
+                    onClick={() => handleDeleteColumn(selectedColumnId)}
                     className="flex items-center gap-2 text-destructive hover:bg-destructive/10 hover:text-destructive"
                   >
                     <Trash2 className="h-4 w-4" />
@@ -419,7 +431,11 @@ export function QuerySidebar({
                   type="submit"
                   variant="default"
                   size="sm"
-                  disabled={isSubmitting || !form.formState.isValid}
+                  disabled={
+                    isSubmitting ||
+                    !form.formState.isValid ||
+                    !form.formState.isDirty
+                  }
                   className="flex items-center gap-2"
                 >
                   <Save className="h-4 w-4" />