Improve form submission feedback and UI consistency

Refactored LLM and SE instance forms to handle async submission and provide user feedback on success or failure. Updated page header to improve layout and button structure. Also clarified search engine vendor names in SE instance form.

Author: alegauss

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

@@ -55,16 +55,24 @@ export const LLMInstanceForm: React.FC<Props> = ({ value, isNew }) => {
     form.reset(value);
   }, [value])
 
-  function onSubmit(llmInstance: TurLLMInstance) {
+  async function onSubmit(llmInstance: TurLLMInstance) {
     try {
       if (isNew) {
-        turLLMInstanceService.create(llmInstance);
-        toast.success(`The ${llmInstance.title} Language Model was saved`);
-        navigate(urlBase);
+        const result = await turLLMInstanceService.create(llmInstance);
+        if (result) {
+          toast.success(`The ${llmInstance.title} Language Model was saved`);
+          navigate(urlBase);
+        } else {
+          toast.error(`The ${llmInstance.title} Language Model was not saved`);
+        }
       }
       else {
-        turLLMInstanceService.update(llmInstance);
-        toast.success(`The ${llmInstance.title} Language Model was updated`);
+        const result = await turLLMInstanceService.update(llmInstance);
+        if (result) {
+          toast.success(`The ${llmInstance.title} Language Model was updated`);
+        } else {
+          toast.error(`The ${llmInstance.title} Language Model was not updated`);
+        }
       }
     } catch (error) {
       console.error("Form submission error", error);
@@ -359,7 +367,7 @@ export const LLMInstanceForm: React.FC<Props> = ({ value, isNew }) => {
               />
               <FormField
                 control={form.control}
-                name="responseFormat"
+                name="supportedCapabilities"
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Supported capabilities</FormLabel>

turing-react/src/components/page-header.tsx

@@ -1,8 +1,8 @@
-import { Separator } from "@/components/ui/separator"
-import { SidebarTrigger } from "@/components/ui/sidebar"
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { NavLink } from "react-router-dom";
 import { ModeToggle } from "./mode-toggle";
 import { Button } from "./ui/button";
-import { NavLink } from "react-router-dom";
 
 interface MyComponentProps {
   turIcon?: React.ElementType;
@@ -23,21 +23,22 @@ export const PageHeader: React.FC<MyComponentProps> = ({ turIcon: TurIcon, title
         />
         {urlBase !== undefined ? (
           <>
-            {TurIcon && <TurIcon />}
-            <NavLink to={urlBase}>
+
+            <NavLink to={urlBase} className="flex items-center gap-2">
+              {TurIcon && <TurIcon />}
               <h1 className="text-base font-medium"> {title}</h1>
             </NavLink>
           </>
         ) :
-          (<> {TurIcon && <TurIcon />}
+          (<>
+            {TurIcon && <TurIcon />}
             <h1 className="text-base font-medium"> {title}</h1>
           </>)
         }
         <div className="ml-auto flex items-center gap-2">
           {urlNew !== undefined && (
             <Button>
-              {TurIcon && <TurIcon />}
-              <NavLink to={urlNew}>Add</NavLink>
+              <NavLink to={urlNew} className="flex items-center gap-2">{TurIcon && <TurIcon />} Add</NavLink>
             </Button>
           )}
           <ModeToggle></ModeToggle>

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

@@ -53,16 +53,24 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
     form.reset(value);
   }, [value])
 
-  function onSubmit(seInstance: TurSEInstance) {
+  async function onSubmit(seInstance: TurSEInstance) {
     try {
       if (isNew) {
-        turSEInstanceService.create(seInstance);
-        toast.success(`The ${seInstance.title} Search Engine was saved`);
-        navigate(ROUTES.SE_INSTANCE);
+        const result = await turSEInstanceService.create(seInstance);
+        if (result) {
+          toast.success(`The ${seInstance.title} Search Engine was saved`);
+          navigate(ROUTES.SE_INSTANCE);
+        } else {
+          toast.error(`The ${seInstance.title} Search Engine was not saved`);
+        }
       }
       else {
-        turSEInstanceService.update(seInstance);
-        toast.success(`The ${seInstance.title} Search Engine was updated`);
+        const result = await turSEInstanceService.update(seInstance);
+        if (result) {
+          toast.success(`The ${seInstance.title} Search Engine was updated`);
+        } else {
+          toast.error(`The ${seInstance.title} Search Engine was not updated`);
+        }
       }
     } catch (error) {
       console.error("Form submission error", error);
@@ -175,8 +183,8 @@ export const SEInstanceForm: React.FC<Props> = ({ value, isNew }) => {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem key="SOLR" value="SOLR">Solr</SelectItem>
-                        <SelectItem key="LUCENE" value="LUCENE">Lucene</SelectItem>
+                        <SelectItem key="SOLR" value="SOLR">Apache Solr</SelectItem>
+                        <SelectItem key="LUCENE" value="LUCENE">Apache Lucene</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormDescription>Search engine vendor that will be used.</FormDescription>