feat: add mechanism to create agents

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

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

src/api/services/agents.ts

@@ -22,7 +22,8 @@ export const getAgentsList = async (
       : "";
   return resolve(
     IncidentCommander.get<Agent[] | null>(
-      `/agents_summary?select=*,created_by(${AVATAR_INFO})&order=created_at.desc&${pagingParamsStr}${sortByParam}${sortOrderParam}`,
+      // todo: switch to agent_summary
+      `/agents?select=*,created_by(${AVATAR_INFO})&order=created_at.desc&${pagingParamsStr}${sortByParam}${sortOrderParam}`,
       {
         headers: {
           Prefer: "count=exact"
@@ -31,3 +32,11 @@ export const getAgentsList = async (
     )
   );
 };
+
+export async function addAgent(agent: Omit<Agent, "id">) {
+  const res = await IncidentCommander.post<Agent>("/agents", {
+    data: agent
+  });
+  console.log(res);
+  return res.data;
+}

src/components/Agents/Add/AddAgent.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { AiFillPlusCircle } from "react-icons/ai";
+import AgentForm from "./AddAgentForm";
+
+export default function AddAgent() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <button type="button" className="" onClick={() => setIsModalOpen(true)}>
+        <AiFillPlusCircle size={32} className="text-blue-600" />
+      </button>
+      <AgentForm
+        isOpen={isModalOpen}
+        onClose={() => {
+          // todo: show modal with helm install instructions
+          return setIsModalOpen(false);
+        }}
+      />
+    </>
+  );
+}

src/components/Agents/Add/AddAgentForm.tsx

@@ -0,0 +1,65 @@
+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 { Button } from "../../Button";
+
+type Props = {
+  agent?: Agent;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export default function AgentForm({ agent, isOpen, onClose }: Props) {
+  const { mutate: upsertAgent } = useUpsertAgentMutations({
+    onSuccess: () => {
+      onClose();
+    },
+    onError: (error) => {
+      toastError(error.message);
+    }
+  });
+
+  return (
+    <Modal
+      title={agent?.id ? agent.name : "Add Agent"}
+      onClose={onClose}
+      open={isOpen}
+      bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
+    >
+      <Formik
+        initialValues={{
+          ...agent
+        }}
+        onSubmit={(value) => {
+          upsertAgent(value as Agent);
+        }}
+      >
+        {({ handleSubmit }) => (
+          <Form
+            className="flex flex-col flex-1 overflow-y-auto"
+            onSubmit={handleSubmit}
+          >
+            <div className={clsx("flex flex-col h-full my-2 overflow-y-auto")}>
+              <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 />
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center justify-between py-4 px-5 bg-gray-100">
+              <Button
+                type="submit"
+                text={agent?.id ? "Update" : "Save"}
+                className="btn-primary"
+              />
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+}

src/components/Agents/AgentPage.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { AiFillPlusCircle } from "react-icons/ai";
 import { useSearchParams } from "react-router-dom";
 import { useAgentsListQuery } from "../../api/query-hooks/useAgentsQuery";
 import { User } from "../../api/services/users";
 import { BreadcrumbNav, BreadcrumbRoot } from "../BreadcrumbNav";
+import { Head } from "../Head/Head";
 import { SearchLayout } from "../Layout";
+import AddAgent from "./Add/AddAgent";
 import AgentsTable from "./List/AgentsTable";
-import { Head } from "../Head/Head";
 
 export type Agent = {
   id?: string;
@@ -26,8 +26,6 @@ export type Agent = {
 };
 
 export default function AgentsPage() {
-  const [isOpen, setIsOpen] = useState(false);
-
   const [{ pageIndex, pageSize }, setPageState] = useState({
     pageIndex: 0,
     pageSize: 150
@@ -64,13 +62,7 @@ export default function AgentsPage() {
           <BreadcrumbNav
             list={[
               <BreadcrumbRoot link="/agents">Agents</BreadcrumbRoot>,
-              <button
-                type="button"
-                className=""
-                onClick={() => setIsOpen(true)}
-              >
-                <AiFillPlusCircle size={32} className="text-blue-600" />
-              </button>
+              <AddAgent />
             ]}
           />
         }

src/components/Agents/List/AgentsTableColumns.tsx

@@ -25,6 +25,7 @@ export const agentsTableColumns: ColumnDef<Agent>[] = [
   },
   {
     header: "Person",
+    accessorKey: "person_id",
     minSize: 150,
     cell: ({ row }) => {
       const person = row?.getValue<User>("person_id");
@@ -65,6 +66,7 @@ export const agentsTableColumns: ColumnDef<Agent>[] = [
   {
     header: "Created By",
     minSize: 80,
+    accessorKey: "created_by",
     cell: ({ row }) => {
       const createdBy = row?.getValue<User>("created_by");
       return <Avatar user={createdBy} />;