From 9e290278d0b28a77327477f38842357741c24698 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sat, 6 Apr 2024 02:56:41 -0700
Subject: [PATCH] add Danger zone (delete + copy)

---
 .../components/resources/alerter/config.tsx   | 27 +++++++++++
 .../components/resources/alerter/index.tsx    | 19 ++++++--
 .../src/components/resources/build/config.tsx | 29 +++++++++++-
 .../src/components/resources/build/index.tsx  | 17 +++++--
 .../components/resources/builder/config.tsx   | 28 +++++++++++
 .../components/resources/builder/index.tsx    | 17 +++++--
 .../components/resources/deployment/index.tsx |  8 +++-
 .../components/resources/procedure/index.tsx  | 47 +++++++++++++++++--
 .../src/components/resources/repo/config.tsx  | 34 +++++++++++++-
 .../src/components/resources/repo/index.tsx   | 17 +++++--
 frontend/src/components/util.tsx              |  6 +--
 11 files changed, 221 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/resources/alerter/config.tsx b/frontend/src/components/resources/alerter/config.tsx
index f2e35fb3f..dc0c1801f 100644
--- a/frontend/src/components/resources/alerter/config.tsx
+++ b/frontend/src/components/resources/alerter/config.tsx
@@ -1,7 +1,10 @@
 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;
@@ -54,3 +57,27 @@ 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>
+  );
+};
diff --git a/frontend/src/components/resources/alerter/index.tsx b/frontend/src/components/resources/alerter/index.tsx
index 239a1c8ed..f41ab2a3c 100644
--- a/frontend/src/components/resources/alerter/index.tsx
+++ b/frontend/src/components/resources/alerter/index.tsx
@@ -1,4 +1,4 @@
-import { NewResource } from "@components/layouts";
+import { NewResource, Section } from "@components/layouts";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import {
@@ -11,13 +11,13 @@ import {
 } from "@ui/select";
 import { RequiredResourceComponents } from "@types";
 import { Input } from "@ui/input";
-import { AlarmClock } from "lucide-react";
+import { AlarmClock, AlertTriangle } from "lucide-react";
 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 } from "./config";
-import { ResourceLink } from "@components/util";
+import { AlerterConfig, DeleteAlerter } from "./config";
+import { CopyResource, ResourceLink } from "@components/util";
 import { TagsWithBadge } from "@components/tags";
 
 const useAlerter = (id?: string) =>
@@ -32,6 +32,15 @@ export const AlerterComponents: RequiredResourceComponents = {
   Status: () => <></>,
   Page: {
     Config: AlerterConfig,
+    Danger: ({ id }) => (
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Alerter" id={id} />}
+      >
+        <DeleteAlerter id={id} />
+      </Section>
+    ),
   },
   Actions: [],
   Table: () => {
@@ -46,7 +55,7 @@ export const AlerterComponents: RequiredResourceComponents = {
           },
           {
             header: "Type",
-            accessorKey: "info.alerter_type"
+            accessorKey: "info.alerter_type",
           },
           {
             header: "Tags",
diff --git a/frontend/src/components/resources/build/config.tsx b/frontend/src/components/resources/build/config.tsx
index 52c03356d..33625cf5e 100644
--- a/frontend/src/components/resources/build/config.tsx
+++ b/frontend/src/components/resources/build/config.tsx
@@ -5,6 +5,7 @@ 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";
@@ -18,8 +19,9 @@ import {
   SelectValue,
 } from "@ui/select";
 import { Textarea } from "@ui/textarea";
-import { MinusCircle, PlusCircle } from "lucide-react";
+import { MinusCircle, PlusCircle, Trash } 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;
@@ -241,3 +243,28 @@ 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>
+  );
+};
diff --git a/frontend/src/components/resources/build/index.tsx b/frontend/src/components/resources/build/index.tsx
index 091caeb23..b5456e887 100644
--- a/frontend/src/components/resources/build/index.tsx
+++ b/frontend/src/components/resources/build/index.tsx
@@ -1,12 +1,12 @@
-import { NewResource } from "@components/layouts";
-import { ConfirmButton, ResourceLink } from "@components/util";
+import { NewResource, Section } from "@components/layouts";
+import { ConfirmButton, CopyResource, ResourceLink } from "@components/util";
 import { useExecute, useRead, useWrite } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
 import { Input } from "@ui/input";
-import { Ban, Hammer, History, Loader2 } from "lucide-react";
+import { AlertTriangle, Ban, Hammer, History, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { useToast } from "@ui/use-toast";
-import { BuildConfig } from "./config";
+import { BuildConfig, DeleteBuild } from "./config";
 import { fill_color_class_by_intention } from "@lib/color";
 import { BuildChart } from "./dashboard";
 import { BuildTable } from "./table";
@@ -43,6 +43,15 @@ export const BuildComponents: RequiredResourceComponents = {
   Status: () => <>Build</>,
   Page: {
     Config: ({ id }) => <BuildConfig id={id} />,
+    Danger: ({ id }) => (
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Build" id={id} />}
+      >
+        <DeleteBuild id={id} />
+      </Section>
+    ),
   },
   Icon: ({ id }) => {
     if (id) return <Icon id={id} />;
diff --git a/frontend/src/components/resources/builder/config.tsx b/frontend/src/components/resources/builder/config.tsx
index 898719a22..5655d2fc7 100644
--- a/frontend/src/components/resources/builder/config.tsx
+++ b/frontend/src/components/resources/builder/config.tsx
@@ -1,8 +1,11 @@
 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;
@@ -89,3 +92,28 @@ 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>
+  );
+};
diff --git a/frontend/src/components/resources/builder/index.tsx b/frontend/src/components/resources/builder/index.tsx
index d1ce114c1..c80535d5d 100644
--- a/frontend/src/components/resources/builder/index.tsx
+++ b/frontend/src/components/resources/builder/index.tsx
@@ -1,4 +1,4 @@
-import { NewResource } from "@components/layouts";
+import { NewResource, Section } from "@components/layouts";
 import { useTagsFilter } from "@components/tags";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
@@ -14,11 +14,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@ui/select";
-import { Cloud, Bot, Factory } from "lucide-react";
+import { Cloud, Bot, Factory, AlertTriangle } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { BuilderConfig } from "./config";
-import { ResourceLink } from "@components/util";
+import { BuilderConfig, DeleteBuilder } from "./config";
+import { CopyResource, ResourceLink } from "@components/util";
 
 const useBuilder = (id?: string) =>
   useRead("ListBuilders", {}).data?.find((d) => d.id === id);
@@ -46,6 +46,15 @@ export const BuilderComponents: RequiredResourceComponents = {
   Actions: [],
   Page: {
     Config: BuilderConfig,
+    Danger: ({ id }) => (
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Builder" id={id} />}
+      >
+        <DeleteBuilder id={id} />
+      </Section>
+    ),
   },
   Table: () => {
     const tags = useTagsFilter();
diff --git a/frontend/src/components/resources/deployment/index.tsx b/frontend/src/components/resources/deployment/index.tsx
index aab75b5dc..7f0c7a109 100644
--- a/frontend/src/components/resources/deployment/index.tsx
+++ b/frontend/src/components/resources/deployment/index.tsx
@@ -24,7 +24,7 @@ import {
   text_color_class_by_intention,
 } from "@lib/color";
 import { DeploymentTable } from "./table";
-import { ResourceLink } from "@components/util";
+import { CopyResource, ResourceLink } from "@components/util";
 import { DeploymentsChart } from "./dashboard";
 
 export const useDeployment = (id?: string) =>
@@ -78,7 +78,11 @@ export const DeploymentComponents: RequiredResourceComponents = {
     Logs: ({ id }) => <DeploymentLogs id={id} />,
     Config: ({ id }) => <DeploymentConfig id={id} />,
     Danger: ({ id }) => (
-      <Section title="Danger Zone" icon={<AlertTriangle className="w-4 h-4" />}>
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Deployment" id={id} />}
+      >
         <RenameDeployment id={id} />
         <DeleteDeployment id={id} />
       </Section>
diff --git a/frontend/src/components/resources/procedure/index.tsx b/frontend/src/components/resources/procedure/index.tsx
index 82a05ef57..e7253e93a 100644
--- a/frontend/src/components/resources/procedure/index.tsx
+++ b/frontend/src/components/resources/procedure/index.tsx
@@ -1,5 +1,10 @@
-import { NewResource } from "@components/layouts";
-import { ConfirmButton, ResourceLink } from "@components/util";
+import { NewResource, Section } from "@components/layouts";
+import {
+  ActionWithDialog,
+  ConfirmButton,
+  CopyResource,
+  ResourceLink,
+} from "@components/util";
 import { useExecute, useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import { RequiredResourceComponents } from "@types";
@@ -12,9 +17,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@ui/select";
-import { Loader2, Route } from "lucide-react";
+import { AlertTriangle, Loader2, Route, Trash } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ProcedureConfig } from "./config";
 import { ProcedureTable } from "./table";
 
@@ -30,6 +35,15 @@ export const ProcedureComponents: RequiredResourceComponents = {
   Status: () => <>Procedure</>,
   Page: {
     Config: ProcedureConfig,
+    Danger: ({ id }) => (
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Procedure" id={id} />}
+      >
+        <DeleteProcedure id={id} />
+      </Section>
+    ),
   },
   Actions: [
     ({ id }) => {
@@ -106,3 +120,28 @@ 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>
+  );
+};
diff --git a/frontend/src/components/resources/repo/config.tsx b/frontend/src/components/resources/repo/config.tsx
index a913fc4c5..97a668ca0 100644
--- a/frontend/src/components/resources/repo/config.tsx
+++ b/frontend/src/components/resources/repo/config.tsx
@@ -1,5 +1,10 @@
 import { Config } from "@components/config";
-import { ConfigItem, ResourceSelector, SystemCommand } from "@components/config/util";
+import {
+  ConfigItem,
+  ResourceSelector,
+  SystemCommand,
+} from "@components/config/util";
+import { ActionWithDialog } from "@components/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
 import {
@@ -9,7 +14,9 @@ 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;
@@ -97,3 +104,28 @@ 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>
+  );
+};
diff --git a/frontend/src/components/resources/repo/index.tsx b/frontend/src/components/resources/repo/index.tsx
index 3afa7cf9d..6bb35fc15 100644
--- a/frontend/src/components/resources/repo/index.tsx
+++ b/frontend/src/components/resources/repo/index.tsx
@@ -3,12 +3,12 @@ import { useRead, useWrite } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { DataTable } from "@ui/data-table";
-import { GitBranch } from "lucide-react";
+import { AlertTriangle, GitBranch } from "lucide-react";
 import { Link } from "react-router-dom";
-import { RepoConfig } from "./config";
-import { ResourceLink } from "@components/util";
+import { DeleteRepo, RepoConfig } from "./config";
+import { CopyResource, ResourceLink } from "@components/util";
 import { useState } from "react";
-import { NewResource } from "@components/layouts";
+import { NewResource, Section } from "@components/layouts";
 import { Input } from "@ui/input";
 
 const useRepo = (id?: string) =>
@@ -24,6 +24,15 @@ export const RepoComponents: RequiredResourceComponents = {
   Actions: [],
   Page: {
     Config: RepoConfig,
+    Danger: ({ id }) => (
+      <Section
+        title="Danger Zone"
+        icon={<AlertTriangle className="w-4 h-4" />}
+        actions={<CopyResource type="Repo" id={id} />}
+      >
+        <DeleteRepo id={id} />
+      </Section>
+    ),
   },
   Table: () => {
     const repos = useRead("ListRepos", {}).data;
diff --git a/frontend/src/components/util.tsx b/frontend/src/components/util.tsx
index ea22aec60..8a6155df2 100644
--- a/frontend/src/components/util.tsx
+++ b/frontend/src/components/util.tsx
@@ -170,7 +170,7 @@ export const CopyResource = ({
 }: {
   id: string;
   disabled?: boolean;
-  type: "Deployment" | "Build";
+  type: Exclude<UsableResource, "Server">;
 }) => {
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
@@ -203,8 +203,8 @@ export const CopyResource = ({
           <Input value={name} onChange={(e) => setName(e.target.value)} />
         </div>
         <DialogFooter>
-          <ActionButton
-            title="Confirm"
+          <ConfirmButton
+            title="Copy"
             icon={<Check className="w-4 h-4" />}
             disabled={!name}
             onClick={() => {