Add active & inactive surveys to attribute details view (#400)

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

@@ -1,24 +1,44 @@
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useAttributeClass } from "@/lib/attributeClasses/attributeClasses";
 import { capitalizeFirstLetter } from "@/lib/utils";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { Label } from "@formbricks/ui";
+import { ErrorComponent, Label } from "@formbricks/ui";
 import { TagIcon } from "@heroicons/react/24/solid";
-import type { AttributeClass } from "@prisma/client";
 
 interface EventActivityTabProps {
-  attributeClass: AttributeClass;
+  attributeClassId: string;
+  environmentId: string;
 }
 
-export default function AttributeActivityTab({ attributeClass }: EventActivityTabProps) {
+export default function AttributeActivityTab({ environmentId, attributeClassId }: EventActivityTabProps) {
+  const { attributeClass, isLoadingAttributeClass, isErrorAttributeClass } = useAttributeClass(
+    environmentId,
+    attributeClassId
+  );
+
+  if (isLoadingAttributeClass) return <LoadingSpinner />;
+  if (isErrorAttributeClass) return <ErrorComponent />;
+
   return (
     <div className="grid grid-cols-3 pb-2">
       <div className="col-span-2 space-y-4 pr-6">
         <div>
           <Label className="text-slate-500">Active surveys</Label>
-          <p className="text-sm text-slate-900">-</p>
+          {attributeClass.activeSurveys.length === 0 && <p className="text-sm text-slate-900">-</p>}
+          {attributeClass.activeSurveys.map((surveyName) => (
+            <p key={surveyName} className="text-sm text-slate-900">
+              {surveyName}
+            </p>
+          ))}
         </div>
         <div>
           <Label className="text-slate-500">Inactive surveys</Label>
-          <p className="text-sm text-slate-900">-</p>
+          {attributeClass.inactiveSurveys.length === 0 && <p className="text-sm text-slate-900">-</p>}
+          {attributeClass.inactiveSurveys.map((surveyName) => (
+            <p key={surveyName} className="text-sm text-slate-900">
+              {surveyName}
+            </p>
+          ))}
         </div>
       </div>
       <div className="col-span-1 space-y-3 rounded-lg border border-slate-100 bg-slate-50 p-2">

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

@@ -20,7 +20,7 @@ export default function AttributeDetailModal({
   const tabs = [
     {
       title: "Activity",
-      children: <AttributeActivityTab attributeClass={attributeClass} />,
+      children: <AttributeActivityTab environmentId={environmentId} attributeClassId={attributeClass.id} />,
     },
     {
       title: "Settings",

apps/web/lib/attributeClasses/attributeClasses.ts

@@ -1,5 +1,6 @@
 import useSWR from "swr";
 import { fetcher } from "@formbricks/lib/fetcher";
+import type { AttributeClass } from "@prisma/client";
 
 export const useAttributeClasses = (environmentId) => {
   const { data, isLoading, error, mutate, isValidating } = useSWR(
@@ -15,3 +16,23 @@ export const useAttributeClasses = (environmentId) => {
     mutateAttributeClasses: mutate,
   };
 };
+
+type AttributeClassWithSurvey = AttributeClass & {
+  activeSurveys: string[];
+  inactiveSurveys: string[];
+};
+
+export const useAttributeClass = (environmentId: string, attributeClassId: string) => {
+  const { data, isLoading, error, mutate, isValidating } = useSWR(
+    `/api/v1/environments/${environmentId}/attribute-classes/${attributeClassId}`,
+    fetcher
+  );
+
+  return {
+    attributeClass: data as AttributeClassWithSurvey,
+    isLoadingAttributeClass: isLoading,
+    isErrorAttributeClass: error,
+    isValidatingAttributeClass: isValidating,
+    mutateAttributeClass: mutate,
+  };
+};

apps/web/pages/api/v1/environments/[environmentId]/attribute-classes/[attributeClassId]/index.ts

@@ -27,7 +27,48 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
       },
     });
 
-    return res.json(attributeClass);
+    const activeSurveysData = await prisma.surveyAttributeFilter.findMany({
+      where: {
+        attributeClassId,
+        survey: {
+          status: "inProgress",
+        },
+      },
+      select: {
+        survey: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+
+    const activeSurveys = activeSurveysData.map((t) => t.survey.name);
+
+    const inactiveSurveysData = await prisma.surveyAttributeFilter.findMany({
+      where: {
+        attributeClassId,
+        survey: {
+          status: {
+            in: ["paused", "completed"],
+          },
+        },
+      },
+      select: {
+        survey: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+    const inactiveSurveys = inactiveSurveysData.map((t) => t.survey.name);
+
+    return res.json({
+      ...attributeClass,
+      activeSurveys,
+      inactiveSurveys,
+    });
   }
 
   // PUT