feat(web): add run inputs options on dashboard

web/src/components/VersionSelect.tsx

@@ -2,7 +2,16 @@
 
 import { callServerPromise } from "./callServerPromise";
 import { LoadingIcon } from "@/components/LoadingIcon";
+import AutoForm, { AutoFormSubmit } from "@/components/ui/auto-form";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,14 +27,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
 import { createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
 import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
 import { Copy, MoreVertical, Play } from "lucide-react";
 import { parseAsInteger, useQueryState } from "next-usequerystate";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
+import { z } from "zod";
 
 export function VersionSelect({
   workflow,
@@ -106,31 +117,95 @@ export function RunWorkflowButton({
     defaultValue: machines[0].id ?? "",
   });
   const [isLoading, setIsLoading] = useState(false);
-  return (
-    <Button
-      className="gap-2"
-      disabled={isLoading}
-      onClick={async () => {
-        const workflow_version_id = workflow?.versions.find(
-          (x) => x.version === version
-        )?.id;
-        if (!workflow_version_id) return;
 
-        setIsLoading(true);
-        try {
-          const origin = window.location.origin;
-          await callServerPromise(
-            createRun(origin, workflow_version_id, machine, undefined, true)
-          );
-          // console.log(res.json());
-          setIsLoading(false);
-        } catch (error) {
-          setIsLoading(false);
-        }
-      }}
-    >
-      Run {isLoading ? <LoadingIcon /> : <Play size={14} />}
-    </Button>
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [open, setOpen] = useState(false);
+
+  const schema = useMemo(() => {
+    const workflow_version = getWorkflowVersionFromVersionIndex(
+      workflow,
+      version
+    );
+    const inputs = getInputsFromWorkflow(workflow_version);
+
+    if (!inputs) return null;
+
+    return z.object({
+      ...Object.fromEntries(
+        inputs?.map((x) => {
+          return [x?.input_id, z.string().optional()];
+        })
+      ),
+    });
+  }, [version]);
+
+  const runWorkflow = async () => {
+    console.log(values);
+
+    const val = Object.keys(values).length > 0 ? values : undefined;
+
+    const workflow_version_id = workflow?.versions.find(
+      (x) => x.version === version
+    )?.id;
+    console.log(workflow_version_id);
+    if (!workflow_version_id) return;
+
+    setIsLoading(true);
+    try {
+      const origin = window.location.origin;
+      await callServerPromise(
+        createRun(origin, workflow_version_id, machine, val, true)
+      );
+      // console.log(res.json());
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
+        <Button className="gap-2" disabled={isLoading}>
+          Run {isLoading ? <LoadingIcon /> : <Play size={14} />}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Run outputs</DialogTitle>
+          <DialogDescription>
+            You can view your run&apos;s outputs here
+          </DialogDescription>
+        </DialogHeader>
+        {/* <div className="max-h-96 overflow-y-scroll"> */}
+        {schema && (
+          <AutoForm
+            formSchema={schema}
+            values={values}
+            onValuesChange={setValues}
+            onSubmit={runWorkflow}
+          >
+            <div className="flex justify-end">
+              <AutoFormSubmit>
+                Run
+                <span className="ml-2">
+                  {isLoading ? <LoadingIcon /> : <Play size={14} />}
+                </span>
+              </AutoFormSubmit>
+            </div>
+          </AutoForm>
+        )}
+        {!schema && (
+          <Button className="gap-2" disabled={isLoading} onClick={runWorkflow}>
+            Confirm {isLoading ? <LoadingIcon /> : <Play size={14} />}
+          </Button>
+        )}
+        {/* </div> */}
+        {/* <div className="max-h-96 overflow-y-scroll">{view}</div> */}
+      </DialogContent>
+    </Dialog>
   );
 }