feat: add form for adding agents

src/api/axios.ts

@@ -69,6 +69,16 @@ export const Snapshot = axios.create({
   }
 });
 
+export const AgentAPI = axios.create({
+  baseURL: `${API_BASE}/agent`,
+  headers: {
+    Accept: "application/json",
+    Prefer: "return=representation",
+    "Content-Type": "application/json",
+    responseType: "blob"
+  }
+});
+
 export const LogsSearch = axios.create({
   baseURL: `${API_BASE}/logs`,
   headers: {

src/api/query-hooks/mutations/useUpsertAgentMutations.tsx

@@ -1,12 +1,11 @@
 import { UseMutationOptions, useMutation } from "@tanstack/react-query";
-import { Agent } from "../../../components/Agents/AgentPage";
-import { addAgent } from "../../services/agents";
+import { GenerateAgent, GeneratedAgent, addAgent } from "../../services/agents";
 
 export default function useUpsertAgentMutations(
-  options?: UseMutationOptions<Agent, Error, Agent>
+  options?: UseMutationOptions<GeneratedAgent, Error, GenerateAgent>
 ) {
   return useMutation({
     ...options,
-    mutationFn: async (agent: Agent) => addAgent(agent)
+    mutationFn: async (agent: GenerateAgent) => addAgent(agent)
   });
 }

src/api/services/agents.ts

@@ -1,6 +1,6 @@
 import { Agent } from "../../components/Agents/AgentPage";
 import { AVATAR_INFO } from "../../constants";
-import { IncidentCommander } from "../axios";
+import { AgentAPI, IncidentCommander } from "../axios";
 import { resolve } from "../resolve";
 
 export const getAgentsList = async (
@@ -33,10 +33,17 @@ export const getAgentsList = async (
   );
 };
 
-export async function addAgent(agent: Omit<Agent, "id">) {
-  const res = await IncidentCommander.post<Agent>("/agents", {
-    data: agent
-  });
+export type GenerateAgent = {
+  name: string;
+  properties: Record<string, string>;
+};
+
+export type GeneratedAgent = GenerateAgent & {
+  id: string;
+};
+
+export async function addAgent(agent: GenerateAgent) {
+  const res = await AgentAPI.post<GeneratedAgent>("/generate", agent);
   console.log(res);
   return res.data;
 }

src/components/Agents/Add/AddAgent.tsx

@@ -2,7 +2,11 @@ import { useState } from "react";
 import { AiFillPlusCircle } from "react-icons/ai";
 import AgentForm from "./AddAgentForm";
 
-export default function AddAgent() {
+type Props = {
+  refresh: () => void;
+};
+
+export default function AddAgent({ refresh }: Props) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
@@ -14,6 +18,7 @@ export default function AddAgent() {
         isOpen={isModalOpen}
         onClose={() => {
           // todo: show modal with helm install instructions
+          refresh();
           return setIsModalOpen(false);
         }}
       />

src/components/Agents/Add/AddAgentForm.tsx

@@ -1,20 +1,21 @@
+import clsx from "clsx";
 import { Form, Formik } from "formik";
-import { Modal } from "../../Modal";
-import { Agent } from "../AgentPage";
 import useUpsertAgentMutations from "../../../api/query-hooks/mutations/useUpsertAgentMutations";
-import { toastError } from "../../Toast/toast";
-import FormikTextInput from "../../Forms/Formik/FormikTextInput";
-import clsx from "clsx";
+import { GenerateAgent } from "../../../api/services/agents";
 import { Button } from "../../Button";
+import FormikTextInput from "../../Forms/Formik/FormikTextInput";
+import { Modal } from "../../Modal";
+import { toastError } from "../../Toast/toast";
+import FormikKeyValueMapField from "../../Forms/Formik/FormikKeyValueMapField";
+import { FaSpinner } from "react-icons/fa";
 
 type Props = {
-  agent?: Agent;
   isOpen: boolean;
   onClose: () => void;
 };
 
-export default function AgentForm({ agent, isOpen, onClose }: Props) {
-  const { mutate: upsertAgent } = useUpsertAgentMutations({
+export default function AgentForm({ isOpen, onClose }: Props) {
+  const { mutate: upsertAgent, isLoading } = useUpsertAgentMutations({
     onSuccess: () => {
       onClose();
     },
@@ -25,17 +26,18 @@ export default function AgentForm({ agent, isOpen, onClose }: Props) {
 
   return (
     <Modal
-      title={agent?.id ? agent.name : "Add Agent"}
+      title={"Add Agent"}
       onClose={onClose}
       open={isOpen}
       bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
     >
-      <Formik
+      <Formik<GenerateAgent>
         initialValues={{
-          ...agent
+          name: "",
+          properties: {}
         }}
         onSubmit={(value) => {
-          upsertAgent(value as Agent);
+          upsertAgent(value);
         }}
       >
         {({ handleSubmit }) => (
@@ -47,13 +49,20 @@ export default function AgentForm({ agent, isOpen, onClose }: Props) {
               <div className={clsx("flex flex-col px-2 mb-2 overflow-y-auto")}>
                 <div className="flex flex-col space-y-4 overflow-y-auto p-4">
                   <FormikTextInput name="name" label="Name" required />
+                  <FormikKeyValueMapField
+                    name="properties"
+                    label="Properties"
+                  />
                 </div>
               </div>
             </div>
             <div className="flex items-center justify-between py-4 px-5 bg-gray-100">
               <Button
+                icon={
+                  isLoading ? <FaSpinner className="animate-spin" /> : undefined
+                }
                 type="submit"
-                text={agent?.id ? "Update" : "Save"}
+                text={isLoading ? "Saving ..." : "Save"}
                 className="btn-primary"
               />
             </div>

src/components/Agents/AgentPage.tsx

@@ -62,7 +62,7 @@ export default function AgentsPage() {
           <BreadcrumbNav
             list={[
               <BreadcrumbRoot link="/agents">Agents</BreadcrumbRoot>,
-              <AddAgent />
+              <AddAgent refresh={refetch} />
             ]}
           />
         }