add delete action functionality

apps/web/app/environments/[environmentId]/events/EventActivityTab.tsx

@@ -61,13 +61,13 @@ export default function EventActivityTab({ environmentId, eventClassId }: Activi
         <div>
           <Label className="text-xs font-normal text-slate-500">Created on</Label>
           <p className=" text-xs text-slate-700">
-            {convertDateTimeStringShort(eventClass.createdAt.toString())}
+            {convertDateTimeStringShort(eventClass.createdAt?.toString())}
           </p>
         </div>{" "}
         <div>
           <Label className=" text-xs font-normal text-slate-500">Last updated</Label>
           <p className=" text-xs text-slate-700">
-            {convertDateTimeStringShort(eventClass.updatedAt.toString())}
+            {convertDateTimeStringShort(eventClass.updatedAt?.toString())}
           </p>
         </div>
         <div>

apps/web/app/environments/[environmentId]/events/EventSettingsTab.tsx

@@ -4,7 +4,7 @@ import { ErrorComponent } from "@formbricks/ui";
 import { Input } from "@formbricks/ui";
 import { Label } from "@formbricks/ui";
 import { RadioGroup, RadioGroupItem } from "@formbricks/ui";
-import { useEventClass, useEventClasses } from "@/lib/eventClasses/eventClasses";
+import { deleteEventClass, useEventClass, useEventClasses } from "@/lib/eventClasses/eventClasses";
 import { useEventClassMutation } from "@/lib/eventClasses/mutateEventClasses";
 import { Controller, useForm } from "react-hook-form";
 import type { NoCodeConfig, Event } from "@formbricks/types/events";
@@ -12,6 +12,8 @@ import { testURLmatch } from "./testURLmatch";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import clsx from "clsx";
+import { TrashIcon } from "@heroicons/react/24/outline";
+import DeleteDialog from "@/components/shared/DeleteDialog";
 
 interface EventSettingsTabProps {
   environmentId: string;
@@ -21,6 +23,7 @@ interface EventSettingsTabProps {
 
 export default function EventSettingsTab({ environmentId, eventClassId, setOpen }: EventSettingsTabProps) {
   const { eventClass, isLoadingEventClass, isErrorEventClass } = useEventClass(environmentId, eventClassId);
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 
   const { register, handleSubmit, control, watch } = useForm({
     defaultValues: {
@@ -255,6 +258,17 @@ export default function EventSettingsTab({ environmentId, eventClassId, setOpen
         </div>
         <div className="flex justify-between border-t border-slate-200 py-6">
           <div>
+            {eventClass.type !== "automatic" && (
+              <Button
+                type="button"
+                variant="warn"
+                onClick={() => setOpenDeleteDialog(true)}
+                StartIcon={TrashIcon}
+                className="mr-3">
+                Delete
+              </Button>
+            )}
+
             <Button variant="secondary" href="https://formbricks.com/docs" target="_blank">
               Read Docs
             </Button>
@@ -268,6 +282,22 @@ export default function EventSettingsTab({ environmentId, eventClassId, setOpen
           )}
         </div>
       </form>
+      <DeleteDialog
+        open={openDeleteDialog}
+        setOpen={setOpenDeleteDialog}
+        deleteWhat={"Action"}
+        text="Are you sure you want to delete this action? This also removes this action as a trigger from all your surveys."
+        onDelete={async () => {
+          setOpen(false);
+          try {
+            await deleteEventClass(environmentId, eventClass.id);
+            mutateEventClasses();
+            toast.success("Action deleted successfully");
+          } catch (error) {
+            toast.error("Something went wrong. Please try again.");
+          }
+        }}
+      />
     </div>
   );
 }

apps/web/components/shared/ModalWithTabs.tsx

@@ -1,5 +1,5 @@
 import Modal from "@/components/shared/Modal";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface ModalWithTabsProps {
   open: boolean;
@@ -22,6 +22,12 @@ export default function ModalWithTabs({ open, setOpen, tabs, icon, label, descri
     setActiveTab(index);
   };
 
+  useEffect(() => {
+    if (!open) {
+      setActiveTab(0);
+    }
+  }, [open]);
+
   return (
     <Modal open={open} setOpen={setOpen} noPadding>
       <div className="flex h-full flex-col rounded-lg">

apps/web/lib/eventClasses/eventClasses.ts

@@ -43,3 +43,17 @@ export const createEventClass = async (environmentId, eventClass: Event) => {
 
   return response.json();
 };
+
+export const deleteEventClass = async (environmentId: string, eventClassId: string) => {
+  try {
+    const res = await fetch(`/api/v1/environments/${environmentId}/event-classes/${eventClassId}`, {
+      method: "DELETE",
+    });
+    if (!res.ok) {
+      throw Error(`deleteEventClass: unable to delete eventClass: ${res.statusText}`);
+    }
+  } catch (error) {
+    console.error(error);
+    throw Error(`deleteEventClass: unable to delete eventClass: ${error.message}`);
+  }
+};

apps/web/pages/api/v1/environments/[environmentId]/event-classes/[eventClassId]/index.ts

@@ -139,7 +139,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
       return res.status(403).json({ message: "Automatic event classes cannot be deleted" });
     }
 
-    const prismaRes = await prisma.survey.delete({
+    const prismaRes = await prisma.eventClass.delete({
       where: { id: eventClassId },
     });
     return res.json(prismaRes);

packages/ui/components/Button.tsx

@@ -111,8 +111,8 @@ export const Button: React.ForwardRefExoticComponent<
       {StartIcon && (
         <StartIcon
           className={cn(
-            "inline",
-            size === "icon" ? "h-4 w-4 " : "-ml-1 h-4 w-4 ltr:mr-2 rtl:-mr-1 rtl:ml-2",
+            "flex",
+            size === "icon" ? "h-4 w-4 " : "-ml-1 mr-1 h-3 w-3",
             startIconClassName || ""
           )}
         />