fix: refacore service database part

internal/application/delete-service.go

@@ -21,6 +21,7 @@ func DeleteService(deployService *service.DeployService, serviceId string) error
 	}
 	deployService.DockerAdapter.ConnectClient(server)
 	deployService.DockerAdapter.Delete(s.Name, false)
+	// TODO: remove envs of the service on the deploymeent
 
 	err = deployService.DatabaseAdapter.DeleteServiceById(serviceId)
 	return err

web/src/DeployPage.tsx

@@ -11,32 +11,20 @@ import DeployLogs from "./components/DeployLogs";
 import DeploySettings from "./components/DeploySettings";
 import { ServerDto } from "./services/getServerListApi";
 import { getServerByIdApi } from "./services/getServerById";
-import AddService from "./components/AddServices";
-import ServiceListDeploy from "./components/ServiceListDeploy";
-import {
-  Service,
-  getServicesByDeployIdApi,
-} from "./services/getServicesByDeployId";
+import ServicesManagements from "./components/databaseServices/ServicesManagements";
 
 export default function DeployPage() {
   const { id } = useParams();
   const navigate = useNavigate();
   const [deploy, setDeploy] = useState<DeployDto | null>(null);
   const [server, setServer] = useState<ServerDto | null>(null);
-  const [services, setServices] = useState<Service[]>([]);
-  const [loadingNewService, setLoadingNewService] = useState(false);
 
   async function fetchDeployById(id: string) {
     const res = await getDeployByIdApi(id);
     setDeploy(res);
     return res;
   }
 
-  async function fetchServiceList(deployId: string) {
-    const res = await getServicesByDeployIdApi(deployId);
-    setServices(res);
-  }
-
   async function fetchServer(serverId: string) {
     const res = await getServerByIdApi(serverId);
     setServer(res);
@@ -78,17 +66,7 @@ export default function DeployPage() {
           <TabsTrigger value="logs">Logs</TabsTrigger>
         </TabsList>
         <TabsContent value="database-service">
-          <AddService
-            deployId={deploy.id}
-            setLoading={setLoadingNewService}
-            fetchServiceList={fetchServiceList}
-          />
-          <ServiceListDeploy
-            deployId={deploy.id}
-            services={services}
-            loadingNewService={loadingNewService}
-            fetchServiceList={fetchServiceList}
-          />
+          <ServicesManagements deployId={deploy.id} />
         </TabsContent>
         <TabsContent value="logs">
           <DeployLogs id={deploy.id} />

web/src/components/AddServices.tsx → web/src/components/databaseServices/AddServices.tsx

@@ -1,24 +1,14 @@
 import { ServiceDto, getServiceListApi } from "@/services/getServicesApi";
 import { useEffect, useState } from "react";
-import DatabaseCard from "./DatabaseCard";
-import { Button } from "./ui/button";
-import { FileSlidersIcon } from "lucide-react";
+import { Button } from "../ui/button";
 
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "./ui/command";
 import { createServiceApi } from "@/services/createServiceApi";
+import CommandModal from "./CommandModal";
 
 type AddServiceProps = {
   deployId: string;
   setLoading: (loading: boolean) => void;
-  fetchServiceList: (deployId: string) => Promise<void>;
+  fetchServiceList: () => Promise<void>;
 };
 
 export default function AddService({
@@ -51,7 +41,7 @@ export default function AddService({
       setLoading(true);
       setOpen(false);
       await createServiceApi(serviceName, deployId);
-      await fetchServiceList(deployId);
+      await fetchServiceList();
     } catch (e) {
       console.error(e);
     }
@@ -70,25 +60,12 @@ export default function AddService({
           <span className="text-xs">⌘</span>K
         </kbd>
       </Button>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type to search and lauch a service in the list..." />
-        <CommandList onSelect={() => setOpen(false)}>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Local Config">
-            <CommandItem className="flex gap-3" value="compose">
-              <FileSlidersIcon className="w-5"></FileSlidersIcon>
-              <span className="h-4">From your docker-compose file</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Other sercices">
-            {services.map((s) => (
-              <DatabaseCard key={s.name} service={s} onSelect={createService} />
-            ))}
-            {/* TODO: command item to add new service link to github issue template */}
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
+      <CommandModal
+        open={open}
+        setOpen={setOpen}
+        services={services}
+        createService={createService}
+      />
     </>
   );
 }

web/src/components/databaseServices/CommandModal.tsx

@@ -0,0 +1,48 @@
+import { FileSlidersIcon } from "lucide-react";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../ui/command";
+import NewServiceItem from "./NewServiceItem";
+import { ServiceDto } from "@/services/getServicesApi";
+
+type CommandModalProps = {
+  open: boolean;
+  services: ServiceDto[];
+  setOpen: (open: boolean) => void;
+  createService: (serviceId: string) => void;
+};
+
+export default function CommandModal({
+  open,
+  setOpen,
+  services,
+  createService,
+}: CommandModalProps) {
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type to search and lauch a service in the list..." />
+      <CommandList onSelect={() => setOpen(false)}>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Local Config">
+          <CommandItem className="flex gap-3" value="compose">
+            <FileSlidersIcon className="w-5"></FileSlidersIcon>
+            <span className="h-4">From your docker-compose file</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Other sercices">
+          {services.map((s) => (
+            <NewServiceItem key={s.name} service={s} onSelect={createService} />
+          ))}
+          {/* TODO: command item to add new service link to github issue template */}
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}

web/src/components/databaseServices/DeleteServiceAlert.tsx

@@ -0,0 +1,72 @@
+import { deleteServiceApi } from "@/services/deleteServiceApi";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@radix-ui/react-dialog";
+import { DialogFooter, DialogHeader } from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Service } from "@/services/getServicesByDeployId";
+
+type DeleteServiceAlertProps = {
+  deployId: string;
+  serviceToDelete: Service | null;
+  fetchServiceList: () => Promise<void>;
+  setServiceToDelete: (service: Service | null) => void;
+};
+
+export default function DeleteServiceAlert({
+  deployId,
+  serviceToDelete,
+  fetchServiceList,
+  setServiceToDelete,
+}: DeleteServiceAlertProps) {
+  async function deleteService() {
+    const serviceId = serviceToDelete?.id;
+
+    if (!serviceId) {
+      return;
+    }
+    try {
+      await deleteServiceApi(deployId, serviceId);
+      await fetchServiceList();
+    } catch (e) {
+      console.error(e);
+    }
+    setServiceToDelete(null);
+  }
+
+  return (
+    <Dialog
+      open={serviceToDelete !== null}
+      onOpenChange={(open) => {
+        if (open) {
+          return;
+        } else {
+          setServiceToDelete(null);
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            Are you sure you want to delete this service?
+          </DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          <div>
+            This action is irreversible. Deleting this service will remove all
+            data associated with it.
+          </div>
+        </DialogDescription>
+        <DialogFooter>
+          <Button onClick={() => setServiceToDelete(null)}>Cancel</Button>
+          <Button variant="destructive" onClick={deleteService}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/DatabaseCard.tsx → web/src/components/databaseServices/NewServiceItem.tsx

@@ -1,12 +1,15 @@
 import { ServiceDto } from "@/services/getServicesApi";
-import { CommandItem } from "./ui/command";
+import { CommandItem } from "../ui/command";
 
 type DatabaseCardProps = {
   service: ServiceDto;
   onSelect: (serviceId: string) => void;
 };
 
-export default function DatabaseCard({ service, onSelect }: DatabaseCardProps) {
+export default function NewServiceItem({
+  service,
+  onSelect,
+}: DatabaseCardProps) {
   return (
     <CommandItem
       onSelect={() => onSelect(service.name)}