go back to resource type list on resource delete

frontend/src/components/config/util.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useRead } from "@lib/hooks";
+import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import {
   Select,
@@ -18,6 +18,7 @@ import {
   PlusCircle,
   Save,
   SearchX,
+  Trash,
 } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { cn } from "@lib/utils";
@@ -39,7 +40,9 @@ import {
   CommandList,
 } from "@ui/command";
 import { snake_case_to_upper_space_case } from "@lib/formatting";
-import { ConfirmButton } from "@components/util";
+import { ActionWithDialog, ConfirmButton } from "@components/util";
+import { UsableResource } from "@types";
+import { useNavigate } from "react-router-dom";
 
 export const ConfigItem = ({
   label,
@@ -400,3 +403,34 @@ export const SystemCommand = ({
     </ConfigItem>
   );
 };
+
+export const DeleteResource = ({
+  type,
+  id,
+}: {
+  type: UsableResource;
+  id: string;
+}) => {
+  const nav = useNavigate();
+  const resource = useRead(`Get${type}`, { [type.toLowerCase()]: id } as any).data;
+  const { mutateAsync, isPending } = useWrite(`Delete${type}`);
+
+  if (!resource) return null;
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="w-full">Delete {type}</div>
+      <ActionWithDialog
+        name={resource.name}
+        title="Delete"
+        icon={<Trash className="h-4 w-4" />}
+        onClick={async () => {
+          await mutateAsync({ id });
+          nav(`/${type.toLowerCase()}s`);
+        }}
+        disabled={isPending}
+        loading={isPending}
+      />
+    </div>
+  );
+};

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

@@ -1,10 +1,7 @@
 import { Config } from "@components/config";
-import { ActionWithDialog } from "@components/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
-import { Trash } from "lucide-react";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export const AlerterConfig = ({ id }: { id: string }) => {
   const config = useRead("GetAlerter", { alerter: id }).data?.config;
@@ -57,27 +54,3 @@ const CustomAlerterConfig = ({ id }: { id: string }) => {
     />
   );
 };
-
-export const DeleteAlerter = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const { data: alerter } = useRead("GetAlerter", { alerter: id });
-  const { mutateAsync, isPending } = useWrite("DeleteAlerter");
-
-  if (!alerter) return null;
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Alerter</div>
-      <ActionWithDialog
-        name={alerter.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};

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

@@ -16,9 +16,10 @@ import { useState } from "react";
 import { DataTable } from "@ui/data-table";
 import { Link } from "react-router-dom";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
-import { AlerterConfig, DeleteAlerter } from "./config";
+import { AlerterConfig } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
 import { TagsWithBadge, useTagsFilter } from "@components/tags";
+import { DeleteResource } from "@components/config/util";
 
 const useAlerter = (id?: string) =>
   useRead("ListAlerters", {}).data?.find((d) => d.id === id);
@@ -38,7 +39,7 @@ export const AlerterComponents: RequiredResourceComponents = {
         icon={<AlertTriangle className="w-4 h-4" />}
         actions={<CopyResource type="Alerter" id={id} />}
       >
-        <DeleteAlerter id={id} />
+        <DeleteResource type="Alerter" id={id} />
       </Section>
     ),
   },

frontend/src/components/resources/build/config.tsx

@@ -5,7 +5,6 @@ import {
   ResourceSelector,
   SystemCommand,
 } from "@components/config/util";
-import { ActionWithDialog } from "@components/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { env_to_text, text_to_env } from "@lib/utils";
 import { Types } from "@monitor/client";
@@ -19,9 +18,8 @@ import {
   SelectValue,
 } from "@ui/select";
 import { Textarea } from "@ui/textarea";
-import { MinusCircle, PlusCircle, Trash } from "lucide-react";
+import { MinusCircle, PlusCircle } from "lucide-react";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export const BuildConfig = ({ id }: { id: string }) => {
   const config = useRead("GetBuild", { build: id }).data?.config;
@@ -243,28 +241,3 @@ const DockerOrganizations = ({
     </ConfigItem>
   );
 };
-
-export const DeleteBuild = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const build = useRead("GetBuild", { build: id }).data;
-  const { mutateAsync, isPending } = useWrite("DeleteBuild");
-  
-  if (!build) return null;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Build</div>
-      <ActionWithDialog
-        name={build.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};

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

@@ -6,11 +6,12 @@ import { Input } from "@ui/input";
 import { AlertTriangle, Ban, Hammer, History, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useToast } from "@ui/use-toast";
-import { BuildConfig, DeleteBuild } from "./config";
+import { BuildConfig } from "./config";
 import { fill_color_class_by_intention } from "@lib/color";
 import { BuildChart } from "./dashboard";
 import { BuildTable } from "./table";
 import { fmt_version } from "@lib/formatting";
+import { DeleteResource } from "@components/config/util";
 
 const useBuild = (id?: string) =>
   useRead("ListBuilds", {}).data?.find((d) => d.id === id);
@@ -49,7 +50,7 @@ export const BuildComponents: RequiredResourceComponents = {
         icon={<AlertTriangle className="w-4 h-4" />}
         actions={<CopyResource type="Build" id={id} />}
       >
-        <DeleteBuild id={id} />
+        <DeleteResource type="Build" id={id} />
       </Section>
     ),
   },

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

@@ -1,11 +1,8 @@
 import { Config } from "@components/config";
 import { InputList, ResourceSelector } from "@components/config/util";
-import { ActionWithDialog } from "@components/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
-import { Trash } from "lucide-react";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export const BuilderConfig = ({ id }: { id: string }) => {
   const config = useRead("GetBuilder", { builder: id }).data?.config;
@@ -92,28 +89,3 @@ const ServerBuilderConfig = ({ id }: { id: string }) => {
     />
   );
 };
-
-export const DeleteBuilder = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const builder = useRead("GetBuilder", { builder: id }).data;
-  const { mutateAsync, isPending } = useWrite("DeleteBuilder");
-
-  if (!builder) return null;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Builder</div>
-      <ActionWithDialog
-        name={builder.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};

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

@@ -17,8 +17,9 @@ import {
 import { Cloud, Bot, Factory, AlertTriangle } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { BuilderConfig, DeleteBuilder } from "./config";
+import { BuilderConfig } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
+import { DeleteResource } from "@components/config/util";
 
 const useBuilder = (id?: string) =>
   useRead("ListBuilders", {}).data?.find((d) => d.id === id);
@@ -52,7 +53,7 @@ export const BuilderComponents: RequiredResourceComponents = {
         icon={<AlertTriangle className="w-4 h-4" />}
         actions={<CopyResource type="Builder" id={id} />}
       >
-        <DeleteBuilder id={id} />
+        <DeleteResource type="Builder" id={id} />
       </Section>
     ),
   },

frontend/src/components/resources/deployment/actions.tsx

@@ -255,7 +255,7 @@ export const DeleteDeployment = ({ id }: { id: string }) => {
         icon={<Trash className="h-4 w-4" />}
         onClick={async () => {
           await mutateAsync({ id });
-          nav("/");
+          nav("/deployments");
         }}
         disabled={pending}
         loading={pending}

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

@@ -1,10 +1,5 @@
 import { NewResource, Section } from "@components/layouts";
-import {
-  ActionWithDialog,
-  ConfirmButton,
-  CopyResource,
-  ResourceLink,
-} from "@components/util";
+import { ConfirmButton, CopyResource, ResourceLink } from "@components/util";
 import { useExecute, useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import { RequiredResourceComponents } from "@types";
@@ -17,11 +12,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@ui/select";
-import { AlertTriangle, Loader2, Route, Trash } from "lucide-react";
+import { AlertTriangle, Loader2, Route } from "lucide-react";
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { ProcedureConfig } from "./config";
 import { ProcedureTable } from "./table";
+import { DeleteResource } from "@components/config/util";
 
 const useProcedure = (id?: string) =>
   useRead("ListProcedures", {}).data?.find((d) => d.id === id);
@@ -41,7 +37,7 @@ export const ProcedureComponents: RequiredResourceComponents = {
         icon={<AlertTriangle className="w-4 h-4" />}
         actions={<CopyResource type="Procedure" id={id} />}
       >
-        <DeleteProcedure id={id} />
+        <DeleteResource type="Procedure" id={id} />
       </Section>
     ),
   },
@@ -125,28 +121,3 @@ export const ProcedureComponents: RequiredResourceComponents = {
     );
   },
 };
-
-const DeleteProcedure = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const procedure = useRead("GetProcedure", { procedure: id }).data;
-  const { mutateAsync, isPending } = useWrite("DeleteProcedure");
-
-  if (!procedure) return null;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Procedure</div>
-      <ActionWithDialog
-        name={procedure.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};

frontend/src/components/resources/repo/config.tsx

@@ -4,7 +4,6 @@ import {
   ResourceSelector,
   SystemCommand,
 } from "@components/config/util";
-import { ActionWithDialog } from "@components/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import {
@@ -14,9 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@ui/select";
-import { Trash } from "lucide-react";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export const RepoConfig = ({ id }: { id: string }) => {
   const config = useRead("GetRepo", { repo: id }).data?.config;
@@ -104,28 +101,3 @@ const GithubAccount = ({
     </ConfigItem>
   );
 };
-
-export const DeleteRepo = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const repo = useRead("GetRepo", { repo: id }).data;
-  const { mutateAsync, isPending } = useWrite("DeleteRepo");
-
-  if (!repo) return null;
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Repo</div>
-      <ActionWithDialog
-        name={repo.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};

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

@@ -5,12 +5,13 @@ import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { DataTable } from "@ui/data-table";
 import { AlertTriangle, GitBranch } from "lucide-react";
 import { Link } from "react-router-dom";
-import { DeleteRepo, RepoConfig } from "./config";
+import { RepoConfig } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
 import { useState } from "react";
 import { NewResource, Section } from "@components/layouts";
 import { Input } from "@ui/input";
 import { CloneRepo, PullRepo } from "./actions";
+import { DeleteResource } from "@components/config/util";
 
 const useRepo = (id?: string) =>
   useRead("ListRepos", {}).data?.find((d) => d.id === id);
@@ -31,7 +32,7 @@ export const RepoComponents: RequiredResourceComponents = {
         icon={<AlertTriangle className="w-4 h-4" />}
         actions={<CopyResource type="Repo" id={id} />}
       >
-        <DeleteRepo id={id} />
+        <DeleteResource type="Repo" id={id} />
       </Section>
     ),
   },

frontend/src/components/resources/server/actions.tsx

@@ -7,9 +7,8 @@ import { useExecute, useInvalidate, useRead, useWrite } from "@lib/hooks";
 import { IdComponent } from "@types";
 import { Input } from "@ui/input";
 import { useToast } from "@ui/use-toast";
-import { Pen, Scissors, Trash, XOctagon } from "lucide-react";
+import { Pen, Scissors, XOctagon } from "lucide-react";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useServer } from ".";
 
 export const SERVER_ACTIONS: IdComponent[] = [
@@ -49,30 +48,6 @@ export const SERVER_ACTIONS: IdComponent[] = [
   },
 ];
 
-export const DeleteServer = ({ id }: { id: string }) => {
-  const nav = useNavigate();
-  const server = useRead("GetServer", { server: id }).data;
-  const { mutateAsync, isPending } = useWrite("DeleteServer");
-
-  if (!server) return null;
-  return (
-    <div className="flex items-center justify-between">
-      <div className="w-full">Delete Server</div>
-      <ActionWithDialog
-        name={server.name}
-        title="Delete"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={async () => {
-          await mutateAsync({ id });
-          nav("/");
-        }}
-        disabled={isPending}
-        loading={isPending}
-      />
-    </div>
-  );
-};
-
 export const RenameServer = ({ id }: { id: string }) => {
   const invalidate = useInvalidate();
 

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

@@ -6,7 +6,7 @@ import { ServerIcon, AlertTriangle, Rocket, LineChart } from "lucide-react";
 import { useState } from "react";
 import { NewResource, Section } from "@components/layouts";
 import { Input } from "@ui/input";
-import { DeleteServer, RenameServer, SERVER_ACTIONS } from "./actions";
+import { RenameServer, SERVER_ACTIONS } from "./actions";
 import {
   fill_color_class_by_intention,
   server_status_intention,
@@ -19,6 +19,7 @@ import { ServersChart } from "./dashboard";
 import { ResourceLink } from "@components/util";
 import { Link } from "react-router-dom";
 import { Button } from "@ui/button";
+import { DeleteResource } from "@components/config/util";
 
 export const useServer = (id?: string) =>
   useRead("ListServers", {}).data?.find((d) => d.id === id);
@@ -79,7 +80,7 @@ export const ServerComponents: RequiredResourceComponents = {
     Danger: ({ id }) => (
       <Section title="Danger Zone" icon={<AlertTriangle className="w-4 h-4" />}>
         <RenameServer id={id} />
-        <DeleteServer id={id} />
+        <DeleteResource type="Server" id={id} />
       </Section>
     ),
   },