fix: use nullhclstring

Author: jaaydenh

site/src/DynamicForm.tsx

@@ -115,7 +115,7 @@ export function DynamicForm() {
       response.parameters.forEach((param) => {
         // If the server-sent param.Value is empty, we can fall back to `default_value`
         defaultValues[param.name] =
-          param.value || param.default_value || "";
+          param.value.value || param.default_value.value || "";
       });
 
       // Use RHF's `reset` to update the entire form
@@ -194,7 +194,7 @@ export function DynamicForm() {
                 render={({ field }) => (
                   <Select
                     onValueChange={field.onChange}
-                    defaultValue={param.default_value}
+                    defaultValue={param.default_value.value}
                   >
                     <SelectTrigger className="w-[300px]">
                       <SelectValue placeholder={param.description} />
@@ -204,7 +204,7 @@ export function DynamicForm() {
                         {(param.options || []).map((option, idx) => {
                           if (!option) return null;
                           return (
-                            <SelectItem key={idx} value={option.value}>{option.name}</SelectItem>
+                            <SelectItem key={idx} value={option.value.value}>{option.name}</SelectItem>
                           );
                         })}
                       </SelectGroup>
@@ -237,7 +237,7 @@ export function DynamicForm() {
                         field.onChange(values);
                       }}
                       options={param.options?.map(opt => ({
-                        value: opt?.value || '',
+                        value: opt?.value?.value || '',
                         label: opt?.name || '',
                         disabled: false
                       })) || []}
@@ -264,7 +264,7 @@ export function DynamicForm() {
                   {param.display_name || param.name}
                   {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
                 </label>
-                <output className="text-sm font-medium tabular-nums">{param.value}</output>
+                <output className="text-sm font-medium tabular-nums">{param.value.value}</output>
               </div>
               {param.description && <div className="text-sm">{param.description}</div>}
               <Controller
@@ -290,21 +290,21 @@ export function DynamicForm() {
                   {param.display_name || param.name}
                   {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
                 </label>
-                <output className="text-sm font-medium tabular-nums">{param.value}</output>
+                <output className="text-sm font-medium tabular-nums">{param.value.value}</output>
               </div>
               {param.description && <div className="text-sm">{param.description}</div>}
               <Controller
                 name={param.name}
                 control={methods.control}
                 render={({ field }) => (
                   <div className="w-[300px]">
-                    <RadioGroup defaultValue={param.default_value} onValueChange={field.onChange}>
+                    <RadioGroup defaultValue={param.default_value.value} onValueChange={field.onChange}>
                     {(param.options || []).map((option, idx) => {
                           if (!option) return null;
                           return (
                             <div key={idx} className="flex items-center space-x-2">
-                            <RadioGroupItem value={option.value} id={option.value} />
-                              <Label htmlFor={option.value}>{option.name}</Label>
+                            <RadioGroupItem value={option.value.value} id={option.value.value} />
+                              <Label htmlFor={option.value.value}>{option.name}</Label>
                             </div>
                           );
                         })}
@@ -333,7 +333,7 @@ export function DynamicForm() {
             render={({ field }) => (
               <Select
                 onValueChange={field.onChange}
-                defaultValue={param.value}
+                defaultValue={param.value.value}
               >
                 <SelectTrigger className="w-[300px]">
                   <SelectValue placeholder={param.description} />
@@ -343,7 +343,7 @@ export function DynamicForm() {
                     {(param.options || []).map((option, idx) => {
                       if (!option) return null;
                       return (
-                        <SelectItem key={idx} value={option.value}>{option.name}</SelectItem>
+                        <SelectItem key={idx} value={option.value.value}>{option.name}</SelectItem>
                       );
                     })}
                   </SelectGroup>
@@ -374,7 +374,7 @@ export function DynamicForm() {
                 className="w-[300px]"
                 type={mapParamTypeToInputType(param.type)}
                 value={field.value}
-                defaultValue={param.default_value}
+                defaultValue={param.default_value.value}
               />
             )}
           />