feat: display runs and create run and update run endpoint

web/src/components/LoadingIcon.tsx

@@ -0,0 +1,7 @@
+"use client";
+import { LoaderIcon } from "lucide-react";
+import * as React from "react";
+
+export function LoadingIcon() {
+  return <LoaderIcon size={14} className="ml-2 animate-spin" />;
+}

web/src/components/MachineList.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { getRelativeTime } from "../lib/getRelativeTime";
+import { LoadingIcon } from "./LoadingIcon";
 import {
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -23,15 +23,12 @@ import {
 } from "@/components/ui/dialog";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Table,
   TableBody,
@@ -41,7 +38,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { addMachine, deleteMachine } from "@/server/curdMachine";
-import { deleteWorkflow } from "@/server/deleteWorkflow";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type {
   ColumnDef,
@@ -57,14 +53,8 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import {
-  ArrowUpDown,
-  ChevronDown,
-  LoaderIcon,
-  MoreHorizontal,
-} from "lucide-react";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import * as React from "react";
-import { useFormStatus } from "react-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -145,7 +135,9 @@ export const columns: ColumnDef<Machine>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="capitalize text-right">{getRelativeTime(row.original.date)}</div>
+      <div className="capitalize text-right">
+        {getRelativeTime(row.original.date)}
+      </div>
     ),
   },
 
@@ -187,7 +179,7 @@ export const columns: ColumnDef<Machine>[] = [
 export function MachineList({ data }: { data: Machine[] }) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    [],
+    []
   );
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
@@ -265,7 +257,7 @@ export function MachineList({ data }: { data: Machine[] }) {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </TableHead>
                   );
@@ -284,7 +276,7 @@ export function MachineList({ data }: { data: Machine[] }) {
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </TableCell>
                   ))}
@@ -418,8 +410,7 @@ function AddWorkflowButton({ pending }: { pending: boolean }) {
   // const { pending } = useFormStatus();
   return (
     <Button type="submit" disabled={pending}>
-      Save changes{" "}
-      {pending && <LoaderIcon size={14} className="ml-2 animate-spin" />}
+      Save changes {pending && <LoadingIcon />}
     </Button>
   );
 }

web/src/components/VersionSelect.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { findFirstTableWithVersion } from "@/app/[workflow_id]/page";
+import type { findFirstTableWithVersion } from "@/app/[workflow_id]/page";
+import { LoadingIcon } from "@/components/LoadingIcon";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -10,15 +12,26 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { getMachines } from "@/server/curdMachine";
+import type { getMachines } from "@/server/curdMachine";
+import { Play } from "lucide-react";
+import { parseAsInteger, useQueryState } from "next-usequerystate";
+import { useState } from "react";
 
 export function VersionSelect({
   workflow,
 }: {
   workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
 }) {
+  const [version, setVersion] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version?.toString() ?? "",
+  });
   return (
-    <Select defaultValue={workflow?.versions[0].version?.toString()}>
+    <Select
+      value={version}
+      onValueChange={(v) => {
+        setVersion(v);
+      }}
+    >
       <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Select a version" />
       </SelectTrigger>
@@ -26,7 +39,7 @@ export function VersionSelect({
         <SelectGroup>
           <SelectLabel>Versions</SelectLabel>
           {workflow?.versions.map((x) => (
-            <SelectItem value={x.version?.toString() ?? ""}>
+            <SelectItem key={x.id} value={x.version?.toString() ?? ""}>
               {x.version}
             </SelectItem>
           ))}
@@ -36,28 +49,76 @@ export function VersionSelect({
   );
 }
 
-
 export function MachineSelect({
-    machines,
-  }: {
-    machines: Awaited<ReturnType<typeof getMachines>>;
-  }) {
-    return (
-      <Select defaultValue={machines[0].id}>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Select a version" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Versions</SelectLabel>
-            {machines?.map((x) => (
-              <SelectItem value={x.id ?? ""}>
-                {x.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    );
-  }
-  
+  machines,
+}: {
+  machines: Awaited<ReturnType<typeof getMachines>>;
+}) {
+  const [machine, setMachine] = useQueryState("machine", {
+    defaultValue: machines[0].id ?? "",
+  });
+  return (
+    <Select
+      value={machine}
+      onValueChange={(v) => {
+        setMachine(v);
+      }}
+    >
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a version" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Versions</SelectLabel>
+          {machines?.map((x) => (
+            <SelectItem key={x.id} value={x.id ?? ""}>
+              {x.name}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function RunWorkflowButton({
+  workflow,
+  machines,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+  machines: Awaited<ReturnType<typeof getMachines>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const [machine] = useQueryState("machine", {
+    defaultValue: machines[0].id ?? "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <Button
+      className="gap-2"
+      disabled={isLoading}
+      onClick={async () => {
+        setIsLoading(true);
+        try {
+          await fetch(`/api/create-run`, {
+            method: "POST",
+            body: JSON.stringify({
+              workflow_version_id: workflow?.versions.find(
+                (x) => x.version === version
+              )?.id,
+              machine_id: machine,
+            }),
+          });
+          setIsLoading(false);
+        } catch (error) {
+          setIsLoading(false);
+        }
+      }}
+    >
+      Run <Play size={14} /> {isLoading && <LoadingIcon />}
+    </Button>
+  );
+}