Deleting endpoint working (#875)

Author: matt-aitken

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx

@@ -47,6 +47,9 @@ export function ConfigureEndpointSheet({ slug, endpoint, onClose }: ConfigureEnd
   const refreshEndpointFetcher = useFetcher();
   const refreshingEndpoint = refreshEndpointFetcher.state !== "idle";
 
+  const deleteEndpointFetcher = useFetcher();
+  const deletingEndpoint = deleteEndpointFetcher.state !== "idle";
+
   const revalidator = useRevalidator();
   const events = useEventSource(endpointStreamingPath({ id: endpoint.environment.id }), {
     event: "message",
@@ -70,12 +73,30 @@ export function ConfigureEndpointSheet({ slug, endpoint, onClose }: ConfigureEnd
     >
       <SheetContent size="lg">
         <SheetHeader>
-          <Header1>
-            <div className="flex items-center gap-2">
-              <EnvironmentLabel environment={{ type: endpoint.environment.type }} />
-              <Header1>Configure endpoint</Header1>
-            </div>
-          </Header1>
+          <div className="flex w-full items-center justify-between">
+            <Header1>
+              <div className="flex items-center gap-2">
+                <EnvironmentLabel environment={{ type: endpoint.environment.type }} />
+                <Header1>Configure endpoint</Header1>
+              </div>
+            </Header1>
+            {endpoint.state === "configured" && (
+              <deleteEndpointFetcher.Form
+                method="post"
+                action={`/resources/environments/${endpoint.environment.id}/endpoint/${endpoint.id}`}
+              >
+                <input type="hidden" name="action" value="delete" />
+                <Button
+                  variant="danger/small"
+                  type="submit"
+                  disabled={deletingEndpoint}
+                  LeadingIcon={deletingEndpoint ? "spinner-white" : undefined}
+                >
+                  {deletingEndpoint ? "Deleting" : "Delete"}
+                </Button>
+              </deleteEndpointFetcher.Form>
+            )}
+          </div>
         </SheetHeader>
         <SheetBody>
           <setEndpointUrlFetcher.Form
@@ -123,6 +144,7 @@ export function ConfigureEndpointSheet({ slug, endpoint, onClose }: ConfigureEnd
                   method="post"
                   action={`/resources/environments/${endpoint.environment.id}/endpoint/${endpoint.id}`}
                 >
+                  <input type="hidden" name="action" value="refresh" />
                   <Callout
                     variant="info"
                     icon={

apps/webapp/app/routes/resources.environments.$environmentParam.endpoint.$endpointParam.ts

@@ -1,28 +1,52 @@
 import { ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { z } from "zod";
+import { DeleteEndpointIndexService } from "~/services/endpoints/deleteEndpointService";
 import { IndexEndpointService } from "~/services/endpoints/indexEndpoint.server";
+import { requireUserId } from "~/services/session.server";
 import { workerQueue } from "~/services/worker.server";
 
 const ParamsSchema = z.object({
   environmentParam: z.string(),
   endpointParam: z.string(),
 });
 
-export async function action({ params }: ActionFunctionArgs) {
-  const { endpointParam } = ParamsSchema.parse(params);
+const BodySchema = z.discriminatedUnion("action", [
+  z.object({ action: z.literal("refresh") }),
+  z.object({ action: z.literal("delete") }),
+]);
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  if (request.method !== "POST") {
+    throw new Response(null, { status: 405 });
+  }
 
   try {
-    const service = new IndexEndpointService();
-    await service.call(endpointParam, "MANUAL");
+    const { endpointParam } = ParamsSchema.parse(params);
+    const form = await request.formData();
+    const formObject = Object.fromEntries(form.entries());
+    const { action } = BodySchema.parse(formObject);
+
+    switch (action) {
+      case "refresh": {
+        const service = new IndexEndpointService();
+        await service.call(endpointParam, "MANUAL");
 
-    // Enqueue the endpoint to be probed in 10 seconds
-    await workerQueue.enqueue(
-      "probeEndpoint",
-      { id: endpointParam },
-      { jobKey: `probe:${endpointParam}`, runAt: new Date(Date.now() + 10000) }
-    );
+        // Enqueue the endpoint to be probed in 10 seconds
+        await workerQueue.enqueue(
+          "probeEndpoint",
+          { id: endpointParam },
+          { jobKey: `probe:${endpointParam}`, runAt: new Date(Date.now() + 10000) }
+        );
 
-    return json({ success: true });
+        return json({ success: true });
+      }
+      case "delete": {
+        const service = new DeleteEndpointIndexService();
+        await service.call(endpointParam, userId);
+        return json({ success: true });
+      }
+    }
   } catch (e) {
     return json({ success: false, error: e }, { status: 400 });
   }

apps/webapp/app/services/endpoints/deleteEndpointService.ts

@@ -0,0 +1,25 @@
+import { PrismaClient } from "@trigger.dev/database";
+import { prisma } from "~/db.server";
+
+export class DeleteEndpointIndexService {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call(id: string, userId: string): Promise<void> {
+    await this.#prismaClient.endpoint.delete({
+      where: {
+        id,
+        organization: {
+          members: {
+            some: {
+              userId,
+            },
+          },
+        },
+      },
+    });
+  }
+}