Compose delete refactoring

web/src/app/compose/compose/actions.tsx

@@ -8,16 +8,22 @@ import MainArea from "@/components/widgets/main-area"
 import TopBar from "@/components/widgets/top-bar"
 import TopBarActions from "@/components/widgets/top-bar-actions"
 import MainContent from "@/components/widgets/main-content"
-import { useParams } from "react-router-dom"
-import { useEffect } from "react"
-import { wsApiBaseUrl } from "@/lib/api-base-url"
+import { useNavigate, useParams } from "react-router-dom"
+import { useEffect, useState } from "react"
+import apiBaseUrl, { wsApiBaseUrl } from "@/lib/api-base-url"
 import { AttachAddon } from "@xterm/addon-attach"
 import { FitAddon } from "@xterm/addon-fit"
 import { Button } from "@/components/ui/button"
-import { newTerminal, recreateTerminalElement } from "@/lib/utils"
+import {
+  newTerminal,
+  recreateTerminalElement,
+  toastFailed,
+  toastSuccess,
+} from "@/lib/utils"
 import useNodeHead from "@/hooks/useNodeHead"
 import useNodeComposeItem from "@/hooks/useNodeComposeItem"
-import DeleteNodeComposeDialog from "./dialogs/delete-node-compose-dialog"
+import useComposeLibraryItemList from "@/hooks/useComposeLibraryItemList"
+import DeleteDialog from "@/components/delete-dialog"
 
 export default function ComposeActions() {
   const { nodeId, composeProjectId } = useParams()
@@ -26,6 +32,8 @@ export default function ComposeActions() {
     nodeId!,
     composeProjectId!
   )
+  const { mutateComposeLibraryItemList } = useComposeLibraryItemList()
+  const navigate = useNavigate()
 
   let terminal = newTerminal()
   let fitAddon = new FitAddon()
@@ -63,6 +71,29 @@ export default function ComposeActions() {
     })
   }
 
+  const [deleteInProgress, setDeleteInProgress] = useState(false)
+  const handleDelete = async () => {
+    setDeleteInProgress(true)
+    const response = await fetch(
+      `${apiBaseUrl()}/nodes/${nodeId}/compose/${composeProjectId}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+      }
+    )
+    if (!response.ok) {
+      const r = await response.json()
+      toastFailed(r.errors?.body)
+    } else {
+      mutateComposeLibraryItemList()
+      setTimeout(() => {
+        toastSuccess("Compose project deleted.")
+        navigate(`/nodes/${nodeId}/compose`)
+      }, 500)
+    }
+    setDeleteInProgress(false)
+  }
+
   return (
     <MainArea>
       <TopBar>
@@ -109,7 +140,13 @@ export default function ComposeActions() {
           >
             Down
           </Button>
-          <DeleteNodeComposeDialog />
+          <DeleteDialog
+            deleteCaption="Delete"
+            title="Delete Compose Project"
+            message={`Are you sure you want to delete project '${nodeComposeItem?.projectName}'?`}
+            deleteHandler={handleDelete}
+            isProcessing={deleteInProgress}
+          />
         </div>
         <div id="terminalContainer">
           <h2 className="mb-2 font-bold">Action Logs</h2>

web/src/app/compose/compose/variable-editor/compose-variable-editor.tsx

@@ -14,8 +14,9 @@ import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"
 import { CLASSES_TABLE_ACTION_ICON } from "@/lib/utils"
 import { INodeComposeVariable } from "@/lib/api-models"
 import { useState } from "react"
-import DeleteComposeVariableDialog from "./delete-compose-variable-dialog"
 import EditComposeVariableDialog from "./edit-compose-variable-dialog"
+import apiBaseUrl from "@/lib/api-base-url"
+import DeleteDialog from "@/components/delete-dialog"
 
 export default function ComposeVariableEditor({
   nodeId,
@@ -28,18 +29,45 @@ export default function ComposeVariableEditor({
     nodeId!,
     nodeComposeProjectId
   )
+  const { mutateNodeComposeVariables } = useNodeComposeVariables(
+    nodeId,
+    nodeComposeProjectId
+  )
+
   const [editVariableOpen, setEditVariableOpen] = useState(false)
-  const [deleteVariableOpen, setDeleteVariableOpen] = useState(false)
   const [variable, setVariable] = useState<INodeComposeVariable | null>(null)
 
   function handleEditVariable(item: INodeComposeVariable) {
     setVariable({ ...item })
     setEditVariableOpen(true)
   }
 
-  function handleDeleteVariable(item: INodeComposeVariable) {
+  const [deleteVariableConfirmationOpen, setDeleteVariableConfirmationOpen] =
+    useState(false)
+  function handleDeleteVariableConfirmation(item: INodeComposeVariable) {
     setVariable({ ...item })
-    setDeleteVariableOpen(true)
+    setDeleteVariableConfirmationOpen(true)
+  }
+
+  const [deleteInProgress, setDeleteInProgress] = useState(false)
+  const handleDeleteVariable = async () => {
+    setDeleteInProgress(true)
+    const response = await fetch(
+      `${apiBaseUrl()}/nodes/${nodeId}/compose/${nodeComposeProjectId}/variables/${variable?.id}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+      }
+    )
+    if (!response.ok) {
+      setDeleteVariableConfirmationOpen(false)
+    } else {
+      mutateNodeComposeVariables()
+      setTimeout(() => {
+        setDeleteVariableConfirmationOpen(false)
+      }, 500)
+    }
+    setDeleteInProgress(false)
   }
 
   return (
@@ -53,13 +81,15 @@ export default function ComposeVariableEditor({
           nodeComposeProjectId={nodeComposeProjectId}
         />
       )}
-      {deleteVariableOpen && (
-        <DeleteComposeVariableDialog
-          openState={deleteVariableOpen}
-          setOpenState={setDeleteVariableOpen}
-          variable={variable!}
-          nodeId={nodeId}
-          nodeComposeProjectId={nodeComposeProjectId}
+      {deleteVariableConfirmationOpen && (
+        <DeleteDialog
+          openState={deleteVariableConfirmationOpen}
+          setOpenState={setDeleteVariableConfirmationOpen}
+          deleteCaption=""
+          deleteHandler={handleDeleteVariable}
+          isProcessing={deleteInProgress}
+          title="Delete Variable"
+          message={`Are you sure you want to delete variable '${variable?.name}?'`}
         />
       )}
       <h2>
@@ -107,7 +137,7 @@ export default function ComposeVariableEditor({
                   title="Delete"
                   onClick={(e) => {
                     e.stopPropagation()
-                    handleDeleteVariable(item)
+                    handleDeleteVariableConfirmation(item)
                   }}
                 >
                   <TrashIcon className={CLASSES_TABLE_ACTION_ICON} />