From 2a2cb14f6c3495ff7cfa00c5ab63bba03fd196c8 Mon Sep 17 00:00:00 2001
From: Alan <alannnc@gmail.com>
Date: Wed, 6 Sep 2023 17:25:17 -0700
Subject: [PATCH] Handle children on event types, managed events, readonly and
 team count

---
 apps/web/pages/event-types/index.tsx          | 74 ++++++++++---------
 .../migration.sql                             | 12 +++
 packages/prisma/schema.prisma                 |  6 ++
 .../eventTypes/infiniteEventTypes.handler.ts  | 21 ++++--
 .../routers/viewer/teams/list.handler.ts      | 12 +++
 5 files changed, 85 insertions(+), 40 deletions(-)
 create mode 100644 packages/prisma/migrations/202309061610320_create_team_member_count_view/migration.sql

diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index fa6142d746..2ec6ddd4d9 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -29,7 +29,6 @@ import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { SchedulingType } from "@calcom/prisma/enums";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
@@ -92,10 +91,12 @@ type EventType = EventTypeList[number];
 
 interface EventTypeListProps {
   data: EventTypeList;
+  readonly?: boolean;
 }
 
 interface MobileTeamsTabProps {
   teamEventTypes: EventTypeList[];
+  readonly?: boolean;
 }
 
 const querySchema = z.object({
@@ -103,7 +104,7 @@ const querySchema = z.object({
 });
 
 const MobileTeamsTab: FC<MobileTeamsTabProps> = (props: MobileTeamsTabProps) => {
-  const { teamEventTypes } = props;
+  const { teamEventTypes, readonly } = props;
   const orgBranding = useOrgBranding();
   const tabs = teamEventTypes
     .filter((item) => item !== undefined)
@@ -130,7 +131,7 @@ const MobileTeamsTab: FC<MobileTeamsTabProps> = (props: MobileTeamsTabProps) =>
   return (
     <div>
       <HorizontalTabs tabs={tabs} />
-      {events && events.length && <EventTypeList data={events} />}
+      {events && events.length && <EventTypeList data={events} readonly={readonly} />}
     </div>
   );
 };
@@ -147,9 +148,8 @@ const getEventTypeSlug = (eventType: EventType, t: TFunction) => {
   }
 };
 
-const Item = ({ eventType }: { eventType: EventType }) => {
+const Item = ({ eventType, readonly }: { eventType: EventType; readonly?: boolean }) => {
   const { t } = useLocale();
-  const readOnly = false;
 
   const content = () => (
     <div>
@@ -165,7 +165,7 @@ const Item = ({ eventType }: { eventType: EventType }) => {
         {getEventTypeSlug(eventType, t)}
       </small>
 
-      {readOnly && (
+      {readonly && (
         <Badge variant="gray" className="ml-2">
           {t("readonly")}
         </Badge>
@@ -173,7 +173,7 @@ const Item = ({ eventType }: { eventType: EventType }) => {
     </div>
   );
 
-  return readOnly ? (
+  return readonly ? (
     <div className="flex-1 overflow-hidden pr-4 text-sm">
       {content()}
       <EventTypeDescription
@@ -200,7 +200,7 @@ const Item = ({ eventType }: { eventType: EventType }) => {
           {getEventTypeSlug(eventType, t)}
         </small>
 
-        {readOnly && (
+        {readonly && (
           <Badge variant="gray" className="ml-2">
             {t("readonly")}
           </Badge>
@@ -220,7 +220,7 @@ const Item = ({ eventType }: { eventType: EventType }) => {
 
 const MemoizedItem = memo(Item);
 
-export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
+export const EventTypeList = ({ data, readonly }: EventTypeListProps): JSX.Element => {
   const { t } = useLocale();
   const router = useRouter();
   const pathname = usePathname();
@@ -391,11 +391,10 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
           const calLink = `${orgBranding?.fullDomain ?? CAL_URL}/${embedLink}`;
 
           const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
-          const eventTypeMetadata = EventTypeMetaDataSchema.safeParse(eventType.metadata);
-          const isChildrenManagedEventType =
-            eventTypeMetadata.success &&
-            eventTypeMetadata.data?.managedEventConfig !== undefined &&
-            eventType.schedulingType !== SchedulingType.MANAGED;
+
+          const isChildrenManagedEventType = !!eventType.parentId;
+          const isReadOnly = readonly || isChildrenManagedEventType;
+
           return (
             <li key={eventType.id}>
               <div className="hover:bg-muted flex w-full items-center justify-between">
@@ -406,7 +405,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                   {!(lastItem && lastItem.id === eventType.id) && (
                     <ArrowButton onClick={() => moveEventType(index, 1)} arrowDirection="down" />
                   )}
-                  <MemoizedItem eventType={eventType} />
+                  <MemoizedItem eventType={eventType} readonly={isReadOnly} />
                   <div className="mt-4 hidden sm:mt-0 sm:flex">
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       {eventType.team && !isManagedEventType && (
@@ -425,16 +424,20 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                           )}
                         />
                       )}
-                      {isManagedEventType && type?.children && type.children?.length > 0 && (
+                      {isManagedEventType && eventType.children?.length > 0 && (
                         <AvatarGroup
                           className="relative right-3 top-1"
                           size="sm"
                           truncateAfter={4}
-                          items={eventType.users.map((user: Pick<User, "name" | "username">) => ({
-                            alt: user.name || "",
-                            image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
-                            title: user.name || "",
-                          }))}
+                          items={eventType.children.map(
+                            ({ users }: { users: Pick<User, "name" | "username">[] }) => ({
+                              alt: users[0].name || "",
+                              image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${
+                                users[0].username
+                              }/avatar.png`,
+                              title: users[0].name || "",
+                            })
+                          )}
                         />
                       )}
                       <div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
@@ -485,7 +488,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                               </Tooltip>
                             </>
                           )}
-                          <Dropdown modal={false}>
+                          <Dropdown modal={isReadOnly}>
                             <DropdownMenuTrigger asChild data-testid={"event-type-options-" + eventType.id}>
                               <Button
                                 type="button"
@@ -496,7 +499,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                               />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent>
-                              {!false && (
+                              {!isReadOnly && (
                                 <DropdownMenuItem>
                                   <DropdownItem
                                     type="button"
@@ -534,8 +537,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                                 </DropdownMenuItem>
                               )}
                               {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
-                              {/* @TODO: */}
-                              {false && !isChildrenManagedEventType && (
+                              {isReadOnly && !isChildrenManagedEventType && (
                                 <>
                                   <DropdownMenuSeparator />
                                   <DropdownMenuItem>
@@ -612,7 +614,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                             </DropdownItem>
                           </DropdownMenuItem>
                         ) : null}
-                        {!false && (
+                        {!isReadOnly && (
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
                               onClick={() => router.push("/event-types/" + eventType.id)}
@@ -633,8 +635,7 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => {
                           </DropdownMenuItem>
                         )}
                         {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
-                        {/* Readonly @TODO: */}
-                        {false && !isChildrenManagedEventType && (
+                        {isReadOnly && !isChildrenManagedEventType && (
                           <>
                             <DropdownMenuItem className="outline-none">
                               <DropdownItem
@@ -913,7 +914,7 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
     const teamEventTypesForTabs = eventTypePaginate
       .map((trpcFetch) => {
         const { data } = trpcFetch;
-        return data;
+        return data || [];
       })
       .filter((item) => item && item.length > 0);
     return (
@@ -925,7 +926,8 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
             <EventTypeListHeading
               teamSlugOrUsername={mainUser.username || ""}
               teamNameOrUserName={mainUser.name || ""}
-              membershipCount={firstElementPersonalEventTypes.team?.members.length || 0}
+              // Single event types have no teamMembershipCount
+              membershipCount={0}
               teamId={firstElementPersonalEventTypes.teamId}
               orgSlug={orgBranding?.slug}
             />
@@ -939,11 +941,13 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
             {/* Then we list team event types */}
             {eventTypePaginate.map((trpcFetch, index) => {
               const { data: teamEventTypes } = trpcFetch;
-              const [firstElementTeamEventTypes] = data || [];
+              const [firstElementTeamEventTypes] = teamEventTypes || [];
 
               if (!teamEventTypes || teamEventTypes.length === 0 || !firstElementTeamEventTypes.team) {
                 return null;
               }
+              const teamDataMatchWithEventType = teams && teams.length > 0 && teams[index];
+              const membershipCount = teamDataMatchWithEventType?.membershipCount || 0;
 
               return (
                 <>
@@ -951,13 +955,17 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
                     key={index}
                     teamSlugOrUsername={firstElementTeamEventTypes.team.slug || ""}
                     teamNameOrUserName={firstElementTeamEventTypes.team.name || ""}
-                    membershipCount={firstElementTeamEventTypes.team?.members.length || 0}
+                    membershipCount={membershipCount}
                     teamId={firstElementTeamEventTypes.teamId}
                     orgSlug={orgBranding?.slug}
                   />
 
                   {teamEventTypes.length > 0 ? (
-                    <EventTypeList data={teamEventTypes} key={index} />
+                    <EventTypeList
+                      data={teamEventTypes}
+                      key={index}
+                      readonly={"MEMBER" === teamDataMatchWithEventType.role}
+                    />
                   ) : (
                     <EmptyEventTypeList
                       teamId={firstElementTeamEventTypes.teamId}
diff --git a/packages/prisma/migrations/202309061610320_create_team_member_count_view/migration.sql b/packages/prisma/migrations/202309061610320_create_team_member_count_view/migration.sql
new file mode 100644
index 0000000000..7f507bbad5
--- /dev/null
+++ b/packages/prisma/migrations/202309061610320_create_team_member_count_view/migration.sql
@@ -0,0 +1,12 @@
+-- View: public.TeamMemberCount
+
+-- DROP VIEW public."TeamMemberCount";
+
+CREATE OR REPLACE VIEW public."TeamMemberCount"
+ AS
+  SELECT t.id,
+    count(*) AS count
+   FROM "Membership" m
+     LEFT JOIN "Team" t ON t.id = m."teamId"
+  WHERE m.accepted = true
+  GROUP BY t.id;
\ No newline at end of file
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index c6bf3208d4..66a5e2b9a9 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -900,6 +900,7 @@ model SelectedSlots {
   @@unique(fields: [userId, slotUtcStartDate, slotUtcEndDate, uid], name: "selectedSlotUnique")
 }
 
+// Let's keep views at the bottom of the schema
 view BookingTimeStatus {
   id            Int            @unique
   uid           String?
@@ -919,3 +920,8 @@ view BookingTimeStatus {
   timeStatus    String?
   eventParentId Int?
 }
+
+view TeamMemberCount {
+  id    Int @unique
+  count Int
+}
diff --git a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts
index 8f59bc1c21..860b369279 100644
--- a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts
+++ b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts
@@ -55,6 +55,7 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) =
       hidden: true,
       metadata: true,
       teamId: true,
+      parentId: true,
       users: {
         select: {
           id: true,
@@ -62,23 +63,29 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) =
           name: true,
         },
       },
+      children: {
+        select: {
+          id: true,
+          users: {
+            select: {
+              id: true,
+              username: true,
+              name: true,
+            },
+          },
+        },
+      },
       team: {
         select: {
           id: true,
           slug: true,
           name: true,
-          members: {
-            select: {
-              userId: true,
-              role: true,
-            },
-          },
         },
       },
     },
     skip,
     take: pageSize,
   });
-  console.log("result", result);
+
   return result;
 };
diff --git a/packages/trpc/server/routers/viewer/teams/list.handler.ts b/packages/trpc/server/routers/viewer/teams/list.handler.ts
index e5cfa15f27..3046f05ac2 100644
--- a/packages/trpc/server/routers/viewer/teams/list.handler.ts
+++ b/packages/trpc/server/routers/viewer/teams/list.handler.ts
@@ -59,6 +59,17 @@ export const listHandler = async ({ ctx }: ListOptions) => {
     orderBy: { role: "desc" },
   });
 
+  // This can be optimized by using a custom view between membership and team and teamMemberCount
+  const membershipCount = await prisma.teamMemberCount.findMany({
+    where: {
+      id: {
+        in: memberships.map((m) => m.teamId),
+      },
+    },
+  });
+
+  console.log({ membershipCount });
+
   return memberships
     .filter((mmship) => {
       const metadata = teamMetadataSchema.parse(mmship.team.metadata);
@@ -70,5 +81,6 @@ export const listHandler = async ({ ctx }: ListOptions) => {
       ..._team,
       /** To prevent breaking we only return non-email attached token here, if we have one */
       inviteToken: inviteTokens.find((token) => token.identifier === "invite-link-for-teamId-" + _team.id),
+      membershipCount: membershipCount.find((m) => m.id === _team.id)?.count || 0,
     }));
 };