feat(ui): loading states for POST request, redirection to newly creat…

…ed entities

ui/src/components/ChatbotConfiguration.tsx

@@ -24,6 +24,7 @@ import { LongContextReorderField } from "./form_fields/LongContextReorderField";
 import { PromptField } from "./form_fields/PromptField";
 
 import { ServerKnowledgeBaseConfig } from "../services/knowledge-base-service";
+import { RotateCw } from "lucide-react";
 
 interface ChatbotConfigurationProps {
   chatbot: ServerPipelineConfig;
@@ -34,7 +35,7 @@ export function ChatbotConfiguration({
   chatbot,
   knowledgeBases,
 }: ChatbotConfigurationProps) {
-  const mutation = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: (data: ClientPipelineConfig) =>
       chatbotService.updateChatbot(chatbot.id, data),
   });
@@ -49,28 +50,30 @@ export function ChatbotConfiguration({
     }
   }, [chatbot, form]);
 
-  const handleSubmit = form.handleSubmit(
-    (data) => {
-      mutation.mutate(data);
-    },
-    (errors) => {
-      console.error("Form submission failed. Errors:", errors);
-    }
-  );
+  const handleSubmit = form.handleSubmit((data) => {
+    mutate(data);
+  });
 
   return (
     <Card className="h-full flex flex-col px-6">
       <header className="flex justify-between items-baseline">
         <Typography variant="h4">Configuration</Typography>
-        <Button
-          type="submit"
-          onClick={(e) => {
-            e.preventDefault();
-            handleSubmit();
-          }}
-        >
-          Save
-        </Button>
+        {isPending ? (
+          <Button disabled>
+            <RotateCw className="w-4 h-4 mr-2 animate-spin" />
+            Saving...
+          </Button>
+        ) : (
+          <Button
+            type="submit"
+            onClick={(e) => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+          >
+            Save
+          </Button>
+        )}
       </header>
       <Form {...form}>
         <form className="space-y-8 mb-8">

ui/src/components/ModalKnowledgeBase.tsx

@@ -34,8 +34,11 @@ import {
   ClientKnowledgeBaseConfig,
   clientKnowledgeBaseConfigSchema,
   knowledgeBaseService,
+  ServerKnowledgeBaseConfig,
 } from "@/services/knowledge-base-service";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { RefreshCw } from "lucide-react";
+import { useLocation } from "wouter";
 
 interface ModalKnowledgeBaseProps {
   setModalVisible: Dispatch<SetStateAction<boolean>>;
@@ -51,9 +54,16 @@ export function ModalKnowledgeBase({
     },
   });
 
-  const mutation = useMutation({
+  const [, setLocation] = useLocation();
+
+  const { mutate, isPending } = useMutation({
     mutationFn: (data: ClientKnowledgeBaseConfig) =>
       knowledgeBaseService.createKnowledgeBase(data),
+
+    onSuccess: (data: ServerKnowledgeBaseConfig) => {
+      setModalVisible(false);
+      setLocation(`/knowledge-bases/${data.id}`);
+    },
   });
 
   function handleCancelClick() {
@@ -64,7 +74,7 @@ export function ModalKnowledgeBase({
     (data) => {
       console.log(form.getValues());
       console.log(data);
-      mutation.mutate(data);
+      mutate(data);
     },
     (error) => {
       console.log(error);
@@ -411,7 +421,14 @@ export function ModalKnowledgeBase({
                 <Button variant="outline" onClick={handleCancelClick}>
                   Cancel
                 </Button>
-                <Button type="submit">Create</Button>
+                {isPending ? (
+                  <Button disabled>
+                    <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                    Creating...
+                  </Button>
+                ) : (
+                  <Button type="submit">Create</Button>
+                )}
               </div>
             </form>
           </Form>

ui/src/components/pages/PageCreateChatbot.tsx

@@ -11,7 +11,7 @@ import { ErrorMessageWithReload } from "../ErrorMessageWithReload";
 import { chatbotService } from "../../services/chatbot-service";
 import { useMutation } from "@tanstack/react-query";
 
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, RotateCw } from "lucide-react";
 import { useLocation } from "wouter";
 
 import { useQuery } from "@tanstack/react-query";
@@ -54,7 +54,7 @@ export function PageCreateChatbot() {
     queryFn: knowledgeBaseService.fetchKnowledgeBases,
   });
 
-  const mutation = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: (data: z.infer<typeof clientPipelineConfigSchema>) =>
       chatbotService.createChatbot(data),
     onSuccess: (data) => {
@@ -65,7 +65,7 @@ export function PageCreateChatbot() {
   function handleFormSubmit(
     values: z.infer<typeof clientPipelineConfigSchema>
   ) {
-    mutation.mutate(values);
+    mutate(values);
   }
 
   function handleBackClick() {
@@ -127,15 +127,22 @@ export function PageCreateChatbot() {
             <LongContextReorderField control={form.control} />
             <PromptField control={form.control} />
             <div className="flex justify-end">
-              <Button
-                type="submit"
-                onClick={(e) => {
-                  e.preventDefault();
-                  form.handleSubmit(handleFormSubmit)();
-                }}
-              >
-                Create
-              </Button>
+              {isPending ? (
+                <Button disabled className="gap-2">
+                  <RotateCw className="h-5 w-5 animate-spin" />
+                  Creating...
+                </Button>
+              ) : (
+                <Button
+                  type="submit"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    form.handleSubmit(handleFormSubmit)();
+                  }}
+                >
+                  Create
+                </Button>
+              )}
             </div>
           </form>
         </Form>