Refactor form initialization to use defaultValues and reset

Updated LLMInstanceForm, SEInstanceForm, SNSiteForm, and StoreInstanceForm to initialize forms using the defaultValues option in useForm and to reset form state with form.reset on value changes. This simplifies the code by removing repetitive setValue calls and ensures form state stays in sync with props.

Author: alegauss

turing-react/src/components/llm/llm.instance.form.tsx

@@ -44,31 +44,16 @@ interface Props {
 }
 
 export const LLMInstanceForm: React.FC<Props> = ({ value, isNew }) => {
-  const form = useForm<TurLLMInstance>();
-  const { setValue } = form;
+  const form = useForm<TurLLMInstance>({
+    defaultValues: value
+  });
+
   const [open, setOpen] = useState(false);
   const navigate = useNavigate()
-  useEffect(() => {
-    setValue("id", value.id)
-    setValue("title", value.title);
-    setValue("description", value.description);
-    setValue("turLLMVendor", value.turLLMVendor);
-    setValue("url", value.url);
-    setValue("modelName", value.modelName);
-    setValue("temperature", value.temperature);
-    setValue("topK", value.topK);
-    setValue("topP", value.topP);
-    setValue("repeatPenalty", value.repeatPenalty);
-    setValue("seed", value.seed);
-    setValue("numPredict", value.numPredict);
-    setValue("stop", value.stop);
-    setValue("responseFormat", value.responseFormat);
-    setValue("supportedCapabilities", value.supportedCapabilities);
-    setValue("timeout", value.timeout);
-    setValue("maxRetries", value.maxRetries);
-    setValue("enabled", value.enabled);
-  }, [setValue, value]);
 
+  useEffect(() => {
+    form.reset(value);
+  }, [value])
 
   function onSubmit(llmInstance: TurLLMInstance) {
     try {

turing-react/src/components/se/se.instance.form.tsx

@@ -42,19 +42,16 @@ interface Props {
 }
 
 export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
-  const form = useForm<TurSEInstance>();
-  const { setValue } = form;
+  const form = useForm<TurSEInstance>({
+    defaultValues: value
+  });
+  const { control } = form;
   const [open, setOpen] = useState(false);
   const navigate = useNavigate()
-  useEffect(() => {
-    setValue("id", value.id)
-    setValue("title", value.title);
-    setValue("description", value.description);
-    setValue("turSEVendor", value.turSEVendor);
-    setValue("host", value.host);
-    setValue("port", value.port);
-  }, [setValue, value]);
 
+  useEffect(() => {
+    form.reset(value);
+  }, [value])
 
   function onSubmit(seInstance: TurSEInstance) {
     try {
@@ -128,7 +125,7 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">
               <FormField
-                control={form.control}
+                control={control}
                 name="title"
                 render={({ field }) => (
                   <FormItem>
@@ -147,7 +144,7 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="description"
                 render={({ field }) => (
                   <FormItem>
@@ -166,7 +163,7 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="turSEVendor.id"
                 render={({ field }) => (
                   <FormItem>
@@ -189,7 +186,7 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
               />
 
               <FormField
-                control={form.control}
+                control={control}
                 name="host"
                 render={({ field }) => (
                   <FormItem>
@@ -206,7 +203,7 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
                 )}
               />
               <FormField
-                control={form.control}
+                control={control}
                 name="port"
                 render={({ field }) => (
                   <FormItem>

turing-react/src/components/sn/sn.site.form.tsx

@@ -39,17 +39,15 @@ interface Props {
 }
 
 export const SNSiteForm: React.FC<Props> = ({ value, isNew }) => {
-  const form = useForm<TurSNSite>();
-  const { setValue } = form;
+  const form = useForm<TurSNSite>({
+    defaultValues: value
+  });
   const urlBase = "/admin/sn/instance";
   const navigate = useNavigate()
-  useEffect(() => {
-    setValue("id", value.id)
-    setValue("name", value.name);
-    setValue("description", value.description);
-    setValue("turSEInstance", value.turSEInstance);
-  }, [setValue, value]);
 
+  useEffect(() => {
+    form.reset(value);
+  }, [value])
 
   function onSubmit(snSite: TurSNSite) {
     try {

turing-react/src/components/store/store.instance.form.tsx

@@ -44,19 +44,15 @@ interface Props {
 }
 
 export const StoreInstanceForm: React.FC<Props> = ({ value, isNew }) => {
-  const form = useForm<TurStoreInstance>();
-  const { setValue } = form;
+  const form = useForm<TurStoreInstance>({
+    defaultValues: value
+  });
   const [open, setOpen] = useState(false);
   const navigate = useNavigate()
-  useEffect(() => {
-    setValue("id", value.id)
-    setValue("title", value.title);
-    setValue("description", value.description);
-    setValue("turStoreVendor", value.turStoreVendor);
-    setValue("url", value.url);
-    setValue("enabled", value.enabled);
-  }, [setValue, value]);
 
+  useEffect(() => {
+    form.reset(value);
+  }, [value])
 
   function onSubmit(storeInstance: TurStoreInstance) {
     try {