feat: server rendering of event actions summary page

apps/web/app/environments/[environmentId]/attributes/page.tsx

@@ -1,11 +1,11 @@
 import AttributeClassesList from "./AttributeClassesList";
-import EventsAttributesTabs from "@/components/events_attributes/EventsAttributesTabs";
+import ActionsAttributesTabs from "@/components/events_attributes/EventsAttributesTabs";
 import ContentWrapper from "@/components/shared/ContentWrapper";
 
 export default function AttributesPage({ params }) {
   return (
     <div className="">
-      <EventsAttributesTabs activeId="attributes" environmentId={params.environmentId} />
+      <ActionsAttributesTabs activeId="attributes" environmentId={params.environmentId} />
       <ContentWrapper>
         <AttributeClassesList environmentId={params.environmentId} />
       </ContentWrapper>

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { Button } from "@formbricks/ui";
+import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { useState } from "react";
+import AddNoCodeEventModal from "./AddNoCodeEventModal";
+import ActionDetailModal from "./EventDetailModal";
+import { TranformEventClassOutput } from "@formbricks/lib/services/action";
+import { useRouter } from "next/navigation";
+
+export default function ActionClassesListRender({
+  environmentId,
+  actionClasses,
+  children: [TableHeading, actionRows],
+}: {
+  environmentId: string;
+  actionClasses: Array<TranformEventClassOutput>;
+  children: [JSX.Element, JSX.Element[]];
+}) {
+  const router = useRouter();
+  const [isActionDetailModalOpen, setActionDetailModalOpen] = useState(false);
+  const [isAddActionModalOpen, setAddActionModalOpen] = useState(false);
+
+  const [activeActionClass, setActiveActionClass] = useState("" as any);
+
+  const handleOpenActionDetailModalClick = (e, actionClass) => {
+    e.preventDefault();
+    setActiveActionClass(actionClass);
+    setActionDetailModalOpen(true);
+  };
+
+  const mutateActionClasses = () => {
+    router.refresh();
+  };
+
+  return (
+    <>
+      <div className="mb-6 text-right">
+        <Button
+          variant="darkCTA"
+          onClick={() => {
+            setAddActionModalOpen(true);
+          }}>
+          <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+          Add Action
+        </Button>
+      </div>
+      <div className="rounded-lg border border-slate-200">
+        {TableHeading}
+        <div className="grid-cols-7">
+          {actionClasses.map((actionClass, index) => (
+            <button
+              onClick={(e) => {
+                handleOpenActionDetailModalClick(e, actionClass);
+              }}
+              className="w-full"
+              key={actionClass.id}>
+              {actionRows[index]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <ActionDetailModal
+        environmentId={environmentId}
+        open={isActionDetailModalOpen}
+        setOpen={setActionDetailModalOpen}
+        eventClass={activeActionClass}
+      />
+      <AddNoCodeEventModal
+        environmentId={environmentId}
+        open={isAddActionModalOpen}
+        setOpen={setAddActionModalOpen}
+        mutateEventClasses={mutateActionClasses}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+import ActionClassesListRender from "@/app/environments/[environmentId]/events/ActionClassListRender";
+import { getActionClasses } from "@formbricks/lib/services/action";
+import ActionClassDataRow from "@/app/environments/[environmentId]/events/RowData";
+import TableHeading from "@/app/environments/[environmentId]/events/TableHeading";
+
+export default async function ActionClassesList({ environmentId }: { environmentId: string }) {
+  let actionClasses = await getActionClasses(environmentId);
+  return (
+    <>
+      <ActionClassesListRender environmentId={environmentId} actionClasses={actionClasses}>
+        <TableHeading />
+        {actionClasses.map((actionClass) => (
+          <ActionClassDataRow key={actionClass.id} actionClass={actionClass} />
+        ))}
+      </ActionClassesListRender>
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { timeSinceConditionally } from "@formbricks/lib/time";
+import { CodeBracketIcon, CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { SparklesIcon } from "lucide-react";
+
+export default function ActionClassDataRow({ actionClass }) {
+  return (
+    <div className="m-2 grid h-16  grid-cols-6 content-center rounded-lg hover:bg-slate-100">
+      <div className="col-span-4 flex items-center pl-6 text-sm">
+        <div className="flex items-center">
+          <div className="h-5 w-5 flex-shrink-0 text-slate-500">
+            {actionClass.type === "code" ? (
+              <CodeBracketIcon />
+            ) : actionClass.type === "noCode" ? (
+              <CursorArrowRaysIcon />
+            ) : actionClass.type === "automatic" ? (
+              <SparklesIcon />
+            ) : null}
+          </div>
+          <div className="ml-4 text-left">
+            <div className="font-medium text-slate-900">{actionClass.name}</div>
+            <div className="text-xs text-slate-400">{actionClass.description}</div>
+          </div>
+        </div>
+      </div>
+      <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
+        {actionClass.eventCount}
+      </div>
+      <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
+        {timeSinceConditionally(actionClass.createdAt.toString())}
+      </div>
+      <div className="text-center"></div>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+export default function TableHeading() {
+  return (
+    <>
+      <div className="grid h-12 grid-cols-6 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+        <span className="sr-only">Edit</span>
+        <div className="col-span-4 pl-6 ">User Actions</div>
+        <div className="text-center"># Reps</div>
+        <div className="text-center">Created</div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+import ActionsAttributesTabs from "@/components/events_attributes/EventsAttributesTabs";
+import ContentWrapper from "@/components/shared/ContentWrapper";
+import { Button } from "@formbricks/ui";
+import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+
+export default function Loading() {
+  return (
+    <>
+      <ActionsAttributesTabs activeId="events" environmentId={""} />
+      <ContentWrapper>
+        <div className="mb-6 text-right">
+          <Button
+            variant="darkCTA"
+            className="pointer-events-none animate-pulse cursor-not-allowed select-none bg-gray-200">
+            <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+            Loading
+          </Button>
+        </div>
+
+        <div className="rounded-lg border border-slate-200">
+          <div className="grid h-12 grid-cols-6 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+            <span className="sr-only">Edit</span>
+            <div className="col-span-4 pl-6 ">User Actions</div>
+            <div className="text-center"># Reps</div>
+            <div className="text-center">Created</div>
+          </div>
+        </div>
+
+        {[...Array(3)].map((_, index) => (
+          <div
+            key={index}
+            className="m-2 grid h-16  grid-cols-6 content-center rounded-lg hover:bg-slate-100">
+            <div className="col-span-4 flex items-center pl-6 text-sm">
+              <div className="flex items-center">
+                <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-gray-200 text-slate-500"></div>
+                <div className="ml-4 text-left">
+                  <div className="font-medium text-slate-900">
+                    <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-gray-200"></div>
+                  </div>
+                  <div className="mt-1 text-xs text-slate-400">
+                    <div className="h-2 w-24 animate-pulse rounded-full bg-gray-200"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="m-20 h-4 animate-pulse rounded-full bg-gray-200"></div>
+            </div>
+            <div className="my-auto whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="m-2 h-4 animate-pulse rounded-full bg-gray-200"></div>
+            </div>
+            <div className="text-center"></div>
+          </div>
+        ))}
+      </ContentWrapper>
+    </>
+  );
+}

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

@@ -1,14 +1,14 @@
-import EventClassesList from "./EventClassesList";
-import EventsAttributesTabs from "@/components/events_attributes/EventsAttributesTabs";
+import ActionsAttributesTabs from "@/components/events_attributes/EventsAttributesTabs";
+import ActionClassesList from "@/app/environments/[environmentId]/events/ActionClassesList";
 import ContentWrapper from "@/components/shared/ContentWrapper";
 
-export default function EventsPage({ params }) {
+export default function ActionsPage({ params }) {
   return (
-    <div className="">
-      <EventsAttributesTabs activeId="events" environmentId={params.environmentId} />
+    <>
+      <ActionsAttributesTabs activeId="events" environmentId={params.environmentId} />
       <ContentWrapper>
-        <EventClassesList environmentId={params.environmentId} />
+        <ActionClassesList environmentId={params.environmentId}></ActionClassesList>
       </ContentWrapper>
-    </div>
+    </>
   );
 }

apps/web/components/events_attributes/EventsAttributesTabs.tsx

@@ -6,7 +6,7 @@ interface EventsAttributesTabsProps {
   environmentId: string;
 }
 
-export default function EventsAttributesTabs({ activeId, environmentId }: EventsAttributesTabsProps) {
+export default function ActionsAttributesTabs({ activeId, environmentId }: EventsAttributesTabsProps) {
   const tabs = [
     {
       id: "events",