From a80a692d916fd9b77d8ae3626dec1c860098e1d5 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Fri, 6 Dec 2024 17:48:12 -0600
Subject: [PATCH] feat: set api key inputs to be type password in model
 provider form - updates NameDescriptionForm to accept prop overrides for it's
 fields

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 ui/admin/app/components/composed/NameDescriptionForm.tsx   | 7 +++++++
 .../app/components/model-providers/ModelProviderForm.tsx   | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/ui/admin/app/components/composed/NameDescriptionForm.tsx b/ui/admin/app/components/composed/NameDescriptionForm.tsx
index 9a2a443e9..ad744e264 100644
--- a/ui/admin/app/components/composed/NameDescriptionForm.tsx
+++ b/ui/admin/app/components/composed/NameDescriptionForm.tsx
@@ -7,6 +7,7 @@ import { z } from "zod";
 import { ControlledInput } from "~/components/form/controlledInputs";
 import { Button } from "~/components/ui/button";
 import { Form } from "~/components/ui/form";
+import { InputProps } from "~/components/ui/input";
 
 const formSchema = z.object({
     params: z.array(
@@ -28,10 +29,14 @@ export function NameDescriptionForm({
     defaultValues,
     onChange,
     addLabel = "Add",
+    nameFieldProps,
+    descriptionFieldProps,
 }: {
     defaultValues: Item[];
     onChange: (values: Item[]) => void;
     addLabel?: string;
+    nameFieldProps?: InputProps;
+    descriptionFieldProps?: InputProps;
 }) {
     const form = useForm<ParamFormValues>({
         resolver: zodResolver(formSchema),
@@ -63,6 +68,7 @@ export function NameDescriptionForm({
                         key={field.id}
                     >
                         <ControlledInput
+                            {...nameFieldProps}
                             control={form.control}
                             name={`params.${i}.name`}
                             placeholder="Name"
@@ -70,6 +76,7 @@ export function NameDescriptionForm({
                         />
 
                         <ControlledInput
+                            {...descriptionFieldProps}
                             control={form.control}
                             name={`params.${i}.description`}
                             placeholder="Description"
diff --git a/ui/admin/app/components/model-providers/ModelProviderForm.tsx b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
index a63a86e62..cdbb6559e 100644
--- a/ui/admin/app/components/model-providers/ModelProviderForm.tsx
+++ b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
@@ -223,6 +223,7 @@ export function ModelProviderForm({
                                             )}
                                             control={form.control}
                                             name={`requiredConfigParams.${i}.value`}
+                                            type="password"
                                             classNames={{
                                                 wrapper:
                                                     "flex-auto bg-background",
@@ -265,6 +266,7 @@ export function ModelProviderForm({
                         : null}
                 </div>
                 <NameDescriptionForm
+                    descriptionFieldProps={{ type: "password" }}
                     defaultValues={form.watch("additionalConfirmParams")}
                     onChange={(values) =>
                         form.setValue("additionalConfirmParams", values)