From 8549121cfebeba161050b82f67040755c8982d36 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Mon, 6 Jan 2025 13:35:53 -0600
Subject: [PATCH] enhance: workflow params form default to empty

- remove default value for workflow params form
- update style for name/description form

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 .../composed/NameDescriptionForm.tsx          | 44 ++++++++++++-------
 .../app/components/workflow/ParamsForm.tsx    |  3 +-
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/ui/admin/app/components/composed/NameDescriptionForm.tsx b/ui/admin/app/components/composed/NameDescriptionForm.tsx
index 0e66e6199..f39f45a58 100644
--- a/ui/admin/app/components/composed/NameDescriptionForm.tsx
+++ b/ui/admin/app/components/composed/NameDescriptionForm.tsx
@@ -4,8 +4,11 @@ import { useEffect } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { cn } from "~/lib/utils";
+
 import { ControlledInput } from "~/components/form/controlledInputs";
 import { Button } from "~/components/ui/button";
+import { Card } from "~/components/ui/card";
 import { Form } from "~/components/ui/form";
 import { InputProps } from "~/components/ui/input";
 
@@ -31,12 +34,14 @@ export function NameDescriptionForm({
     addLabel = "Add",
     nameFieldProps,
     descriptionFieldProps,
+    asCard = false,
 }: {
     defaultValues: Item[];
     onChange: (values: Item[]) => void;
     addLabel?: string;
     nameFieldProps?: InputProps;
     descriptionFieldProps?: InputProps;
+    asCard?: boolean;
 }) {
     const form = useForm<ParamFormValues>({
         resolver: zodResolver(formSchema),
@@ -59,14 +64,19 @@ export function NameDescriptionForm({
         return () => subscription.unsubscribe();
     }, [form, onChange]);
 
+    const Comp = asCard ? Card : "div";
+    const isEmpty = paramFields.fields.length === 0;
+
     return (
         <Form {...form}>
-            <div className="flex flex-col gap-4">
+            <Comp
+                className={cn("flex flex-col gap-4 fade-in-50", {
+                    "p-4": asCard,
+                    hidden: isEmpty,
+                })}
+            >
                 {paramFields.fields.map((field, i) => (
-                    <div
-                        className="flex gap-2 p-2 bg-secondary rounded-md"
-                        key={field.id}
-                    >
+                    <div className="flex gap-2" key={field.id}>
                         <ControlledInput
                             placeholder="Name"
                             {...nameFieldProps}
@@ -93,19 +103,19 @@ export function NameDescriptionForm({
                         </Button>
                     </div>
                 ))}
+            </Comp>
 
-                <Button
-                    variant="ghost"
-                    className="self-end"
-                    startContent={<PlusIcon />}
-                    type="button"
-                    onClick={() =>
-                        paramFields.append({ name: "", description: "" })
-                    }
-                >
-                    {addLabel}
-                </Button>
-            </div>
+            <Button
+                variant="ghost"
+                className="self-end"
+                startContent={<PlusIcon />}
+                type="button"
+                onClick={() =>
+                    paramFields.append({ name: "", description: "" })
+                }
+            >
+                {addLabel}
+            </Button>
         </Form>
     );
 }
diff --git a/ui/admin/app/components/workflow/ParamsForm.tsx b/ui/admin/app/components/workflow/ParamsForm.tsx
index 2da765c84..85473eeb4 100644
--- a/ui/admin/app/components/workflow/ParamsForm.tsx
+++ b/ui/admin/app/components/workflow/ParamsForm.tsx
@@ -14,7 +14,7 @@ const convertFrom = (params: ParamValues) => {
         })
     );
 
-    return converted.length ? converted : [{ name: "", description: "" }];
+    return converted.length ? converted : [];
 };
 
 const convertTo = (
@@ -44,6 +44,7 @@ export function ParamsForm({
 
     return (
         <NameDescriptionForm
+            asCard
             addLabel="Add Parameter"
             defaultValues={defaultValues}
             onChange={(values) => onChange?.({ params: convertTo(values) })}