perf: fetch server side data for workflow details page

apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx

@@ -1,10 +1,23 @@
+import { createRouterCaller } from "app/_trpc/context";
 import type { PageProps } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import type { Metadata } from "next";
+import { cookies, headers } from "next/headers";
+import { notFound } from "next/navigation";
+import { redirect } from "next/navigation";
 import { z } from "zod";
 
-// import { cookies, headers } from "next/headers";
-// import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-// import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import LegacyPage from "@calcom/features/ee/workflows/pages/workflow";
+import { eventTypesRouter } from "@calcom/trpc/server/routers/viewer/eventTypes/_router";
+import {
+  getCachedUser,
+  getCachedWorkflowById,
+  getCachedWorkflowVerifiedNumber,
+  getCachedWorkflowVerifiedEmails,
+} from "@calcom/web/cache/workflows";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
 const querySchema = z.object({
   workflow: z
@@ -15,32 +28,66 @@ const querySchema = z.object({
     .transform((val) => Number(val)),
 });
 
+export const generateMetadata = async ({ params }: PageProps): Promise<Metadata | null> => {
+  const parsed = querySchema.safeParse(await params);
+  if (!parsed.success) {
+    notFound();
+  }
+  const workflow = await getCachedWorkflowById(parsed.data.workflow);
+  if (!workflow) {
+    notFound();
+  }
+  return await _generateMetadata(
+    (t) => (workflow && workflow.name ? workflow.name : t("untitled")),
+    () => "",
+    undefined,
+    undefined,
+    `/workflows/${parsed.data.workflow}`
+  );
+};
+
 const Page = async ({ params }: PageProps) => {
-  // const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
-  // const user = session?.user;
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+
+  if (!session?.user?.id) {
+    redirect("/auth/login");
+  }
+
+  if (!session?.user?.email) {
+    throw new Error("User email not found");
+  }
+
   const parsed = querySchema.safeParse(await params);
-  if (!parsed.success) throw new Error("Invalid workflow id");
-
-  // const workflow = await WorkflowRepository.getById({ id: +parsed.data.workflow });
-  // let verifiedEmails, verifiedNumbers;
-  // try {
-  //   verifiedEmails = await WorkflowRepository.getVerifiedEmails({
-  //     userEmail: user?.email ?? null,
-  //     userId: user?.id ?? null,
-  //     teamId: workflow?.team?.id,
-  //   });
-  // } catch (err) {}
-  // try {
-  //   verifiedNumbers = await WorkflowRepository.getVerifiedNumbers({
-  //     userId: user?.id ?? null,
-  //     teamId: workflow?.team?.id,
-  //   });
-  // } catch (err) {}
+
+  if (!parsed.success) {
+    notFound();
+  }
+  const workFlowId = parsed.data.workflow;
+
+  const eventCaller = await createRouterCaller(eventTypesRouter);
+
+  const workflowData = await getCachedWorkflowById(workFlowId);
+
+  if (!workflowData) return notFound();
+
+  const isOrg = workflowData?.team?.isOrganization ?? false;
+  const teamId = workflowData?.teamId ?? undefined;
+
+  const [verifiedEmails, verifiedNumbers, eventsData, user] = await Promise.all([
+    getCachedWorkflowVerifiedEmails(session.user.email, session.user.id, teamId),
+    teamId ? getCachedWorkflowVerifiedNumber(teamId, session.user.id) : [],
+    eventCaller.getTeamAndEventTypeOptions({ teamId, isOrg }),
+    getCachedUser(session.user, session.upId),
+  ]);
 
   return (
     <LegacyPage
-      workflow={parsed.data.workflow}
-      //  workflowData={workflow} verifiedEmails={verifiedEmails} verifiedNumbers={verifiedNumbers}
+      user={user}
+      eventsData={eventsData}
+      workflowId={workFlowId}
+      workflow={workflowData}
+      verifiedNumbers={verifiedNumbers}
+      verifiedEmails={verifiedEmails}
     />
   );
 };

apps/web/cache/workflows.ts

@@ -0,0 +1,80 @@
+"use server";
+
+import { revalidateTag, unstable_cache } from "next/cache";
+
+import { NEXTJS_CACHE_TTL } from "@calcom/lib/constants";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import { WorkflowRepository } from "@calcom/lib/server/repository/workflow";
+
+const CACHE_TAGS = {
+  WORKFLOWS_LIST: "WorkflowRepository.filteredList",
+  WORKFLOW_BY_ID: "WorkflowRepository.getById",
+  VERIFIED_NUMBERS: "WorkflowRepository.getVerifiedNumbers",
+  VERIFIED_EMAILS: "WorkflowRepository.getVerifiedEmails",
+  ENRICHED_USER: "UserRepository.enrichUserWithTheProfile",
+} as const;
+
+export const getCachedWorkflowsFilteredList = unstable_cache(
+  async (userId: number, filters: any) => {
+    return await WorkflowRepository.getFilteredList({ userId, input: { filters } });
+  },
+  ["getCachedWorkflowsFilteredList"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.WORKFLOWS_LIST],
+  }
+);
+
+export async function revalidateWorkflowsList() {
+  revalidateTag(CACHE_TAGS.WORKFLOWS_LIST);
+}
+
+export const getCachedWorkflowById = unstable_cache(
+  async (id: number) => {
+    return await WorkflowRepository.getById({ id });
+  },
+  ["getCachedWorkflowById"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.WORKFLOW_BY_ID],
+  }
+);
+
+export const getCachedWorkflowVerifiedNumber = unstable_cache(
+  async (teamId: number, userId: number) => {
+    return await WorkflowRepository.getVerifiedNumbers({ teamId, userId });
+  },
+  ["getCachedWorkflowVerifiedNumber"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.VERIFIED_NUMBERS],
+  }
+);
+export const getCachedWorkflowVerifiedEmails = unstable_cache(
+  async (userEmail: string, userId: number, teamId?: number) => {
+    return await WorkflowRepository.getVerifiedEmails({ userEmail, userId, teamId });
+  },
+  ["getCachedWorkflowVerifiedEmails"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.VERIFIED_EMAILS],
+  }
+);
+
+export const getCachedUser = unstable_cache(
+  async (user: any, upId: string) => {
+    return await UserRepository.enrichUserWithTheProfile({ user, upId });
+  },
+  ["getCachedUser"],
+  {
+    revalidate: NEXTJS_CACHE_TTL,
+    tags: [CACHE_TAGS.ENRICHED_USER],
+  }
+);
+
+export async function revalidateWorkflowById() {
+  revalidateTag(CACHE_TAGS.WORKFLOW_BY_ID);
+}
+export async function revalidateWorkflowVerifiedNumbers() {
+  revalidateTag(CACHE_TAGS.VERIFIED_NUMBERS);
+}

apps/web/modules/settings/admin/components/UsersTable.tsx

@@ -34,7 +34,7 @@ function UsersTable({ setSMSLockState }: Props) {
   const { data: usersAndTeams } = trpc.viewer.admin.getSMSLockStateTeamsUsers.useQuery();
 
   if (!usersAndTeams) {
-    return <></>;
+    return null;
   }
 
   const users = usersAndTeams.users.locked.concat(usersAndTeams.users.reviewNeeded);

packages/features/ee/workflows/components/AddActionDialog.tsx

@@ -56,6 +56,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
   const [isPhoneNumberNeeded, setIsPhoneNumberNeeded] = useState(false);
   const [isSenderIdNeeded, setIsSenderIdNeeded] = useState(false);
   const [isEmailAddressNeeded, setIsEmailAddressNeeded] = useState(false);
+
   const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery();
 
   const formSchema = z.object({

packages/features/ee/workflows/components/WorkFlowFormSkeleton.tsx

@@ -0,0 +1,23 @@
+import { SkeletonText } from "@calcom/ui/components/skeleton";
+
+export default function WorkFlowFormSkeleton() {
+  return (
+    <div className="min-w-80 bg-default border-subtle w-full space-y-6 rounded-md border p-7">
+      <div className="flex items-center gap-4">
+        <SkeletonText className="w-6 rounded-full" />
+        <div className="flex w-full flex-col gap-2">
+          <SkeletonText className="w-28" />
+          <SkeletonText className="w-40" />
+        </div>
+      </div>
+      <div className="border-subtle border-t" />
+      {Array.from({ length: 2 }).map((_, idx) => (
+        <div key={idx} className="space-y-2">
+          <SkeletonText className="w-28" />
+          <SkeletonText className="w-full" />
+        </div>
+      ))}
+      <SkeletonText className="w-full" />
+    </div>
+  );
+}

packages/features/ee/workflows/components/WorkflowDetailsPage.tsx

@@ -4,10 +4,12 @@ import { useState, useEffect } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { Controller } from "react-hook-form";
 
+import WorkFlowFormSkeleton from "@calcom/features/ee/workflows/components/WorkFlowFormSkeleton";
 import { SENDER_ID, SENDER_NAME, SCANNING_WORKFLOW_STEPS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { WorkflowActions } from "@calcom/prisma/enums";
 import { WorkflowTemplates } from "@calcom/prisma/enums";
+import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
@@ -24,6 +26,8 @@ import WorkflowStepContainer from "./WorkflowStepContainer";
 type User = RouterOutputs["viewer"]["me"]["get"];
 
 interface Props {
+  verifiedNumbers: RouterOutputs["viewer"]["workflows"]["getVerifiedNumbers"] | undefined;
+  verifiedEmails: RouterOutputs["viewer"]["workflows"]["getVerifiedEmails"] | undefined;
   form: UseFormReturn<FormValues>;
   workflowId: number;
   selectedOptions: Option[];
@@ -36,10 +40,22 @@ interface Props {
 }
 
 export default function WorkflowDetailsPage(props: Props) {
-  const { form, workflowId, selectedOptions, setSelectedOptions, teamId, isOrg, allOptions } = props;
+  const {
+    form,
+    workflowId,
+    verifiedEmails,
+    verifiedNumbers,
+    selectedOptions,
+    setSelectedOptions,
+    teamId,
+    isOrg,
+    allOptions,
+  } = props;
   const { t } = useLocale();
   const router = useRouter();
 
+  const { data: actionOptions } = trpc.viewer.workflows.getWorkflowActionOptions.useQuery();
+
   const [isAddActionDialogOpen, setIsAddActionDialogOpen] = useState(false);
 
   const [reload, setReload] = useState(false);
@@ -175,21 +191,26 @@ export default function WorkflowDetailsPage(props: Props) {
 
         {/* Workflow Trigger Event & Steps */}
         <div className="bg-muted border-subtle w-full rounded-md border p-3 py-5 md:ml-3 md:p-8">
-          {form.getValues("trigger") && (
-            <div>
-              <WorkflowStepContainer
-                form={form}
-                user={props.user}
-                teamId={teamId}
-                readOnly={props.readOnly}
-              />
-            </div>
+          {form.getValues("trigger") ? (
+            <WorkflowStepContainer
+              verifiedNumbers={verifiedNumbers}
+              verifiedEmails={verifiedEmails}
+              form={form}
+              user={props.user}
+              teamId={teamId}
+              readOnly={props.readOnly}
+              actionOptions={actionOptions}
+            />
+          ) : (
+            <WorkFlowFormSkeleton />
           )}
           {form.getValues("steps") && (
             <>
               {form.getValues("steps")?.map((step) => {
                 return (
                   <WorkflowStepContainer
+                    verifiedNumbers={verifiedNumbers}
+                    verifiedEmails={verifiedEmails}
                     key={step.id}
                     form={form}
                     user={props.user}
@@ -198,6 +219,7 @@ export default function WorkflowDetailsPage(props: Props) {
                     setReload={setReload}
                     teamId={teamId}
                     readOnly={props.readOnly}
+                    actionOptions={actionOptions}
                   />
                 );
               })}