upgrade to new resource component

frontend/src/components/new-resource.tsx

@@ -0,0 +1,47 @@
+import { Types } from "@monitor/client";
+import { Button } from "@ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@ui/dialog";
+import { ReactNode } from "react";
+
+export const NewResource = ({
+  open,
+  loading,
+  type,
+  children,
+  set,
+  onSuccess,
+}: {
+  open: boolean;
+  loading: boolean;
+  type: Types.ResourceTarget["type"];
+  children: ReactNode;
+  set: (b: false) => void;
+  onSuccess: () => void;
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={set}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New {type}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">{children}</div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            intent="success"
+            onClick={onSuccess}
+            disabled={loading}
+          >
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/resources/alerter/new.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useWrite } from "@hooks";
+import { Input } from "@ui/input";
+import { NewResource } from "@components/new-resource";
+import { useNavigate } from "react-router-dom";
+
+export const NewAlerter = ({
+  open,
+  set,
+}: {
+  open: boolean;
+  set: (b: false) => void;
+}) => {
+  const nav = useNavigate();
+  const { mutate, isLoading } = useWrite("CreateAlerter", {
+    onSuccess: (d) => {
+      set(false);
+      nav(`/alerters/${d._id?.$oid}`);
+    },
+  });
+
+  const [name, setName] = useState("");
+
+  return (
+    <NewResource
+      type="Alerter"
+      open={open}
+      loading={isLoading}
+      set={set}
+      onSuccess={() => mutate({ name, config: { type: "Custom", params: {} } })}
+    >
+      <div className="flex items-center justify-between">
+        <div>Alerter Name</div>
+        <Input
+          className="max-w-[50%]"
+          placeholder="Alerter Name"
+          name={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
+  );
+};

frontend/src/resources/build/new.tsx

@@ -1,14 +1,8 @@
 import { useState } from "react";
 import { useWrite } from "@hooks";
-import { Button } from "@ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@ui/dialog";
 import { Input } from "@ui/input";
+import { NewResource } from "@components/new-resource";
+import { useNavigate } from "react-router-dom";
 
 export const NewBuild = ({
   open,
@@ -17,37 +11,33 @@ export const NewBuild = ({
   open: boolean;
   set: (b: false) => void;
 }) => {
-  const { mutate } = useWrite("CreateBuild");
+  const nav = useNavigate();
+  const { mutate, isLoading } = useWrite("CreateBuild", {
+    onSuccess: (d) => {
+      set(false);
+      nav(`/builds/${d._id?.$oid}`);
+    },
+  });
+
   const [name, setName] = useState("");
 
   return (
-    <Dialog open={open} onOpenChange={set}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>New Build</DialogTitle>
-        </DialogHeader>
-        <div className="flex items-center justify-between">
-          <div>Build Name</div>
-          <Input
-            className="max-w-[50%]"
-            placeholder="Build Name"
-            name={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            variant="outline"
-            intent="success"
-            onClick={() => {
-              mutate({ name, config: {} });
-              set(false);
-            }}
-          >
-            Create
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <NewResource
+      type="Build"
+      open={open}
+      loading={isLoading}
+      set={set}
+      onSuccess={() => mutate({ name, config: {} })}
+    >
+      <div className="flex items-center justify-between">
+        <div>Build Name</div>
+        <Input
+          className="max-w-[50%]"
+          placeholder="Build Name"
+          name={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
   );
 };

frontend/src/resources/builder/new.tsx

@@ -1,14 +1,7 @@
 import { useState } from "react";
-import { Button } from "@ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@ui/dialog";
-import { Input } from "@ui/input";
 import { useWrite } from "@hooks";
+import { Input } from "@ui/input";
+import { NewResource } from "@components/new-resource";
 import { useNavigate } from "react-router-dom";
 
 export const NewBuilder = ({
@@ -19,41 +12,32 @@ export const NewBuilder = ({
   set: (b: false) => void;
 }) => {
   const nav = useNavigate();
-  const { mutateAsync } = useWrite("CreateBuilder");
+  const { mutate, isLoading } = useWrite("CreateBuilder", {
+    onSuccess: (d) => {
+      set(false);
+      nav(`/builders/${d._id?.$oid}`);
+    },
+  });
+
   const [name, setName] = useState("");
 
   return (
-    <Dialog open={open} onOpenChange={set}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>New Builder</DialogTitle>
-        </DialogHeader>
-        <div className="flex items-center justify-between">
-          <div>Builder Name</div>
-          <Input
-            className="max-w-[50%]"
-            placeholder="Builder Name"
-            name={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            variant="outline"
-            intent="success"
-            onClick={async () => {
-              const { _id } = await mutateAsync({
-                name,
-                config: { type: "Aws", params: {} },
-              });
-              nav(`/builders/${_id?.$oid}`);
-              set(false);
-            }}
-          >
-            Create
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <NewResource
+      type="Builder"
+      open={open}
+      loading={isLoading}
+      set={set}
+      onSuccess={() => mutate({ name, config: { type: "Aws", params: {} } })}
+    >
+      <div className="flex items-center justify-between">
+        <div>Builder Name</div>
+        <Input
+          className="max-w-[50%]"
+          placeholder="Builder Name"
+          name={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
   );
 };

frontend/src/resources/deployment/new.tsx

@@ -1,14 +1,7 @@
 import { useState } from "react";
-import { Button } from "@ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@ui/dialog";
-import { Input } from "@ui/input";
 import { useWrite } from "@hooks";
+import { Input } from "@ui/input";
+import { NewResource } from "@components/new-resource";
 import { useNavigate } from "react-router-dom";
 
 export const NewDeployment = ({
@@ -19,38 +12,32 @@ export const NewDeployment = ({
   set: (b: false) => void;
 }) => {
   const nav = useNavigate();
-  const { mutateAsync } = useWrite("CreateDeployment");
+  const { mutate, isLoading } = useWrite("CreateDeployment", {
+    onSuccess: (d) => {
+      set(false);
+      nav(`/deployments/${d._id?.$oid}`);
+    },
+  });
+
   const [name, setName] = useState("");
 
   return (
-    <Dialog open={open} onOpenChange={set}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>New Deployment</DialogTitle>
-        </DialogHeader>
-        <div className="flex items-center justify-between">
-          <div>Deployment Name</div>
-          <Input
-            className="max-w-[50%]"
-            placeholder="Deployment Name"
-            name={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            variant="outline"
-            intent="success"
-            onClick={async () => {
-              const { _id } = await mutateAsync({ name, config: {} });
-              nav(`/deployments/${_id?.$oid}`);
-              set(false);
-            }}
-          >
-            Create
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <NewResource
+      type="Deployment"
+      open={open}
+      loading={isLoading}
+      set={set}
+      onSuccess={() => mutate({ name, config: {} })}
+    >
+      <div className="flex items-center justify-between">
+        <div>Deployment Name</div>
+        <Input
+          className="max-w-[50%]"
+          placeholder="Deployment Name"
+          name={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
   );
 };

frontend/src/resources/server/new.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { useWrite } from "@hooks";
+import { Input } from "@ui/input";
+import { NewResource } from "@components/new-resource";
+import { useNavigate } from "react-router-dom";
+
+export const NewServer = ({
+  open,
+  set,
+}: {
+  open: boolean;
+  set: (b: false) => void;
+}) => {
+  const nav = useNavigate();
+  const { mutate, isLoading } = useWrite("CreateServer", {
+    onSuccess: (d) => {
+      set(false);
+      nav(`/servers/${d._id?.$oid}`);
+    },
+  });
+
+  const [name, setName] = useState("");
+
+  return (
+    <NewResource
+      type="Server"
+      open={open}
+      loading={isLoading}
+      set={set}
+      onSuccess={() => mutate({ name, config: {} })}
+    >
+      <div className="flex items-center justify-between">
+        <div>Server Name</div>
+        <Input
+          className="max-w-[50%]"
+          placeholder="Server Name"
+          name={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+    </NewResource>
+  );
+};