create new resources navs to created resource

frontend/src/components/resources/alerter/index.tsx

@@ -13,16 +13,14 @@ import { RequiredResourceComponents } from "@types";
 import { Input } from "@ui/input";
 import { AlarmClock } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { AlerterConfig } from "./config";
 import { DeleteResource } from "../common";
 import { AlerterTable } from "./table";
 
 const useAlerter = (id?: string) =>
-  useRead("ListAlerters", {}).data?.find(
-    (d) => d.id === id
-  );
+  useRead("ListAlerters", {}).data?.find((d) => d.id === id);
 
 export const AlerterComponents: RequiredResourceComponents = {
   Dashboard: () => {
@@ -45,6 +43,7 @@ export const AlerterComponents: RequiredResourceComponents = {
   },
 
   New: () => {
+    const nav = useNavigate();
     const { mutateAsync } = useWrite("CreateAlerter");
     const [name, setName] = useState("");
     const [type, setType] = useState<Types.AlerterConfig["type"]>();
@@ -52,9 +51,12 @@ export const AlerterComponents: RequiredResourceComponents = {
     return (
       <NewLayout
         entityType="Alerter"
-        onSuccess={async () =>
-          !!type && mutateAsync({ name, config: { type, params: {} } })
-        }
+        onSuccess={async () => {
+          if (!type) return;
+          const id = (await mutateAsync({ name, config: { type, params: {} } }))
+            ._id?.$oid!;
+          nav(`/alerters/${id}`);
+        }}
         enabled={!!name && !!type}
       >
         <div className="grid md:grid-cols-2">

frontend/src/components/resources/builder/index.tsx

@@ -14,7 +14,7 @@ import {
 } from "@ui/select";
 import { Cloud, Bot, Factory } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { BuilderConfig } from "./config";
 import { DeleteResource, ResourceLink } from "../common";
 import { BuilderTable } from "./table";
@@ -56,6 +56,7 @@ export const BuilderComponents: RequiredResourceComponents = {
   },
 
   New: () => {
+    const nav = useNavigate();
     const { mutateAsync } = useWrite("CreateBuilder");
     const [name, setName] = useState("");
     const [type, setType] = useState<Types.BuilderConfig["type"]>();
@@ -63,9 +64,11 @@ export const BuilderComponents: RequiredResourceComponents = {
     return (
       <NewLayout
         entityType="Builder"
-        onSuccess={async () =>
-          !!type && mutateAsync({ name, config: { type, params: {} } })
-        }
+        onSuccess={async () => {
+          if (!type) return
+          const id = (await mutateAsync({ name, config: { type, params: {} } }))._id?.$oid!;
+          nav(`/builders/${id}`);
+        }}
         enabled={!!name && !!type}
       >
         <div className="grid md:grid-cols-2">

frontend/src/components/resources/common.tsx

@@ -220,9 +220,8 @@ export const NewResource = ({ type }: { type: UsableResource }) => {
     <NewLayout
       entityType={type}
       onSuccess={async () => {
-        const res = await mutateAsync({ name, config: {} });
-        nav(``);
-        return res;
+        const id = (await mutateAsync({ name, config: {} }))._id?.$oid!;
+        nav(`/${usableResourcePath(type)}/${id}`);
       }}
       enabled={!!name}
       onOpenChange={() => setName("")}

frontend/src/components/resources/server-template/index.tsx

@@ -3,7 +3,7 @@ import { RequiredResourceComponents } from "@types";
 import { DeleteResource } from "../common";
 import { Bot, Cloud, ServerCog } from "lucide-react";
 import { ServerTemplateConfig } from "./config";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { useState } from "react";
 import { Types } from "@monitor/client";
@@ -43,6 +43,7 @@ export const ServerTemplateComponents: RequiredResourceComponents = {
   },
 
   New: () => {
+    const nav = useNavigate();
     const { mutateAsync } = useWrite("CreateServerTemplate");
     const [name, setName] = useState("");
     const [type, setType] = useState<Types.ServerTemplateConfig["type"]>("Aws");
@@ -50,9 +51,11 @@ export const ServerTemplateComponents: RequiredResourceComponents = {
     return (
       <NewLayout
         entityType="Server Template"
-        onSuccess={async () =>
-          !!type && mutateAsync({ name, config: { type, params: {} } })
-        }
+        onSuccess={async () => {
+          if (!type) return
+          const id = (await mutateAsync({ name, config: { type, params: {} } }))._id?.$oid!;
+          nav(`/server-templates/${id}`);
+        }}
         enabled={!!name && !!type}
       >
         <div className="grid md:grid-cols-2">