Improve run workflow form (#1032)

skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx

@@ -1,5 +1,11 @@
 import { getClient } from "@/api/AxiosClient";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
@@ -8,14 +14,6 @@ import { WorkflowParameterInput } from "./WorkflowParameterInput";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
 import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { ToastAction } from "@radix-ui/react-toast";
 import fetchToCurl from "fetch-to-curl";
 import { apiBaseUrl } from "@/util/env";
@@ -115,24 +113,11 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
   }
 
   return (
-    <div>
     <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form
-          <Table>
+        onSubmit={form.handleSubmit(onSubmit)}
-            <TableHeader className="bg-slate-elevation2 text-slate-400 [&_tr]:border-b-0">
+        className="space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5"
-              <TableRow className="rounded-lg px-6 [&_th:first-child]:pl-6 [&_th]:py-4">
+      >
-                <TableHead className="w-1/3 text-sm text-slate-400">
-                  Parameter Name
-                </TableHead>
-                <TableHead className="w-1/3 text-sm text-slate-400">
-                  Description
-                </TableHead>
-                <TableHead className="w-1/3 text-sm text-slate-400">
-                  Input
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
         {workflowParameters?.map((parameter) => {
           return (
             <FormField
@@ -159,17 +144,22 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
               }}
               render={({ field }) => {
                 return (
-                        <TableRow className="[&_td:first-child]:pl-6 [&_td:last-child]:pr-6 [&_td]:py-4">
-                          <TableCell className="w-1/3">
-                            <div className="flex h-8 w-fit items-center rounded-sm bg-slate-elevation3 p-3">
-                              {parameter.key}
-                            </div>
-                          </TableCell>
-                          <TableCell className="w-1/3">
-                            <div>{parameter.description}</div>
-                          </TableCell>
-                          <TableCell className="w-1/3">
                   <FormItem>
+                    <div className="flex gap-16">
+                      <FormLabel>
+                        <div className="w-72">
+                          <div className="flex items-center gap-2 text-lg">
+                            {parameter.key}
+                            <span className="text-sm text-slate-400">
+                              {parameter.workflow_parameter_type}
+                            </span>
+                          </div>
+                          <h2 className="text-sm text-slate-400">
+                            {parameter.description}
+                          </h2>
+                        </div>
+                      </FormLabel>
+                      <div className="w-full space-y-2">
                         <FormControl>
                           <WorkflowParameterInput
                             type={parameter.workflow_parameter_type}
@@ -179,22 +169,20 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
                         </FormControl>
                         {form.formState.errors[parameter.key] && (
                           <div className="text-destructive">
-                                  {
+                            {form.formState.errors[parameter.key]?.message}
-                                    form.formState.errors[parameter.key]
-                                      ?.message
-                                  }
                           </div>
                         )}
+                      </div>
+                    </div>
                   </FormItem>
-                          </TableCell>
-                        </TableRow>
                 );
               }}
             />
           );
         })}
-            </TableBody>
+        {workflowParameters.length === 0 && (
-          </Table>
+          <div>No workflow parameters for this workflow.</div>
+        )}
         <div className="flex justify-end gap-2">
           <Button
             type="button"
@@ -241,7 +229,6 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
         </div>
       </form>
     </Form>
-    </div>
   );
 }
 

skyvern-frontend/src/routes/workflows/WorkflowParameterInput.tsx

@@ -16,11 +16,14 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
   if (type === "json") {
     return (
       <CodeEditor
+        className="w-full"
         language="json"
         onChange={(value) => onChange(value)}
         value={
           typeof value === "string" ? value : JSON.stringify(value, null, 2)
         }
+        minHeight="96px"
+        maxHeight="500px"
       />
     );
   }
@@ -37,7 +40,7 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
   if (type === "integer") {
     return (
       <Input
-        value={value as number}
+        value={value === null ? "" : Number(value)}
         onChange={(e) => onChange(parseInt(e.target.value))}
         type="number"
       />
@@ -47,7 +50,7 @@ function WorkflowParameterInput({ type, value, onChange }: Props) {
   if (type === "float") {
     return (
       <Input
-        value={value as number}
+        value={value === null ? "" : Number(value)}
         onChange={(e) => onChange(parseFloat(e.target.value))}
         type="number"
         step="any"

skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx

@@ -3,27 +3,8 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useQuery } from "@tanstack/react-query";
 import { useLocation, useParams } from "react-router-dom";
 import { RunWorkflowForm } from "./RunWorkflowForm";
-import {
+import { WorkflowApiResponse } from "./types/workflowTypes";
-  WorkflowApiResponse,
+import { Skeleton } from "@/components/ui/skeleton";
-  WorkflowParameterValueType,
-} from "./types/workflowTypes";
-
-function defaultValue(type: WorkflowParameterValueType) {
-  switch (type) {
-    case "string":
-      return "";
-    case "integer":
-      return 0;
-    case "float":
-      return 0.0;
-    case "boolean":
-      return false;
-    case "json":
-      return null;
-    case "file_url":
-      return null;
-  }
-}
 
 function WorkflowRunParameters() {
   const credentialGetter = useCredentialGetter();
@@ -65,18 +46,36 @@ function WorkflowRunParameters() {
             acc[curr.key] = Boolean(curr.default_value);
             return acc;
           }
+          if (
+            curr.default_value === null &&
+            curr.workflow_parameter_type === "string"
+          ) {
+            acc[curr.key] = "";
+            return acc;
+          }
           if (curr.default_value) {
             acc[curr.key] = curr.default_value;
             return acc;
           }
-          acc[curr.key] = defaultValue(curr.workflow_parameter_type);
+          acc[curr.key] = null;
           return acc;
         },
         {} as Record<string, unknown>,
       );
 
   if (isFetching) {
-    return <div>Getting workflow parameters...</div>;
+    return (
+      <div className="space-y-8">
+        <header className="space-y-5">
+          <h1 className="text-3xl">Run Parameters</h1>
+          <h2 className="text-lg text-slate-400">
+            Fill the placeholder values that you have linked throughout your
+            workflow.
+          </h2>
+        </header>
+        <Skeleton className="h-96 w-full" />
+      </div>
+    );
   }
 
   if (!workflow || !workflowParameters || !initialValues) {

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx

@@ -220,7 +220,9 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
                 parameterType: "workflow",
                 dataType: parameterType,
                 description,
-                defaultValue: defaultValue,
+                defaultValue: defaultValueState.hasDefaultValue
+                  ? defaultValue
+                  : null,
               });
             }
             if (type === "credential") {

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx

@@ -253,7 +253,9 @@ function WorkflowParameterEditPanel({
                 parameterType: "workflow",
                 dataType: parameterType,
                 description,
-                defaultValue: defaultValue,
+                defaultValue: defaultValueState.hasDefaultValue
+                  ? defaultValue
+                  : null,
               });
             }
             if (type === "credential") {